From dbb06d13a30f7138b8bfdee756ad9661a3e96a14 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Mon, 27 Nov 2023 14:11:11 +0100 Subject: [PATCH] feat: first impl --- .../datepicker-next-day.ts | 8 +++---- .../datepicker-previous-day.ts | 8 +++---- .../datepicker-toggle/datepicker-toggle.ts | 8 +++---- .../datepicker/datepicker/datepicker.ts | 9 ++++---- .../datepicker/datepicker/readme.md | 22 +++++++------------ src/components/time-input/readme.md | 14 ++++-------- src/components/time-input/time-input.e2e.ts | 14 ++++++------ src/components/time-input/time-input.ts | 8 ++----- 8 files changed, 37 insertions(+), 54 deletions(-) diff --git a/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts b/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts index 828887fc055..14390aee834 100644 --- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts +++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts @@ -72,7 +72,7 @@ export class SbbDatepickerNextDay extends LitElement { if (!this._datePickerElement || isValidAttribute(this, 'data-disabled')) { return; } - const startingDate: Date = this._datePickerElement.getValueAsDate() ?? this._now(); + const startingDate: Date = this._datePickerElement.valueAsDate ?? this._now(); const date: Date = findNextAvailableDate( startingDate, this._datePickerElement.dateFilter, @@ -80,7 +80,7 @@ export class SbbDatepickerNextDay extends LitElement { this._max, ); if (this._dateAdapter.compareDate(date, startingDate) !== 0) { - this._datePickerElement.setValueAsDate(date); + this._datePickerElement.valueAsDate = date; } } @@ -173,7 +173,7 @@ export class SbbDatepickerNextDay extends LitElement { } private _setDisabledState(datepicker: SbbDatepicker): void { - const pickerValueAsDate: Date = datepicker?.getValueAsDate(); + const pickerValueAsDate: Date = datepicker?.valueAsDate; if (!pickerValueAsDate) { this._disabled = true; @@ -207,7 +207,7 @@ export class SbbDatepickerNextDay extends LitElement { } private _setAriaLabel(): void { - const currentDate = this._datePickerElement.getValueAsDate(); + const currentDate = this._datePickerElement.valueAsDate; if (!currentDate || !this._dateAdapter.isValid(currentDate)) { this.setAttribute('aria-label', i18nNextDay[this._currentLanguage]); diff --git a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts index 95c8994ed80..f45f1e595af 100644 --- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts +++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts @@ -72,7 +72,7 @@ export class SbbDatepickerPreviousDay extends LitElement { if (!this._datePickerElement || isValidAttribute(this, 'data-disabled')) { return; } - const startingDate: Date = this._datePickerElement.getValueAsDate() ?? this._now(); + const startingDate: Date = this._datePickerElement.valueAsDate ?? this._now(); const date: Date = findPreviousAvailableDate( startingDate, this._datePickerElement.dateFilter, @@ -80,7 +80,7 @@ export class SbbDatepickerPreviousDay extends LitElement { this._min, ); if (this._dateAdapter.compareDate(date, startingDate) !== 0) { - this._datePickerElement.setValueAsDate(date); + this._datePickerElement.valueAsDate = date; } } @@ -173,7 +173,7 @@ export class SbbDatepickerPreviousDay extends LitElement { } private _setDisabledState(datepicker: SbbDatepicker): void { - const pickerValueAsDate: Date = datepicker?.getValueAsDate(); + const pickerValueAsDate: Date = datepicker?.valueAsDate; if (!pickerValueAsDate) { this._disabled = true; @@ -207,7 +207,7 @@ export class SbbDatepickerPreviousDay extends LitElement { } private _setAriaLabel(): void { - const currentDate = this._datePickerElement.getValueAsDate(); + const currentDate = this._datePickerElement.valueAsDate; if (!currentDate || !this._dateAdapter.isValid(currentDate)) { this.setAttribute('aria-label', i18nPreviousDay[this._currentLanguage]); diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts index 01d53c39456..11949949136 100644 --- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts +++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts @@ -148,7 +148,7 @@ export class SbbDatepickerToggle extends LitElement { private _datePickerChanged(event: Event): void { this._datePickerElement = event.target as SbbDatepicker; - this._calendarElement.selectedDate = this._datePickerElement.getValueAsDate(); + this._calendarElement.selectedDate = this._datePickerElement.valueAsDate; } private _assignCalendar(calendar: SbbCalendar): void { @@ -158,12 +158,12 @@ export class SbbDatepickerToggle extends LitElement { this._calendarElement = calendar; if ( !this._datePickerElement || - !this._datePickerElement.getValueAsDate || + !this._datePickerElement.valueAsDate || !this._calendarElement?.resetPosition ) { return; } - this._calendarElement.selectedDate = this._datePickerElement.getValueAsDate(); + this._calendarElement.selectedDate = this._datePickerElement.valueAsDate; this._configureCalendar(this._calendarElement, this._datePickerElement); this._calendarElement.resetPosition(); } @@ -221,7 +221,7 @@ export class SbbDatepickerToggle extends LitElement { @dateSelected=${(d: CustomEvent) => { const newDate = new Date(d.detail); this._calendarElement.selectedDate = newDate; - this._datePickerElement.setValueAsDate(newDate); + this._datePickerElement.valueAsDate = newDate; }} > diff --git a/src/components/datepicker/datepicker/datepicker.ts b/src/components/datepicker/datepicker/datepicker.ts index 48e73f45baa..570b07f2055 100644 --- a/src/components/datepicker/datepicker/datepicker.ts +++ b/src/components/datepicker/datepicker/datepicker.ts @@ -241,7 +241,7 @@ export class SbbDatepicker extends LitElement { return this._inputElementState; } - private set _inputElement(value) { + private set _inputElement(value: HTMLInputElement) { const oldValue = this._inputElementState; this._inputElementState = value; this._registerInputElement(this._inputElementState, oldValue); @@ -298,12 +298,12 @@ export class SbbDatepicker extends LitElement { } /** Gets the input value with the correct date format. */ - public getValueAsDate(): Date { + public get valueAsDate(): Date | undefined { return this._parse(this._inputElement?.value); } /** Set the input value to the correctly formatted value. */ - public setValueAsDate(date: SbbDateLike): void { + public set valueAsDate(date: SbbDateLike) { const parsedDate = date instanceof Date ? date : new Date(date); this._formatAndUpdateValue(this._inputElement.value, parsedDate); /* Emit blur event when value is changed programmatically to notify @@ -339,8 +339,7 @@ export class SbbDatepicker extends LitElement { this._currentLanguage = l; if (this._inputElement) { this._inputElement.placeholder = i18nDatePickerPlaceholder[this._currentLanguage]; - const valueAsDate = this.getValueAsDate(); - this._inputElement.value = this._format(valueAsDate); + this._inputElement.value = this._format(this.valueAsDate); } }), ); diff --git a/src/components/datepicker/datepicker/readme.md b/src/components/datepicker/datepicker/readme.md index e2f7f4afe3e..0756174e474 100644 --- a/src/components/datepicker/datepicker/readme.md +++ b/src/components/datepicker/datepicker/readme.md @@ -104,20 +104,14 @@ This is helpful if you need a specific state of the component. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------ | ------------- | ------- | --------------------------------------------------- | ------- | ----------------------------------------------------------------- | -| `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed. | -| `dateFilter` | `date-filter` | public | `(date: Date \| null) => boolean` | | A function used to filter out dates. | -| `dateParser` | `date-parser` | public | `(value: string) => Date \| undefined \| undefined` | | A function used to parse string value into dates. | -| `format` | `format` | public | `(date: Date) => string \| undefined` | | A function used to format dates into the preferred string format. | -| `input` | `input` | public | `string \| HTMLElement \| undefined` | | Reference of the native input connected to the datepicker. | - -## Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ---------------- | ------- | ----------------------------------------------------- | ------------------- | ------ | -------------- | -| `getValueAsDate` | public | Gets the input value with the correct date format. | | `Date` | | -| `setValueAsDate` | public | Set the input value to the correctly formatted value. | `date: SbbDateLike` | `void` | | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------- | --------------- | ------- | --------------------------------------------------- | ------- | ----------------------------------------------------------------- | +| `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed. | +| `dateFilter` | `date-filter` | public | `(date: Date \| null) => boolean` | | A function used to filter out dates. | +| `dateParser` | `date-parser` | public | `(value: string) => Date \| undefined \| undefined` | | A function used to parse string value into dates. | +| `format` | `format` | public | `(date: Date) => string \| undefined` | | A function used to format dates into the preferred string format. | +| `input` | `input` | public | `string \| HTMLElement \| undefined` | | Reference of the native input connected to the datepicker. | +| `valueAsDate` | `value-as-date` | public | `Date \| undefined` | | Set the input value to the correctly formatted value. | ## Events diff --git a/src/components/time-input/readme.md b/src/components/time-input/readme.md index bce0671a17e..62bf43b23cd 100644 --- a/src/components/time-input/readme.md +++ b/src/components/time-input/readme.md @@ -59,16 +59,10 @@ Whenever the validation state changes (e.g., a valid value becomes invalid or vi ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------- | --------- | ------- | ----------------------- | ------- | ---------------------------------------------------------- | -| `input` | `input` | public | `string \| HTMLElement` | | Reference of the native input connected to the datepicker. | - -## Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ---------------- | ------- | ----------------------------------------------------- | ------------------- | -------------- | -------------- | -| `getValueAsDate` | public | Gets the input value with the correct date format. | | `Date \| null` | | -| `setValueAsDate` | public | Set the input value to the correctly formatted value. | `date: SbbDateLike` | `void` | | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------- | --------------- | ------- | ----------------------- | ------- | ---------------------------------------------------------- | +| `input` | `input` | public | `string \| HTMLElement` | | Reference of the native input connected to the datepicker. | +| `valueAsDate` | `value-as-date` | public | `Date \| null` | | | ## Events diff --git a/src/components/time-input/time-input.e2e.ts b/src/components/time-input/time-input.e2e.ts index 58912ac5e5d..039c67bac9d 100644 --- a/src/components/time-input/time-input.e2e.ts +++ b/src/components/time-input/time-input.e2e.ts @@ -201,13 +201,13 @@ describe('sbb-time-input', () => { const blurSpy = new EventSpy('blur', input); const date = new Date('2023-01-01T15:00:00'); - element.setValueAsDate(date); + element.valueAsDate = date; await waitForLitRender(element); expect(input.value).to.be.equal('15:00'); expect(blurSpy.count).to.be.equal(1); - const dateCalculated = element.getValueAsDate().getTime(); + const dateCalculated = element.valueAsDate.getTime(); expect(new Date(dateCalculated).getHours()).to.be.equal(date.getHours()); expect(new Date(dateCalculated).getMinutes()).to.be.equal(date.getMinutes()); }); @@ -215,11 +215,11 @@ describe('sbb-time-input', () => { it('should set and get value as a date (string)', async () => { const date = new Date('2023-01-01T15:00:00'); - element.setValueAsDate(date.toISOString()); + element.valueAsDate = date.toISOString(); await waitForLitRender(element); expect(input.value).to.be.equal('15:00'); - const dateCalculated = element.getValueAsDate().getTime(); + const dateCalculated = element.valueAsDate.getTime(); expect(new Date(dateCalculated).getHours()).to.be.equal(date.getHours()); expect(new Date(dateCalculated).getMinutes()).to.be.equal(date.getMinutes()); }); @@ -234,7 +234,7 @@ describe('sbb-time-input', () => { element = root.querySelector('sbb-time-input'); input = root.querySelector('input'); - element.setValueAsDate('2023-01-01T15:00:00'); + element.valueAsDate = '2023-01-01T15:00:00'; await waitForLitRender(element); expect(input.value).to.be.equal('15:00'); }); @@ -249,7 +249,7 @@ describe('sbb-time-input', () => { element = root.querySelector('sbb-time-input'); input = root.querySelector('input'); element.input = input; - element.setValueAsDate('2023-01-01T15:00:00'); + element.valueAsDate = '2023-01-01T15:00:00'; await waitForLitRender(element); expect(input.value).to.be.equal('15:00'); @@ -266,7 +266,7 @@ describe('sbb-time-input', () => { input = root.querySelector('input'); element.input = 'input-2'; - element.setValueAsDate('2023-01-01T15:00:00'); + element.valueAsDate = '2023-01-01T15:00:00'; await waitForLitRender(element); expect(input.value).to.be.equal('15:00'); diff --git a/src/components/time-input/time-input.ts b/src/components/time-input/time-input.ts index da750e99f97..43d3b88b1cc 100644 --- a/src/components/time-input/time-input.ts +++ b/src/components/time-input/time-input.ts @@ -92,15 +92,11 @@ export class SbbTimeInput extends LitElement { this._abortController?.abort(); this._handlerRepository.disconnect(); } - - /** Gets the input value with the correct date format. */ - // TODO: refactor this to be a get/set - public getValueAsDate(): Date | null { + public get valueAsDate(): Date | null { return this._formatValueAsDate(this._parseInput(this._inputElement?.value)); } - /** Set the input value to the correctly formatted value. */ - public setValueAsDate(date: SbbDateLike): void { + public set valueAsDate(date: SbbDateLike) { if (!date || !this._inputElement) { return; }