From 3145ebdffb236189ccd76cfe20e4ec1cf39acb63 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 7 Jan 2025 16:06:52 +0100 Subject: [PATCH] :bug: fix: update stencil to version 4.23.0 to fix the event issues (#1557) * Create PR for #1556 * fix: update stencil to 4.23.0 * chore: remove workaround * chore: fix build issue --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Gery Hirschfeld --- .changeset/selfish-ways-yell.md | 5 ++ libs/output-target-angular/package.json | 2 +- libs/output-target-react/package.json | 2 +- libs/output-target-vue/package.json | 2 +- libs/output-target-web/package.json | 2 +- package-lock.json | 18 ++--- package.json | 2 +- packages/core/package.json | 2 +- .../src/components/bal-button/bal-button.tsx | 16 ++++- .../components/bal-carousel/bal-carousel.tsx | 6 +- .../bal-checkbox-group/bal-checkbox-group.tsx | 10 +-- .../components/bal-checkbox/bal-checkbox.tsx | 6 +- .../core/src/components/bal-date/bal-date.tsx | 10 +-- .../bal-file-upload/bal-file-upload.tsx | 5 +- .../bal-input-slider/bal-input-slider.tsx | 7 +- .../bal-input-stepper/bal-input-stepper.tsx | 6 +- .../bal-input-date/bal-input-date.tsx | 6 +- .../src/components/bal-input/bal-input.tsx | 6 +- .../src/components/bal-modal/bal-modal.tsx | 11 ++- .../bal-nav-meta-bar/bal-nav-meta-bar.tsx | 5 +- .../core/src/components/bal-nav/bal-nav.tsx | 6 +- .../bal-number-input/bal-number-input.tsx | 6 +- .../bal-option-list/bal-option-list.tsx | 7 +- .../src/components/bal-option/bal-option.tsx | 4 +- .../components/bal-popover/bal-popover.tsx | 10 +-- .../src/components/bal-popup/bal-popup.tsx | 12 ++-- .../bal-radio-group/bal-radio-group.tsx | 12 ++-- .../src/components/bal-radio/bal-radio.tsx | 4 +- .../components/bal-segment/bal-segment.tsx | 8 +-- .../src/components/bal-select/bal-select.tsx | 8 +-- .../core/src/components/bal-tabs/bal-tabs.tsx | 8 +-- .../components/bal-textarea/bal-textarea.tsx | 6 +- .../bal-time-input/bal-time-input.tsx | 6 +- packages/core/src/utils/listen.ts | 68 ------------------- 34 files changed, 118 insertions(+), 176 deletions(-) create mode 100644 .changeset/selfish-ways-yell.md delete mode 100644 packages/core/src/utils/listen.ts diff --git a/.changeset/selfish-ways-yell.md b/.changeset/selfish-ways-yell.md new file mode 100644 index 0000000000..880a348422 --- /dev/null +++ b/.changeset/selfish-ways-yell.md @@ -0,0 +1,5 @@ +--- +'@baloise/ds-core': patch +--- + +**core**: update stencil to fix event issue diff --git a/libs/output-target-angular/package.json b/libs/output-target-angular/package.json index 1847319305..ea4008b97c 100644 --- a/libs/output-target-angular/package.json +++ b/libs/output-target-angular/package.json @@ -3,7 +3,7 @@ "version": "0.0.0", "private": true, "dependencies": { - "@stencil/core": "4.22.3", + "@stencil/core": "4.23.0", "tslib": "~2.3.0" }, "type": "commonjs", diff --git a/libs/output-target-react/package.json b/libs/output-target-react/package.json index b637b974f4..71803b9f09 100644 --- a/libs/output-target-react/package.json +++ b/libs/output-target-react/package.json @@ -4,7 +4,7 @@ "private": true, "dependencies": { "tslib": "~2.3.0", - "@stencil/core": "4.22.3" + "@stencil/core": "4.23.0" }, "peerDependencies": { "react": "~18.2.0", diff --git a/libs/output-target-vue/package.json b/libs/output-target-vue/package.json index 954604d6f6..e2b3a7177d 100644 --- a/libs/output-target-vue/package.json +++ b/libs/output-target-vue/package.json @@ -4,7 +4,7 @@ "private": true, "dependencies": { "tslib": "~2.3.0", - "@stencil/core": "4.22.3" + "@stencil/core": "4.23.0" }, "type": "commonjs", "main": "./dist/src/index.js", diff --git a/libs/output-target-web/package.json b/libs/output-target-web/package.json index b72ae55ab2..1e20cd3710 100644 --- a/libs/output-target-web/package.json +++ b/libs/output-target-web/package.json @@ -4,7 +4,7 @@ "private": true, "dependencies": { "tslib": "~2.3.0", - "@stencil/core": "4.22.3", + "@stencil/core": "4.23.0", "fs-extra": "11.2.0", "replace-in-file": "~7.1.0" }, diff --git a/package-lock.json b/package-lock.json index b6a6180d57..7f9c8929c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,7 +51,7 @@ "@nx/web": "~18.0.4", "@nxkit/style-dictionary": "~5.0.0", "@schematics/angular": "~15.0.0", - "@stencil/core": "4.22.3", + "@stencil/core": "4.23.0", "@stencil/sass": "~3.0.12", "@swc-node/register": "~1.8.0", "@swc/cli": "~0.1.62", @@ -348,7 +348,7 @@ "name": "@baloise/output-target-angular", "version": "0.0.0", "dependencies": { - "@stencil/core": "4.22.3", + "@stencil/core": "4.23.0", "tslib": "~2.3.0" } }, @@ -356,7 +356,7 @@ "name": "@baloise/output-target-react", "version": "0.0.0", "dependencies": { - "@stencil/core": "4.22.3", + "@stencil/core": "4.23.0", "tslib": "~2.3.0" }, "peerDependencies": { @@ -368,7 +368,7 @@ "name": "@baloise/output-target-vue", "version": "0.0.0", "dependencies": { - "@stencil/core": "4.22.3", + "@stencil/core": "4.23.0", "tslib": "~2.3.0" } }, @@ -376,7 +376,7 @@ "name": "@baloise/output-target-web", "version": "0.0.0", "dependencies": { - "@stencil/core": "4.22.3", + "@stencil/core": "4.23.0", "fs-extra": "11.2.0", "replace-in-file": "~7.1.0", "tslib": "~2.3.0" @@ -12158,9 +12158,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.22.3", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.22.3.tgz", - "integrity": "sha512-dYaletX938WgEA2oMROLdh8wpUn1MgBx2zg5kYqwuUR8aua4Gy9EqGQ3zBu1AvL5MzLlZC+lMlxe/g5Dg1ldpw==", + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.23.0.tgz", + "integrity": "sha512-9vI8ywhoqlaDEmrcntejrZ9X76Tddv2JyWakjVpqJAdDNXgf520sYkyjzGT0p8VJfPtSaKm6pMtl5sAH1r9cFg==", "bin": { "stencil": "bin/stencil" }, @@ -48705,7 +48705,7 @@ "@baloise/web-app-utils": "3.15.0", "@floating-ui/dom": "~1.6.3", "@popperjs/core": "~2.11.4", - "@stencil/core": "4.22.3", + "@stencil/core": "4.23.0", "big.js": "~6.2.1", "contactjs": "2.1.7", "filesize.js": "~2.0.0", diff --git a/package.json b/package.json index edf55671d3..0a447815c9 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "@nx/web": "~18.0.4", "@nxkit/style-dictionary": "~5.0.0", "@schematics/angular": "~15.0.0", - "@stencil/core": "4.22.3", + "@stencil/core": "4.23.0", "@stencil/sass": "~3.0.12", "@swc-node/register": "~1.8.0", "@swc/cli": "~0.1.62", diff --git a/packages/core/package.json b/packages/core/package.json index 90da098648..b43edf5b9b 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -33,7 +33,7 @@ "@baloise/web-app-utils": "3.15.0", "@floating-ui/dom": "~1.6.3", "@popperjs/core": "~2.11.4", - "@stencil/core": "4.22.3", + "@stencil/core": "4.23.0", "big.js": "~6.2.1", "contactjs": "2.1.7", "filesize.js": "~2.0.0", diff --git a/packages/core/src/components/bal-button/bal-button.tsx b/packages/core/src/components/bal-button/bal-button.tsx index 6f8685b33b..07af5dba14 100644 --- a/packages/core/src/components/bal-button/bal-button.tsx +++ b/packages/core/src/components/bal-button/bal-button.tsx @@ -1,7 +1,17 @@ -import { Component, h, Prop, Host, Event, EventEmitter, ComponentInterface, Element, State } from '@stencil/core' +import { + Component, + h, + Prop, + Host, + Event, + EventEmitter, + ComponentInterface, + Element, + State, + Listen, +} from '@stencil/core' import { Attributes, inheritAttributes } from '../../utils/attributes' import { rLCP } from '../../utils/helpers' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-button', @@ -159,7 +169,7 @@ export class Button implements ComponentInterface { */ @Event() balDidRender!: EventEmitter - @ListenTo('click', { capture: true, target: 'document' }) + @Listen('click', { capture: true, target: 'document' }) listenOnClick(ev: UIEvent) { if (this.disabled && ev.target && ev.target === this.el) { ev.preventDefault() diff --git a/packages/core/src/components/bal-carousel/bal-carousel.tsx b/packages/core/src/components/bal-carousel/bal-carousel.tsx index 74eae0c730..bb0f0dd3d4 100644 --- a/packages/core/src/components/bal-carousel/bal-carousel.tsx +++ b/packages/core/src/components/bal-carousel/bal-carousel.tsx @@ -9,6 +9,7 @@ import { Event, EventEmitter, State, + Listen, } from '@stencil/core' import { debounce, raf, rLCP } from '../../utils/helpers' import { BEM } from '../../utils/bem' @@ -26,7 +27,6 @@ import { BalResizeObserver, ListenToResize } from '../../utils/resize' import { getComputedWidth } from '../../utils/style' import { BalConfigState, BalLanguage, ListenToConfig, defaultConfig } from '../../utils/config' import { i18nControlLabel } from './bal-carousel.i18n' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-carousel', @@ -143,7 +143,7 @@ export class Carousel * ------------------------------------------------------ */ - @ListenTo('touchmove', { target: 'window', passive: false }) + @Listen('touchmove', { target: 'window', passive: false }) async blockVerticalScrolling(ev: any) { if (!this.scrollY && this.el?.contains(ev.target)) { stopEventBubbling(ev) @@ -177,7 +177,7 @@ export class Carousel this.itemsChanged() } - @ListenTo('keydown') + @Listen('keydown') listenToKeyDown(ev: KeyboardEvent) { if (this.htmlRole !== 'tablist') { if (ev.code === 'Tab') { diff --git a/packages/core/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx b/packages/core/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx index 59aa9c3ecc..21b66ac3cd 100644 --- a/packages/core/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx +++ b/packages/core/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx @@ -11,6 +11,7 @@ import { EventEmitter, Method, State, + Listen, } from '@stencil/core' import { stopEventBubbling } from '../../../utils/form-input' import { hasTagName, isDescendant } from '../../../utils/helpers' @@ -21,7 +22,6 @@ import { Loggable, Logger, LogInstance } from '../../../utils/log' import { BalMutationObserver, ListenToMutation } from '../../../utils/mutation' import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../../utils/form' import { BalFocusObserver, ListenToFocus } from '../../../utils/focus' -import { ListenTo } from 'packages/core/src/utils/listen' @Component({ tag: 'bal-checkbox-group', @@ -268,7 +268,7 @@ export class CheckboxGroup this.onOptionChange() } - @ListenTo('balChange', { capture: true, target: 'document' }) + @Listen('balChange', { capture: true, target: 'document' }) listenOnClick(ev: UIEvent) { if (this.control) { if (isDescendant(this.el, ev.target as HTMLElement)) { @@ -277,7 +277,7 @@ export class CheckboxGroup } } - @ListenTo('reset', { capture: true, target: 'document' }) + @Listen('reset', { capture: true, target: 'document' }) resetHandler(ev: UIEvent) { const formElement = ev.target as HTMLElement if (formElement?.contains(this.el)) { @@ -288,7 +288,7 @@ export class CheckboxGroup } } - @ListenTo('balFocus', { capture: true, target: 'document' }) + @Listen('balFocus', { capture: true, target: 'document' }) checkboxFocusListener(ev: CustomEvent) { const { target } = ev if (target && isDescendant(this.el, target) && hasTagName(target, 'bal-checkbox')) { @@ -296,7 +296,7 @@ export class CheckboxGroup } } - @ListenTo('balBlur', { capture: true, target: 'document' }) + @Listen('balBlur', { capture: true, target: 'document' }) checkboxBlurListener(ev: CustomEvent) { const { target } = ev if (target && isDescendant(this.el, target) && hasTagName(target, 'bal-checkbox')) { diff --git a/packages/core/src/components/bal-checkbox/bal-checkbox.tsx b/packages/core/src/components/bal-checkbox/bal-checkbox.tsx index c922c58b97..27e7e8cb54 100644 --- a/packages/core/src/components/bal-checkbox/bal-checkbox.tsx +++ b/packages/core/src/components/bal-checkbox/bal-checkbox.tsx @@ -8,6 +8,7 @@ import { Event, Method, State, + Listen, ComponentInterface, } from '@stencil/core' import { FormInput, inputSetBlur, inputSetFocus, stopEventBubbling } from '../../utils/form-input' @@ -20,7 +21,6 @@ import { Loggable, Logger, LogInstance } from '../../utils/log' import { FOCUS_KEYS } from '../../utils/focus-visible' import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form' import { ariaBooleanToString } from '../../utils/aria' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-checkbox', @@ -203,7 +203,7 @@ export class Checkbox implements ComponentInterface, FormInput, Loggable, B * ------------------------------------------------------ */ - @ListenTo('click', { capture: true, target: 'document' }) + @Listen('click', { capture: true, target: 'document' }) listenOnClick(ev: UIEvent) { if ( (this.disabled || this.readonly) && @@ -214,7 +214,7 @@ export class Checkbox implements ComponentInterface, FormInput, Loggable, B } } - @ListenTo('reset', { capture: true, target: 'document' }) + @Listen('reset', { capture: true, target: 'document' }) resetHandler(ev: UIEvent) { const formElement = ev.target as HTMLElement if (formElement?.contains(this.el)) { diff --git a/packages/core/src/components/bal-date/bal-date.tsx b/packages/core/src/components/bal-date/bal-date.tsx index 334520e452..d4da63be53 100644 --- a/packages/core/src/components/bal-date/bal-date.tsx +++ b/packages/core/src/components/bal-date/bal-date.tsx @@ -10,6 +10,7 @@ import { Event, EventEmitter, Watch, + Listen, } from '@stencil/core' import { isSpaceKey } from '../../utils/keyboard' import { i18nBalDate } from './bal-date.i18n' @@ -22,7 +23,6 @@ import { BalConfigState, BalLanguage, ListenToConfig, defaultConfig } from '../. import { debounceEvent } from '../../utils/helpers' import { BalAriaForm, defaultBalAriaForm, BalAriaFormLinking } from '../../utils/form' import { balFloatingUi } from '../../utils/floating-ui' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-date', @@ -238,7 +238,7 @@ export class Date implements ComponentInterface, Loggable, BalAriaFormLinking { * ------------------------------------------------------ */ - @ListenTo('keydown', { target: 'window' }) + @Listen('keydown', { target: 'window' }) async listenToKeydown(ev: KeyboardEvent) { if (this.isExpanded && (ev.key === 'Escape' || ev.key === 'Esc')) { ev.preventDefault() @@ -246,7 +246,7 @@ export class Date implements ComponentInterface, Loggable, BalAriaFormLinking { } } - @ListenTo('keyup', { target: 'window' }) + @Listen('keyup', { target: 'window' }) async listenOnKeyup(ev: KeyboardEvent) { // dismiss popup when focus next form control if (ev.key === 'Tab' && !this.el.contains(document.activeElement) && this.isExpanded) { @@ -254,7 +254,7 @@ export class Date implements ComponentInterface, Loggable, BalAriaFormLinking { } } - @ListenTo('click', { target: 'document' }) + @Listen('click', { target: 'document' }) async listenOnclick(ev: UIEvent) { // when clicked outside dismiss popup if (this.isExpanded && !this.el.contains(ev.target as Node)) { @@ -262,7 +262,7 @@ export class Date implements ComponentInterface, Loggable, BalAriaFormLinking { } } - @ListenTo('balPopoverPrepare', { target: 'document' }) + @Listen('balPopoverPrepare', { target: 'document' }) async listenOnPopoverPrepare(ev: CustomEvent) { // dismiss this popover, because another will open if (this.inputId !== ev.detail) { diff --git a/packages/core/src/components/bal-file-upload/bal-file-upload.tsx b/packages/core/src/components/bal-file-upload/bal-file-upload.tsx index 86f8f43526..1f842244a9 100644 --- a/packages/core/src/components/bal-file-upload/bal-file-upload.tsx +++ b/packages/core/src/components/bal-file-upload/bal-file-upload.tsx @@ -1,5 +1,5 @@ import { areArraysEqual } from '../../utils/array' -import { Component, Host, h, Element, State, Prop, Event, EventEmitter, Watch, Method } from '@stencil/core' +import { Component, Host, h, Element, State, Prop, Event, EventEmitter, Watch, Method, Listen } from '@stencil/core' import { FormInput, inputHandleBlur, @@ -14,7 +14,6 @@ import { FileListComponent } from './components/file-list' import { toFileArray, toFileList } from './utils/file-list.util' import { validateFileArray } from './utils/file-validation.util' import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-file-upload', @@ -196,7 +195,7 @@ export class FileUpload implements FormInput, BalAriaFormLinking { private resetHandlerTimer?: NodeJS.Timeout - @ListenTo('reset', { capture: true, target: 'document' }) + @Listen('reset', { capture: true, target: 'document' }) resetHandler(ev: UIEvent) { const formElement = ev.target as HTMLElement if (formElement?.contains(this.el)) { diff --git a/packages/core/src/components/bal-input-slider/bal-input-slider.tsx b/packages/core/src/components/bal-input-slider/bal-input-slider.tsx index 3868628e3b..c81888d02e 100644 --- a/packages/core/src/components/bal-input-slider/bal-input-slider.tsx +++ b/packages/core/src/components/bal-input-slider/bal-input-slider.tsx @@ -1,10 +1,9 @@ -import { Component, h, Host, Element, Prop, EventEmitter, Event, Method, Watch, State } from '@stencil/core' +import { Component, h, Host, Element, Prop, EventEmitter, Event, Method, Watch, State, Listen } from '@stencil/core' import isNil from 'lodash.isnil' import { debounceEvent } from '../../utils/helpers' import { stopEventBubbling } from '../../utils/form-input' import { BEM } from '../../utils/bem' import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-input-slider', @@ -116,7 +115,7 @@ export class InputSlider implements BalAriaFormLinking { */ @Event() balChange!: EventEmitter - @ListenTo('click', { capture: true, target: 'document' }) + @Listen('click', { capture: true, target: 'document' }) listenOnClick(ev: UIEvent) { if ((this.disabled || this.readonly) && ev.target && ev.target === this.el) { stopEventBubbling(ev) @@ -125,7 +124,7 @@ export class InputSlider implements BalAriaFormLinking { private resetHandlerTimer?: NodeJS.Timeout - @ListenTo('reset', { capture: true, target: 'document' }) + @Listen('reset', { capture: true, target: 'document' }) resetHandler(ev: UIEvent) { const formElement = ev.target as HTMLElement if (formElement?.contains(this.el)) { diff --git a/packages/core/src/components/bal-input-stepper/bal-input-stepper.tsx b/packages/core/src/components/bal-input-stepper/bal-input-stepper.tsx index 33294ce7f9..7e99f6a041 100644 --- a/packages/core/src/components/bal-input-stepper/bal-input-stepper.tsx +++ b/packages/core/src/components/bal-input-stepper/bal-input-stepper.tsx @@ -10,6 +10,7 @@ import { EventEmitter, Method, State, + Listen, } from '@stencil/core' import Big from 'big.js' import { formatLocaleNumber } from '../../utils/number' @@ -28,7 +29,6 @@ import { BEM } from '../../utils/bem' import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form' import { i18nBalInputStepper } from './bal-input-stepper.i18n' import { LogInstance, Loggable, Logger } from '../../utils/log' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-input-stepper', @@ -145,12 +145,12 @@ export class InputStepper */ @Event() balBlur!: EventEmitter - @ListenTo('click', { capture: true, target: 'document' }) + @Listen('click', { capture: true, target: 'document' }) listenOnClick(ev: UIEvent) { inputListenOnClick(this, ev) } - @ListenTo('reset', { capture: true, target: 'document' }) + @Listen('reset', { capture: true, target: 'document' }) resetHandler(ev: UIEvent) { const formElement = ev.target as HTMLElement if (formElement?.contains(this.el)) { diff --git a/packages/core/src/components/bal-input/bal-input-date/bal-input-date.tsx b/packages/core/src/components/bal-input/bal-input-date/bal-input-date.tsx index 32c24b3db5..1d82a02d4a 100644 --- a/packages/core/src/components/bal-input/bal-input-date/bal-input-date.tsx +++ b/packages/core/src/components/bal-input/bal-input-date/bal-input-date.tsx @@ -10,6 +10,7 @@ import { Method, State, Watch, + Listen, } from '@stencil/core' import { BEM } from '../../../utils/bem' import { Loggable, Logger, LogInstance } from '../../../utils/log' @@ -19,7 +20,6 @@ import { hasParent } from '../../../utils/helpers' import { DateMask, MaskComponentAdapter } from '../../../utils/mask' import { inputSetBlur, inputSetFocus } from '../../../utils/form-input' import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../../utils/form' -import { ListenTo } from 'packages/core/src/utils/listen' @Component({ tag: 'bal-input-date', @@ -196,12 +196,12 @@ export class InputDate implements ComponentInterface, Loggable, BalConfigObserve this.maskAdapter.bindConfigChanged(config) } - @ListenTo('reset', { capture: true, target: 'document' }) + @Listen('reset', { capture: true, target: 'document' }) resetHandler(event: UIEvent) { this.maskAdapter.bindFormReset(event) } - @ListenTo('click', { capture: true, target: 'document' }) + @Listen('click', { capture: true, target: 'document' }) listenOnClick(event: MouseEvent) { this.maskAdapter.bindGlobalClick(event) } diff --git a/packages/core/src/components/bal-input/bal-input.tsx b/packages/core/src/components/bal-input/bal-input.tsx index 44629c3480..d0464c73ff 100644 --- a/packages/core/src/components/bal-input/bal-input.tsx +++ b/packages/core/src/components/bal-input/bal-input.tsx @@ -6,6 +6,7 @@ import { EventEmitter, h, Host, + Listen, Method, Prop, State, @@ -44,7 +45,6 @@ import { ACTION_KEYS, isCtrlOrCommandKey, NUMBER_KEYS } from '../../utils/consta import { BEM } from '../../utils/bem' import { Loggable, Logger, LogInstance } from '../../utils/log' import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-input', @@ -253,14 +253,14 @@ export class Input implements ComponentInterface, FormInput, */ @Event() balChange!: EventEmitter - @ListenTo('click', { capture: true, target: 'document' }) + @Listen('click', { capture: true, target: 'document' }) listenOnClick(ev: UIEvent) { inputListenOnClick(this, ev) } private resetHandlerTimer?: NodeJS.Timeout - @ListenTo('reset', { capture: true, target: 'document' }) + @Listen('reset', { capture: true, target: 'document' }) resetHandler(ev: UIEvent) { const formElement = ev.target as HTMLElement if (formElement?.contains(this.el)) { diff --git a/packages/core/src/components/bal-modal/bal-modal.tsx b/packages/core/src/components/bal-modal/bal-modal.tsx index 475cedc74c..9adcf922bd 100644 --- a/packages/core/src/components/bal-modal/bal-modal.tsx +++ b/packages/core/src/components/bal-modal/bal-modal.tsx @@ -1,4 +1,4 @@ -import { Component, Host, h, State, Method, Prop, Event, EventEmitter, Element, writeTask } from '@stencil/core' +import { Component, Host, h, State, Method, Prop, Event, EventEmitter, Element, writeTask, Listen } from '@stencil/core' import { dismiss, eventMethod, prepareOverlay } from '../../utils/overlays/overlays' import { attachComponent, detachComponent } from '../../utils/framework-delegate' import { OverlayEventDetail, OverlayInterface } from './bal-modal.type' @@ -6,7 +6,6 @@ import { deepReady, wait } from '../../utils/helpers' import { getClassMap } from '../../utils/css-classes' import { BalScrollHandler } from '../../utils/scroll' import { balBrowser } from '../../utils/browser' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-modal', @@ -229,7 +228,7 @@ export class Modal implements OverlayInterface { return eventMethod(this.el, 'balModalWillDismiss') } - @ListenTo('click') + @Listen('click') async onClickCloseButton(ev: MouseEvent) { if (this.isClosable && this.presented && ev && ev.target) { const element = ev.target as HTMLElement @@ -243,17 +242,17 @@ export class Modal implements OverlayInterface { } } - @ListenTo('mousedown') + @Listen('mousedown') async onMouseDown(ev: MouseEvent) { this.isClickedOutsideOnMouseDown = this.isClickedOutside(ev) } - @ListenTo('mouseup') + @Listen('mouseup') async onMouseUp(ev: MouseEvent) { this.isClickedOutsideOnMouseUp = this.isClickedOutside(ev) } - @ListenTo('keyup', { target: 'document' }) + @Listen('keyup', { target: 'document' }) async handleKeyUp(ev: KeyboardEvent) { const modals = Array.from(document.querySelectorAll('bal-modal')).filter(el => el.hasAttribute('aria-presented')) const numbers = modals diff --git a/packages/core/src/components/bal-nav/bal-nav-meta-bar/bal-nav-meta-bar.tsx b/packages/core/src/components/bal-nav/bal-nav-meta-bar/bal-nav-meta-bar.tsx index f0fb781e99..b571943ee7 100644 --- a/packages/core/src/components/bal-nav/bal-nav-meta-bar/bal-nav-meta-bar.tsx +++ b/packages/core/src/components/bal-nav/bal-nav-meta-bar/bal-nav-meta-bar.tsx @@ -1,8 +1,7 @@ -import { Component, h, ComponentInterface, Host, Element, Prop, State } from '@stencil/core' +import { Component, h, ComponentInterface, Host, Element, Prop, State, Listen } from '@stencil/core' import { BEM } from '../../../utils/bem' import { LogInstance, Loggable, Logger } from '../../../utils/log' import { balBrowser } from '../../../utils/browser' -import { ListenTo } from 'packages/core/src/utils/listen' @Component({ tag: 'bal-nav-meta-bar', @@ -53,7 +52,7 @@ export class NavMetaBar implements ComponentInterface, Loggable { * ------------------------------------------------------ */ - @ListenTo('scroll', { target: 'window', passive: true }) + @Listen('scroll', { target: 'window', passive: true }) handleScroll() { if (balBrowser.hasWindow && balBrowser.hasDocument && this.position === 'sticky-top') { const maxScrollHeight = document.body.scrollHeight - document.body.clientHeight diff --git a/packages/core/src/components/bal-nav/bal-nav.tsx b/packages/core/src/components/bal-nav/bal-nav.tsx index 18f1cf1342..29f1baae9b 100644 --- a/packages/core/src/components/bal-nav/bal-nav.tsx +++ b/packages/core/src/components/bal-nav/bal-nav.tsx @@ -10,6 +10,7 @@ import { Method, EventEmitter, Event, + Listen, } from '@stencil/core' import { BEM } from '../../utils/bem' import { LogInstance, Loggable, Logger } from '../../utils/log' @@ -32,7 +33,6 @@ import { NavMenuLinkItem } from './models/bal-nav-menu-link-item' import { NavLinkItem } from './models/bal-nav-link-item' import { balBrowser } from '../../utils/browser' import { waitAfterIdleCallback, waitForComponent } from '../../utils/helpers' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-nav', @@ -135,7 +135,7 @@ export class Nav * ------------------------------------------------------ */ - @ListenTo('balChange') + @Listen('balChange') listenToPopupChanges(event: BalEvents.BalPopupChange) { const target = event.target if (target && target.nodeName === 'BAL-POPUP') { @@ -155,7 +155,7 @@ export class Nav } } - @ListenTo('click', { target: 'document', passive: true }) + @Listen('click', { target: 'document', passive: true }) async clickOnOutside(ev: UIEvent) { if (this.isDesktop) { if (this.hasRenderedWithFlyoutActive) { diff --git a/packages/core/src/components/bal-number-input/bal-number-input.tsx b/packages/core/src/components/bal-number-input/bal-number-input.tsx index e047998fb3..7314271f4a 100644 --- a/packages/core/src/components/bal-number-input/bal-number-input.tsx +++ b/packages/core/src/components/bal-number-input/bal-number-input.tsx @@ -10,6 +10,7 @@ import { Prop, State, Watch, + Listen, } from '@stencil/core' import { ListenToConfig, @@ -51,7 +52,6 @@ import { import isNil from 'lodash.isnil' import isEmpty from 'lodash.isempty' import isNaN from 'lodash.isnan' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-number-input', @@ -238,14 +238,14 @@ export class NumberInput * ------------------------------------------------------ */ - @ListenTo('click', { capture: true, target: 'document' }) + @Listen('click', { capture: true, target: 'document' }) listenOnClick(ev: UIEvent) { inputListenOnClick(this, ev) } private resetHandlerTimer?: NodeJS.Timeout - @ListenTo('reset', { capture: true, target: 'document' }) + @Listen('reset', { capture: true, target: 'document' }) resetHandler(ev: UIEvent) { const formElement = ev.target as HTMLElement if (formElement?.contains(this.el)) { diff --git a/packages/core/src/components/bal-option-list/bal-option-list.tsx b/packages/core/src/components/bal-option-list/bal-option-list.tsx index c1f5f80514..8b2f417afc 100644 --- a/packages/core/src/components/bal-option-list/bal-option-list.tsx +++ b/packages/core/src/components/bal-option-list/bal-option-list.tsx @@ -1,4 +1,4 @@ -import { Component, h, ComponentInterface, Host, Element, Prop, Watch, Method, State } from '@stencil/core' +import { Component, h, ComponentInterface, Host, Element, Prop, Watch, Method, State, Listen } from '@stencil/core' import isNil from 'lodash.isnil' import { Attributes, inheritAttributes } from '../../utils/attributes' import { BEM } from '../../utils/bem' @@ -7,7 +7,6 @@ import { Loggable, Logger, LogInstance } from '../../utils/log' import { includes, startsWith } from '../bal-select/utils/utils' import { BalAriaForm, defaultBalAriaForm } from '../../utils/form' import { BalOption } from '../../utils/dropdown' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-option-list', @@ -95,7 +94,7 @@ export class OptionList implements ComponentInterface, Loggable { * ------------------------------------------------------ */ - @ListenTo('balOptionFocus', { passive: true }) + @Listen('balOptionFocus', { passive: true }) listenToMouseEnter(ev: BalEvents.BalOptionFocus) { const options = this.options const indexToFocus = this.getOptionIndex(options, ev.detail.value) @@ -104,7 +103,7 @@ export class OptionList implements ComponentInterface, Loggable { } } - @ListenTo('balOptionChange', { passive: false }) + @Listen('balOptionChange', { passive: false }) listenToOptionChange({ detail }: BalEvents.BalOptionFocus) { if (!this.multiple) { this.options.filter(option => option.value !== detail.value).forEach(option => (option.selected = false)) diff --git a/packages/core/src/components/bal-option/bal-option.tsx b/packages/core/src/components/bal-option/bal-option.tsx index 321860d667..6f2f09c95a 100644 --- a/packages/core/src/components/bal-option/bal-option.tsx +++ b/packages/core/src/components/bal-option/bal-option.tsx @@ -9,6 +9,7 @@ import { EventEmitter, Method, State, + Listen, } from '@stencil/core' import { BEM } from '../../utils/bem' import { Loggable, Logger, LogInstance } from '../../utils/log' @@ -17,7 +18,6 @@ import { BalElementStateInfo, BalElementStateObserver, ListenToElementStates } f import { stopEventBubbling } from '../../utils/form-input' import { BalElementStateListener } from '../../utils/element-states/element-states.listener' import { BalOption } from '../../utils/dropdown' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-option', @@ -114,7 +114,7 @@ export class Option implements ComponentInterface, Loggable, BalElementStateObse * ------------------------------------------------------ */ - @ListenTo('mouseenter') + @Listen('mouseenter') listenToMouseEnter() { const { label, value, selected, disabled, hidden } = this if (!hidden && !disabled) { diff --git a/packages/core/src/components/bal-popover/bal-popover.tsx b/packages/core/src/components/bal-popover/bal-popover.tsx index 8f46915ae8..933390fdd2 100644 --- a/packages/core/src/components/bal-popover/bal-popover.tsx +++ b/packages/core/src/components/bal-popover/bal-popover.tsx @@ -9,6 +9,7 @@ import { Event, EventEmitter, State, + Listen, ComponentInterface, } from '@stencil/core' import { createPopper, Instance } from '@popperjs/core' @@ -18,7 +19,6 @@ import { OffsetModifier } from '@popperjs/core/lib/modifiers/offset' import { PreventOverflowModifier } from '@popperjs/core/lib/modifiers/preventOverflow' import { LogInstance, Loggable, Logger } from '../../utils/log' import { BalBreakpointObserver, BalBreakpoints, ListenToBreakpoints, balBreakpoints } from '../../utils/breakpoints' -import { ListenTo } from '../../utils/listen' export interface PopoverPresentOptions { force: boolean @@ -224,7 +224,7 @@ export class Popover implements ComponentInterface, Loggable, BalBreakpointObser * ------------------------------------------------------ */ - @ListenTo('balPopoverPrepare', { target: 'document' }) + @Listen('balPopoverPrepare', { target: 'document' }) handlePopoverPrepare(ev: CustomEvent) { const popoverId = ev.detail if (this.popoverId !== popoverId) { @@ -232,7 +232,7 @@ export class Popover implements ComponentInterface, Loggable, BalBreakpointObser } } - @ListenTo('click', { target: 'document' }) + @Listen('click', { target: 'document' }) async clickOnOutside(ev: UIEvent) { if (this.active) { if (!this.el.contains(ev.target as Node)) { @@ -245,7 +245,7 @@ export class Popover implements ComponentInterface, Loggable, BalBreakpointObser } } - @ListenTo('keydown', { target: 'window' }) + @Listen('keydown', { target: 'window' }) handleKeyUp(ev: KeyboardEvent) { if (this.active && (ev.key === 'Escape' || ev.key === 'Esc')) { ev.preventDefault() @@ -253,7 +253,7 @@ export class Popover implements ComponentInterface, Loggable, BalBreakpointObser } } - @ListenTo('keyup', { target: 'document' }) + @Listen('keyup', { target: 'document' }) async tabOutside(ev: KeyboardEvent) { if (ev.key === 'Tab' && !this.el.contains(document.activeElement) && this.active) { await this.toggle() diff --git a/packages/core/src/components/bal-popup/bal-popup.tsx b/packages/core/src/components/bal-popup/bal-popup.tsx index 0f32822f37..17ef71afb8 100644 --- a/packages/core/src/components/bal-popup/bal-popup.tsx +++ b/packages/core/src/components/bal-popup/bal-popup.tsx @@ -9,6 +9,7 @@ import { Watch, Method, EventEmitter, + Listen, Event, } from '@stencil/core' import { isEscapeKey } from '../../utils/keyboard' @@ -27,7 +28,6 @@ import { debounce } from '../../utils/helpers' import { LogInstance, Loggable, Logger } from '../../utils/log' import { VariantRenderer } from './variants/variant.renderer' import { focusableQueryString } from '../../utils/focus-visible' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-popup', @@ -212,7 +212,7 @@ export class Popup implements ComponentInterface, PopupComponentInterface, Logga private debouncedGlobalClick = debounce((trigger: HTMLElement) => this.notifyGlobalClick(trigger), 10) - @ListenTo('click', { target: 'window' }) + @Listen('click', { target: 'window' }) async listenOnGlobalClick(ev: MouseEvent): Promise { const target = ev.target as HTMLElement const trigger = target.closest('[bal-popup]') @@ -225,7 +225,7 @@ export class Popup implements ComponentInterface, PopupComponentInterface, Logga } } - @ListenTo('keydown', { target: 'document' }) + @Listen('keydown', { target: 'document' }) async listenOnKeyDown(ev: KeyboardEvent) { if (this.activeClosable && this.presented && isEscapeKey(ev)) { stopEventBubbling(ev) @@ -233,17 +233,17 @@ export class Popup implements ComponentInterface, PopupComponentInterface, Logga } } - @ListenTo('mousedown') + @Listen('mousedown') async listenOnMouseDown(ev: MouseEvent) { this.isClickedOutsideOnMouseDown = this.onBackdropClick(ev) } - @ListenTo('mouseup') + @Listen('mouseup') async listenOnMouseUp(ev: MouseEvent) { this.isClickedOutsideOnMouseUp = this.onBackdropClick(ev) } - @ListenTo('click') + @Listen('click') async listenOnComponentClick() { if ( this.presented && diff --git a/packages/core/src/components/bal-radio/bal-radio-group/bal-radio-group.tsx b/packages/core/src/components/bal-radio/bal-radio-group/bal-radio-group.tsx index a224848654..ca3c947eb4 100644 --- a/packages/core/src/components/bal-radio/bal-radio-group/bal-radio-group.tsx +++ b/packages/core/src/components/bal-radio/bal-radio-group/bal-radio-group.tsx @@ -9,6 +9,7 @@ import { Watch, ComponentInterface, Method, + Listen, State, } from '@stencil/core' import { stopEventBubbling } from '../../../utils/form-input' @@ -20,7 +21,6 @@ import { inheritAttributes } from '../../../utils/attributes' import { BalMutationObserver, ListenToMutation } from '../../../utils/mutation' import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../../utils/form' import { BalFocusObserver, ListenToFocus } from '../../../utils/focus' -import { ListenTo } from 'packages/core/src/utils/listen' @Component({ tag: 'bal-radio-group', @@ -253,14 +253,14 @@ export class RadioGroup this.onOptionChange() } - @ListenTo('balChange', { capture: true, target: 'document' }) + @Listen('balChange', { capture: true, target: 'document' }) listenOnClick(ev: UIEvent) { if (isDescendant(this.el, ev.target as HTMLElement)) { stopEventBubbling(ev) } } - @ListenTo('balFocus', { capture: true, target: 'document' }) + @Listen('balFocus', { capture: true, target: 'document' }) radioFocusListener(ev: CustomEvent) { const { target } = ev if (target && isDescendant(this.el, target) && hasTagName(target, 'bal-radio')) { @@ -268,7 +268,7 @@ export class RadioGroup } } - @ListenTo('balBlur', { capture: true, target: 'document' }) + @Listen('balBlur', { capture: true, target: 'document' }) radioBlurListener(ev: CustomEvent) { const { target } = ev if (target && isDescendant(this.el, target) && hasTagName(target, 'bal-radio')) { @@ -276,7 +276,7 @@ export class RadioGroup } } - @ListenTo('reset', { capture: true, target: 'document' }) + @Listen('reset', { capture: true, target: 'document' }) resetListener(ev: UIEvent) { const formElement = ev.target as HTMLElement if (formElement?.contains(this.el)) { @@ -284,7 +284,7 @@ export class RadioGroup } } - @ListenTo('keydown', { target: 'document' }) + @Listen('keydown', { target: 'document' }) onKeydown(ev: any) { if (ev.target && !this.el.contains(ev.target)) { return diff --git a/packages/core/src/components/bal-radio/bal-radio.tsx b/packages/core/src/components/bal-radio/bal-radio.tsx index bbfab22290..3e5050c45c 100644 --- a/packages/core/src/components/bal-radio/bal-radio.tsx +++ b/packages/core/src/components/bal-radio/bal-radio.tsx @@ -8,6 +8,7 @@ import { Event, Method, ComponentInterface, + Listen, State, } from '@stencil/core' import { isDescendant } from '../../utils/helpers' @@ -20,7 +21,6 @@ import { stopEventBubbling } from '../../utils/form-input' import { isSpaceKey } from '../../utils/keyboard' import { BalElementStateInfo } from '../../utils/element-states' import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-radio', @@ -182,7 +182,7 @@ export class Radio implements ComponentInterface, BalElementStateInfo, Loggable, * ------------------------------------------------------ */ - @ListenTo('click', { capture: true, target: 'document' }) + @Listen('click', { capture: true, target: 'document' }) listenOnClick(ev: UIEvent) { if ( (this.disabled || this.readonly) && diff --git a/packages/core/src/components/bal-segment/bal-segment.tsx b/packages/core/src/components/bal-segment/bal-segment.tsx index 98d04077bc..13ab2604ad 100644 --- a/packages/core/src/components/bal-segment/bal-segment.tsx +++ b/packages/core/src/components/bal-segment/bal-segment.tsx @@ -10,6 +10,7 @@ import { Watch, State, writeTask, + Listen, Method, } from '@stencil/core' import { BEM } from '../../utils/bem' @@ -32,7 +33,6 @@ import { isDescendant, raf } from '../../utils/helpers' import { BalBreakpointObserver, BalBreakpoints, ListenToBreakpoints } from '../../utils/breakpoints' import { BalFocusObserver, ListenToFocus } from '../../utils/focus' import { defaultBalAriaForm, BalAriaForm } from '../../utils/form' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-segment', @@ -173,7 +173,7 @@ export class Segment implements ComponentInterface, BalWindowResizeObserver, Bal this.balBlur.emit(ev) } - @ListenTo('balWillAnimate', { target: 'window' }) + @Listen('balWillAnimate', { target: 'window' }) listenToDidAnimate(ev: UIEvent) { if (ev && ev.target && isDescendant(ev.target as HTMLElement, this.el)) { const childRect = this.el.getBoundingClientRect() @@ -206,12 +206,12 @@ export class Segment implements ComponentInterface, BalWindowResizeObserver, Bal } } - @ListenTo('keydown', { target: 'document' }) + @Listen('keydown', { target: 'document' }) listenOnKeyDownOutside() { this.keyboardMode = true } - @ListenTo('keydown') + @Listen('keydown') listenOnKeyDown(ev: KeyboardEvent) { this.keyboardMode = FOCUS_KEYS.includes(ev.key) let forceChange = false diff --git a/packages/core/src/components/bal-select/bal-select.tsx b/packages/core/src/components/bal-select/bal-select.tsx index e38771f4da..7d269a99b0 100644 --- a/packages/core/src/components/bal-select/bal-select.tsx +++ b/packages/core/src/components/bal-select/bal-select.tsx @@ -9,6 +9,7 @@ import { Event, Method, Element, + Listen, ComponentInterface, } from '@stencil/core' import isNil from 'lodash.isnil' @@ -33,7 +34,6 @@ import { stopEventBubbling } from '../../utils/form-input' import { BEM } from '../../utils/bem' import { Loggable, Logger, LogInstance } from '../../utils/log' import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form' -import { ListenTo } from '../../utils/listen' export interface BalOptionController extends BalOptionValue { id: string @@ -308,7 +308,7 @@ export class Select implements ComponentInterface, Loggable, BalAriaFormLinking * ------------------------------------------------------ */ - @ListenTo('click', { capture: true, target: 'document' }) + @Listen('click', { capture: true, target: 'document' }) listenOnClick(ev: UIEvent) { if (this.disabled && ev.target && ev.target === this.el) { preventDefault(ev) @@ -317,7 +317,7 @@ export class Select implements ComponentInterface, Loggable, BalAriaFormLinking private resetHandlerTimer?: NodeJS.Timeout - @ListenTo('reset', { capture: true, target: 'document' }) + @Listen('reset', { capture: true, target: 'document' }) resetHandler(ev: UIEvent) { const formElement = ev.target as HTMLElement if (formElement?.contains(this.el)) { @@ -338,7 +338,7 @@ export class Select implements ComponentInterface, Loggable, BalAriaFormLinking } } - @ListenTo('keydown', { target: 'window' }) + @Listen('keydown', { target: 'window' }) async handleKeyDown(ev: KeyboardEvent) { if (this.isPopoverOpen) { if (isArrowDownKey(ev) || isArrowUpKey(ev)) { diff --git a/packages/core/src/components/bal-tabs/bal-tabs.tsx b/packages/core/src/components/bal-tabs/bal-tabs.tsx index 6c97a1da27..6a28ee6052 100644 --- a/packages/core/src/components/bal-tabs/bal-tabs.tsx +++ b/packages/core/src/components/bal-tabs/bal-tabs.tsx @@ -9,6 +9,7 @@ import { Method, Prop, Watch, + Listen, ComponentInterface, } from '@stencil/core' import { areArraysEqual } from '../../utils/array' @@ -38,7 +39,6 @@ import { AccordionState } from '../../interfaces' import { BalResizeObserver, ListenToResize } from '../../utils/resize' import { TabNav } from './components/tab-nav' import { toKebabCase } from '../../utils/string' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-tabs', @@ -276,18 +276,18 @@ export class Tabs this.animateLine() } - @ListenTo('balWillAnimate', { target: 'window' }) + @Listen('balWillAnimate', { target: 'window' }) listenToWillAnimate(ev: UIEvent) { isChildOfEventTarget(ev, this.el, () => this.animateLine()) } - @ListenTo('balDidAnimate', { target: 'window' }) + @Listen('balDidAnimate', { target: 'window' }) listenToDidAnimate(ev: UIEvent) { isChildOfEventTarget(ev, this.el, () => this.animateLine()) this.isUsedInNavbar(ev) } - @ListenTo('keydown') + @Listen('keydown') listenToKeyDown(ev: KeyboardEvent) { if (this.isTabList) { if (this.vertical !== false) { diff --git a/packages/core/src/components/bal-textarea/bal-textarea.tsx b/packages/core/src/components/bal-textarea/bal-textarea.tsx index 595dbc09c7..55e8cd51bb 100644 --- a/packages/core/src/components/bal-textarea/bal-textarea.tsx +++ b/packages/core/src/components/bal-textarea/bal-textarea.tsx @@ -10,6 +10,7 @@ import { Watch, ComponentInterface, State, + Listen, } from '@stencil/core' import { FormInput, @@ -28,7 +29,6 @@ import { debounceEvent } from '../../utils/helpers' import { inheritAttributes } from '../../utils/attributes' import { BEM } from '../../utils/bem' import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-textarea', @@ -174,14 +174,14 @@ export class Textarea implements ComponentInterface, FormInput - @ListenTo('click', { capture: true, target: 'document' }) + @Listen('click', { capture: true, target: 'document' }) listenOnClick(ev: UIEvent) { inputListenOnClick(this, ev) } private resetHandlerTimer?: NodeJS.Timeout - @ListenTo('reset', { capture: true, target: 'document' }) + @Listen('reset', { capture: true, target: 'document' }) resetHandler(ev: UIEvent) { const formElement = ev.target as HTMLElement if (formElement?.contains(this.el)) { diff --git a/packages/core/src/components/bal-time-input/bal-time-input.tsx b/packages/core/src/components/bal-time-input/bal-time-input.tsx index 7109e84694..befb836db3 100644 --- a/packages/core/src/components/bal-time-input/bal-time-input.tsx +++ b/packages/core/src/components/bal-time-input/bal-time-input.tsx @@ -10,6 +10,7 @@ import { Prop, EventEmitter, Watch, + Listen, } from '@stencil/core' import isNil from 'lodash.isnil' import { @@ -39,7 +40,6 @@ import { BEM } from '../../utils/bem' import { i18nBalTimeInput } from './bal-time-input.i18n' import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form' import { LogInstance, Loggable, Logger } from '../../utils/log' -import { ListenTo } from '../../utils/listen' @Component({ tag: 'bal-time-input', @@ -143,14 +143,14 @@ export class TimeInput */ @Event() balClick!: EventEmitter - @ListenTo('click', { capture: true, target: 'document' }) + @Listen('click', { capture: true, target: 'document' }) listenOnClick(ev: UIEvent) { inputListenOnClick(this, ev) } private resetHandlerTimer?: NodeJS.Timeout - @ListenTo('reset', { capture: true, target: 'document' }) + @Listen('reset', { capture: true, target: 'document' }) resetHandler(ev: UIEvent) { const formElement = ev.target as HTMLElement if (formElement?.contains(this.el)) { diff --git a/packages/core/src/utils/listen.ts b/packages/core/src/utils/listen.ts deleted file mode 100644 index 3f88234fb8..0000000000 --- a/packages/core/src/utils/listen.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { ComponentInterface } from '@stencil/core' -import { addEventListener, removeEventListener } from './helpers' -import { balBrowser } from './browser' - -export interface ListenOptions { - target?: ListenTargetOptions - capture?: boolean - passive?: boolean -} - -export type ListenTargetOptions = 'document' | 'window' - -/** - * This decorator replaces the @Listen from stencil since - * they have issue with connecting and disconnecting web-components. - */ -export function ListenTo(eventName: string, opts: ListenOptions = {}) { - return function (target: ComponentInterface, propertyKey: string, _descriptor: PropertyDescriptor) { - const { connectedCallback, disconnectedCallback } = target - const { capture, passive } = opts - const options = { capture, passive } - const callback = target[propertyKey] - - /** - * Define const keys for binding the target - * and callback to the web component - */ - const boundPropertyKey = `__${propertyKey}Bound` - const boundEL = `__elBound` - - target.connectedCallback = function () { - connectedCallback && connectedCallback.call(this) - - if (this.el) { - /** - * Bind target element to the web component so we can - * add and remove the event listener - */ - if (opts.target === 'document' && balBrowser.hasDocument) { - this[boundEL] = document - } else if (opts.target === 'window' && balBrowser.hasWindow) { - this[boundEL] = window - } else { - this[boundEL] = this.el - } - /** - * Bind event listener callback function to the web component - * so we can add and remove the event listener - */ - this[boundPropertyKey] = callback.bind(this) - /** - * Add event listener - */ - if (this[boundEL] && callback) { - addEventListener(this[boundEL], eventName, this[boundPropertyKey], options) - } - } - } - - target.disconnectedCallback = function () { - disconnectedCallback && disconnectedCallback.call(this) - - if (this[boundEL] && callback) { - removeEventListener(this[boundEL], eventName, this[boundPropertyKey], options) - } - } - } -}