Refactor #16793 - TabList

primefaces · Nov 28, 2024 · 72c25e7 · 72c25e7
1 parent 4c215b1
commit 72c25e7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/packages/primeng/src/scrollpanel/style/scrollpanelstyle.ts b/packages/primeng/src/scrollpanel/style/scrollpanelstyle.ts
@@ -14,8 +14,8 @@ const theme = ({ dt }) => `
 .p-scrollpanel-content {
     height: calc(100% + calc(2 * ${dt('scrollpanel.bar.size')}));
     width: calc(100% + calc(2 * ${dt('scrollpanel.bar.size')}));
-    padding-block-end: calc(2 * ${dt('scrollpanel.bar.size')});
-    padding-inline-end: calc(2 * ${dt('scrollpanel.bar.size')});
+    padding-inline: 0 calc(2 * ${dt('scrollpanel.bar.size')});
+    padding-block: 0 calc(2 * ${dt('scrollpanel.bar.size')});
     position: relative;
     overflow: auto;
     box-sizing: border-box;

diff --git a/packages/primeng/src/tabs/tablist.ts b/packages/primeng/src/tabs/tablist.ts
@@ -1,6 +1,6 @@
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, computed, ContentChild, effect, ElementRef, forwardRef, inject, signal, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
-import { findSingle, getHeight, getOffset, getOuterWidth, getWidth } from '@primeuix/utils';
+import { findSingle, getHeight, getOffset, getOuterWidth, getWidth, isRTL } from '@primeuix/utils';
 import { SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { ChevronLeftIcon, ChevronRightIcon } from 'primeng/icons';
@@ -142,26 +142,28 @@ export class TabList extends BaseComponent implements AfterViewInit, AfterConten
     onPrevButtonClick() {
         const _content = this.content.nativeElement;
         const width = getWidth(_content);
+        const pos = Math.abs(_content.scrollLeft) - width;
+        const scrollLeft = pos <= 0 ? 0 : pos;
 
-        const pos = _content.scrollLeft - width;
-
-        _content.scrollLeft = pos <= 0 ? 0 : pos;
+        _content.scrollLeft = isRTL(_content) ? -1 * scrollLeft : scrollLeft;
     }
 
     onNextButtonClick() {
         const _content = this.content.nativeElement;
         const width = getWidth(_content) - this.getVisibleButtonWidths();
         const pos = _content.scrollLeft + width;
         const lastPos = _content.scrollWidth - width;
+        const scrollLeft = pos >= lastPos ? lastPos : pos;
 
-        _content.scrollLeft = pos >= lastPos ? lastPos : pos;
+        _content.scrollLeft = isRTL(_content) ? -1 * scrollLeft : scrollLeft;
     }
 
     updateButtonState() {
         const _content = this.content?.nativeElement;
         const _list = this.el?.nativeElement;
 
-        const { scrollLeft, scrollTop, scrollWidth, scrollHeight, offsetWidth, offsetHeight } = _content;
+        const { scrollTop, scrollWidth, scrollHeight, offsetWidth, offsetHeight } = _content;
+        const scrollLeft = Math.abs(_content.scrollLeft);
         const [width, height] = [getWidth(_content), getHeight(_content)];
 
         this.isPrevButtonEnabled.set(scrollLeft !== 0);