@lion/ui 0.0.14 → 0.1.1

package/components/localize/test/date/getDateFormatBasedOnLocale.test.js

@@ -1,16 +1,21 @@
 import { expect } from '@open-wc/testing';
-import { localize, getDateFormatBasedOnLocale } from '@lion/ui/localize.js';
+import {
+  getLocalizeManager,
+  getDateFormatBasedOnLocale,
+} from '@lion/ui/localize-no-side-effects.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 
 describe('getDateFormatBasedOnLocale()', () => {
+  const localizeManager = getLocalizeManager();
+
   beforeEach(() => {
     localizeTearDown();
   });
 
   it('returns the positions of day, month and year', async () => {
-    localize.locale = 'en-GB';
+    localizeManager.locale = 'en-GB';
     expect(getDateFormatBasedOnLocale()).to.equal('day-month-year');
-    localize.locale = 'en-US';
+    localizeManager.locale = 'en-US';
     expect(getDateFormatBasedOnLocale()).to.equal('month-day-year');
   });
 });

package/components/localize/test/date/parseDate.test.js

@@ -1,23 +1,24 @@
 import { expect } from '@open-wc/testing';
-import { parseDate, localize } from '@lion/ui/localize.js';
+import { parseDate, getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 
 /**
  *
  * @param {Date | undefined} value
- * @param {Date} date
+ * @param {Date | undefined} date
  */
 function equalsDate(value, date) {
   return (
     Object.prototype.toString.call(value) === '[object Date]' && // is Date Object
     value &&
-    value.getDate() === date.getDate() && // day
+    value.getDate() === date?.getDate() && // day
     value.getMonth() === date.getMonth() && // month
     value.getFullYear() === date.getFullYear() // year
   );
 }
 
 describe('parseDate()', () => {
+  const localizeManager = getLocalizeManager();
   beforeEach(() => {
     localizeTearDown();
   });
@@ -45,21 +46,35 @@ describe('parseDate()', () => {
   });
 
   it('handles different locales', () => {
-    localize.locale = 'en-GB';
+    localizeManager.locale = 'en-GB';
     expect(equalsDate(parseDate('31-12-1976'), new Date('1976/12/31'))).to.equal(true);
-    localize.locale = 'en-US';
+    localizeManager.locale = 'en-US';
     expect(equalsDate(parseDate('12-31-1976'), new Date('1976/12/31'))).to.equal(true);
   });
 
+  it('handles timezones of the browser and parsed date correctly', () => {
+    const referenceDate = new Date('2020/01/30');
+    localizeManager.locale = 'nl-NL';
+    const parsedDate = parseDate('30-01-2020');
+    // time zone offset of parsed date: this value is dependent on the browser (basically where the ci or local machine it runs in is located)
+    const parseDateOffset = parsedDate?.getTimezoneOffset();
+    // The parseDate time zone should be equal to the default offset of the browser
+    const browserTimeZoneOffset = referenceDate.getTimezoneOffset();
+    // This will pass, since parseDate respects browser timezone, and not UTC format
+    expect(parseDateOffset).to.equal(browserTimeZoneOffset);
+    // Optional: verify we are dealing with the same date (this is already tested in other tests?)
+    expect(equalsDate(referenceDate, parsedDate)).to.be.true;
+  });
+
   it('return undefined when no valid date provided', () => {
     expect(parseDate('12.12.1976.,')).to.equal(undefined); // wrong delimiter
     expect(parseDate('foo')).to.equal(undefined); // no date
 
-    localize.locale = 'en-GB';
+    localizeManager.locale = 'en-GB';
     expect(parseDate('31.02.2020')).to.equal(undefined); // non existing date
     expect(parseDate('12.31.2020')).to.equal(undefined); // day & month switched places
 
-    localize.locale = 'en-US';
+    localizeManager.locale = 'en-US';
     expect(parseDate('02.31.2020')).to.equal(undefined); // non existing date
     expect(parseDate('31.12.2020')).to.equal(undefined); // day & month switched places
   });

package/components/localize/test/getLocalizeManager.test.js

@@ -0,0 +1,31 @@
+import { expect } from '@open-wc/testing';
+// @ts-ignore
+import { singletonManager } from 'singleton-manager';
+import { LocalizeManager } from '../src/LocalizeManager.js';
+import { getLocalizeManager } from '../src/getLocalizeManager.js';
+
+describe('getLocalizeManager', () => {
+  beforeEach(() => {
+    // @ts-ignore
+    singletonManager._map.clear();
+  });
+
+  it('gets a default instance when nothing registered on singletonManager with "@lion/ui::localize::0.x"', () => {
+    expect(singletonManager.get('@lion/ui::localize::0.x')).to.be.undefined;
+    const localizeManager = getLocalizeManager();
+    expect(localizeManager).to.equal(singletonManager.get('@lion/ui::localize::0.x'));
+  });
+
+  it('gets the same instance when called multiple times', () => {
+    const localizeManager = getLocalizeManager();
+    const localizeManagerSecondCall = getLocalizeManager();
+    expect(localizeManager).to.equal(localizeManagerSecondCall);
+  });
+
+  it('gets the instance that was registered on singletonManager with "@lion/ui::localize::0.x"', () => {
+    // Set your own for custom behavior or for deduping purposes
+    class MyLocalizeManager extends LocalizeManager {}
+    singletonManager.set('@lion/ui::localize::0.x', MyLocalizeManager);
+    expect(getLocalizeManager()).to.equal(MyLocalizeManager);
+  });
+});

package/components/localize/test/localize.test.js

@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
 
-import { localize, LocalizeManager } from '@lion/ui/localize.js';
+import { getLocalizeManager, LocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 
 /**
  * @param {LocalizeManager} localizeManagerEl
@@ -16,6 +16,7 @@ function getProtectedMembers(localizeManagerEl) {
 }
 
 describe('localize', () => {
+  const localizeManager = getLocalizeManager();
   // this is an important mindset:
   // we don't test the singleton
   // we check that it is an instance of the right class
@@ -23,16 +24,16 @@ describe('localize', () => {
   // this allows to avoid any side effects caused by changing singleton state between tests
 
   it('is an instance of LocalizeManager', () => {
-    expect(localize).to.be.an.instanceOf(LocalizeManager);
+    expect(localizeManager).to.be.an.instanceOf(LocalizeManager);
   });
 
   it('is configured to automatically load namespaces if locale is changed', () => {
-    const { autoLoadOnLocaleChange } = getProtectedMembers(localize);
+    const { autoLoadOnLocaleChange } = getProtectedMembers(localizeManager);
     expect(autoLoadOnLocaleChange).to.equal(true);
   });
 
   it('is configured to fallback to the locale "en-GB"', () => {
-    const { fallbackLocale } = getProtectedMembers(localize);
+    const { fallbackLocale } = getProtectedMembers(localizeManager);
     expect(fallbackLocale).to.equal('en-GB');
   });
 });

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

@@ -1,5 +1,5 @@
 import { expect } from '@open-wc/testing';
-import { localize, formatNumber } from '@lion/ui/localize.js';
+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
@@ -20,6 +20,8 @@ const currencySymbol = /** @param {string} currency */ currency => ({
 });
 
 describe('formatNumber', () => {
+  const localizeManager = getLocalizeManager();
+
   afterEach(localizeTearDown);
 
   it('displays the appropriate amount of decimal places based on currencies spec http://www.currency-iso.org/en/home/tables/table-a1.html', () => {
@@ -74,14 +76,14 @@ describe('formatNumber', () => {
     expect(formatNumber(undefined)).to.equal('');
   });
 
-  it('uses `localize.formatNumberOptions.returnIfNaN`', () => {
-    const savedReturnIfNaN = localize.formatNumberOptions.returnIfNaN;
+  it('uses `localizeManager.formatNumberOptions.returnIfNaN`', () => {
+    const savedReturnIfNaN = localizeManager.formatNumberOptions.returnIfNaN;
 
-    localize.formatNumberOptions.returnIfNaN = '-';
+    localizeManager.formatNumberOptions.returnIfNaN = '-';
     // @ts-ignore
     expect(formatNumber('foo')).to.equal('-');
 
-    localize.formatNumberOptions.returnIfNaN = savedReturnIfNaN;
+    localizeManager.formatNumberOptions.returnIfNaN = savedReturnIfNaN;
   });
 
   it("can set what to returns when NaN via `returnIfNaN: 'foo'`", () => {
@@ -89,11 +91,11 @@ describe('formatNumber', () => {
     expect(formatNumber('foo', { returnIfNaN: '-' })).to.equal('-');
   });
 
-  it('uses `localize.locale`', () => {
+  it('uses `localizeManager.locale`', () => {
     expect(formatNumber(123456.789, { style: 'decimal', maximumFractionDigits: 2 })).to.equal(
       '123,456.79',
     );
-    localize.locale = 'de-DE';
+    localizeManager.locale = 'de-DE';
     expect(formatNumber(123456.789, { style: 'decimal', maximumFractionDigits: 2 })).to.equal(
       '123.456,79',
     );
@@ -136,7 +138,7 @@ describe('formatNumber', () => {
   });
 
   it('formats numbers correctly', () => {
-    localize.locale = 'nl-NL';
+    localizeManager.locale = 'nl-NL';
     expect(formatNumber(0, { style: 'decimal', minimumFractionDigits: 2 })).to.equal('0,00');
     expect(formatNumber(0.1, { style: 'decimal', minimumFractionDigits: 2 })).to.equal('0,10');
     expect(formatNumber(0.12, { style: 'decimal', minimumFractionDigits: 2 })).to.equal('0,12');
@@ -190,7 +192,7 @@ describe('formatNumber', () => {
   });
 
   it('throws when decimal and group separator are the same value, only when problematic', () => {
-    localize.locale = 'nl-NL';
+    localizeManager.locale = 'nl-NL';
     const fn = () =>
       formatNumber(112345678, {
         style: 'decimal',
@@ -239,7 +241,7 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
   });
 
   it('formats 2-digit decimals correctly', () => {
-    localize.locale = 'nl-NL';
+    localizeManager.locale = 'nl-NL';
     Array.from(new Array(100), (val, index) => index).forEach(i => {
       const iString = `${i}`;
       let number = 0.0;
@@ -253,7 +255,7 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
   describe('normalization', () => {
     describe('en-GB', () => {
       it('supports basics', () => {
-        localize.locale = 'en-GB';
+        localizeManager.locale = 'en-GB';
         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');
@@ -265,7 +267,7 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
 
     describe('en-US', () => {
       it('supports basics', () => {
-        localize.locale = 'en-US';
+        localizeManager.locale = 'en-US';
         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');
@@ -282,7 +284,7 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
       }
 
       it('supports basics', () => {
-        localize.locale = 'en-AU';
+        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');
@@ -294,7 +296,7 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
 
     describe('en-PH', () => {
       it('supports basics', () => {
-        localize.locale = 'en-PH';
+        localizeManager.locale = 'en-PH';
         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');
@@ -306,7 +308,7 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
 
     describe('nl-NL', () => {
       it('supports basics', () => {
-        localize.locale = 'nl-NL';
+        localizeManager.locale = 'nl-NL';
         expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('123.456,79 EUR');
         expect(formatNumber(123456.789, currencyCode('USD'))).to.equal('123.456,79 USD');
         expect(formatNumber(123456.789, currencyCode('JPY'))).to.equal('123.457 JPY');
@@ -323,7 +325,7 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
       }
 
       it('supports basics', () => {
-        localize.locale = 'nl-BE';
+        localizeManager.locale = 'nl-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');
         expect(formatNumber(123456.789, currencyCode('JPY'))).to.equal('123.457 JPY');
@@ -335,7 +337,7 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
 
     describe('fr-FR', () => {
       it('supports basics', () => {
-        localize.locale = 'fr-FR';
+        localizeManager.locale = 'fr-FR';
         expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('123 456,79 EUR');
         expect(formatNumber(123456.789, currencyCode('USD'))).to.equal('123 456,79 USD');
         expect(formatNumber(123456.789, currencyCode('JPY'))).to.equal('123 457 JPY');
@@ -351,7 +353,7 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
         if (isSafari) {
           return;
         }
-        localize.locale = 'fr-BE';
+        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');
         expect(formatNumber(123456.789, currencyCode('JPY'))).to.equal('123 457 JPY');
@@ -363,7 +365,7 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
 
     describe('bg-BG', () => {
       it('supports basics', () => {
-        localize.locale = 'bg-BG';
+        localizeManager.locale = 'bg-BG';
         expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('123 456,79 EUR');
         expect(formatNumber(123456.789, currencyCode('USD'))).to.equal('123 456,79 USD');
         expect(formatNumber(123456.789, currencyCode('JPY'))).to.equal('123 457 JPY');
@@ -373,7 +375,7 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
       });
 
       it('normalizes group separator', () => {
-        localize.locale = 'bg-BG';
+        localizeManager.locale = 'bg-BG';
         expect(formatNumber(1.234, currencyCode('EUR'))).to.equal('1,23 EUR');
         expect(formatNumber(1234.567, currencyCode('EUR'))).to.equal('1 234,57 EUR');
         expect(formatNumber(-1234.567, currencyCode('EUR'))).to.equal('−1 234,57 EUR');
@@ -382,7 +384,7 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
 
     describe('cs-CZ', () => {
       it('supports basics', () => {
-        localize.locale = 'cs-CZ';
+        localizeManager.locale = 'cs-CZ';
         expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('123 456,79 EUR');
         expect(formatNumber(123456.789, currencyCode('USD'))).to.equal('123 456,79 USD');
         expect(formatNumber(123456.789, currencyCode('JPY'))).to.equal('123 457 JPY');
@@ -401,7 +403,7 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
       }
 
       it('supports basics', () => {
-        localize.locale = 'tr-TR';
+        localizeManager.locale = 'tr-TR';
         expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('123.456,79 EUR');
         expect(formatNumber(123456.789, currencyCode('USD'))).to.equal('123.456,79 USD');
         expect(formatNumber(123456.789, currencyCode('JPY'))).to.equal('123.457 JPY');
@@ -413,7 +415,7 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
       });
 
       it('forces turkish currency code ', () => {
-        localize.locale = 'tr-TR';
+        localizeManager.locale = 'tr-TR';
         expect(
           formatNumber(1234.56, { style: 'currency', currencyDisplay: 'code', currency: 'TRY' }),
         ).to.equal('1.234,56 TL');
@@ -428,10 +430,10 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
     /** @type {Map<string, import('../../types/LocalizeMixinTypes.js').NumberPostProcessor>} */
     let savedpostProcessors;
     beforeEach(() => {
-      savedpostProcessors = localize.formatNumberOptions.postProcessors;
+      savedpostProcessors = localizeManager.formatNumberOptions.postProcessors;
     });
     afterEach(() => {
-      localize.formatNumberOptions.postProcessors = savedpostProcessors;
+      localizeManager.formatNumberOptions.postProcessors = savedpostProcessors;
     });
 
     /**
@@ -460,8 +462,8 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
       ).to.equal('112 345 678');
     });
 
-    it('uses `localize.formatNumberOptions.postProcessors`', () => {
-      localize.setNumberPostProcessorForLocale({
+    it('uses `localizeManager.formatNumberOptions.postProcessors`', () => {
+      localizeManager.setNumberPostProcessorForLocale({
         locale: 'en-GB',
         postProcessor: commaToSpaceProcessor,
       });
@@ -469,11 +471,11 @@ Please specify .groupSeparator / .decimalSeparator on the formatOptions object t
       expect(formatNumber(112345678)).to.equal('112 345 678');
     });
 
-    it('uses `options.postProcessors` and `localize.formatNumberOptions.postProcessors`', () => {
+    it('uses `options.postProcessors` and `localizeManager.formatNumberOptions.postProcessors`', () => {
       const postProcessors = new Map();
       postProcessors.set('en-GB', commaToSpaceProcessor);
 
-      localize.setNumberPostProcessorForLocale({
+      localizeManager.setNumberPostProcessorForLocale({
         locale: 'en-GB',
         postProcessor: firstSpaceToDotProcessor,
       });

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

@@ -1,5 +1,5 @@
 import { expect } from '@open-wc/testing';
-import { localize, formatNumberToParts } from '@lion/ui/localize.js';
+import { getLocalizeManager, formatNumberToParts } 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
@@ -28,6 +28,8 @@ const stringifyParts =
   parts => parts.map(part => part.value).join('');
 
 describe('formatNumberToParts', () => {
+  const localizeManager = getLocalizeManager();
+
   afterEach(localizeTearDown);
 
   describe("style: 'currency symbol'", () => {
@@ -114,7 +116,7 @@ describe('formatNumberToParts', () => {
         it(`formats ${locale} ${amount} as "${stringifyParts(
           /** @type {FormatNumberPart[]} */ (expectedResult),
         )}"`, () => {
-          localize.locale = locale;
+          localizeManager.locale = locale;
           expect(
             formatNumberToParts(Number(amount), {
               style: 'decimal',
@@ -143,7 +145,7 @@ describe('formatNumberToParts', () => {
         it(`formats ${locale} ${amount} as "${stringifyParts(
           /** @type {FormatNumberPart[]} */ (expectedResult),
         )}"`, () => {
-          localize.locale = locale;
+          localizeManager.locale = locale;
           expect(
             formatNumberToParts(Number(amount), {
               style: 'decimal',

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

@@ -1,5 +1,5 @@
 import { expect } from '@open-wc/testing';
-import { getCurrencyName } from '@lion/ui/localize.js';
+import { getCurrencyName } from '@lion/ui/localize-no-side-effects.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 
 describe('getCurrencyName', () => {

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

@@ -1,7 +1,9 @@
 import { expect } from '@open-wc/testing';
-import { localize, parseNumber } from '@lion/ui/localize.js';
+import { getLocalizeManager, parseNumber } from '@lion/ui/localize-no-side-effects.js';
 
 describe('parseNumber()', () => {
+  const localizeManager = getLocalizeManager();
+
   it('parses integers', () => {
     expect(parseNumber('1')).to.equal(1);
     expect(parseNumber('12')).to.equal(12);
@@ -79,13 +81,13 @@ describe('parseNumber()', () => {
   });
 
   it('uses locale to parse amount if there is only one separator e.g. 1.234', () => {
-    localize.locale = 'en-GB';
+    localizeManager.locale = 'en-GB';
     expect(parseNumber('12.34')).to.equal(12.34);
     expect(parseNumber('12,34')).to.equal(1234);
     expect(parseNumber('1.234')).to.equal(1.234);
     expect(parseNumber('1,234')).to.equal(1234);
 
-    localize.locale = 'nl-NL';
+    localizeManager.locale = 'nl-NL';
     expect(parseNumber('12.34')).to.equal(1234);
     expect(parseNumber('12,34')).to.equal(12.34);
     expect(parseNumber('1.234')).to.equal(1234);
@@ -105,30 +107,46 @@ describe('parseNumber()', () => {
     expect(parseNumber('1 23.4')).to.equal(123.4);
   });
 
-  it('parses negative numbers', () => {
-    expect(parseNumber('-0')).to.equal(0);
-    expect(parseNumber('-1')).to.equal(-1);
-    expect(parseNumber('-1234')).to.equal(-1234);
-    expect(parseNumber('-1.234,5')).to.equal(-1234.5);
-    expect(parseNumber('-1,234.5')).to.equal(-1234.5);
-    expect(parseNumber('-1.234,5678')).to.equal(-1234.5678);
-    expect(parseNumber('-1,234.5678')).to.equal(-1234.5678);
-  });
-
   it('ignores all non-number symbols (including currency)', () => {
     expect(parseNumber('€ 1,234.56')).to.equal(1234.56);
-    expect(parseNumber('€ -1,234.56')).to.equal(-1234.56);
-    expect(parseNumber('-€ 1,234.56')).to.equal(-1234.56);
     expect(parseNumber('1,234.56 €')).to.equal(1234.56);
-    expect(parseNumber('-1,234.56 €')).to.equal(-1234.56);
     expect(parseNumber('EUR 1,234.56')).to.equal(1234.56);
-    expect(parseNumber('EUR -1,234.56')).to.equal(-1234.56);
-    expect(parseNumber('-EUR 1,234.56')).to.equal(-1234.56);
     expect(parseNumber('1,234.56 EUR')).to.equal(1234.56);
-    expect(parseNumber('-1,234.56 EUR')).to.equal(-1234.56);
     expect(parseNumber('Number is 1,234.56')).to.equal(1234.56);
   });
 
+  describe('negative numbers', () => {
+    it('can get parsed', () => {
+      expect(parseNumber('-0')).to.equal(0);
+      expect(parseNumber('-1')).to.equal(-1);
+      expect(parseNumber('-1234')).to.equal(-1234);
+      expect(parseNumber('-1.234,5')).to.equal(-1234.5);
+      expect(parseNumber('-1,234.5')).to.equal(-1234.5);
+      expect(parseNumber('-1.234,5678')).to.equal(-1234.5678);
+      expect(parseNumber('-1,234.5678')).to.equal(-1234.5678);
+    });
+
+    it('parses different type of hypens', () => {
+      expect(parseNumber('-1')).to.equal(-1, 'Hypen');
+      expect(parseNumber('−1')).to.equal(-1, 'Minus-Sign');
+    });
+
+    it('ignores all non-number symbols (including currency)', () => {
+      expect(parseNumber('€ -1,234.56')).to.equal(-1234.56);
+      expect(parseNumber('-€ 1,234.56')).to.equal(-1234.56);
+      expect(parseNumber('-1,234.56 €')).to.equal(-1234.56);
+      expect(parseNumber('EUR -1,234.56')).to.equal(-1234.56);
+      expect(parseNumber('-EUR 1,234.56')).to.equal(-1234.56);
+      expect(parseNumber('-1,234.56 EUR')).to.equal(-1234.56);
+    });
+
+    it('detects separators unparseable when there are 2 same ones e.g. -1.234.56', () => {
+      expect(parseNumber('-1.234.56')).to.equal(-123456);
+      expect(parseNumber('-1,234,56')).to.equal(-123456);
+      expect(parseNumber('-1 234 56')).to.equal(-123456);
+    });
+  });
+
   it('ignores non-number characters and returns undefined', () => {
     expect(parseNumber('A')).to.equal(undefined);
     expect(parseNumber('EUR')).to.equal(undefined);

package/components/localize/test/side-effect-free-entrypoint.test.js

@@ -0,0 +1,38 @@
+import { expect } from '@open-wc/testing';
+import sinon from 'sinon';
+// @ts-ignore
+import { singletonManager } from 'singleton-manager';
+
+/**
+ * @typedef {import('../types/LocalizeMixinTypes.js').LocalizeMixin} LocalizeMixinHost
+ */
+
+describe('Entrypoints localize', () => {
+  /** @type {import('sinon').SinonSpy} */
+  let singletonManagerSetSpy;
+  beforeEach(() => {
+    singletonManagerSetSpy = sinon.spy(singletonManager, 'set');
+  });
+  afterEach(() => {
+    singletonManagerSetSpy.restore();
+  });
+
+  it('"@lion/ui/localize-no-side-effects.js" has no side effects (c.q. does not register itself on singletonManager)', async () => {
+    await import('@lion/ui/localize-no-side-effects.js');
+
+    expect(singletonManagerSetSpy).to.not.have.been.called;
+  });
+
+  it('"@lion/ui/localize.js" has side effects (c.q. registers itself on singletonManager)', async () => {
+    await import('@lion/ui/localize.js');
+
+    expect(singletonManagerSetSpy).to.have.been.calledOnce;
+
+    const { getLocalizeManager } = await import('@lion/ui/localize-no-side-effects.js');
+
+    expect(singletonManagerSetSpy).to.have.been.calledWith(
+      '@lion/ui::localize::0.x',
+      getLocalizeManager(),
+    );
+  });
+});

package/components/localize/test-helpers/localizeTearDown.js

@@ -1,11 +1,12 @@
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 
 export const localizeTearDown = () => {
+  const localizeManager = getLocalizeManager();
   // makes sure that between tests the localization is reset to default state
   // @ts-ignore
-  localize._teardownHtmlLangAttributeObserver();
+  localizeManager._teardownHtmlLangAttributeObserver();
   document.documentElement.lang = 'en-GB';
   // @ts-ignore
-  localize._setupHtmlLangAttributeObserver();
-  localize.reset();
+  localizeManager._setupHtmlLangAttributeObserver();
+  localizeManager.reset();
 };

package/components/localize/types/LocalizeMixinTypes.ts

@@ -1,5 +1,7 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 import { LitElement } from 'lit';
+import { DirectiveResult } from 'lit/directive.js';
+import { LocalizeManager } from '../src/LocalizeManager.js';
 
 export interface FormatNumberPart {
   type: string;
@@ -75,7 +77,13 @@ export declare class LocalizeMixinHost {
   public onLocaleUpdated(): void;
   public connectedCallback(): void;
   public disconnectedCallback(): void;
-  public msgLit(keys: string | string[], variables?: msgVariables, options?: msgOptions): void;
+  public msgLit(
+    keys: string | string[],
+    variables?: msgVariables,
+    options?: msgOptions,
+  ): string | DirectiveResult;
+
+  protected _localizeManager: LocalizeManager;
 
   private __boundLocalizeOnLocaleChanged(...args: Object[]): void;
   private __boundLocalizeOnLocaleChanging(...args: Object[]): void;

package/components/pagination/src/LionPagination.js

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { LitElement, html, css } from 'lit';
-import { LocalizeMixin } from '@lion/ui/localize.js';
+import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult

package/components/progress-indicator/src/LionProgressIndicator.js

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { LitElement, nothing } from 'lit';
-import { localize, LocalizeMixin } from '@lion/ui/localize.js';
+import { getLocalizeManager, LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
@@ -195,10 +195,11 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) {
   }
 
   _setDefaultLabel() {
+    const localizeManager = getLocalizeManager();
     if (this._ariaLabelledby) {
       this.removeAttribute('aria-label');
     } else if (!this._ariaLabel) {
-      this.setAttribute('aria-label', localize.msg('lion-progress-indicator:loading'));
+      this.setAttribute('aria-label', localizeManager.msg('lion-progress-indicator:loading'));
       this.__hasDefaultLabelSet = true;
     }
   }

package/components/select/src/LionSelect.js

@@ -60,6 +60,20 @@ export class LionSelect extends LionFieldWithSelect {
   connectedCallback() {
     super.connectedCallback();
     this._inputNode.addEventListener('change', this._proxyChangeEvent);
+
+    this.__selectObserver = new MutationObserver(() => {
+      this._syncValueUpwards();
+      // We need to force computation of other values in case model didn't change
+      // This can happen when options are loaded asynchronously so the modelValue doesn't change
+      // The MutationObserver detects this and makes sure the modelValue is updated
+      this._calculateValues({ source: 'model' });
+    });
+
+    this.__selectObserver.observe(this._inputNode, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
   }
 
   /** @param {import('lit').PropertyValues } changedProperties */
@@ -82,6 +96,7 @@ export class LionSelect extends LionFieldWithSelect {
   disconnectedCallback() {
     super.disconnectedCallback();
     this._inputNode.removeEventListener('change', this._proxyChangeEvent);
+    this.__selectObserver?.disconnect();
   }
 
   /**