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

package/src/lib/v2/modals/dialog-container.html

@@ -1,5 +0,0 @@
-<div class="mdc-dialog-inner-container mdc-dialog__container">
-  <div class="mdc-dialog-surface mdc-dialog__surface">
-    <ng-template cdkPortalOutlet />
-  </div>
-</div>

package/src/lib/v2/modals/dialog-container.ts

@@ -1,243 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ComponentRef,
-  EventEmitter,
-  OnDestroy,
-  ViewEncapsulation,
-} from '@angular/core';
-import { MefDevDialogConfig } from './dialog-config';
-import { CdkDialogContainer } from '@angular/cdk/dialog';
-import { coerceNumberProperty } from '@angular/cdk/coercion';
-import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
-
-/** Legacy-style animation event payload used by the dialog service/ref. */
-interface LegacyDialogAnimationEvent {
-  state: 'opened' | 'opening' | 'closing' | 'closed';
-  totalTime: number;
-}
-
-/** BEM-style classes toggled during open/close sequences. */
-const OPEN_CLASS = 'mdc-dialog--open';
-const OPENING_CLASS = 'mdc-dialog--opening';
-const CLOSING_CLASS = 'mdc-dialog--closing';
-
-/** Default animation durations (ms) if not overridden by config. */
-export const OPEN_ANIMATION_DURATION = 150;
-export const CLOSE_ANIMATION_DURATION = 75;
-
-@Component({
-  selector: 'md-dialog-container',
-  templateUrl: 'dialog-container.html',
-  styleUrl: 'dialog.scss',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.Default,
-  imports: [CdkPortalOutlet],
-  host: {
-    class: 'mdc-dialog-container mdc-dialog',
-    tabindex: '-1',
-    '[attr.aria-modal]': '_config.ariaModal',
-    '[id]': '_config.id',
-    '[attr.role]': '_config.role',
-    // If an explicit ariaLabel is provided, don't set aria-labelledby.
-    '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledByQueue[0]',
-    '[attr.aria-label]': '_config.ariaLabel',
-    '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
-    '[class.animation-noopable]': '!_animationsEnabled',
-    '[class.mdc-dialog-container-with-actions]': '_actionSectionCount > 0',
-  },
-})
-export class MDDialogContainer extends CdkDialogContainer<MefDevDialogConfig> implements OnDestroy {
-  /** Emits animation lifecycle states understood by the dialog ref. */
-  _animationStateChanged = new EventEmitter<LegacyDialogAnimationEvent>();
-
-  /** Master flag to enable/disable animations for this container instance. */
-  _animationsEnabled = true;
-
-  /** Count of projected action sections (affects layout class). */
-  protected _actionSectionCount = 0;
-
-  /** Cached host element for class and style mutations. */
-  private _hostElement: HTMLElement = this._elementRef.nativeElement;
-
-  /** Effective enter animation duration derived from config (or defaults). */
-  private _enterAnimationDuration = this._animationsEnabled
-    ? parseCssTime(this._config.enterAnimationDuration) ?? OPEN_ANIMATION_DURATION
-    : 0;
-
-  /** Effective exit animation duration derived from config (or defaults). */
-  private _exitAnimationDuration = this._animationsEnabled
-    ? parseCssTime(this._config.exitAnimationDuration) ?? CLOSE_ANIMATION_DURATION
-    : 0;
-
-  /** Timer id for open/close fallback completion. */
-  private _animationTimer: ReturnType<typeof setTimeout> | null = null;
-
-  /** After content is attached, kick off the open animation. */
-  protected override _contentAttached(): void {
-    super._contentAttached();
-    this._startOpenAnimation();
-  }
-
-  /** Optional position modifier class for origin-based animations. */
-  private ANIMATION_POSITION_CLASS = this._config.animationPosition
-    ? `mdc-animation-position-${this._config.animationPosition}`
-    : null;
-
-  /** Starts the open animation sequence and emits "opening". */
-  private _startOpenAnimation() {
-    this._animationStateChanged.emit({ state: 'opening', totalTime: this._enterAnimationDuration });
-
-    if (this._animationsEnabled) {
-      // Expose duration to CSS via a custom property if styles rely on it.
-      this._hostElement.style.setProperty(TRANSITION_DURATION_PROPERTY, `${this._enterAnimationDuration}ms`);
-
-      // Defer class application to the next frame to ensure transitions kick in.
-      this._requestAnimationFrame(() => {
-        this._hostElement.classList.add(OPENING_CLASS, OPEN_CLASS);
-        if (this.ANIMATION_POSITION_CLASS) {
-          this._hostElement.classList.add(this.ANIMATION_POSITION_CLASS);
-        }
-      });
-
-      // Provide a JS fallback in case transition events aren't delivered.
-      this._waitForAnimationToComplete(this._enterAnimationDuration, this._finishDialogOpen);
-    } else {
-      // No animations: immediately mark as open and finish sequence in a microtask.
-      this._hostElement.classList.add(OPEN_CLASS);
-      Promise.resolve().then(() => this._finishDialogOpen());
-    }
-  }
-
-  /** Public entrypoint called by the ref to start the close sequence. */
-  _startExitAnimation(): void {
-    this._animationStateChanged.emit({ state: 'closing', totalTime: this._exitAnimationDuration });
-    this._hostElement.classList.remove(OPEN_CLASS);
-
-    if (this._animationsEnabled) {
-      this._hostElement.style.setProperty(TRANSITION_DURATION_PROPERTY, `${this._exitAnimationDuration}ms`);
-
-      this._requestAnimationFrame(() => {
-        this._hostElement.classList.add(CLOSING_CLASS);
-        if (this.ANIMATION_POSITION_CLASS) {
-          this._hostElement.classList.add(this.ANIMATION_POSITION_CLASS);
-        }
-      });
-
-      // JS fallback for the exit sequence as well.
-      this._waitForAnimationToComplete(this._exitAnimationDuration, this._finishDialogClose);
-    } else {
-      Promise.resolve().then(() => this._finishDialogClose());
-    }
-  }
-
-  /** Tracks action sections; used to toggle a host layout class. */
-  _updateActionSectionCount(delta: number) {
-    this._actionSectionCount += delta;
-    this._changeDetectorRef.markForCheck();
-  }
-
-  /** Finishes open sequence: clear classes and emit "opened". */
-  private _finishDialogOpen = () => {
-    this._clearAnimationClasses();
-    this._openAnimationDone(this._enterAnimationDuration);
-  };
-
-  /** Finishes close sequence: clear classes and emit "closed". */
-  private _finishDialogClose = () => {
-    this._clearAnimationClasses();
-    this._animationStateChanged.emit({ state: 'closed', totalTime: this._exitAnimationDuration });
-  };
-
-  /** Removes transient animation classes (and optional position class). */
-  private _clearAnimationClasses() {
-    this._hostElement.classList.remove(OPENING_CLASS, CLOSING_CLASS);
-    if (this.ANIMATION_POSITION_CLASS) {
-      this._hostElement.classList.remove(this.ANIMATION_POSITION_CLASS);
-    }
-  }
-
-  /**
-   * Sets/refreshes a timeout to complete the animation sequence. This acts as a
-   * fallback when relying on CSS transitions without guaranteed end events.
-   */
-  private _waitForAnimationToComplete(duration: number, callback: () => void) {
-    if (this._animationTimer !== null) {
-      clearTimeout(this._animationTimer);
-    }
-    this._animationTimer = setTimeout(callback, duration);
-  }
-
-  /**
-   * Schedules a callback on the next animation frame, outside Angular,
-   * to ensure CSS transitions are applied predictably.
-   */
-  private _requestAnimationFrame(callback: () => void) {
-    this._ngZone.runOutsideAngular(() => {
-      if (typeof requestAnimationFrame === 'function') {
-        requestAnimationFrame(callback);
-      } else {
-        callback();
-      }
-    });
-  }
-
-  /** Focus handling after content attachment depending on `delayFocusTrap` config. */
-  protected override _captureInitialFocus(): void {
-    if (!this._config.delayFocusTrap) {
-      this._trapFocus();
-    }
-  }
-
-  /** Called when open animation completes to emit "opened" and (optionally) trap focus. */
-  protected _openAnimationDone(totalTime: number) {
-    if (this._config.delayFocusTrap) {
-      this._trapFocus();
-    }
-    this._animationStateChanged.next({ state: 'opened', totalTime });
-  }
-
-  /** Cleanup any pending timers on destroy. */
-  override ngOnDestroy() {
-    super.ngOnDestroy();
-    if (this._animationTimer !== null) {
-      clearTimeout(this._animationTimer);
-    }
-  }
-
-  /**
-   * Decorates the root component host element with a class so that card/panel
-   * styles can target it specifically when used inside a dialog.
-   */
-  override attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
-    const ref = super.attachComponentPortal(portal);
-    ref.location.nativeElement.classList.add('mdc-dialog-component-host');
-    return ref;
-  }
-}
-
-/** CSS custom property used by styles to read the transition duration. */
-const TRANSITION_DURATION_PROPERTY = '--dialog-transition-duration';
-
-/**
- * Parses a CSS time value (e.g., '150ms', '0.15s', '0') into milliseconds.
- * Returns null when the input is undefined or cannot be parsed.
- */
-function parseCssTime(time: string | number | undefined): number | null {
-  if (time == null) {
-    return null;
-  }
-  if (typeof time === 'number') {
-    return time;
-  }
-  if (time.endsWith('ms')) {
-    return coerceNumberProperty(time.substring(0, time.length - 2));
-  }
-  if (time.endsWith('s')) {
-    return coerceNumberProperty(time.substring(0, time.length - 1)) * 1000;
-  }
-  if (time === '0') {
-    return 0;
-  }
-  return null;
-}

package/src/lib/v2/modals/dialog-content-directives.ts

@@ -1,217 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  Input,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  SimpleChanges,
-  inject,
-} from '@angular/core';
-import {_IdGenerator} from '@angular/cdk/a11y';
-import {CdkScrollable} from '@angular/cdk/scrolling';
-
-import {MDDialog} from './dialog';
-import {_closeDialogVia, MefDevDialogRef} from './dialog-ref';
-
-/**
- * Button-like directive that closes the nearest dialog when clicked.
- *
- * Usage:
- *   <button md-dialog-close>Close</button>
- *   <button mdDialogClose="resultValue">Save</button>
- *
- * - It tries to inject the current MefDevDialogRef; if not available,
- *   it finds the nearest dialog container in the DOM and resolves the ref from MDDialog.openDialogs.
- * - On click, it calls `_closeDialogVia` with an interaction origin ('mouse' or 'keyboard')
- *   so the focus can be restored appropriately.
- */
-@Directive({
-  selector: '[md-dialog-close], [mdDialogClose]',
-  exportAs: 'mdDialogClose',
-  host: {
-    '(click)': '_onButtonClick($event)',
-    '[attr.aria-label]': 'ariaLabel || null',
-    '[attr.type]': 'type',
-  },
-})
-export class MDDialogClose implements OnInit, OnChanges {
-  /** Injected dialog ref when available (undefined if used outside projected dialog content). */
-  dialogRef = inject<MefDevDialogRef<any>>(MefDevDialogRef, {optional: true})!;
-  /** Host element reference (used for DOM traversal when ref is not injected). */
-  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  /** Dialog service used to access `openDialogs` for fallback lookup. */
-  private _dialog = inject(MDDialog);
-
-  /** Optional aria-label for the closing button. */
-  @Input('aria-label') ariaLabel: string;
-  /** Native button type; defaults to "button" to avoid accidental form submit. */
-  @Input() type: 'submit' | 'button' | 'reset' = 'button';
-  /** Preferred input for a close result (dash-cased attribute). */
-  @Input('dialog-close') dialogResult: any;
-  /** CamelCased alias of the same input (kept for API parity & template style). */
-  @Input('dialogClose') dialogClose: any;
-
-  constructor() {}
-
-  /** Resolve dialogRef if it wasn't injected (e.g., directive used in a nested view). */
-  ngOnInit() {
-    if (!this.dialogRef) {
-      this.dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs)!;
-    }
-  }
-
-  /** Mirror `dialogClose` into `dialogResult` when either input changes. */
-  ngOnChanges(changes: SimpleChanges) {
-    const proxiedChange = changes['dialogClose'] || changes['dialogCloseResult'];
-    if (proxiedChange) {
-      this.dialogResult = proxiedChange.currentValue;
-    }
-  }
-
-  /** Click handler: close the dialog and tag the interaction origin for focus restoration. */
-  _onButtonClick(event: MouseEvent) {
-    _closeDialogVia(
-      this.dialogRef,
-      // Heuristic: 0/0 screen coords generally indicate keyboard activation (e.g., Space/Enter).
-      event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse',
-      this.dialogResult,
-    );
-  }
-}
-
-/**
- * Base class for directives that represent structural sections within a dialog
- * (e.g., title area, actions area). It:
- * - Resolves the dialog ref by injection or DOM traversal.
- * - Calls `_onAdd()` when attached to the DOM (after microtask) so the container
- *   can update ARIA attributes or layout counts.
- * - Calls `_onRemove()` when destroyed so the container can revert those changes.
- */
-@Directive()
-export abstract class DialogLayoutSection implements OnInit, OnDestroy {
-  /** Reference to the owning dialog (if any). */
-  protected _dialogRef = inject<MefDevDialogRef<any>>(MefDevDialogRef, {optional: true})!;
-  /** Host element reference for DOM traversal fallback. */
-  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  /** Dialog service used for fallback dialog lookup. */
-  private _dialog = inject(MDDialog);
-
-  // Overload kept for symmetry with other directives.
-  constructor(...args: unknown[]);
-  constructor() {}
-
-  /** Hook for subclasses to add themselves to the container (e.g., ARIA wiring, layout counters). */
-  protected abstract _onAdd(): void;
-  /** Hook for subclasses to remove themselves from the container. */
-  protected abstract _onRemove(): void;
-
-  ngOnInit() {
-    if (!this._dialogRef) {
-      this._dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs)!;
-    }
-    if (this._dialogRef) {
-      // Defer to next microtask so container/DOM are fully ready.
-      Promise.resolve().then(() => {
-        this._onAdd();
-      });
-    }
-  }
-
-  ngOnDestroy() {
-    const instance = this._dialogRef?._containerInstance;
-    if (instance) {
-      // Defer to keep symmetry with _onAdd timing and avoid mid-change CD issues.
-      Promise.resolve().then(() => {
-        this._onRemove();
-      });
-    }
-  }
-}
-
-/**
- * Dialog title directive.
- *
- * - Adds semantic/title classes to the host.
- * - Generates a unique id that is used to label the dialog via `aria-labelledby`.
- * - Notifies the container to add/remove this id from its aria-labelledby list.
- */
-@Directive({
-  selector: '[md-dialog-title], [mdDialogTitle]',
-  exportAs: 'mdDialogTitle',
-  host: {
-    'class': 'mdc-dialog-title mdc-dialog__title',
-    '[id]': 'id',
-  },
-})
-export class MDDialogTitle extends DialogLayoutSection {
-  /** Unique id used by the container for aria-labelledby. */
-  @Input() id: string = inject(_IdGenerator).getId('mdc-dialog-title-');
-
-  /** Register this title id with the container for a11y. */
-  protected _onAdd() {
-    this._dialogRef._containerInstance?._addAriaLabelledBy?.(this.id);
-  }
-
-  /** Unregister this title id on destroy. */
-  protected override _onRemove(): void {
-    this._dialogRef?._containerInstance?._removeAriaLabelledBy?.(this.id);
-  }
-}
-
-/**
- * Scrollable content section of the dialog.
- * - Applies MDC content classes.
- * - Attaches `CdkScrollable` so consumers/tools can query/observe scroll.
- */
-@Directive({
-  selector: `[md-dialog-content], md-dialog-content, [mdDialogContent]`,
-  host: {'class': 'mdc-dialog-content mdc-dialog__content'},
-  hostDirectives: [CdkScrollable],
-})
-export class MDDialogContent {}
-
-/**
- * Action row of the dialog (typically hosts buttons).
- * - Applies alignment classes based on `align` input.
- * - Notifies the container about the presence of an actions section so it can
- *   adjust layout (e.g., paddings, separators).
- */
-@Directive({
-  selector: `[md-dialog-actions], md-dialog-actions, [mdDialogActions]`,
-  host: {
-    'class': 'mdc-dialog-actions mdc-dialog__actions',
-    '[class.mdc-dialog-actions-align-start]': 'align === "start"',
-    '[class.mdc-dialog-actions-align-center]': 'align === "center"',
-    '[class.mdc-dialog-actions-align-end]': 'align === "end"',
-  },
-})
-export class MDDialogActions extends DialogLayoutSection {
-  /** Horizontal alignment for the action buttons. */
-  @Input() align?: 'start' | 'center' | 'end';
-
-  /** Tell the container an actions section was added. */
-  protected _onAdd() {
-    this._dialogRef._containerInstance?._updateActionSectionCount?.(1);
-  }
-
-  /** Tell the container an actions section was removed. */
-  protected override _onRemove(): void {
-    this._dialogRef._containerInstance?._updateActionSectionCount?.(-1);
-  }
-}
-
-/**
- * Finds the closest MD dialog container element in the ancestors of `element`
- * and returns its corresponding MefDevDialogRef from the `openDialogs` stack.
- *
- * This is a fallback for cases where directives are used outside of the primary
- * injection context but still live inside the dialog DOM subtree.
- */
-function getClosestDialog(element: ElementRef<HTMLElement>, openDialogs: MefDevDialogRef<any>[]) {
-  let parent: HTMLElement | null = element.nativeElement.parentElement;
-  while (parent && !parent.classList.contains('mdc-dialog-container')) {
-    parent = parent.parentElement;
-  }
-  return parent ? openDialogs.find(dialog => dialog.id === parent!.id) : null;
-}