feat: first impl

sbb-design-systems · Nov 27, 2023 · dbb06d1 · dbb06d1
1 parent 35928e3
commit dbb06d1
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 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
@@ -72,15 +72,15 @@ 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,
       this._dateAdapter,
       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
@@ -72,15 +72,15 @@ 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,
       this._dateAdapter,
       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
@@ -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<Date>) => {
             const newDate = new Date(d.detail);
             this._calendarElement.selectedDate = newDate;
-            this._datePickerElement.setValueAsDate(newDate);
+            this._datePickerElement.valueAsDate = newDate;
           }}
         ></sbb-calendar>
       </sbb-tooltip>

diff --git 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
@@ -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
@@ -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
@@ -201,25 +201,25 @@ 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());
   });
 
   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
@@ -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;
     }