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

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

@@ -1,242 +0,0 @@
-import {FocusOrigin} from '@angular/cdk/a11y';
-import {merge, Observable, Subject} from 'rxjs';
-import {DialogRef} from '@angular/cdk/dialog';
-import {DialogPosition, MefDevDialogConfig} from './dialog-config';
-import {MDDialogContainer} from './dialog-container';
-import {filter, take} from 'rxjs/operators';
-import {ESCAPE, hasModifierKey} from '@angular/cdk/keycodes';
-import {GlobalPositionStrategy} from '@angular/cdk/overlay';
-import {ComponentRef} from '@angular/core';
-
-/**
- * Internal finite state for a dialog's lifecycle.
- * - OPEN:    visible and interactive
- * - CLOSING: exit animation playing or teardown in progress
- * - CLOSED:  fully closed and resources released
- */
-export enum DialogState {
-  OPEN,
-  CLOSING,
-  CLOSED,
-}
-
-/**
- * Strongly-typed wrapper around CDK's DialogRef with MEF/MD container integration.
- *
- * Responsibilities:
- * - Expose open/close lifecycle streams (afterOpened, beforeClosed, afterClosed).
- * - Respect `disableClose`, ESC and backdrop click behavior.
- * - Start/await container animations and provide a fallback close timeout.
- * - Bridge size/position/panel class updates to the underlying CDK dialog.
- * - Track the interaction type (mouse/keyboard) that triggered close for focus restoration.
- */
-export class MefDevDialogRef<T, R = any> {
-  /** Instance of the component hosted inside the dialog (if opened via component). */
-  componentInstance: T;
-
-  /** Low-level componentRef for advanced users (null for TemplateRef opens). */
-  readonly componentRef: ComponentRef<T> | null;
-
-  /** When true, ESC and backdrop click won't close the dialog. */
-  disableClose: boolean | undefined;
-
-  /** Dialog id (auto-generated unless provided in config). */
-  id: string;
-
-  /** Emits once when the dialog has finished its enter animation. */
-  private readonly _afterOpened = new Subject<void>();
-
-  /** Emits right before the dialog starts closing (with the result). */
-  private readonly _beforeClosed = new Subject<R | undefined>();
-
-  /** Cached result passed to `close(result)`; emitted via afterClosed. */
-  private _result: R | undefined;
-
-  /** Fallback timer that triggers `_finishDialogClose` if animation events don't arrive. */
-  private _closeFallbackTimeout: ReturnType<typeof setTimeout>;
-
-  /** Current lifecycle state of the dialog. */
-  private _state = DialogState.OPEN;
-
-  /** Input modality that caused the close (used for focus origin on restore). */
-  private _closeInteractionType: FocusOrigin | undefined;
-
-  constructor(
-    /** Underlying CDK dialog ref. */
-    private _ref: DialogRef<R, T>,
-    /** Immutable configuration used to open this dialog. */
-    private _config: MefDevDialogConfig,
-    /** Reference to the container component that hosts animations and structure. */
-    public _containerInstance: MDDialogContainer,
-  ) {
-    this.disableClose = _config.disableClose;
-    this.id = _ref.id;
-
-    // Apply a base host class for theming/layout.
-    _ref.addPanelClass('mdc-dialog-panel');
-
-    // When container reports it's fully opened, emit and complete `afterOpened`.
-    _containerInstance._animationStateChanged
-      .pipe(filter(event => event.state === 'opened'), take(1))
-      .subscribe(() => {
-        this._afterOpened.next();
-        this._afterOpened.complete();
-      });
-
-    // When container reports it's fully closed, cancel fallback and finalize close.
-    _containerInstance._animationStateChanged
-      .pipe(filter(event => event.state === 'closed'), take(1))
-      .subscribe(() => {
-        clearTimeout(this._closeFallbackTimeout);
-        this._finishDialogClose();
-      });
-
-    // If the overlay detaches (e.g., parent destroyed), finalize close immediately.
-    _ref.overlayRef.detachments().subscribe(() => {
-      this._beforeClosed.next(this._result);
-      this._beforeClosed.complete();
-      this._finishDialogClose();
-    });
-
-    // Default close interactions: backdrop click and ESC (unless disabled).
-    merge(
-      this.backdropClick(),
-      this.keydownEvents().pipe(
-        filter(event => event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)),
-      ),
-    ).subscribe(event => {
-      if (!this.disableClose) {
-        event.preventDefault();
-        _closeDialogVia(this, event.type === 'keydown' ? 'keyboard' : 'mouse');
-      }
-    });
-  }
-
-  /**
-   * Programmatically close the dialog with an optional result.
-   * Respects an optional `closePredicate` to veto the close.
-   */
-  close(dialogResult?: R): void {
-    const closePredicate = this._config.closePredicate;
-
-    // Allow the caller to veto closing based on the result, config, or component state.
-    if (closePredicate && !closePredicate(dialogResult, this._config, this.componentInstance)) {
-      return;
-    }
-
-    this._result = dialogResult;
-
-    // When container transitions to "closing", emit beforeClosed and start fallback timer.
-    this._containerInstance._animationStateChanged
-      .pipe(filter(event => event.state === 'closing'), take(1))
-      .subscribe(event => {
-        this._beforeClosed.next(dialogResult);
-        this._beforeClosed.complete();
-
-        // Remove the backdrop immediately to hint that closing has started.
-        this._ref.overlayRef.detachBackdrop();
-
-        // Fallback to ensure `_finishDialogClose` runs even if `closed` event doesn't fire.
-        this._closeFallbackTimeout = setTimeout(
-          () => this._finishDialogClose(),
-          event.totalTime + 100,
-        );
-      });
-
-    // Move into the CLOSING state and kick off exit animation on the container.
-    this._state = DialogState.CLOSING;
-    this._containerInstance._startExitAnimation();
-  }
-
-  /** Stream that emits once the dialog is fully opened (after enter animation). */
-  afterOpened(): Observable<void> {
-    return this._afterOpened;
-  }
-
-  /** Stream that emits the result after the dialog is fully closed and disposed. */
-  afterClosed(): Observable<R | undefined> {
-    return this._ref.closed;
-  }
-
-  /** Stream that emits right before the dialog starts closing with the result (if any). */
-  beforeClosed(): Observable<R | undefined> {
-    return this._beforeClosed;
-  }
-
-  /** Backdrop click stream (useful for custom close logic / analytics). */
-  backdropClick(): Observable<MouseEvent> {
-    return this._ref.backdropClick;
-  }
-
-  /** Keydown stream scoped to the dialog overlay (e.g., listen for ESC). */
-  keydownEvents(): Observable<KeyboardEvent> {
-    return this._ref.keydownEvents;
-  }
-
-  /**
-   * Updates the dialog position. If top/bottom or left/right are not provided,
-   * the dialog will be centered on that axis.
-   */
-  updatePosition(position?: DialogPosition): this {
-    let strategy = this._ref.config.positionStrategy as GlobalPositionStrategy;
-
-    if (position && (position.left || position.right)) {
-      position.left ? strategy.left(position.left) : strategy.right(position.right);
-    } else {
-      strategy.centerHorizontally();
-    }
-
-    if (position && (position.top || position.bottom)) {
-      position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
-    } else {
-      strategy.centerVertically();
-    }
-
-    this._ref.updatePosition();
-    return this;
-  }
-
-  /** Updates dialog width/height (CSS length values, e.g. '600px', '80vh'). */
-  updateSize(width: string = '', height: string = ''): this {
-    this._ref.updateSize(width, height);
-    return this;
-  }
-
-  /** Adds one or more CSS classes to the overlay panel. */
-  addPanelClass(classes: string | string[]): this {
-    this._ref.addPanelClass(classes);
-    return this;
-  }
-
-  /** Removes one or more CSS classes from the overlay panel. */
-  removePanelClass(classes: string | string[]): this {
-    this._ref.removePanelClass(classes);
-    return this;
-  }
-
-  /** Returns the current lifecycle state of the dialog. */
-  getState(): DialogState {
-    return this._state;
-  }
-
-  /**
-   * Finalizes the closing sequence:
-   * - Sets state to CLOSED
-   * - Closes underlying CDK ref (emits afterClosed with the result)
-   * - Clears strong reference to the component instance
-   */
-  private _finishDialogClose() {
-    this._state = DialogState.CLOSED;
-    this._ref.close(this._result, {focusOrigin: this._closeInteractionType});
-    this.componentInstance = null!;
-  }
-}
-
-/**
- * Helper to close a dialog and tag the close with the interaction origin.
- * Used by default ESC/backdrop handlers to restore focus appropriately.
- */
-export function _closeDialogVia<R>(ref: MefDevDialogRef<R>, interactionType: FocusOrigin, result?: R) {
-  (ref as unknown as {_closeInteractionType: FocusOrigin})._closeInteractionType = interactionType;
-  return ref.close(result);
-}

package/src/lib/v2/modals/dialog.scss

@@ -1,307 +0,0 @@
-@use '@angular/cdk';
-@use './../../styles/vars.scss' as color-vars;
-
-$dialog-content-max-height: 65vh !default;
-$dialog-button-horizontal-margin: 8px !default;
-$dialog-container-max-height: 95vh !default;
-
-.mdc-dialog-container {
-    width: 100%;
-    height: 100%;
-    display: block;
-    box-sizing: border-box;
-    max-height: inherit;
-    min-height: inherit;
-    min-width: inherit;
-    max-width: inherit;
-    outline: 0;
-}
-
-.cdk-overlay-pane.mdc-dialog-panel {
-    max-width: 560px;
-    min-width: 280px;
-
-    @media (max-width: 599px) {
-        max-width: calc(100vw - 32px);
-    }
-}
-
-.mdc-dialog-inner-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    box-sizing: border-box;
-    height: 100%;
-    opacity: 0;
-    transition: opacity linear var(--dialog-transition-duration, 150ms);
-    max-height: inherit;
-    min-height: inherit;
-    min-width: inherit;
-    max-width: inherit;
-
-    @each $pos in left, right, top, bottom {
-        .mdc-dialog--opening.mdc-animation-position-#{$pos} & {
-            animation: #{$pos}-enter var(--dialog-transition-duration, 150ms) cubic-bezier(0, 0, 0.2, 1) forwards;
-        }
-    }
-
-    @each $pos in left, right, top, bottom {
-        .mdc-dialog--closing.mdc-animation-position-#{$pos} & {
-            animation: #{$pos}-exit var(--dialog-transition-duration, 75ms) cubic-bezier(0.4, 0, 1, 1) backwards;
-        }
-    }
-
-    .mdc-dialog--closing & {
-        transition: opacity var(--dialog-transition-duration, 75ms) linear;
-        transform: none;
-    }
-
-    .mdc-dialog--open & {
-        opacity: 1;
-    }
-
-    .animation-noopable & {
-        transition: none;
-    }
-}
-
-.mdc-dialog-surface {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 0;
-    flex-shrink: 0;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    overflow-y: auto;
-    outline: 0;
-    transform: scale(0.8);
-    transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
-    max-height: inherit;
-    min-height: inherit;
-    min-width: inherit;
-    max-width: inherit;
-    box-shadow: none;
-    border-radius: 5px;
-    background-color: #fff8f8;
-
-    [dir='rtl'] & {
-        text-align: right;
-    }
-
-    .mdc-dialog--open &,
-    .mdc-dialog--closing & {
-        transform: none;
-    }
-
-    .animation-noopable & {
-        transition: none;
-    }
-
-    &::before {
-        position: absolute;
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        border: 2px solid transparent;
-        border-radius: inherit;
-        content: '';
-        pointer-events: none;
-    }
-}
-
-.mdc-dialog-title {
-    display: block;
-    position: relative;
-    flex-shrink: 0;
-    box-sizing: border-box;
-    margin: 0 0 1px;
-    padding: 6px 24px 13px;
-    border-bottom: 1px solid color-vars.$Light-Gray-2;
-
-    &::before {
-        display: inline-block;
-        width: 0;
-        height: 37px;
-        content: '';
-        vertical-align: 0;
-    }
-
-    [dir='rtl'] & {
-        text-align: right;
-    }
-
-    .mdc-dialog-container & {
-        color: #201a1b;
-        font-family: 'Montserrat';
-        line-height: 2rem;
-        font-size: 1.5rem;
-        font-weight: 400;
-        letter-spacing: 0.03125em;
-    }
-}
-
-.mdc-dialog-content {
-    display: block;
-    flex-grow: 1;
-    box-sizing: border-box;
-    margin: 0;
-    overflow: auto;
-    max-height: $dialog-content-max-height;
-
-    > :first-child {
-        margin-top: 0;
-    }
-
-    > :last-child {
-        margin-bottom: 0;
-    }
-
-    .mdc-dialog-container & {
-        color: #201a1b;
-        font-family: 'Montserrat';
-        line-height: 2rem;
-        font-size: 18px;
-        font-weight: 700;
-        letter-spacing: 0;
-    }
-
-    .mdc-dialog-container & {
-        padding: 20px 24px 0;
-    }
-
-    .mdc-dialog-container-with-actions & {
-        padding: 20px 24px 0;
-    }
-
-    .mdc-dialog-container .mdc-dialog-title + & {
-        padding-top: 0;
-    }
-}
-
-.mdc-dialog-actions {
-    display: flex;
-    position: relative;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    align-items: center;
-    box-sizing: border-box;
-    min-height: 52px;
-    margin: 0;
-    border-top: 1px solid transparent;
-    padding: 16px 24px;
-    justify-content: flex-end;
-
-    @include cdk.high-contrast {
-        border-top-color: CanvasText;
-    }
-
-    &.mdc-dialog-actions-align-start,
-    &[align='start'] {
-        justify-content: start;
-    }
-
-    &.mdc-dialog-actions-align-center,
-    &[align='center'] {
-        justify-content: center;
-    }
-
-    &.mdc-dialog-actions-align-end,
-    &[align='end'] {
-        justify-content: flex-end;
-    }
-
-    .button-base + .button-base,
-    .mdc-button-base + .mdc-button-base {
-        margin-left: $dialog-button-horizontal-margin;
-
-        [dir='rtl'] & {
-            margin-left: 0;
-            margin-right: $dialog-button-horizontal-margin;
-        }
-    }
-}
-
-.mdc-dialog-component-host {
-    display: contents;
-}
-
-.cdk-overlay-dark-backdrop {
-    background-color: rgba(0, 0, 0, 0.5);
-}
-
-@keyframes left-enter {
-    from {
-        transform: translateX(-100%);
-    }
-    to {
-        transform: none;
-    }
-}
-
-@keyframes left-exit {
-    from {
-        transform: none;
-    }
-    to {
-        transform: translateX(-100%);
-    }
-}
-
-@keyframes top-enter {
-    from {
-        transform: translateY(-100%);
-    }
-    to {
-        transform: none;
-    }
-}
-
-@keyframes top-exit {
-    from {
-        transform: none;
-    }
-    to {
-        transform: translateY(-100%);
-    }
-}
-
-@keyframes bottom-enter {
-    from {
-        transform: translateY(100%);
-    }
-    to {
-        transform: none;
-    }
-}
-
-@keyframes bottom-exit {
-    from {
-        transform: none;
-    }
-    to {
-        transform: translateY(100%);
-    }
-}
-
-@keyframes right-enter {
-    from {
-        transform: translateX(100%);
-    }
-    to {
-        transform: none;
-    }
-}
-
-@keyframes right-exit {
-    from {
-        transform: none;
-    }
-    to {
-        transform: translateX(100%);
-    }
-}