fix(segment): handle change of direction scrolling

Author: Tanner Reits

core/src/components.d.ts

@@ -4442,8 +4442,13 @@ declare global {
         new (): HTMLIonSegmentContentElement;
     };
     interface HTMLIonSegmentViewElementEventMap {
-        "ionSegmentViewScroll": { scrollDirection: string; scrollDistancePercentage: number };
-        "ionSegmentViewScrollEnd": void;
+        "ionSegmentViewScroll": {
+    scrollDirection: string;
+    scrollDistance: number;
+    scrollDistancePercentage: number;
+  };
+        "ionSegmentViewScrollEnd": { activeContentId: string };
+        "ionSegmentViewScrollStart": void;
     }
     interface HTMLIonSegmentViewElement extends Components.IonSegmentView, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonSegmentViewElementEventMap>(type: K, listener: (this: HTMLIonSegmentViewElement, ev: IonSegmentViewCustomEvent<HTMLIonSegmentViewElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -7538,11 +7543,16 @@ declare namespace LocalJSX {
         /**
           * Emitted when the segment view is scrolled.
          */
-        "onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<{ scrollDirection: string; scrollDistancePercentage: number }>) => void;
+        "onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<{
+    scrollDirection: string;
+    scrollDistance: number;
+    scrollDistancePercentage: number;
+  }>) => void;
         /**
           * Emitted when the segment view scroll has ended.
          */
-        "onIonSegmentViewScrollEnd"?: (event: IonSegmentViewCustomEvent<void>) => void;
+        "onIonSegmentViewScrollEnd"?: (event: IonSegmentViewCustomEvent<{ activeContentId: string }>) => void;
+        "onIonSegmentViewScrollStart"?: (event: IonSegmentViewCustomEvent<void>) => void;
     }
     interface IonSelect {
         /**

core/src/components/segment/segment.tsx

@@ -368,15 +368,13 @@ export class Segment implements ComponentInterface {
       const indicatorEl = this.getIndicator(current);
       this.scrolledIndicator = indicatorEl;
 
-      const { scrollDirection, scrollDistancePercentage, scrollDistance } = ev.detail;
-
-      console.log('scroll', scrollDistancePercentage, scrollDistance);
+      const { scrollDistancePercentage, scrollDistance: evScrollDistance } = ev.detail;
 
       if (indicatorEl && !isNaN(scrollDistancePercentage)) {
         indicatorEl.style.transition = 'transform 0.3s ease-out';
 
         const scrollDistance = scrollDistancePercentage * current.getBoundingClientRect().width;
-        const transformValue = scrollDirection === 'left' ? -scrollDistance : scrollDistance;
+        const transformValue = evScrollDistance < 0 ? -scrollDistance : scrollDistance;
 
         // Calculate total width of buttons to the left of the current button
         const totalButtonWidthBefore = buttons

packages/angular/src/directives/proxies.ts

@@ -2043,7 +2043,7 @@ export class IonSegmentView {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionSegmentViewScroll', 'ionSegmentViewScrollEnd']);
+    proxyOutputs(this, this.el, ['ionSegmentViewScroll', 'ionSegmentViewScrollEnd', 'ionSegmentViewScrollStart']);
   }
 }
 
@@ -2052,11 +2052,13 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
   /**
    * Emitted when the segment view is scrolled.
    */
-  ionSegmentViewScroll: EventEmitter<CustomEvent<{ scrollDirection: string; scrollDistancePercentage: number }>>;
+  ionSegmentViewScroll: EventEmitter<CustomEvent<{ scrollDirection: string; scrollDistance: number; scrollDistancePercentage: number; }>>;
   /**
    * Emitted when the segment view scroll has ended.
    */
-  ionSegmentViewScrollEnd: EventEmitter<CustomEvent<void>>;
+  ionSegmentViewScrollEnd: EventEmitter<CustomEvent<{ activeContentId: string }>>;
+
+  ionSegmentViewScrollStart: EventEmitter<CustomEvent<void>>;
 }
 
 

packages/angular/standalone/src/directives/proxies.ts

@@ -1882,7 +1882,7 @@ export class IonSegmentView {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionSegmentViewScroll', 'ionSegmentViewScrollEnd']);
+    proxyOutputs(this, this.el, ['ionSegmentViewScroll', 'ionSegmentViewScrollEnd', 'ionSegmentViewScrollStart']);
   }
 }
 
@@ -1891,11 +1891,13 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
   /**
    * Emitted when the segment view is scrolled.
    */
-  ionSegmentViewScroll: EventEmitter<CustomEvent<{ scrollDirection: string; scrollDistancePercentage: number }>>;
+  ionSegmentViewScroll: EventEmitter<CustomEvent<{ scrollDirection: string; scrollDistance: number; scrollDistancePercentage: number; }>>;
   /**
    * Emitted when the segment view scroll has ended.
    */
-  ionSegmentViewScrollEnd: EventEmitter<CustomEvent<void>>;
+  ionSegmentViewScrollEnd: EventEmitter<CustomEvent<{ activeContentId: string }>>;
+
+  ionSegmentViewScrollStart: EventEmitter<CustomEvent<void>>;
 }
 
 

packages/vue/src/proxies.ts

@@ -763,7 +763,8 @@ export const IonSegmentContent = /*@__PURE__*/ defineContainer<JSX.IonSegmentCon
 export const IonSegmentView = /*@__PURE__*/ defineContainer<JSX.IonSegmentView>('ion-segment-view', defineIonSegmentView, [
   'disabled',
   'ionSegmentViewScroll',
-  'ionSegmentViewScrollEnd'
+  'ionSegmentViewScrollEnd',
+  'ionSegmentViewScrollStart'
 ]);