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

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

@@ -1,310 +0,0 @@
-import { Direction, Directionality } from '@angular/cdk/bidi';
-import { CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
-import { CdkScrollable } from '@angular/cdk/scrolling';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Directive,
-  ElementRef,
-  EventEmitter,
-  Injector,
-  Input,
-  NgZone,
-  OnDestroy,
-  OnInit,
-  Output,
-  Renderer2,
-  ViewChild,
-  ViewEncapsulation,
-  afterNextRender,
-  inject,
-} from '@angular/core';
-import { Subscription } from 'rxjs';
-import { startWith } from 'rxjs/operators';
-
-@Directive({ selector: '[mdTabBodyHost]' })
-/**
- * Portal host that attaches/detaches tab body content at the right times,
- * driven by the owning {@link MDTabBody}.
- *
- * @public
- */
-export class TabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestroy {
-  /** The owning tab body that drives attach/detach. */
-  private _host = inject(MDTabBody);
-
-  /** Subscription to the "before centering" notifier. */
-  private _centeringSub = Subscription.EMPTY;
-  /** Subscription to the "after leaving center" notifier. */
-  private _leavingSub = Subscription.EMPTY;
-
-  constructor() {
-    super();
-  }
-
-  /** Wires up listeners to mount/unmount the portal at the right lifecycle moments. */
-  override ngOnInit(): void {
-    super.ngOnInit();
-    this._centeringSub = this._host._beforeCentering
-      .pipe(startWith(this._host._isCenterPosition()))
-      .subscribe((isCentering: boolean) => {
-        if (this._host._content && isCentering && !this.hasAttached()) {
-          this.attach(this._host._content);
-        }
-      });
-
-    this._leavingSub = this._host._afterLeavingCenter.subscribe(() => {
-      if (!this._host.preserveContent) {
-        this.detach();
-      }
-    });
-  }
-
-  /** Cleans up subscriptions and outlet resources. */
-  override ngOnDestroy(): void {
-    super.ngOnDestroy();
-    this._centeringSub.unsubscribe();
-    this._leavingSub.unsubscribe();
-  }
-}
-
-/** Position of a tab body relative to the active (center) body. */
-export type TabBodyPositionState = 'left' | 'center' | 'right';
-/** Direction from which the tab body originated (reserved for animations). */
-export type TabBodyOriginState = 'left' | 'right';
-
-@Component({
-  selector: 'md-tab-body',
-  templateUrl: 'tab-body.html',
-  styleUrl: 'tab-body.scss',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.Default,
-  host: {
-    class: 'mdc-tab-body',
-    '[attr.inert]': '_position === "center" ? null : ""',
-  },
-  imports: [TabBodyPortal, CdkScrollable],
-})
-/**
- * A single tab body container that animates between left/center/right positions.
- * Handles lifecycle of its projected content via {@link TabBodyPortal}.
- *
- * @remarks
- * - Emits sizing and transition lifecycle events to coordinate with parent headers.
- * - Supports LTR/RTL via {@link Directionality}.
- * - Allows disabling animations by setting {@link animationDuration} to `"0ms"`/`"0s"`.
- *
- * @example Attaching content
- * ```html
- * <md-tab-body [content]="portal" [preserveContent]="true"></md-tab-body>
- * <ng-template cdk-portal #portal> ... </ng-template>
- * ```
- */
-export class MDTabBody implements OnInit, OnDestroy {
-  /** Host element reference for class toggles and measurement. */
-  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  /** Optional bidi service to map positions in RTL. */
-  private _dir = inject(Directionality, { optional: true });
-  /** For scheduling and transition fallback timers. */
-  private _ngZone = inject(NgZone);
-  /** Injector used by `afterNextRender` callbacks. */
-  private _injector = inject(Injector);
-  /** Renderer for passive DOM event bindings (transition events). */
-  private _renderer = inject(Renderer2);
-
-  /** Stored cleanup callbacks for event listeners. */
-  private _eventCleanups?: (() => void)[];
-  /** Whether OnInit finished; used to guard transition fallbacks. */
-  private _initialized: boolean;
-  /** Fallback timer to simulate transitions if needed. */
-  private _fallbackTimer: ReturnType<typeof setTimeout>;
-  /** Relative position index provided by parent: -1, 0, +1, ... */
-  private _positionIndex: number;
-  /** Directionality subscription to recompute when RTL changes. */
-  private _dirChangeSubscription = Subscription.EMPTY;
-
-  /** Current position state ('left' | 'center' | 'right'). */
-  _position: TabBodyPositionState;
-  /** Previous position state to know if we're entering/leaving center. */
-  protected _previousPosition: TabBodyPositionState;
-
-  /**
-   * Emits the tab body's `clientHeight` when starting to center.
-   * Useful for parent to resize the container.
-   */
-  @Output() readonly _onCentering: EventEmitter<number> = new EventEmitter<number>();
-  /** Indicates whether we're about to center (`true`) or not (`false`). */
-  @Output() readonly _beforeCentering: EventEmitter<boolean> = new EventEmitter<boolean>();
-  /** Fires after we've left the center position. */
-  readonly _afterLeavingCenter: EventEmitter<void> = new EventEmitter<void>();
-  /** Emits when the body has finished centering transition. */
-  @Output() readonly _onCentered: EventEmitter<void> = new EventEmitter<void>(true);
-
-  /** Outlet that actually attaches/detaches the `TemplatePortal`. */
-  @ViewChild(TabBodyPortal) _portalHost: TabBodyPortal;
-  /** Reference to the element with the transition (the inner content). */
-  @ViewChild('content') _contentElement: ElementRef<HTMLElement> | undefined;
-
-  /** The content portal to render for this tab body. */
-  @Input('content') _content: TemplatePortal;
-  /** Duration of CSS transitions (e.g., `"500ms"`, `"0ms"`). */
-  @Input() animationDuration: string = '500ms';
-  /** Whether to leave the content attached when not centered. */
-  @Input() preserveContent: boolean = false;
-
-  /**
-   * Relative position index set by parent (negative = left, 0 = center, positive = right).
-   * This setter maps index → position state considering layout direction (LTR/RTL).
-   */
-  @Input()
-  set position(position: number) {
-    this._positionIndex = position;
-    this._computePositionAnimationState();
-  }
-
-  constructor() {
-    if (this._dir) {
-      const changeDetectorRef = inject(ChangeDetectorRef);
-      this._dirChangeSubscription = this._dir.change.subscribe((dir: Direction) => {
-        this._computePositionAnimationState(dir);
-        changeDetectorRef.markForCheck();
-      });
-    }
-  }
-
-  /**
-   * Binds transition listeners and emits initial centering height if already centered.
-   * Lifecycle: `OnInit`.
-   */
-  ngOnInit() {
-    this._bindTransitionEvents();
-
-    if (this._position === 'center') {
-      this._setActiveClass(true);
-      afterNextRender(() => this._onCentering.emit(this._elementRef.nativeElement.clientHeight), {
-        injector: this._injector,
-      });
-    }
-
-    this._initialized = true;
-  }
-
-  /** Removes listeners, timers, and subscriptions. */
-  ngOnDestroy() {
-    clearTimeout(this._fallbackTimer);
-    this._eventCleanups?.forEach((cleanup) => cleanup());
-    this._dirChangeSubscription.unsubscribe();
-  }
-
-  /**
-   * Attaches listeners for CSS transition lifecycle.
-   * These run outside Angular to avoid change detection storms.
-   */
-  private _bindTransitionEvents() {
-    this._ngZone.runOutsideAngular(() => {
-      const element = this._elementRef.nativeElement;
-
-      const transitionDone = (event: TransitionEvent) => {
-        if (event.target === this._contentElement?.nativeElement) {
-          this._elementRef.nativeElement.classList.remove('tab-body-animating');
-          if (event.type === 'transitionend') {
-            this._transitionDone();
-          }
-        }
-      };
-
-      this._eventCleanups = [
-        this._renderer.listen(element, 'transitionstart', (event: TransitionEvent) => {
-          if (event.target === this._contentElement?.nativeElement) {
-            this._elementRef.nativeElement.classList.add('tab-body-animating');
-            this._transitionStarted();
-          }
-        }),
-        this._renderer.listen(element, 'transitionend', transitionDone),
-        this._renderer.listen(element, 'transitioncancel', transitionDone),
-      ];
-    });
-  }
-
-  /**
-   * Called when a transition starts; emits sizing and "beforeCentering" status.
-   * Triggers `_onCentering` when entering the center position.
-   */
-  private _transitionStarted() {
-    clearTimeout(this._fallbackTimer);
-    const isCentering = this._position === 'center';
-    this._beforeCentering.emit(isCentering);
-    if (isCentering) {
-      this._onCentering.emit(this._elementRef.nativeElement.clientHeight);
-    }
-  }
-
-  /**
-   * Called when a transition completes; emits `_onCentered` or `_afterLeavingCenter`
-   * depending on the current/previous positions.
-   */
-  private _transitionDone() {
-    if (this._position === 'center') {
-      this._onCentered.emit();
-    } else if (this._previousPosition === 'center') {
-      this._afterLeavingCenter.emit();
-    }
-  }
-
-  /**
-   * Toggles the active CSS class for the currently selected tab body.
-   * @param isActive Whether this body is currently active (centered).
-   */
-  _setActiveClass(isActive: boolean) {
-    this._elementRef.nativeElement.classList.toggle('mdc-tab-body-active', isActive);
-  }
-
-  /** Resolves current layout direction (LTR/RTL). */
-  _getLayoutDirection(): Direction {
-    return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
-  }
-
-  /** True when this body is the centered (active) one. */
-  _isCenterPosition(): boolean {
-    return this._positionIndex === 0;
-  }
-
-  /**
-   * Maps the numeric index to a semantic position state and handles fallback simulation
-   * in cases where animations are disabled or the transition might not fire.
-   *
-   * @param dir Optional direction override; defaults to current {@link Directionality}.
-   */
-  private _computePositionAnimationState(dir: Direction = this._getLayoutDirection()) {
-    this._previousPosition = this._position;
-
-    if (this._positionIndex < 0) {
-      this._position = dir == 'ltr' ? 'left' : 'right';
-    } else if (this._positionIndex > 0) {
-      this._position = dir == 'ltr' ? 'right' : 'left';
-    } else {
-      this._position = 'center';
-    }
-
-    if (this._animationsDisabled()) {
-      this._simulateTransitionEvents();
-    } else if (this._initialized && (this._position === 'center' || this._previousPosition === 'center')) {
-      clearTimeout(this._fallbackTimer);
-      this._fallbackTimer = this._ngZone.runOutsideAngular(() =>
-        setTimeout(() => this._simulateTransitionEvents(), 100)
-      );
-    }
-  }
-
-  /** Fires synthetic transitionstart/transitionend callbacks in sequence. */
-  private _simulateTransitionEvents() {
-    this._transitionStarted();
-    afterNextRender(() => this._transitionDone(), { injector: this._injector });
-  }
-
-  /** Whether animations are effectively disabled by config. */
-  private _animationsDisabled() {
-    return this.animationDuration === '0ms' || this.animationDuration === '0s';
-  }
-}

package/src/lib/v2/tabs/tab-content.ts

@@ -1,12 +0,0 @@
-import { Directive, InjectionToken, TemplateRef, inject } from '@angular/core';
-
-export const TAB_CONTENT = new InjectionToken<MDTabContent>('TabContent');
-
-@Directive({
-    selector: '[mdTabContent]',
-})
-export class MDTabContent {
-    template = inject<TemplateRef<any>>(TemplateRef);
-
-    constructor() {}
-}

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

@@ -1,74 +0,0 @@
-<md-tab-header
-    #tabHeader
-    [ngClass]="{
-        'tabs-legacy': isLegacyMode
-    }"
-    [hideInkBar]="hideInkBar"
-    [selectedIndex]="selectedIndex || 0"
-    [disablePagination]="disablePagination"
-    [aria-label]="ariaLabel"
-    [aria-labelledby]="ariaLabelledby"
-    (indexFocused)="_focusChanged($event)"
-    (selectFocusedIndex)="selectedIndex = $event"
->
-    @for (tab of _tabs; track tab) {
-    <div
-        class="focus-indicator"
-        [ngClass]="{
-            'mdc-tab': !isLegacyMode,
-            'mdc-tab-legacy': isLegacyMode
-        }"
-        #tabNode
-        role="tab"
-        mdTabLabelWrapper
-        cdkMonitorElementFocus
-        [id]="_getTabLabelId(tab, $index)"
-        [attr.tabIndex]="_getTabIndex($index)"
-        [attr.aria-posinset]="$index + 1"
-        [attr.aria-setsize]="_tabs.length"
-        [attr.aria-controls]="_getTabContentId($index)"
-        [attr.aria-selected]="selectedIndex === $index"
-        [attr.aria-label]="tab.ariaLabel || null"
-        [attr.aria-labelledby]="(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null"
-        [class.mdc-tab--active]="selectedIndex === $index"
-        [class]="tab.labelClass"
-        [disabled]="tab.disabled"
-        [fitInkBarToContent]="fitInkBarToContent"
-        (click)="_handleClick(tab, tabHeader, $index)"
-        (cdkFocusChange)="_tabFocusChanged($event, $index)"
-    >
-        <span class="mdc-tab__ripple"></span>
-        <span class="mdc-tab__content">
-            <span class="mdc-tab__text-label">
-                @if (tab.templateLabel) {
-                <ng-template [cdkPortalOutlet]="tab.templateLabel"></ng-template>
-                } @else {{{tab.textLabel}}}
-            </span>
-        </span>
-    </div>
-    }
-</md-tab-header>
-
-@if (_isServer) {
-<ng-content />
-}
-
-<div class="mdc-tab-body-wrapper" #tabBodyWrapper>
-    @for (tab of _tabs; track tab;) {
-    <md-tab-body
-        role="tabpanel"
-        [id]="_getTabContentId($index)"
-        [attr.tabindex]="(contentTabIndex != null && selectedIndex === $index) ? contentTabIndex : null"
-        [attr.aria-labelledby]="_getTabLabelId(tab, $index)"
-        [attr.aria-hidden]="selectedIndex !== $index"
-        [class]="tab.bodyClass"
-        [content]="tab.content!"
-        [position]="tab.position!"
-        [animationDuration]="animationDuration"
-        [preserveContent]="preserveContent"
-        (_onCentered)="_removeTabBodyWrapperHeight()"
-        (_onCentering)="_setTabBodyWrapperHeight($event)"
-        (_beforeCentering)="_bodyCentered($event)"
-    />
-    }
-</div>