@lion/ui 0.22.0 → 0.24.0

package/components/textarea/src/LionTextarea.js

@@ -2,15 +2,14 @@
 import autosize from 'autosize';
 import { LionField, NativeTextFieldMixin } from '@lion/ui/form-core.js';
 import { css } from 'lit';
-
 class LionFieldWithTextArea extends LionField {
   /**
    * @returns {HTMLTextAreaElement}
    * @protected
    */
   get _inputNode() {
-    return /** @type {HTMLTextAreaElement} */ (
-      Array.from(this.children).find(el => el.slot === 'input')
+    return /** @type {HTMLTextAreaElement} */ Array.from(this.children).find(
+      (el) => el.slot === 'input',
     );
   }
 }
@@ -43,7 +42,6 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
       },
     };
   }
-
   get slots() {
     return {
       ...super.slots,
@@ -54,12 +52,10 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
         if (input.style.resize !== undefined) {
           input.style.resize = 'none';
         }
-
         return input;
       },
     };
   }
-
   constructor() {
     super();
     this.rows = 2;
@@ -67,7 +63,6 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
     this.readOnly = false;
     this.placeholder = '';
   }
-
   connectedCallback() {
     // eslint-disable-next-line wc/guard-super-call
     super.connectedCallback();
@@ -79,22 +74,18 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
   /** @param {import('lit').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
-
     if (changedProperties.has('name')) {
       this._inputNode.name = this.name;
     }
-
     if (changedProperties.has('autocomplete')) {
       // the DOM lib types `autocomplete` as `AutoFill` only in newer TypeScript;
       // cast keeps this valid on both compilers without widening the public type
-      this._inputNode.autocomplete = /** @type {any} */ (this.autocomplete);
+      this._inputNode.autocomplete = /** @type {any} */ this.autocomplete;
     }
-
     if (changedProperties.has('disabled')) {
       this._inputNode.disabled = this.disabled;
       this.validate();
     }
-
     if (changedProperties.has('rows')) {
       const native = this._inputNode;
       if (native) {
@@ -102,30 +93,25 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
         native['rows'] = this.rows;
       }
     }
-
     if (changedProperties.has('readOnly')) {
       const native = this._inputNode;
       if (native) {
         native.readOnly = this.readOnly;
       }
     }
-
     if (changedProperties.has('placeholder')) {
       const native = this._inputNode;
       if (native) {
         native.placeholder = this.placeholder;
       }
     }
-
     if (changedProperties.has('modelValue')) {
       this.resizeTextarea();
     }
-
     if (changedProperties.has('maxRows') || changedProperties.has('rows')) {
       this.setTextareaMaxHeight();
     }
   }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     autosize.destroy(this._inputNode);
@@ -138,19 +124,15 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
     const { value } = this._inputNode;
     this._inputNode.value = '';
     this.resizeTextarea();
-
     const cs = window.getComputedStyle(this._inputNode, null);
     const lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.height) / this.rows;
     const paddingOffset = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
     const borderOffset = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
     const offset = cs.boxSizing === 'border-box' ? paddingOffset + borderOffset : 0;
-
     this._inputNode.style.maxHeight = `${lineHeight * this.maxRows + offset}px`;
-
     this._inputNode.value = value;
     this.resizeTextarea();
   }
-
   static get styles() {
     return [
       ...super.styles,
@@ -177,7 +159,6 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
     }
     return super.updateComplete;
   }
-
   resizeTextarea() {
     autosize.update(this._inputNode);
   }
@@ -201,7 +182,7 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
     // @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, no-promise-executor-return
-      await new Promise(resolve => setTimeout(resolve));
+      await new Promise((resolve) => setTimeout(resolve));
       count -= 1;
     }
   }

package/components/textarea/test/lion-textarea-integrations.test.js

@@ -3,21 +3,16 @@ import {
   runInteractionStateMixinSuite,
   runNativeTextFieldMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
-
 import '@lion/ui/define/lion-textarea.js';
-
 const tagString = 'lion-textarea';
-
 describe('<lion-textarea> integrations', () => {
   runInteractionStateMixinSuite({
     tagString,
   });
-
   runFormatMixinSuite({
     tagString,
     modelValueType: String,
   });
-
   runNativeTextFieldMixinSuite({
     tagString,
   });

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

@@ -2,7 +2,6 @@ import { aTimeout, expect, fixture as _fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 import sinon from 'sinon';
 import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
-
 import '@lion/ui/define/lion-textarea.js';
 
 /**
@@ -10,13 +9,11 @@ import '@lion/ui/define/lion-textarea.js';
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
 
-const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionTextarea>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionTextarea>} */ _fixture;
 function hasBrowserResizeSupport() {
   const textarea = document.createElement('textarea');
   return textarea.style.resize !== undefined;
 }
-
 describe('<lion-textarea>', () => {
   it(`can be used with the following declaration
   ~~~
@@ -25,17 +22,14 @@ describe('<lion-textarea>', () => {
     const el = await fixture(`<lion-textarea></lion-textarea>`);
     expect(el.querySelector('textarea')?.nodeName).to.equal('TEXTAREA');
   });
-
   it('has .rows=2 and .maxRows=6', async () => {
     const el = await fixture(`<lion-textarea></lion-textarea>`);
     expect(el.rows).to.equal(2);
     expect(el.maxRows).to.equal(6);
   });
-
   it('has .readOnly=false .rows=2 and rows="2" by default', async () => {
     const el = await fixture(`<lion-textarea>foo</lion-textarea>`);
     const { _inputNode } = getFormControlMembers(el);
-
     expect(el.rows).to.equal(2);
     expect(el.getAttribute('rows')).to.be.equal('2');
     // @ts-ignore
@@ -44,7 +38,6 @@ describe('<lion-textarea>', () => {
     expect(el.readOnly).to.be.false;
     expect(_inputNode.hasAttribute('readonly')).to.be.false;
   });
-
   it('sync rows down to the native textarea', async () => {
     const el = await fixture(`<lion-textarea rows="8">foo</lion-textarea>`);
     const { _inputNode } = getFormControlMembers(el);
@@ -54,31 +47,26 @@ describe('<lion-textarea>', () => {
     expect(_inputNode.rows).to.equal(8);
     expect(_inputNode.getAttribute('rows')).to.be.equal('8');
   });
-
   it('sync readOnly to the native textarea', async () => {
     const el = await fixture(`<lion-textarea readonly>foo</lion-textarea>`);
     expect(el.readOnly).to.be.true;
     expect(el.querySelector('textarea')?.readOnly).to.be.true;
   });
-
   it('disables user resize behavior', async () => {
     if (!hasBrowserResizeSupport()) {
       return;
     }
-
     const el = await fixture(`<lion-textarea></lion-textarea>`);
     const { _inputNode } = getFormControlMembers(el);
     const computedStyle = window.getComputedStyle(_inputNode);
     expect(computedStyle.resize).to.equal('none');
   });
-
   it('supports initial modelValue', async () => {
     const el = await fixture(
       html`<lion-textarea .modelValue="${'From value attribute'}"></lion-textarea>`,
     );
     expect(el.querySelector('textarea')?.value).to.equal('From value attribute');
   });
-
   it('adjusts height based on content', async () => {
     const el = await fixture(`<lion-textarea></lion-textarea>`);
     const initialHeight = el.offsetHeight;
@@ -86,13 +74,11 @@ describe('<lion-textarea>', () => {
     await el.updateComplete;
     const hightWith5TextLines = el.offsetHeight;
     expect(hightWith5TextLines > initialHeight).to.equal(true);
-
     el.modelValue = 'batman';
     await el.updateComplete;
     const hightWith1Line = el.offsetHeight;
     expect(hightWith1Line < hightWith5TextLines).to.equal(true);
   });
-
   it(`starts growing when content is bigger than "rows"
     'and stops growing after property "maxRows" is reached`, async () => {
     const el = await fixture(html`<lion-textarea></lion-textarea>`);
@@ -101,7 +87,6 @@ describe('<lion-textarea>', () => {
       el.modelValue += '\n';
       await el.updateComplete;
       const newHeight = el.offsetHeight;
-
       if (i > el.maxRows) {
         // stop growing
         expect(newHeight).to.equal(oldHeight);
@@ -109,7 +94,6 @@ describe('<lion-textarea>', () => {
         // growing normally
         expect(newHeight >= oldHeight).to.equal(true);
       }
-
       return Promise.resolve(newHeight);
     }, Promise.resolve(0));
   });
@@ -122,7 +106,6 @@ describe('<lion-textarea>', () => {
       el.modelValue += `\n`;
       await el.updateComplete;
       const newHeight = el.offsetHeight;
-
       if (i > el.maxRows) {
         // stop growing
         expect(newHeight).to.equal(oldHeight);
@@ -130,54 +113,45 @@ describe('<lion-textarea>', () => {
         // growing normally
         expect(newHeight >= oldHeight).to.equal(true);
       }
-
       return Promise.resolve(newHeight);
     }, Promise.resolve(0));
   });
-
   it('stops shrinking after property "rows" is reached', async () => {
     const el = await fixture(html`<lion-textarea rows="1" max-rows="3"></lion-textarea>`);
     expect(el.scrollHeight).to.be.equal(el.clientHeight);
     const oneRowHeight = el.clientHeight;
-
     el.rows = 3;
     el.resizeTextarea();
     await el.updateComplete;
     expect(oneRowHeight).to.be.below(el.clientHeight).and.to.be.below(el.scrollHeight);
   });
-
   it('has an attribute that can be used to set the placeholder text of the textarea', async () => {
     const el = await fixture(`<lion-textarea placeholder="text"></lion-textarea>`);
     const { _inputNode } = getFormControlMembers(el);
     expect(el.getAttribute('placeholder')).to.equal('text');
     expect(_inputNode.getAttribute('placeholder')).to.equal('text');
-
     el.placeholder = 'foo';
     await el.updateComplete;
     expect(el.getAttribute('placeholder')).to.equal('foo');
     expect(_inputNode.getAttribute('placeholder')).to.equal('foo');
   });
-
   it('fires resize textarea when a visibility change has been detected', async () => {
     const el = await fixture(`
       <div style="display: none">
         <lion-textarea placeholder="text"></lion-textarea>
       </div>
     `);
-    const textArea = /** @type {LionTextarea} */ (el.firstElementChild);
+    const textArea = /** @type {LionTextarea} */ el.firstElementChild;
     await textArea.updateComplete;
-
     const resizeSpy = sinon.spy(textArea, 'resizeTextarea');
     el.style.display = 'block';
     await aTimeout(20);
     expect(resizeSpy.calledOnce).to.be.true;
   });
-
   it('is accessible', async () => {
     const el = await fixture(`<lion-textarea label="Label"></lion-textarea>`);
     await expect(el).to.be.accessible();
   });
-
   it('is accessible when disabled', async () => {
     const el = await fixture(`<lion-textarea label="Label" disabled></lion-textarea>`);
     await expect(el).to.be.accessible();

package/components/tooltip/src/LionTooltip.js

@@ -20,7 +20,6 @@ export class LionTooltip extends ArrowMixin(OverlayMixin(LitElement)) {
       },
     };
   }
-
   static get styles() {
     return [
       ...super.styles,
@@ -39,7 +38,6 @@ export class LionTooltip extends ArrowMixin(OverlayMixin(LitElement)) {
       `,
     ];
   }
-
   constructor() {
     super();
     /**
@@ -59,14 +57,16 @@ export class LionTooltip extends ArrowMixin(OverlayMixin(LitElement)) {
    * // TODO: check if this is a false positive or if we can improve
    * @configure ReactiveElement
    */
-  static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
+  static enabledWarnings = super.enabledWarnings?.filter((w) => w !== 'change-in-update') || [];
 
   /** @protected */
   // eslint-disable-next-line class-methods-use-this
   _defineOverlayConfig() {
     const superCfg = super._defineOverlayConfig();
-    const tooltipCfg = withTooltipConfig({ invokerRelation: this.invokerRelation });
-    return /** @type {OverlayConfig} */ ({
+    const tooltipCfg = withTooltipConfig({
+      invokerRelation: this.invokerRelation,
+    });
+    return /** @type {OverlayConfig} */ {
       ...superCfg,
       ...tooltipCfg,
       popperConfig: {
@@ -77,6 +77,6 @@ export class LionTooltip extends ArrowMixin(OverlayMixin(LitElement)) {
           ...(tooltipCfg.popperConfig?.modifiers || []),
         ],
       },
-    });
+    };
   }
 }