@lion/ui 0.0.2 → 0.0.4

package/components/input-tel-dropdown/src/LionInputTelDropdown.js

@@ -1,4 +1,4 @@
-import { html, render, css } from 'lit';
+import { html, css } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
 
 import { LionInputTel } from '@lion/ui/input-tel.js';
@@ -99,6 +99,7 @@ export class LionInputTelDropdown extends LionInputTel {
         },
       },
     };
+
     return {
       refs,
       data: {
@@ -155,7 +156,7 @@ export class LionInputTelDropdown extends LionInputTel {
     css`
       /**
            * We need to align the height of the dropdown with the height of the text field.
-           * We target the HTMLDivElement 'this.__dropdownRenderParent' here. Its child,
+           * We target the HTMLDivElement (render wrapper from SlotMixin) here. Its child,
            * [data-ref=dropdown], recieves a 100% height as well via inline styles (since we
            * can't target from shadow styles).
            */
@@ -171,7 +172,17 @@ export class LionInputTelDropdown extends LionInputTel {
   get slots() {
     return {
       ...super.slots,
-      prefix: () => this.__dropdownRenderParent,
+      prefix: () => {
+        const ctor = /** @type {typeof LionInputTelDropdown} */ (this.constructor);
+        const { templates } = ctor;
+
+        return {
+          template: templates.dropdown(this._templateDataDropdown),
+          afterRender: () => {
+            this.__syncRegionWithDropdown();
+          },
+        };
+      },
     };
   }
 
@@ -186,7 +197,6 @@ export class LionInputTelDropdown extends LionInputTel {
       type: 'region',
     });
     this.__createRegionMeta();
-    this._scheduleLightDomRender();
   }
 
   /**
@@ -195,6 +205,8 @@ export class LionInputTelDropdown extends LionInputTel {
   _onPhoneNumberUtilReady() {
     super._onPhoneNumberUtilReady();
     this.__createRegionMeta();
+    // render dropdown (trigger render of prefix slot via SlotMixin)
+    this.requestUpdate();
   }
 
   /**
@@ -219,9 +231,6 @@ export class LionInputTelDropdown extends LionInputTel {
      */
     this._preferredCountriesLabel = '';
 
-    /** @type {HTMLDivElement} */
-    this.__dropdownRenderParent = document.createElement('div');
-
     /**
      * Contains everything needed for rendering region options:
      * region code, country code, display name according to locale, display name
@@ -259,9 +268,6 @@ export class LionInputTelDropdown extends LionInputTel {
   updated(changedProperties) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('_needsLightDomRender')) {
-      this.__renderDropdown();
-    }
     if (changedProperties.has('activeRegion')) {
       this.__syncRegionWithDropdown();
     }
@@ -326,6 +332,7 @@ export class LionInputTelDropdown extends LionInputTel {
     if (prevActiveRegion !== this.activeRegion && !this.focused && this._phoneUtil) {
       const prevCountryCode = this._phoneUtil.getCountryCodeForRegionCode(prevActiveRegion);
       const countryCode = this._phoneUtil.getCountryCodeForRegionCode(this.activeRegion);
+
       if (this.value.includes(`+${prevCountryCode}`)) {
         this.modelValue = this._callParser(
           this.value.replace(`+${prevCountryCode}`, `+${countryCode}`),
@@ -350,25 +357,6 @@ export class LionInputTelDropdown extends LionInputTel {
     }
   }
 
-  /**
-   * Abstract away rendering to light dom, so that we can rerender when needed
-   * @private
-   */
-  __renderDropdown() {
-    const ctor = /** @type {typeof LionInputTelDropdown} */ (this.constructor);
-    // If the user locally overrode the templates, get those on the instance
-    const templates = this.templates || ctor.templates;
-    render(
-      templates.dropdown(this._templateDataDropdown),
-      this.__dropdownRenderParent,
-      /** @type {RenderOptions} */ ({
-        scopeName: this.localName,
-        eventContext: this,
-      }),
-    );
-    this.__syncRegionWithDropdown();
-  }
-
   /**
    * @private
    */
@@ -411,6 +399,7 @@ export class LionInputTelDropdown extends LionInputTel {
     if (!this._allowedOrAllRegions?.length || !this.__namesForLocale) {
       return;
     }
+
     this.__regionMetaList = [];
     this.__regionMetaListPreferred = [];
     this._allowedOrAllRegions.forEach(regionCode => {
@@ -436,4 +425,18 @@ export class LionInputTelDropdown extends LionInputTel {
       });
     });
   }
+
+  /**
+   * Usually, we don't use composition in regular LionFields (non choice-groups). Here we use a LionSelect(Rich) inside.
+   * We don't want to repropagate any children, since an Application Developer is not concerned with these internals (see repropate logic in FormControlMixin)
+   * Also, we don't want to give (wrong) info to InteractionStateMixin, that will set the wrong interaction states based on child info.
+   * TODO: Make "this._repropagationRole !== 'child'" the default for FormControlMixin
+   * (so that FormControls used within are never repropagated for LionFields)
+   * @protected
+   * @configure FormControlMixin: don't repropagate any children
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _repropagationCondition() {
+    return false;
+  }
 }

package/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js

@@ -91,8 +91,7 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
 
     it('syncs value of dropdown on init if input has no value does not influence interaction states', async () => {
       const el = await fixture(html` <${tag}></${tag}> `);
-      // TODO find out why its get dirty again
-      // expect(el.dirty).to.be.false;
+      expect(el.dirty).to.be.false;
       expect(el.prefilled).to.be.false;
     });
 
@@ -111,8 +110,7 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
 
     it('sets correct interaction states on init if input has a value', async () => {
       const el = await fixture(html` <${tag} .modelValue="${'+31612345678'}"></${tag}> `);
-      // TODO find out why its get dirty again
-      // expect(el.dirty).to.be.false;
+      expect(el.dirty).to.be.false;
       expect(el.prefilled).to.be.true;
     });
 
@@ -245,10 +243,10 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
         const { resolveLoaded } = mockPhoneUtilManager();
         const el = await fixture(html` <${tag} .allowedRegions="${['DE']}"></${tag}> `);
         // @ts-ignore
-        const spy = sinon.spy(el, '_scheduleLightDomRender');
+        const spy = sinon.spy(el, '__rerenderSlot');
         resolveLoaded(undefined);
         await aTimeout(0);
-        expect(spy).to.have.been.calledOnce;
+        expect(spy).to.have.been.calledWith('prefix');
         restorePhoneUtilManager();
         spy.restore();
       });
@@ -323,6 +321,7 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
         mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
         await el.updateComplete;
         await el.updateComplete;
+
         expect(el.value).to.equal('+32 612345678');
       });
 

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

@@ -1,56 +1,35 @@
 import { getDecimalSeparator } from './getDecimalSeparator.js';
 
-/**
- * @param {string} value to evaluate
- * @return {boolean} true if value equal . or ,
- */
-function isDecimalSeparator(value) {
-  return value === '.' || value === ',';
-}
-
 /**
  * Determines the best possible parsing mode.
  *
- * - If there is only one separator (withLocale)
- * - 1,23 => xxx1.23 (heuristic)
- * - else parse mode depends mostly on the last 4 chars
- * - 1234 => xxx1234 (heuristic)
- * - [space]123 => xxx123 (heuristic)
- * - ,123 => unclear
- *   - if 1.000,123 (we find a different separator) => 1000.123 (heuristic)
- *   - if 1,000,123 (we find only same separators) => 1000123 (unparseable)
- *   - if 100,123 (we find no more separators) => unclear
- *     - if en => 100123 (withLocale)
- *     - if nl => 100.123 (withLocale)
- *
- * See also {@link parseAmount}
+ * It has 3 "methods" of returning numbers
+ * - 'unparseable': becomes just numbers
+ * - 'withLocale': result depends on given or global locale
+ * - 'heuristic': result depends on considering separators
  *
  * @example
- * getParseMode('1.234') => 'withLocale'
+ * parseNumber('1.234.567'); // method: unparseable => 1234567
+ * parseNumber('1.234'); // method: withLocale => depending on locale 1234 or 1.234
+ * parseNumber('1.234,56'); // method: heuristic => 1234.56
+ * parseNumber('1 234.56'); // method: heuristic => 1234.56
+ * parseNumber('1,234.56'); // method: heuristic => 1234.56
  *
  * @param {string} value Clean number (only [0-9 ,.]) to be parsed
+ * @param {object} options
+ * @param {string?} [options.mode] auto|pasted
  * @return {string} unparseable|withLocale|heuristic
  */
 function getParseMode(value, { mode = 'auto' } = {}) {
   const separators = value.match(/[., ]/g);
 
-  if (mode === 'auto' && separators && separators.length === 1) {
+  if (!separators || (mode === 'auto' && separators.length === 1)) {
     return 'withLocale';
   }
-
-  if (value.length > 4) {
-    const charAtLastSeparatorPosition = value[value.length - 4];
-    if (isDecimalSeparator(charAtLastSeparatorPosition)) {
-      const firstPart = value.substring(0, value.length - 4);
-      const otherSeparators = firstPart.match(/[., ]/g);
-      if (otherSeparators) {
-        const lastSeparator = charAtLastSeparatorPosition;
-        return otherSeparators.indexOf(lastSeparator) === -1 ? 'heuristic' : 'unparseable';
-      }
-      return 'withLocale';
-    }
+  if (separators.length === 1 || separators[0] !== separators[separators.length - 1]) {
+    return 'heuristic';
   }
-  return 'heuristic';
+  return 'unparseable';
 }
 
 /**

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

@@ -72,19 +72,10 @@ describe('parseNumber()', () => {
     expect(parseNumber('123456.78', { mode: 'pasted' })).to.equal(123456.78);
   });
 
-  it('detects separators heuristically when there are 2 same ones e.g. 1.234.56', () => {
-    expect(parseNumber('1.234.5')).to.equal(1234.5);
-    expect(parseNumber('1,234,5')).to.equal(1234.5);
-
-    expect(parseNumber('1.234.56')).to.equal(1234.56);
-    expect(parseNumber('1,234,56')).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);
-
-    expect(parseNumber('1.234.5678')).to.equal(1234.5678);
-    expect(parseNumber('1,234,5678')).to.equal(1234.5678);
-
-    expect(parseNumber('1.234.56789')).to.equal(1234.56789);
-    expect(parseNumber('1,234,56789')).to.equal(1234.56789);
   });
 
   it('uses locale to parse amount if there is only one separator e.g. 1.234', () => {

package/components/localize/types/LocalizeMixinTypes.ts

@@ -58,7 +58,7 @@ export interface msgOptions {
   locale?: string;
 }
 
-declare class LocalizeMixinHost {
+export declare class LocalizeMixinHost {
   static get localizeNamespaces(): StringToFunctionMap[];
 
   static get waitForLocalizeNamespaces(): boolean;