@lion/ui 0.23.0 → 0.24.0

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

@@ -10,46 +10,38 @@ import '@lion/ui/define/lion-input-date.js';
  * @typedef {import('../src/LionInputDate.js').LionInputDate} LionInputDate
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionInputDate>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionInputDate>} */ _fixture;
 describe('<lion-input-date>', () => {
   const localizeManager = getLocalizeManager();
-
   beforeEach(() => {
     localizeTearDown();
   });
-
   it('returns undefined when value is empty string', async () => {
     const el = await fixture(html`<lion-input-date></lion-input-date>`);
     expect(el.parser('')).to.equal(undefined);
   });
-
   it('has type="text" to activate default keyboard on mobile with all necessary symbols', async () => {
     const el = await fixture(html`<lion-input-date></lion-input-date>`);
     const { _inputNode } = getInputMembers(el);
     expect(_inputNode.type).to.equal('text');
   });
-
   it('has validator "isDate" applied by default', async () => {
     const el = await fixture(html`<lion-input-date></lion-input-date>`);
     el.modelValue = '2005/11/10';
     expect(el.hasFeedbackFor).to.include('error');
     expect(el.validationStates).to.have.property('error');
     expect(el.validationStates.error).to.have.property('IsDate');
-
     el.modelValue = new Date('2005/11/10');
     expect(el.hasFeedbackFor).not.to.include('error');
     expect(el.validationStates).to.have.property('error');
     expect(el.validationStates.error).not.to.have.property('IsDate');
   });
-
   it("does not throw on invalid dates like new Date('20.10.'), which could happen while the user types", async () => {
     const el = await fixture(html`<lion-input-date></lion-input-date>`);
     expect(() => {
       el.modelValue = new Date('foo');
     }).to.not.throw();
   });
-
   it('gets validated by "MaxDate" correctly', async () => {
     const el = await fixture(html`
       <lion-input-date
@@ -60,51 +52,51 @@ describe('<lion-input-date>', () => {
     expect(el.hasFeedbackFor).to.include('error');
     expect(el.validationStates).to.have.property('error');
     expect(el.validationStates.error).to.have.property('MaxDate');
-
     el.modelValue = new Date('2017/06/14');
     expect(el.hasFeedbackFor).not.to.include('error');
     expect(el.validationStates).to.have.property('error');
     expect(el.validationStates.error).not.to.have.property('MaxDate');
   });
-
   describe('locale', () => {
     it('uses formatOptions.locale', async () => {
       const el = await fixture(html`
         <lion-input-date
-          .formatOptions="${{ locale: 'en-GB' }}"
+          .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' }}"
+          .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' }}"
+          .formatOptions="${{
+            locale: 'en-GB',
+          }}"
         ></lion-input-date>
       `);
       expect(el.formattedValue).to.equal('15/06/2017'); // british
@@ -113,31 +105,32 @@ describe('<lion-input-date>', () => {
       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' }),
+      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' }),
+      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' }),
+      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
@@ -147,24 +140,20 @@ describe('<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 () => {
     const el = await fixture(html`
       <lion-input-date><label slot="label">Label</label></lion-input-date>
     `);
     await expect(el).to.be.accessible();
   });
-
   it('is accessible when readonly', async () => {
     const el = await fixture(html`
       <lion-input-date readonly .modelValue=${new Date('2017/06/15')}
@@ -173,14 +162,12 @@ describe('<lion-input-date>', () => {
     `);
     await expect(el).to.be.accessible();
   });
-
   it('is accessible when disabled', async () => {
     const el = await fixture(html`
       <lion-input-date disabled><label slot="label">Label</label></lion-input-date>
     `);
     await expect(el).to.be.accessible();
   });
-
   it('serializes to iso format', async () => {
     const el = await fixture(html`
       <lion-input-date .modelValue="${new Date('2000/12/15')}"></lion-input-date>

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

@@ -33,7 +33,6 @@ export class LionInputDatepicker extends ScopedElementsMixin(
       'lion-calendar': LionCalendar,
     };
   }
-
   static get styles() {
     return [
       ...super.styles,
@@ -87,38 +86,38 @@ export class LionInputDatepicker extends ScopedElementsMixin(
       _calendarInvokerSlot: {
         attribute: false,
       },
-
       __calendarMinDate: {
         attribute: false,
       },
-
       __calendarMaxDate: {
         attribute: false,
       },
-
       __calendarDisableDates: {
         attribute: false,
         type: Array,
       },
     };
   }
-
   get slots() {
     return {
       ...super.slots,
       [this._calendarInvokerSlot]: () => this._invokerTemplate(),
     };
   }
-
   static get localizeNamespaces() {
-    return [{ 'lion-input-datepicker': localizeNamespaceLoader }, ...super.localizeNamespaces];
+    return [
+      {
+        'lion-input-datepicker': localizeNamespaceLoader,
+      },
+      ...super.localizeNamespaces,
+    ];
   }
 
   /**
    * @protected
    */
   get _invokerNode() {
-    return /** @type {HTMLElement} */ (this.querySelector(`#${this.__invokerId}`));
+    return /** @type {HTMLElement} */ this.querySelector(`#${this.__invokerId}`);
   }
 
   /**
@@ -126,11 +125,10 @@ export class LionInputDatepicker extends ScopedElementsMixin(
    * @protected
    */
   get _calendarNode() {
-    return /** @type {LionCalendar} */ (
-      this._overlayCtrl.contentNode.querySelector('[slot="content"]')
+    return /** @type {LionCalendar} */ this._overlayCtrl.contentNode.querySelector(
+      '[slot="content"]',
     );
   }
-
   get _isEditingTextField() {
     return this.focused && this._isHandlingUserInput;
   }
@@ -149,7 +147,6 @@ export class LionInputDatepicker extends ScopedElementsMixin(
 
   /** @protected */
   _isHandlingCalendarUserInput;
-
   constructor() {
     super();
     this.__invokerId = uuid(this.localName);
@@ -176,7 +173,6 @@ export class LionInputDatepicker extends ScopedElementsMixin(
    */
   requestUpdate(name, oldValue, options) {
     super.requestUpdate(name, oldValue, options);
-
     if (name === 'disabled' || name === 'readOnly') {
       this.__toggleInvokerDisabled();
     }
@@ -185,7 +181,7 @@ export class LionInputDatepicker extends ScopedElementsMixin(
   /** @private */
   __toggleInvokerDisabled() {
     if (this._invokerNode) {
-      const invokerNode = /** @type {HTMLElement & {disabled: boolean}} */ (this._invokerNode);
+      const invokerNode = /** @type {HTMLElement & {disabled: boolean}} */ this._invokerNode;
       invokerNode.disabled = this.disabled || this.readOnly;
     }
   }
@@ -224,7 +220,6 @@ export class LionInputDatepicker extends ScopedElementsMixin(
       </div>
     `;
   }
-
   _overlayFrameTemplate() {
     return html`
       <div class="calendar__overlay-frame">
@@ -246,7 +241,6 @@ export class LionInputDatepicker extends ScopedElementsMixin(
       </div>
     `;
   }
-
   render() {
     return html`
       <div class="form-field__group-one">${this._groupOneTemplate()}</div>
@@ -266,7 +260,7 @@ export class LionInputDatepicker extends ScopedElementsMixin(
       <lion-calendar
         slot="content"
         .selectedDate="${
-          /** @type {typeof LionInputDatepicker} */ (this.constructor).__getSyncDownValue(
+          /** @type {typeof LionInputDatepicker} */ this.constructor.__getSyncDownValue(
             this.modelValue,
           )
         }"
@@ -308,10 +302,8 @@ export class LionInputDatepicker extends ScopedElementsMixin(
   _invokerIconTemplate() {
     return html`📅`;
   }
-
   _setupOverlayCtrl() {
     super._setupOverlayCtrl();
-
     this.__datepickerBeforeShow = () => {
       this._overlayCtrl.updateConfig(this._defineOverlayConfig());
     };
@@ -341,11 +333,10 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     this.hasArrow = false;
     return withBottomSheetConfig();
   }
-
   async __openCalendarOverlay() {
     await this._overlayCtrl.show();
     await Promise.all([
-      /** @type {import('lit').LitElement} */ (this._overlayCtrl.contentNode).updateComplete,
+      /** @type {import('lit').LitElement} */ this._overlayCtrl.contentNode.updateComplete,
       this._calendarNode.updateComplete,
     ]);
     this._onCalendarOverlayOpened();
@@ -373,7 +364,6 @@ export class LionInputDatepicker extends ScopedElementsMixin(
       // Synchronize new selectedDate value to input
       this._isHandlingUserInput = true;
       this._isHandlingCalendarUserInput = true;
-
       if (
         Array.isArray(this.__calendarDisableDates) &&
         this.__calendarDisableDates.includes(selectedDate)
@@ -383,7 +373,6 @@ export class LionInputDatepicker extends ScopedElementsMixin(
       } else {
         this.modelValue = selectedDate;
       }
-
       this._isHandlingUserInput = false;
       this._isHandlingCalendarUserInput = false;
     }
@@ -417,8 +406,8 @@ export class LionInputDatepicker extends ScopedElementsMixin(
   __syncDisabledDates(validators) {
     // On every validator change, synchronize disabled dates: this means
     // we need to extract minDate, maxDate, minMaxDate and disabledDates validators
-    validators.forEach(v => {
-      const vctor = /** @type {typeof import('@lion/ui/form-core.js').Validator} */ (v.constructor);
+    validators.forEach((v) => {
+      const vctor = /** @type {typeof import('@lion/ui/form-core.js').Validator} */ v.constructor;
       if (vctor.validatorName === 'MinDate' && v.type === 'error') {
         this.__calendarMinDate = v.param;
       } else if (vctor.validatorName === 'MaxDate' && v.type === 'error') {
@@ -462,10 +451,9 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     if (this._cachedOverlayContentNode) {
       return this._cachedOverlayContentNode;
     }
-    this._cachedOverlayContentNode = /** @type {HTMLElement} */ (
-      /** @type {ShadowRoot} */ (this.shadowRoot).querySelector('.calendar__overlay-frame')
-    );
-
+    this._cachedOverlayContentNode =
+      /** @type {HTMLElement} */
+      /** @type {ShadowRoot} */ this.shadowRoot.querySelector('.calendar__overlay-frame');
     return this._cachedOverlayContentNode;
   }
 }

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

@@ -11,8 +11,7 @@ async function combineLocalizeImports(importPromises) {
   }
   return combinedResult;
 }
-
-export const localizeNamespaceLoader = /** @param {string} locale */ locale => {
+export const localizeNamespaceLoader = /** @param {string} locale */ (locale) => {
   switch (locale) {
     case 'bg-BG':
       return combineLocalizeImports([

package/components/input-datepicker/test/lion-input-datepicker-integrations.test.js

@@ -2,16 +2,13 @@ import {
   runFormatMixinSuite,
   runInteractionStateMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
-
 import '@lion/ui/define/lion-input-datepicker.js';
-
 const tagString = 'lion-input-datepicker';
 describe('<lion-input-datepicker> integrations', () => {
   runInteractionStateMixinSuite({
     tagString,
     allowedModelValueTypes: [Date],
   });
-
   runFormatMixinSuite({
     tagString,
     modelValueType: Date,