feat(input-datepicker):sync the caledar dates when the validator params change

Co-authored-by: Thijs Louisse<Thijs.Louisse@ing.com>

.changeset/tame-moles-exist.md

@@ -0,0 +1,5 @@
+---
+'@lion/input-datepicker': minor
+---
+
+Added a fix by overriding the \_\_onValidatorUpdated() to sync the calendar dates when the validator params got changed

packages/form-core/test-suites/ValidateMixin.suite.js

@@ -192,6 +192,37 @@ export function runValidateMixinSuite(customConfig) {
         expect(validateSpy.callCount).to.equal(1);
       });
 
+      it('calls "_onValidatorUpdated" when Validator instanced updated', async () => {
+        const validator = new MinLength(3);
+        const el = /** @type {ValidateElement} */ (
+          await fixture(html`
+          <${tag}
+            .validators=${[validator]}
+            .modelValue=${'myValue'}
+          >${lightDom}</${tag}>
+        `)
+        );
+
+        // @ts-ignore
+        const spy = sinon.spy(el, '_onValidatorUpdated');
+
+        // on param-changed
+        validator.param = 4;
+        expect(spy.callCount).to.equal(1);
+        const [eventArg1, metaArg1] = spy.args[0];
+        expect(eventArg1).to.be.instanceOf(Event);
+        expect(eventArg1.type).to.equal('param-changed');
+        expect(metaArg1).to.eql({ validator });
+
+        // on config-changed
+        validator.config = {};
+        expect(spy.callCount).to.equal(2);
+        const [eventArg2, metaArg2] = spy.args[1];
+        expect(eventArg2).to.be.instanceOf(Event);
+        expect(eventArg2.type).to.equal('config-changed');
+        expect(metaArg2).to.eql({ validator });
+      });
+
       it('clears current results when ".modelValue" changes', async () => {
         const el = /** @type {ValidateElement} */ (
           await fixture(html`

packages/input-datepicker/src/LionInputDatepicker.js

@@ -11,6 +11,7 @@ import {
 import { LionCalendarOverlayFrame } from './LionCalendarOverlayFrame.js';
 
 /**
+ * @typedef {import('@lion/form-core').Validator} Validator
  * @typedef {import('@lion/core').RenderOptions} RenderOptions
  */
 
@@ -425,6 +426,22 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     });
   }
 
+  /**
+   * Responsible for listening param change event and
+   * sync the calendar dates with the updated validator params
+   * @param {Event|CustomEvent} e
+   * @param {{validator: Validator}} metaData
+   * @protected
+   */
+  // @ts-ignore Binding element 'any' implicitly has an 'any' type.
+  _onValidatorUpdated(e, metaData) {
+    // @ts-ignore
+    super._onValidatorUpdated(e, metaData);
+    if (e.type === 'param-changed') {
+      this.__syncDisabledDates([metaData.validator]);
+    }
+  }
+
   /**
    * @override Configures OverlayMixin
    */

packages/input-datepicker/test/lion-input-datepicker.test.js

@@ -328,6 +328,43 @@ describe('<lion-input-datepicker>', () => {
         expect(elObj.calendarEl.maxDate).to.equal(myMaxDate);
       });
 
+      it('should sync MinDate validator param with Calendar MinDate', async () => {
+        const myMinDateValidator = new MinDate(new Date('2020/02/02'));
+        const el = await fixture(html`
+          <lion-input-datepicker .validators="${[myMinDateValidator]}"> </lion-input-datepicker>
+        `);
+        myMinDateValidator.param = new Date('2020/01/01');
+
+        expect(el.__calendarMinDate.toString()).to.equal(new Date('2020/01/01').toString());
+      });
+
+      it('should sync MaxDate validator param with Calendar MaxDate', async () => {
+        const myMaxDateValidator = new MaxDate(new Date('2020/02/02'));
+        const el = await fixture(html`
+          <lion-input-datepicker .validators="${[myMaxDateValidator]}"> </lion-input-datepicker>
+        `);
+        myMaxDateValidator.param = new Date('2020/03/03');
+
+        expect(el.__calendarMaxDate.toString()).to.equal(new Date('2020/03/03').toString());
+      });
+
+      it('should sync MinMaxDate validator param with Calendar Min And Max Date', async () => {
+        const myMinDate = new Date('2019/06/15');
+        const myMaxDate = new Date('2030/06/15');
+        const myMinMaxDateValidator = new MinMaxDate({ min: myMinDate, max: myMaxDate });
+        const el = await fixture(html`
+          <lion-input-datepicker .validators=${[myMinMaxDateValidator]}> </lion-input-datepicker>
+        `);
+
+        myMinMaxDateValidator.param = {
+          min: new Date('2019/05/15'),
+          max: new Date('2019/07/15'),
+        };
+
+        expect(el.__calendarMinDate.toString()).to.equal(new Date('2019/05/15').toString());
+        expect(el.__calendarMaxDate.toString()).to.equal(new Date('2019/07/15').toString());
+      });
+
       /**
        * Not in scope:
        * - min/max attr (like platform has): could be added in future if observers needed