@lion/ui 0.7.7 → 0.7.8

package/components/calendar/src/LionCalendar.js

@@ -270,11 +270,6 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
 
     this.__connectedCallbackDone = true;
 
-    this.__calculateInitialCentralDate();
-
-    // setup data for initial render
-    this.__data = this.__createData();
-
     /**
      * This logic needs to happen on firstUpdated, but every time the DOM node is moved as well
      * since firstUpdated only runs once, this logic is moved here, but after updateComplete
@@ -305,6 +300,13 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     }
   }
 
+  firstUpdated() {
+    this.__calculateInitialCentralDate();
+
+    // setup data for initial render
+    this.__data = this.__createData();
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this.__contentWrapperElement) {
@@ -372,6 +374,8 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     if (this.centralDate === this.__today && this.selectedDate) {
       // initialized with selectedDate only if user didn't provide another one
       this.centralDate = this.selectedDate;
+    } else if (!this.__isEnabledDate(this.centralDate)) {
+      this.centralDate = this.findNearestEnabledDate(this.centralDate);
     }
     /** @type {Date} */
     this.__initialCentralDate = this.centralDate;

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

@@ -465,9 +465,8 @@ describe('<lion-calendar>', () => {
         `);
 
         clock.restore();
-        expect(isSameDate(el.centralDate, new Date('2019/06/03')), 'central date').to.be.true;
-        expect(isSameDate(elSetting.centralDate, new Date('2019/07/03')), 'central date').to.be
-          .true;
+        expect(isSameDate(el.centralDate, new Date('2019/07/03'))).to.be.true;
+        expect(isSameDate(elSetting.centralDate, new Date('2019/07/03'))).to.be.true;
       });
 
       describe('Normalization', () => {
@@ -573,7 +572,7 @@ describe('<lion-calendar>', () => {
               .disableDates="${/** @param {Date} d */ d => d.getDate() === 15}"
             ></lion-calendar>
           `);
-          el.focusDate(el.findNearestEnabledDate());
+          el.focusDate(el.findNearestEnabledDate(new Date()));
           await el.updateComplete;
 
           const elObj = new CalendarObject(el);
@@ -590,7 +589,7 @@ describe('<lion-calendar>', () => {
               .disableDates="${/** @param {Date} d */ d => d.getFullYear() > 1998}"
             ></lion-calendar>
           `);
-          el.focusDate(el.findNearestEnabledDate());
+          el.focusDate(el.findNearestEnabledDate(new Date()));
           await el.updateComplete;
 
           expect(el.centralDate.getFullYear()).to.equal(1998);
@@ -609,7 +608,7 @@ describe('<lion-calendar>', () => {
             ></lion-calendar>
           `);
 
-          el.focusDate(el.findNearestEnabledDate());
+          el.focusDate(el.findNearestEnabledDate(new Date()));
           await el.updateComplete;
 
           expect(el.centralDate.getFullYear()).to.equal(2002);
@@ -1262,6 +1261,34 @@ describe('<lion-calendar>', () => {
 
           clock.restore();
         });
+
+        it('is nearest to today if no selected date is available and today is disabled', async () => {
+          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
+
+          const calWithMin = await fixture(
+            html`<lion-calendar .minDate=${new Date('2000/12/25')}></lion-calendar>`,
+          );
+          const calObjWithMin = new CalendarObject(calWithMin);
+          expect(calObjWithMin.centralDayObj?.monthday).to.equal(25);
+
+          const calWithMax = await fixture(
+            html`<lion-calendar .maxDate=${new Date('2000/12/05')}></lion-calendar>`,
+          );
+          const calObjWithMax = new CalendarObject(calWithMax);
+          expect(calObjWithMax.centralDayObj?.monthday).to.equal(5);
+
+          const calWithDisabled = await fixture(
+            html`<lion-calendar
+              .disableDates=${/** @param {Date} date */ date => date.getDate() === 15}
+            ></lion-calendar>`,
+          );
+          await calWithDisabled.updateComplete;
+
+          const calObjWithDisabled = new CalendarObject(calWithDisabled);
+          expect(calObjWithDisabled.centralDayObj?.monthday).to.equal(16);
+
+          clock.restore();
+        });
       });
 
       /**

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

@@ -102,23 +102,6 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     };
   }
 
-  _inputFormatter = new Intl.DateTimeFormat('en-US', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-  }).formatToParts;
-
-  /**
-   * @param {Date} date
-   */
-  // eslint-disable-next-line class-methods-use-this
-  _formatDate(date) {
-    const day = String(date.getDate()).padStart(2, '0');
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const year = String(date.getFullYear());
-    return `${day}/${month}/${year}`;
-  }
-
   get slots() {
     return {
       ...super.slots,
@@ -370,18 +353,15 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     if (this._syncOnUserSelect) {
       // Synchronize new selectedDate value to input
       this._isHandlingUserInput = true;
+      this._isHandlingCalendarUserInput = true;
 
       if (
         Array.isArray(this.__calendarDisableDates) &&
         this.__calendarDisableDates.includes(selectedDate)
       ) {
         // If the selected date is disabled, reset the values
-        this.value = '';
-        this.formattedValue = '';
         this.modelValue = undefined;
       } else {
-        this.formattedValue = this._formatDate(selectedDate);
-        this.value = this.formattedValue;
         this.modelValue = selectedDate;
       }
 

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

@@ -263,6 +263,33 @@ describe('<lion-input-datepicker>', () => {
       expect(el.value).to.equal('18/12/2019');
     });
 
+    describe('localization', () => {
+      /** @type {import('@lion/ui/localize.js').LocalizeManager} */ let localizeManager;
+
+      before(async () => {
+        const { getLocalizeManager } = await import('@lion/ui/localize-no-side-effects.js');
+        localizeManager = getLocalizeManager();
+      });
+
+      it('should update formatted value and value in accordance of localization upon model value update', async () => {
+        localizeManager.locale = 'nl-NL';
+
+        const el = await fixture(html`
+          <lion-input-datepicker .modelValue="${new Date('2022/12/30')}"></lion-input-datepicker>
+        `);
+
+        await el.updateComplete;
+
+        expect(el.formattedValue).to.equal('30-12-2022');
+        expect(el.value).to.equal('30-12-2022');
+      });
+
+      after(() => {
+        // @ts-ignore - using protected method to undo setting explict locale
+        localizeManager.locale = localizeManager._fallbackLocale;
+      });
+    });
+
     describe('Validators', () => {
       /**
        * Validators are the Application Developer facing API in <lion-input-datepicker>:

package/custom-elements.json

@@ -73100,24 +73100,6 @@
               },
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "_inputFormatter",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "_formatDate",
-              "parameters": [
-                {
-                  "name": "date",
-                  "type": {
-                    "text": "Date"
-                  }
-                }
-              ],
-              "privacy": "protected"
-            },
             {
               "kind": "field",
               "name": "slots",

package/dist-types/components/calendar/src/LionCalendar.d.ts

@@ -123,6 +123,7 @@ export class LionCalendar extends LionCalendar_base {
     focusSelectedDate(): Promise<void>;
     connectedCallback(): Promise<void>;
     __contentWrapperElement: HTMLButtonElement | undefined;
+    firstUpdated(): void;
     disconnectedCallback(): void;
     /**
      * @param {string} [name]

package/dist-types/components/calendar/src/LionCalendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LionCalendar.d.ts","sourceRoot":"","sources":["../../../../components/calendar/src/LionCalendar.js"],"names":[],"mappings":";AAoCA;;GAEG;AACH;IAkEE;QAEI;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;;WAGG;;;;QAGH;;;;WAIG;;;;QAGH;;;;WAIG;;;;QAGH;;;;;;WAMG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;MAGN;IA4CD,+CAEC;IA1CC;;OAEG;IACH,eAA4B;IAC5B,cAA0B;IAE1B,cAAyC;IACzC,uBAAuB;IACvB,uBADY,GAAG,mCACkB;IAEjC,wBAAwB;IAExB,oBAFY,IAAI,aAEgB;IAEhC,uBAAuB;IACvB,8BAAoC;IACpC,eAAe;IACf,gBAA4C;IAC5C,mBAAmB;IACnB,aADW,IAAI,CACgB;IAC/B;;;OAGG;IACH,sBAAyB;IACzB,eAAe;IACf,gCAAoC;IACpC,eAAe;IACf,sBAA0B;IAC1B,eAAgB;IAChB,eAAe;IACf,uCAA+E;IAC/E,eAAe;IACf,mCAAuE;IACvE,eAAe;IACf,mCAAuE;IACvE,eAAe;IACf,kCAAsE;IAOxE,+CAMC;IAED,+BAEC;IAED,sBAEC;IAED,0BAEC;IAED,qBAEC;IAED,yBAEC;IAED;;OAEG;IACH,gBAFW,IAAI,iBAMd;IAED,yBAOC;IAED,mCAIC;IAED,mCAuCC;IATG,uDAEC;IASL,6BAaC;IAUD;;;;;OAKG;IACH,oDAJW,OAAO,sEAEL,IAAI,CAkBhB;IAED;;;OAGG;IACH,wBAOC;IAED;;OAEG;IACH,sCAOC;IAFC,mBAAmB;IACnB,uCAA4C;IAG9C;;;;OAIG;IACH,gCAkBC;IAED;;;;OAIG;IACH,+BAWC;IAED;;OAEG;IACH,2BAQC;IAED;;OAEG;IACH,qBAeC;IAED;;;;;OAKG;IACH,8BAiBC;IAED;;;;;OAKG;IACH,0BAiBC;IAED;;;;;OAKG;IAEH,uCANW,MAAM,iBACN,MAAM,gBACN,MAAM,wCA0BhB;IAGD,8DAEC;IAED;;;;;OAKG;IAEH,mCANW,MAAM,aACN,MAAM,YACN,MAAM,wCA0BhB;IAGD,0DAEC;IAED;;;;;;;OAOG;IACH,6BAEC;IAED;;;OAGG;IACH,iCAuBC;IAED;;;;;OAKG;IACH,8BA0CC;IAED;;;OAGG;IACH,qBAkBC;IAED;;;OAGG;IACH,6BAUC;IATC,+BAAgC;IAWlC;;OAEG;IACH,6BAIC;IAED;;;OAGG;IACH,mDAGC;IAED;;;OAGG;IACH,uDAGC;IAED;;;OAGG;IACH,sDAGC;IAED;;;OAGG;IACH,wBAGC;IAED;;;;;OAKG;IACH,iCAmCC;IAED;;;OAGG;IACH,8BAKC;IAED;;OAEG;IACH,8BASC;IAED;;OAEG;IACH,6BASC;IAED;;;OAGG;IACH,6BAIC;IAED;;;OAGG;IACH,kCAsDC;IAED;;;;;;;OAOG;IACH,qBAeC;IAED;;OAEG;IACH,oBAEC;CACF;kBAp5BY,OAAO,iBAAiB,EAAE,GAAG;mBAC7B,OAAO,iBAAiB,EAAE,IAAI;oBAC9B,OAAO,iBAAiB,EAAE,KAAK"}
+{"version":3,"file":"LionCalendar.d.ts","sourceRoot":"","sources":["../../../../components/calendar/src/LionCalendar.js"],"names":[],"mappings":";AAoCA;;GAEG;AACH;IAkEE;QAEI;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;;WAGG;;;;QAGH;;;;WAIG;;;;QAGH;;;;WAIG;;;;QAGH;;;;;;WAMG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;MAGN;IA4CD,+CAEC;IA1CC;;OAEG;IACH,eAA4B;IAC5B,cAA0B;IAE1B,cAAyC;IACzC,uBAAuB;IACvB,uBADY,GAAG,mCACkB;IAEjC,wBAAwB;IAExB,oBAFY,IAAI,aAEgB;IAEhC,uBAAuB;IACvB,8BAAoC;IACpC,eAAe;IACf,gBAA4C;IAC5C,mBAAmB;IACnB,aADW,IAAI,CACgB;IAC/B;;;OAGG;IACH,sBAAyB;IACzB,eAAe;IACf,gCAAoC;IACpC,eAAe;IACf,sBAA0B;IAC1B,eAAgB;IAChB,eAAe;IACf,uCAA+E;IAC/E,eAAe;IACf,mCAAuE;IACvE,eAAe;IACf,mCAAuE;IACvE,eAAe;IACf,kCAAsE;IAOxE,+CAMC;IAED,+BAEC;IAED,sBAEC;IAED,0BAEC;IAED,qBAEC;IAED,yBAEC;IAED;;OAEG;IACH,gBAFW,IAAI,iBAMd;IAED,yBAOC;IAED,mCAIC;IAED,mCAkCC;IATG,uDAEC;IASL,qBAKC;IAED,6BAaC;IAUD;;;;;OAKG;IACH,oDAJW,OAAO,sEAEL,IAAI,CAkBhB;IAED;;;OAGG;IACH,wBAOC;IAED;;OAEG;IACH,sCASC;IAFC,mBAAmB;IACnB,uCAA4C;IAG9C;;;;OAIG;IACH,gCAkBC;IAED;;;;OAIG;IACH,+BAWC;IAED;;OAEG;IACH,2BAQC;IAED;;OAEG;IACH,qBAeC;IAED;;;;;OAKG;IACH,8BAiBC;IAED;;;;;OAKG;IACH,0BAiBC;IAED;;;;;OAKG;IAEH,uCANW,MAAM,iBACN,MAAM,gBACN,MAAM,wCA0BhB;IAGD,8DAEC;IAED;;;;;OAKG;IAEH,mCANW,MAAM,aACN,MAAM,YACN,MAAM,wCA0BhB;IAGD,0DAEC;IAED;;;;;;;OAOG;IACH,6BAEC;IAED;;;OAGG;IACH,iCAuBC;IAED;;;;;OAKG;IACH,8BA0CC;IAED;;;OAGG;IACH,qBAkBC;IAED;;;OAGG;IACH,6BAUC;IATC,+BAAgC;IAWlC;;OAEG;IACH,6BAIC;IAED;;;OAGG;IACH,mDAGC;IAED;;;OAGG;IACH,uDAGC;IAED;;;OAGG;IACH,sDAGC;IAED;;;OAGG;IACH,wBAGC;IAED;;;;;OAKG;IACH,iCAmCC;IAED;;;OAGG;IACH,8BAKC;IAED;;OAEG;IACH,8BASC;IAED;;OAEG;IACH,6BASC;IAED;;;OAGG;IACH,6BAIC;IAED;;;OAGG;IACH,kCAsDC;IAED;;;;;;;OAOG;IACH,qBAeC;IAED;;OAEG;IACH,oBAEC;CACF;kBAx5BY,OAAO,iBAAiB,EAAE,GAAG;mBAC7B,OAAO,iBAAiB,EAAE,IAAI;oBAC9B,OAAO,iBAAiB,EAAE,KAAK"}

package/dist-types/components/input-datepicker/src/LionInputDatepicker.d.ts

@@ -20,11 +20,6 @@ export class LionInputDatepicker extends LionInputDatepicker_base {
      * @returns {Date | undefined} a 'guarded' modelValue
      */
     static __getSyncDownValue(modelValue: unknown): Date | undefined;
-    _inputFormatter: (date?: number | Date | undefined) => Intl.DateTimeFormatPart[];
-    /**
-     * @param {Date} date
-     */
-    _formatDate(date: Date): string;
     /**
      * @protected
      */

package/dist-types/components/input-datepicker/src/LionInputDatepicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LionInputDatepicker.d.ts","sourceRoot":"","sources":["../../../../components/input-datepicker/src/LionInputDatepicker.js"],"names":[],"mappings":";AAiBA;;;GAGG;AAEH;;GAEG;AACH;IAGE;;MAKC;IAED,wFAgCC;IAED,kBAAkB;IAClB,6BAgCC;IA0SD;;;;;OAKG;IACH,gDAFa,IAAI,GAAG,SAAS,CAM5B;IAlTD,iFAIiB;IAEjB;;OAEG;IAEH,kBAHW,IAAI,UAQd;IAaD;;OAEG;IACH,0CAEC;IAED;;;OAGG;IACH,4CAIC;IAIC,eAAe;IACf,oBAAuC;IACvC,iBAAiB;IACjB,uCAAoC;IAGpC,iBAAiB;IACjB,mDAA2C;IAC3C,iBAAiB;IACjB,qCAA6B;IAC7B,iBAAiB;IACjB,qCAA6B;IAC7B,iBAAiB;IACjB,gDAAyC;IAkL3C,uCAOC;IAYD;;;OAGG;IACH,6DAFW;QAAE,MAAM,EAAE;YAAE,YAAY,EAAE,IAAI,CAAA;SAAE,CAAA;KAAC,QA2B3C;IA5MD,eAAe;IACf,gCAKC;IAgBG,qBAAyD;IAI7D;;;;;OAKG;IACH,mEASC;IAED,8DAoBC;IAED,+CAOC;IAED;;;OAGG;IAEH,0DAeC;IAED;;;OAGG;IAEH,yDAYC;IAED;;OAEG;IAEH,6DAEC;IAKC,iDAEC;IAIH;;;;OAIG;IAEH,iCAHa,MAAM,CAmBlB;IAWD;;;OAGG;IACH,iCAIC;IAqDD;;;;OAIG;IACH,gCAFW,SAAS,EAAE,QAkBrB;IAVK,uBAAgC;IAEhC,uBAAgC;IAKhC,4BAAqC;IAK3C;;;;;;OAMG;IAEH,iCALW,KAAK,GAAC,WAAW,YACjB;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,QAUhC;IAgBC,mDAEC;CAIJ;wBArcY,OAAO,2CAA2C,EAAE,SAAS;4BAC7D,OAAO,KAAK,EAAE,aAAa"}
+{"version":3,"file":"LionInputDatepicker.d.ts","sourceRoot":"","sources":["../../../../components/input-datepicker/src/LionInputDatepicker.js"],"names":[],"mappings":";AAiBA;;;GAGG;AAEH;;GAEG;AACH;IAGE;;MAKC;IAED,wFAgCC;IAED,kBAAkB;IAClB,6BAgCC;IAsRD;;;;;OAKG;IACH,gDAFa,IAAI,GAAG,SAAS,CAM5B;IAnRD;;OAEG;IACH,0CAEC;IAED;;;OAGG;IACH,4CAIC;IAIC,eAAe;IACf,oBAAuC;IACvC,iBAAiB;IACjB,uCAAoC;IAGpC,iBAAiB;IACjB,mDAA2C;IAC3C,iBAAiB;IACjB,qCAA6B;IAC7B,iBAAiB;IACjB,qCAA6B;IAC7B,iBAAiB;IACjB,gDAAyC;IAkL3C,uCAOC;IAYD;;;OAGG;IACH,6DAFW;QAAE,MAAM,EAAE;YAAE,YAAY,EAAE,IAAI,CAAA;SAAE,CAAA;KAAC,QAwB3C;IAzMD,eAAe;IACf,gCAKC;IAgBG,qBAAyD;IAI7D;;;;;OAKG;IACH,mEASC;IAED,8DAoBC;IAED,+CAOC;IAED;;;OAGG;IAEH,0DAeC;IAED;;;OAGG;IAEH,yDAYC;IAED;;OAEG;IAEH,6DAEC;IAKC,iDAEC;IAIH;;;;OAIG;IAEH,iCAHa,MAAM,CAmBlB;IAWD;;;OAGG;IACH,iCAIC;IAkDD;;;;OAIG;IACH,gCAFW,SAAS,EAAE,QAkBrB;IAVK,uBAAgC;IAEhC,uBAAgC;IAKhC,4BAAqC;IAK3C;;;;;;OAMG;IAEH,iCALW,KAAK,GAAC,WAAW,YACjB;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,QAUhC;IAgBC,mDAEC;CAIJ;wBAjbY,OAAO,2CAA2C,EAAE,SAAS;4BAC7D,OAAO,KAAK,EAAE,aAAa"}