🐛 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 <gerhard.hirschfeld@baloise.ch>
baloise · Jan 7, 2025 · 3145ebd · 3145ebd
1 parent 878e0a7
commit 3145ebd
Show file tree

Hide file tree

Showing 34 changed files with 118 additions and 176 deletions.
diff --git a/.changeset/selfish-ways-yell.md 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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<BalEvents.BalButtonDidRenderDetail>
 
-  @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
@@ -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
@@ -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,15 +288,15 @@ export class CheckboxGroup
     }
   }
 
-  @ListenTo('balFocus', { capture: true, target: 'document' })
+  @Listen('balFocus', { capture: true, target: 'document' })
   checkboxFocusListener(ev: CustomEvent<FocusEvent>) {
     const { target } = ev
     if (target && isDescendant(this.el, target) && hasTagName(target, 'bal-checkbox')) {
       stopEventBubbling(ev)
     }
   }
 
-  @ListenTo('balBlur', { capture: true, target: 'document' })
+  @Listen('balBlur', { capture: true, target: 'document' })
   checkboxBlurListener(ev: CustomEvent<FocusEvent>) {
     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
@@ -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<any>, 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<any>, 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
@@ -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,31 +238,31 @@ 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()
       await this.close()
     }
   }
 
-  @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) {
       await this.close()
     }
   }
 
-  @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)) {
       await this.close()
     }
   }
 
-  @ListenTo('balPopoverPrepare', { target: 'document' })
+  @Listen('balPopoverPrepare', { target: 'document' })
   async listenOnPopoverPrepare(ev: CustomEvent<string>) {
     // 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
@@ -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<File[]>, 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
@@ -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<BalEvents.BalInputSliderChangeDetail>
 
-  @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)) {