From 9b657e82390b81f081115b0666eabefdc56a2b82 Mon Sep 17 00:00:00 2001 From: Jeri Peier Date: Mon, 27 Nov 2023 10:30:36 +0100 Subject: [PATCH] refactor: rename event names to camelCase (#2215) Previously our event names were not consistent. Now every event has camelCase notation. BREAKING CHANGE: - sbb-alert: Event `will-present` was renamed to `willPresent`. - sbb-alert: Event `did-present` was renamed to `didPresent`. - sbb-alert: Event `dismissal-requested` was renamed to `dismissalRequested`. - sbb-alert-group: Event `did-dismiss-alert` was renamed to `didDismissAlert`. - sbb-autocomplete: Event `will-open` was renamed to `willOpen`. - sbb-autocomplete: Event `did-open` was renamed to `didOpen`. - sbb-autocomplete: Event `will-close` was renamed to `willClose`. - sbb-autocomplete: Event `did-close` was renamed to `didClose`. - sbb-calendar: Event `date-selected` was renamed to `dateSelected`. - sbb-checkbox: Event `did-change` was renamed to `didChange`. - sbb-dialog: Event `will-open` was renamed to `willOpen`. - sbb-dialog: Event `did-open` was renamed to `didOpen`. - sbb-dialog: Event `will-close` was renamed to `willClose`. - sbb-dialog: Event `did-close` was renamed to `didClose`. - sbb-dialog: Event `request-back-action` was renamed to `requestBackAction`. - sbb-expansion-panel: Event `will-open` was renamed to `willOpen`. - sbb-expansion-panel: Event `did-open` was renamed to `didOpen`. - sbb-expansion-panel: Event `will-close` was renamed to `willClose`. - sbb-expansion-panel: Event `did-close` was renamed to `didClose`. - sbb-expansion-panel-header: Event `toggle-expanded` was renamed to `toggleExpanded`. - sbb-file-selector: Event `file-changed` was renamed to `fileChanged`. - sbb-menu: Event `will-open` was renamed to `willOpen`. - sbb-menu: Event `did-open` was renamed to `didOpen`. - sbb-menu: Event `will-close` was renamed to `willClose`. - sbb-menu: Event `did-close` was renamed to `didClose`. - sbb-notification: Event `will-open` was renamed to `willOpen`. - sbb-notification: Event `did-open` was renamed to `didOpen`. - sbb-notification: Event `will-close` was renamed to `willClose`. - sbb-notification: Event `did-close` was renamed to `didClose`. - sbb-option: Event `option-selection-change` was renamed to `optionSelectionChange`. - sbb-option: Event `option-selected` was renamed to `optionSelected`. - sbb-select: Event `will-open` was renamed to `willOpen`. - sbb-select: Event `did-open` was renamed to `didOpen`. - sbb-select: Event `will-close` was renamed to `willClose`. - sbb-select: Event `did-close` was renamed to `didClose`. - sbb-tab-group: Event `did-change` was renamed to `didChange`. - sbb-tag: Event `state-change` was renamed to `stateChange` and was changed to an internal event. - sbb-toast: Event `will-open` was renamed to `willOpen`. - sbb-toast: Event `did-open` was renamed to `didOpen`. - sbb-toast: Event `will-close` was renamed to `willClose`. - sbb-toast: Event `did-close` was renamed to `didClose`. - sbb-tooltip: Event `will-open` was renamed to `willOpen`. - sbb-tooltip: Event `did-open` was renamed to `didOpen`. - sbb-tooltip: Event `will-close` was renamed to `willClose`. - sbb-tooltip: Event `did-close` was renamed to `didClose`. --- src/components/accordion/accordion.ts | 16 ++++++------- .../alert/alert-group/alert-group.ts | 10 ++++---- src/components/alert/alert-group/readme.md | 8 +++---- src/components/alert/alert/alert.ts | 12 +++++----- src/components/alert/alert/readme.md | 10 ++++---- src/components/autocomplete/autocomplete.ts | 24 +++++++++---------- src/components/autocomplete/readme.md | 14 +++++------ src/components/calendar/calendar.e2e.ts | 4 ++-- src/components/calendar/calendar.ts | 4 ++-- src/components/calendar/readme.md | 6 ++--- src/components/checkbox/checkbox/checkbox.ts | 8 +++---- src/components/checkbox/checkbox/readme.md | 6 ++--- .../datepicker-next-day.e2e.ts | 4 ++-- .../datepicker-next-day.ts | 6 ++--- .../datepicker-previous-day.e2e.ts | 4 ++-- .../datepicker-previous-day.ts | 6 ++--- .../datepicker-toggle.e2e.ts | 12 +++++----- .../datepicker-toggle/datepicker-toggle.ts | 12 +++++----- .../datepicker/datepicker/datepicker.e2e.ts | 6 ++--- .../datepicker/datepicker/datepicker.ts | 20 ++++++++-------- .../datepicker/datepicker/readme.md | 14 +++++------ src/components/dialog/dialog.stories.ts | 21 +++++++--------- src/components/dialog/dialog.ts | 20 ++++++++-------- src/components/dialog/readme.md | 16 ++++++------- .../expansion-panel-header.e2e.ts | 4 ++-- .../expansion-panel-header.ts | 4 ++-- .../expansion-panel-header/readme.md | 8 +++---- .../expansion-panel/expansion-panel.ts | 18 +++++++------- .../expansion-panel/expansion-panel/readme.md | 12 +++++----- .../file-selector/file-selector.stories.ts | 2 +- src/components/file-selector/file-selector.ts | 4 ++-- src/components/file-selector/readme.md | 8 +++---- .../form-field/form-field/form-field.ts | 6 ++--- src/components/menu/menu/menu.ts | 16 ++++++------- src/components/menu/menu/readme.md | 12 +++++----- src/components/message/message.stories.ts | 3 --- .../navigation-section.stories.ts | 12 ++++------ .../navigation/navigation.stories.ts | 13 +++++----- .../navigation/navigation/navigation.ts | 16 ++++++------- .../navigation/navigation/readme.md | 12 +++++----- .../notification/notification.stories.ts | 4 ++-- src/components/notification/notification.ts | 16 ++++++------- src/components/notification/readme.md | 12 +++++----- src/components/option/option/option.ts | 8 +++---- src/components/option/option/readme.md | 8 +++---- .../radio-button-group/radio-button-group.ts | 6 ++--- .../radio-button/radio-button-group/readme.md | 10 ++++---- .../radio-button/radio-button/radio-button.ts | 4 ++-- src/components/select/readme.md | 20 ++++++++-------- src/components/select/select.ts | 24 +++++++++---------- src/components/selection-panel/readme.md | 12 +++++----- .../selection-panel/selection-panel.ts | 22 ++++++++--------- src/components/slider/readme.md | 8 +++---- src/components/slider/slider.ts | 4 ++-- src/components/tabs/tab-group/readme.md | 6 ++--- .../tabs/tab-group/tab-group.e2e.ts | 2 +- .../tabs/tab-group/tab-group.stories.ts | 2 +- src/components/tabs/tab-group/tab-group.ts | 6 ++--- src/components/tag/tag-group/tag-group.ts | 2 +- src/components/tag/tag/readme.md | 10 ++++---- src/components/tag/tag/tag.ts | 6 ++--- src/components/toast/readme.md | 12 +++++----- src/components/toast/toast.ts | 16 ++++++------- src/components/toggle-check/readme.md | 6 ++--- src/components/toggle-check/toggle-check.ts | 4 ++-- .../toggle/toggle-option/toggle-option.ts | 2 +- src/components/toggle/toggle/readme.md | 8 +++---- src/components/toggle/toggle/toggle.ts | 8 +++---- src/components/tooltip/tooltip/readme.md | 12 +++++----- src/components/tooltip/tooltip/tooltip.ts | 16 ++++++------- .../train/train-formation/train-formation.ts | 4 ++-- .../train/train-wagon/train-wagon.e2e.ts | 2 +- .../train/train-wagon/train-wagon.ts | 2 +- src/components/train/train/train.e2e.ts | 2 +- src/components/train/train/train.ts | 2 +- .../boilerplate/component.ts | 4 ++-- 76 files changed, 345 insertions(+), 360 deletions(-) diff --git a/src/components/accordion/accordion.ts b/src/components/accordion/accordion.ts index b8d7f0afbf..f2a82b9b0f 100644 --- a/src/components/accordion/accordion.ts +++ b/src/components/accordion/accordion.ts @@ -77,21 +77,15 @@ export class SbbAccordion extends LitElement { private _setChildrenParameters(): void { const expansionPanels = this._expansionPanels; - if (!expansionPanels) { + if (!expansionPanels || !(expansionPanels.length > 0)) { return; } expansionPanels.forEach((panel: SbbExpansionPanel) => { panel.titleLevel = this.titleLevel; - + panel.disableAnimation = this.disableAnimation; toggleDatasetEntry(panel, 'accordionFirst', false); toggleDatasetEntry(panel, 'accordionLast', false); - - if (this.disableAnimation) { - panel.setAttribute('disable-animation', 'true'); - } else { - panel.removeAttribute('disable-animation'); - } }); toggleDatasetEntry(expansionPanels[0], 'accordionFirst', true); toggleDatasetEntry(expansionPanels[expansionPanels.length - 1], 'accordionLast', true); @@ -100,7 +94,11 @@ export class SbbAccordion extends LitElement { public override connectedCallback(): void { super.connectedCallback(); const signal = this._abort.signal; - this.addEventListener('will-open', (e: CustomEvent) => this._closePanels(e), { signal }); + this.addEventListener( + SbbExpansionPanel.events.willOpen, + (e: CustomEvent) => this._closePanels(e), + { signal }, + ); } protected override render(): TemplateResult { diff --git a/src/components/alert/alert-group/alert-group.ts b/src/components/alert/alert-group/alert-group.ts index 9899263423..5cf10dd755 100644 --- a/src/components/alert/alert-group/alert-group.ts +++ b/src/components/alert/alert-group/alert-group.ts @@ -5,7 +5,7 @@ import { html, unsafeStatic } from 'lit/static-html.js'; import { setAttribute } from '../../core/dom'; import { EventEmitter, ConnectedAbortController } from '../../core/eventing'; import type { TitleLevel } from '../../title'; -import type { SbbAlert } from '../alert'; +import { SbbAlert } from '../alert'; import style from './alert-group.scss?lit&inline'; @@ -14,14 +14,14 @@ import style from './alert-group.scss?lit&inline'; * * @slot - Use the unnamed slot to add `sbb-alert` elements to the `sbb-alert-group`. * @slot accessibility-title - title for this `sbb-alert-group` which is only visible for screen reader users. - * @event {CustomEvent} did-dismiss-alert - Emits when an alert was removed from DOM. + * @event {CustomEvent} didDismissAlert - Emits when an alert was removed from DOM. * @event {CustomEvent} empty - Emits when `sbb-alert-group` becomes empty. */ @customElement('sbb-alert-group') export class SbbAlertGroup extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - didDismissAlert: 'did-dismiss-alert', + didDismissAlert: 'didDismissAlert', empty: 'empty', } as const; @@ -78,7 +78,9 @@ export class SbbAlertGroup extends LitElement { public override connectedCallback(): void { super.connectedCallback(); const signal = this._abort.signal; - this.addEventListener('dismissal-requested', (e) => this._removeAlert(e), { signal }); + this.addEventListener(SbbAlert.events.dismissalRequested, (e) => this._removeAlert(e), { + signal, + }); } private _slotChanged(event: Event): void { diff --git a/src/components/alert/alert-group/readme.md b/src/components/alert/alert-group/readme.md index d73399c7a9..e41b6b627b 100644 --- a/src/components/alert/alert-group/readme.md +++ b/src/components/alert/alert-group/readme.md @@ -51,10 +51,10 @@ and therefore interrupts screen reader flow, to immediately read out the alert c ## Events -| Name | Type | Description | Inherited From | -| ------------------- | ----------------------- | ------------------------------------------- | -------------- | -| `did-dismiss-alert` | `CustomEvent` | Emits when an alert was removed from DOM. | | -| `empty` | `CustomEvent` | Emits when `sbb-alert-group` becomes empty. | | +| Name | Type | Description | Inherited From | +| ----------------- | ----------------------- | ------------------------------------------- | -------------- | +| `didDismissAlert` | `CustomEvent` | Emits when an alert was removed from DOM. | | +| `empty` | `CustomEvent` | Emits when `sbb-alert-group` becomes empty. | | ## Slots diff --git a/src/components/alert/alert/alert.ts b/src/components/alert/alert/alert.ts index 4d8d139fc2..cab1b118b1 100644 --- a/src/components/alert/alert/alert.ts +++ b/src/components/alert/alert/alert.ts @@ -26,17 +26,17 @@ import '../../title'; * @slot - Use the unnamed slot to add content to the `sbb-alert`. * @slot icon - Should be a `sbb-icon` which is displayed next to the title. Styling is optimized for icons of type HIM-CUS. * @slot title - Title content. - * @event {CustomEvent} will-present - Emits when the fade in animation starts. - * @event {CustomEvent} did-present - Emits when the fade in animation ends and the button is displayed. - * @event {CustomEvent} dismissal-requested - Emits when dismissal of an alert was requested. + * @event {CustomEvent} willPresent - Emits when the fade in animation starts. + * @event {CustomEvent} didPresent - Emits when the fade in animation ends and the button is displayed. + * @event {CustomEvent} dismissalRequested - Emits when dismissal of an alert was requested. */ @customElement('sbb-alert') export class SbbAlert extends LitElement implements LinkProperties { public static override styles: CSSResultGroup = style; public static readonly events = { - willPresent: 'will-present', - didPresent: 'did-present', - dismissalRequested: 'dismissal-requested', + willPresent: 'willPresent', + didPresent: 'didPresent', + dismissalRequested: 'dismissalRequested', } as const; /** diff --git a/src/components/alert/alert/readme.md b/src/components/alert/alert/readme.md index cd5174350d..72f019543d 100644 --- a/src/components/alert/alert/readme.md +++ b/src/components/alert/alert/readme.md @@ -97,11 +97,11 @@ Avoid slotting block elements (e.g. `
`) as this violates semantic rules and ## Events -| Name | Type | Description | Inherited From | -| --------------------- | ------------------- | ------------------------------------------------------------------ | -------------- | -| `will-present` | `CustomEvent` | Emits when the fade in animation starts. | | -| `did-present` | `CustomEvent` | Emits when the fade in animation ends and the button is displayed. | | -| `dismissal-requested` | `CustomEvent` | Emits when dismissal of an alert was requested. | | +| Name | Type | Description | Inherited From | +| -------------------- | ------------------- | ------------------------------------------------------------------ | -------------- | +| `willPresent` | `CustomEvent` | Emits when the fade in animation starts. | | +| `didPresent` | `CustomEvent` | Emits when the fade in animation ends and the button is displayed. | | +| `dismissalRequested` | `CustomEvent` | Emits when dismissal of an alert was requested. | | ## Slots diff --git a/src/components/autocomplete/autocomplete.ts b/src/components/autocomplete/autocomplete.ts index 45981a48ba..aadff942ec 100644 --- a/src/components/autocomplete/autocomplete.ts +++ b/src/components/autocomplete/autocomplete.ts @@ -31,19 +31,19 @@ let nextId = 0; * Combined with a native input, it displays a panel with a list of available options. * * @slot - Use the unnamed slot to add `sbb-option` or `sbb-optgroup` elements to the `sbb-autocomplete`. - * @event {CustomEvent} will-open - Emits whenever the `sbb-autocomplete` starts the opening transition. - * @event {CustomEvent} did-open - Emits whenever the `sbb-autocomplete` is opened. - * @event {CustomEvent} will-close - Emits whenever the `sbb-autocomplete` begins the closing transition. - * @event {CustomEvent} did-close - Emits whenever the `sbb-autocomplete` is closed. + * @event {CustomEvent} willOpen - Emits whenever the `sbb-autocomplete` starts the opening transition. + * @event {CustomEvent} didOpen - Emits whenever the `sbb-autocomplete` is opened. + * @event {CustomEvent} willClose - Emits whenever the `sbb-autocomplete` begins the closing transition. + * @event {CustomEvent} didClose - Emits whenever the `sbb-autocomplete` is closed. */ @customElement('sbb-autocomplete') export class SbbAutocomplete extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - willOpen: 'will-open', - didOpen: 'did-open', - willClose: 'will-close', - didClose: 'did-close', + willOpen: 'willOpen', + didOpen: 'didOpen', + willClose: 'willClose', + didClose: 'didClose', } as const; /** @@ -202,11 +202,9 @@ export class SbbAutocomplete extends LitElement { } this._syncNegative(); - this.addEventListener( - 'option-selection-change', - (e: CustomEvent) => this._onOptionSelected(e), - { signal }, - ); + this.addEventListener('optionSelectionChange', (e: CustomEvent) => this._onOptionSelected(e), { + signal, + }); this.addEventListener('click', (e) => this._onOptionClick(e), { signal }); } diff --git a/src/components/autocomplete/readme.md b/src/components/autocomplete/readme.md index 90348c90cf..68a0efe279 100644 --- a/src/components/autocomplete/readme.md +++ b/src/components/autocomplete/readme.md @@ -66,7 +66,7 @@ The displayed `sbb-option` can be collected into groups using `sbb-optgroup` ele ## Events -The `sbb-option` emits the `option-selected` event when selected via user interaction. +The `sbb-option` emits the `optionSelected` event when selected via user interaction. ## Keyboard interaction @@ -112,12 +112,12 @@ using `aria-activedescendant` to support navigation though the autocomplete opti ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------- | -------------------------------------------------------------------- | -------------- | -| `will-open` | `CustomEvent` | Emits whenever the `sbb-autocomplete` starts the opening transition. | | -| `did-open` | `CustomEvent` | Emits whenever the `sbb-autocomplete` is opened. | | -| `will-close` | `CustomEvent` | Emits whenever the `sbb-autocomplete` begins the closing transition. | | -| `did-close` | `CustomEvent` | Emits whenever the `sbb-autocomplete` is closed. | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------- | -------------------------------------------------------------------- | -------------- | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-autocomplete` starts the opening transition. | | +| `didOpen` | `CustomEvent` | Emits whenever the `sbb-autocomplete` is opened. | | +| `willClose` | `CustomEvent` | Emits whenever the `sbb-autocomplete` begins the closing transition. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-autocomplete` is closed. | | ## Slots diff --git a/src/components/calendar/calendar.e2e.ts b/src/components/calendar/calendar.e2e.ts index 1da8ec1b3d..04c95be11a 100644 --- a/src/components/calendar/calendar.e2e.ts +++ b/src/components/calendar/calendar.e2e.ts @@ -92,7 +92,7 @@ describe('sbb-calendar', () => { }); it('selects a different date', async () => { - const selectedSpy = new EventSpy('date-selected'); + const selectedSpy = new EventSpy(SbbCalendar.events.dateSelected); const selectedDate = element.shadowRoot.querySelector('button[data-day="15 1 2023"]'); expect(selectedDate).to.have.class('sbb-calendar__selected'); @@ -110,7 +110,7 @@ describe('sbb-calendar', () => { }); it("clicks on disabled day and doesn't change selection", async () => { - const selectedSpy = new EventSpy('date-selected'); + const selectedSpy = new EventSpy(SbbCalendar.events.dateSelected); element.max = 1674946800; await waitForLitRender(element); diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts index f141eb31d7..934725d9bf 100644 --- a/src/components/calendar/calendar.ts +++ b/src/components/calendar/calendar.ts @@ -81,13 +81,13 @@ export type CalendarView = 'day' | 'month' | 'year'; /** * It displays a calendar which allows to choose a date. * - * @event {CustomEvent} date-selected - Event emitted on date selection. + * @event {CustomEvent} dateSelected - Event emitted on date selection. */ @customElement('sbb-calendar') export class SbbCalendar extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - dateSelected: 'date-selected', + dateSelected: 'dateSelected', } as const; /** If set to true, two months are displayed */ diff --git a/src/components/calendar/readme.md b/src/components/calendar/readme.md index c10fb08980..18808c4c12 100644 --- a/src/components/calendar/readme.md +++ b/src/components/calendar/readme.md @@ -80,6 +80,6 @@ This is helpful if you need a specific state of the component. ## Events -| Name | Type | Description | Inherited From | -| --------------- | ------------------- | -------------------------------- | -------------- | -| `date-selected` | `CustomEvent` | Event emitted on date selection. | | +| Name | Type | Description | Inherited From | +| -------------- | ------------------- | -------------------------------- | -------------- | +| `dateSelected` | `CustomEvent` | Event emitted on date selection. | | diff --git a/src/components/checkbox/checkbox/checkbox.ts b/src/components/checkbox/checkbox/checkbox.ts index c49a97a5fa..1ff3483325 100644 --- a/src/components/checkbox/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox/checkbox.ts @@ -47,15 +47,15 @@ const checkboxObserverConfig: MutationObserverInit = { * @slot icon - Slot used to render the checkbox icon (disabled inside a selection panel). * @slot subtext - Slot used to render a subtext under the label (only visible within a selection panel). * @slot suffix - Slot used to render additional content after the label (only visible within a selection panel). - * @event {CustomEvent} did-change - Deprecated. used for React. Will probably be removed once React 19 is available. + * @event {CustomEvent} didChange - Deprecated. used for React. Will probably be removed once React 19 is available. */ @customElement('sbb-checkbox') export class SbbCheckbox extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - didChange: 'did-change', - stateChange: 'state-change', - checkboxLoaded: 'checkbox-loaded', + didChange: 'didChange', + stateChange: 'stateChange', + checkboxLoaded: 'checkboxLoaded', } as const; /** Value of checkbox. */ diff --git a/src/components/checkbox/checkbox/readme.md b/src/components/checkbox/checkbox/readme.md index 0b486f0f7e..d9edd8373b 100644 --- a/src/components/checkbox/checkbox/readme.md +++ b/src/components/checkbox/checkbox/readme.md @@ -85,9 +85,9 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------- | -------------------------------------------------------------------------------- | -------------- | -| `did-change` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- | +| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | ## Slots diff --git a/src/components/datepicker/datepicker-next-day/datepicker-next-day.e2e.ts b/src/components/datepicker/datepicker-next-day/datepicker-next-day.e2e.ts index 984f08599a..f70f1a7f88 100644 --- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.e2e.ts +++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.e2e.ts @@ -59,7 +59,7 @@ describe('sbb-datepicker-next-day', () => { const nextButton: SbbDatepickerNextDay = doc.querySelector('sbb-datepicker-next-day'); const inputUpdated: EventSpy = new EventSpy( - 'input-updated', + 'inputUpdated', document.querySelector('#parent'), ); // there's no datepicker, so no event and the button is disabled due _datePickerElement not set @@ -91,7 +91,7 @@ describe('sbb-datepicker-next-day', () => { const nextButton: SbbDatepickerNextDay = doc.querySelector('sbb-datepicker-next-day'); const inputUpdated: EventSpy = new EventSpy( - 'input-updated', + 'inputUpdated', document.querySelector('#parent'), ); // there's no datepicker, so no event and the button is disabled due _datePickerElement not set 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 a61c395a8a..828887fc05 100644 --- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts +++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts @@ -132,7 +132,7 @@ export class SbbDatepickerNextDay extends LitElement { // 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( - 'input-updated', + 'inputUpdated', (e: Event) => this._init(e.target as SbbDatepicker), { once: true, signal: this._abort.signal }, ); @@ -149,7 +149,7 @@ export class SbbDatepickerNextDay extends LitElement { { signal: this._datePickerController.signal }, ); this._datePickerElement.addEventListener( - 'date-picker-updated', + 'datePickerUpdated', (event: Event) => { this._setDisabledState(event.target as SbbDatepicker); this._setAriaLabel(); @@ -157,7 +157,7 @@ export class SbbDatepickerNextDay extends LitElement { { signal: this._datePickerController.signal }, ); this._datePickerElement.addEventListener( - 'input-updated', + 'inputUpdated', (event: CustomEvent) => { this._inputDisabled = event.detail.disabled || event.detail.readonly; if (this._max !== event.detail.max) { diff --git a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.e2e.ts b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.e2e.ts index e7896f5e7d..5306cdb269 100644 --- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.e2e.ts +++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.e2e.ts @@ -55,7 +55,7 @@ describe('sbb-datepicker-previous-day', () => { const prevButton: SbbDatepickerPreviousDay = doc.querySelector('sbb-datepicker-previous-day'); const inputUpdated: EventSpy = new EventSpy( - 'input-updated', + 'inputUpdated', document.querySelector('#parent'), ); // there's no datepicker, so no event and the button is disabled due _datePickerElement not set @@ -87,7 +87,7 @@ describe('sbb-datepicker-previous-day', () => { const prevButton: SbbDatepickerPreviousDay = doc.querySelector('sbb-datepicker-previous-day'); const inputUpdated: EventSpy = new EventSpy( - 'input-updated', + 'inputUpdated', document.querySelector('#parent'), ); // there's no datepicker, so no event and the button is disabled due _datePickerElement not set 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 650632d99c..95c8994ed8 100644 --- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts +++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts @@ -132,7 +132,7 @@ export class SbbDatepickerPreviousDay extends LitElement { // 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( - 'input-updated', + 'inputUpdated', (e: Event) => this._init(e.target as SbbDatepicker), { once: true, signal: this._abort.signal }, ); @@ -149,7 +149,7 @@ export class SbbDatepickerPreviousDay extends LitElement { { signal: this._datePickerController.signal }, ); this._datePickerElement.addEventListener( - 'date-picker-updated', + 'datePickerUpdated', (event: Event) => { this._setDisabledState(event.target as SbbDatepicker); this._setAriaLabel(); @@ -157,7 +157,7 @@ export class SbbDatepickerPreviousDay extends LitElement { { signal: this._datePickerController.signal }, ); this._datePickerElement.addEventListener( - 'input-updated', + 'inputUpdated', (event: CustomEvent) => { this._inputDisabled = event.detail.disabled || event.detail.readonly; if (this._min !== event.detail.min) { diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts index 3d8c59cb6e..2d2477e60e 100644 --- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts +++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts @@ -32,7 +32,7 @@ describe('sbb-datepicker-toggle', () => { const element: SbbDatepickerToggle = document.querySelector('sbb-datepicker-toggle'); assert.instanceOf(element, SbbDatepickerToggle); - const didOpenEventSpy = new EventSpy('did-open', element); + const didOpenEventSpy = new EventSpy(SbbTooltip.events.didOpen, element); const tooltipTrigger: SbbTooltipTrigger = element.shadowRoot.querySelector('sbb-tooltip-trigger'); const tooltip: SbbTooltip = element.shadowRoot.querySelector('sbb-tooltip'); @@ -54,7 +54,7 @@ describe('sbb-datepicker-toggle', () => { `); const element: SbbDatepickerToggle = document.querySelector('sbb-datepicker-toggle'); - const didOpenEventSpy = new EventSpy('did-open', element); + const didOpenEventSpy = new EventSpy(SbbTooltip.events.didOpen, element); const tooltipTrigger: SbbTooltipTrigger = element.shadowRoot.querySelector('sbb-tooltip-trigger'); const tooltip: SbbTooltip = element.shadowRoot.querySelector('sbb-tooltip'); @@ -81,7 +81,7 @@ describe('sbb-datepicker-toggle', () => { const toggle: SbbDatepickerToggle = document.querySelector('sbb-datepicker-toggle'); const inputUpdated: EventSpy = new EventSpy( - 'input-updated', + 'inputUpdated', document.querySelector('#parent'), ); const trigger: SbbTooltipTrigger = toggle.shadowRoot.querySelector('sbb-tooltip-trigger'); @@ -114,7 +114,7 @@ describe('sbb-datepicker-toggle', () => { const toggle: SbbDatepickerToggle = document.querySelector('sbb-datepicker-toggle'); const inputUpdated: EventSpy = new EventSpy( - 'input-updated', + 'inputUpdated', document.querySelector('#parent'), ); const trigger: SbbTooltipTrigger = toggle.shadowRoot.querySelector('sbb-tooltip-trigger'); @@ -147,7 +147,7 @@ describe('sbb-datepicker-toggle', () => { const input: HTMLInputElement = form.querySelector('input'); const tooltip: SbbTooltip = element.shadowRoot.querySelector('sbb-tooltip'); expect(tooltip).to.have.attribute('data-state', 'closed'); - const didOpenEventSpy = new EventSpy('did-open', element); + const didOpenEventSpy = new EventSpy(SbbTooltip.events.didOpen, element); const changeSpy = new EventSpy('change', input); const blurSpy = new EventSpy('blur', input); assert.instanceOf(element, SbbDatepickerToggle); @@ -160,7 +160,7 @@ describe('sbb-datepicker-toggle', () => { const calendar: SbbCalendar = element.shadowRoot.querySelector('sbb-calendar'); calendar.dispatchEvent( - new CustomEvent('date-selected', { + new CustomEvent('dateSelected', { detail: new Date('2022-01-01'), }), ); diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts index 6479fa8755..01d53c3945 100644 --- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts +++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts @@ -105,7 +105,7 @@ export class SbbDatepickerToggle extends LitElement { // 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( - 'input-updated', + 'inputUpdated', (e: Event) => this._init(e.target as SbbDatepicker), { once: true, signal: this._datePickerController.signal }, ); @@ -113,7 +113,7 @@ export class SbbDatepickerToggle extends LitElement { } this._datePickerElement?.addEventListener( - 'input-updated', + 'inputUpdated', (event: CustomEvent) => { this._datePickerElement = event.target as SbbDatepicker; this._disabled = event.detail.disabled || event.detail.readonly; @@ -130,7 +130,7 @@ export class SbbDatepickerToggle extends LitElement { }, ); this._datePickerElement?.addEventListener( - 'date-picker-updated', + 'datePickerUpdated', (event: Event) => this._configureCalendar(this._calendarElement, event.target as SbbDatepicker), { signal: this._datePickerController.signal }, @@ -201,8 +201,8 @@ export class SbbDatepickerToggle extends LitElement { ${ref((el: SbbTooltipTrigger) => (this._triggerElement = el))} > this._calendarElement.resetPosition()} - @did-open=${() => { + @willOpen=${() => this._calendarElement.resetPosition()} + @didOpen=${() => { sbbInputModalityDetector.mostRecentModality === 'keyboard' && this._calendarElement.focus(); }} @@ -218,7 +218,7 @@ export class SbbDatepickerToggle extends LitElement { .max=${this._max} ?wide=${this._datePickerElement?.wide} .dateFilter=${this._datePickerElement?.dateFilter} - @date-selected=${(d: CustomEvent) => { + @dateSelected=${(d: CustomEvent) => { const newDate = new Date(d.detail); this._calendarElement.selectedDate = newDate; this._datePickerElement.setValueAsDate(newDate); diff --git a/src/components/datepicker/datepicker/datepicker.e2e.ts b/src/components/datepicker/datepicker/datepicker.e2e.ts index ee199695ad..0048f88e4f 100644 --- a/src/components/datepicker/datepicker/datepicker.e2e.ts +++ b/src/components/datepicker/datepicker/datepicker.e2e.ts @@ -145,7 +145,7 @@ describe('sbb-datepicker', () => { }); it('renders and emits event when input parameter changes', async () => { - const datePickerUpdatedSpy = new EventSpy('date-picker-updated'); + const datePickerUpdatedSpy = new EventSpy('datePickerUpdated'); element.wide = true; await waitForCondition(() => datePickerUpdatedSpy.events.length === 1); expect(datePickerUpdatedSpy.count).to.be.equal(1); @@ -184,7 +184,7 @@ describe('sbb-datepicker', () => { }); it('should emit validation change event', async () => { - let validationChangeSpy = new EventSpy('validation-change', element); + let validationChangeSpy = new EventSpy('validationChange', element); // When entering 99 input.focus(); @@ -207,7 +207,7 @@ describe('sbb-datepicker', () => { expect(input).to.have.attribute('data-sbb-invalid'); // Reset event spy - validationChangeSpy = new EventSpy('validation-change', element); + validationChangeSpy = new EventSpy('validationChange', element); // When adding missing parts of a valid date input.focus(); diff --git a/src/components/datepicker/datepicker/datepicker.ts b/src/components/datepicker/datepicker/datepicker.ts index e384e5a67e..48e73f45ba 100644 --- a/src/components/datepicker/datepicker/datepicker.ts +++ b/src/components/datepicker/datepicker/datepicker.ts @@ -160,7 +160,7 @@ export function isDateAvailable( } export const datepickerControlRegisteredEventFactory = (): CustomEvent => - new CustomEvent('datepicker-control-registered', { + new CustomEvent('datepickerControlRegistered', { bubbles: false, composed: true, }); @@ -168,21 +168,21 @@ export const datepickerControlRegisteredEventFactory = (): CustomEvent => /** * Combined with a native input, it displays the input's value as a formatted date. * - * @event {CustomEvent} did-change - Deprecated. used for React. Will probably be removed once React 19 is available. + * @event {CustomEvent} didChange - Deprecated. used for React. Will probably be removed once React 19 is available. * @event {CustomEvent} change - Notifies that the connected input has changes. - * @event {CustomEvent} input-updated - Notifies that the attributes of the input connected to the datepicker have changes. - * @event {CustomEvent} date-picker-updated - Notifies that the attributes of the datepicker have changes. - * @event {CustomEvent} validation-change - Emits whenever the internal validation state changes. + * @event {CustomEvent} inputUpdated - Notifies that the attributes of the input connected to the datepicker have changes. + * @event {CustomEvent} datePickerUpdated - Notifies that the attributes of the datepicker have changes. + * @event {CustomEvent} validationChange - Emits whenever the internal validation state changes. */ @customElement('sbb-datepicker') export class SbbDatepicker extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - didChange: 'did-change', + didChange: 'didChange', change: 'change', - inputUpdated: 'input-updated', - datePickerUpdated: 'date-picker-updated', - validationChange: 'validation-change', + inputUpdated: 'inputUpdated', + datePickerUpdated: 'datePickerUpdated', + validationChange: 'validationChange', } as const; /** If set to true, two months are displayed. */ @@ -348,7 +348,7 @@ export class SbbDatepicker extends LitElement { public override connectedCallback(): void { super.connectedCallback(); const signal = this._abort.signal; - this.addEventListener('datepicker-control-registered', () => this._onInputPropertiesChange(), { + this.addEventListener('datepickerControlRegistered', () => this._onInputPropertiesChange(), { signal, }); this._handlerRepository.connect(); diff --git a/src/components/datepicker/datepicker/readme.md b/src/components/datepicker/datepicker/readme.md index 6f30e4e6c4..e2f7f4afe3 100644 --- a/src/components/datepicker/datepicker/readme.md +++ b/src/components/datepicker/datepicker/readme.md @@ -121,10 +121,10 @@ This is helpful if you need a specific state of the component. ## Events -| Name | Type | Description | Inherited From | -| --------------------- | ------------------------------------ | ----------------------------------------------------------------------------------- | -------------- | -| `did-change` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | -| `change` | `CustomEvent` | Notifies that the connected input has changes. | | -| `input-updated` | `CustomEvent` | Notifies that the attributes of the input connected to the datepicker have changes. | | -| `date-picker-updated` | `CustomEvent` | Notifies that the attributes of the datepicker have changes. | | -| `validation-change` | `CustomEvent` | Emits whenever the internal validation state changes. | | +| Name | Type | Description | Inherited From | +| ------------------- | ------------------------------------ | ----------------------------------------------------------------------------------- | -------------- | +| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | +| `change` | `CustomEvent` | Notifies that the connected input has changes. | | +| `inputUpdated` | `CustomEvent` | Notifies that the attributes of the input connected to the datepicker have changes. | | +| `datePickerUpdated` | `CustomEvent` | Notifies that the attributes of the datepicker have changes. | | +| `validationChange` | `CustomEvent` | Emits whenever the internal validation state changes. | | diff --git a/src/components/dialog/dialog.stories.ts b/src/components/dialog/dialog.stories.ts index 091c11dc0d..e07adf7e93 100644 --- a/src/components/dialog/dialog.stories.ts +++ b/src/components/dialog/dialog.stories.ts @@ -4,7 +4,6 @@ import type { InputType } from '@storybook/types'; import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components'; import isChromatic from 'chromatic'; import { html, TemplateResult } from 'lit'; -import { ref } from 'lit/directives/ref.js'; import { styleMap } from 'lit/directives/style-map.js'; import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready'; @@ -130,17 +129,6 @@ const openDialog = (_event, id): void => { dialog.open(); }; -const onFormDialogClose = (dialog): void => { - dialog?.addEventListener('will-close', (event) => { - if (event.detail) { - document.getElementById('returned-value-message')!.innerHTML = - `${event.detail.returnValue.message?.value}`; - document.getElementById('returned-value-animal')!.innerHTML = - `${event.detail.returnValue.animal?.value}`; - } - }); -}; - const triggerButton = (dialogId): TemplateResult => html` html` { + if (event.detail) { + document.getElementById('returned-value-message')!.innerHTML = + `${event.detail.returnValue.message?.value}`; + document.getElementById('returned-value-animal')!.innerHTML = + `${event.detail.returnValue.animal?.value}`; + } + }} ${sbbSpread(args)} - ${ref((dialog) => onFormDialogClose(dialog))} >
Submit the form below to close the dialog box using the diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index 3540b27a89..fa60c7d743 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -37,21 +37,21 @@ let nextId = 0; * @slot - Use the unnamed slot to add content to the `sbb-dialog`. * @slot title - Use this slot to provide a title. * @slot action-group - Use this slot to display a `sbb-action-group` in the footer. - * @event {CustomEvent} will-open - Emits whenever the `sbb-dialog` starts the opening transition. - * @event {CustomEvent} did-open - Emits whenever the `sbb-dialog` is opened. - * @event {CustomEvent} will-close - Emits whenever the `sbb-dialog` begins the closing transition. - * @event {CustomEvent} did-close - Emits whenever the `sbb-dialog` is closed. - * @event {CustomEvent} request-back-action - Emits whenever the back button is clicked. + * @event {CustomEvent} willOpen - Emits whenever the `sbb-dialog` starts the opening transition. + * @event {CustomEvent} didOpen - Emits whenever the `sbb-dialog` is opened. + * @event {CustomEvent} willClose - Emits whenever the `sbb-dialog` begins the closing transition. + * @event {CustomEvent} didClose - Emits whenever the `sbb-dialog` is closed. + * @event {CustomEvent} requestBackAction - Emits whenever the back button is clicked. */ @customElement('sbb-dialog') export class SbbDialog extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - willOpen: 'will-open', - didOpen: 'did-open', - willClose: 'will-close', - didClose: 'did-close', - backClick: 'request-back-action', + willOpen: 'willOpen', + didOpen: 'didOpen', + willClose: 'willClose', + didClose: 'didClose', + backClick: 'requestBackAction', } as const; /** diff --git a/src/components/dialog/readme.md b/src/components/dialog/readme.md index 796823bd28..8a82a17ee7 100644 --- a/src/components/dialog/readme.md +++ b/src/components/dialog/readme.md @@ -68,7 +68,7 @@ The component can also be dismissed by clicking on the close button, clicking on or, if an element within the `sbb-dialog` has the `sbb-dialog-close` attribute, by clicking on it. You can also set the property `titleBackButton` to display the back button in the title section -(or content section, if title is omitted) which will emit the event `request-back-action` when clicked. +(or content section, if title is omitted) which will emit the event `requestBackAction` when clicked. ## Style @@ -102,13 +102,13 @@ The default `z-index` of the component is set to `1000`; to specify a custom sta ## Events -| Name | Type | Description | Inherited From | -| --------------------- | ------------------- | -------------------------------------------------------------- | -------------- | -| `will-open` | `CustomEvent` | Emits whenever the `sbb-dialog` starts the opening transition. | | -| `did-open` | `CustomEvent` | Emits whenever the `sbb-dialog` is opened. | | -| `will-close` | `CustomEvent` | Emits whenever the `sbb-dialog` begins the closing transition. | | -| `did-close` | `CustomEvent` | Emits whenever the `sbb-dialog` is closed. | | -| `request-back-action` | `CustomEvent` | Emits whenever the back button is clicked. | | +| Name | Type | Description | Inherited From | +| ------------------- | ------------------- | -------------------------------------------------------------- | -------------- | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-dialog` starts the opening transition. | | +| `didOpen` | `CustomEvent` | Emits whenever the `sbb-dialog` is opened. | | +| `willClose` | `CustomEvent` | Emits whenever the `sbb-dialog` begins the closing transition. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-dialog` is closed. | | +| `requestBackAction` | `CustomEvent` | Emits whenever the back button is clicked. | | ## Slots diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.e2e.ts b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.e2e.ts index e50d16f2d3..4a93d63c5a 100644 --- a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.e2e.ts +++ b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.e2e.ts @@ -17,7 +17,7 @@ describe('sbb-expansion-panel-header', () => { }); it('should emit event on click', async () => { - const spy = new EventSpy('toggle-expanded'); + const spy = new EventSpy(SbbExpansionPanelHeader.events.toggleExpanded); element.click(); expect(spy.count).to.be.greaterThan(0); }); @@ -26,7 +26,7 @@ describe('sbb-expansion-panel-header', () => { element = await fixture( html`Header`, ); - const spy = new EventSpy('toggle-expanded'); + const spy = new EventSpy(SbbExpansionPanelHeader.events.toggleExpanded); element.click(); expect(spy.count).not.to.be.greaterThan(0); }); diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts index fa9996c5d5..dcd9fd7a07 100644 --- a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts +++ b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts @@ -21,13 +21,13 @@ import '../../icon'; * * @slot - Use the unnamed slot to add content to the `sbb-expansion-panel-header`. * @slot icon - Slot used to render the `sbb-expansion-panel-header` icon. - * @event {CustomEvent} toggle-expanded - Notifies that the `sbb-expansion-panel` has to expand. + * @event {CustomEvent} toggleExpanded - Notifies that the `sbb-expansion-panel` has to expand. */ @customElement('sbb-expansion-panel-header') export class SbbExpansionPanelHeader extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - toggleExpanded: 'toggle-expanded', + toggleExpanded: 'toggleExpanded', } as const; /** diff --git a/src/components/expansion-panel/expansion-panel-header/readme.md b/src/components/expansion-panel/expansion-panel-header/readme.md index 7eeaed2089..9fb7958667 100644 --- a/src/components/expansion-panel/expansion-panel-header/readme.md +++ b/src/components/expansion-panel/expansion-panel-header/readme.md @@ -29,7 +29,7 @@ The component can be displayed in `disabled` state using the self-named property ## Events -When the element is clicked, the `toggle-expanded` event is emitted. +When the element is clicked, the `toggleExpanded` event is emitted. @@ -42,9 +42,9 @@ When the element is clicked, the `toggle-expanded` event is emitted. ## Events -| Name | Type | Description | Inherited From | -| ----------------- | ------------------- | ------------------------------------------------------ | -------------- | -| `toggle-expanded` | `CustomEvent` | Notifies that the `sbb-expansion-panel` has to expand. | | +| Name | Type | Description | Inherited From | +| ---------------- | ------------------- | ------------------------------------------------------ | -------------- | +| `toggleExpanded` | `CustomEvent` | Notifies that the `sbb-expansion-panel` has to expand. | | ## Slots diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.ts index b1f0c0e0fd..96590bea10 100644 --- a/src/components/expansion-panel/expansion-panel/expansion-panel.ts +++ b/src/components/expansion-panel/expansion-panel/expansion-panel.ts @@ -17,19 +17,19 @@ let nextId = 0; * It displays an expandable summary-details widget. * * @slot - Use the unnamed slot to add a `sbb-expansion-panel-header` and a `sbb-expansion-panel-content` element. - * @event {CustomEvent} will-open - Emits whenever the `sbb-expansion-panel` starts the opening transition. - * @event {CustomEvent} did-open - Emits whenever the `sbb-expansion-panel` is opened. - * @event {CustomEvent} will-close - Emits whenever the `sbb-expansion-panel` begins the closing transition. - * @event {CustomEvent} did-close - Emits whenever the `sbb-expansion-panel` is closed. + * @event {CustomEvent} willOpen - Emits whenever the `sbb-expansion-panel` starts the opening transition. + * @event {CustomEvent} didOpen - Emits whenever the `sbb-expansion-panel` is opened. + * @event {CustomEvent} willClose - Emits whenever the `sbb-expansion-panel` begins the closing transition. + * @event {CustomEvent} didClose - Emits whenever the `sbb-expansion-panel` is closed. */ @customElement('sbb-expansion-panel') export class SbbExpansionPanel extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - willOpen: 'will-open', - didOpen: 'did-open', - willClose: 'will-close', - didClose: 'did-close', + willOpen: 'willOpen', + didOpen: 'didOpen', + willClose: 'willClose', + didClose: 'didClose', } as const; /** Heading level; if unset, a `div` will be rendered. */ @@ -125,7 +125,7 @@ export class SbbExpansionPanel extends LitElement { public override connectedCallback(): void { super.connectedCallback(); const signal = this._abort.signal; - this.addEventListener('toggle-expanded', () => this._toggleExpanded(), { signal }); + this.addEventListener('toggleExpanded', () => this._toggleExpanded(), { signal }); const accordion = this.closest?.('sbb-accordion'); toggleDatasetEntry(this, 'accordion', !!accordion); } diff --git a/src/components/expansion-panel/expansion-panel/readme.md b/src/components/expansion-panel/expansion-panel/readme.md index b9fc8dac3c..815b1d7821 100644 --- a/src/components/expansion-panel/expansion-panel/readme.md +++ b/src/components/expansion-panel/expansion-panel/readme.md @@ -82,12 +82,12 @@ and the `aria-hidden` attribute on the content. ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------- | ----------------------------------------------------------------------- | -------------- | -| `will-open` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` starts the opening transition. | | -| `did-open` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` is opened. | | -| `will-close` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` begins the closing transition. | | -| `did-close` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` is closed. | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------- | ----------------------------------------------------------------------- | -------------- | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` starts the opening transition. | | +| `didOpen` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` is opened. | | +| `willClose` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` begins the closing transition. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` is closed. | | ## Slots diff --git a/src/components/file-selector/file-selector.stories.ts b/src/components/file-selector/file-selector.stories.ts index 73325b6d98..1e146f027a 100644 --- a/src/components/file-selector/file-selector.stories.ts +++ b/src/components/file-selector/file-selector.stories.ts @@ -93,7 +93,7 @@ const TemplateWithError = (args): TemplateResult => { { + @fileChanged=${(event) => { if (event.detail && event.detail.length > 0) { document.getElementById('sbb-file-selector')!.append(sbbFormError); } else { diff --git a/src/components/file-selector/file-selector.ts b/src/components/file-selector/file-selector.ts index 4a94a370c3..1e2b0b64b1 100644 --- a/src/components/file-selector/file-selector.ts +++ b/src/components/file-selector/file-selector.ts @@ -30,13 +30,13 @@ export type DOMEvent = globalThis.Event; * It allows to select one or more file from storage devices and display them. * * @slot error - Use this to provide a `sbb-form-error` to show an error message. - * @event {CustomEvent} file-changed - An event which is emitted each time the file list changes. + * @event {CustomEvent} fileChanged - An event which is emitted each time the file list changes. */ @customElement('sbb-file-selector') export class SbbFileSelector extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - fileChangedEvent: 'file-changed', + fileChangedEvent: 'fileChanged', } as const; /** Whether the component has a dropzone area or not. */ diff --git a/src/components/file-selector/readme.md b/src/components/file-selector/readme.md index 747b4d5d64..de645accf9 100644 --- a/src/components/file-selector/readme.md +++ b/src/components/file-selector/readme.md @@ -61,7 +61,7 @@ The `error` named slot can be used to display an error message using the `sbb-fo ### Events -Whenever the selection changes, a `file-changed` event is fired, whose `event.detail` property contains the list +Whenever the selection changes, a `fileChanged` event is fired, whose `event.detail` property contains the list of currently selected files. The list can also be retrieved using the `getFiles()` method. ## Accessibility @@ -101,9 +101,9 @@ It's suggested to have a different value for each variant, e.g.: ## Events -| Name | Type | Description | Inherited From | -| -------------- | --------------------- | ---------------------------------------------------------- | -------------- | -| `file-changed` | `CustomEvent` | An event which is emitted each time the file list changes. | | +| Name | Type | Description | Inherited From | +| ------------- | --------------------- | ---------------------------------------------------------- | -------------- | +| `fileChanged` | `CustomEvent` | An event which is emitted each time the file list changes. | | ## Slots diff --git a/src/components/form-field/form-field/form-field.ts b/src/components/form-field/form-field/form-field.ts index da230dd0be..c64dc0d979 100644 --- a/src/components/form-field/form-field/form-field.ts +++ b/src/components/form-field/form-field/form-field.ts @@ -146,8 +146,8 @@ export class SbbFormField extends LitElement { public override connectedCallback(): void { super.connectedCallback(); const signal = this._abort.signal; - this.addEventListener('will-open', (e) => this._onPopupOpen(e), { signal }); - this.addEventListener('did-close', (e) => this._onPopupClose(e), { signal }); + this.addEventListener('willOpen', (e) => this._onPopupOpen(e), { signal }); + this.addEventListener('didClose', (e) => this._onPopupClose(e), { signal }); this._handlerRepository.connect(); this._registerInputListener(); this._syncNegative(); @@ -319,7 +319,7 @@ export class SbbFormField extends LitElement { let inputFocusElement = this._input; if (this._input.tagName === 'SBB-SELECT') { - this._input.addEventListener('state-change', () => this._checkAndUpdateInputEmpty(), { + this._input.addEventListener('stateChange', () => this._checkAndUpdateInputEmpty(), { signal: this._inputAbortController.signal, }); diff --git a/src/components/menu/menu/menu.ts b/src/components/menu/menu/menu.ts index 551635bfc2..71763f8908 100644 --- a/src/components/menu/menu/menu.ts +++ b/src/components/menu/menu/menu.ts @@ -42,19 +42,19 @@ let nextId = 0; * It displays a contextual menu with one or more action element. * * @slot - Use the unnamed slot to add `sbb-menu-action` or other elements to the menu. - * @event {CustomEvent} will-open - Emits whenever the `sbb-menu` starts the opening transition. - * @event {CustomEvent} did-open - Emits whenever the `sbb-menu` is opened. - * @event {CustomEvent} will-close - Emits whenever the `sbb-menu` begins the closing transition. - * @event {CustomEvent} did-close - Emits whenever the `sbb-menu` is closed. + * @event {CustomEvent} willOpen - Emits whenever the `sbb-menu` starts the opening transition. + * @event {CustomEvent} didOpen - Emits whenever the `sbb-menu` is opened. + * @event {CustomEvent} willClose - Emits whenever the `sbb-menu` begins the closing transition. + * @event {CustomEvent} didClose - Emits whenever the `sbb-menu` is closed. */ @customElement('sbb-menu') export class SbbMenu extends SlotChildObserver(LitElement) { public static override styles: CSSResultGroup = style; public static readonly events = { - willOpen: 'will-open', - didOpen: 'did-open', - willClose: 'will-close', - didClose: 'did-close', + willOpen: 'willOpen', + didOpen: 'didOpen', + willClose: 'willClose', + didClose: 'didClose', } as const; /** diff --git a/src/components/menu/menu/readme.md b/src/components/menu/menu/readme.md index c2c3babf75..7402ebd097 100644 --- a/src/components/menu/menu/readme.md +++ b/src/components/menu/menu/readme.md @@ -79,12 +79,12 @@ to identify which actions are active and which are not. ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------- | ------------------------------------------------------------ | -------------- | -| `will-open` | `CustomEvent` | Emits whenever the `sbb-menu` starts the opening transition. | | -| `did-open` | `CustomEvent` | Emits whenever the `sbb-menu` is opened. | | -| `will-close` | `CustomEvent` | Emits whenever the `sbb-menu` begins the closing transition. | | -| `did-close` | `CustomEvent` | Emits whenever the `sbb-menu` is closed. | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------- | ------------------------------------------------------------ | -------------- | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-menu` starts the opening transition. | | +| `didOpen` | `CustomEvent` | Emits whenever the `sbb-menu` is opened. | | +| `willClose` | `CustomEvent` | Emits whenever the `sbb-menu` begins the closing transition. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-menu` is closed. | | ## Slots diff --git a/src/components/message/message.stories.ts b/src/components/message/message.stories.ts index ef4d4f855d..185b294d32 100644 --- a/src/components/message/message.stories.ts +++ b/src/components/message/message.stories.ts @@ -134,9 +134,6 @@ const meta: Meta = { withActions as Decorator, ], parameters: { - actions: { - handles: [], - }, backgrounds: { disable: true, }, diff --git a/src/components/navigation/navigation-section/navigation-section.stories.ts b/src/components/navigation/navigation-section/navigation-section.stories.ts index 493038fb1e..a0d73dcde3 100644 --- a/src/components/navigation/navigation-section/navigation-section.stories.ts +++ b/src/components/navigation/navigation-section/navigation-section.stories.ts @@ -4,7 +4,6 @@ import type { InputType } from '@storybook/types'; import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components'; import isChromatic from 'chromatic'; import { html, TemplateResult } from 'lit'; -import { ref } from 'lit/directives/ref.js'; import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready'; import { sbbSpread } from '../../core/dom'; @@ -92,12 +91,6 @@ const navigationList = (label: string): TemplateResult => html` `; -const onNavigationClose = (dialog: SbbNavigation): void => { - dialog?.addEventListener('did-close', () => { - (document.getElementById('nav-marker') as SbbNavigationMarker).reset(); - }); -}; - const DefaultTemplate = (args: Args): TemplateResult => html` ${triggerButton('navigation-trigger-1')} html` id="navigation" trigger="navigation-trigger-1" ?disable-animation=${args['disable-animation']} - ${ref((dialog?: Element) => onNavigationClose(dialog as SbbNavigation))} + @didClose=${(event: CustomEvent) => + ( + (event.currentTarget as SbbNavigation).querySelector('#nav-marker') as SbbNavigationMarker + ).reset()} > ${navigationActionsL()} diff --git a/src/components/navigation/navigation/navigation.stories.ts b/src/components/navigation/navigation/navigation.stories.ts index 8844b930a5..f3edaf9bbb 100644 --- a/src/components/navigation/navigation/navigation.stories.ts +++ b/src/components/navigation/navigation/navigation.stories.ts @@ -5,7 +5,6 @@ import type { InputType } from '@storybook/types'; import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components'; import isChromatic from 'chromatic'; import { html, TemplateResult } from 'lit'; -import { ref } from 'lit/directives/ref.js'; import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready'; import { sbbSpread } from '../../core/dom'; @@ -136,10 +135,10 @@ const actionLabels = (num: number): TemplateResult[] => { return labels; }; -const onNavigationClose = (dialog: SbbNavigation): void => { - dialog?.addEventListener('did-close', () => { - (document.getElementById('nav-marker') as SbbNavigationMarker).reset(); - }); +const onNavigationClose = (event: CustomEvent): void => { + ( + (event.currentTarget as SbbNavigation).querySelector('#nav-marker') as SbbNavigationMarker + ).reset(); }; const DefaultTemplate = (args: Args): TemplateResult => html` @@ -148,7 +147,7 @@ const DefaultTemplate = (args: Args): TemplateResult => html` data-testid="navigation" id="navigation" trigger="navigation-trigger-1" - ${ref((dialog?: Element) => onNavigationClose(dialog as SbbNavigation))} + @didClose=${onNavigationClose} ${sbbSpread(args)} > ${navigationActionsL()} @@ -175,7 +174,7 @@ const WithNavigationSectionTemplate = (args: Args): TemplateResult => html` data-testid="navigation" id="navigation" trigger="navigation-trigger-1" - ${ref((dialog?: Element) => onNavigationClose(dialog as SbbNavigation))} + @didClose=${onNavigationClose} ${sbbSpread(args)} > ${navigationActionsL()} diff --git a/src/components/navigation/navigation/navigation.ts b/src/components/navigation/navigation/navigation.ts index 6b51fa10dd..856ca864d6 100644 --- a/src/components/navigation/navigation/navigation.ts +++ b/src/components/navigation/navigation/navigation.ts @@ -43,19 +43,19 @@ let nextId = 0; * It displays a navigation menu, wrapping one or more `sbb-navigation-*` components. * * @slot - Use the unnamed slot to add `sbb-navigation-action` elements into the sbb-navigation menu. - * @event {CustomEvent} will-open - Emits whenever the `sbb-navigation` begins the opening transition. - * @event {CustomEvent} did-open - Emits whenever the `sbb-navigation` is opened. - * @event {CustomEvent} will-close - Emits whenever the `sbb-navigation` begins the closing transition. - * @event {CustomEvent} did-close - Emits whenever the `sbb-navigation` is closed. + * @event {CustomEvent} willOpen - Emits whenever the `sbb-navigation` begins the opening transition. + * @event {CustomEvent} didOpen - Emits whenever the `sbb-navigation` is opened. + * @event {CustomEvent} willClose - Emits whenever the `sbb-navigation` begins the closing transition. + * @event {CustomEvent} didClose - Emits whenever the `sbb-navigation` is closed. */ @customElement('sbb-navigation') export class SbbNavigation extends UpdateScheduler(LitElement) { public static override styles: CSSResultGroup = style; public static readonly events = { - willOpen: 'will-open', - didOpen: 'did-open', - willClose: 'will-close', - didClose: 'did-close', + willOpen: 'willOpen', + didOpen: 'didOpen', + willClose: 'willClose', + didClose: 'didClose', } as const; /** diff --git a/src/components/navigation/navigation/readme.md b/src/components/navigation/navigation/readme.md index 1d6d02c60b..e36825ce38 100644 --- a/src/components/navigation/navigation/readme.md +++ b/src/components/navigation/navigation/readme.md @@ -77,12 +77,12 @@ Similarly, if a navigation action is marked to indicate a selected option (e.g., ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------- | ------------------------------------------------------------------ | -------------- | -| `will-open` | `CustomEvent` | Emits whenever the `sbb-navigation` begins the opening transition. | | -| `did-open` | `CustomEvent` | Emits whenever the `sbb-navigation` is opened. | | -| `will-close` | `CustomEvent` | Emits whenever the `sbb-navigation` begins the closing transition. | | -| `did-close` | `CustomEvent` | Emits whenever the `sbb-navigation` is closed. | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------- | ------------------------------------------------------------------ | -------------- | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-navigation` begins the opening transition. | | +| `didOpen` | `CustomEvent` | Emits whenever the `sbb-navigation` is opened. | | +| `willClose` | `CustomEvent` | Emits whenever the `sbb-navigation` begins the closing transition. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-navigation` is closed. | | ## Slots diff --git a/src/components/notification/notification.stories.ts b/src/components/notification/notification.stories.ts index c61bdce651..ffcd02816b 100644 --- a/src/components/notification/notification.stories.ts +++ b/src/components/notification/notification.stories.ts @@ -86,7 +86,7 @@ const notification = (args: Args): TemplateResult => html` ${ref( (notification?: Element) => (notification as SbbNotification)?.addEventListener( - 'did-open', + SbbNotification.events.didOpen, () => ((notification as SbbNotification).disableAnimation = args['disable-animation']), { once: true }, ), @@ -126,7 +126,7 @@ const SlottedTitleTemplate = (args: Args): TemplateResult => html` ${ref( (notification?: Element) => (notification as SbbNotification)?.addEventListener( - 'did-open', + SbbNotification.events.didOpen, () => ((notification as SbbNotification).disableAnimation = args['disable-animation']), { once: true }, ), diff --git a/src/components/notification/notification.ts b/src/components/notification/notification.ts index bb13e34c32..b3e6a74107 100644 --- a/src/components/notification/notification.ts +++ b/src/components/notification/notification.ts @@ -34,19 +34,19 @@ const notificationTypes = new Map([ * * @slot - Use the unnamed slot to add content to the notification message. * @slot title - Use this to provide a notification title (optional). - * @event {CustomEvent} will-open - Emits whenever the `sbb-notification` starts the opening transition. - * @event {CustomEvent} did-open - Emits whenever the `sbb-notification` is opened. - * @event {CustomEvent} will-close - Emits whenever the `sbb-notification` begins the closing transition. - * @event {CustomEvent} did-close - Emits whenever the `sbb-notification` is closed. + * @event {CustomEvent} willOpen - Emits whenever the `sbb-notification` starts the opening transition. + * @event {CustomEvent} didOpen - Emits whenever the `sbb-notification` is opened. + * @event {CustomEvent} willClose - Emits whenever the `sbb-notification` begins the closing transition. + * @event {CustomEvent} didClose - Emits whenever the `sbb-notification` is closed. */ @customElement('sbb-notification') export class SbbNotification extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - willOpen: 'will-open', - didOpen: 'did-open', - willClose: 'will-close', - didClose: 'did-close', + willOpen: 'willOpen', + didOpen: 'didOpen', + willClose: 'willClose', + didClose: 'didClose', } as const; /** diff --git a/src/components/notification/readme.md b/src/components/notification/readme.md index 3764719321..f41b73da4a 100644 --- a/src/components/notification/readme.md +++ b/src/components/notification/readme.md @@ -78,12 +78,12 @@ For example, use `--sbb-notification-margin: 0 0 var(--sbb-spacing-fixed-4x) 0` ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------- | -------------------------------------------------------------------- | -------------- | -| `will-open` | `CustomEvent` | Emits whenever the `sbb-notification` starts the opening transition. | | -| `did-open` | `CustomEvent` | Emits whenever the `sbb-notification` is opened. | | -| `will-close` | `CustomEvent` | Emits whenever the `sbb-notification` begins the closing transition. | | -| `did-close` | `CustomEvent` | Emits whenever the `sbb-notification` is closed. | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------- | -------------------------------------------------------------------- | -------------- | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-notification` starts the opening transition. | | +| `didOpen` | `CustomEvent` | Emits whenever the `sbb-notification` is opened. | | +| `willClose` | `CustomEvent` | Emits whenever the `sbb-notification` begins the closing transition. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-notification` is closed. | | ## Slots diff --git a/src/components/option/option/option.ts b/src/components/option/option/option.ts index b770bcb011..42bf5f6bb4 100644 --- a/src/components/option/option/option.ts +++ b/src/components/option/option/option.ts @@ -37,15 +37,15 @@ export type SbbOptionVariant = 'autocomplete' | 'select'; * * @slot - Use the unnamed slot to add content to the option label. * @slot icon - Use this slot to provide an icon. If `icon-name` is set, a sbb-icon will be used. - * @event {CustomEvent} option-selection-change - Emits when the option selection status changes. - * @event {CustomEvent} option-selected - Emits when an option was selected by user. + * @event {CustomEvent} optionSelectionChange - Emits when the option selection status changes. + * @event {CustomEvent} optionSelected - Emits when an option was selected by user. */ @customElement('sbb-option') export class SbbOption extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - selectionChange: 'option-selection-change', - optionSelected: 'option-selected', + selectionChange: 'optionSelectionChange', + optionSelected: 'optionSelected', } as const; /** Value of the option. */ diff --git a/src/components/option/option/readme.md b/src/components/option/option/readme.md index 367875193b..7ee09cbe9a 100644 --- a/src/components/option/option/readme.md +++ b/src/components/option/option/readme.md @@ -75,10 +75,10 @@ If the label slot contains only a **text node**, it is possible to search for te ## Events -| Name | Type | Description | Inherited From | -| ------------------------- | ------------------- | ----------------------------------------------- | -------------- | -| `option-selection-change` | `CustomEvent` | Emits when the option selection status changes. | | -| `option-selected` | `CustomEvent` | Emits when an option was selected by user. | | +| Name | Type | Description | Inherited From | +| ----------------------- | ------------------- | ----------------------------------------------- | -------------- | +| `optionSelectionChange` | `CustomEvent` | Emits when the option selection status changes. | | +| `optionSelected` | `CustomEvent` | Emits when an option was selected by user. | | ## Slots diff --git a/src/components/radio-button/radio-button-group/radio-button-group.ts b/src/components/radio-button/radio-button-group/radio-button-group.ts index 2db5b1e81b..fc907be7b7 100644 --- a/src/components/radio-button/radio-button-group/radio-button-group.ts +++ b/src/components/radio-button/radio-button-group/radio-button-group.ts @@ -24,7 +24,7 @@ import style from './radio-button-group.scss?lit&inline'; * * @slot - Use the unnamed slot to add `sbb-radio-button` elements to the `sbb-radio-button-group`. * @slot error - Use this to provide a `sbb-form-error` to show an error message. - * @event {CustomEvent} did-change - Emits whenever the `sbb-radio-group` value changes. + * @event {CustomEvent} didChange - Deprecated. Only used for React. Will probably be removed once React 19 is available. Emits whenever the `sbb-radio-group` value changes. * @event {CustomEvent} change - Emits whenever the `sbb-radio-group` value changes. * @event {CustomEvent} input - Emits whenever the `sbb-radio-group` value changes. */ @@ -32,7 +32,7 @@ import style from './radio-button-group.scss?lit&inline'; export class SbbRadioButtonGroup extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - didChange: 'did-change', + didChange: 'didChange', change: 'change', input: 'input', } as const; @@ -174,7 +174,7 @@ export class SbbRadioButtonGroup extends LitElement { super.connectedCallback(); const signal = this._abort.signal; this.addEventListener( - 'state-change', + 'stateChange', (e: CustomEvent) => this._onRadioButtonSelect(e), { signal, diff --git a/src/components/radio-button/radio-button-group/readme.md b/src/components/radio-button/radio-button-group/readme.md index 64685642b7..0e2c6c1c78 100644 --- a/src/components/radio-button/radio-button-group/readme.md +++ b/src/components/radio-button/radio-button-group/readme.md @@ -81,11 +81,11 @@ In order to ensure readability for screen-readers, please provide an `aria-label ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------- | --------------------------------------------------- | -------------- | -| `did-change` | `CustomEvent` | Emits whenever the `sbb-radio-group` value changes. | | -| `change` | `CustomEvent` | Emits whenever the `sbb-radio-group` value changes. | | -| `input` | `CustomEvent` | Emits whenever the `sbb-radio-group` value changes. | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `didChange` | `CustomEvent` | Deprecated. Only used for React. Will probably be removed once React 19 is available. Emits whenever the `sbb-radio-group` value changes. | | +| `change` | `CustomEvent` | Emits whenever the `sbb-radio-group` value changes. | | +| `input` | `CustomEvent` | Emits whenever the `sbb-radio-group` value changes. | | ## Slots diff --git a/src/components/radio-button/radio-button/radio-button.ts b/src/components/radio-button/radio-button/radio-button.ts index 2e0f50d42e..9599ec33c1 100644 --- a/src/components/radio-button/radio-button/radio-button.ts +++ b/src/components/radio-button/radio-button/radio-button.ts @@ -46,8 +46,8 @@ const radioButtonObserverConfig: MutationObserverInit = { export class SbbRadioButton extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - stateChange: 'state-change', - radioButtonLoaded: 'radio-button-loaded', + stateChange: 'stateChange', + radioButtonLoaded: 'radioButtonLoaded', } as const; /** diff --git a/src/components/select/readme.md b/src/components/select/readme.md index 54069e05bb..935636606b 100644 --- a/src/components/select/readme.md +++ b/src/components/select/readme.md @@ -71,7 +71,7 @@ the selected values will be displayed in selection order, separated by a comma. Consumers can listen to the native `change`/`input` event on the `sbb-select` component to intercept the selection's change; the current value can be read from `event.target.value`. -Additionally `sbb-option` will emit `option-selected` when selected via user interaction. +Additionally `sbb-option` will emit `optionSelected` when selected via user interaction. ## Keyboard interaction @@ -122,15 +122,15 @@ Opened panel: ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------- | -------------------------------------------------------------------------------- | -------------- | -| `did-change` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | -| `change` | `CustomEvent` | Notifies that the component's value has changed. | | -| `input` | `CustomEvent` | Notifies that an option value has been selected. | | -| `will-open` | `CustomEvent` | Emits whenever the `sbb-select` starts the opening transition. | | -| `did-open` | `CustomEvent` | Emits whenever the `sbb-select` is opened. | | -| `will-close` | `CustomEvent` | Emits whenever the `sbb-select` begins the closing transition. | | -| `did-close` | `CustomEvent` | Emits whenever the `sbb-select` is closed. | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- | +| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | +| `change` | `CustomEvent` | Notifies that the component's value has changed. | | +| `input` | `CustomEvent` | Notifies that an option value has been selected. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-select` starts the opening transition. | | +| `didOpen` | `CustomEvent` | Emits whenever the `sbb-select` is opened. | | +| `willClose` | `CustomEvent` | Emits whenever the `sbb-select` begins the closing transition. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-select` is closed. | | ## Slots diff --git a/src/components/select/select.ts b/src/components/select/select.ts index f8446542c8..1ef93aaa04 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -32,26 +32,26 @@ export interface SelectChange { * It displays a panel with selectable options. * * @slot - Use the unnamed slot to add options. - * @event {CustomEvent} did-change - Deprecated. used for React. Will probably be removed once React 19 is available. + * @event {CustomEvent} didChange - Deprecated. used for React. Will probably be removed once React 19 is available. * @event {CustomEvent} change - Notifies that the component's value has changed. * @event {CustomEvent} input - Notifies that an option value has been selected. - * @event {CustomEvent} will-open - Emits whenever the `sbb-select` starts the opening transition. - * @event {CustomEvent} did-open - Emits whenever the `sbb-select` is opened. - * @event {CustomEvent} will-close - Emits whenever the `sbb-select` begins the closing transition. - * @event {CustomEvent} did-close - Emits whenever the `sbb-select` is closed. + * @event {CustomEvent} willOpen - Emits whenever the `sbb-select` starts the opening transition. + * @event {CustomEvent} didOpen - Emits whenever the `sbb-select` is opened. + * @event {CustomEvent} willClose - Emits whenever the `sbb-select` begins the closing transition. + * @event {CustomEvent} didClose - Emits whenever the `sbb-select` is closed. */ @customElement('sbb-select') export class SbbSelect extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - didChange: 'did-change', + didChange: 'didChange', change: 'change', input: 'input', - stateChange: 'state-change', - willOpen: 'will-open', - didOpen: 'did-open', - willClose: 'will-close', - didClose: 'did-close', + stateChange: 'stateChange', + willOpen: 'willOpen', + didOpen: 'didOpen', + willClose: 'willClose', + didClose: 'didClose', } as const; /** The value of the select component. If `multiple` is true, it's an array. */ @@ -244,7 +244,7 @@ export class SbbSelect extends LitElement { this._onValueChanged(this.value); } - this.addEventListener('option-selection-change', (e) => this._onOptionChanged(e), { signal }); + this.addEventListener('optionSelectionChange', (e) => this._onOptionChanged(e), { signal }); this.addEventListener( 'click', (e) => { diff --git a/src/components/selection-panel/readme.md b/src/components/selection-panel/readme.md index d1d363770e..22be1f6340 100644 --- a/src/components/selection-panel/readme.md +++ b/src/components/selection-panel/readme.md @@ -86,12 +86,12 @@ It's also possible to display the `sbb-selection-panel` without border by settin ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------------------------------- | ----------------------------------------------------------------- | -------------- | -| `will-open` | `CustomEvent` | Emits whenever the content section starts the opening transition. | | -| `did-open` | `CustomEvent` | Emits whenever the content section is opened. | | -| `will-close` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the content section begins the closing transition. | | -| `did-close` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the content section is closed. | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------------------------------- | ----------------------------------------------------------------- | -------------- | +| `willOpen` | `CustomEvent` | Emits whenever the content section starts the opening transition. | | +| `didOpen` | `CustomEvent` | Emits whenever the content section is opened. | | +| `willClose` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the content section begins the closing transition. | | +| `didClose` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the content section is closed. | | ## Slots diff --git a/src/components/selection-panel/selection-panel.ts b/src/components/selection-panel/selection-panel.ts index 7e009a54fb..7da4885be0 100644 --- a/src/components/selection-panel/selection-panel.ts +++ b/src/components/selection-panel/selection-panel.ts @@ -22,19 +22,19 @@ import '../divider'; * @slot - Use the unnamed slot to add `sbb-checkbox` or `sbb-radio-button` elements to the `sbb-selection-panel`. * @slot badge - Use this slot to provide a `sbb-card-badge` (optional). * @slot content - Use this slot to provide custom content for the panel (optional). - * @event {CustomEvent} will-open - Emits whenever the content section starts the opening transition. - * @event {CustomEvent} did-open - Emits whenever the content section is opened. - * @event {CustomEvent<{ closeTarget: HTMLElement }>} will-close - Emits whenever the content section begins the closing transition. - * @event {CustomEvent<{ closeTarget: HTMLElement }>} did-close - Emits whenever the content section is closed. + * @event {CustomEvent} willOpen - Emits whenever the content section starts the opening transition. + * @event {CustomEvent} didOpen - Emits whenever the content section is opened. + * @event {CustomEvent<{ closeTarget: HTMLElement }>} willClose - Emits whenever the content section begins the closing transition. + * @event {CustomEvent<{ closeTarget: HTMLElement }>} didClose - Emits whenever the content section is closed. */ @customElement('sbb-selection-panel') export class SbbSelectionPanel extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events: Record = { - willOpen: 'will-open', - didOpen: 'did-open', - willClose: 'will-close', - didClose: 'did-close', + willOpen: 'willOpen', + didOpen: 'didOpen', + willClose: 'willClose', + didClose: 'didClose', } as const; /** The background color of the panel. */ @@ -140,13 +140,13 @@ export class SbbSelectionPanel extends LitElement { super.connectedCallback(); const signal = this._abort.signal; this.addEventListener( - 'state-change', + 'stateChange', (e: CustomEvent) => this._onInputChange(e), { signal, passive: true }, ); - this.addEventListener('checkbox-loaded', () => this._updateSelectionPanel(), { signal }); - this.addEventListener('radio-button-loaded', () => this._updateSelectionPanel(), { signal }); + this.addEventListener('checkboxLoaded', () => this._updateSelectionPanel(), { signal }); + this.addEventListener('radioButtonLoaded', () => this._updateSelectionPanel(), { signal }); this._handlerRepository.connect(); } diff --git a/src/components/slider/readme.md b/src/components/slider/readme.md index 3f87411da2..db28ea83ef 100644 --- a/src/components/slider/readme.md +++ b/src/components/slider/readme.md @@ -84,10 +84,10 @@ The `sbb-slider` has the following behaviour on keypress when focused: ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------- | -------------------------------------------------------------------------------- | -------------- | -| `input` | `InputEvent` | | | -| `did-change` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- | +| `input` | `InputEvent` | | | +| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | ## Slots diff --git a/src/components/slider/slider.ts b/src/components/slider/slider.ts index 7b558027b7..4e4196b32a 100644 --- a/src/components/slider/slider.ts +++ b/src/components/slider/slider.ts @@ -15,13 +15,13 @@ import '../icon'; * * @slot prefix - Use this slot to render an icon on the left side of the input. * @slot suffix - Use this slot to render an icon on the right side of the input. - * @event {CustomEvent} did-change - Deprecated. used for React. Will probably be removed once React 19 is available. + * @event {CustomEvent} didChange - Deprecated. used for React. Will probably be removed once React 19 is available. */ @customElement('sbb-slider') export class SbbSlider extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - didChange: 'did-change', + didChange: 'didChange', } as const; /** Value for the inner HTMLInputElement. */ diff --git a/src/components/tabs/tab-group/readme.md b/src/components/tabs/tab-group/readme.md index 57b0adf417..9954050b16 100644 --- a/src/components/tabs/tab-group/readme.md +++ b/src/components/tabs/tab-group/readme.md @@ -55,9 +55,9 @@ It's possible to set the first selected tab using the `initialSelectedIndex` pro ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------- | ------------------------------------- | -------------- | -| `did-change` | `CustomEvent` | Emits an event on selected tab change | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------- | ------------------------------------- | -------------- | +| `didChange` | `CustomEvent` | Emits an event on selected tab change | | ## Slots diff --git a/src/components/tabs/tab-group/tab-group.e2e.ts b/src/components/tabs/tab-group/tab-group.e2e.ts index 8f16ee95a7..ba3ccfd393 100644 --- a/src/components/tabs/tab-group/tab-group.e2e.ts +++ b/src/components/tabs/tab-group/tab-group.e2e.ts @@ -56,7 +56,7 @@ describe('sbb-tab-group', () => { it('dispatches event on tab change', async () => { const tab = document.querySelector('sbb-tab-group > sbb-tab-title#sbb-tab-1') as SbbTabTitle; - const changeSpy = new EventSpy('did-change'); + const changeSpy = new EventSpy(SbbTabGroup.events.didChange); tab.click(); await waitForCondition(() => changeSpy.events.length === 1); diff --git a/src/components/tabs/tab-group/tab-group.stories.ts b/src/components/tabs/tab-group/tab-group.stories.ts index a04706ae6f..628be14519 100644 --- a/src/components/tabs/tab-group/tab-group.stories.ts +++ b/src/components/tabs/tab-group/tab-group.stories.ts @@ -221,7 +221,7 @@ const meta: Meta = { ], parameters: { actions: { - handles: [SbbTabGroup.events.selectedTabChanged], + handles: [SbbTabGroup.events.didChange], }, backgrounds: { disable: true, diff --git a/src/components/tabs/tab-group/tab-group.ts b/src/components/tabs/tab-group/tab-group.ts index 00c6b093af..4b3a0eccb3 100644 --- a/src/components/tabs/tab-group/tab-group.ts +++ b/src/components/tabs/tab-group/tab-group.ts @@ -44,13 +44,13 @@ let nextId = 0; * This is not correct: `Some text

Some other text

` * @slot tab-bar - When you provide the `sbb-tab-title` tag through the unnamed slot, * it will be automatically moved to this slot. You do not need to use it directly. - * @event {CustomEvent} did-change - Emits an event on selected tab change + * @event {CustomEvent} didChange - Emits an event on selected tab change */ @customElement('sbb-tab-group') export class SbbTabGroup extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - selectedTabChanged: 'did-change', + didChange: 'didChange', } as const; private _tabs: InterfaceSbbTabGroupTab[] = []; @@ -99,7 +99,7 @@ export class SbbTabGroup extends LitElement { */ private _selectedTabChanged: EventEmitter = new EventEmitter( this, - SbbTabGroup.events.selectedTabChanged, + SbbTabGroup.events.didChange, ); /** diff --git a/src/components/tag/tag-group/tag-group.ts b/src/components/tag/tag-group/tag-group.ts index 665135b47d..e5273c40c4 100644 --- a/src/components/tag/tag-group/tag-group.ts +++ b/src/components/tag/tag-group/tag-group.ts @@ -124,7 +124,7 @@ export class SbbTagGroup extends SlotChildObserver(LitElement) { super.connectedCallback(); const signal = this._abort.signal; this.addEventListener( - 'state-change', + 'stateChange', (e: CustomEvent) => this._handleStateChange(e), { signal, diff --git a/src/components/tag/tag/readme.md b/src/components/tag/tag/readme.md index 5ee312c5e2..5649385347 100644 --- a/src/components/tag/tag/readme.md +++ b/src/components/tag/tag/readme.md @@ -59,11 +59,11 @@ The state is reflected via `aria-pressed` attribute. ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------- | -------------------------------------------------------------------------------- | -------------- | -| `input` | `CustomEvent` | Input event emitter | | -| `did-change` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | -| `change` | `CustomEvent` | Change event emitter | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- | +| `input` | `CustomEvent` | Input event emitter | | +| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | +| `change` | `CustomEvent` | Change event emitter | | ## Slots diff --git a/src/components/tag/tag/tag.ts b/src/components/tag/tag/tag.ts index 85d6745155..a4bc2015cd 100644 --- a/src/components/tag/tag/tag.ts +++ b/src/components/tag/tag/tag.ts @@ -35,16 +35,16 @@ export type SbbTagStateChange = Extract< * @slot icon - Use this slot to display an icon at the component start, by providing a `sbb-icon` component. * @slot amount - Provide an amount to show it at the component end. * @event {CustomEvent} input - Input event emitter - * @event {CustomEvent} did-change - Deprecated. used for React. Will probably be removed once React 19 is available. + * @event {CustomEvent} didChange - Deprecated. used for React. Will probably be removed once React 19 is available. * @event {CustomEvent} change - Change event emitter */ @customElement('sbb-tag') export class SbbTag extends LitElement implements ButtonProperties { public static override styles: CSSResultGroup = style; public static readonly events = { - stateChange: 'state-change', + stateChange: 'stateChange', input: 'input', - didChange: 'did-change', + didChange: 'didChange', change: 'change', } as const; diff --git a/src/components/toast/readme.md b/src/components/toast/readme.md index b2861be65f..54b077a0b2 100644 --- a/src/components/toast/readme.md +++ b/src/components/toast/readme.md @@ -116,12 +116,12 @@ Unless strictly necessary, we advise you not to wrap it preventively and let the ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------- | ------------------------------------------------------------- | -------------- | -| `will-open` | `CustomEvent` | Emits whenever the `sbb-toast` starts the opening transition. | | -| `did-open` | `CustomEvent` | Emits whenever the `sbb-toast` is opened. | | -| `will-close` | `CustomEvent` | Emits whenever the `sbb-toast` begins the closing transition. | | -| `did-close` | `CustomEvent` | Emits whenever the `sbb-toast` is closed. | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------- | ------------------------------------------------------------- | -------------- | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-toast` starts the opening transition. | | +| `didOpen` | `CustomEvent` | Emits whenever the `sbb-toast` is opened. | | +| `willClose` | `CustomEvent` | Emits whenever the `sbb-toast` begins the closing transition. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-toast` is closed. | | ## Slots diff --git a/src/components/toast/toast.ts b/src/components/toast/toast.ts index bddb15beb2..60fd5416f7 100644 --- a/src/components/toast/toast.ts +++ b/src/components/toast/toast.ts @@ -35,19 +35,19 @@ const toastRefs = new Set(); * @slot - Use the unnamed slot to add content to the `sbb-toast`. * @slot icon - Assign a custom icon via slot. * @slot action - Provide a custom action for this toast. - * @event {CustomEvent} will-open - Emits whenever the `sbb-toast` starts the opening transition. - * @event {CustomEvent} did-open - Emits whenever the `sbb-toast` is opened. - * @event {CustomEvent} will-close - Emits whenever the `sbb-toast` begins the closing transition. - * @event {CustomEvent} did-close - Emits whenever the `sbb-toast` is closed. + * @event {CustomEvent} willOpen - Emits whenever the `sbb-toast` starts the opening transition. + * @event {CustomEvent} didOpen - Emits whenever the `sbb-toast` is opened. + * @event {CustomEvent} willClose - Emits whenever the `sbb-toast` begins the closing transition. + * @event {CustomEvent} didClose - Emits whenever the `sbb-toast` is closed. */ @customElement('sbb-toast') export class SbbToast extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - willOpen: 'will-open', - didOpen: 'did-open', - willClose: 'will-close', - didClose: 'did-close', + willOpen: 'willOpen', + didOpen: 'didOpen', + willClose: 'willClose', + didClose: 'didClose', } as const; /** diff --git a/src/components/toggle-check/readme.md b/src/components/toggle-check/readme.md index 793b39a1bb..c769251327 100644 --- a/src/components/toggle-check/readme.md +++ b/src/components/toggle-check/readme.md @@ -64,9 +64,9 @@ you can not provide it and then use `aria-label` to specify an appropriate label ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------- | -------------------------------------------------------------------------------- | -------------- | -| `did-change` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- | +| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | ## Slots diff --git a/src/components/toggle-check/toggle-check.ts b/src/components/toggle-check/toggle-check.ts index ee88fd16b2..cae600ef73 100644 --- a/src/components/toggle-check/toggle-check.ts +++ b/src/components/toggle-check/toggle-check.ts @@ -19,13 +19,13 @@ import '../icon'; * * @slot - Use the unnamed slot to add content to the toggle label. * @slot icon - Use this slot to provide an icon. If `icon-name` is set, a sbb-icon will be used. - * @event {CustomEvent} did-change - Deprecated. used for React. Will probably be removed once React 19 is available. + * @event {CustomEvent} didChange - Deprecated. used for React. Will probably be removed once React 19 is available. */ @customElement('sbb-toggle-check') export class SbbToggleCheck extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - didChange: 'did-change', + didChange: 'didChange', } as const; /** Whether the toggle-check is checked. */ diff --git a/src/components/toggle/toggle-option/toggle-option.ts b/src/components/toggle/toggle-option/toggle-option.ts index dd8820b389..9c015583bd 100644 --- a/src/components/toggle/toggle-option/toggle-option.ts +++ b/src/components/toggle/toggle-option/toggle-option.ts @@ -24,7 +24,7 @@ import style from './toggle-option.scss?lit&inline'; export class SbbToggleOption extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - stateChange: 'state-change', + stateChange: 'stateChange', } as const; /** diff --git a/src/components/toggle/toggle/readme.md b/src/components/toggle/toggle/readme.md index 1f03a834d8..5dfaf6bfc1 100644 --- a/src/components/toggle/toggle/readme.md +++ b/src/components/toggle/toggle/readme.md @@ -44,10 +44,10 @@ The component has two different sizes, `s` and `m` (default), which can be set u ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------- | ---------------------------------------- | -------------- | -| `did-change` | `CustomEvent` | Emits whenever the toggle value changes. | | -| `change` | `CustomEvent` | Emits whenever the toggle value changes. | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- | +| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | +| `change` | `CustomEvent` | Emits whenever the toggle value changes. | | ## Slots diff --git a/src/components/toggle/toggle/toggle.ts b/src/components/toggle/toggle/toggle.ts index 8d9b281c70..aa33cd768f 100644 --- a/src/components/toggle/toggle/toggle.ts +++ b/src/components/toggle/toggle/toggle.ts @@ -20,14 +20,14 @@ export type SbbToggleStateChange = Extract< * It can be used as a container for two `sbb-toggle-option`, acting as a toggle button. * * @slot - Use the unnamed slot to add `` elements to the toggle. - * @event {CustomEvent} did-change - Emits whenever the toggle value changes. + * @event {CustomEvent} didChange - Deprecated. used for React. Will probably be removed once React 19 is available. * @event {CustomEvent} change - Emits whenever the toggle value changes. */ @customElement('sbb-toggle') export class SbbToggle extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - didChange: 'did-change', + didChange: 'didChange', change: 'change', } as const; @@ -94,8 +94,8 @@ export class SbbToggle extends LitElement { } /** - * Emits whenever the toggle value changes. * @deprecated only used for React. Will probably be removed once React 19 is available. + * Emits whenever the toggle value changes. */ private _didChange: EventEmitter = new EventEmitter(this, SbbToggle.events.didChange, { bubbles: true, @@ -167,7 +167,7 @@ export class SbbToggle extends LitElement { const signal = this._abort.signal; this.addEventListener('input', () => this._handleInput(), { signal, passive: true }); this.addEventListener( - 'state-change', + 'stateChange', (e) => this._handleStateChange(e as CustomEvent), { signal, diff --git a/src/components/tooltip/tooltip/readme.md b/src/components/tooltip/tooltip/readme.md index 306b835881..f71d421059 100644 --- a/src/components/tooltip/tooltip/readme.md +++ b/src/components/tooltip/tooltip/readme.md @@ -128,12 +128,12 @@ that have an ARIA `role`. ## Events -| Name | Type | Description | Inherited From | -| ------------ | ------------------------------------------- | --------------------------------------------------------------- | -------------- | -| `will-open` | `CustomEvent` | Emits whenever the `sbb-tooltip` starts the opening transition. | | -| `did-open` | `CustomEvent` | Emits whenever the `sbb-tooltip` is opened. | | -| `will-close` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the `sbb-tooltip` begins the closing transition. | | -| `did-close` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the `sbb-tooltip` is closed. | | +| Name | Type | Description | Inherited From | +| ----------- | ------------------------------------------- | --------------------------------------------------------------- | -------------- | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-tooltip` starts the opening transition. | | +| `didOpen` | `CustomEvent` | Emits whenever the `sbb-tooltip` is opened. | | +| `willClose` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the `sbb-tooltip` begins the closing transition. | | +| `didClose` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the `sbb-tooltip` is closed. | | ## Slots diff --git a/src/components/tooltip/tooltip/tooltip.ts b/src/components/tooltip/tooltip/tooltip.ts index 2c45dc6d15..518e9df279 100644 --- a/src/components/tooltip/tooltip/tooltip.ts +++ b/src/components/tooltip/tooltip/tooltip.ts @@ -41,19 +41,19 @@ const tooltipsRef = new Set(); * It displays contextual information within a tooltip. * * @slot - Use the unnamed slot to add content into the tooltip. - * @event {CustomEvent} will-open - Emits whenever the `sbb-tooltip` starts the opening transition. - * @event {CustomEvent} did-open - Emits whenever the `sbb-tooltip` is opened. - * @event {CustomEvent<{ closeTarget: HTMLElement }>} will-close - Emits whenever the `sbb-tooltip` begins the closing transition. - * @event {CustomEvent<{ closeTarget: HTMLElement }>} did-close - Emits whenever the `sbb-tooltip` is closed. + * @event {CustomEvent} willOpen - Emits whenever the `sbb-tooltip` starts the opening transition. + * @event {CustomEvent} didOpen - Emits whenever the `sbb-tooltip` is opened. + * @event {CustomEvent<{ closeTarget: HTMLElement }>} willClose - Emits whenever the `sbb-tooltip` begins the closing transition. + * @event {CustomEvent<{ closeTarget: HTMLElement }>} didClose - Emits whenever the `sbb-tooltip` is closed. */ @customElement('sbb-tooltip') export class SbbTooltip extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { - willOpen: 'will-open', - didOpen: 'did-open', - willClose: 'will-close', - didClose: 'did-close', + willOpen: 'willOpen', + didOpen: 'didOpen', + willClose: 'willClose', + didClose: 'didClose', } as const; /** diff --git a/src/components/train/train-formation/train-formation.ts b/src/components/train/train-formation/train-formation.ts index 7eeeab044d..87fe5c05b6 100644 --- a/src/components/train/train-formation/train-formation.ts +++ b/src/components/train/train-formation/train-formation.ts @@ -54,8 +54,8 @@ export class SbbTrainFormation extends SlotChildObserver(LitElement) { public override connectedCallback(): void { super.connectedCallback(); const signal = this._abort.signal; - this.addEventListener('train-slot-change', (e) => this._readSectors(e), { signal }); - this.addEventListener('sector-change', (e) => this._readSectors(e), { signal }); + this.addEventListener('trainSlotChange', (e) => this._readSectors(e), { signal }); + this.addEventListener('sectorChange', (e) => this._readSectors(e), { signal }); this._handlerRepository.connect(); } diff --git a/src/components/train/train-wagon/train-wagon.e2e.ts b/src/components/train/train-wagon/train-wagon.e2e.ts index 144ce71cf3..87b99f5b6b 100644 --- a/src/components/train/train-wagon/train-wagon.e2e.ts +++ b/src/components/train/train-wagon/train-wagon.e2e.ts @@ -15,7 +15,7 @@ describe('sbb-train-wagon', () => { it('should emit sectorChange', async () => { element = await fixture(html``); - const sectorChangeSpy = new EventSpy('sector-change'); + const sectorChangeSpy = new EventSpy(SbbTrainWagon.events.sectorChange); element.sector = 'B'; await waitForCondition(() => sectorChangeSpy.events.length === 1); diff --git a/src/components/train/train-wagon/train-wagon.ts b/src/components/train/train-wagon/train-wagon.ts index a4e63c20d3..988f36ab0d 100644 --- a/src/components/train/train-wagon/train-wagon.ts +++ b/src/components/train/train-wagon/train-wagon.ts @@ -36,7 +36,7 @@ import style from './train-wagon.scss?lit&inline'; export class SbbTrainWagon extends SlotChildObserver(LitElement) { public static override styles: CSSResultGroup = style; public static readonly events = { - sectorChange: 'sector-change', + sectorChange: 'sectorChange', } as const; /** Wagon type. */ diff --git a/src/components/train/train/train.e2e.ts b/src/components/train/train/train.e2e.ts index d1365b618f..4f37aea3c4 100644 --- a/src/components/train/train/train.e2e.ts +++ b/src/components/train/train/train.e2e.ts @@ -22,7 +22,7 @@ describe('sbb-train', () => { `); - const trainSlotChangeSpy = new EventSpy('train-slot-change'); + const trainSlotChangeSpy = new EventSpy(SbbTrain.events.trainSlotChange); element.querySelector('sbb-train-wagon').remove(); await waitForLitRender(element); diff --git a/src/components/train/train/train.ts b/src/components/train/train/train.ts index 4d8a16d771..cc505c25f1 100644 --- a/src/components/train/train/train.ts +++ b/src/components/train/train/train.ts @@ -27,7 +27,7 @@ import '../../icon'; export class SbbTrain extends SlotChildObserver(LitElement) { public static override styles: CSSResultGroup = style; public static readonly events = { - trainSlotChange: 'train-slot-change', + trainSlotChange: 'trainSlotChange', } as const; /** General label for "driving direction". */ diff --git a/tools/generate-component/boilerplate/component.ts b/tools/generate-component/boilerplate/component.ts index d499b3ddc7..695effa1ce 100644 --- a/tools/generate-component/boilerplate/component.ts +++ b/tools/generate-component/boilerplate/component.ts @@ -7,13 +7,13 @@ import style from './__noPrefixName__.scss?lit&inline'; * Describe the purpose of the component with a single short sentence. * * @slot - Use the unnamed slot to add `sbb-TODO` elements. - * @event {CustomEvent} my-event-name - TODO: Document this event + * @event {CustomEvent} myEventName - TODO: Document this event */ @customElement('__name__') export class __nameUpperCase__ extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events: Record = { - myEventName: 'my-event-name', + myEventName: 'myEventName', } as const; /** myProp documentation */