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

package/src/lib/v2/executors/stepper.scss

@@ -1,299 +0,0 @@
-@use 'sass:math';
-@use '@angular/cdk';
-@use './../../styles/vars.scss' as color-vars;
-
-$header-height: 72px !default;
-$header-minimum-height: 42px !default;
-$header-maximum-height: $header-height !default;
-
-$density-config: (
-    height: (
-        default: $header-height,
-        maximum: $header-maximum-height,
-        minimum: $header-minimum-height,
-    ),
-) !default;
-
-$label-header-height: 24px;
-$label-position-bottom-top-gap: 16px;
-$label-min-width: 50px;
-
-$vertical-stepper-content-margin: 36px;
-
-$top-gap: 46px;
-$side-gap: 6px;
-$line-width: 1px;
-$line-gap: 8px;
-
-$step-sub-label-font-size: 12px;
-$step-header-icon-size: 16px;
-
-@function _get-vertical-padding-calc() {
-    $height: 72px;
-    @return calc(calc(#{$height} - #{$label-header-height}) / 2);
-}
-
-.stepper-vertical,
-.stepper-horizontal {
-    display: block;
-    font-family: 'Montserrat';
-    font-size: 14px;
-    color: color-vars.$Black-Color;
-}
-
-.horizontal-stepper-header-container {
-    white-space: nowrap;
-    display: flex;
-    align-items: center;
-
-    padding-bottom: 40px;
-
-    .stepper-label-position-bottom & {
-        align-items: flex-start;
-    }
-
-    .stepper-header-position-bottom & {
-        order: 1;
-    }
-}
-
-.stepper-horizontal-line {
-    border-top-width: $line-width;
-    border-top-style: solid;
-    flex: auto;
-    height: 0;
-    margin: 0 $line-gap - $side-gap;
-    min-width: 32px;
-    border-top-color: #889392;
-
-    .stepper-label-position-bottom & {
-        $vertical-padding: _get-vertical-padding-calc();
-        margin: 0;
-        min-width: 0;
-        position: relative;
-
-        top: calc(#{$vertical-padding} + #{math.div($label-header-height, 2)});
-    }
-}
-
-%header-horizontal-line-label-position-bottom {
-    $half-side-gap: math.div($side-gap, 2);
-    border-top-width: $line-width;
-    border-top-style: solid;
-    content: '';
-    display: inline-block;
-    height: 0;
-    position: absolute;
-    width: calc(50% - #{$half-side-gap + $line-gap});
-}
-
-.horizontal-stepper-header {
-    display: flex;
-    overflow: hidden;
-    align-items: center;
-    padding: 0 $side-gap;
-    height: 48px;
-
-    .step-icon {
-        position: relative;
-        margin-right: $line-gap;
-        flex: none;
-
-        [dir='rtl'] & {
-            margin-right: 0;
-            margin-left: $line-gap;
-        }
-    }
-
-    &.step-header-empty-label .step-icon {
-        margin: 0;
-    }
-
-    $vertical-padding: _get-vertical-padding-calc();
-
-    .stepper-label-position-bottom & {
-        padding: #{$vertical-padding} $side-gap;
-
-        &::before,
-        &::after {
-            top: calc(#{$vertical-padding} + #{math.div($label-header-height, 2)});
-        }
-    }
-
-    .stepper-label-position-bottom & {
-        box-sizing: border-box;
-        flex-direction: column;
-        height: auto;
-
-        &:not(:last-child)::after,
-        [dir='rtl'] &:not(:first-child)::after {
-            @extend %header-horizontal-line-label-position-bottom;
-            right: 0;
-        }
-
-        &:not(:first-child)::before,
-        [dir='rtl'] &:not(:last-child)::before {
-            @extend %header-horizontal-line-label-position-bottom;
-            left: 0;
-        }
-
-        [dir='rtl'] &:last-child::before,
-        [dir='rtl'] &:first-child::after {
-            display: none;
-        }
-
-        & .step-icon {
-            margin-right: 0;
-            margin-left: 0;
-        }
-
-        & .step-label {
-            padding: $label-position-bottom-top-gap 0 0 0;
-            text-align: center;
-            width: 100%;
-        }
-    }
-}
-
-.vertical-stepper-header {
-    display: flex;
-    align-items: center;
-
-    height: $label-header-height;
-
-    padding: #{_get-vertical-padding-calc()} $side-gap;
-
-    .step-icon {
-        margin-right: $vertical-stepper-content-margin - $side-gap;
-
-        [dir='rtl'] & {
-            margin-right: 0;
-            margin-left: $vertical-stepper-content-margin - $side-gap;
-        }
-    }
-}
-
-.horizontal-stepper-wrapper {
-    display: flex;
-    flex-direction: column;
-}
-
-.horizontal-stepper-content {
-    visibility: hidden;
-    overflow: hidden;
-    outline: 0;
-    height: 0;
-
-    .stepper-animations-enabled & {
-        transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
-    }
-
-    &.horizontal-stepper-content-previous {
-        transform: translate3d(-100%, 0, 0);
-    }
-
-    &.horizontal-stepper-content-next {
-        transform: translate3d(100%, 0, 0);
-    }
-
-    &.horizontal-stepper-content-current {
-        visibility: visible;
-        transform: none;
-        height: auto;
-    }
-
-    .stepper-horizontal:not(.stepper-animating) &.horizontal-stepper-content-current {
-        overflow: visible;
-    }
-}
-
-.horizontal-content-container {
-    overflow: hidden;
-    background: color-vars.$Light-Gray-3;
-    padding: $top-gap $side-gap $side-gap $side-gap;
-
-    @include cdk.high-contrast {
-        outline: solid 1px;
-    }
-
-    .stepper-header-position-bottom & {
-        padding: $side-gap $side-gap 0 $side-gap;
-    }
-}
-
-.vertical-content-container {
-    display: grid;
-    grid-template-rows: 0fr;
-    grid-template-columns: 100%;
-    margin-left: $vertical-stepper-content-margin;
-    border: 0;
-    position: relative;
-
-    .stepper-animations-enabled & {
-        transition: grid-template-rows 500ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    &.vertical-content-container-active {
-        grid-template-rows: 1fr;
-    }
-
-    .step:last-child & {
-        border: none;
-    }
-
-    @include cdk.high-contrast {
-        outline: solid 1px;
-    }
-
-    [dir='rtl'] & {
-        margin-left: 0;
-        margin-right: $vertical-stepper-content-margin;
-    }
-
-    @supports not (grid-template-rows: 0fr) {
-        height: 0;
-
-        &.vertical-content-container-active {
-            height: auto;
-        }
-    }
-}
-
-.stepper-vertical-line::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    border-left-width: $line-width;
-    border-left-style: solid;
-
-    $vertical-padding: _get-vertical-padding-calc();
-    $vertical-offset: calc(#{$line-gap} - #{$vertical-padding});
-
-    border-left-color: #889392;
-
-    top: $vertical-offset;
-    bottom: $vertical-offset;
-
-    [dir='rtl'] & {
-        left: auto;
-        right: 0;
-    }
-}
-
-.vertical-stepper-content {
-    overflow: hidden;
-    outline: 0;
-    visibility: hidden;
-
-    .stepper-animations-enabled & {
-        transition: visibility 500ms linear;
-    }
-
-    .vertical-content-container-active > & {
-        visibility: visible;
-    }
-}
-
-.vertical-content {
-    padding: 0 $side-gap $side-gap $side-gap;
-}

package/src/lib/v2/executors/stepper.ts

@@ -1,360 +0,0 @@
-import {CdkStep, CdkStepper} from '@angular/cdk/stepper';
-import {
-  AfterContentInit,
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ContentChild,
-  ContentChildren,
-  ElementRef,
-  EventEmitter,
-  inject,
-  Input,
-  NgZone,
-  OnDestroy,
-  Output,
-  QueryList,
-  Renderer2,
-  signal,
-  TemplateRef,
-  ViewChildren,
-  ViewContainerRef,
-  ViewEncapsulation,
-} from '@angular/core';
-import {NgTemplateOutlet} from '@angular/common';
-import {Platform} from '@angular/cdk/platform';
-import {CdkPortalOutlet, TemplatePortal} from '@angular/cdk/portal';
-import {Subscription} from 'rxjs';
-import {takeUntil, map, startWith, switchMap} from 'rxjs/operators';
-
-import {MDStepHeader} from './step-header';
-import {MDStepLabel} from './step-label';
-import {MDStepperIcon, StepperIconContext} from './stepper-icon';
-import {MDStepContent} from './step-content';
-
-import {Injectable} from '@angular/core';
-import {FormGroupDirective, AbstractControl, NgForm} from '@angular/forms';
-import { MDStepFooter } from './step-footer';
-
-/**
- * ErrorStateMatcher that shows errors only once a control is dirty
- * (or when the parent form was submitted). Useful for “show on edit”.
- */
-@Injectable()
-export class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher {
-  isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean {
-    return !!(control && control.invalid && (control.dirty || (form && form.submitted)));
-  }
-}
-
-/**
- * Default ErrorStateMatcher used across the stepper.
- * Marks error when a control is invalid and touched, or the form is submitted.
- */
-@Injectable({providedIn: 'root'})
-export class ErrorStateMatcher {
-  isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean {
-    return !!(control && control.invalid && (control.touched || (form && form.submitted)));
-  }
-}
-
-/**
- * Single step inside the stepper.
- * - Extends CdkStep and plugs in lazy content via <ng-template mdStepContent>.
- * - Provides ErrorStateMatcher so the step can decide its own error state.
- */
-@Component({
-  selector: 'md-step',
-  templateUrl: 'step.html',
-  providers: [
-    // Provide the step instance wherever ErrorStateMatcher or CdkStep is requested.
-    {provide: ErrorStateMatcher, useExisting: MDStep},
-    {provide: CdkStep, useExisting: MDStep},
-  ],
-  encapsulation: ViewEncapsulation.None,
-  exportAs: 'mdStep',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CdkPortalOutlet],
-  host: {
-    // Keep steps hidden by default; container controls visibility.
-    'hidden': '',
-  },
-})
-export class MDStep extends CdkStep implements ErrorStateMatcher, AfterContentInit, OnDestroy {
-  /** Parent-provided matcher used as a baseline in isErrorState. */
-  private _errorStateMatcher = inject(ErrorStateMatcher, {skipSelf: true});
-  /** View container used to create a portal for lazy content. */
-  private _viewContainerRef = inject(ViewContainerRef);
-  /** Subscription to selected-state changes (to attach lazy content). */
-  private _isSelected = Subscription.EMPTY;
-
-  /** Optional projected label for the step header. */
-  @ContentChild(MDStepLabel) override stepLabel: MDStepLabel = undefined!;
-
-  /** Optional lazy body content template: <ng-template mdStepContent>…</ng-template> */
-  @ContentChild(MDStepContent, {static: false}) _lazyContent: MDStepContent;
-
-  /** Portal instance created when the step first becomes selected. */
-  _portal: TemplatePortal;
-
-  /** Attach lazy content when this step becomes selected for the first time. */
-  ngAfterContentInit() {
-    this._isSelected = this._stepper.steps.changes
-      .pipe(
-        switchMap(() => {
-          return this._stepper.selectionChange.pipe(
-            map(event => event.selectedStep === this),
-            startWith(this._stepper.selected === this),
-          );
-        }),
-      )
-      .subscribe(isSelected => {
-        if (isSelected && this._lazyContent && !this._portal) {
-          this._portal = new TemplatePortal(this._lazyContent._template, this._viewContainerRef!);
-        }
-      });
-  }
-
-  /** Cleanup subscription on destroy. */
-  ngOnDestroy() {
-    this._isSelected.unsubscribe();
-  }
-
-  /**
-   * ErrorStateMatcher implementation for this step.
-   * Combines the injected default matcher with “interacted” state so that
-   * a step can show errors after the user interacted with the step controls.
-   */
-  isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean {
-    const originalErrorState = this._errorStateMatcher.isErrorState(control, form);
-    const customErrorState = !!(control && control.invalid && this.interacted);
-    return originalErrorState || customErrorState;
-  }
-}
-
-/**
- * The stepper container that manages a sequence of md-step children.
- * - Handles orientation, header/label positioning, and animations.
- * - Tracks and emits animation lifecycle.
- * - Supports custom icon overrides via <ng-template mdStepperIcon name="...">.
- */
-@Component({
-  selector: 'md-stepper, md-vertical-stepper, md-horizontal-stepper, [mdStepper]',
-  exportAs: 'mdStepper, mdVerticalStepper, mdHorizontalStepper',
-  templateUrl: 'stepper.html',
-  styleUrl: 'stepper.scss',
-  host: {
-    // Orientation & layout classes.
-    '[class.stepper-horizontal]': 'orientation === "horizontal"',
-    '[class.stepper-vertical]': 'orientation === "vertical"',
-    '[class.stepper-label-position-end]':
-      'orientation === "horizontal" && labelPosition == "end"',
-    '[class.stepper-label-position-bottom]':
-      'orientation === "horizontal" && labelPosition == "bottom"',
-    '[class.stepper-header-position-bottom]': 'headerPosition === "bottom"',
-
-    // Animation state + duration CSS variable.
-    '[class.stepper-animating]': '_isAnimating()',
-    '[style.stepper-animation-duration]': '_getAnimationDuration()',
-
-    // ARIA role for a list of tabs.
-    '[attr.aria-orientation]': 'orientation',
-    'role': 'tablist',
-  },
-  providers: [{provide: CdkStepper, useExisting: MDStepper}],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgTemplateOutlet, MDStepHeader],
-})
-export class MDStepper extends CdkStepper implements AfterViewInit, AfterContentInit, OnDestroy {
-  /** Run transition listeners outside Angular for perf. */
-  private _ngZone = inject(NgZone);
-  /** Used to set up/tear down transitionend listeners. */
-  private _renderer = inject(Renderer2);
-  /** Disable animations flag (useful for testing or SSR). */
-  private _animationsDisabled = true;
-  /** Cleanup handle for the transitionend listener. */
-  private _cleanupTransition: (() => void) | undefined;
-  /** Reactive animating flag used by host binding. */
-  protected _isAnimating = signal(false);
-
-  /** All step headers rendered by the template. */
-  @ViewChildren(MDStepHeader) override _stepHeader: QueryList<MDStepHeader> = undefined!;
-
-  /** Animated containers used to detect when transitions finish. */
-  @ViewChildren('animatedContainer') _animatedContainers: QueryList<ElementRef>;
-
-  /** All descendant steps (supports nested usage; CdkStepper handles scoping). */
-  @ContentChildren(MDStep, {descendants: true}) override _steps: QueryList<MDStep> = undefined!;
-
-  /** Public alias of _steps used by base class. */
-  override readonly steps: QueryList<MDStep> = new QueryList<MDStep>();
-
-  /** Any custom icon templates projected via mdStepperIcon. */
-  @ContentChildren(MDStepperIcon, {descendants: true}) _icons: QueryList<MDStepperIcon>;
-
-  /** Emits when a view transition animation has completed. */
-  @Output() readonly animationDone: EventEmitter<void> = new EventEmitter<void>();
-
-
-  @ContentChild(MDStepFooter, { read: TemplateRef}) footer: MDStepFooter;
-
-  /** Horizontal label position (end/bottom when orientation is horizontal). */
-  @Input()
-  labelPosition: 'bottom' | 'end' = 'end';
-
-  /** Step header position (top/bottom). */
-  @Input()
-  headerPosition: 'top' | 'bottom' = 'top';
-
-  /** Map of step state → custom icon template overrides. */
-  _iconOverrides: Record<string, TemplateRef<StepperIconContext>> = {};
-
-  /** Duration for transitions (e.g. "500ms" | "0ms"). */
-  @Input()
-  get animationDuration(): string {
-    return this._animationDuration;
-  }
-  set animationDuration(value: string) {
-    // Normalize plain numeric to milliseconds.
-    this._animationDuration = /^\d+$/.test(value) ? value + 'ms' : value;
-  }
-  private _animationDuration = '';
-
-  /** SSR guard (avoid DOM APIs when not in browser). */
-  protected _isServer: boolean = !inject(Platform).isBrowser;
-
-  // Overload kept to match construction signature patterns.
-  constructor(...args: unknown[]);
-  constructor() {
-    super();
-
-    // Infer orientation from host element name when using alias tags.
-    const elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-    const nodeName = elementRef.nativeElement.nodeName.toLowerCase();
-    this.orientation = nodeName === 'vertical-stepper' ? 'vertical' : 'horizontal';
-  }
-
-  /**
-   * After content init:
-   * - Collect custom icon templates.
-   * - React to step list changes to recalc state.
-   * - Toggle animating flag on selected index changes and prepare CSS listeners.
-   */
-  override ngAfterContentInit() {
-    super.ngAfterContentInit();
-
-    // Gather mdStepperIcon overrides by name.
-    this._icons.forEach(({name, templateRef}) => (this._iconOverrides[name] = templateRef));
-
-    // When steps change, notify base to recompute.
-    this.steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => this._stateChanged());
-
-    // When selection changes, start/stop animating depending on duration.
-    this.selectedIndexChange.pipe(takeUntil(this._destroyed)).subscribe(() => {
-      const duration = this._getAnimationDuration();
-      if (duration === '0ms' || duration === '0s') {
-        this._onAnimationDone();
-      } else {
-        this._isAnimating.set(true);
-      }
-    });
-
-    // Enable CSS transition listeners a short time after init (avoids first-paint glitches).
-    this._ngZone.runOutsideAngular(() => {
-      if (!this._animationsDisabled) {
-        setTimeout(() => {
-          this._elementRef.nativeElement.classList.add('stepper-animations-enabled');
-          this._cleanupTransition = this._renderer.listen(
-            this._elementRef.nativeElement,
-            'transitionend',
-            this._handleTransitionend,
-          );
-        }, 200);
-      }
-    });
-  }
-
-  /**
-   * After view init:
-   * - Emit initial animationDone once containers are rendered.
-   * - Recompute alignment/layout on container list changes.
-   */
-  override ngAfterViewInit(): void {
-    super.ngAfterViewInit();
-
-    if (typeof queueMicrotask === 'function') {
-      let hasEmittedInitial = false;
-
-      this._animatedContainers.changes
-        .pipe(startWith(null), takeUntil(this._destroyed))
-        .subscribe(() =>
-          queueMicrotask(() => {
-            // Fire once after the very first render so consumers can react.
-            if (!hasEmittedInitial) {
-              hasEmittedInitial = true;
-              this.animationDone.emit();
-            }
-            this._stateChanged();
-          }),
-        );
-    }
-  }
-
-  /** Tear down transition listener on destroy. */
-  override ngOnDestroy(): void {
-    super.ngOnDestroy();
-    this._cleanupTransition?.();
-  }
-
-  /** Resolve the effective animation duration string applied to CSS. */
-  _getAnimationDuration() {
-    if (this._animationsDisabled) {
-      return '0ms';
-    }
-    if (this.animationDuration) {
-      return this.animationDuration;
-    }
-    // Defaults: match Material timings (horizontal slower than vertical).
-    return this.orientation === 'horizontal' ? '500ms' : '225ms';
-  }
-
-  /**
-   * Global transitionend handler:
-   * - Detects the active animated container based on orientation and CSS properties.
-   * - Calls _onAnimationDone when the relevant transition completes.
-   */
-  private _handleTransitionend = (event: TransitionEvent) => {
-    const target = event.target as HTMLElement | null;
-    if (!target) {
-      return;
-    }
-
-    // Horizontal stepper finishes when the "current" content transform ends.
-    const isHorizontalActiveElement =
-      this.orientation === 'horizontal' &&
-      event.propertyName === 'transform' &&
-      target.classList.contains('horizontal-stepper-content-current');
-
-    // Vertical stepper finishes when the active container grid-rows change ends.
-    const isVerticalActiveElement =
-      this.orientation === 'vertical' &&
-      event.propertyName === 'grid-template-rows' &&
-      target.classList.contains('vertical-content-container-active');
-
-    // Ensure the event target is one of our tracked containers.
-    const shouldEmit =
-      (isHorizontalActiveElement || isVerticalActiveElement) &&
-      this._animatedContainers.find(ref => ref.nativeElement === target);
-
-    if (shouldEmit) {
-      this._onAnimationDone();
-    }
-  };
-
-  /** Clear the animating flag and emit animationDone to consumers. */
-  private _onAnimationDone() {
-    this._isAnimating.set(false);
-    this.animationDone.emit();
-  }
-}

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

@@ -1,56 +0,0 @@
-import {ViewContainerRef, Injector} from '@angular/core';
-import {Direction} from '@angular/cdk/bidi';
-import {ScrollStrategy} from '@angular/cdk/overlay';
-import {DialogConfig} from '@angular/cdk/dialog';
-
-export type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
-
-export type DialogRole = 'dialog' | 'alertdialog';
-
-export interface DialogPosition {
-  top?: string;
-  bottom?: string;
-  left?: string;
-  right?: string;
-}
-
-export class MefDevDialogConfig<D = any> {
-  viewContainerRef?: ViewContainerRef;
-  injector?: Injector;
-  id?: string;
-  role?: DialogRole = 'dialog';
-  panelClass?: string | string[] = '';
-  hasBackdrop?: boolean = true;
-  backdropClass?: string | string[] = '';
-  disableClose?: boolean = false;
-  closePredicate?: <
-    Result = unknown,
-    Component = unknown,
-    Config extends DialogConfig = MefDevDialogConfig,
-  >(
-    result: Result | undefined,
-    config: Config,
-    componentInstance: Component | null,
-  ) => boolean;
-  width?: string = '';
-  height?: string = '';
-  minWidth?: number | string;
-  minHeight?: number | string;
-  maxWidth?: number | string;
-  maxHeight?: number | string;
-  position?: DialogPosition;
-  data?: D | null = null;
-  direction?: Direction;
-  ariaDescribedBy?: string | null = null;
-  ariaLabelledBy?: string | null = null;
-  ariaLabel?: string | null = null;
-  ariaModal?: boolean = false;
-  autoFocus?: AutoFocusTarget | string | boolean = 'first-tabbable';
-  restoreFocus?: boolean = true;
-  delayFocusTrap?: boolean = true;
-  scrollStrategy?: ScrollStrategy;
-  closeOnNavigation?: boolean = true;
-  enterAnimationDuration?: string | number;
-  exitAnimationDuration?: string | number;
-  animationPosition?: 'top' | 'right' | 'bottom' | 'left';
-}