diff --git a/.changeset/tame-moles-exist.md b/.changeset/tame-moles-exist.md new file mode 100644 index 000000000..dba874621 --- /dev/null +++ b/.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 diff --git a/packages/form-core/test-suites/ValidateMixin.suite.js b/packages/form-core/test-suites/ValidateMixin.suite.js index 9312a348a..c92744f4d 100644 --- a/packages/form-core/test-suites/ValidateMixin.suite.js +++ b/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} + `) + ); + + // @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` diff --git a/packages/input-datepicker/src/LionInputDatepicker.js b/packages/input-datepicker/src/LionInputDatepicker.js index c1065cfbe..f92dd1f73 100644 --- a/packages/input-datepicker/src/LionInputDatepicker.js +++ b/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 */ diff --git a/packages/input-datepicker/test/lion-input-datepicker.test.js b/packages/input-datepicker/test/lion-input-datepicker.test.js index e04e60b5c..241c7bf6c 100644 --- a/packages/input-datepicker/test/lion-input-datepicker.test.js +++ b/packages/input-datepicker/test/lion-input-datepicker.test.js @@ -328,6 +328,43 @@ describe('', () => { 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` + + `); + 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` + + `); + 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` + + `); + + 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