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

package/src/lib/v2/executors/step-header.ts

@@ -1,151 +0,0 @@
-import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Input,
-  OnDestroy,
-  ViewEncapsulation,
-  TemplateRef,
-  AfterViewInit,
-  inject,
-} from '@angular/core';
-import { Subscription } from 'rxjs';
-import { MDStepLabel } from './step-label';
-import { StepperIntl } from './stepper-intl';
-import { StepperIconContext } from './stepper-icon';
-import { CdkStepHeader, StepState } from '@angular/cdk/stepper';
-import { NgTemplateOutlet } from '@angular/common';
-import { _VisuallyHiddenLoader } from '@angular/cdk/private';
-
-/**
- * Header (tab) for a step in the stepper.
- * Responsibilities:
- * - Renders label, state icon/text, and optional/error hints.
- * - Manages focus (including origin-aware focus for a11y styling).
- * - Reacts to i18n changes from StepperIntl and marks for check.
- */
-@Component({
-  selector: 'md-step-header',
-  templateUrl: 'step-header.html',
-  styleUrl: 'step-header.scss',
-  host: {
-    class: 'step-header',
-    '[class.mat-step-header-empty-label]': '_hasEmptyLabel()',
-    // Apply color host class or fallback to "primary"
-    '[class]': '(color || "primary")',
-    role: 'tab',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgTemplateOutlet],
-})
-export class MDStepHeader extends CdkStepHeader implements AfterViewInit, OnDestroy {
-  /** Stepper i18n service (emits when labels change). */
-  _intl = inject(StepperIntl);
-  /** Focus monitor to track focus origin on the host element. */
-  private _focusMonitor = inject(FocusMonitor);
-
-  /** Subscription to StepperIntl changes for OnPush CD. */
-  private _intlSubscription: Subscription;
-
-  /** Visual/logical state of this step (e.g., 'number' | 'done' | 'error' | 'edit'). */
-  @Input() state: StepState;
-  /** Label can be a template (MDStepLabel) or plain string. */
-  @Input() label: MDStepLabel | string;
-  /** Error message displayed when state === 'error'. */
-  @Input() errorMessage: string;
-  /** Optional templates to override the default icons by state. */
-  @Input() iconOverrides: { [key: string]: TemplateRef<StepperIconContext> };
-  /** 0-based index of the step within the stepper. */
-  @Input() index: number;
-  /** Whether this step is selected (active tab). */
-  @Input() selected: boolean;
-  /** Whether this step is currently active (focused/engaged). */
-  @Input() active: boolean;
-  /** Marks the step as optional (affects label rendering). */
-  @Input() optional: boolean;
-  /** Disables ripple effects on header interactions. */
-  @Input() disableRipple: boolean;
-
-  constructor() {
-    super();
-
-    const changeDetectorRef = inject(ChangeDetectorRef);
-    // Re-render when i18n strings change.
-    this._intlSubscription = this._intl.changes.subscribe(() => changeDetectorRef.markForCheck());
-  }
-
-  /** Begin monitoring focus on the header to apply origin-aware styles. */
-  ngAfterViewInit() {
-    this._focusMonitor.monitor(this._elementRef, true);
-  }
-
-  /** Cleanup subscriptions and focus monitoring. */
-  ngOnDestroy() {
-    this._intlSubscription.unsubscribe();
-    this._focusMonitor.stopMonitoring(this._elementRef);
-  }
-
-  /**
-   * Programmatic focus with optional origin (mouse/keyboard/touch/program).
-   * Falls back to direct focus if no origin is provided.
-   */
-  override focus(origin?: FocusOrigin, options?: FocusOptions) {
-    if (origin) {
-      this._focusMonitor.focusVia(this._elementRef, origin, options);
-    } else {
-      this._elementRef.nativeElement.focus(options);
-    }
-  }
-
-  /** Returns string label if provided directly, otherwise null. */
-  _stringLabel(): string | null {
-    return this.label instanceof MDStepLabel ? null : this.label;
-  }
-
-  /** Returns template label if provided, otherwise null. */
-  _templateLabel(): MDStepLabel | null {
-    return this.label instanceof MDStepLabel ? this.label : null;
-  }
-
-  /** Host element getter used by base classes/templates. */
-  _getHostElement() {
-    return this._elementRef.nativeElement;
-  }
-
-  /**
-   * Default text for built-in states when an icon template isn’t provided.
-   * - 'number' → (index + 1) as text
-   * - 'edit'   → 'create'
-   * - 'error'  → 'warning'
-   * - otherwise returns the state string itself
-   */
-  _getDefaultTextForState(state: StepState): string {
-    if (state == 'number') {
-      return `${this.index + 1}`;
-    }
-    if (state == 'edit') {
-      return 'create';
-    }
-    if (state == 'error') {
-      return 'warning';
-    }
-    return state;
-  }
-
-  /** True if no label, no optional/error labels — used for styling empty headers. */
-  protected _hasEmptyLabel() {
-    return !this._stringLabel() && !this._templateLabel() && !this._hasOptionalLabel() && !this._hasErrorLabel();
-  }
-
-  /** True if the step is optional and not in error state. */
-  protected _hasOptionalLabel() {
-    return this.optional && this.state !== 'error';
-  }
-
-  /** True if the current state is 'error'. */
-  protected _hasErrorLabel() {
-    return this.state === 'error';
-  }
-}

package/src/lib/v2/executors/step-label.ts

@@ -1,16 +0,0 @@
-import { Directive } from '@angular/core';
-import { CdkStepLabel } from '@angular/cdk/stepper';
-
-/**
- * Marks an embedded template as the label for a step.
- *
- * Usage:
- *   <ng-template mdStepLabel>Custom label</ng-template>
- *
- * Extends Angular CDK's CdkStepLabel so the stepper can project
- * and render this template in the step header area.
- */
-@Directive({
-  selector: '[mdStepLabel]',
-})
-export class MDStepLabel extends CdkStepLabel {}

package/src/lib/v2/executors/step.html

@@ -1,4 +0,0 @@
-<ng-template>
-  <ng-content></ng-content>
-  <ng-template [cdkPortalOutlet]="_portal"></ng-template>
-</ng-template>

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

@@ -1,40 +0,0 @@
-import { CdkStepperNext, CdkStepperPrevious } from '@angular/cdk/stepper';
-import { Directive } from '@angular/core';
-
-/**
- * Button directive that advances the stepper to the next step.
- *
- * Usage:
- *   <button mdStepperNext>Next</button>
- *
- * Extends CDK's CdkStepperNext; this wrapper only provides
- * a semantic selector and host classes/attrs for styling.
- */
-@Directive({
-  selector: 'button[mdStepperNext]',
-  host: {
-    class: 'stepper-next',
-    // Preserve the native button type (bound by CdkStepperNext).
-    '[type]': 'type',
-  },
-})
-export class MDStepperNext extends CdkStepperNext {}
-
-/**
- * Button directive that moves the stepper to the previous step.
- *
- * Usage:
- *   <button mdStepperPrevious>Back</button>
- *
- * Extends CDK's CdkStepperPrevious; this wrapper only provides
- * a semantic selector and host classes/attrs for styling.
- */
-@Directive({
-  selector: 'button[mdStepperPrevious]',
-  host: {
-    class: 'stepper-previous',
-    // Preserve the native button type (bound by CdkStepperPrevious).
-    '[type]': 'type',
-  },
-})
-export class MDStepperPrevious extends CdkStepperPrevious {}

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

@@ -1,42 +0,0 @@
-import { Directive, Input, TemplateRef, inject } from '@angular/core';
-import { StepState } from '@angular/cdk/stepper';
-
-/**
- * Context passed into a custom stepper icon template.
- * Consumers can use these values inside the template to
- * render state-aware icons (e.g., different glyphs/colors).
- */
-export interface StepperIconContext {
-  /** 0-based index of the step. */
-  index: number;
-  /** True if this step is currently active/selected. */
-  active: boolean;
-  /** True if this step is marked as optional. */
-  optional: boolean;
-}
-
-/**
- * Marks an <ng-template> as a custom icon for a particular step state.
- *
- * Usage:
- *   <ng-template mdStepperIcon="done" let-ctx>
- *     <!-- ctx: StepperIconContext -->
- *     <my-done-icon [highlight]="ctx.active"></my-done-icon>
- *   </ng-template>
- *
- * Bind the `stepperIcon` input to one of the StepState values
- * (e.g., 'number' | 'edit' | 'done' | 'error'), and the stepper
- * will project this template when the step is in that state.
- */
-@Directive({
-  selector: 'ng-template[mdStepperIcon]',
-})
-export class MDStepperIcon {
-  /** Reference to the provided template, instantiated by the stepper as needed. */
-  templateRef = inject<TemplateRef<StepperIconContext>>(TemplateRef);
-
-  /** Step state that this icon template should represent. */
-  @Input('stepperIcon') name: StepState;
-
-  constructor() {}
-}

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

@@ -1,46 +0,0 @@
-import { Injectable, Optional, SkipSelf } from '@angular/core';
-import { Subject } from 'rxjs';
-
-/**
- * Intl/i18n service for the stepper.
- * Holds user-facing strings and exposes a `changes` stream so components
- * can re-render when labels are updated at runtime.
- */
-@Injectable({ providedIn: 'root' })
-export class StepperIntl {
-  /** Emits whenever any of the labels change. Consumers should mark for check on emission. */
-  readonly changes: Subject<void> = new Subject<void>();
-
-  /** Label shown next to steps that are marked as optional. */
-  optionalLabel: string = 'Optional';
-
-  /** Label used to announce or describe completed steps. */
-  completedLabel: string = 'Completed';
-
-  /** Label indicating that a step is editable. */
-  editableLabel: string = 'Editable';
-}
-
-/**
- * Factory that returns the closest parent StepperIntl if available,
- * otherwise creates a new instance.
- *
- * This allows apps/libraries to provide a single shared StepperIntl
- * higher in the injector tree and have all steppers reuse it.
- */
-export function STEPPER_INTL_PROVIDER_FACTORY(parentIntl: StepperIntl) {
-  return parentIntl || new StepperIntl();
-}
-
-/**
- * Provider that prefers an ancestor StepperIntl, falling back to a fresh one
- * created via the factory above when none is found.
- *
- * Usage in a module or component:
- *   providers: [STEPPER_INTL_PROVIDER]
- */
-export const STEPPER_INTL_PROVIDER = {
-  provide: StepperIntl,
-  deps: [[new Optional(), new SkipSelf(), StepperIntl]],
-  useFactory: STEPPER_INTL_PROVIDER_FACTORY,
-};

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

@@ -1,42 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PortalModule } from '@angular/cdk/portal';
-import { CdkStepperModule } from '@angular/cdk/stepper';
-import { MDStep, MDStepper } from './stepper';
-import { MDStepLabel } from './step-label';
-import { MDStepperNext, MDStepperPrevious } from './stepper-button';
-import { MDStepHeader } from './step-header';
-import { MDStepperIcon } from './stepper-icon';
-import { MDStepContent } from './step-content';
-import { MDStepFooter } from './step-footer';
-
-@NgModule({
-    declarations: [],
-    exports: [
-        CommonModule,
-        MDStep,
-        MDStepLabel,
-        MDStepper,
-        MDStepperNext,
-        MDStepperPrevious,
-        MDStepHeader,
-        MDStepperIcon,
-        MDStepContent,
-        MDStepFooter
-    ],
-    imports: [
-        CommonModule,
-        PortalModule,
-        CdkStepperModule,
-        MDStep,
-        MDStepLabel,
-        MDStepper,
-        MDStepperNext,
-        MDStepperPrevious,
-        MDStepHeader,
-        MDStepperIcon,
-        MDStepContent,
-        MDStepFooter
-    ],
-})
-export class MDStepExecutorModule {}

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

@@ -1,90 +0,0 @@
-@if (_isServer) {
-  <ng-content/>
-}
-
-@switch (orientation) {
-  @case ('horizontal') {
-    <div class="horizontal-stepper-wrapper">
-      <div class="horizontal-stepper-header-container">
-        @for (step of steps; track step) {
-          <ng-container
-            [ngTemplateOutlet]="stepTemplate"
-            [ngTemplateOutletContext]="{step}"/>
-          @if (!$last) {
-            <div class="stepper-horizontal-line"></div>
-          }
-        }
-      </div>
-
-      <div class="horizontal-content-container">
-        @for (step of steps; track step) {
-          <div
-            #animatedContainer
-            class="horizontal-stepper-content"
-            role="tabpanel"
-            [id]="_getStepContentId($index)"
-            [attr.aria-labelledby]="_getStepLabelId($index)"
-            [class]="'horizontal-stepper-content-' + _getAnimationDirection($index)"
-            [attr.inert]="selectedIndex === $index ? null : ''">
-            <ng-container [ngTemplateOutlet]="step.content"/>
-          </div>
-        }
-      </div>
-    </div>
-  }
-
-  @case ('vertical') {
-    @for (step of steps; track step) {
-      <div class="step">
-        <ng-container
-          [ngTemplateOutlet]="stepTemplate"
-          [ngTemplateOutletContext]="{step}"/>
-        <div
-          #animatedContainer
-          class="vertical-content-container"
-          [class.stepper-vertical-line]="!$last"
-          [class.vertical-content-container-active]="selectedIndex === $index"
-          [attr.inert]="selectedIndex === $index ? null : ''">
-          <div class="vertical-stepper-content"
-            role="tabpanel"
-            [id]="_getStepContentId($index)"
-            [attr.aria-labelledby]="_getStepLabelId($index)">
-            <div class="vertical-content">
-              <ng-container [ngTemplateOutlet]="step.content"/>
-            </div>
-          </div>
-        </div>
-      </div>
-    }
-  }
-}
-
-<ng-template let-step="step" #stepTemplate>
-  <md-step-header
-    [class.horizontal-stepper-header]="orientation === 'horizontal'"
-    [class.vertical-stepper-header]="orientation === 'vertical'"
-    (click)="step.select()"
-    (keydown)="_onKeydown($event)"
-    [tabIndex]="_getFocusIndex() === step.index() ? 0 : -1"
-    [id]="_getStepLabelId(step.index())"
-    [attr.aria-posinset]="step.index() + 1"
-    [attr.aria-setsize]="steps.length"
-    [attr.aria-controls]="_getStepContentId(step.index())"
-    [attr.aria-selected]="step.isSelected()"
-    [attr.aria-label]="step.ariaLabel || null"
-    [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
-    [attr.aria-disabled]="step.isNavigable() ? null : true"
-    [index]="step.index()"
-    [state]="step.indicatorType()"
-    [label]="step.stepLabel || step.label"
-    [selected]="step.isSelected()"
-    [active]="step.isNavigable()"
-    [optional]="step.optional"
-    [errorMessage]="step.errorMessage"
-    [iconOverrides]="_iconOverrides"
-    [disableRipple]="disableRipple || !step.isNavigable()"
-    [color]="step.color || color"/>
-</ng-template>
-
-
-<ng-container [ngTemplateOutlet]="footer"></ng-container>