chore: refactor code a little to use slotmixin

.changeset/nervous-lions-trade.md

@@ -0,0 +1,5 @@
+---
+'@lion/input-amount': patch
+---
+
+Empty or invalid currency now removes the currency label node, this is restored when the currency is valid again.

packages/input-amount/src/LionInputAmount.js

@@ -30,6 +30,20 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
     };
   }
 
+  get slots() {
+    return {
+      ...super.slots,
+      after: () => {
+        const el = document.createElement('span');
+        // The data-label attribute will make sure that FormControl adds this to
+        // input[aria-labelledby]
+        el.setAttribute('data-label', '');
+        el.textContent = this.__currencyLabel;
+        return el;
+      },
+    };
+  }
+
   static get styles() {
     return [
       ...super.styles,
@@ -49,6 +63,7 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
     this.currency = undefined;
     /** @type {string | undefined} */
     this.locale = undefined;
+    this.__currencyDisplayNodeIsConnected = true;
     this.defaultValidators.push(new IsNumber());
   }
 
@@ -80,6 +95,20 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
     }
   }
 
+  /**
+   * Upon connecting slot mixin, we should check if
+   * the after slot was created by the slot mixin,
+   * and if so, we should execute the currency changed flow
+   * which evaluates whether the slot node should be
+   * removed for invalid currencies
+   */
+  _connectSlotMixin() {
+    super._connectSlotMixin();
+    if (this._isPrivateSlot('after')) {
+      this._onCurrencyChanged({ currency: this.currency || null });
+    }
+  }
+
   /**
    * @param {string} newLocale
    * @param {string} oldLocale
@@ -108,31 +137,34 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
    * @protected
    */
   _onCurrencyChanged({ currency }) {
+    if (!this.__currencyDisplayNode) {
+      return;
+    }
+
     this.formatOptions.currency = currency || undefined;
-    if (this.currency) {
+    if (currency) {
-      if (!this.__currencyDisplayNode) {
+      if (!this.__currencyDisplayNodeIsConnected) {
-        this.__currencyDisplayNode = this._createCurrencyDisplayNode();
+        this.appendChild(this.__currencyDisplayNode);
+        this.__currencyDisplayNodeIsConnected = true;
       }
       this.__currencyDisplayNode.textContent = this.__currencyLabel;
-      this._calculateValues({ source: null });
-    } else {
-      this.__currencyDisplayNode = undefined;
-    }
-    this.__setCurrencyDisplayLabel();
-  }
 
-  /**
+      try {
-   * @returns a newly created node for displaying the currency
+        this._calculateValues({ source: null });
-   * @protected
+      } catch (e) {
-   */
+        // In case Intl.NumberFormat gives error for invalid currency
-  _createCurrencyDisplayNode() {
+        // we should catch, remove the node, and rethrow (since it's still a user error)
-    const el = document.createElement('span');
+        if (e instanceof RangeError) {
-    // The data-label attribute will make sure that FormControl adds this to
+          this.__currencyDisplayNode?.remove();
-    // input[aria-labelledby]
+          this.__currencyDisplayNodeIsConnected = false;
-    el.setAttribute('data-label', '');
+        }
-    el.textContent = this.__currencyLabel;
+        throw e;
-    el.slot = 'after';
+      }
-    return el;
+      this.__setCurrencyDisplayLabel();
+    } else {
+      this.__currencyDisplayNode?.remove();
+      this.__currencyDisplayNodeIsConnected = false;
+    }
   }
 
   /**
@@ -140,18 +172,12 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
    * @private
    */
   get __currencyDisplayNode() {
-    return Array.from(this.children).find(child => child.slot === 'after');
+    const node = Array.from(this.children).find(child => child.slot === 'after');
-  }
-
-  /**
-   * @private
-   */
-  set __currencyDisplayNode(node) {
     if (node) {
-      this.appendChild(node);
+      this.__storedCurrencyDisplayNode = node;
-    } else {
-      this.__currencyDisplayNode?.remove();
     }
+
+    return node || this.__storedCurrencyDisplayNode;
   }
 
   /** @private */

packages/input-amount/test/lion-input-amount.test.js

@@ -134,7 +134,6 @@ describe('<lion-input-amount>', () => {
     const el = /** @type {LionInputAmount} */ (
       await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`)
     );
-
     expect(
       /** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'after')
         ?.innerText,
@@ -230,7 +229,7 @@ describe('<lion-input-amount>', () => {
     expect(currLabel?.getAttribute('aria-label')).to.equal('euros');
   });
 
-  it('sets currency label on the after after element', async () => {
+  it('sets currency label on the after element', async () => {
     const el = /** @type {LionInputAmount} */ (
       await fixture(`
         <lion-input-amount>