@lion/ui 0.1.0 → 0.1.2

package/components/calendar/src/LionCalendar.js

@@ -3,10 +3,9 @@ import { html, LitElement } from 'lit';
 import {
   getMonthNames,
   getWeekdayNames,
-  localize,
   LocalizeMixin,
   normalizeDateTime,
-} from '@lion/ui/localize.js';
+} from '@lion/ui/localize-no-side-effects.js';
 
 import { calendarStyle } from './calendarStyle.js';
 import { createDay } from './utils/createDay.js';
@@ -862,6 +861,6 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
    * @private
    */
   __getLocale() {
-    return this.locale || localize.locale;
+    return this.locale || this._localizeManager.locale;
   }
 }

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

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 import { expect, fixture as _fixture } from '@open-wc/testing';
 import sinon from 'sinon';
@@ -15,6 +15,8 @@ import { CalendarObject, DayObject } from '@lion/ui/calendar-test-helpers.js';
 const fixture = /** @type {(arg: TemplateResult) => Promise<LionCalendar>} */ (_fixture);
 
 describe('<lion-calendar>', () => {
+  const localizeManager = getLocalizeManager();
+
   beforeEach(() => {
     localizeTearDown();
   });
@@ -1348,7 +1350,7 @@ describe('<lion-calendar>', () => {
       await el.updateComplete;
       expect(elObj.activeMonth).to.equal('décembre');
 
-      localize.locale = 'cs-CZ';
+      localizeManager.locale = 'cs-CZ';
       await el.updateComplete;
       expect(elObj.activeMonth).to.equal('décembre');
 
@@ -1391,7 +1393,7 @@ describe('<lion-calendar>', () => {
         'Sat',
       ]);
 
-      localize.locale = 'nl-NL';
+      localizeManager.locale = 'nl-NL';
       await el.localizeNamespacesLoaded;
       await el.updateComplete;
       expect(elObj.nextMonthButtonEl?.getAttribute('aria-label')).to.equal(

package/components/form-core/src/validate/ValidateMixin.js

@@ -3,7 +3,7 @@ import { SlotMixin, DisabledMixin } from '@lion/ui/core.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 // TODO: make form-core independent from localize
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { AsyncQueue } from '../utils/AsyncQueue.js';
 import { pascalCase } from '../utils/pascalCase.js';
 import { SyncUpdatableMixin } from '../utils/SyncUpdatableMixin.js';
@@ -262,12 +262,16 @@ export const ValidateMixinImplementation = superclass =>
 
     connectedCallback() {
       super.connectedCallback();
-      localize.addEventListener('localeChanged', this._updateFeedbackComponent);
+
+      const localizeManager = getLocalizeManager();
+      localizeManager.addEventListener('localeChanged', this._updateFeedbackComponent);
     }
 
     disconnectedCallback() {
       super.disconnectedCallback();
-      localize.removeEventListener('localeChanged', this._updateFeedbackComponent);
+
+      const localizeManager = getLocalizeManager();
+      localizeManager.removeEventListener('localeChanged', this._updateFeedbackComponent);
     }
 
     /**

package/components/form-core/src/validate/validators/DateValidators.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-classes-per-file */
 // TODO: move to input-datepicker?
-import { normalizeDateTime } from '@lion/ui/localize.js';
+import { normalizeDateTime } from '@lion/ui/localize-no-side-effects.js';
 import { Validator } from '../Validator.js';
 
 /**

package/components/form-core/test/lion-field.test.js

@@ -2,7 +2,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { Required, Validator } from '@lion/ui/form-core.js';
 import '@lion/ui/define/lion-field.js';
 import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 import {
   expect,
@@ -52,6 +52,8 @@ function getSlot(el, slot) {
 }
 
 describe('<lion-field>', () => {
+  const localizeManager = getLocalizeManager();
+
   it(`puts a unique id "${tagString}-[hash]" on the native input`, async () => {
     const el = /** @type {LionField} */ (await fixture(html`<${tag}>${inputSlot}</${tag}>`));
     // @ts-ignore allow protected accessors in tests
@@ -219,7 +221,7 @@ describe('<lion-field>', () => {
     beforeEach(() => {
       // Reset and preload validation translations
       localizeTearDown();
-      localize.addData('en-GB', 'lion-validate', {
+      localizeManager.addData('en-GB', 'lion-validate', {
         error: {
           hasX: 'This is error message for hasX',
         },

package/components/form-core/test/validate/DateValidators.test.js

@@ -1,6 +1,6 @@
 import { expect } from '@open-wc/testing';
 
-import { normalizeDateTime } from '@lion/ui/localize.js';
+import { normalizeDateTime } from '@lion/ui/localize-no-side-effects.js';
 import { IsDate, MinDate, MaxDate, MinMaxDate, IsDateDisabled } from '@lion/ui/form-core.js';
 
 describe('Date Validation', () => {

package/components/form-core/test-suites/FormatMixin.suite.js

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { parseDate } from '@lion/ui/localize.js';
+import { parseDate } from '@lion/ui/localize-no-side-effects.js';
 import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import sinon from 'sinon';
 import { Unparseable, Validator, FormatMixin } from '@lion/ui/form-core.js';

package/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import { getFormControlMembers, AlwaysInvalid } from '@lion/ui/form-core-test-helpers.js';
@@ -18,6 +18,8 @@ import {
  */
 
 export function runValidateMixinFeedbackPart() {
+  const localizeManager = getLocalizeManager();
+
   describe('Validity Feedback', () => {
     beforeEach(() => {
       localizeTearDown();
@@ -65,7 +67,7 @@ export function runValidateMixinFeedbackPart() {
 
     AlwaysInvalid.getMessage = async () => 'Message for AlwaysInvalid';
     MinLength.getMessage = async () =>
-      localize.locale === 'de-DE' ? 'Nachricht für MinLength' : 'Message for MinLength';
+      localizeManager.locale === 'de-DE' ? 'Nachricht für MinLength' : 'Message for MinLength';
     ContainsLowercaseA.getMessage = async () => 'Message for ContainsLowercaseA';
     ContainsCat.getMessage = async () => 'Message for ContainsCat';
 
@@ -341,8 +343,8 @@ export function runValidateMixinFeedbackPart() {
       expect(_feedbackNode.feedbackData?.length).to.equal(1);
       expect(_feedbackNode.feedbackData?.[0].message).to.equal('Message for MinLength');
 
-      localize.locale = 'de-DE';
-      await localize.loadingComplete;
+      localizeManager.locale = 'de-DE';
+      await localizeManager.loadingComplete;
       await el.feedbackComplete;
       expect(_feedbackNode.feedbackData?.[0].message).to.equal('Nachricht für MinLength');
     });

package/components/form-integrations/test/form-group-methods.test.js

@@ -45,7 +45,7 @@ import '@lion/ui/define/lion-validation-feedback.js';
  */
 
 const fullyPrefilledSerializedValue = {
-  full_name: { first_name: 'Lorem', last_name: 'Ipsum' },
+  fullName: { firstName: 'Lorem', lastName: 'Ipsum' },
   date: '2000-12-12',
   datepicker: '2020-12-12',
   bio: 'Lorem',
@@ -69,7 +69,7 @@ const fullyPrefilledSerializedValue = {
 };
 
 const fullyChangedSerializedValue = {
-  full_name: { first_name: 'LoremChanged', last_name: 'IpsumChanged' },
+  fullName: { firstName: 'LoremChanged', lastName: 'IpsumChanged' },
   date: '1999-12-12',
   datepicker: '1986-12-12',
   bio: 'LoremChanged',
@@ -177,7 +177,7 @@ describe(`Submitting/Resetting/Clearing Form`, async () => {
     await elementUpdated(formEl);
     await formEl.updateComplete;
     expect(formEl.serializedValue).to.eql({
-      full_name: { first_name: '', last_name: '' },
+      fullName: { firstName: '', lastName: '' },
       date: '',
       datepicker: '',
       bio: '',

package/components/form-integrations/test/form-integrations.test.js

@@ -29,7 +29,7 @@ describe('Form Integrations', () => {
     const formEl = el._lionFormNode;
 
     expect(formEl.serializedValue).to.eql({
-      full_name: { first_name: '', last_name: '' },
+      fullName: { firstName: '', lastName: '' },
       date: '2000-12-12',
       datepicker: '2020-12-12',
       bio: '',
@@ -62,7 +62,7 @@ describe('Form Integrations', () => {
     await inputTelDropdownEl?.updateComplete;
 
     expect(formEl.formattedValue).to.eql({
-      full_name: { first_name: '', last_name: '' },
+      fullName: { firstName: '', lastName: '' },
       date: '12/12/2000',
       datepicker: '12/12/2020',
       bio: '',
@@ -91,7 +91,7 @@ describe('Form Integrations', () => {
         await fixture(
           html`<umbrella-form
             .serializedValue="${{
-              full_name: { first_name: '', last_name: '' },
+              fullName: { firstName: '', lastName: '' },
               date: '2000-12-12',
               datepicker: '2020-12-12',
               bio: '',

package/components/form-integrations/test/form-validation-integrations.test.js

@@ -1,12 +1,13 @@
 import { DefaultSuccess, Required, Validator } from '@lion/ui/form-core.js';
 import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
 import { LionInput } from '@lion/ui/input.js';
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
 import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import sinon from 'sinon';
 
 describe('Form Validation Integrations', () => {
+  const localizeManager = getLocalizeManager();
   const lightDom = '';
   before(() => {
     loadDefaultFeedbackMessages();
@@ -126,11 +127,11 @@ describe('Form Validation Integrations', () => {
         }
 
         async updateLabel() {
-          this.label = localize.msg('test-default-label:label');
+          this.label = localizeManager.msg('test-default-label:label');
         }
 
         async setDefaultLabel() {
-          localize.loadNamespace({
+          localizeManager.loadNamespace({
             'test-default-label': /** @param {string} locale */ async locale => {
               switch (locale) {
                 case 'nl-NL':
@@ -143,11 +144,11 @@ describe('Form Validation Integrations', () => {
           this.boundUpdateLabel = this.updateLabel.bind(this);
 
           // localeChanged is fired AFTER localize has finished loading missing translations
-          // so no need to await localize.loadingComplete
-          localize.addEventListener('localeChanged', this.boundUpdateLabel);
+          // so no need to await localizeManager.loadingComplete
+          localizeManager.addEventListener('localeChanged', this.boundUpdateLabel);
 
           // Wait for it to complete when updating the label for the first time
-          await localize.loadingComplete;
+          await localizeManager.loadingComplete;
           this.boundUpdateLabel();
         }
       }
@@ -167,15 +168,15 @@ describe('Form Validation Integrations', () => {
       const { _feedbackNode } = getFormControlMembers(el);
       expect(_feedbackNode.feedbackData?.[0].message).to.equal('Please enter a(n) Text.');
 
-      localize.locale = 'nl-NL';
-      await localize.loadingComplete;
+      localizeManager.locale = 'nl-NL';
+      await localizeManager.loadingComplete;
       await el.updateComplete;
       await el.feedbackComplete;
       expect(el.label).to.equal('Tekst');
       expect(_feedbackNode.feedbackData?.[0].message).to.equal('Vul een Tekst in.');
 
-      localize.locale = 'en-GB';
-      await localize.loadingComplete;
+      localizeManager.locale = 'en-GB';
+      await localizeManager.loadingComplete;
       await el.updateComplete;
       await el.feedbackComplete;
       expect(el.label).to.equal('Text');

package/components/form-integrations/test/helpers/umbrella-form.js

@@ -50,14 +50,14 @@ export class UmbrellaForm extends LitElement {
     return html`
       <lion-form .serializedValue="${this.__serializedValue}">
         <form>
-          <lion-fieldset name="full_name">
+          <lion-fieldset name="fullName">
             <lion-input
-              name="first_name"
+              name="firstName"
               label="First Name"
               .validators="${[new Required()]}"
             ></lion-input>
             <lion-input
-              name="last_name"
+              name="lastName"
               label="Last Name"
               .validators="${[new Required()]}"
             ></lion-input>

package/components/input-amount/src/LionInputAmount.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 import { LionInput } from '@lion/ui/input.js';
-import { getCurrencyName, localize, LocalizeMixin } from '@lion/ui/localize.js';
+import { getCurrencyName, LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 import { IsNumber } from '@lion/ui/form-core.js';
 import { formatAmount, formatCurrencyLabel } from './formatters.js';
 import { parseAmount } from './parsers.js';
@@ -201,7 +201,7 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
   }
 
   get __currencyLabel() {
-    return this.currency ? formatCurrencyLabel(this.currency, localize.locale) : '';
+    return this.currency ? formatCurrencyLabel(this.currency, this._localizeManager.locale) : '';
   }
 
   __reformat() {

package/components/input-amount/src/formatters.js

@@ -1,4 +1,8 @@
-import { formatNumber, getFractionDigits, normalizeCurrencyLabel } from '@lion/ui/localize.js';
+import {
+  formatNumber,
+  getFractionDigits,
+  normalizeCurrencyLabel,
+} from '@lion/ui/localize-no-side-effects.js';
 
 /**
  * @typedef {import('../../localize/types/LocalizeMixinTypes.js').FormatNumberOptions} FormatOptions

package/components/input-amount/src/parsers.js

@@ -1,4 +1,4 @@
-import { parseNumber, getFractionDigits } from '@lion/ui/localize.js';
+import { parseNumber, getFractionDigits } from '@lion/ui/localize-no-side-effects.js';
 
 /**
  * @typedef {import('../../localize/types/LocalizeMixinTypes.js').FormatNumberOptions} FormatOptions

package/components/input-amount/test/formatters.test.js

@@ -1,10 +1,12 @@
 import { expect } from '@open-wc/testing';
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 
 import { formatAmount } from '@lion/ui/input-amount.js';
 
 describe('formatAmount()', () => {
+  const localizeManager = getLocalizeManager();
+
   afterEach(() => {
     localizeTearDown();
   });
@@ -67,9 +69,9 @@ describe('formatAmount()', () => {
   });
 
   it('fallbacks to global locale and EUR by default', async () => {
-    localize.locale = 'en-GB';
+    localizeManager.locale = 'en-GB';
     expect(formatAmount(12345678)).to.equal('12,345,678.00');
-    localize.locale = 'nl-NL';
+    localizeManager.locale = 'nl-NL';
     expect(formatAmount(12345678)).to.equal('12.345.678,00');
   });
 });

package/components/input-date/src/LionInputDate.js

@@ -1,6 +1,6 @@
 import { IsDate } from '@lion/ui/form-core.js';
 import { LionInput } from '@lion/ui/input.js';
-import { formatDate, LocalizeMixin, parseDate } from '@lion/ui/localize.js';
+import { formatDate, LocalizeMixin, parseDate } from '@lion/ui/localize-no-side-effects.js';
 
 /**
  * @param {Date|number} date

package/components/input-date/test/lion-input-date.test.js

@@ -1,7 +1,7 @@
 import { html } from 'lit';
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
-import { MaxDate } from '@lion/ui/form-core.js';
+import { MinDate, MaxDate } from '@lion/ui/form-core.js';
 import { expect, fixture as _fixture } from '@open-wc/testing';
 import { getInputMembers } from '@lion/ui/input-test-helpers.js';
 import '@lion/ui/define/lion-input-date.js';
@@ -13,6 +13,8 @@ import '@lion/ui/define/lion-input-date.js';
 const fixture = /** @type {(arg: TemplateResult) => Promise<LionInputDate>} */ (_fixture);
 
 describe('<lion-input-date>', () => {
+  const localizeManager = getLocalizeManager();
+
   beforeEach(() => {
     localizeTearDown();
   });
@@ -65,49 +67,95 @@ describe('<lion-input-date>', () => {
     expect(el.validationStates.error).not.to.have.property('MaxDate');
   });
 
-  it('uses formatOptions.locale', async () => {
-    const el = await fixture(html`
-      <lion-input-date
-        .formatOptions="${{ locale: 'en-GB' }}"
-        .modelValue=${new Date('2017/06/15')}
-      ></lion-input-date>
-    `);
-    expect(el.formattedValue).to.equal('15/06/2017');
-
-    const el2 = await fixture(html`
-      <lion-input-date
-        .formatOptions="${{ locale: 'en-US' }}"
-        .modelValue=${new Date('2017/06/15')}
-      ></lion-input-date>
-    `);
-    expect(el2.formattedValue).to.equal('06/15/2017');
-  });
-
-  it('uses global locale when formatOptions.locale is not defined', async () => {
-    localize.locale = 'fr-FR';
-    const el = await fixture(html`
-      <lion-input-date .modelValue=${new Date('2017/06/15')}></lion-input-date>
-    `);
-    expect(el.formattedValue).to.equal('15/06/2017');
-
-    localize.locale = 'en-US';
-    const el2 = await fixture(html`
-      <lion-input-date .modelValue=${new Date('2017/06/15')}></lion-input-date>
-    `);
-    expect(el2.formattedValue).to.equal('06/15/2017');
+  describe('locale', () => {
+    it('uses formatOptions.locale', async () => {
+      const el = await fixture(html`
+        <lion-input-date
+          .formatOptions="${{ locale: 'en-GB' }}"
+          .modelValue=${new Date('2017/06/15')}
+        ></lion-input-date>
+      `);
+      expect(el.formattedValue).to.equal('15/06/2017');
+
+      const el2 = await fixture(html`
+        <lion-input-date
+          .formatOptions="${{ locale: 'en-US' }}"
+          .modelValue=${new Date('2017/06/15')}
+        ></lion-input-date>
+      `);
+      expect(el2.formattedValue).to.equal('06/15/2017');
+    });
+
+    it('uses global locale when formatOptions.locale is not defined', async () => {
+      localizeManager.locale = 'fr-FR';
+      const el = await fixture(html`
+        <lion-input-date .modelValue=${new Date('2017/06/15')}></lion-input-date>
+      `);
+      expect(el.formattedValue).to.equal('15/06/2017');
+
+      localizeManager.locale = 'en-US';
+      const el2 = await fixture(html`
+        <lion-input-date .modelValue=${new Date('2017/06/15')}></lion-input-date>
+      `);
+      expect(el2.formattedValue).to.equal('06/15/2017');
+    });
+
+    it('ignores global locale change if formatOptions.locale is provided', async () => {
+      const el = await fixture(html`
+        <lion-input-date
+          .modelValue=${new Date('2017/06/15')}
+          .formatOptions="${{ locale: 'en-GB' }}"
+        ></lion-input-date>
+      `);
+      expect(el.formattedValue).to.equal('15/06/2017'); // british
+      localizeManager.locale = 'en-US';
+      await el.updateComplete;
+      expect(el.formattedValue).to.equal('15/06/2017'); // should stay british
+    });
   });
 
-  it('ignores global locale change if formatOptions.locale is provided', async () => {
-    const el = await fixture(html`
-      <lion-input-date
-        .modelValue=${new Date('2017/06/15')}
-        .formatOptions="${{ locale: 'en-GB' }}"
-      ></lion-input-date>
-    `);
-    expect(el.formattedValue).to.equal('15/06/2017'); // british
-    localize.locale = 'en-US';
-    await el.updateComplete;
-    expect(el.formattedValue).to.equal('15/06/2017'); // should stay british
+  describe('timezones', async () => {
+    const dateAmsterdam = new Date(
+      new Date('2017/06/15').toLocaleString('en-US', { timeZone: 'Europe/Amsterdam' }),
+    );
+    const dateManila = new Date(
+      new Date('2017/06/15').toLocaleString('en-US', { timeZone: 'Asia/Manila' }),
+    );
+    const dateNewYork = new Date(
+      new Date('2017/06/15').toLocaleString('en-US', { timeZone: 'America/New_York' }),
+    );
+
+    it('works with different timezones', async () => {
+      const el = await fixture(html`
+        <lion-input-date .modelValue=${dateAmsterdam}></lion-input-date>
+      `);
+      expect(el.formattedValue).to.equal('15/06/2017', 'Europe/Amsterdam');
+
+      el.modelValue = dateManila;
+      expect(el.formattedValue).to.equal('15/06/2017', 'Asia/Manila');
+
+      el.modelValue = dateNewYork;
+      expect(el.formattedValue).to.equal('14/06/2017', 'America/New_York');
+    });
+
+    it('validators work with different timezones', async () => {
+      const el = await fixture(html`
+        <lion-input-date
+          .modelValue=${new Date('2017/06/15')}
+          .validators=${[new MinDate(new Date('2017/06/14'))]}
+        ></lion-input-date>
+      `);
+      expect(el.formattedValue).to.equal('15/06/2017', 'Europe/Amsterdam');
+      expect(el.hasFeedbackFor).not.to.include('error', 'Europe/Amsterdam');
+
+      el.modelValue = dateManila;
+      expect(el.formattedValue).to.equal('15/06/2017', 'Asia/Manila');
+      expect(el.hasFeedbackFor).not.to.include('error', 'Asia/Manila');
+
+      el.modelValue = dateNewYork;
+      expect(el.formattedValue).to.equal('14/06/2017', 'America/New_York');
+      expect(el.hasFeedbackFor).not.to.include('error', 'America/New_York');
+    });
   });
 
   it('is accessible', async () => {

package/components/input-datepicker/src/LionInputDatepicker.js

@@ -10,7 +10,7 @@ import {
   withModalDialogConfig,
   ArrowMixin,
 } from '@lion/ui/overlays.js';
-import { LocalizeMixin } from '@lion/ui/localize.js';
+import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
 
 /**

package/components/input-email/src/LionInputEmail.js

@@ -1,6 +1,6 @@
 import { IsEmail } from '@lion/ui/form-core.js';
 import { LionInput } from '@lion/ui/input.js';
-import { LocalizeMixin } from '@lion/ui/localize.js';
+import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 
 /**
  * LionInputEmail: extension of lion-input

package/components/input-iban/src/LionInputIban.js

@@ -1,4 +1,4 @@
-import { LocalizeMixin } from '@lion/ui/localize.js';
+import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 import { LionInput } from '@lion/ui/input.js';
 import { formatIBAN } from './formatters.js';
 import { parseIBAN } from './parsers.js';

package/components/input-iban/src/validators.js

@@ -1,15 +1,16 @@
 /* eslint-disable max-classes-per-file, import/no-extraneous-dependencies */
 
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { Unparseable, Validator } from '@lion/ui/form-core.js';
 import { isValidIBAN } from 'ibantools';
 
 let loaded = false;
 const loadTranslations = async () => {
+  const localizeManager = getLocalizeManager();
   if (loaded) {
     return;
   }
-  await localize.loadNamespace(
+  await localizeManager.loadNamespace(
     {
       'lion-validate+iban': /** @param {string} locale */ locale => {
         switch (locale) {
@@ -86,7 +87,7 @@ const loadTranslations = async () => {
         }
       },
     },
-    { locale: localize.locale },
+    { locale: localizeManager.locale },
   );
   loaded = true;
 };
@@ -113,8 +114,9 @@ export class IsIBAN extends Validator {
    * @returns {Promise<string|Element>}
    */
   static async getMessage(data) {
+    const localizeManager = getLocalizeManager();
     await loadTranslations();
-    return localize.msg('lion-validate+iban:error.IsIBAN', data);
+    return localizeManager.msg('lion-validate+iban:error.IsIBAN', data);
   }
 }
 
@@ -156,11 +158,13 @@ export class IsCountryIBAN extends IsIBAN {
    * @returns {Promise<string|Element>}
    */
   static async getMessage(data) {
+    const localizeManager = getLocalizeManager();
+
     await loadTranslations();
     // If modelValue is Unparseable, the IsIBAN message is the more appropriate feedback
     return data?.modelValue instanceof Unparseable
-      ? localize.msg('lion-validate+iban:error.IsIBAN', data)
-      : localize.msg('lion-validate+iban:error.IsCountryIBAN', data);
+      ? localizeManager.msg('lion-validate+iban:error.IsIBAN', data)
+      : localizeManager.msg('lion-validate+iban:error.IsCountryIBAN', data);
   }
 }
 
@@ -203,6 +207,8 @@ export class IsNotCountryIBAN extends IsIBAN {
    * @returns {Promise<string|Element>}
    */
   static async getMessage(data) {
+    const localizeManager = getLocalizeManager();
+
     await loadTranslations();
     const _data = {
       ...data,
@@ -211,7 +217,7 @@ export class IsNotCountryIBAN extends IsIBAN {
     };
     // If modelValue is Unparseable, the IsIBAN message is the more appropriate feedback
     return data?.modelValue instanceof Unparseable
-      ? localize.msg('lion-validate+iban:error.IsIBAN', _data)
-      : localize.msg('lion-validate+iban:error.IsNotCountryIBAN', _data);
+      ? localizeManager.msg('lion-validate+iban:error.IsIBAN', _data)
+      : localizeManager.msg('lion-validate+iban:error.IsNotCountryIBAN', _data);
   }
 }

package/components/input-range/src/LionInputRange.js

@@ -2,7 +2,7 @@
 import { css, html } from 'lit';
 import { ScopedStylesController } from '@lion/ui/core.js';
 import { LionInput } from '@lion/ui/input.js';
-import { formatNumber } from '@lion/ui/localize.js';
+import { formatNumber } from '@lion/ui/localize-no-side-effects.js';
 
 /**
  * @typedef {import('lit').CSSResult} CSSResult