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

package/src/lib/v2/tabs/ink-bar.ts

@@ -1,226 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  InjectionToken,
-  Input,
-  OnDestroy,
-  OnInit,
-  QueryList,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-
-/**
- * Contract that an item must implement to participate in ink-bar activation.
- * Typically implemented by tab header items.
- */
-export interface InkBarItemContract extends OnInit, OnDestroy {
-  /** Reference to the host element used for positioning and class toggles. */
-  elementRef: ElementRef<HTMLElement>;
-  /**
-   * Activates the ink bar on this item, optionally animating from the
-   * previous indicator's client rect (for smooth transitions).
-   */
-  activateInkBar(previousIndicatorClientRect?: DOMRect): void;
-  /** Deactivates the ink bar on this item. */
-  deactivateInkBar(): void;
-  /** Whether the ink bar should fit the label content rather than full width. */
-  fitInkBarToContent: boolean;
-}
-
-/** CSS class added when the indicator is active. */
-const ACTIVE_CLASS = 'mdc-tab-indicator--active';
-
-/** CSS class used to temporarily disable transitions for initial positioning. */
-const NO_TRANSITION_CLASS = 'mdc-tab-indicator--no-transition';
-
-/**
- * Controller for moving the ink bar between a set of items.
- * Keeps track of the currently active item and coordinates activation/deactivation.
- */
-export class InkBar {
-  private _currentItem: InkBarItemContract | undefined;
-
-  /**
-   * @param _items QueryList of items that can host the ink bar.
-   */
-  constructor(private _items: QueryList<InkBarItemContract>) {}
-
-  /** Hides the ink bar and clears the current item reference. */
-  hide() {
-    this._items.forEach((item) => item.deactivateInkBar());
-    this._currentItem = undefined;
-  }
-
-  /**
-   * Aligns the ink bar to the given element, if there is a corresponding item.
-   * Performs a smooth transition from the previously active item when possible.
-   *
-   * @param element Host element to align the ink bar with.
-   */
-  alignToElement(element: HTMLElement) {
-    const correspondingItem = this._items.find((item) => item.elementRef.nativeElement === element);
-    const currentItem = this._currentItem;
-
-    if (correspondingItem === currentItem) {
-      return;
-    }
-
-    currentItem?.deactivateInkBar();
-
-    if (correspondingItem) {
-      // Previous DOM rect used to compute a transform for the entering animation.
-      const domRect = currentItem?.elementRef.nativeElement.getBoundingClientRect?.();
-
-      correspondingItem.activateInkBar(domRect);
-      this._currentItem = correspondingItem;
-    }
-  }
-}
-
-/**
- * Abstract base for an element that can host an ink bar.
- * Responsible for creating/attaching the indicator DOM and handling transitions.
- */
-@Directive()
-export abstract class InkBarItem implements OnInit, OnDestroy {
-  /** Host element reference. */
-  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  /** Root element of the ink bar indicator. */
-  private _inkBarElement: HTMLElement | null;
-  /** Inner content element of the ink bar (underline). */
-  private _inkBarContentElement: HTMLElement | null;
-  /** Whether the ink bar attaches to content width instead of full host width. */
-  private _fitToContent = false;
-
-  /**
-   * When `true`, append the ink bar inside `.mdc-tab__content` to fit label width,
-   * otherwise append directly to the host for full-width underline.
-   */
-  @Input({ transform: booleanAttribute })
-  get fitInkBarToContent(): boolean {
-    return this._fitToContent;
-  }
-  set fitInkBarToContent(newValue: boolean) {
-    if (this._fitToContent !== newValue) {
-      this._fitToContent = newValue;
-
-      if (this._inkBarElement) {
-        this._appendInkBarElement();
-      }
-    }
-  }
-
-  /**
-   * Activates the ink bar and, if `previousIndicatorClientRect` is provided,
-   * animates from the previous position/width for a smooth transition.
-   */
-  activateInkBar(previousIndicatorClientRect?: DOMRect) {
-    const element = this._elementRef.nativeElement;
-
-    if (!previousIndicatorClientRect || !element.getBoundingClientRect || !this._inkBarContentElement) {
-      element.classList.add(ACTIVE_CLASS);
-      return;
-    }
-
-    const currentClientRect = element.getBoundingClientRect();
-    const widthDelta = previousIndicatorClientRect.width / currentClientRect.width;
-    const xPosition = previousIndicatorClientRect.left - currentClientRect.left;
-
-    element.classList.add(NO_TRANSITION_CLASS);
-    this._inkBarContentElement.style.setProperty('transform', `translateX(${xPosition}px) scaleX(${widthDelta})`);
-
-    // Force style/layout flush so transition applies after class toggle.
-    element.getBoundingClientRect();
-
-    element.classList.remove(NO_TRANSITION_CLASS);
-    element.classList.add(ACTIVE_CLASS);
-    this._inkBarContentElement.style.setProperty('transform', '');
-  }
-
-  /** Deactivates the ink bar from this host item. */
-  deactivateInkBar() {
-    this._elementRef.nativeElement.classList.remove(ACTIVE_CLASS);
-  }
-
-  /** Lifecycle: create the indicator DOM on init. */
-  ngOnInit() {
-    this._createInkBarElement();
-  }
-
-  /** Lifecycle: remove indicator DOM on destroy. */
-  ngOnDestroy() {
-    this._inkBarElement?.remove();
-    this._inkBarElement = this._inkBarContentElement = null!;
-  }
-
-  /** Creates the ink bar root and content elements and appends them. */
-  private _createInkBarElement() {
-    const documentNode = this._elementRef.nativeElement.ownerDocument || document;
-    const inkBarElement = (this._inkBarElement = documentNode.createElement('span'));
-    const inkBarContentElement = (this._inkBarContentElement = documentNode.createElement('span'));
-
-    inkBarElement.className = 'mdc-tab-indicator';
-    inkBarContentElement.className = 'mdc-tab-indicator__content mdc-tab-indicator__content--underline';
-
-    inkBarElement.appendChild(this._inkBarContentElement);
-    this._appendInkBarElement();
-  }
-
-  /**
-   * Appends the ink bar into the appropriate container depending on
-   * {@link fitInkBarToContent} value.
-   */
-  private _appendInkBarElement() {
-    const parentElement = this._fitToContent
-      ? this._elementRef.nativeElement.querySelector('.mdc-tab__content')
-      : this._elementRef.nativeElement;
-
-    parentElement!.appendChild(this._inkBarElement!);
-  }
-}
-
-/**
- * Computes the left/width style values for positioning an ink bar
- * under the given element.
- */
-export interface _InkBarPositioner {
-  /**
-   * @param element Host element to measure.
-   * @returns CSS `left` and `width` values (in pixels with `px` suffix).
-   */
-  (element: HTMLElement): { left: string; width: string };
-}
-
-/**
- * Factory returning a default ink bar positioner based on `offsetLeft/offsetWidth`.
- * Useful as the default strategy; can be overridden via DI.
- */
-export function INK_BAR_POSITIONER_FACTORY(): _InkBarPositioner {
-  const method = (element: HTMLElement) => ({
-    left: element ? (element.offsetLeft || 0) + 'px' : '0',
-    width: element ? (element.offsetWidth || 0) + 'px' : '0',
-  });
-
-  return method;
-}
-
-/**
- * Injection token for providing an ink bar positioner function.
- *
- * @example Override in a module
- * ```ts
- * providers: [
- *   { provide: INK_BAR_POSITIONER, useFactory: myCustomPositionerFactory }
- * ]
- * ```
- *
- * @example Inject and use
- * ```ts
- * constructor(@Inject(INK_BAR_POSITIONER) private pos: _InkBarPositioner) {}
- * ```
- */
-export const INK_BAR_POSITIONER = new InjectionToken<_InkBarPositioner>('InkBarPositioner', {
-  providedIn: 'root',
-  factory: INK_BAR_POSITIONER_FACTORY,
-});