@mustib/web-components 0.0.0-alpha.3 → 0.0.0-alpha.4

package/components/mu-range.d.ts

@@ -27,6 +27,7 @@ type RangeFill = {
     element: MuRangeFill;
     linkedThumbs: RangeThumb[];
 };
+type ChangeEventSrc = 'pointerdown' | 'pointerup' | 'pointermove' | 'keydown' | 'insert';
 type Events = {
     /**
      * Emitted when pointerdown on a non-thumb element and empty-area attribute has a value of "dispatch".
@@ -44,6 +45,7 @@ type Events = {
             name: string;
             value: number;
         }[];
+        src: ChangeEventSrc;
     }>;
     /**
      * Emitted when new thumbs are added after the initial render.
@@ -151,11 +153,15 @@ declare class MuRange extends MuElement {
      * Switches the active thumb for keyboard navigation
      */
     switchNavigationActiveItem(direction: 'next' | 'prev'): boolean;
-    dispatchChangeEvent(thumbs?: {
+    dispatchChangeEvent(thumbs: {
         name: string;
         value: number;
-    }[]): void;
-    _setThumbValue(thumb: RangeThumb, value: number): void;
+    }[] | undefined, src: ChangeEventSrc): void;
+    _setThumbValue({ src, thumb, value, }: {
+        thumb: RangeThumb;
+        value: number;
+        src: ChangeEventSrc;
+    }): void;
     /**
      * Updates the range fill element
      */

package/components/mu-range.js

@@ -215,7 +215,7 @@ class MuRange extends MuElement {
                 e.preventDefault();
                 this.focus();
                 thumb.element.focused = true;
-                this._setThumbValue(thumb, value);
+                this._setThumbValue({ thumb, value, src: 'keydown' });
             };
             const jumpPercentage = 10;
             const jumpStepValue = (thumb.element.maxValue - thumb.element.minValue) / jumpPercentage;
@@ -317,7 +317,7 @@ class MuRange extends MuElement {
                         : rightThumb;
             }
             if (candidateThumb) {
-                this._setThumbValue(candidateThumb, value);
+                this._setThumbValue({ thumb: candidateThumb, value, src: 'pointerdown' });
                 this.activeThumb = candidateThumb;
             }
         };
@@ -328,13 +328,13 @@ class MuRange extends MuElement {
             if (!this.activeThumb)
                 return;
             const { value } = this._getValuesFromEvent(e);
-            this._setThumbValue(this.activeThumb, value);
+            this._setThumbValue({ thumb: this.activeThumb, value, src: 'pointerup' });
         };
         this._pointermoveHandler = (e) => {
             if (!this.activeThumb)
                 return;
             const { value } = this._getValuesFromEvent(e);
-            this._setThumbValue(this.activeThumb, value);
+            this._setThumbValue({ thumb: this.activeThumb, value, src: 'pointermove' });
         };
         this._documentPointermoveHandler = throttle((e) => {
             this._pointermoveHandler(e);
@@ -390,7 +390,7 @@ class MuRange extends MuElement {
         const thumb = this._thumbsElementsMap.get(thumbEl);
         if (!thumb)
             return;
-        this._setThumbValue(thumb, thumbEl.value);
+        this._setThumbValue({ thumb, value: thumb.value, src: 'insert' });
         this.activeThumb = thumb;
     }
     /**
@@ -414,17 +414,17 @@ class MuRange extends MuElement {
         navigationThumb.element.focused = true;
         return true;
     }
-    dispatchChangeEvent(thumbs = this._thumbs) {
+    dispatchChangeEvent(thumbs = this._thumbs, src) {
         const eventName = 'mu-range-change';
         const data = thumbs.map((thumb) => ({ name: thumb.name, value: thumb.value }));
         this.dispatchEvent(new CustomEvent(eventName, {
             bubbles: true,
             composed: true,
-            detail: { data: data },
+            detail: { data: data, src },
             cancelable: true,
         }));
     }
-    _setThumbValue(thumb, value) {
+    _setThumbValue({ src, thumb, value, }) {
         const stepValue = this._getThumbStepValue(thumb, value);
         if (stepValue === thumb.value)
             return;
@@ -434,7 +434,7 @@ class MuRange extends MuElement {
                 name: _thumb.name,
                 value: _thumb.name === thumb.name ? stepValue : thumb.value,
             }));
-            this.dispatchChangeEvent(sortedThumbs);
+            this.dispatchChangeEvent(sortedThumbs, src);
             return;
         }
         const success = thumb.element.setValue(stepValue);
@@ -442,7 +442,7 @@ class MuRange extends MuElement {
             thumb.value = stepValue;
             this.sortThumbs();
             thumb.linkedFillElements?.forEach(this.updateRangeFill);
-            this.dispatchChangeEvent();
+            this.dispatchChangeEvent(undefined, src);
         }
     }
     /**

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "A customizable web-components library with lit",
   "private": false,
-  "version": "0.0.0-alpha.3",
+  "version": "0.0.0-alpha.4",
   "dependencies": {
     "@mustib/utils": "2.7.0"
   },