@lion/ui 0.4.2 → 0.5.1

package/components/overlays/src/utils/adopt-styles.js

@@ -1,3 +1,5 @@
+import { browserDetection } from '@lion/ui/core.js';
+
 // See: https://github.com/ing-bank/lion/issues/1880
 
 /**
@@ -106,7 +108,10 @@ export function adoptStyle(renderRoot, style, { teardown = false } = {}) {
     return;
   }
 
-  if (!_adoptStyleUtils.supportsAdoptingStyleSheets) {
+  // ios seems to have issues when using the adoptedStyleSheets where some styles are applied
+  // while others are ignored so the overlays are rendered incorrectly, to mitigate it we use
+  // traditional "stylesheet".
+  if (!_adoptStyleUtils.supportsAdoptingStyleSheets || browserDetection.isIOS) {
     adoptStyleWhenAdoptedStylesheetsNotSupported(renderRoot, style, { teardown });
     return;
   }

package/components/overlays/test/OverlaysManager.test.js

@@ -1,7 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+import sinon from 'sinon';
+import { browserDetection } from '@lion/ui/core.js';
 import { OverlayController, OverlaysManager } from '@lion/ui/overlays.js';
-import { _browserDetection } from '../src/OverlaysManager.js';
 
 /**
  * @typedef {import('../types/OverlayConfig.js').OverlayConfig} OverlayConfig
@@ -101,24 +102,24 @@ describe('OverlaysManager', () => {
   });
 
   describe('Browser/device edge cases', () => {
-    const isIOSOriginal = _browserDetection.isIOS;
-    const isMacSafariOriginal = _browserDetection.isMacSafari;
+    const isIOSDetectionStub = sinon.stub(browserDetection, 'isIOS');
+    const isMacSafariDetectionStub = sinon.stub(browserDetection, 'isMacSafari');
 
     function mockIOS() {
-      _browserDetection.isIOS = true;
-      _browserDetection.isMacSafari = false;
+      isIOSDetectionStub.value(true);
+      isMacSafariDetectionStub.value(false);
     }
 
     function mockMacSafari() {
       // When we are iOS
-      _browserDetection.isIOS = false;
-      _browserDetection.isMacSafari = true;
+      isIOSDetectionStub.value(false);
+      isMacSafariDetectionStub.value(true);
     }
 
     afterEach(() => {
       // Restore original values
-      _browserDetection.isIOS = isIOSOriginal;
-      _browserDetection.isMacSafari = isMacSafariOriginal;
+      isIOSDetectionStub.restore();
+      isMacSafariDetectionStub.restore();
     });
 
     describe('When initialized with "preventsScroll: true"', () => {
@@ -137,8 +138,8 @@ describe('OverlaysManager', () => {
         );
 
         // When we are not iOS nor MacSafari
-        _browserDetection.isIOS = false;
-        _browserDetection.isMacSafari = false;
+        isIOSDetectionStub.value(false);
+        isMacSafariDetectionStub.value(false);
 
         const dialog2 = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr);
         await dialog2.show();

package/components/overlays/test/utils-tests/adopt-styles.test.js

@@ -1,4 +1,5 @@
 import { expect } from '@open-wc/testing';
+import { browserDetection } from '@lion/ui/core.js';
 import { css } from 'lit';
 import sinon from 'sinon';
 import {
@@ -164,6 +165,66 @@ describe('adoptStyle()', () => {
   });
 });
 
+describe('Fallback when IOS user opens overlay', () => {
+  it('adds a "traditional" stylesheet to the body', async () => {
+    const browserDetectionStub = sinon.stub(browserDetection, 'isIOS').value(true);
+
+    const myCssResult = css`
+      .check {
+        color: blue;
+      }
+    `;
+    const root = document;
+    adoptStyle(root, myCssResult);
+
+    const sheets = Array.from(document.body.querySelectorAll('style'));
+    const lastAddedSheet = sheets[sheets.length - 1];
+    expect(lastAddedSheet.textContent).to.equal(myCssResult.cssText);
+    browserDetectionStub.restore();
+  });
+
+  describe('Teardown', () => {
+    it('removes a "traditional" stylesheet from the shadowRoot', async () => {
+      const browserDetectionStub = sinon.stub(browserDetection, 'isIOS').value(true);
+
+      const { shadowHost, cleanupShadowHost } = createShadowHost();
+      const myCssResult = css`
+        .check {
+          color: blue;
+        }
+      `;
+      const root = /** @type {ShadowRoot} */ (shadowHost.shadowRoot);
+
+      adoptStyle(root, myCssResult);
+      const sheets1 = Array.from(root.querySelectorAll('style'));
+      const lastAddedSheet1 = sheets1[sheets1.length - 1];
+      expect(lastAddedSheet1.textContent).to.equal(myCssResult.cssText);
+      adoptStyle(root, myCssResult, { teardown: true });
+      const sheets2 = Array.from(root.querySelectorAll('style'));
+      const lastAddedSheet2 = sheets2[sheets2.length - 1];
+      expect(lastAddedSheet2?.textContent).to.not.equal(myCssResult.cssText);
+
+      const myCSSStyleSheet = new CSSStyleSheet();
+      myCSSStyleSheet.insertRule('.check { color: blue; }');
+
+      adoptStyle(root, myCSSStyleSheet);
+      const sheets3 = Array.from(root.querySelectorAll('style'));
+      const lastAddedSheet3 = sheets3[sheets3.length - 1];
+      expect(lastAddedSheet3.textContent).to.equal(
+        serializeConstructableStylesheet(myCSSStyleSheet),
+      );
+      adoptStyle(root, myCSSStyleSheet, { teardown: true });
+      const sheets4 = Array.from(root.querySelectorAll('style'));
+      const lastAddedSheet4 = sheets4[sheets4.length - 1];
+      expect(lastAddedSheet4?.textContent).to.not.equal(myCSSStyleSheet);
+
+      cleanupShadowHost();
+
+      browserDetectionStub.restore();
+    });
+  });
+});
+
 describe('adoptStyles()', () => {
   it('calls "adoptStyle" for all entries in CSSResult|CSSStylesheet[]', async () => {
     const spy = sinon.spy(_adoptStyleUtils, 'adoptStyle');

package/components/overlays/test-suites/OverlayMixin.suite.js

@@ -4,7 +4,7 @@ import sinon from 'sinon';
 import { overlays as overlaysManager, OverlayController } from '@lion/ui/overlays.js';
 
 import '@lion/ui/define/lion-dialog.js';
-import { _browserDetection } from '../src/OverlaysManager.js';
+import { browserDetection } from '@lion/ui/core.js';
 
 /**
  * @typedef {import('../types/OverlayConfig.js').OverlayConfig} OverlayConfig
@@ -99,7 +99,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       // For now, we skip this test for MacSafari, since the body.overlays-scroll-lock-ios-fix
       // class results in a scrollbar when preventsScroll is true.
       // However, fully functioning interacive elements (input fields) in the dialog are more important
-      if (_browserDetection.isMacSafari && elWithBigParent._overlayCtrl.preventsScroll) {
+      if (browserDetection.isMacSafari && elWithBigParent._overlayCtrl.preventsScroll) {
         return;
       }
 

package/components/radio-group/src/LionRadioGroup.js

@@ -23,7 +23,7 @@ export class LionRadioGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement))
         child.reset();
         // If the value was initially checked save this
         if (child.checked) {
-          initValue = child.value;
+          initValue = child.choiceValue;
         }
       }
     });

package/components/radio-group/test/lion-radio-group.test.js

@@ -49,6 +49,35 @@ describe('<lion-radio-group>', () => {
       await el.updateComplete;
       expect(el.modelValue).to.deep.equal('female');
     });
+
+    it('restores default values if changes were made to a group containing options with formatters', async () => {
+      const formatter = /** @type {(modelValue: { value: string}) => string} */ modelValue =>
+        modelValue.value.charAt(0);
+      const el = await fixture(html`
+        <lion-radio-group name="gender" label="Gender">
+          <lion-radio label="Male" .formatter=${formatter} .choiceValue=${'male'}></lion-radio>
+          <lion-radio
+            label="Female"
+            .formatter=${formatter}
+            .modelValue=${{ value: 'female', checked: true }}
+          ></lion-radio>
+          <lion-radio label="Other" .formatter=${formatter} .choiceValue=${'other'}></lion-radio>
+        </lion-radio-group>
+      `);
+      el.formElements[0].checked = true;
+      expect(el.modelValue).to.deep.equal('male');
+
+      el.resetGroup();
+      expect(el.modelValue).to.deep.equal('female');
+
+      el.formElements[2].checked = true;
+      expect(el.modelValue).to.deep.equal('other');
+
+      el.resetGroup();
+      await el.formElements[1].updateComplete;
+      await el.updateComplete;
+      expect(el.modelValue).to.deep.equal('female');
+    });
   });
 
   it('should have role = radiogroup', async () => {

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

@@ -60,7 +60,7 @@ describe('lion-select', () => {
     expect(lionSelect.formattedValue).to.equal('');
 
     const select = /** @type {HTMLSlotElement} */ (
-      lionSelect.shadowRoot?.querySelector('slot[name=input]')
+      /** @type {ShadowRoot} */ (lionSelect.shadowRoot).querySelector('slot[name=input]')
     ).assignedElements()[0];
     const options = select.querySelectorAll('option');
     options[1].textContent = 'Item 2';

package/components/switch/src/LionSwitch.js

@@ -100,7 +100,9 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
   /** @param {import('lit').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
-    this._syncButtonSwitch();
+    if (changedProperties.has('disabled')) {
+      this._syncButtonSwitch();
+    }
   }
 
   /**

package/components/switch/src/LionSwitchButton.js

@@ -4,10 +4,6 @@ import { DisabledWithTabIndexMixin } from '@lion/ui/core.js';
 export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
   static get properties() {
     return {
-      role: {
-        type: String,
-        reflect: true,
-      },
       checked: {
         type: Boolean,
         reflect: true,
@@ -76,7 +72,6 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
     // inputNode = this, which always requires a value prop
     this.value = '';
 
-    this.role = 'switch';
     this.checked = false;
     this.__initialized = false;
     /** @protected */
@@ -89,6 +84,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
 
   connectedCallback() {
     super.connectedCallback();
+    this.setAttribute('role', 'switch');
     this.setAttribute('aria-checked', `${this.checked}`);
     this.addEventListener('click', this._toggleChecked);
     this.addEventListener('keydown', this.__handleKeydown);
@@ -146,6 +142,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
 
   /** @param {import('lit').PropertyValues } changedProperties */
   updated(changedProperties) {
+    super.updated(changedProperties);
     if (changedProperties.has('disabled')) {
       this.setAttribute('aria-disabled', `${this.disabled}`); // create mixin if we need it in more places
     }

package/components/tabs/src/LionTabs.js

@@ -345,6 +345,13 @@ export class LionTabs extends LitElement {
     }
   }
 
+  /**
+   * @return {number}
+   */
+  get selectedIndex() {
+    return this.__selectedIndex || 0;
+  }
+
   /**
    * @param {number} value The new index
    */
@@ -371,13 +378,6 @@ export class LionTabs extends LitElement {
     this.requestUpdate('selectedIndex', stale);
   }
 
-  /**
-   * @return {number}
-   */
-  get selectedIndex() {
-    return this.__selectedIndex || 0;
-  }
-
   /** @protected */
   get _pairCount() {
     return (this.__store && this.__store.length) || 0;

package/components/textarea/src/LionTextarea.js

@@ -198,7 +198,7 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
     let count = 3; // max tasks to wait for
     // @ts-ignore this property is added by webcomponentsjs polyfill for old browsers
     while (count !== 0 && !this.__shady_native_contains(this._inputNode)) {
-      // eslint-disable-next-line no-await-in-loop
+      // eslint-disable-next-line no-await-in-loop, no-promise-executor-return
       await new Promise(resolve => setTimeout(resolve));
       count -= 1;
     }

package/components/validate-messages/translations/de.js

@@ -5,8 +5,8 @@ export default {
     MinLength: 'Du musst mindestens {params} Zeichen eingeben.',
     MaxLength: 'Du kannst maximal {params} Zeichen eingeben.',
     MinMaxLength: 'Du musst zwischen {params.min} und {params.max} Zeichen eingeben.',
-    Pattern: 'Geben Sie ein gültiges {fieldName} ein.',
-    IsNumber: 'Geben Sie ein gültiges {fieldName} ein.',
+    Pattern: 'Geben Sie ein gültige {fieldName} ein.',
+    IsNumber: 'Geben Sie ein gültige {fieldName} ein.',
     MinNumber: 'Geben Sie für {fieldName} einen Wert über {params} ein.',
     MaxNumber: 'Geben Sie für {fieldName} einen Wert unter {params} ein.',
     MinMaxNumber:
@@ -27,7 +27,7 @@ export default {
     MinLength: 'Du solltest mindestens {params} Zeichen eingeben.',
     MaxLength: 'Du kannst maximal {params} Zeichen eingeben.',
     MinMaxLength: 'Du solltest zwischen {params.min} und {params.max} Zeichen eingeben.',
-    IsNumber: 'Geben Sie ein gültiges {fieldName} ein.',
+    IsNumber: 'Geben Sie ein gültige {fieldName} ein.',
     MinNumber: 'Geben Sie für {fieldName} einen Wert über {params} ein.',
     MaxNumber: 'Geben Sie für {fieldName} einen Wert unter {params} ein.',
     MinMaxNumber: