@natec/mef-dev-ui-kit 20.0.0-beta.1 → 20.0.1

package/src/lib/v2/tabs/paginated-tab-header.ts

@@ -1,536 +0,0 @@
-import { FocusKeyManager, FocusableOption } from '@angular/cdk/a11y';
-import { Direction, Directionality } from '@angular/cdk/bidi';
-import { ENTER, SPACE, hasModifierKey } from '@angular/cdk/keycodes';
-import { SharedResizeObserver } from '@angular/cdk/observers/private';
-import { Platform } from '@angular/cdk/platform';
-import { ViewportRuler } from '@angular/cdk/scrolling';
-import {
-  AfterContentChecked,
-  AfterContentInit,
-  AfterViewInit,
-  ChangeDetectorRef,
-  Directive,
-  ElementRef,
-  EventEmitter,
-  Injector,
-  Input,
-  NgZone,
-  OnDestroy,
-  Output,
-  QueryList,
-  Renderer2,
-  afterNextRender,
-  booleanAttribute,
-  inject,
-  numberAttribute,
-} from '@angular/core';
-import { EMPTY, Observable, Observer, Subject, merge, of as observableOf, timer } from 'rxjs';
-import { debounceTime, filter, skip, startWith, switchMap, takeUntil } from 'rxjs/operators';
-
-const passiveEventListenerOptions = { passive: true };
-
-/** Direction to scroll the header when paginating. */
-export type ScrollDirection = 'after' | 'before';
-
-/** Delay (ms) before auto-scrolling kicks in on press-and-hold. */
-const HEADER_SCROLL_DELAY = 650;
-/** Interval (ms) for repeated scrolling while holding the paginator. */
-const HEADER_SCROLL_INTERVAL = 100;
-
-/**
- * Contract for focusable tab header items used by the header.
- * Must expose an `elementRef` for measurement/positioning.
- */
-export type PaginatedTabHeaderItem = FocusableOption & { elementRef: ElementRef };
-
-@Directive()
-/**
- * Base class for a horizontally scrollable (paginated) tab header.
- *
- * @remarks
- * - Manages keyboard navigation via `FocusKeyManager` (arrows/home/end).
- * - Handles ink bar alignment and scroll-to-visible for the selected tab.
- * - Supports RTL/LTR layouts and responsive resizing.
- *
- * Subclasses provide concrete template references (tab list elements, paginators, items)
- * and implement `_itemSelected` to act on keyboard selection (Enter/Space).
- *
- * @example Handling keyboard selection in a subclass
- * ```ts
- * protected _itemSelected(event: KeyboardEvent) {
- *   this.selectFocusedIndex.emit(this.focusIndex);
- * }
- * ```
- */
-export abstract class PaginatedTabHeader
-  implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy
-{
-  /** Root host element (the header wrapper). */
-  protected _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  /** For OnPush marking when values change. */
-  protected _changeDetectorRef = inject(ChangeDetectorRef);
-  /** Viewport ruler for resize/scrollbar metrics. */
-  private _viewportRuler = inject(ViewportRuler);
-  /** Optional RTL service to flip layout. */
-  private _dir = inject(Directionality, { optional: true });
-  /** For running timers/listeners outside Angular. */
-  private _ngZone = inject(NgZone);
-  /** Platform detection (legacy engines). */
-  private _platform = inject(Platform);
-  /** Efficient ResizeObserver sharing. */
-  private _sharedResizeObserver = inject(SharedResizeObserver);
-  /** Injector for `afterNextRender` scheduling. */
-  private _injector = inject(Injector);
-  /** Renderer for native event listeners & styles. */
-  private _renderer = inject(Renderer2);
-
-  /** Cleanup callbacks for host-level listeners. */
-  private _eventCleanups: (() => void)[];
-
-  // ---- Abstract element/item references provided by subclasses ----
-
-  /** List of focusable items (tab labels). */
-  abstract _items: QueryList<PaginatedTabHeaderItem>;
-  /** Ink bar API for alignment/hide. */
-  abstract _inkBar: { hide: () => void; alignToElement: (element: HTMLElement) => void };
-  /** Container that clips the scrollable tab list. */
-  abstract _tabListContainer: ElementRef<HTMLElement>;
-  /** The horizontally translated list element. */
-  abstract _tabList: ElementRef<HTMLElement>;
-  /** Inner list wrapper used for measurements. */
-  abstract _tabListInner: ElementRef<HTMLElement>;
-  /** Next paginator button element. */
-  abstract _nextPaginator: ElementRef<HTMLElement>;
-  /** Previous paginator button element. */
-  abstract _previousPaginator: ElementRef<HTMLElement>;
-
-  // ---- State ----
-
-  /** Current horizontal scroll translation in px (LTR positive moves content left). */
-  private _scrollDistance = 0;
-  /** Flag to know when selectedIndex changed between content checks. */
-  private _selectedIndexChanged = false;
-  /** Teardown notifier for streams. */
-  protected readonly _destroyed = new Subject<void>();
-  /** Whether to render/show pagination controls. */
-  _showPaginationControls = false;
-  /** Disable "scroll after" paginator. */
-  _disableScrollAfter = true;
-  /** Disable "scroll before" paginator. */
-  _disableScrollBefore = true;
-  /** Cached count of tab labels to detect additions/removals. */
-  private _tabLabelCount: number;
-  /** Marker to apply pending scroll distance change to DOM. */
-  private _scrollDistanceChanged: boolean;
-  /** Keyboard manager for roving focus. */
-  protected _keyManager: FocusKeyManager<PaginatedTabHeaderItem> | undefined;
-  /** Used to detect text-content changes affecting layout. */
-  private _currentTextContent: string;
-  /** Emits when auto-scrolling should stop (mouseleave or end). */
-  private _stopScrolling = new Subject<void>();
-
-  // ---- Inputs/Outputs ----
-
-  @Input() hideInkBar: boolean;
-  /**
-   * Disable pagination and force-fit all tabs (no scroll).
-   * @default false
-   */
-  @Input({ transform: booleanAttribute })
-  disablePagination: boolean = false;
-
-  /**
-   * Currently selected tab index (drives ink bar & scroll-to-visible).
-   */
-  @Input({ transform: numberAttribute })
-  get selectedIndex(): number {
-    return this._selectedIndex;
-  }
-  set selectedIndex(v: number) {
-    const value = isNaN(v) ? 0 : v;
-    if (this._selectedIndex != value) {
-      this._selectedIndexChanged = true;
-      this._selectedIndex = value;
-      if (this._keyManager) {
-        this._keyManager.updateActiveItem(value);
-      }
-    }
-  }
-  private _selectedIndex: number = 0;
-
-  /**
-   * Emits requested selection when user presses Enter/Space on a focused tab.
-   * Consumers typically update `selectedIndex` in response.
-   */
-  @Output() readonly selectFocusedIndex: EventEmitter<number> = new EventEmitter<number>();
-  /** Emits when focus moves to a different tab header item. */
-  @Output() readonly indexFocused: EventEmitter<number> = new EventEmitter<number>();
-
-  constructor() {
-    // Host-level listeners registered outside Angular for performance.
-    this._eventCleanups = this._ngZone.runOutsideAngular(() => [
-      this._renderer.listen(this._elementRef.nativeElement, 'mouseleave', () => this._stopInterval()),
-    ]);
-  }
-
-  /**
-   * Subclass must implement: what happens when user "selects"
-   * the focused item via keyboard (Enter/Space).
-   */
-  protected abstract _itemSelected(event: KeyboardEvent): void;
-
-  /** Lifecycle: attach touch handlers for press-and-hold scrolling. */
-  ngAfterViewInit() {
-    this._eventCleanups.push(
-      this._renderer.listen(
-        this._previousPaginator.nativeElement,
-        'touchstart',
-        () => this._handlePaginatorPress('before'),
-        passiveEventListenerOptions
-      ),
-      this._renderer.listen(
-        this._nextPaginator.nativeElement,
-        'touchstart',
-        () => this._handlePaginatorPress('after'),
-        passiveEventListenerOptions
-      )
-    );
-  }
-
-  /** Lifecycle: set up keyboard manager, observers and initial alignment. */
-  ngAfterContentInit() {
-    const dirChange = this._dir ? this._dir.change : observableOf('ltr');
-    const resize = this._sharedResizeObserver
-      .observe(this._elementRef.nativeElement)
-      .pipe(debounceTime(32), takeUntil(this._destroyed));
-    const viewportResize = this._viewportRuler.change(150).pipe(takeUntil(this._destroyed));
-    const realign = () => {
-      this.updatePagination();
-      this._alignInkBarToSelectedTab();
-    };
-
-    this._keyManager = new FocusKeyManager<PaginatedTabHeaderItem>(this._items)
-      .withHorizontalOrientation(this._getLayoutDirection())
-      .withHomeAndEnd()
-      .withWrap()
-      .skipPredicate(() => false);
-
-    this._keyManager.updateActiveItem(Math.max(this._selectedIndex, 0));
-    afterNextRender(realign, { injector: this._injector });
-
-    merge(dirChange, viewportResize, resize, this._items.changes, this._itemsResized())
-      .pipe(takeUntil(this._destroyed))
-      .subscribe(() => {
-        this._ngZone.run(() => {
-          // Defer to allow DOM to settle (e.g., fonts, labels).
-          Promise.resolve().then(() => {
-            this._scrollDistance = Math.max(0, Math.min(this._getMaxScrollDistance(), this._scrollDistance));
-            realign();
-          });
-        });
-        this._keyManager?.withHorizontalOrientation(this._getLayoutDirection());
-      });
-
-    this._keyManager.change.subscribe((newFocusIndex) => {
-      this.indexFocused.emit(newFocusIndex);
-      this._setTabFocus(newFocusIndex);
-    });
-  }
-
-  /**
-   * Observe when any header item has (re)measured to a non-zero size.
-   * Helps re-evaluate pagination after lazy content/label changes.
-   */
-  private _itemsResized(): Observable<ResizeObserverEntry[]> {
-    if (typeof ResizeObserver !== 'function') {
-      return EMPTY;
-    }
-    return this._items.changes.pipe(
-      startWith(this._items),
-      switchMap(
-        (tabItems: QueryList<PaginatedTabHeaderItem>) =>
-          new Observable((observer: Observer<ResizeObserverEntry[]>) =>
-            this._ngZone.runOutsideAngular(() => {
-              const resizeObserver = new ResizeObserver((entries) => observer.next(entries));
-              tabItems.forEach((item) => resizeObserver.observe(item.elementRef.nativeElement));
-              return () => resizeObserver.disconnect();
-            })
-          )
-      ),
-      // Ignore the initial synchronous fire to avoid redundant realign.
-      skip(1),
-      filter((entries) => entries.some((e) => e.contentRect.width > 0 && e.contentRect.height > 0))
-    );
-  }
-
-  /** Lifecycle: react to item count/selection/scroll changes and flush DOM updates. */
-  ngAfterContentChecked(): void {
-    if (this._tabLabelCount != this._items.length) {
-      this.updatePagination();
-      this._tabLabelCount = this._items.length;
-      this._changeDetectorRef.markForCheck();
-    }
-    if (this._selectedIndexChanged) {
-      this._scrollToLabel(this._selectedIndex);
-      this._checkScrollingControls();
-      this._alignInkBarToSelectedTab();
-      this._selectedIndexChanged = false;
-      this._changeDetectorRef.markForCheck();
-    }
-    if (this._scrollDistanceChanged) {
-      this._updateTabScrollPosition();
-      this._scrollDistanceChanged = false;
-      this._changeDetectorRef.markForCheck();
-    }
-  }
-
-  /** Lifecycle: teardown listeners/streams. */
-  ngOnDestroy() {
-    this._eventCleanups.forEach((cleanup) => cleanup());
-    this._keyManager?.destroy();
-    this._destroyed.next();
-    this._destroyed.complete();
-    this._stopScrolling.complete();
-  }
-
-  /**
-   * Handle keydown on the header container.
-   * Space/Enter select the focused tab; arrows/home/end are delegated to the key manager.
-   */
-  _handleKeydown(event: KeyboardEvent) {
-    if (hasModifierKey(event)) {
-      return;
-    }
-    switch (event.keyCode) {
-      case ENTER:
-      case SPACE:
-        if (this.focusIndex !== this.selectedIndex) {
-          const item = this._items.get(this.focusIndex);
-          if (item && !item.disabled) {
-            this.selectFocusedIndex.emit(this.focusIndex);
-            this._itemSelected(event);
-          }
-        }
-        break;
-      default:
-        this._keyManager?.onKeydown(event);
-    }
-  }
-
-  /** Called when projected content text changes may affect layout/widths. */
-  _onContentChanges() {
-    const textContent = this._elementRef.nativeElement.textContent;
-    if (textContent !== this._currentTextContent) {
-      this._currentTextContent = textContent || '';
-      this._ngZone.run(() => {
-        this.updatePagination();
-        this._alignInkBarToSelectedTab();
-        this._changeDetectorRef.markForCheck();
-      });
-    }
-  }
-
-  /** Recompute pagination state and apply current scroll position. */
-  updatePagination() {
-    this._checkPaginationEnabled();
-    this._checkScrollingControls();
-    this._updateTabScrollPosition();
-  }
-
-  /** Index of the currently focused item in the key manager. */
-  get focusIndex(): number {
-    return this._keyManager ? this._keyManager.activeItemIndex! : 0;
-  }
-  set focusIndex(value: number) {
-    if (!this._isValidIndex(value) || this.focusIndex === value || !this._keyManager) {
-      return;
-    }
-    this._keyManager.setActiveItem(value);
-  }
-
-  /** Returns whether the given index is valid for the items list. */
-  _isValidIndex(index: number): boolean {
-    return this._items ? !!this._items.toArray()[index] : true;
-  }
-
-  /**
-   * Moves focus to a given tab and ensures it is visible within the scroll container.
-   * Also snaps container scroll to an edge (LTR/RTL) to avoid native scroll drift.
-   */
-  _setTabFocus(tabIndex: number) {
-    if (this._showPaginationControls) {
-      this._scrollToLabel(tabIndex);
-    }
-    if (this._items && this._items.length) {
-      this._items.toArray()[tabIndex].focus();
-      const containerEl = this._tabListContainer.nativeElement;
-      const dir = this._getLayoutDirection();
-      if (dir == 'ltr') {
-        containerEl.scrollLeft = 0;
-      } else {
-        containerEl.scrollLeft = containerEl.scrollWidth - containerEl.offsetWidth;
-      }
-    }
-  }
-
-  /** Current layout direction derived from `Directionality`. */
-  _getLayoutDirection(): Direction {
-    return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
-  }
-
-  /** Applies the current scroll transform to the tab list element. */
-  _updateTabScrollPosition() {
-    if (this.disablePagination) {
-      return;
-    }
-    const scrollDistance = this.scrollDistance;
-    const translateX = this._getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance;
-    this._tabList.nativeElement.style.transform = `translateX(${Math.round(translateX)}px)`;
-    // Legacy engines required to reset container scroll to avoid jitter.
-    if (this._platform.TRIDENT || this._platform.EDGE) {
-      this._tabListContainer.nativeElement.scrollLeft = 0;
-    }
-  }
-
-  /** Current scroll distance (px). Setting it clamps to valid range and flags for DOM update. */
-  get scrollDistance(): number {
-    return this._scrollDistance;
-  }
-  set scrollDistance(value: number) {
-    this._scrollTo(value);
-  }
-
-  /** Scrolls the header by one third of the visible width in the given direction. */
-  _scrollHeader(direction: ScrollDirection) {
-    const viewLength = this._tabListContainer.nativeElement.offsetWidth;
-    const scrollAmount = ((direction == 'before' ? -1 : 1) * viewLength) / 3;
-    return this._scrollTo(this._scrollDistance + scrollAmount);
-  }
-
-  /** Single-click paginator handler. */
-  _handlePaginatorClick(direction: ScrollDirection) {
-    this._stopInterval();
-    this._scrollHeader(direction);
-  }
-
-  /**
-   * Ensures the tab at `labelIndex` is fully visible within the scroll range.
-   * Adjusts `scrollDistance` as needed based on LTR/RTL calculations.
-   */
-  _scrollToLabel(labelIndex: number) {
-    if (this.disablePagination) {
-      return;
-    }
-    const selectedLabel = this._items ? this._items.toArray()[labelIndex] : null;
-    if (!selectedLabel) {
-      return;
-    }
-    const viewLength = this._tabListContainer.nativeElement.offsetWidth;
-    const { offsetLeft, offsetWidth } = selectedLabel.elementRef.nativeElement;
-
-    let labelBeforePos: number, labelAfterPos: number;
-    if (this._getLayoutDirection() == 'ltr') {
-      labelBeforePos = offsetLeft;
-      labelAfterPos = labelBeforePos + offsetWidth;
-    } else {
-      labelAfterPos = this._tabListInner.nativeElement.offsetWidth - offsetLeft;
-      labelBeforePos = labelAfterPos - offsetWidth;
-    }
-
-    const beforeVisiblePos = this.scrollDistance;
-    const afterVisiblePos = this.scrollDistance + viewLength;
-
-    if (labelBeforePos < beforeVisiblePos) {
-      this.scrollDistance -= beforeVisiblePos - labelBeforePos;
-    } else if (labelAfterPos > afterVisiblePos) {
-      this.scrollDistance += Math.min(labelAfterPos - afterVisiblePos, labelBeforePos - beforeVisiblePos);
-    }
-  }
-
-  /** Evaluates whether pagination controls should be shown based on content width. */
-  _checkPaginationEnabled() {
-    if (this.disablePagination) {
-      this._showPaginationControls = false;
-    } else {
-      const scrollWidth = this._tabListInner.nativeElement.scrollWidth;
-      const containerWidth = this._elementRef.nativeElement.offsetWidth;
-      const isEnabled = scrollWidth - containerWidth >= 5;
-      if (!isEnabled) {
-        this.scrollDistance = 0;
-      }
-      if (isEnabled !== this._showPaginationControls) {
-        this._showPaginationControls = isEnabled;
-        this._changeDetectorRef.markForCheck();
-      }
-    }
-  }
-
-  /** Enables/disables paginator buttons based on current scroll position. */
-  _checkScrollingControls() {
-    if (this.disablePagination) {
-      this._disableScrollAfter = this._disableScrollBefore = true;
-    } else {
-      this._disableScrollBefore = this.scrollDistance == 0;
-      this._disableScrollAfter = this.scrollDistance == this._getMaxScrollDistance();
-      this._changeDetectorRef.markForCheck();
-    }
-  }
-
-  /** Maximum scrollable distance of the tab list (px). */
-  _getMaxScrollDistance(): number {
-    const lengthOfTabList = this._tabListInner.nativeElement.scrollWidth;
-    const viewLength = this._tabListContainer.nativeElement.offsetWidth;
-    return lengthOfTabList - viewLength || 0;
-  }
-
-  /** Aligns the ink bar to the selected tab or hides it if no selection. */
-  _alignInkBarToSelectedTab(): void {
-    if(this.hideInkBar) return;
-    const selectedItem = this._items && this._items.length ? this._items.toArray()[this.selectedIndex] : null;
-    const selectedLabelWrapper = selectedItem ? selectedItem.elementRef.nativeElement : null;
-    if (selectedLabelWrapper) {
-      this._inkBar.alignToElement(selectedLabelWrapper);
-    } else {
-      this._inkBar.hide();
-    }
-  }
-
-  /** Stops any ongoing auto-scroll interval. */
-  _stopInterval() {
-    this._stopScrolling.next();
-  }
-
-  /**
-   * Handles press-and-hold on a paginator button for continuous scrolling.
-   * Uses a delay before repeating to avoid accidental long-press.
-   */
-  _handlePaginatorPress(direction: ScrollDirection, mouseEvent?: MouseEvent) {
-    if (mouseEvent && mouseEvent.button != null && mouseEvent.button !== 0) {
-      return;
-    }
-    this._stopInterval();
-    timer(HEADER_SCROLL_DELAY, HEADER_SCROLL_INTERVAL)
-      .pipe(takeUntil(merge(this._stopScrolling, this._destroyed)))
-      .subscribe(() => {
-        const { maxScrollDistance, distance } = this._scrollHeader(direction);
-        if (distance === 0 || distance >= maxScrollDistance) {
-          this._stopInterval();
-        }
-      });
-  }
-
-  /**
-   * Clamps and applies a new scroll position.
-   * @returns The max scroll distance and the clamped distance for convenience.
-   */
-  private _scrollTo(position: number) {
-    if (this.disablePagination) {
-      return { maxScrollDistance: 0, distance: 0 };
-    }
-    const maxScrollDistance = this._getMaxScrollDistance();
-    this._scrollDistance = Math.max(0, Math.min(maxScrollDistance, position));
-    this._scrollDistanceChanged = true;
-    this._checkScrollingControls();
-    return { maxScrollDistance, distance: this._scrollDistance };
-  }
-}

package/src/lib/v2/tabs/tab-body.html

@@ -1,9 +0,0 @@
-<div
-   class="mdc-tab-body-content"
-   #content
-   cdkScrollable
-   [class.tab-body-content-left]="_position === 'left'"
-   [class.tab-body-content-right]="_position === 'right'"
-   [class.tab-body-content-can-animate]="_position === 'center' || _previousPosition === 'center'">
-  <ng-template mdTabBodyHost></ng-template>
-</div>

package/src/lib/v2/tabs/tab-body.scss

@@ -1,60 +0,0 @@
-.mdc-tab-body {
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    position: absolute;
-    display: block;
-    overflow: hidden;
-    outline: 0;
-
-    flex-basis: 100%;
-
-    &.mdc-tab-body-active {
-        position: relative;
-        overflow-x: hidden;
-        overflow-y: auto;
-        z-index: 1;
-        flex-grow: 1;
-    }
-
-    .mdc-tab-group.mdc-tab-group-dynamic-height &.mdc-tab-body-active {
-        overflow-y: hidden;
-    }
-}
-
-.mdc-tab-body-content {
-    height: 100%;
-    overflow: auto;
-    transform: none;
-    visibility: hidden;
-
-    .tab-body-animating > &,
-    .mdc-tab-body-active > & {
-        visibility: visible;
-    }
-
-    .tab-body-animating > & {
-        min-height: 1px;
-    }
-
-    .mdc-tab-group-dynamic-height & {
-        overflow: hidden;
-    }
-}
-
-.tab-body-content-can-animate {
-    transition: transform 200ms 1ms cubic-bezier(0.35, 0, 0.25, 1);
-
-    .mdc-tab-body-wrapper._animation-noopable & {
-        transition: none;
-    }
-}
-
-.tab-body-content-left {
-    transform: translate3d(-100%, 0, 0);
-}
-
-.tab-body-content-right {
-    transform: translate3d(100%, 0, 0);
-}