diff --git a/src/elements/core/eventing/forward-event.ts b/src/elements/core/eventing/forward-event.ts index e6bfc3496b..54ba802c64 100644 --- a/src/elements/core/eventing/forward-event.ts +++ b/src/elements/core/eventing/forward-event.ts @@ -1,9 +1,16 @@ /** - * Forwards an event to the host element provided. - * This way, an event triggered in the ShadowDOM can cross its boundary and can be listened on the host component. + * Forwards an event to the element provided. + * This way, an event triggered in the Shadow DOM can cross its boundary and can be listened on e.g. the host component. */ -export function forwardEventToHost(event: Event, host: HTMLElement | Document): void { +export function forwardEvent(event: Event, element: HTMLElement | Document): void { const eventConstructor = Object.getPrototypeOf(event).constructor; const copiedEvent: Event = new eventConstructor(event.type, event); - host.dispatchEvent(copiedEvent); + element.dispatchEvent(copiedEvent); } + +/** + * Forwards an event to the host element provided. + * This way, an event triggered in the ShadowDOM can cross its boundary and can be listened on the host component. + * @deprecated will be removed with next major version, use forwardEvent as alternative + */ +export const forwardEventToHost = forwardEvent; diff --git a/src/elements/datepicker/datepicker/datepicker.ts b/src/elements/datepicker/datepicker/datepicker.ts index 1e23d0c3dc..3010af67a3 100644 --- a/src/elements/datepicker/datepicker/datepicker.ts +++ b/src/elements/datepicker/datepicker/datepicker.ts @@ -13,7 +13,7 @@ import { SbbConnectedAbortController, SbbLanguageController } from '../../core/c import { type DateAdapter, defaultDateAdapter } from '../../core/datetime.js'; import { forceType } from '../../core/decorators.js'; import { findInput, findReferencedElement } from '../../core/dom.js'; -import { EventEmitter, forwardEventToHost } from '../../core/eventing.js'; +import { EventEmitter, forwardEvent } from '../../core/eventing.js'; import { i18nDateChangedTo, i18nDatePickerPlaceholder } from '../../core/i18n.js'; import type { SbbDateLike, SbbValidationChangeEvent } from '../../core/interfaces.js'; import type { SbbDatepickerButton } from '../common.js'; @@ -243,7 +243,7 @@ class SbbDatepickerElement extends LitElement { input.addEventListener( 'input', (e) => { - forwardEventToHost(e, this); + forwardEvent(e, this); this._parseInput(); }, options, diff --git a/src/elements/dialog/dialog-content/dialog-content.ts b/src/elements/dialog/dialog-content/dialog-content.ts index a1eae203fe..d724d3a457 100644 --- a/src/elements/dialog/dialog-content/dialog-content.ts +++ b/src/elements/dialog/dialog-content/dialog-content.ts @@ -2,7 +2,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit'; import { html, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { forwardEventToHost } from '../../core/eventing.js'; +import { forwardEvent } from '../../core/eventing.js'; import style from './dialog-content.scss?lit&inline'; @@ -18,7 +18,7 @@ class SbbDialogContentElement extends LitElement { protected override render(): TemplateResult { return html` -
forwardEventToHost(e, document)}> +
forwardEvent(e, document)}>
`; diff --git a/src/elements/file-selector/common/file-selector-common.ts b/src/elements/file-selector/common/file-selector-common.ts index 835dd4f68c..0451e0beb8 100644 --- a/src/elements/file-selector/common/file-selector-common.ts +++ b/src/elements/file-selector/common/file-selector-common.ts @@ -9,7 +9,7 @@ import { sbbInputModalityDetector } from '../../core/a11y.js'; import { SbbLanguageController } from '../../core/controllers.js'; import { forceType } from '../../core/decorators.js'; import { isLean } from '../../core/dom.js'; -import { EventEmitter, forwardEventToHost } from '../../core/eventing.js'; +import { EventEmitter, forwardEvent } from '../../core/eventing.js'; import { i18nFileSelectorButtonLabel, i18nFileSelectorCurrentlySelected, @@ -183,7 +183,7 @@ export const SbbFileSelectorCommonElementMixin =
-
forwardEventToHost(e, document)} - > +
forwardEvent(e, document)}> diff --git a/src/elements/menu/menu/menu.ts b/src/elements/menu/menu/menu.ts index 33fba34dca..e449fdc043 100644 --- a/src/elements/menu/menu/menu.ts +++ b/src/elements/menu/menu/menu.ts @@ -23,7 +23,7 @@ import { isZeroAnimationDuration, SbbScrollHandler, } from '../../core/dom.js'; -import { forwardEventToHost } from '../../core/eventing.js'; +import { forwardEvent } from '../../core/eventing.js'; import { SbbNamedSlotListMixin } from '../../core/mixins.js'; import { getElementPosition, @@ -415,7 +415,7 @@ class SbbMenuElement extends SbbNamedSlotListMixin< >
this._closeOnInteractiveElementClick(event)} - @scroll=${(e: Event) => forwardEventToHost(e, document)} + @scroll=${(e: Event) => forwardEvent(e, document)} class="sbb-menu__content" > ${this.listChildren.length diff --git a/src/elements/overlay/overlay.ts b/src/elements/overlay/overlay.ts index 307dac8f1f..008fc6df64 100644 --- a/src/elements/overlay/overlay.ts +++ b/src/elements/overlay/overlay.ts @@ -6,7 +6,7 @@ import { html, unsafeStatic } from 'lit/static-html.js'; import { getFirstFocusableElement, setModalityOnNextFocus } from '../core/a11y.js'; import { forceType } from '../core/decorators.js'; import { isZeroAnimationDuration } from '../core/dom.js'; -import { EventEmitter, forwardEventToHost } from '../core/eventing.js'; +import { EventEmitter, forwardEvent } from '../core/eventing.js'; import { i18nCloseDialog, i18nGoBack } from '../core/i18n.js'; import { overlayRefs, SbbOverlayBaseElement } from './overlay-base-element.js'; @@ -201,10 +201,7 @@ class SbbOverlayElement extends SbbOverlayBaseElement {
${this.backButton ? backButton : nothing} ${closeButton}
-
forwardEventToHost(e, document)} - > +
forwardEvent(e, document)}> forwardEventToHost(event, this), - { signal: this._abortController.signal }, - ); + this._inputElement.addEventListener('input', (event: Event) => forwardEvent(event, this), { + signal: this._abortController.signal, + }); this._inputElement.addEventListener( 'keydown', (event: KeyboardEvent) => this._preventCharInsert(event), @@ -196,7 +194,7 @@ class SbbTimeInputElement extends LitElement { /** Emits the change event. */ private _emitChange(event: Event): void { - forwardEventToHost(event, this); + forwardEvent(event, this); this._didChange.emit(); }