From 3145c79ee3281c034704e1c19a805d8507bb84ce Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Thu, 28 Mar 2024 17:46:17 +0100 Subject: [PATCH] feat: base element for datepicker buttons --- .../datepicker/common/datepicker-button.ts | 206 ++++++++++++++++++ src/components/datepicker/common/index.ts | 1 + .../datepicker-next-day.ts | 203 ++--------------- .../datepicker/datepicker-next-day/readme.md | 2 +- .../datepicker-previous-day.ts | 206 ++---------------- .../datepicker-previous-day/readme.md | 2 +- .../datepicker/datepicker/datepicker.ts | 8 +- src/components/datepicker/index.ts | 1 + 8 files changed, 242 insertions(+), 387 deletions(-) create mode 100644 src/components/datepicker/common/datepicker-button.ts create mode 100644 src/components/datepicker/common/index.ts diff --git a/src/components/datepicker/common/datepicker-button.ts b/src/components/datepicker/common/datepicker-button.ts new file mode 100644 index 00000000000..3b84cfabada --- /dev/null +++ b/src/components/datepicker/common/datepicker-button.ts @@ -0,0 +1,206 @@ +import { html, type PropertyValues, type TemplateResult } from 'lit'; +import { property, state } from 'lit/decorators.js'; + +import { + LanguageController, + SbbButtonBaseElement, + SbbNegativeMixin, +} from '../../core/common-behaviors'; +import { type DateAdapter, defaultDateAdapter } from '../../core/datetime'; +import { isValidAttribute } from '../../core/dom'; +import { ConnectedAbortController } from '../../core/eventing'; +import { i18nToday } from '../../core/i18n'; +import { + datepickerControlRegisteredEventFactory, + getDatePicker, + type InputUpdateEvent, + type SbbDatepickerElement, +} from '../datepicker'; +import '../../icon'; + +export abstract class SbbDatepickerButton extends SbbNegativeMixin(SbbButtonBaseElement) { + /** Datepicker reference. */ + @property({ attribute: 'date-picker' }) public datePicker?: string | SbbDatepickerElement; + + /** Whether the component is disabled due date equals to boundary date. */ + @state() private _disabled = false; + + /** Whether the component is disabled due date-picker's input disabled. */ + @state() private _inputDisabled = false; + + /** The boundary date (min/max) as set in the date-picker's input. */ + @state() protected boundary: string | number | null = null; + + protected datePickerElement?: SbbDatepickerElement | null = null; + private _dateAdapter: DateAdapter = defaultDateAdapter; + private _datePickerController!: AbortController; + private _abort = new ConnectedAbortController(this); + private _language = new LanguageController(this).withHandler(() => this._setAriaLabel()); + + protected abstract iconName: string; + protected abstract ariaLabelTranslationOffBoundaryDay: Record; + protected abstract ariaLabelTranslationSelectOffBoundaryDay: ( + _currentDate: string, + ) => Record; + protected abstract findAvailableDate: ( + _date: Date, + _dateFilter: ((date: Date) => boolean) | null, + _dateAdapter: DateAdapter, + _boundary: string | number | null, + ) => Date; + protected abstract onInputUpdated(event: CustomEvent): void; + + public override connectedCallback(): void { + super.connectedCallback(); + this.addEventListener('click', () => this._handleClick(), { signal: this._abort.signal }); + this._syncUpstreamProperties(); + if (!this.datePicker) { + this._init(); + } + } + + public override willUpdate(changedProperties: PropertyValues): void { + if (changedProperties.has('datePicker')) { + this._init(this.datePicker); + } + } + + public override disconnectedCallback(): void { + super.disconnectedCallback(); + this._datePickerController?.abort(); + } + + protected setDisabledState(datepicker: SbbDatepickerElement | null | undefined): void { + const pickerValueAsDate = datepicker?.getValueAsDate?.(); + + if (!pickerValueAsDate) { + this._disabled = true; + return; + } + + const availableDate: Date = this.findAvailableDate( + pickerValueAsDate, + datepicker?.dateFilter || null, + this._dateAdapter, + this.boundary, + ); + this._disabled = this._dateAdapter.compareDate(availableDate, pickerValueAsDate) === 0; + } + + private _handleClick(): void { + if (!this.datePickerElement || isValidAttribute(this, 'data-disabled')) { + return; + } + const startingDate: Date = + this.datePickerElement.getValueAsDate() ?? this.datePickerElement.now(); + const date: Date = this.findAvailableDate( + startingDate, + this.datePickerElement.dateFilter, + this._dateAdapter, + this.boundary, + ); + if (this._dateAdapter.compareDate(date, startingDate) !== 0) { + this.datePickerElement.setValueAsDate(date); + } + } + + private _syncUpstreamProperties(): void { + const formField = this.closest?.('sbb-form-field') ?? this.closest?.('[data-form-field]'); + if (formField) { + this.negative = isValidAttribute(formField, 'negative'); + + // We can't use getInputElement of SbbFormFieldElement as async awaiting is not supported in connectedCallback. + // We here only have to look for input. + const inputElement = formField.querySelector('input'); + + if (inputElement) { + this._inputDisabled = + isValidAttribute(inputElement, 'disabled') || isValidAttribute(inputElement, 'readonly'); + } + } + } + + private _init(picker?: string | SbbDatepickerElement): void { + this._datePickerController?.abort(); + this._datePickerController = new AbortController(); + this.datePickerElement = getDatePicker(this, picker); + this.setDisabledState(this.datePickerElement); + if (!this.datePickerElement) { + // If the component is attached to the DOM before the datepicker, it has to listen for the datepicker init, + // assuming that the two components share the same parent element. + this.parentElement?.addEventListener( + 'inputUpdated', + (e: CustomEvent) => this._init(e.target as SbbDatepickerElement), + { once: true, signal: this._datePickerController.signal }, + ); + return; + } + this._setAriaLabel(); + + this.datePickerElement.addEventListener( + 'change', + (event: Event) => { + this.setDisabledState(event.target as SbbDatepickerElement); + this._setAriaLabel(); + }, + { signal: this._datePickerController.signal }, + ); + this.datePickerElement.addEventListener( + 'datePickerUpdated', + (event: Event) => { + this.setDisabledState(event.target as SbbDatepickerElement); + this._setAriaLabel(); + }, + { signal: this._datePickerController.signal }, + ); + this.datePickerElement.addEventListener( + 'inputUpdated', + (event: CustomEvent) => { + this._inputDisabled = !!(event.detail.disabled || event.detail.readonly); + this._setAriaLabel(); + this.onInputUpdated(event); + }, + { signal: this._datePickerController.signal }, + ); + + this.datePickerElement.dispatchEvent(datepickerControlRegisteredEventFactory()); + } + + private _setAriaLabel(): void { + const currentDate = this.datePickerElement?.getValueAsDate?.(); + + if (!currentDate || !this._dateAdapter.isValid(currentDate)) { + this.setAttribute( + 'aria-label', + this.ariaLabelTranslationOffBoundaryDay[this._language.current], + ); + return; + } + + const currentDateString = + this.datePickerElement?.now().toDateString() === currentDate.toDateString() + ? i18nToday[this._language.current].toLowerCase() + : this._dateAdapter.getAccessibilityFormatDate(currentDate); + + this.setAttribute( + 'aria-label', + this.ariaLabelTranslationSelectOffBoundaryDay(currentDateString)[this._language.current], + ); + } + + private _setDisabledRenderAttributes(): void { + this.toggleAttribute('data-disabled', this._disabled || this._inputDisabled); + if (isValidAttribute(this, 'data-disabled')) { + this.setAttribute('aria-disabled', 'true'); + this.removeAttribute('tabindex'); + } else { + this.removeAttribute('aria-disabled'); + this.setAttribute('tabindex', '0'); + } + } + + protected override renderTemplate(): TemplateResult { + this._setDisabledRenderAttributes(); + return html` `; + } +} diff --git a/src/components/datepicker/common/index.ts b/src/components/datepicker/common/index.ts new file mode 100644 index 00000000000..24448ec88c7 --- /dev/null +++ b/src/components/datepicker/common/index.ts @@ -0,0 +1 @@ +export * from './datepicker-button'; 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 55d00500cf8..4c93aadb154 100644 --- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts +++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts @@ -1,23 +1,10 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit'; -import { html } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; +import type { CSSResultGroup } from 'lit'; +import { customElement } from 'lit/decorators.js'; -import { - hostAttributes, - LanguageController, - SbbNegativeMixin, - SbbButtonBaseElement, -} from '../../core/common-behaviors'; -import { defaultDateAdapter, type DateAdapter } from '../../core/datetime'; -import { isValidAttribute } from '../../core/dom'; -import { ConnectedAbortController } from '../../core/eventing'; -import { i18nNextDay, i18nSelectNextDay, i18nToday } from '../../core/i18n'; -import { - datepickerControlRegisteredEventFactory, - findNextAvailableDate, - getDatePicker, -} from '../datepicker'; -import type { SbbDatepickerElement, InputUpdateEvent } from '../datepicker'; +import { hostAttributes } from '../../core/common-behaviors'; +import { i18nNextDay, i18nSelectNextDay } from '../../core/i18n'; +import { SbbDatepickerButton } from '../common/datepicker-button'; +import { findNextAvailableDate, type InputUpdateEvent } from '../datepicker'; import '../../icon'; import style from './datepicker-next-day.scss?lit&inline'; @@ -29,179 +16,19 @@ import style from './datepicker-next-day.scss?lit&inline'; @hostAttributes({ slot: 'suffix', }) -export class SbbDatepickerNextDayElement extends SbbNegativeMixin(SbbButtonBaseElement) { +export class SbbDatepickerNextDayElement extends SbbDatepickerButton { public static override styles: CSSResultGroup = style; - /** Datepicker reference. */ - @property({ attribute: 'date-picker' }) public datePicker?: string | SbbDatepickerElement; + protected iconName: string = 'chevron-small-right-small'; + protected ariaLabelTranslationOffBoundaryDay: Record = i18nNextDay; + protected ariaLabelTranslationSelectOffBoundaryDay = i18nSelectNextDay; + protected findAvailableDate = findNextAvailableDate; - /** Whether the component is disabled due date equals to max date. */ - @state() private _disabled = false; - - /** Whether the component is disabled due date-picker's input disabled. */ - @state() private _inputDisabled = false; - - /** The maximum date as set in the date-picker's input. */ - @state() private _max: string | number | null = null; - - private _datePickerElement?: SbbDatepickerElement | null = null; - - private _dateAdapter: DateAdapter = defaultDateAdapter; - - private _datePickerController!: AbortController; - - private _abort = new ConnectedAbortController(this); - private _language = new LanguageController(this).withHandler(() => this._setAriaLabel()); - - private _handleClick(): void { - if (!this._datePickerElement || isValidAttribute(this, 'data-disabled')) { - return; - } - const startingDate: Date = - this._datePickerElement.getValueAsDate() ?? this._datePickerElement.now(); - const date: Date = findNextAvailableDate( - startingDate, - this._datePickerElement.dateFilter, - this._dateAdapter, - this._max, - ); - if (this._dateAdapter.compareDate(date, startingDate) !== 0) { - this._datePickerElement.setValueAsDate(date); - } - } - - public override connectedCallback(): void { - super.connectedCallback(); - this.addEventListener('click', () => this._handleClick(), { signal: this._abort.signal }); - this._syncUpstreamProperties(); - if (!this.datePicker) { - this._init(); - } - } - - public override willUpdate(changedProperties: PropertyValues): void { - if (changedProperties.has('datePicker')) { - this._init(this.datePicker); - } - } - - private _syncUpstreamProperties(): void { - const formField = this.closest?.('sbb-form-field') ?? this.closest?.('[data-form-field]'); - if (formField) { - this.negative = isValidAttribute(formField, 'negative'); - - // We can't use getInputElement of SbbFormFieldElement as async awaiting is not supported in connectedCallback. - // We here only have to look for input. - const inputElement = formField.querySelector('input'); - - if (inputElement) { - this._inputDisabled = - isValidAttribute(inputElement, 'disabled') || isValidAttribute(inputElement, 'readonly'); - } - } - } - - public override disconnectedCallback(): void { - super.disconnectedCallback(); - this._datePickerController?.abort(); - } - - private _init(picker?: string | SbbDatepickerElement): void { - this._datePickerController?.abort(); - this._datePickerController = new AbortController(); - this._datePickerElement = getDatePicker(this, picker); - this._setDisabledState(this._datePickerElement); - if (!this._datePickerElement) { - // If the component is attached to the DOM before the datepicker, it has to listen for the datepicker init, - // assuming that the two components share the same parent element. - this.parentElement?.addEventListener( - 'inputUpdated', - (e: CustomEvent) => this._init(e.target as SbbDatepickerElement), - { once: true, signal: this._datePickerController.signal }, - ); - return; + protected onInputUpdated(event: CustomEvent): void { + if (this.boundary !== event.detail.max) { + this.boundary = event.detail.max!; + this.setDisabledState(this.datePickerElement!); } - this._setAriaLabel(); - - this._datePickerElement.addEventListener( - 'change', - (event: Event) => { - this._setDisabledState(event.target as SbbDatepickerElement); - this._setAriaLabel(); - }, - { signal: this._datePickerController.signal }, - ); - this._datePickerElement.addEventListener( - 'datePickerUpdated', - (event: Event) => { - this._setDisabledState(event.target as SbbDatepickerElement); - this._setAriaLabel(); - }, - { signal: this._datePickerController.signal }, - ); - this._datePickerElement.addEventListener( - 'inputUpdated', - (event: CustomEvent) => { - this._inputDisabled = !!(event.detail.disabled || event.detail.readonly); - if (this._max !== event.detail.max) { - this._max = event.detail.max!; - this._setDisabledState(this._datePickerElement!); - } - this._setAriaLabel(); - }, - { signal: this._datePickerController.signal }, - ); - - this._datePickerElement.dispatchEvent(datepickerControlRegisteredEventFactory()); - } - - private _setDisabledState(datepicker: SbbDatepickerElement | null | undefined): void { - const pickerValueAsDate = datepicker?.getValueAsDate?.(); - - if (!pickerValueAsDate) { - this._disabled = true; - return; - } - - const nextDate: Date = findNextAvailableDate( - pickerValueAsDate, - datepicker?.dateFilter || null, - this._dateAdapter, - this._max, - ); - this._disabled = this._dateAdapter.compareDate(nextDate, pickerValueAsDate) === 0; - } - - private _setAriaLabel(): void { - const currentDate = this._datePickerElement?.getValueAsDate?.(); - - if (!currentDate || !this._dateAdapter.isValid(currentDate)) { - this.setAttribute('aria-label', i18nNextDay[this._language.current]); - return; - } - - const currentDateString = - this._datePickerElement?.now().toDateString() === currentDate.toDateString() - ? i18nToday[this._language.current].toLowerCase() - : this._dateAdapter.getAccessibilityFormatDate(currentDate); - - this.setAttribute('aria-label', i18nSelectNextDay(currentDateString)[this._language.current]); - } - - private _setDisabledRenderAttributes(): void { - this.toggleAttribute('data-disabled', this._disabled || this._inputDisabled); - if (isValidAttribute(this, 'data-disabled')) { - this.setAttribute('aria-disabled', 'true'); - this.removeAttribute('tabindex'); - } else { - this.removeAttribute('aria-disabled'); - this.setAttribute('tabindex', '0'); - } - } - - protected override renderTemplate(): TemplateResult { - this._setDisabledRenderAttributes(); - return html` `; } } diff --git a/src/components/datepicker/datepicker-next-day/readme.md b/src/components/datepicker/datepicker-next-day/readme.md index 15b416e17aa..9e13d556a51 100644 --- a/src/components/datepicker/datepicker-next-day/readme.md +++ b/src/components/datepicker/datepicker-next-day/readme.md @@ -37,8 +37,8 @@ both standalone or within the `sbb-form-field`, they must have the same parent e | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | --------------------------------------------- | ---------- | ------------------------------------------------ | -| `datePicker` | `date-picker` | public | `string \| SbbDatepickerElement \| undefined` | | Datepicker reference. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `datePicker` | `date-picker` | public | `string \| SbbDatepickerElement \| undefined` | | Datepicker reference. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `name` | `name` | public | `string` | | The name of the button element. | | `value` | `value` | public | `string` | | The value of the button element. | 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 855f790025f..1faecbe18d1 100644 --- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts +++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts @@ -1,23 +1,10 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit'; -import { html } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; +import type { CSSResultGroup } from 'lit'; +import { customElement } from 'lit/decorators.js'; -import { - hostAttributes, - LanguageController, - SbbNegativeMixin, - SbbButtonBaseElement, -} from '../../core/common-behaviors'; -import { defaultDateAdapter, type DateAdapter } from '../../core/datetime'; -import { isValidAttribute } from '../../core/dom'; -import { ConnectedAbortController } from '../../core/eventing'; -import { i18nPreviousDay, i18nSelectPreviousDay, i18nToday } from '../../core/i18n'; -import { - datepickerControlRegisteredEventFactory, - findPreviousAvailableDate, - getDatePicker, -} from '../datepicker'; -import type { SbbDatepickerElement, InputUpdateEvent } from '../datepicker'; +import { hostAttributes } from '../../core/common-behaviors'; +import { i18nPreviousDay, i18nSelectPreviousDay } from '../../core/i18n'; +import { SbbDatepickerButton } from '../common/datepicker-button'; +import { findPreviousAvailableDate, type InputUpdateEvent } from '../datepicker'; import '../../icon'; import style from './datepicker-previous-day.scss?lit&inline'; @@ -29,182 +16,19 @@ import style from './datepicker-previous-day.scss?lit&inline'; @hostAttributes({ slot: 'prefix', }) -export class SbbDatepickerPreviousDayElement extends SbbNegativeMixin(SbbButtonBaseElement) { +export class SbbDatepickerPreviousDayElement extends SbbDatepickerButton { public static override styles: CSSResultGroup = style; - /** Datepicker reference. */ - @property({ attribute: 'date-picker' }) public datePicker?: string | SbbDatepickerElement; + protected iconName: string = 'chevron-small-left-small'; + protected ariaLabelTranslationOffBoundaryDay: Record = i18nPreviousDay; + protected ariaLabelTranslationSelectOffBoundaryDay = i18nSelectPreviousDay; + protected findAvailableDate = findPreviousAvailableDate; - /** Whether the component is disabled due date equals to min date. */ - @state() private _disabled = false; - - /** Whether the component is disabled due date-picker's input disabled. */ - @state() private _inputDisabled = false; - - /** The minimum date as set in the date-picker's input. */ - @state() private _min: string | number | null = null; - - private _datePickerElement?: SbbDatepickerElement | null = null; - - private _dateAdapter: DateAdapter = defaultDateAdapter; - - private _datePickerController!: AbortController; - - private _abort = new ConnectedAbortController(this); - private _language = new LanguageController(this).withHandler(() => this._setAriaLabel()); - - private _handleClick(): void { - if (!this._datePickerElement || isValidAttribute(this, 'data-disabled')) { - return; - } - const startingDate: Date = - this._datePickerElement.getValueAsDate() ?? this._datePickerElement.now(); - const date: Date = findPreviousAvailableDate( - startingDate, - this._datePickerElement.dateFilter, - this._dateAdapter, - this._min, - ); - if (this._dateAdapter.compareDate(date, startingDate) !== 0) { - this._datePickerElement.setValueAsDate(date); - } - } - - public override connectedCallback(): void { - super.connectedCallback(); - this.addEventListener('click', () => this._handleClick(), { signal: this._abort.signal }); - this._syncUpstreamProperties(); - if (!this.datePicker) { - this._init(); - } - } - - public override willUpdate(changedProperties: PropertyValues): void { - if (changedProperties.has('datePicker')) { - this._init(this.datePicker); - } - } - - private _syncUpstreamProperties(): void { - const formField = this.closest?.('sbb-form-field') ?? this.closest?.('[data-form-field]'); - if (formField) { - this.negative = isValidAttribute(formField, 'negative'); - - // We can't use getInputElement of SbbFormFieldElement as async awaiting is not supported in connectedCallback. - // We here only have to look for input. - const inputElement = formField.querySelector('input'); - - if (inputElement) { - this._inputDisabled = - isValidAttribute(inputElement, 'disabled') || isValidAttribute(inputElement, 'readonly'); - } - } - } - - public override disconnectedCallback(): void { - super.disconnectedCallback(); - this._datePickerController?.abort(); - } - - private _init(picker?: string | SbbDatepickerElement): void { - this._datePickerController?.abort(); - this._datePickerController = new AbortController(); - this._datePickerElement = getDatePicker(this, picker); - this._setDisabledState(this._datePickerElement); - if (!this._datePickerElement) { - // If the component is attached to the DOM before the datepicker, it has to listen for the datepicker init, - // assuming that the two components share the same parent element. - this.parentElement?.addEventListener( - 'inputUpdated', - (e: CustomEvent) => this._init(e.target as SbbDatepickerElement), - { once: true, signal: this._datePickerController.signal }, - ); - return; + protected onInputUpdated(event: CustomEvent): void { + if (this.boundary !== event.detail.min) { + this.boundary = event.detail.min!; + this.setDisabledState(this.datePickerElement!); } - this._setAriaLabel(); - - this._datePickerElement.addEventListener( - 'change', - (event: Event) => { - this._setDisabledState(event.target as SbbDatepickerElement); - this._setAriaLabel(); - }, - { signal: this._datePickerController.signal }, - ); - this._datePickerElement.addEventListener( - 'datePickerUpdated', - (event: Event) => { - this._setDisabledState(event.target as SbbDatepickerElement); - this._setAriaLabel(); - }, - { signal: this._datePickerController.signal }, - ); - this._datePickerElement.addEventListener( - 'inputUpdated', - (event: CustomEvent) => { - this._inputDisabled = !!(event.detail.disabled || event.detail.readonly); - if (this._min !== event.detail.min) { - this._min = event.detail.min!; - this._setDisabledState(this._datePickerElement!); - } - this._setAriaLabel(); - }, - { signal: this._datePickerController.signal }, - ); - - this._datePickerElement.dispatchEvent(datepickerControlRegisteredEventFactory()); - } - - private _setDisabledState(datepicker: SbbDatepickerElement | null | undefined): void { - const pickerValueAsDate = datepicker?.getValueAsDate?.(); - - if (!pickerValueAsDate) { - this._disabled = true; - return; - } - - const previousDate: Date = findPreviousAvailableDate( - pickerValueAsDate, - datepicker?.dateFilter || null, - this._dateAdapter, - this._min, - ); - this._disabled = this._dateAdapter.compareDate(previousDate, pickerValueAsDate) === 0; - } - - private _setAriaLabel(): void { - const currentDate = this._datePickerElement?.getValueAsDate?.(); - - if (!currentDate || !this._dateAdapter.isValid(currentDate)) { - this.setAttribute('aria-label', i18nPreviousDay[this._language.current]); - return; - } - - const currentDateString = - this._datePickerElement?.now().toDateString() === currentDate.toDateString() - ? i18nToday[this._language.current].toLowerCase() - : this._dateAdapter.getAccessibilityFormatDate(currentDate); - - this.setAttribute( - 'aria-label', - i18nSelectPreviousDay(currentDateString)[this._language.current], - ); - } - - private _setDisabledRenderAttributes(): void { - this.toggleAttribute('data-disabled', this._disabled || this._inputDisabled); - if (isValidAttribute(this, 'data-disabled')) { - this.setAttribute('aria-disabled', 'true'); - this.removeAttribute('tabindex'); - } else { - this.removeAttribute('aria-disabled'); - this.setAttribute('tabindex', '0'); - } - } - - protected override renderTemplate(): TemplateResult { - this._setDisabledRenderAttributes(); - return html` `; } } diff --git a/src/components/datepicker/datepicker-previous-day/readme.md b/src/components/datepicker/datepicker-previous-day/readme.md index d85bf534acd..33ee7aa58e8 100644 --- a/src/components/datepicker/datepicker-previous-day/readme.md +++ b/src/components/datepicker/datepicker-previous-day/readme.md @@ -37,8 +37,8 @@ both standalone or within the `sbb-form-field`, they must have the same parent e | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | --------------------------------------------- | ---------- | ------------------------------------------------ | -| `datePicker` | `date-picker` | public | `string \| SbbDatepickerElement \| undefined` | | Datepicker reference. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `datePicker` | `date-picker` | public | `string \| SbbDatepickerElement \| undefined` | | Datepicker reference. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `name` | `name` | public | `string` | | The name of the button element. | | `value` | `value` | public | `string` | | The value of the button element. | diff --git a/src/components/datepicker/datepicker/datepicker.ts b/src/components/datepicker/datepicker/datepicker.ts index 1cc32689e14..dcc9c890606 100644 --- a/src/components/datepicker/datepicker/datepicker.ts +++ b/src/components/datepicker/datepicker/datepicker.ts @@ -11,8 +11,7 @@ import { ConnectedAbortController, EventEmitter } from '../../core/eventing'; import { i18nDateChangedTo, i18nDatePickerPlaceholder } from '../../core/i18n'; import type { SbbDateLike, ValidationChangeEvent } from '../../core/interfaces'; import { AgnosticMutationObserver } from '../../core/observers'; -import type { SbbDatepickerNextDayElement } from '../datepicker-next-day'; -import type { SbbDatepickerPreviousDayElement } from '../datepicker-previous-day'; +import type { SbbDatepickerButton } from '../common/datepicker-button'; import type { SbbDatepickerToggleElement } from '../datepicker-toggle'; import style from './datepicker.scss?lit&inline'; @@ -34,10 +33,7 @@ export interface InputUpdateEvent { * @param trigger The id or the reference of the SbbDatePicker. */ export function getDatePicker( - element: - | SbbDatepickerPreviousDayElement - | SbbDatepickerNextDayElement - | SbbDatepickerToggleElement, + element: SbbDatepickerButton | SbbDatepickerToggleElement, trigger?: string | HTMLElement, ): SbbDatepickerElement | null | undefined { if (!trigger) { diff --git a/src/components/datepicker/index.ts b/src/components/datepicker/index.ts index dc611b1b036..12910bb7599 100644 --- a/src/components/datepicker/index.ts +++ b/src/components/datepicker/index.ts @@ -2,3 +2,4 @@ export * from './datepicker'; export * from './datepicker-next-day'; export * from './datepicker-previous-day'; export * from './datepicker-toggle'; +export * from './common';