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

package/src/lib/v2/collapse/expansion-panel.ts

@@ -1,279 +0,0 @@
-import {CdkAccordionItem} from '@angular/cdk/accordion';
-import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
-import {CdkPortalOutlet, TemplatePortal} from '@angular/cdk/portal';
-
-import {
-  AfterContentInit,
-  ChangeDetectionStrategy,
-  Component,
-  ContentChild,
-  Directive,
-  ElementRef,
-  EventEmitter,
-  InjectionToken,
-  Input,
-  OnChanges,
-  OnDestroy,
-  Output,
-  SimpleChanges,
-  ViewChild,
-  ViewContainerRef,
-  ViewEncapsulation,
-  booleanAttribute,
-  inject,
-  NgZone,
-  Renderer2,
-  DOCUMENT,
-} from '@angular/core';
-import {_IdGenerator} from '@angular/cdk/a11y';
-import {Subject} from 'rxjs';
-import {filter, startWith, take} from 'rxjs/operators';
-import {AccordionBase, AccordionTogglePosition, ACCORDION} from './accordion-base';
-import {MD_EXPANSION_PANEL} from './expansion-panel-base';
-import {MDExpansionPanelContent} from './expansion-panel-content';;
-
-/** Visual state of the panel used by host bindings/classes. */
-export type ExpansionPanelState = 'expanded' | 'collapsed';
-
-/** Optional DI defaults for panel behavior and look. */
-export interface ExpansionPanelDefaultOptions {
-  expandedHeight: string;
-  collapsedHeight: string;
-  hideToggle: boolean;
-}
-
-/** Injection token for providing default expansion-panel options. */
-export const EXPANSION_PANEL_DEFAULT_OPTIONS =
-  new InjectionToken<ExpansionPanelDefaultOptions>('EXPANSION_PANEL_DEFAULT_OPTIONS');
-
-@Component({
-  styleUrl: 'expansion-panel.scss',
-  selector: 'md-expansion-panel',
-  exportAs: 'expansionPanel',
-  templateUrl: 'expansion-panel.html',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    // Provide a standalone accordion context when used outside a parent accordion.
-    {provide: ACCORDION, useValue: undefined},
-    // Expose this concrete implementation under the base token.
-    {provide: MD_EXPANSION_PANEL, useExisting: MDExpansionPanel},
-  ],
-  host: {
-    class: 'expansion-panel',
-    '[class.expanded]': 'expanded',
-    '[class.expansion-panel-spacing]': '_hasSpacing()',
-  },
-  imports: [CdkPortalOutlet],
-})
-export class MDExpansionPanel
-  extends CdkAccordionItem
-  implements AfterContentInit, OnChanges, OnDestroy
-{
-  /** View container for lazily attaching projected content via portals. */
-  private _viewContainerRef = inject(ViewContainerRef);
-
-  /** Global animation toggle for this component instance. */
-  private readonly _animationsDisabled = false;
-
-  /** Document reference for focus containment checks. */
-  private _document = inject(DOCUMENT);
-
-  /** NgZone to run listeners outside Angular and re-enter only on emit. */
-  private _ngZone = inject(NgZone);
-
-  /** Host element ref for event binding and CSS class toggles. */
-  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-
-  /** Renderer used to register `transitionend` listeners. */
-  private _renderer = inject(Renderer2);
-
-  /** Cleanup function returned by Renderer2.listen; called on destroy. */
-  private _cleanupTransitionEnd: (() => void) | undefined;
-
-  /** Whether the toggle indicator should be hidden (local or inherited). */
-  @Input({transform: booleanAttribute})
-  get hideToggle(): boolean {
-    return this._hideToggle || (this.accordion && this.accordion.hideToggle);
-  }
-  set hideToggle(value: boolean) {
-    this._hideToggle = value;
-  }
-  private _hideToggle = false;
-
-  /** Toggle position relative to header content (local or inherited). */
-  @Input()
-  get togglePosition(): AccordionTogglePosition {
-    return this._togglePosition || (this.accordion && this.accordion.togglePosition);
-  }
-  set togglePosition(value: AccordionTogglePosition) {
-    this._togglePosition = value;
-  }
-  private _togglePosition: AccordionTogglePosition;
-
-  /** Fires after the expand transition completes. */
-  @Output() readonly afterExpand = new EventEmitter<void>();
-  /** Fires after the collapse transition completes. */
-  @Output() readonly afterCollapse = new EventEmitter<void>();
-
-  /** Emits whenever any @Input changes (for consumers to react). */
-  readonly _inputChanges = new Subject<SimpleChanges>();
-
-  /** Optional parent accordion context (if inside an accordion). */
-  override accordion = inject<AccordionBase>(ACCORDION, {optional: true, skipSelf: true})!;
-
-  /** Lazily-projected body content (<ng-template mdExpansionPanelContent>). */
-  @ContentChild(MDExpansionPanelContent) _lazyContent: MDExpansionPanelContent;
-
-  /** Body host element (focus containment & transition target). */
-  @ViewChild('body') _body: ElementRef<HTMLElement>;
-
-  /** Wrapper element that handles the grid/height transition. */
-  @ViewChild('bodyWrapper')
-  protected _bodyWrapper: ElementRef<HTMLElement> | undefined;
-
-  /** Portal wrapping the lazy content; created on first open. */
-  _portal: TemplatePortal;
-
-  /** Header id for aria-controls/label association. */
-  _headerId: string = inject(_IdGenerator).getId('expansion-panel-header-');
-
-  constructor() {
-    super();
-
-    // Read defaults from DI if provided.
-    const defaultOptions = inject<ExpansionPanelDefaultOptions>(
-      EXPANSION_PANEL_DEFAULT_OPTIONS,
-      {optional: true},
-    );
-
-    // Use UniqueSelectionDispatcher from CDKAccordionItem base (ensures single expand if configured).
-    this._expansionDispatcher = inject(UniqueSelectionDispatcher);
-
-    if (defaultOptions) {
-      this.hideToggle = defaultOptions.hideToggle;
-    }
-  }
-
-  /** Host CSS helper: spacing only in default display mode when expanded. */
-  _hasSpacing(): boolean {
-    if (this.accordion) {
-      return this.expanded && this.accordion.displayMode === 'default';
-    }
-    return false;
-  }
-
-  /** Map boolean expanded flag to the public state union. */
-  _getExpandedState(): ExpansionPanelState {
-    return this.expanded ? 'expanded' : 'collapsed';
-  }
-
-  /** Programmatic toggle (overrides base to flip expanded flag). */
-  override toggle(): void {
-    this.expanded = !this.expanded;
-  }
-
-  /** Programmatic close. */
-  override close(): void {
-    this.expanded = false;
-  }
-
-  /** Programmatic open. */
-  override open(): void {
-    this.expanded = true;
-  }
-
-  /** Set up lazy content portal and animation listeners once content is ready. */
-  ngAfterContentInit() {
-    // Lazily attach content the first time the panel opens.
-    if (this._lazyContent && this._lazyContent._expansionPanel === this) {
-      this.opened
-        .pipe(
-          startWith(null),
-          filter(() => this.expanded && !this._portal),
-          take(1),
-        )
-        .subscribe(() => {
-          this._portal = new TemplatePortal(this._lazyContent._template, this._viewContainerRef);
-        });
-    }
-
-    this._setupAnimationEvents();
-  }
-
-  /** Forward raw input changes to a Subject for external observers. */
-  ngOnChanges(changes: SimpleChanges) {
-    this._inputChanges.next(changes);
-  }
-
-  /** Cleanup listeners and subjects. */
-  override ngOnDestroy() {
-    super.ngOnDestroy();
-    this._cleanupTransitionEnd?.();
-    this._inputChanges.complete();
-  }
-
-  /** Whether the current document focus is inside the panel body. */
-  _containsFocus(): boolean {
-    if (this._body) {
-      const focusedElement = (this._document as any).activeElement;
-      const bodyElement = this._body.nativeElement!;
-      return focusedElement === bodyElement || bodyElement.contains(focusedElement);
-    }
-    return false;
-  }
-
-  /**
-   * Transitionend handler:
-   * - Ensures we react only to the body wrapper's grid-height transition.
-   * - Emits the appropriate afterExpand/afterCollapse event inside Angular.
-   */
-  private _transitionEndListener = ({target, propertyName}: TransitionEvent) => {
-    if (target === this._bodyWrapper?.nativeElement && propertyName === 'grid-template-rows') {
-      this._ngZone.run(() => {
-        if (this.expanded) {
-          this.afterExpand.emit();
-        } else {
-          this.afterCollapse.emit();
-        }
-      });
-    }
-  };
-
-  /**
-   * Registers animation listeners:
-   * - In no-animation mode, emit completion events immediately on state streams.
-   * - Otherwise, add a `transitionend` listener and a CSS class to enable transitions,
-   *   after a short timeout so the initial render settles.
-   */
-  protected _setupAnimationEvents() {
-    this._ngZone.runOutsideAngular(() => {
-      if (this._animationsDisabled) {
-        this.opened.subscribe(() => this._ngZone.run(() => this.afterExpand.emit()));
-        this.closed.subscribe(() => this._ngZone.run(() => this.afterCollapse.emit()));
-      } else {
-        setTimeout(() => {
-          const element = this._elementRef.nativeElement;
-          this._cleanupTransitionEnd = this._renderer.listen(
-            element,
-            'transitionend',
-            this._transitionEndListener,
-          );
-          element.classList.add('expansion-panel-animations-enabled');
-        }, 200);
-      }
-    });
-  }
-}
-
-/**
- * Simple action-row wrapper for projected buttons/links inside the panel body.
- * Provides a stable class hook for styling.
- */
-@Directive({
-  selector: 'action-row',
-  host: {
-    class: 'action-row',
-  },
-})
-export class ExpansionPanelActionRow {}

package/src/lib/v2/collapse/index.ts

@@ -1,7 +0,0 @@
-export * from './collapse.module';
-export * from './accordion-base';
-export * from './accordion';
-export * from './expansion-panel-base';
-export * from './expansion-panel-content';
-export * from './expansion-panel-header';
-export * from './expansion-panel';

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

@@ -1,10 +0,0 @@
-export {StepperOrientation, StepState} from '@angular/cdk/stepper';
-export * from './stepper-module';
-export * from './step-label';
-export * from './stepper';
-export * from './stepper-button';
-export * from './step-header';
-export * from './stepper-intl';
-export * from './stepper-icon';
-export * from './step-content';
-export * from './step-footer'

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

@@ -1,19 +0,0 @@
-import { Directive, TemplateRef, inject } from '@angular/core';
-
-/**
- * Marks an <ng-template> as the content for a step.
- * Usage:
- *   <ng-template mdStepContent> ... </ng-template>
- *
- * The directive exposes the underlying TemplateRef so parent
- * components (e.g., a stepper) can instantiate it on demand.
- */
-@Directive({
-  selector: 'ng-template[mdStepContent]',
-})
-export class MDStepContent {
-  /** Reference to the template to be rendered for this step. */
-  _template = inject<TemplateRef<any>>(TemplateRef);
-
-  constructor() {}
-}

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

@@ -1,7 +0,0 @@
-import { Directive } from '@angular/core';
-
-
-@Directive({
-  selector: '[mdStepFooter]',
-})
-export class MDStepFooter {}

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

@@ -1,59 +0,0 @@
-<div class="step-icon-state-{{state}} step-icon" [class.step-icon-selected]="selected">
-    <div class="step-icon-content">
-        @if (iconOverrides && iconOverrides[state]) {
-        <ng-container
-            [ngTemplateOutlet]="iconOverrides[state]"
-            [ngTemplateOutletContext]="{index, active, optional}"
-        ></ng-container>
-        } @else { @switch (state) { @case ('number') {
-        <span aria-hidden="true">{{_getDefaultTextForState(state)}}</span>
-        } @default { @if (state === 'done') {
-        <span class="cdk-visually-hidden">{{_intl.completedLabel}}</span>
-        } @else if (state === 'edit') {
-        <span class="cdk-visually-hidden">{{_intl.editableLabel}}</span>
-        } @switch (state) { @case ('done') {
-        <div class="icon-wrapper">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
-                <path
-                    d="M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z"
-                />
-            </svg>
-        </div>
-        } @case ('edit') {
-        <div class="icon-wrapper">
-            <svg
-                width="36"
-                height="36"
-                viewBox="0 0 36 36"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                class="ng-star-inserted"
-            >
-                <rect x="0.5" y="0.5" width="35" height="35" rx="17.5" stroke="#929292"></rect>
-                <path
-                    d="M24.7373 10L14.5466 20.3769L11.2415 17.0114L8 20.3122L11.3051 23.6777L14.5678 27L17.8093 23.6992L28 13.3224L24.7373 10Z"
-                    fill="#28B446"
-                ></path>
-            </svg>
-        </div>
-        } } } } }
-    </div>
-</div>
-<div
-    class="step-label"
-    [class.step-label-active]="active"
-    [class.step-label-selected]="selected"
-    [class.step-label-error]="state == 'error'"
->
-    @if (_templateLabel(); as templateLabel) {
-    <div class="step-text-label">
-        <ng-container [ngTemplateOutlet]="templateLabel.template"></ng-container>
-    </div>
-    } @else if (_stringLabel()) {
-    <div class="step-text-label">{{label}}</div>
-    } @if (_hasOptionalLabel()) {
-    <div class="step-optional">{{_intl.optionalLabel}}</div>
-    } @if (_hasErrorLabel()) {
-    <div class="step-sub-label-error">{{errorMessage}}</div>
-    }
-</div>

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

@@ -1,205 +0,0 @@
-@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;
-
-$side-gap: 24px;
-$line-width: 1px;
-$line-gap: 8px;
-
-$step-sub-label-font-size: 12px;
-$step-header-icon-size: 16px;
-
-.step-header {
-    overflow: hidden;
-    outline: none;
-    cursor: pointer;
-    position: relative;
-    box-sizing: content-box;
-    -webkit-tap-highlight-color: transparent;
-
-    &:focus .mat-focus-indicator::before {
-        content: '';
-    }
-
-    &:hover[aria-disabled='true'] {
-        cursor: default;
-    }
-
-    &:hover:not([aria-disabled]),
-    &:hover[aria-disabled='false'] {
-        & .step-icon::after {
-            border-radius: 100%;
-            content: '';
-            border-width: 1px;
-            border-style: solid;
-            border-color: color-vars.$Light-Gray-1;
-            pointer-events: none;
-            display: block;
-            position: absolute;
-            inset-block-start: -4px;
-            inset-inline-end: -4px;
-            inset-block-end: -4px;
-            inset-inline-start: -4px;
-            z-index: 2;
-        }
-    }
-
-    &[aria-selected='true'] {
-        color: color-vars.$Black-Color;
-    }
-
-    &.cdk-keyboard-focused,
-    &.cdk-program-focused {
-        &:not([aria-disabled]) .step-icon::after {
-            border-radius: 100%;
-            content: '';
-            border-width: 1px;
-            border-style: solid;
-            border-color: color-vars.$Light-Gray-1;
-            pointer-events: none;
-            display: block;
-            position: absolute;
-            inset-block-start: -4px;
-            inset-inline-end: -4px;
-            inset-block-end: -4px;
-            inset-inline-start: -4px;
-            z-index: 2;
-        }
-    }
-
-    @media (hover: none) {
-        &:hover {
-            background: none;
-        }
-    }
-
-    @include cdk.high-contrast {
-        outline: solid 1px;
-
-        &[aria-selected='true'] {
-            .step-label {
-                text-decoration: underline;
-            }
-        }
-
-        &[aria-disabled='true'] {
-            outline-color: GrayText;
-            .step-label,
-            .step-icon,
-            .step-optional {
-                color: GrayText;
-            }
-        }
-    }
-}
-
-.step-optional {
-    font-size: 12px;
-    color: #dae5e4;
-}
-
-.step-sub-label-error {
-    font-size: $step-sub-label-font-size;
-    font-weight: normal;
-}
-
-.step-icon {
-    border-radius: 50%;
-    height: 36px;
-    width: 36px;
-    flex-shrink: 0;
-    position: relative;
-    color: color-vars.$Light-Gray-2;
-    background-color: color-vars.$Dark-Gray-2;
-}
-
-.step-icon-content {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    display: flex;
-}
-
-.step-label {
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    min-width: $label-min-width;
-    vertical-align: middle;
-    color: color-vars.$Dark-Gray-1;
-
-    .step-header-empty-label & {
-        min-width: 0;
-    }
-
-    &.step-label-selected {
-        color: color-vars.$Black-Color;
-    }
-}
-
-.step-text-label {
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.icon-wrapper {
-    font-size: 36px;
-    height: 36px;
-    width: 36px;
-    display: flex;
-    align-items: center;
-
-    fill: color-vars.$White;
-}
-
-.cdk-visually-hidden {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
-    outline: 0;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    left: 0;
-}
-
-.step-icon-selected {
-    color: color-vars.$Dark-Gray-2;
-    background-color: color-vars.$White;
-    border: 1px solid color-vars.$Red;
-}
-
-.step-icon-state-done {
-    background-color: color-vars.$White;
-    color: color-vars.$Black-Color;
-}
-
-.step-icon-state-edit {
-    background-color: color-vars.$White;
-    color: color-vars.$White;
-}