- use RTL helper;

Author: JoaoFerreira-FrontEnd

core/src/components/segment-view/segment-view.tsx

@@ -1,5 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Method, Prop, State, h } from '@stencil/core';
+import { isRTL } from '@utils/rtl';
 
 import type { SegmentViewScrollEvent } from './segment-view-interface';
 
@@ -39,8 +40,9 @@ export class SegmentView implements ComponentInterface {
   @Listen('scroll')
   handleScroll(ev: Event) {
     const { scrollLeft, scrollWidth, clientWidth } = ev.target as HTMLElement;
-    const isRTL = window.getComputedStyle(this.el).direction === 'rtl';
-    const scrollRatio = (isRTL ? -1 : 1) * (scrollLeft / (scrollWidth - clientWidth));
+    const max = scrollWidth - clientWidth; 
+    const scrollRatio = (isRTL(this.el) ? -1 : 1) * (scrollLeft / max);
+
 
     this.ionSegmentViewScroll.emit({
       scrollRatio,
@@ -119,17 +121,18 @@ export class SegmentView implements ComponentInterface {
   async setContent(id: string, smoothScroll = true) {
     const contents = this.getSegmentContents();
     const index = contents.findIndex((content) => content.id === id);
-    const isRTL = window.getComputedStyle(this.el).direction === 'rtl';
 
     if (index === -1) return;
 
     this.isManualScroll = false;
     this.resetScrollEndTimeout();
 
     const contentWidth = this.el.offsetWidth;
+    const offset = index * contentWidth; 
+
     this.el.scrollTo({
       top: 0,
-      left: (isRTL ? -1 : 1) * index * contentWidth,
+      left: (isRTL(this.el) ? -1 : 1 ) * offset,
       behavior: smoothScroll ? 'smooth' : 'instant',
     });
   }