diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 227538d52a..9e6042b40a 100644 --- a/core/src/components.d.ts +++ b/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(type: K, listener: (this: HTMLIonSegmentViewElement, ev: IonSegmentViewCustomEvent) => 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; + "onIonSegmentViewScrollEnd"?: (event: IonSegmentViewCustomEvent<{ activeContentId: string }>) => void; + "onIonSegmentViewScrollStart"?: (event: IonSegmentViewCustomEvent) => void; } interface IonSelect { /** diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx index 7cd8699488..4f49461ed6 100644 --- a/core/src/components/segment/segment.tsx +++ b/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 diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 0cf98a85b7..6e8e6303b1 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/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>; + ionSegmentViewScroll: EventEmitter>; /** * Emitted when the segment view scroll has ended. */ - ionSegmentViewScrollEnd: EventEmitter>; + ionSegmentViewScrollEnd: EventEmitter>; + + ionSegmentViewScrollStart: EventEmitter>; } diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index 98310eba97..35be08d93e 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/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>; + ionSegmentViewScroll: EventEmitter>; /** * Emitted when the segment view scroll has ended. */ - ionSegmentViewScrollEnd: EventEmitter>; + ionSegmentViewScrollEnd: EventEmitter>; + + ionSegmentViewScrollStart: EventEmitter>; } diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index a0a56e1cf7..d72ec0378c 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -763,7 +763,8 @@ export const IonSegmentContent = /*@__PURE__*/ defineContainer('ion-segment-view', defineIonSegmentView, [ 'disabled', 'ionSegmentViewScroll', - 'ionSegmentViewScrollEnd' + 'ionSegmentViewScrollEnd', + 'ionSegmentViewScrollStart' ]);