Browse Source

UI: Fixed dynamic dialog after migration to Angular 20

pull/15013/head
Vladyslav_Prykhodko 8 months ago
committed by Vladyslav Prykhodko
parent
commit
774886d64a
  1. 7
      ui-ngx/src/app/shared/components/dialog/dynamic/dynamic-dialog.module.ts
  2. 45
      ui-ngx/src/app/shared/components/dialog/dynamic/dynamic-dialog.ts
  3. 43
      ui-ngx/src/app/shared/components/dialog/dynamic/dynamic-overlay.ts

7
ui-ngx/src/app/shared/components/dialog/dynamic/dynamic-dialog.module.ts

@ -14,9 +14,9 @@
/// limitations under the License.
///
import { OverlayModule } from '@angular/cdk/overlay';
import { Overlay, OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
import { NgModule } from '@angular/core';
import { DEFAULT_DIALOG_CONFIG, DialogConfig, DialogModule } from '@angular/cdk/dialog';
import { DEFAULT_DIALOG_CONFIG, Dialog, DialogConfig, DialogModule } from '@angular/cdk/dialog';
import { MatDialogModule } from '@angular/material/dialog';
import { DynamicDialog, DynamicMatDialog } from './dynamic-dialog';
import { DynamicOverlay } from './dynamic-overlay';
@ -24,8 +24,11 @@ import { DynamicOverlayContainer } from './dynamic-overlay-container';
export const DYNAMIC_MAT_DIALOG_PROVIDERS = [
DynamicOverlayContainer,
{ provide: OverlayContainer, useExisting: DynamicOverlayContainer },
DynamicOverlay,
{ provide: Overlay, useExisting: DynamicOverlay },
DynamicDialog,
{ provide: Dialog, useExisting: DynamicDialog },
DynamicMatDialog,
{
provide: DEFAULT_DIALOG_CONFIG,

45
ui-ngx/src/app/shared/components/dialog/dynamic/dynamic-dialog.ts

@ -14,18 +14,11 @@
/// limitations under the License.
///
import { Location } from "@angular/common";
import { Inject, Injectable, Injector, Optional, SkipSelf, TemplateRef } from '@angular/core';
import {
MAT_DIALOG_DEFAULT_OPTIONS,
MAT_DIALOG_SCROLL_STRATEGY,
MatDialog,
MatDialogConfig, MatDialogRef
} from '@angular/material/dialog';
import { DynamicOverlay } from "./dynamic-overlay";
import { DynamicOverlayContainer } from '@shared/components/dialog/dynamic/dynamic-overlay-container';
import { ComponentType, ScrollStrategy } from '@angular/cdk/overlay';
import { DEFAULT_DIALOG_CONFIG, Dialog, DialogConfig } from '@angular/cdk/dialog';
import { inject, Injectable, TemplateRef } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
import { DynamicOverlay } from './dynamic-overlay';
import { ComponentType } from '@angular/cdk/overlay';
import { Dialog } from '@angular/cdk/dialog';
export interface DynamicMatDialogConfig<D> extends MatDialogConfig<D> {
containerElement?: HTMLElement;
@ -34,25 +27,12 @@ export interface DynamicMatDialogConfig<D> extends MatDialogConfig<D> {
@Injectable()
export class DynamicMatDialog extends MatDialog {
private _customOverlay: DynamicOverlay;
private _customOverlay = inject(DynamicOverlay);
constructor( _overlay: DynamicOverlay,
_injector: Injector,
@Optional() location: Location,
@Inject( MAT_DIALOG_DEFAULT_OPTIONS ) _defaultOptions: MatDialogConfig,
@Inject( MAT_DIALOG_SCROLL_STRATEGY ) _scrollStrategy: ScrollStrategy,
@Optional() @SkipSelf() _parentDialog:DynamicMatDialog,
_overlayContainer: DynamicOverlayContainer) {
super( _overlay, _injector, location, _defaultOptions, _scrollStrategy, _parentDialog, _overlayContainer );
this._dialog = _injector.get(DynamicDialog);
this._customOverlay = _overlay;
}
public open<T, D = any, R = any>(component: ComponentType<T> | TemplateRef<T>, config?: DynamicMatDialogConfig<D>): MatDialogRef<T, R> {
public override open<T, D = any, R = any>(component: ComponentType<T> | TemplateRef<T>, config?: DynamicMatDialogConfig<D>): MatDialogRef<T, R> {
if (config?.containerElement) {
config.containerElement.style.transform = 'translateZ(0)';
this._customOverlay.setContainerElement( config.containerElement );
this._customOverlay.setContainerElement(config.containerElement);
}
const ref = super.open(component, config);
if (config?.containerElement) {
@ -73,13 +53,4 @@ export class DynamicMatDialog extends MatDialog {
@Injectable()
export class DynamicDialog extends Dialog {
constructor( _overlay: DynamicOverlay,
_injector: Injector,
@Inject( DEFAULT_DIALOG_CONFIG ) _defaultOptions: DialogConfig,
@Inject( MAT_DIALOG_SCROLL_STRATEGY ) _scrollStrategy: ScrollStrategy,
@Optional() @SkipSelf() _parentDialog: DynamicDialog,
_overlayContainer: DynamicOverlayContainer) {
super( _overlay, _injector, _defaultOptions, _parentDialog, _overlayContainer, _scrollStrategy );
}
}

43
ui-ngx/src/app/shared/components/dialog/dynamic/dynamic-overlay.ts

@ -14,49 +14,16 @@
/// limitations under the License.
///
import {
Overlay,
ScrollStrategyOptions,
OverlayKeyboardDispatcher, OverlayOutsideClickDispatcher, OverlayPositionBuilder
} from '@angular/cdk/overlay';
import { ComponentFactoryResolver, Inject, Injectable, Injector, NgZone, DOCUMENT } from '@angular/core';
import { Overlay } from '@angular/cdk/overlay';
import { inject, Injectable } from '@angular/core';
import { DynamicOverlayContainer } from './dynamic-overlay-container';
import { Location } from '@angular/common';
import { Directionality } from '@angular/cdk/bidi';
@Injectable()
export class DynamicOverlay extends Overlay {
private _dynamicOverlayContainer: DynamicOverlayContainer;
private _dynamicOverlayContainer = inject(DynamicOverlayContainer);
constructor( scrollStrategies: ScrollStrategyOptions,
_overlayContainer: DynamicOverlayContainer,
_componentFactoryResolver: ComponentFactoryResolver,
_positionBuilder: OverlayPositionBuilder,
_keyboardDispatcher: OverlayKeyboardDispatcher,
_injector: Injector,
_ngZone: NgZone,
@Inject(DOCUMENT) document: Document,
_directionality: Directionality,
_location: Location,
_outsideClickDispatcher: OverlayOutsideClickDispatcher) {
super( scrollStrategies,
_overlayContainer,
_componentFactoryResolver,
_positionBuilder,
_keyboardDispatcher,
_injector,
_ngZone,
document,
_directionality,
_location,
_outsideClickDispatcher);
this._dynamicOverlayContainer = _overlayContainer;
}
public setContainerElement(containerElement:HTMLElement ): void {
this._dynamicOverlayContainer.setContainerElement( containerElement );
public setContainerElement(containerElement: HTMLElement): void {
this._dynamicOverlayContainer.setContainerElement(containerElement);
}
}

Loading…
Cancel
Save