@furystack/shades-common-components 5.0.20 → 7.0.0

package/esm/services/noty-service.spec.js

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { NotyService } from './noty-service.js';
+import { using } from '@furystack/utils';
+describe('NotyService', () => {
+    it('Should add and removea noty', () => {
+        using(new NotyService(), (notyService) => {
+            expect(notyService.getNotyList()).toEqual([]);
+            const exampleNoty = {
+                type: 'info',
+                title: 'Test',
+                body: 'Test',
+            };
+            notyService.emit('onNotyAdded', exampleNoty);
+            expect(notyService.getNotyList()).toEqual([exampleNoty]);
+            notyService.emit('onNotyRemoved', exampleNoty);
+            expect(notyService.getNotyList()).toEqual([]);
+        });
+    });
+});
+//# sourceMappingURL=noty-service.spec.js.map

package/esm/services/noty-service.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"noty-service.spec.js","sourceRoot":"","sources":["../../src/services/noty-service.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAExC,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACrC,KAAK,CAAC,IAAI,WAAW,EAAE,EAAE,CAAC,WAAW,EAAE,EAAE;YACvC,MAAM,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;YAE7C,MAAM,WAAW,GAAc;gBAC7B,IAAI,EAAE,MAAM;gBACZ,KAAK,EAAE,MAAM;gBACb,IAAI,EAAE,MAAM;aACb,CAAA;YAED,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAA;YAE5C,MAAM,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAA;YAExD,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC,CAAA;YAE9C,MAAM,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;QAC/C,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-common-components",
-  "version": "5.0.20",
+  "version": "7.0.0",
   "description": "",
   "type": "module",
   "scripts": {
@@ -32,13 +32,13 @@
   "license": "GPL-2.0",
   "devDependencies": {
     "typescript": "^5.4.2",
-    "vitest": "^1.3.1"
+    "vitest": "^1.4.0"
   },
   "dependencies": {
-    "@furystack/core": "^12.0.18",
-    "@furystack/inject": "^8.1.8",
-    "@furystack/shades": "^8.1.1",
-    "@furystack/utils": "^4.0.17",
+    "@furystack/core": "^14.0.0",
+    "@furystack/inject": "^10.0.0",
+    "@furystack/shades": "^10.0.0",
+    "@furystack/utils": "^6.0.0",
     "path-to-regexp": "^6.2.1",
     "semaphore-async-await": "^1.5.1"
   },

package/src/components/command-palette/command-palette-input.tsx

@@ -3,40 +3,38 @@ import { ThemeProviderService } from '../../services/theme-provider-service.js'
 import { promisifyAnimation } from '../../utils/promisify-animation.js'
 import type { CommandPaletteManager } from './command-palette-manager.js'
 
+const updateComponent = async (element: HTMLElement, isOpened: boolean) => {
+  const input = element.firstChild as HTMLInputElement | null
+  if (input) {
+    if (isOpened) {
+      input.value = ''
+      await promisifyAnimation(element, [{ width: '0%' }, { width: '100%' }], {
+        duration: 300,
+        fill: 'forwards',
+        easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
+      })
+      input.focus()
+    } else {
+      await promisifyAnimation(element, [{ width: '100%' }, { width: '0%' }], {
+        duration: 300,
+        fill: 'forwards',
+        easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
+      })
+      input.value = ''
+    }
+  }
+}
+
 export const CommandPaletteInput = Shade<{ manager: CommandPaletteManager }>({
   shadowDomName: 'shades-command-palette-input',
   render: ({ element, props, injector, useObservable }) => {
     const { theme } = injector.getInstance(ThemeProviderService)
     const { manager } = props
 
-    useObservable(
-      'isOpened',
-      manager.isOpened,
-      async (isOpened) => {
-        const input = element.firstChild as HTMLInputElement | null
-        if (input) {
-          if (isOpened) {
-            input.value = ''
-            await promisifyAnimation(element, [{ width: '0%' }, { width: '100%' }], {
-              duration: 300,
-              fill: 'forwards',
-              easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
-            })
-            input.focus()
-          } else {
-            await promisifyAnimation(element, [{ width: '100%' }, { width: '0%' }], {
-              duration: 300,
-              fill: 'forwards',
-              easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
-            })
-            input.value = ''
-          }
-        }
-      },
-      true,
-    )
-
-    element.style.width = manager.isOpened.getValue() ? '100%' : '0%'
+    const [isCurrentlyOpened] = useObservable('isOpened', manager.isOpened, {
+      onChange: (newValue) => updateComponent(element, newValue),
+    })
+    element.style.width = isCurrentlyOpened ? '100%' : '0%'
     element.style.overflow = 'hidden'
     return (
       <input

package/src/components/command-palette/command-palette-suggestion-list.tsx

@@ -10,46 +10,50 @@ export const CommandPaletteSuggestionList = Shade<{ manager: CommandPaletteManag
     const { theme } = injector.getInstance(ThemeProviderService)
 
     const [suggestions] = useObservable('suggestions', props.manager.currentSuggestions)
-    const [selectedIndex] = useObservable('selectedIndex', props.manager.selectedIndex, (idx) => {
-      ;([...element.querySelectorAll('.suggestion-item')] as HTMLDivElement[]).map((s, i) => {
-        if (i === idx) {
-          s.style.background = theme.background.paper
-          s.style.fontWeight = 'bolder'
-        } else {
-          s.style.background = theme.background.default
-          s.style.fontWeight = 'normal'
-        }
-      })
+    const [selectedIndex] = useObservable('selectedIndex', props.manager.selectedIndex, {
+      onChange: (idx) => {
+        ;([...element.querySelectorAll('.suggestion-item')] as HTMLDivElement[]).map((s, i) => {
+          if (i === idx) {
+            s.style.background = theme.background.paper
+            s.style.fontWeight = 'bolder'
+          } else {
+            s.style.background = theme.background.default
+            s.style.fontWeight = 'normal'
+          }
+        })
+      },
     })
 
-    const [isOpenedAtRender] = useObservable('isOpenedAtRender', props.manager.isOpened, async (isOpened) => {
-      const container = element.firstElementChild as HTMLDivElement
-      if (isOpened) {
-        container.style.display = 'initial'
-        container.style.zIndex = '1'
-        container.style.width = `calc(${Math.round(
-          element.parentElement?.getBoundingClientRect().width || 200,
-        )}px - 3em)`
-        await promisifyAnimation(
-          container,
-          [
-            { opacity: 0, transform: 'translate(0, -50px)' },
-            { opacity: 1, transform: 'translate(0, 0)' },
-          ],
-          { fill: 'forwards', duration: 500 },
-        )
-      } else {
-        await promisifyAnimation(
-          container,
-          [
-            { opacity: 1, transform: 'translate(0, 0)' },
-            { opacity: 0, transform: 'translate(0, -50px)' },
-          ],
-          { fill: 'forwards', duration: 200 },
-        )
-        container.style.zIndex = '-1'
-        container.style.display = 'none'
-      }
+    const [isOpenedAtRender] = useObservable('isOpenedAtRender', props.manager.isOpened, {
+      onChange: async (isOpened) => {
+        const container = element.firstElementChild as HTMLDivElement
+        if (isOpened) {
+          container.style.display = 'initial'
+          container.style.zIndex = '1'
+          container.style.width = `calc(${Math.round(
+            element.parentElement?.getBoundingClientRect().width || 200,
+          )}px - 3em)`
+          await promisifyAnimation(
+            container,
+            [
+              { opacity: 0, transform: 'translate(0, -50px)' },
+              { opacity: 1, transform: 'translate(0, 0)' },
+            ],
+            { fill: 'forwards', duration: 500 },
+          )
+        } else {
+          await promisifyAnimation(
+            container,
+            [
+              { opacity: 1, transform: 'translate(0, 0)' },
+              { opacity: 0, transform: 'translate(0, -50px)' },
+            ],
+            { fill: 'forwards', duration: 200 },
+          )
+          container.style.zIndex = '-1'
+          container.style.display = 'none'
+        }
+      },
     })
 
     return (

package/src/components/command-palette/index.tsx

@@ -29,69 +29,73 @@ export const CommandPalette = Shade<CommandPaletteProps>({
 
     useDisposable('clickAwayService', () => new ClickAwayService(element, () => manager.isOpened.setValue(false)))
 
-    const [isLoadingAtRender] = useObservable('isLoading', manager.isLoading, async (isLoading) => {
-      const loader = element.querySelector('.loader-container')
-      if (isLoading) {
-        promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
-          duration: 100,
-          fill: 'forwards',
-        })
-      } else {
-        promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
-          duration: 100,
-          fill: 'forwards',
-        })
-      }
-    })
-
-    const [isOpenedAtRender, setIsOpened] = useObservable('isOpened', manager.isOpened, (isOpened) => {
-      {
-        const suggestions = element.querySelector('.close-suggestions')
-        const postControls = element.querySelector('.post-controls')
-        const inputContainer = element.querySelector('.input-container') as HTMLDivElement
-        if (isOpened) {
-          promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
-            duration: 500,
+    const [isLoadingAtRender] = useObservable('isLoading', manager.isLoading, {
+      onChange: async (isLoading) => {
+        const loader = element.querySelector('.loader-container')
+        if (isLoading) {
+          promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
+            duration: 100,
             fill: 'forwards',
           })
-
-          promisifyAnimation(postControls, [{ width: '0px' }, { width: '50px' }], {
+        } else {
+          promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
             duration: 100,
             fill: 'forwards',
           })
+        }
+      },
+    })
 
-          promisifyAnimation(
-            inputContainer,
-            [{ background: 'transparent' }, { background: theme.background.default }],
-            {
+    const [isOpenedAtRender, setIsOpened] = useObservable('isOpened', manager.isOpened, {
+      onChange: (isOpened) => {
+        {
+          const suggestions = element.querySelector('.close-suggestions')
+          const postControls = element.querySelector('.post-controls')
+          const inputContainer = element.querySelector('.input-container') as HTMLDivElement
+          if (isOpened) {
+            promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
               duration: 500,
               fill: 'forwards',
-              easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
-            },
-          )
-        } else {
-          promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
-            duration: 500,
-            fill: 'forwards',
-          })
+            })
 
-          promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
-            duration: 500,
-            fill: 'forwards',
-            delay: 300,
-          })
+            promisifyAnimation(postControls, [{ width: '0px' }, { width: '50px' }], {
+              duration: 100,
+              fill: 'forwards',
+            })
+
+            promisifyAnimation(
+              inputContainer,
+              [{ background: 'transparent' }, { background: theme.background.default }],
+              {
+                duration: 500,
+                fill: 'forwards',
+                easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
+              },
+            )
+          } else {
+            promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
+              duration: 500,
+              fill: 'forwards',
+            })
 
-          promisifyAnimation(
-            inputContainer,
-            [{ background: theme.background.default }, { background: 'transparent' }],
-            {
-              duration: 300,
+            promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
+              duration: 500,
               fill: 'forwards',
-              easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
-            },
-          )
+              delay: 300,
+            })
+
+            promisifyAnimation(
+              inputContainer,
+              [{ background: theme.background.default }, { background: 'transparent' }],
+              {
+                duration: 300,
+                fill: 'forwards',
+                easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
+              },
+            )
+          }
         }
-      }
+      },
     })
 
     return (

package/src/components/data-grid/data-grid-row.tsx

@@ -39,14 +39,14 @@ export const DataGridRow: <T>(props: DataGridRowProps<T>, children: ChildrenList
       }
     }
 
-    const [selection] = useObservable('isSelected', service.selection, attachSelectedStyles, true)
+    // TODO: getLast is elmiminated, do we need it?
+    const [selection] = useObservable('isSelected', service.selection, { onChange: attachSelectedStyles })
 
     attachSelectedStyles(selection)
 
-    const [focus] = useObservable(
-      'focus',
-      service.focusedEntry,
-      (newEntry) => {
+    // TODO: getLast is elmiminated, do we need it?
+    const [focus] = useObservable('focus', service.focusedEntry, {
+      onChange: (newEntry) => {
         if (newEntry === props.entry) {
           attachStyles(element, {
             style: props.focusedRowStyle || {
@@ -84,8 +84,7 @@ export const DataGridRow: <T>(props: DataGridRowProps<T>, children: ChildrenList
           })
         }
       },
-      true,
-    )
+    })
 
     element.style.display = 'table-row'
     element.style.cursor = 'default'

package/src/components/data-grid/header.tsx

@@ -61,14 +61,16 @@ export const OrderButton = Shade<{ collectionService: CollectionService<any>; fi
 const SearchButton = Shade<{ service: CollectionService<any>; fieldName: string; onclick: () => void }>({
   shadowDomName: 'data-grid-search-button',
   render: ({ props, useObservable, element }) => {
-    const [queryState] = useObservable('currentFilterState', props.service.querySettings, (currentQueryState) => {
-      const currentValue = (currentQueryState.filter?.[props.fieldName] as any)?.$regex || ''
+    const [queryState] = useObservable('currentFilterState', props.service.querySettings, {
+      onChange: (currentQueryState) => {
+        const currentValue = (currentQueryState.filter?.[props.fieldName] as any)?.$regex || ''
 
-      const button = element.querySelector('button') as HTMLInputElement
-      button.innerHTML = currentValue ? '🔍' : '🔎'
-      button.style.textShadow = currentValue
-        ? '1px 1px 20px rgba(235,225,45,0.9), 1px 1px 12px rgba(235,225,45,0.9), 0px 0px 3px  rgba(255,200,145,0.6)'
-        : 'none'
+        const button = element.querySelector('button') as HTMLInputElement
+        button.innerHTML = currentValue ? '🔍' : '🔎'
+        button.style.textShadow = currentValue
+          ? '1px 1px 20px rgba(235,225,45,0.9), 1px 1px 12px rgba(235,225,45,0.9), 0px 0px 3px  rgba(255,200,145,0.6)'
+          : 'none'
+      },
     })
 
     const filterValue = (queryState.filter as any)?.[props.fieldName]?.$regex || ''
@@ -100,9 +102,11 @@ const SearchForm = Shade<{
   render: ({ props, useObservable, element }) => {
     type SearchSubmitType = { searchValue: string }
 
-    const [queryState] = useObservable('currentFilterState', props.service.querySettings, (currentQueryState) => {
-      const currentValue = (currentQueryState.filter?.[props.fieldName] as any)?.$regex || ''
-      ;(element.querySelector('input') as HTMLInputElement).value = currentValue
+    const [queryState] = useObservable('currentFilterState', props.service.querySettings, {
+      onChange: (currentQueryState) => {
+        const currentValue = (currentQueryState.filter?.[props.fieldName] as any)?.$regex || ''
+        ;(element.querySelector('input') as HTMLInputElement).value = currentValue
+      },
     })
 
     return (
@@ -157,17 +161,19 @@ export const DataGridHeader: <T, K extends keyof T>(
 ) => JSX.Element<any> = Shade<DataGridHeaderProps<any, any>>({
   shadowDomName: 'data-grid-header',
   render: ({ props, element, useObservable }) => {
-    const [, setIsSearchOpened] = useObservable('isSearchOpened', new ObservableValue(false), (newValue) => {
-      const searchForm = element.querySelector('.search-form') as HTMLElement
-      const headerContent = element.querySelector('.header-content') as HTMLElement
-      if (!newValue) {
-        collapse(searchForm)
-        expand(headerContent)
-      } else {
-        searchForm.style.display = 'flex'
-        expand(searchForm).then(() => searchForm.querySelector('input')?.focus())
-        collapse(headerContent)
-      }
+    const [, setIsSearchOpened] = useObservable('isSearchOpened', new ObservableValue(false), {
+      onChange: (newValue) => {
+        const searchForm = element.querySelector('.search-form') as HTMLElement
+        const headerContent = element.querySelector('.header-content') as HTMLElement
+        if (!newValue) {
+          collapse(searchForm)
+          expand(headerContent)
+        } else {
+          searchForm.style.display = 'flex'
+          expand(searchForm).then(() => searchForm.querySelector('input')?.focus())
+          collapse(headerContent)
+        }
+      },
     })
     const updateSearchValue = (value?: string) => {
       const currentSettings = props.collectionService.querySettings.getValue()

package/src/components/data-grid/selection-cell.tsx

@@ -4,8 +4,10 @@ import type { CollectionService } from '../../services/collection-service.js'
 export const SelectionCell = Shade<{ entry: any; service: CollectionService<any> }>({
   shadowDomName: 'shades-data-grid-selection-cell',
   render: ({ props, useObservable, element }) => {
-    const [selection] = useObservable('selection', props.service.selection, (newSelection) => {
-      ;(element.querySelector('input') as HTMLInputElement).checked = newSelection.includes(props.entry)
+    const [selection] = useObservable('selection', props.service.selection, {
+      onChange: (newSelection) => {
+        ;(element.querySelector('input') as HTMLInputElement).checked = newSelection.includes(props.entry)
+      },
     })
     const isSelected = selection.includes(props.entry)
 

package/src/components/inputs/input.tsx

@@ -226,7 +226,7 @@ export const Input = Shade<TextInputProps>({
         validity: element.querySelector('input')?.validity || ({} as ValidityState),
         element,
       }),
-      updateState,
+      { onChange: updateState },
     )
 
     return (

package/src/components/noty-list.tsx

@@ -139,27 +139,31 @@ export const NotyList = Shade({
     display: 'flex',
     flexDirection: 'column',
   },
-  render: ({ useObservable, injector, element }) => {
+  render: ({ useDisposable, injector, element }) => {
     const notyService = injector.getInstance(NotyService)
 
-    const currentNotys = notyService.notys.getValue()
+    const currentNotys = notyService.getNotyList()
 
-    useObservable('addNoty', notyService.onNotyAdded, (n) =>
-      element.append(<NotyComponent model={n} onDismiss={() => notyService.removeNoty(n)} />),
+    useDisposable('addNoty', () =>
+      notyService.subscribe('onNotyAdded', (n) =>
+        element.append(<NotyComponent model={n} onDismiss={() => notyService.emit('onNotyRemoved', n)} />),
+      ),
     )
 
-    useObservable('removeNoty', notyService.onNotyRemoved, (n) => {
-      element.querySelectorAll('shade-noty').forEach((e) => {
-        if ((e as JSX.Element).props.model === n) {
-          e.remove()
-        }
-      })
-    })
+    useDisposable('removeNoty', () =>
+      notyService.subscribe('onNotyRemoved', (n) => {
+        element.querySelectorAll('shade-noty').forEach((e) => {
+          if ((e as JSX.Element).props.model === n) {
+            e.remove()
+          }
+        })
+      }),
+    )
 
     return (
       <>
         {currentNotys.map((n) => (
-          <NotyComponent model={n} onDismiss={() => injector.getInstance(NotyService).removeNoty(n)} />
+          <NotyComponent model={n} onDismiss={() => injector.getInstance(NotyService).emit('onNotyRemoved', n)} />
         ))}
       </>
     )

package/src/components/suggest/index.tsx

@@ -28,7 +28,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
   style: {
     flexGrow: '1',
   },
-  render: ({ props, injector, element, useDisposable, useObservable }) => {
+  render: ({ props, injector, element, useDisposable }) => {
     const manager = useDisposable('manager', () => new SuggestManager(props.getEntries, props.getSuggestionEntry))
     const { theme } = injector.getInstance(ThemeProviderService)
     const inputContainer = element.querySelector('.input-container') as HTMLDivElement
@@ -85,7 +85,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
         })
       }
     })
-    useObservable('onSelectSuggestion', manager.onSelectSuggestion, props.onSelectSuggestion)
+    useDisposable('onSelectSuggestion', () => manager.subscribe('onSelectSuggestion', props.onSelectSuggestion))
     return (
       <div
         style={{ display: 'flex', flexDirection: 'column' }}

package/src/components/suggest/suggest-input.tsx

@@ -11,10 +11,9 @@ export const SuggestInput = Shade<{ manager: SuggestManager<any> }>({
   render: ({ element, props, useObservable, injector }) => {
     const { theme } = injector.getInstance(ThemeProviderService)
 
-    useObservable(
-      'isOpened',
-      props.manager.isOpened,
-      (isOpened) => {
+    // todo: getLast is eliminated, do we need it?
+    useObservable('isOpened', props.manager.isOpened, {
+      onChange: (isOpened) => {
         const input = element.firstChild as HTMLInputElement
         if (isOpened) {
           input.focus()
@@ -22,8 +21,7 @@ export const SuggestInput = Shade<{ manager: SuggestManager<any> }>({
           input.value = ''
         }
       },
-      true,
-    )
+    })
 
     return (
       <input

package/src/components/suggest/suggest-manager.ts

@@ -1,17 +1,16 @@
 import type { Injector } from '@furystack/inject'
 import { Injectable } from '@furystack/inject'
 import type { Disposable } from '@furystack/utils'
-import { debounce, ObservableValue } from '@furystack/utils'
+import { debounce, EventHub, ObservableValue } from '@furystack/utils'
 import type { SuggestionResult } from './suggestion-result.js'
 
 @Injectable({ lifetime: 'singleton' })
-export class SuggestManager<T> implements Disposable {
+export class SuggestManager<T> extends EventHub<'onSelectSuggestion', { onSelectSuggestion: T }> implements Disposable {
   public isOpened = new ObservableValue(false)
   public isLoading = new ObservableValue(false)
   public term = new ObservableValue('')
   public selectedIndex = new ObservableValue(0)
   public currentSuggestions = new ObservableValue<Array<{ entry: T; suggestion: SuggestionResult }>>([])
-  public onSelectSuggestion = new ObservableValue<T>()
 
   public keyPressListener = ((ev: KeyboardEvent) => {
     if (ev.key === 'Escape') {
@@ -31,20 +30,20 @@ export class SuggestManager<T> implements Disposable {
   }).bind(this)
 
   public dispose() {
-    window.removeEventListener('keyup', this.keyPressListener)
-    window.removeEventListener('click', this.clickOutsideListener)
+    window.removeEventListener('keyup', this.keyPressListener, true)
+    window.removeEventListener('click', this.clickOutsideListener, true)
     this.isOpened.dispose()
     this.isLoading.dispose()
     this.term.dispose()
     this.selectedIndex.dispose()
     this.currentSuggestions.dispose()
-    this.onSelectSuggestion.dispose()
+    super.dispose()
   }
 
   public selectSuggestion(index: number = this.selectedIndex.getValue()) {
     const selectedSuggestion = this.currentSuggestions.getValue()[index]
     this.isOpened.setValue(false)
-    this.onSelectSuggestion.setValue(selectedSuggestion.entry)
+    this.emit('onSelectSuggestion', selectedSuggestion.entry)
   }
 
   private lastGetSuggestionOptions?: { injector: Injector; term: string }
@@ -74,6 +73,7 @@ export class SuggestManager<T> implements Disposable {
     private readonly getEntries: (term: string) => Promise<T[]>,
     private readonly getSuggestionEntry: (entry: T) => SuggestionResult,
   ) {
+    super()
     window.addEventListener('keyup', this.keyPressListener, true)
     window.addEventListener('click', this.clickOutsideListener, true)
   }