@lion/ui 0.3.0 → 0.3.1

package/components/combobox/test/lion-combobox.test.js

@@ -12,6 +12,7 @@ import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-option.js';
 import { Required, Unparseable } from '@lion/ui/form-core.js';
 import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
 import { LitElement } from 'lit';
 import sinon from 'sinon';
 
@@ -2678,6 +2679,57 @@ describe('lion-combobox', () => {
       mimicKeyPress(visibleOptions[1], 'Enter');
       expect(el.opened).to.equal(true);
     });
+
+    it('submits form on [Enter] when listbox is closed', async () => {
+      const submitSpy = sinon.spy(e => e.preventDefault());
+      const el = /** @type {HTMLFormElement}  */ (
+        await fixture(html`
+          <form @submit=${submitSpy}>
+            <lion-combobox name="foo" multiple-choice>
+              <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+              <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+              <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+              <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+            </lion-combobox>
+            <button type="submit">submit</button>
+          </form>
+        `)
+      );
+      const combobox = /** @type {LionCombobox} */ (el.querySelector('[name="foo"]'));
+      const { _inputNode } = getComboboxMembers(combobox);
+      await combobox.updateComplete;
+      _inputNode.focus();
+      await sendKeys({
+        press: 'Enter',
+      });
+      expect(submitSpy.callCount).to.equal(1);
+    });
+
+    it('does not submit form on [Enter] when listbox is opened', async () => {
+      const submitSpy = sinon.spy(e => e.preventDefault());
+      const el = /** @type {HTMLFormElement}  */ (
+        await fixture(html`
+          <form @submit=${submitSpy}>
+            <lion-combobox name="foo" multiple-choice>
+              <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+              <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+              <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+              <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+            </lion-combobox>
+            <button type="submit">submit</button>
+          </form>
+        `)
+      );
+      const combobox = /** @type {LionCombobox} */ (el.querySelector('[name="foo"]'));
+      const { _inputNode } = getComboboxMembers(combobox);
+      combobox.opened = true;
+      await combobox.updateComplete;
+      _inputNode.focus();
+      await sendKeys({
+        press: 'Enter',
+      });
+      expect(submitSpy.callCount).to.equal(0);
+    });
   });
 
   describe('Match Mode', () => {

package/components/listbox/src/ListboxMixin.js

@@ -294,7 +294,6 @@ const ListboxMixinImplementation = superclass =>
        * @protected
        */
       this._repropagationRole = 'choice-group'; // configures FormControlMixin
-
       /**
        * When listbox is coupled to a textbox (in case we are dealing with a combobox),
        * spaces should not select an element (they need to be put in the textbox)
@@ -612,7 +611,9 @@ const ListboxMixinImplementation = superclass =>
           if (key === ' ' && this._listboxReceivesNoFocus) {
             return;
           }
-          ev.preventDefault();
+          if (key === ' ') {
+            ev.preventDefault();
+          }
           if (!this.formElements[this.activeIndex]) {
             return;
           }

package/components/listbox/test-suites/ListboxMixin.suite.js

@@ -13,6 +13,7 @@ import {
   nextFrame,
   unsafeStatic,
 } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import { getListboxMembers } from '../../../exports/listbox-test-helpers.js';
 
@@ -673,12 +674,41 @@ export function runListboxMixinSuite(customConfig = {}) {
             mimicKeyPress(_listboxNode, 'Enter');
             expect(options[1].checked).to.be.true;
           });
+
+          it('submits form on [Enter] when inputNode is an instance of HTMLInputNode', async () => {
+            const submitSpy = sinon.spy(e => e.preventDefault());
+            const el = /** @type {HTMLFormElement}  */ (
+              await _fixture(html`
+              <form @submit=${submitSpy}>
+                <${tag} name="foo">
+                  <${optionTag} .choiceValue="${'Artichoke'}">Artichoke</${optionTag}>
+                  <${optionTag} .choiceValue="${'Bla'}">Bla</${optionTag}>
+                  <${optionTag} .choiceValue="${'Chard'}">Chard</${optionTag}>
+                </${tag}>
+                <button type="submit">submit</button>
+              </form>
+            `)
+            );
+            const listbox = /** @type {LionListbox} */ (el.querySelector('[name="foo"]'));
+            const { _inputNode } = getListboxMembers(listbox);
+            if (!(_inputNode instanceof HTMLInputElement)) {
+              return;
+            }
+            await listbox.updateComplete;
+            // @ts-ignore allow protected members in tests
+
+            _inputNode.focus();
+            await sendKeys({
+              press: 'Enter',
+            });
+            expect(submitSpy.callCount).to.equal(1);
+          });
         });
 
         describe('Space', () => {
           it('selects active option when "_listboxReceivesNoFocus" is true', async () => {
             // When listbox is not focusable (in case of a combobox), the user should be allowed
-            // to enter a space in the focusable element (texbox)
+            // to enter a space in the focusable element (textbox)
             const el = /** @type {LionListbox} */ (
               await fixture(html`
                 <${tag} opened name="foo" ._listboxReceivesNoFocus="${false}" autocomplete="none" show-all-on-empty>

package/components/localize/src/number/utils/normalize-format-number-to-parts/forceNoSpaceBetweenCurrencySymbolAndNumber.js

@@ -0,0 +1,22 @@
+/**
+ * Force no space between currency symbol and amount
+ *
+ * @typedef {import('../../../../types/LocalizeMixinTypes.js').FormatNumberPart} FormatNumberPart
+ * @param {FormatNumberPart[]} formattedParts
+ * @param {import('../../../../types/LocalizeMixinTypes.js').FormatNumberOptions} options
+ * @returns {FormatNumberPart[]}
+ */
+export function forceNoSpaceBetweenCurrencySymbolAndNumber(
+  formattedParts,
+  { currency, currencyDisplay } = {},
+) {
+  const result = formattedParts;
+  if (formattedParts.length > 1 && currencyDisplay === 'symbol' && currency) {
+    formattedParts.forEach((part, i) => {
+      if (part.type === 'literal') {
+        result[i].value = '';
+      }
+    });
+  }
+  return result;
+}

package/components/localize/src/number/utils/normalize-format-number-to-parts/forceSymbols.js

@@ -0,0 +1,64 @@
+/**
+ * @typedef {import('../../../../types/LocalizeMixinTypes.js').FormatNumberPart} FormatNumberPart
+ */
+
+/** @type {Object.<string,string>} */
+const CURRENCY_CODE_SYMBOL_MAP = {
+  EUR: '€',
+  USD: '$',
+  JPY: '¥',
+};
+
+/**
+ * Change the symbols differences in browsers
+ *
+ * @param {FormatNumberPart[]} formattedParts
+ * @param {import('../../../../types/LocalizeMixinTypes.js').FormatNumberOptions} options
+ * @param {string[]} currencyScope
+ * @returns {FormatNumberPart[]}
+ */
+export function forceSymbols(formattedParts, { currency, currencyDisplay } = {}, currencyScope) {
+  const result = formattedParts;
+  if (
+    formattedParts.length > 1 &&
+    currencyDisplay === 'symbol' &&
+    currency &&
+    currencyScope.includes(currency)
+  ) {
+    formattedParts.forEach((part, i) => {
+      if (part.type === 'currency' && Object.keys(CURRENCY_CODE_SYMBOL_MAP).includes(currency)) {
+        result[i].value = CURRENCY_CODE_SYMBOL_MAP[currency];
+      }
+    });
+  }
+  return result;
+}
+
+/**
+ * Change the symbols for fr-BE differences in browsers
+ *
+ * @param {FormatNumberPart[]} formattedParts
+ * @param {import('../../../../types/LocalizeMixinTypes.js').FormatNumberOptions} options
+ * @param {string[]} currencyScope
+ * @returns {FormatNumberPart[]}
+ */
+export function forceFRBESymbols(
+  formattedParts,
+  { currency, currencyDisplay } = {},
+  currencyScope,
+) {
+  const result = formattedParts;
+  if (
+    formattedParts.length > 1 &&
+    currencyDisplay === 'symbol' &&
+    currency &&
+    currencyScope.includes(currency)
+  ) {
+    formattedParts.forEach((part, i) => {
+      if (part.type === 'currency' && Object.keys(CURRENCY_CODE_SYMBOL_MAP).includes(currency)) {
+        result[i].value = '$US';
+      }
+    });
+  }
+  return result;
+}

package/components/localize/src/number/utils/normalize-format-number-to-parts/normalizeIntl.js

@@ -1,12 +1,12 @@
 import { getGroupSeparator } from '../../getGroupSeparator.js';
 import { forceAddGroupSeparators } from './forceAddGroupSeparators.js';
 import { forceCurrencyToEnd } from './forceCurrencyToEnd.js';
+import { forceNoSpaceBetweenCurrencySymbolAndNumber } from './forceNoSpaceBetweenCurrencySymbolAndNumber.js';
 import { forceNormalSpaces } from './forceNormalSpaces.js';
 import { forceSpaceBetweenCurrencyCodeAndNumber } from './forceSpaceBetweenCurrencyCodeAndNumber.js';
-import { forceYenSymbol } from './forceYenSymbol.js';
 import { forceSpaceInsteadOfZeroForGroup } from './forceSpaceInsteadOfZeroForGroup.js';
 import { forceTryCurrencyCode } from './forceTryCurrencyCode.js';
-import { forceENAUSymbols } from './forceENAUSymbols.js';
+import { forceFRBESymbols, forceSymbols } from './forceSymbols.js';
 
 /**
  * Normalizes function "formatNumberToParts"
@@ -33,9 +33,18 @@ export function normalizeIntl(formattedParts, options = {}, _locale) {
     if (_locale === 'en-GB' || _locale === 'en-US' || _locale === 'en-AU' || _locale === 'en-PH') {
       normalize = forceSpaceBetweenCurrencyCodeAndNumber(normalize, options);
     }
-    // Force missing Japanese Yen symbol
+    if (_locale === 'en-AU') {
+      normalize = forceSymbols(normalize, options, ['EUR', 'USD', 'JPY']);
+      normalize = forceNoSpaceBetweenCurrencySymbolAndNumber(normalize, options);
+    }
+    if (_locale === 'en-PH') {
+      normalize = forceSymbols(normalize, options, ['USD', 'JPY']);
+    }
     if (_locale === 'fr-FR' || _locale === 'fr-BE') {
-      normalize = forceYenSymbol(normalize, options);
+      normalize = forceSymbols(normalize, options, ['JPY']);
+    }
+    if (_locale === 'fr-BE') {
+      normalize = forceFRBESymbols(normalize, options, ['USD']);
     }
     if (_locale === 'tr-TR') {
       normalize = forceTryCurrencyCode(normalize, options);
@@ -43,9 +52,6 @@ export function normalizeIntl(formattedParts, options = {}, _locale) {
         normalize = forceCurrencyToEnd(normalize);
       }
     }
-    if (_locale === 'en-AU') {
-      normalize = forceENAUSymbols(normalize, options);
-    }
   }
   return normalize;
 }

package/components/localize/test/number/formatNumber.test.js

@@ -2,12 +2,6 @@ import { expect } from '@open-wc/testing';
 import { getLocalizeManager, formatNumber } from '@lion/ui/localize-no-side-effects.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 
-// TODO: This is broken only in Safari 13.1.2 Wait till ci is on 13.1.3 and remove
-const isSafari = (() => {
-  const ua = navigator.userAgent.toLowerCase();
-  return ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1;
-})();
-
 const currencyCode = /** @param {string} currency */ currency => ({
   style: 'currency',
   currencyDisplay: 'code',
@@ -278,19 +272,17 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
     });
 
     describe('en-AU', () => {
-      // TODO: This is broken only in Safari 13.1.2 Wait till ci is on 13.1.3 and remove
-      if (isSafari) {
-        return;
-      }
-
       it('supports basics', () => {
         localizeManager.locale = 'en-AU';
         expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('EUR 123,456.79');
         expect(formatNumber(123456.789, currencyCode('USD'))).to.equal('USD 123,456.79');
         expect(formatNumber(123456.789, currencyCode('JPY'))).to.equal('JPY 123,457');
-        expect(formatNumber(123456.789, currencySymbol('EUR'))).to.equal('€123,456.79'); // TODO: fix
-        expect(formatNumber(123456.789, currencySymbol('USD'))).to.equal('$123,456.79'); // TODO: fix
-        expect(formatNumber(123456.789, currencySymbol('JPY'))).to.equal('¥123,457'); // TODO: fix
+        expect(formatNumber(123456.789, currencySymbol('EUR'))).to.equal('€123,456.79');
+        expect(formatNumber(-123456.789, currencySymbol('EUR'))).to.equal('−€123,456.79');
+        expect(formatNumber(123456.789, currencySymbol('USD'))).to.equal('$123,456.79');
+        expect(formatNumber(-123456.789, currencySymbol('USD'))).to.equal('−$123,456.79');
+        expect(formatNumber(123456.789, currencySymbol('JPY'))).to.equal('¥123,457');
+        expect(formatNumber(-123456.789, currencySymbol('JPY'))).to.equal('−¥123,457');
       });
     });
 
@@ -319,11 +311,6 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
     });
 
     describe('nl-BE', () => {
-      // TODO: This is broken only in Safari 13.1.2 Wait till ci is on 13.1.3 and remove
-      if (isSafari) {
-        return;
-      }
-
       it('supports basics', () => {
         localizeManager.locale = 'nl-BE';
         expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('123.456,79 EUR');
@@ -349,10 +336,6 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
 
     describe('fr-BE', () => {
       it('supports basics', () => {
-        // TODO: This test is broken on Safari, check and fix when the intl change is permanent
-        if (isSafari) {
-          return;
-        }
         localizeManager.locale = 'fr-BE';
         expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('123 456,79 EUR');
         expect(formatNumber(123456.789, currencyCode('USD'))).to.equal('123 456,79 USD');
@@ -397,11 +380,6 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
     });
 
     describe('tr-TR', () => {
-      // TODO: This is broken only in Safari 13.1.2 Wait till ci is on 13.1.3 and remove
-      if (isSafari) {
-        return;
-      }
-
       it('supports basics', () => {
         localizeManager.locale = 'tr-TR';
         expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('123.456,79 EUR');