Make Currency Display Node Private

packages/input-amount/src/LionInputAmount.js

@@ -110,36 +110,17 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
   _onCurrencyChanged({ currency }) {
     this.formatOptions.currency = currency || undefined;
     if (this.currency) {
-      if (!this._currencyDisplayNode) {
+      if (!this.__currencyDisplayNode) {
-        this._currencyDisplayNode = this._createCurrencyDisplayNode();
+        this.__currencyDisplayNode = this._createCurrencyDisplayNode();
       }
-      this._currencyDisplayNode.textContent = this.__currencyLabel;
+      this.__currencyDisplayNode.textContent = this.__currencyLabel;
       this._calculateValues({ source: null });
     } else {
-      this._currencyDisplayNode = undefined;
+      this.__currencyDisplayNode = undefined;
     }
     this.__setCurrencyDisplayLabel();
   }
 
-  /**
-   * @returns the current currency display node
-   * @protected
-   */
-  get _currencyDisplayNode() {
-    return Array.from(this.children).find(child => child.slot === 'after');
-  }
-
-  /**
-   * @protected
-   */
-  set _currencyDisplayNode(node) {
-    if (node) {
-      this.appendChild(node);
-    } else {
-      this._currencyDisplayNode?.remove();
-    }
-  }
-
   /**
    * @returns a newly created node for displaying the currency
    * @protected
@@ -154,13 +135,32 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
     return el;
   }
 
+  /**
+   * @returns the current currency display node
+   * @private
+   */
+  get __currencyDisplayNode() {
+    return Array.from(this.children).find(child => child.slot === 'after');
+  }
+
+  /**
+   * @private
+   */
+  set __currencyDisplayNode(node) {
+    if (node) {
+      this.appendChild(node);
+    } else {
+      this.__currencyDisplayNode?.remove();
+    }
+  }
+
   /** @private */
   __setCurrencyDisplayLabel() {
     // TODO: (@erikkroes) for optimal a11y, abbreviations should be part of aria-label
     // example, for a language switch with text 'en', an aria-label of 'english' is not
     // sufficient, it should also contain the abbreviation.
-    if (this._currencyDisplayNode) {
+    if (this.__currencyDisplayNode) {
-      this._currencyDisplayNode.setAttribute(
+      this.__currencyDisplayNode.setAttribute(
         'aria-label',
         this.currency ? getCurrencyName(this.currency, {}) : '',
       );

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

@@ -256,19 +256,25 @@ describe('<lion-input-amount>', () => {
       const el = /** @type {LionInputAmount} */ (
         await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`)
       );
-      expect(el._currencyDisplayNode?.getAttribute('data-label')).to.be.not.null;
+      const label = /** @type {HTMLElement[]} */ (Array.from(el.children)).find(
+        child => child.slot === 'after',
+      );
+      expect(label?.getAttribute('data-label')).to.be.not.null;
       const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ (el));
-      expect(_inputNode.getAttribute('aria-labelledby')).to.contain(el._currencyDisplayNode?.id);
+      expect(_inputNode.getAttribute('aria-labelledby')).to.contain(label?.id);
     });
 
     it('adds an aria-label to currency slot', async () => {
       const el = /** @type {LionInputAmount} */ (
         await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`)
       );
-      expect(el._currencyDisplayNode?.getAttribute('aria-label')).to.equal('euros');
+      const label = /** @type {HTMLElement[]} */ (Array.from(el.children)).find(
+        child => child.slot === 'after',
+      );
+      expect(label?.getAttribute('aria-label')).to.equal('euros');
       el.currency = 'USD';
       await el.updateComplete;
-      expect(el._currencyDisplayNode?.getAttribute('aria-label')).to.equal('US dollars');
+      expect(label?.getAttribute('aria-label')).to.equal('US dollars');
       el.currency = 'PHP';
       await el.updateComplete;
       // TODO: Chrome Intl now thinks this should be pesos instead of pisos. They're probably right.