@koobiq/components 20.3.2 → 20.4.0

package/tabs/index.d.ts

@@ -133,11 +133,6 @@ declare abstract class KbqPaginatedTabHeader implements AfterContentChecked, Aft
     get focusIndex(): number;
     /** When the focus index is set, we must manually send focus to the correct label */
     set focusIndex(value: number);
-    /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
-    get scrollDistance(): number;
-    set scrollDistance(v: number);
-    /** The distance in pixels that the tab labels should be translated to the left. */
-    private _scrollDistance;
     abstract readonly items: QueryList<KbqPaginatedTabHeaderItem>;
     abstract readonly tabListContainer: ElementRef<HTMLElement>;
     abstract readonly tabList: ElementRef<HTMLElement>;
@@ -167,8 +162,6 @@ declare abstract class KbqPaginatedTabHeader implements AfterContentChecked, Aft
      * should re-evaluate the scroll position.
      */
     private tabLabelCount;
-    /** Whether the scroll distance has changed and should be applied after the view is checked. */
-    private scrollDistanceChanged;
     /** Used to manage focus between the tabs. */
     private keyManager;
     /** Cached text content of the header. */
@@ -177,14 +170,35 @@ declare abstract class KbqPaginatedTabHeader implements AfterContentChecked, Aft
     private stopScrolling;
     /** Whether the header should scroll to the selected index after the view has been checked. */
     private selectedIndexChanged;
+    /** State of the in-progress mouse/pen drag gesture, if any. */
+    private dragState;
+    /** `requestAnimationFrame` handle for an in-progress inertia coast, if any. */
+    private inertiaFrameId;
+    /** Set after a drag gesture so the click it would otherwise trigger on a tab is suppressed. */
+    private suppressNextClick;
+    /** Handle of the timer that clears {@link suppressNextClick}, so it can be cancelled on destroy. */
+    private suppressClickTimeoutId;
+    private readonly documentPointerMoveListener;
+    private readonly documentPointerUpListener;
+    private readonly documentPointerCancelListener;
+    /** Emits on every native `scroll` event and drag/inertia frame; throttled to limit change detection. */
+    private readonly scrollProgress;
+    /**
+     * Emits scroll-correction requests (from focus or selection changes); debounced so a burst
+     * settles once. `ReplaySubject(1)`, not `Subject`: content hooks (where the very first request,
+     * from `ngAfterContentChecked`, is sent) run before view hooks in the same initial change-
+     * detection pass, so a plain `Subject` would drop it — the `ngAfterViewInit` subscription below
+     * doesn't exist yet when it's emitted.
+     */
+    private readonly scrollCorrectionRequest;
     protected readonly destroyRef: DestroyRef;
     readonly elementRef: ElementRef<HTMLElement>;
     protected readonly changeDetectorRef: ChangeDetectorRef;
-    private readonly viewportRuler;
     private readonly ngZone;
     private readonly platform;
     private readonly dir;
     private readonly window;
+    private readonly sharedResizeObserver;
     constructor();
     /** Called when the user has selected an item via the keyboard. */
     ngAfterViewInit(): void;
@@ -216,29 +230,16 @@ declare abstract class KbqPaginatedTabHeader implements AfterContentChecked, Aft
     setTabFocus(tabIndex: number): void;
     /** The layout direction of the containing app. */
     getLayoutDirection(): Direction;
-    /** Performs the CSS transformation on the tab list that will cause the list to scroll. */
-    updateTabScrollPosition(): void;
     /**
      * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
-     * the end of the list, respectively). The distance to scroll is computed to be a third of the
-     * length of the tab list view window.
+     * the end of the list, respectively).
      *
      * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
      * should be called sparingly.
      */
-    scrollHeader(direction: ScrollDirection$1): {
-        maxScrollDistance: number;
-        distance: number;
-    };
+    scrollHeader(direction: ScrollDirection$1): void;
     /** Handles click events on the pagination arrows. */
     handlePaginatorClick(direction: ScrollDirection$1): void;
-    /**
-     * Moves the tab list such that the desired tab label (marked by index) is moved into view.
-     *
-     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
-     * should be called sparingly.
-     */
-    scrollToLabel(labelIndex: number): void;
     /**
      * Evaluate whether the pagination controls should be displayed. If the scroll width of the
      * tab list is wider than the size of the header container, then the pagination controls should
@@ -248,24 +249,6 @@ declare abstract class KbqPaginatedTabHeader implements AfterContentChecked, Aft
      * should be called sparingly.
      */
     checkPaginationEnabled(): void;
-    /**
-     * Evaluate whether the before and after controls should be enabled or disabled.
-     * If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
-     * before button. If the header is at the end of the list (scroll distance is equal to the
-     * maximum distance we can scroll), then disable the after button.
-     *
-     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
-     * should be called sparingly.
-     */
-    checkScrollingControls(): void;
-    /**
-     * Determines what is the maximum length in pixels that can be set for the scroll distance. This
-     * is equal to the difference in width between the tab list container and tab header container.
-     *
-     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
-     * should be called sparingly.
-     */
-    getMaxScrollDistance(): number;
     /** Stops the currently-running paginator interval.  */
     stopInterval(): void;
     /**
@@ -276,12 +259,43 @@ declare abstract class KbqPaginatedTabHeader implements AfterContentChecked, Aft
     handlePaginatorPress(direction: ScrollDirection$1, mouseEvent?: MouseEvent): void;
     protected abstract itemSelected(event: KeyboardEvent): void;
     /**
-     * Scrolls the header to a given position.
-     * @param position Position to which to scroll.
-     * @returns Information on the current scroll distance and the maximum.
+     * The tab list's scroll position expressed independently of reading direction: `0` at the
+     * start of the tab list, growing towards the end — mirrors native `scrollLeft`'s RTL-dependent
+     * sign so callers can reason about "before"/"after" without checking direction themselves.
      */
-    private scrollTo;
-    private updateScrollPosition;
+    private get logicalScrollPosition();
+    /**
+     * Scrolls the header to a given logical position (see {@link logicalScrollPosition}).
+     * @param value Logical position to scroll to.
+     * @param behavior Scroll animation behavior; `'auto'` jumps instantly, `'smooth'` animates.
+     */
+    private scroll;
+    /**
+     * Moves the tab list such that the desired tab label (marked by index) is moved into view.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    private scrollCorrection;
+    /**
+     * Recomputes the pagination arrow-enabled state from the container's real scroll metrics.
+     * Bound to the native `scroll` event — this is the sole source of truth, no imperative call
+     * is needed after drag/inertia/arrow-click scroll writes.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    private updateScrollState;
+    private handlePointerDown;
+    private handlePointerMove;
+    private cancelDrag;
+    private endDrag;
+    private finishDrag;
+    private attachDocumentDragListeners;
+    private detachDocumentDragListeners;
+    private startInertia;
+    private cancelInertia;
+    private clampVelocity;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPaginatedTabHeader, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPaginatedTabHeader, never, never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "disablePagination": { "alias": "disablePagination"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, {}, never, never, true, never>;
     static ngAcceptInputType_selectedIndex: unknown;
@@ -374,7 +388,15 @@ declare class KbqTabLabelWrapper implements AfterViewInit {
     set disabled(value: boolean);
     private _disabled;
     ngAfterViewInit(): void;
-    /** Sets focus on the wrapper element */
+    /**
+     * Sets focus on the wrapper element.
+     *
+     * `preventScroll: true`: `FocusKeyManager.setActiveItem` calls this itself, right after (and
+     * unconditionally on) the `change` emission that runs `KbqPaginatedTabHeader.setTabFocus` — so
+     * without the guard here too, that call's own `preventScroll: true` is immediately undone by
+     * this one, and an overflowing header double-jumps (native scroll-into-view, then the
+     * paginator-aware `scrollCorrection`) on every arrow-key press.
+     */
     focus(): void;
     getOffsetLeft(): number;
     getOffsetWidth(): number;
@@ -609,7 +631,15 @@ declare class KbqTabLink implements OnDestroy, AfterViewInit {
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private addClassModifierForIcons;
-    /** Focuses the tab link. */
+    /**
+     * Focuses the tab link.
+     *
+     * `preventScroll: true`: `FocusKeyManager.setActiveItem` calls this itself, right after (and
+     * unconditionally on) the `change` emission that runs `KbqPaginatedTabHeader.setTabFocus` — so
+     * without the guard here too, that call's own `preventScroll: true` is immediately undone by
+     * this one, and an overflowing nav bar double-jumps (native scroll-into-view, then the
+     * paginator-aware `scrollCorrection`) on every arrow-key press.
+     */
     focus(): void;
     /** Handles the focus event. */
     protected handleFocus(): void;

package/tabs/tab-group.scss

@@ -17,10 +17,6 @@
         .kbq-tab-list__content {
             gap: var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0;
         }
-
-        & .kbq-tab-header__container {
-            overflow-y: auto;
-        }
     }
 
     .kbq-tab-body__wrapper {

package/tabs/tab-header.scss

@@ -41,7 +41,6 @@
     display: flex;
     flex-grow: 1;
     z-index: 1;
-    overflow: hidden;
 
     .kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) & {
         overflow: visible;
@@ -51,7 +50,6 @@
 .kbq-tab-list {
     position: relative;
     width: 100%;
-    transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
 }
 
 .kbq-tab-label {

package/tabs/tab-nav-bar.scss

@@ -10,7 +10,6 @@
         display: flex;
         flex-grow: 1;
         z-index: 1;
-        overflow: hidden;
     }
 
     &.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-link__container {
@@ -20,21 +19,14 @@
     .kbq-tab-list {
         position: relative;
         width: 100%;
-        transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
     }
 
     .kbq-tab-list__content {
         display: flex;
     }
 
-    &.kbq-tab-group_vertical {
-        .kbq-tab-link__container {
-            overflow-y: scroll;
-        }
-
-        .kbq-tab-list__content {
-            flex-direction: column;
-            gap: var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical);
-        }
+    &.kbq-tab-group_vertical .kbq-tab-list__content {
+        flex-direction: column;
+        gap: var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical);
     }
 }