@nectary/components 3.3.2 → 3.3.3

package/input/index.js

@@ -57,6 +57,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.#$input.addEventListener('compositionend', this.#onCompositionEnd, options);
     this.#$input.addEventListener('focus', this.#onInputFocus, options);
     this.#$input.addEventListener('blur', this.#onInputBlur, options);
+    this.#$input.addEventListener('wheel', this.#onWheel, options);
     this.#$iconSlot.addEventListener('slotchange', this.#onIconSlotChange, options);
     this.#$leftSlot.addEventListener('slotchange', this.#onLeftSlotChange, options);
     this.#$rightSlot.addEventListener('slotchange', this.#onRightSlotChange, options);
@@ -66,6 +67,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.addEventListener('-copy', this.#onCopyReactHandler, options);
     this.addEventListener('-cut', this.#onCutReactHandler, options);
     this.addEventListener('-paste', this.#onPasteReactHandler, options);
+    this.addEventListener('-wheel', this.#onWheelReactHandler, options);
     this.#sizeContext.listen(this.#controller.signal);
     subscribeContext(this, 'size', this.#onContextSize, this.#controller.signal);
     this.#onIconSlotChange();
@@ -419,6 +421,9 @@ defineCustomElement('sinch-input', class extends NectaryElement {
       this.#dispatchChangeEvent(nextValue);
     }
   };
+  #onWheel = () => {
+    this.dispatchEvent(new CustomEvent('-wheel'));
+  };
   #onMaskInputAutofillChange = () => {
     const nextVal = this.#$input.value;
     if (this.#maskSymbols !== null) {
@@ -639,4 +644,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   #onPasteReactHandler = e => {
     getReactEventHandler(this, 'on-paste')?.(e);
   };
+  #onWheelReactHandler = e => {
+    getReactEventHandler(this, 'on-wheel')?.(e);
+  };
 });

package/input/types.d.ts

@@ -34,7 +34,7 @@ export type TSinchInputElement = HTMLElement & {
     addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
     /** Blur event */
     addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
-    /** Blur event */
+    /** Wheel event */
     addEventListener(type: '-wheel', listener: (e: CustomEvent<void>) => void): void;
     /** Text field type, `text` by default */
     setAttribute(name: 'type', value: TSinchInputType): void;
@@ -85,4 +85,7 @@ export type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
     'on-cut'?: (e: TSinchInputClipboardEvent) => void;
     'on-copy'?: (e: TSinchInputClipboardEvent) => void;
     'on-paste'?: (e: TSinchInputClipboardEvent) => void;
+    'on-wheel'?: (e: CustomEvent<void> & {
+        target: TSinchInputElement;
+    }) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "files": [
     "**/*/*.css",
     "**/*/*.json",