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

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

@@ -1,239 +0,0 @@
-import {
-  ComponentType,
-  createBlockScrollStrategy,
-  createGlobalPositionStrategy,
-  ScrollStrategy,
-} from '@angular/cdk/overlay';
-import {
-  ComponentRef,
-  Injectable,
-  InjectionToken,
-  Injector,
-  OnDestroy,
-  TemplateRef,
-  Type,
-  inject,
-} from '@angular/core';
-
-import {defer, Observable, Subject} from 'rxjs';
-import {Dialog, DialogConfig} from '@angular/cdk/dialog';
-import {startWith} from 'rxjs/operators';
-import {_IdGenerator} from '@angular/cdk/a11y';
-import { MefDevDialogConfig } from './dialog-config';
-import { MefDevDialogRef } from './dialog-ref';
-import { MDDialogContainer } from './dialog-container';
-
-/** Injection token used to pass arbitrary data into a dialog instance. */
-export const DIALOG_DATA = new InjectionToken<any>('MdcDialogData');
-
-/** Token for providing global/default dialog configuration. */
-export const DIALOG_DEFAULT_OPTIONS = new InjectionToken<MefDevDialogConfig>(
-  'mdc-dialog-default-options',
-);
-
-/**
- * Token that provides a factory for the scroll strategy used by dialogs.
- * Defaults to `createBlockScrollStrategy` which prevents body scrolling while a dialog is open.
- */
-export const DIALOG_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(
-  'mdc-dialog-scroll-strategy',
-  {
-    providedIn: 'root',
-    factory: () => {
-      const injector = inject(Injector);
-      return () => createBlockScrollStrategy(injector);
-    },
-  },
-);
-
-/**
- * High-level dialog service wrapping CDK Dialog with MDC/MEF-specific defaults.
- *
- * Features:
- * - Merges provided config with app-level defaults.
- * - Creates a global centered position strategy by default.
- * - Emits streams for "after opened" and "after all closed".
- * - Keeps a stack of open dialogs and coordinates teardown.
- * - Bridges to a custom `MDDialogContainer` and `MefDevDialogRef`.
- */
-@Injectable({providedIn: 'root'})
-export class MDDialog implements OnDestroy {
-  /** Optional application-wide defaults injected via `DIALOG_DEFAULT_OPTIONS`. */
-  private _defaultOptions = inject<MefDevDialogConfig>(DIALOG_DEFAULT_OPTIONS, {optional: true});
-  /** Factory for the body scroll strategy while a dialog is open. */
-  private _scrollStrategy = inject(DIALOG_SCROLL_STRATEGY);
-  /** Optional parent dialog service (supports hierarchical injectors / lazy modules). */
-  private _parentDialog = inject(MDDialog, {optional: true, skipSelf: true});
-  /** Id generator for dialog instances. */
-  private _idGenerator = inject(_IdGenerator);
-  /** Root injector needed for CDK helpers (position strategy, etc.). */
-  private _injector = inject(Injector);
-  /** Underlying CDK Dialog service. */
-  protected _dialog = inject(Dialog);
-  /** Global flag to disable dialog enter/exit animations. */
-  private _animationsDisabled = false;
-
-  /** Stack of open dialogs at the current injector level. */
-  private readonly _openDialogsAtThisLevel: MefDevDialogRef<any>[] = [];
-  /** Completes after the last dialog at this level has been closed. */
-  private readonly _afterAllClosedAtThisLevel = new Subject<void>();
-  /** Emits each time a dialog is opened at this level. */
-  private readonly _afterOpenedAtThisLevel = new Subject<MefDevDialogRef<any>>();
-  /** Class reference used for providing config to the container. */
-  protected dialogConfigClass = MefDevDialogConfig;
-
-  /** Concrete types used to construct dialog refs/containers and provide DIALOG_DATA. */
-  private readonly _dialogRefConstructor: Type<MefDevDialogRef<any>>;
-  private readonly _dialogContainerType: Type<MDDialogContainer>;
-  private readonly _dialogDataToken: InjectionToken<any>;
-
-  /** Public list of open dialogs (delegates to parent if present). */
-  get openDialogs(): MefDevDialogRef<any>[] {
-    return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;
-  }
-
-  /** Stream that emits after each dialog is opened (delegates to parent if present). */
-  get afterOpened(): Subject<MefDevDialogRef<any>> {
-    return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpenedAtThisLevel;
-  }
-
-  /** Internal accessor for the "after all closed" subject (handles parent delegation). */
-  private _getAfterAllClosed(): Subject<void> {
-    const parent = this._parentDialog;
-    return parent ? parent._getAfterAllClosed() : this._afterAllClosedAtThisLevel;
-  }
-
-  /**
-   * Emits when all dialogs (in this hierarchy) are closed.
-   * If there are no open dialogs at subscription time, it emits once immediately.
-   */
-  readonly afterAllClosed: Observable<void> = defer(() =>
-    this.openDialogs.length
-      ? this._getAfterAllClosed()
-      : this._getAfterAllClosed().pipe(startWith(undefined)),
-  ) as Observable<any>;
-
-  constructor() {
-    // Bind concrete implementations used when opening dialogs.
-    this._dialogRefConstructor = MefDevDialogRef;
-    this._dialogContainerType = MDDialogContainer;
-    this._dialogDataToken = DIALOG_DATA;
-  }
-
-  /** Overload signatures for component vs template dialogs. */
-  open<T, D = any, R = any>(
-    component: ComponentType<T>,
-    config?: MefDevDialogConfig<D>,
-  ): MefDevDialogRef<T, R>;
-  open<T, D = any, R = any>(
-    template: TemplateRef<T>,
-    config?: MefDevDialogConfig<D>,
-  ): MefDevDialogRef<T, R>;
-  open<T, D = any, R = any>(
-    template: ComponentType<T> | TemplateRef<T>,
-    config?: MefDevDialogConfig<D>,
-  ): MefDevDialogRef<T, R>;
-
-  /**
-   * Opens a new dialog for either a Component or a TemplateRef.
-   * - Merges provided config with defaults.
-   * - Creates and returns a `MefDevDialogRef` for control and observability.
-   */
-  open<T, D = any, R = any>(
-    componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
-    config: MefDevDialogConfig<D> = {},
-  ): MefDevDialogRef<T, R> {
-    let dialogRef: MefDevDialogRef<T, R>;
-
-    // Merge caller config with global defaults; ensure id/scrollStrategy are set.
-    config = {...(this._defaultOptions || new MefDevDialogConfig()), ...config};
-    config.id = config.id || this._idGenerator.getId('mdc-dialog-');
-    config.scrollStrategy = config.scrollStrategy || this._scrollStrategy();
-
-    // Delegate creation to CDK Dialog with our container/ref wiring and MDC-ish defaults.
-    const cdkRef = this._dialog.open<R, D, T>(componentOrTemplateRef, {
-      ...config,
-      // Center the dialog horizontally and vertically by default.
-      positionStrategy: createGlobalPositionStrategy(this._injector)
-        .centerHorizontally()
-        .centerVertically(),
-      // The service manages close conditions; turning off CDK's default "click outside to close".
-      disableClose: true,
-      closePredicate: undefined,
-      closeOnDestroy: false,
-      closeOnOverlayDetachments: false,
-      // Compute whether animations should be disabled (global flag or 0 duration).
-      disableAnimations:
-        this._animationsDisabled ||
-        config.enterAnimationDuration?.toLocaleString() === '0' ||
-        config.exitAnimationDuration?.toString() === '0',
-      // Use a custom container component and provide both our and CDK config into it.
-      container: {
-        type: this._dialogContainerType,
-        providers: () => [
-          {provide: this.dialogConfigClass, useValue: config},
-          {provide: DialogConfig, useValue: config},
-        ],
-      },
-      // Expose the dialogRef as template context when opening from a TemplateRef.
-      templateContext: () => ({dialogRef}),
-      // Provide dialogRef, container and data to the component instance.
-      providers: (ref, cdkConfig, dialogContainer) => {
-        dialogRef = new this._dialogRefConstructor(ref, config, dialogContainer);
-        dialogRef.updatePosition(config?.position);
-
-        return [
-          {provide: this._dialogContainerType, useValue: dialogContainer},
-          {provide: this._dialogDataToken, useValue: cdkConfig.data},
-          {provide: this._dialogRefConstructor, useValue: dialogRef},
-        ];
-      },
-    });
-
-    // Bridge CDK ref to our custom ref for convenience.
-    (dialogRef! as {componentRef: ComponentRef<T>}).componentRef = cdkRef.componentRef!;
-    dialogRef!.componentInstance = cdkRef.componentInstance!;
-
-    // Track in the open stack and emit "after opened".
-    this.openDialogs.push(dialogRef!);
-    this.afterOpened.next(dialogRef!);
-
-    // When closed, remove from stack and emit "after all closed" if it was the last one.
-    dialogRef!.afterClosed().subscribe(() => {
-      const index = this.openDialogs.indexOf(dialogRef);
-      if (index > -1) {
-        this.openDialogs.splice(index, 1);
-        if (!this.openDialogs.length) {
-          this._getAfterAllClosed().next();
-        }
-      }
-    });
-
-    return dialogRef!;
-  }
-
-  /** Closes all currently open dialogs (in stack order). */
-  closeAll(): void {
-    this._closeDialogs(this.openDialogs);
-  }
-
-  /** Finds an open dialog by id (if any). */
-  getDialogById(id: string): MefDevDialogRef<any> | undefined {
-    return this.openDialogs.find(dialog => dialog.id === id);
-  }
-
-  /** On service destroy, close dialogs owned at this injector level and complete streams. */
-  ngOnDestroy() {
-    this._closeDialogs(this._openDialogsAtThisLevel);
-    this._afterAllClosedAtThisLevel.complete();
-    this._afterOpenedAtThisLevel.complete();
-  }
-
-  /** Helper that iterates and closes dialogs without changing array identity. */
-  private _closeDialogs(dialogs: MefDevDialogRef<any>[]) {
-    let i = dialogs.length;
-    while (i--) {
-      dialogs[i].close();
-    }
-  }
-}

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

@@ -1,11 +0,0 @@
-export * from './dialog';
-export * from './dialog-config';
-export * from './dialog-ref';
-export {
-  MDDialogActions,
-  MDDialogClose,
-  MDDialogTitle,
-  MDDialogContent,
-} from './dialog-content-directives';
-export {MDDialogContainer} from './dialog-container';
-export * from './modal-module';

package/src/lib/v2/modals/modal-module.ts

@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MDDialogContainer } from './dialog-container';
-import { MDDialogActions, MDDialogClose, MDDialogContent, MDDialogTitle } from './dialog-content-directives';
-import { DialogModule } from '@angular/cdk/dialog';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { PortalModule } from '@angular/cdk/portal';
-import { MDDialog } from './dialog';
-
-
-const DIRECTIVES = [
-  MDDialogContainer,
-  MDDialogClose,
-  MDDialogTitle,
-  MDDialogActions,
-  MDDialogContent,
-];
-
-@NgModule({
-    imports: [DialogModule, OverlayModule, PortalModule, ...DIRECTIVES],
-    exports: [...DIRECTIVES],
-    providers: [MDDialog],
-})
-export class MDModalModule {}

package/src/lib/v2/radio-button/public-api.ts

@@ -1,2 +0,0 @@
-export * from './radio';
-export * from './radio.module';

package/src/lib/v2/radio-button/radio.html

@@ -1,25 +0,0 @@
-<div class="radio-internal-form-field" #formField>
-  <div class="mdc-radio" [class.mdc-radio--disabled]="disabled">
-    <div class="mdc-radio-touch-target" (click)="_onTouchTargetClick($event)"></div>
-    <input #input class="mdc-radio__native-control" type="radio"
-           [id]="inputId"
-           [checked]="checked"
-           [disabled]="disabled && !disabledInteractive"
-           [attr.name]="name"
-           [attr.value]="value"
-           [required]="required"
-           aria-invalid="false"
-           [attr.aria-label]="ariaLabel"
-           [attr.aria-labelledby]="ariaLabelledby"
-           [attr.aria-describedby]="ariaDescribedby"
-           [attr.aria-disabled]="disabled && disabledInteractive ? 'true' : null"
-           (change)="_onInputInteraction($event)">
-    <div class="mdc-radio__background">
-      <div class="mdc-radio__outer-circle"></div>
-      <div class="mdc-radio__inner-circle"></div>
-    </div>
-  </div>
-  <label class="mdc-label" [for]="inputId">
-    <ng-content></ng-content>
-  </label>
-</div>

package/src/lib/v2/radio-button/radio.module.ts

@@ -1,8 +0,0 @@
-import {NgModule} from '@angular/core';
-import { MDRadioButton, MDRadioGroup } from './radio';
-
-@NgModule({
-  imports: [MDRadioGroup, MDRadioButton],
-  exports: [MDRadioGroup, MDRadioButton],
-})
-export class MDRadioModule {}

package/src/lib/v2/radio-button/radio.scss

@@ -1,298 +0,0 @@
-@use '@angular/cdk';
-@use './../../styles/vars.scss' as color-vars;
-
-.mdc-radio-button {
-    -webkit-tap-highlight-color: transparent;
-
-    $_icon-size: 16px;
-
-    .mdc-radio {
-        display: inline-block;
-        position: relative;
-        flex: 0 0 auto;
-        box-sizing: content-box;
-        width: $_icon-size;
-        height: $_icon-size;
-        cursor: pointer;
-
-        will-change: opacity, transform, border-color, color;
-
-        $size-token: 32px;
-        padding: calc((#{$size-token} - #{$_icon-size}) / 2);
-
-        &:hover > .mdc-radio__native-control:not([disabled]):not(:focus) {
-            & ~ .mdc-radio__background::before {
-                opacity: 0.04;
-                transform: scale(1);
-            }
-        }
-
-        &:hover > .mdc-radio__native-control:not([disabled]) ~ .mdc-radio__background {
-            > .mdc-radio__outer-circle {
-                border-color: #201a1b;
-            }
-        }
-
-        &:hover > .mdc-radio__native-control:enabled:checked + .mdc-radio__background {
-            $token: 'radio-selected-hover-icon-color';
-
-            > .mdc-radio__outer-circle {
-                border-color: color-vars.$Link;
-            }
-
-            > .mdc-radio__inner-circle {
-                background-color: color-vars.$Link;
-            }
-        }
-
-        &:active > .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background {
-            > .mdc-radio__outer-circle {
-                border-color: #201a1b;
-            }
-        }
-
-        &:active > .mdc-radio__native-control:enabled:checked + .mdc-radio__background {
-            > .mdc-radio__outer-circle {
-                border-color: color-vars.$Link;
-            }
-
-            > .mdc-radio__inner-circle {
-                background-color: color-vars.$Link;
-            }
-        }
-    }
-
-    .mdc-radio__background {
-        display: inline-block;
-        position: relative;
-        box-sizing: border-box;
-        width: $_icon-size;
-        height: $_icon-size;
-
-        &::before {
-            position: absolute;
-            transform: scale(0, 0);
-            border-radius: 50%;
-            opacity: 0;
-            pointer-events: none;
-            content: '';
-            transition: opacity 90ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms cubic-bezier(0.4, 0, 0.6, 1);
-
-            $size: 32px;
-            $offset: calc(-1 * (#{$size} - #{$_icon-size}) / 2);
-            width: $size;
-            height: $size;
-            top: $offset;
-            left: $offset;
-        }
-    }
-
-    .mdc-radio__outer-circle {
-        position: absolute;
-        top: 0;
-        left: 0;
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        border-width: 2px;
-        border-style: solid;
-        border-radius: 50%;
-        transition: border-color 90ms cubic-bezier(0.4, 0, 0.6, 1);
-    }
-
-    .mdc-radio__inner-circle {
-        position: absolute;
-        top: 0;
-        left: 0;
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        transform: scale(0);
-        border-radius: 50%;
-        transition: transform 90ms cubic-bezier(0.4, 0, 0.6, 1), background-color 90ms cubic-bezier(0.4, 0, 0.6, 1);
-
-        @include cdk.high-contrast {
-            background-color: CanvasText !important;
-        }
-    }
-
-    .mdc-radio__native-control {
-        position: absolute;
-        margin: 0;
-        padding: 0;
-        opacity: 0;
-        top: 0;
-        right: 0;
-        left: 0;
-        cursor: inherit;
-        z-index: 1;
-        width: 32px;
-        height: 32px;
-
-        &:checked,
-        &:disabled {
-            + .mdc-radio__background {
-                transition: opacity 90ms cubic-bezier(0, 0, 0.2, 1), transform 90ms cubic-bezier(0, 0, 0.2, 1);
-
-                > .mdc-radio__outer-circle {
-                    transition: _enter-transition(border-color);
-                }
-
-                > .mdc-radio__inner-circle {
-                    transition: transform 90ms cubic-bezier(0, 0, 0.2, 1),
-                        background-color 90ms cubic-bezier(0, 0, 0.2, 1);
-                }
-            }
-        }
-
-        &:focus + .mdc-radio__background::before {
-            transform: scale(1);
-            opacity: 0.12;
-            transition: opacity 90ms cubic-bezier(0, 0, 0.2, 1), transform 90ms cubic-bezier(0, 0, 0.2, 1);
-        }
-
-        &:disabled {
-            &:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle {
-                border-color: color-vars.$Light-Gray-1;
-                opacity: 0.38;
-            }
-
-            + .mdc-radio__background {
-                cursor: default;
-
-                > .mdc-radio__outer-circle {
-                    border-color: color-vars.$Light-Gray-1;
-                    opacity: 0.38;
-                }
-
-                > .mdc-radio__inner-circle {
-                    border-color: color-vars.$Light-Gray-1;
-                    opacity: 0.38;
-                }
-            }
-        }
-
-        &:enabled {
-            &:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle {
-                border-color: #514346;
-            }
-
-            &:checked + .mdc-radio__background {
-                > .mdc-radio__outer-circle {
-                    border-color: color-vars.$Link;
-                }
-
-                > .mdc-radio__inner-circle {
-                    background-color: color-vars.$Link;
-                }
-            }
-
-            &:focus:checked + .mdc-radio__background {
-                > .mdc-radio__outer-circle {
-                    border-color: color-vars.$Link;
-                }
-
-                > .mdc-radio__inner-circle {
-                    background-color: color-vars.$Link;
-                }
-            }
-        }
-
-        &:checked + .mdc-radio__background > .mdc-radio__inner-circle {
-            transform: scale(0.5);
-            transition: transform 90ms cubic-bezier(0, 0, 0.2, 1), background-color 90ms cubic-bezier(0, 0, 0.2, 1);
-        }
-    }
-
-    &.mdc-radio-disabled-interactive .mdc-radio--disabled {
-        pointer-events: auto;
-
-        .mdc-radio__native-control:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle {
-            border-color: color-vars.$Light-Gray-1;
-            opacity: 0.38;
-        }
-
-        &:hover .mdc-radio__native-control:checked + .mdc-radio__background,
-        .mdc-radio__native-control:checked:focus + .mdc-radio__background,
-        .mdc-radio__native-control + .mdc-radio__background {
-            > .mdc-radio__outer-circle {
-                border-color: color-vars.$Light-Gray-1;
-                opacity: 0.38;
-            }
-
-            > .mdc-radio__inner-circle {
-                border-color: color-vars.$Light-Gray-1;
-                opacity: 0.38;
-            }
-        }
-    }
-
-    .mdc-radio__background::before {
-        background-color: color-vars.$Light-Gray-1;
-    }
-
-    &.mdc-radio-checked {
-        .mdc-radio__background::before {
-            background-color: color-vars.$Link;
-        }
-    }
-
-    &.mdc-radio-disabled-interactive .mdc-radio--disabled {
-        .mdc-radio__background::before {
-            background-color: color-vars.$Light-Gray-1;
-        }
-    }
-
-    .mdc-radio--disabled + label {
-        color: color-mix(in srgb, color-vars.$Light-Gray-1 38%, transparent);
-    }
-
-    .mdc-radio > .mdc-radio__native-control:focus:enabled:not(:checked) {
-        & ~ .mdc-radio__background > .mdc-radio__outer-circle {
-            border-color: #201a1b;
-        }
-    }
-
-    &.cdk-focused .focus-indicator::before {
-        content: '';
-    }
-}
-
-.mdc-radio-disabled {
-    cursor: default;
-    pointer-events: none;
-
-    &.mdc-radio-disabled-interactive {
-        pointer-events: auto;
-    }
-}
-
-.mdc-radio-touch-target {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    height: 48px;
-    width: 48px;
-    transform: translate(-50%, -50%);
-    display: block;
-
-    [dir='rtl'] & {
-        left: auto;
-        right: 50%;
-        transform: translate(50%, -50%);
-    }
-}
-
-.radio-internal-form-field {
-    color: #201a1b;
-    font-family: 'Montserrat';
-    line-height: 1.25rem;
-    font-size: 0.875rem;
-    letter-spacing: 0.016rem;
-    font-weight: 400;
-
-    -webkit-font-smoothing: antialiased;
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
-}