+
+
+
+
+
+
+
+
+
+ {{ ref.data.title }}
` + standalone: true, changeDetection: ChangeDetectionStrategy.OnPush }) export class HelloWorldComponent { - constructor(public ref: DialogRef) {} + ref: DialogRef = inject(DialogRef); } ``` The library also provides the `dialogClose` directive helper, that you can use to close the modal: ```ts -import { DialogService, DialogRef } from '@ngneat/dialog'; +import { DialogService, DialogCloseDirective } from '@ngneat/dialog'; @Component({ + standalone: true, + imports: [DialogCloseDirective], template: `Hello World
- ` + `, }) export class HelloWorldComponent {} ``` @@ -189,6 +166,7 @@ import { DialogService } from '@ngneat/dialog'; @Component({ selector: 'app-root', + standalone: true, template: `Hello World
@@ -197,10 +175,10 @@ import { DialogService } from '@ngneat/dialog';You Made It!!!
' -}); - -this.dialog.error({ - title: 'Oh no', - body: tpl -}); -``` - -The `body` type can be a `string`, `HTML string`, or a ` Toni Villena 💻 🚇 ⚠️ |
-  Netanel Basal 📖 🤔 💻 |
-  Inbal Sinai 📖 |
-  Shahar Kazaz 💻 📖 |
-  beeman 💻 |
-  Ryan Hutchison 💻 🤔 |
-  Wybren Kortstra 💻 |
-
-Logo made by itim2101 from www.flaticon.com diff --git a/angular.json b/angular.json index 378a2e9..5630ddd 100644 --- a/angular.json +++ b/angular.json @@ -138,6 +138,5 @@ } } } - }, - "defaultProject": "dialog" + } } diff --git a/e2e/protractor.conf.js b/e2e/protractor.conf.js deleted file mode 100644 index 7c798cf..0000000 --- a/e2e/protractor.conf.js +++ /dev/null @@ -1,32 +0,0 @@ -// @ts-check -// Protractor configuration file, see link for more information -// https://github.com/angular/protractor/blob/master/lib/config.ts - -const { SpecReporter } = require('jasmine-spec-reporter'); - -/** - * @type { import("protractor").Config } - */ -exports.config = { - allScriptsTimeout: 11000, - specs: [ - './src/**/*.e2e-spec.ts' - ], - capabilities: { - browserName: 'chrome' - }, - directConnect: true, - baseUrl: 'http://localhost:4200/', - framework: 'jasmine', - jasmineNodeOpts: { - showColors: true, - defaultTimeoutInterval: 30000, - print: function() {} - }, - onPrepare() { - require('ts-node').register({ - project: require('path').join(__dirname, './tsconfig.json') - }); - jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); - } -}; \ No newline at end of file diff --git a/e2e/src/app.e2e-spec.ts b/e2e/src/app.e2e-spec.ts deleted file mode 100644 index 87a9e68..0000000 --- a/e2e/src/app.e2e-spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { AppPage } from './app.po'; -import { browser, logging } from 'protractor'; - -describe('workspace-project App', () => { - let page: AppPage; - - beforeEach(() => { - page = new AppPage(); - }); - - it('should display welcome message', () => { - page.navigateTo(); - expect(page.getTitleText()).toEqual('dialog app is running!'); - }); - - afterEach(async () => { - // Assert that there are no errors emitted from the browser - const logs = await browser.manage().logs().get(logging.Type.BROWSER); - expect(logs).not.toContain(jasmine.objectContaining({ - level: logging.Level.SEVERE, - } as logging.Entry)); - }); -}); diff --git a/e2e/src/app.po.ts b/e2e/src/app.po.ts deleted file mode 100644 index b68475e..0000000 --- a/e2e/src/app.po.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { browser, by, element } from 'protractor'; - -export class AppPage { - navigateTo(): Promise
-
- `,
- styleUrls: ['./base.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class BaseDialogComponent {
- title = this.ref.data[DialogContentSymbol].title;
- body = this.ref.data[DialogContentSymbol].body;
- context = {
- $implicit: this.ref,
- data: this.ref.data
- };
-
- constructor(public ref: DialogRef
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
`,
styleUrls: [`./dialog.component.scss`],
- encapsulation: ViewEncapsulation.None
+ encapsulation: ViewEncapsulation.None,
})
export class DialogComponent implements OnInit, OnDestroy {
+ config = inject(DIALOG_CONFIG);
+ dialogRef = inject(InternalDialogRef);
+
private size = this.config.sizes?.[this.config.size || 'md'];
styles = {
width: coerceCssPixelValue(this.config.width || this.size?.width),
height: coerceCssPixelValue(this.config.height || this.size?.height),
minHeight: coerceCssPixelValue(this.config.minHeight || this.size?.minHeight),
- maxHeight: coerceCssPixelValue(this.config.maxHeight || this.size?.maxHeight)
+ maxHeight: coerceCssPixelValue(this.config.maxHeight || this.size?.maxHeight),
};
@ViewChild('backdrop', { static: true })
@@ -69,27 +64,23 @@ export class DialogComponent implements OnInit, OnDestroy {
private destroy$ = new Subject();
- constructor(
- @Inject(DOCUMENT)
- private document,
- { nativeElement: host }: ElementRef,
- public dialogRef: InternalDialogRef,
- @Inject(DIALOG_CONFIG)
- public config: DialogConfig,
- @Inject(NODES_TO_INSERT)
- private nodes: Element[]
- ) {
- host.id = this.config.id;
+ private nodes = inject(NODES_TO_INSERT);
+
+ private document = inject(DOCUMENT);
+ private host: HTMLElement = inject(ElementRef).nativeElement;
+
+ constructor() {
+ this.host.id = this.config.id;
// Append nodes to dialog component, template or component could need
// something from the dialog component
// for example, if `[dialogClose]` is used into a directive,
// DialogRef will be getted from DialogService instead of DI
- this.nodes.forEach(node => host.appendChild(node));
+ this.nodes.forEach((node) => this.host.appendChild(node));
- if (config.windowClass) {
- const classNames = config.windowClass.split(/\s/).filter(x => x);
- classNames.forEach(name => host.classList.add(name));
+ if (this.config.windowClass) {
+ const classNames = this.config.windowClass.split(/\s/).filter((x) => x);
+ classNames.forEach((name) => this.host.classList.add(name));
}
}
@@ -114,7 +105,7 @@ export class DialogComponent implements OnInit, OnDestroy {
// `dialogElement` is resolved at this point
// And here is where dialog finally will be placed
- this.nodes.forEach(node => dialogElement.appendChild(node));
+ this.nodes.forEach((node) => dialogElement.appendChild(node));
}
reset(offset?: DragOffset): void {
diff --git a/projects/ngneat/dialog/src/lib/dialog.module.ts b/projects/ngneat/dialog/src/lib/dialog.module.ts
deleted file mode 100644
index 71de976..0000000
--- a/projects/ngneat/dialog/src/lib/dialog.module.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { DialogComponent } from './dialog.component';
-import { DialogCloseDirective } from './dialog-close.directive';
-import { GlobalDialogConfig } from './config';
-import { GLOBAL_DIALOG_CONFIG } from './tokens';
-import { DialogDraggableDirective } from './draggable.directive';
-import {
- BaseDialogComponent,
- ConfirmDialogComponent,
- SuccessDialogComponent,
- ErrorDialogComponent
-} from './built-in-dialogs';
-
-const BuiltIns = [BaseDialogComponent, SuccessDialogComponent, ConfirmDialogComponent, ErrorDialogComponent];
-
-@NgModule({
- declarations: [DialogComponent, DialogCloseDirective, DialogDraggableDirective, BuiltIns],
- imports: [CommonModule],
- entryComponents: [DialogComponent],
- exports: [DialogComponent, DialogCloseDirective]
-})
-export class DialogModule {
- static forRoot(config: Partial = {}): ModuleWithProviders {
- return {
- ngModule: DialogModule,
- providers: [
- {
- provide: GLOBAL_DIALOG_CONFIG,
- useValue: config
- }
- ]
- };
- }
-}
diff --git a/projects/ngneat/dialog/src/lib/dialog.service.ts b/projects/ngneat/dialog/src/lib/dialog.service.ts
index 985bf67..443148d 100644
--- a/projects/ngneat/dialog/src/lib/dialog.service.ts
+++ b/projects/ngneat/dialog/src/lib/dialog.service.ts
@@ -1,131 +1,76 @@
import {
ApplicationRef,
- ComponentFactoryResolver,
- ComponentRef,
+ createComponent,
ElementRef,
- EmbeddedViewRef,
- Inject,
+ EnvironmentInjector,
+ inject,
Injectable,
Injector,
TemplateRef,
- Type
+ Type,
+ ViewRef,
} from '@angular/core';
import { Subject } from 'rxjs';
-import { DialogConfig, GlobalDialogConfig } from './config';
import { DialogRef, InternalDialogRef } from './dialog-ref';
import { DialogComponent } from './dialog.component';
-import { DIALOG_CONFIG, DIALOG_DOCUMENT_REF, GLOBAL_DIALOG_CONFIG, NODES_TO_INSERT } from './tokens';
-import {
- ComputedDialogRefType,
- DialogContent,
- DialogContentSymbol,
- DialogContentTypes as DialogContentType,
- DialogTitleAndBody,
- ExtractDialogRefData,
- ExtractDialogRefResult,
- ExtractDialogResolvedRef
-} from './types';
import { DragOffset } from './draggable.directive';
-
-interface OpenParams {
- config: DialogConfig;
- dialogRef: InternalDialogRef;
-}
-
-interface AttachOptions {
- dialogRef: InternalDialogRef;
- ref: ComponentRef | TemplateRef;
- view: EmbeddedViewRef;
- attachToApp: boolean;
- config: DialogConfig;
-}
+import { DIALOG_CONFIG, DIALOG_DOCUMENT_REF, GLOBAL_DIALOG_CONFIG, NODES_TO_INSERT } from './providers';
+import { AttachOptions, DialogConfig, ExtractData, GlobalDialogConfig, OpenParams } from './types';
const OVERFLOW_HIDDEN_CLASS = 'ngneat-dialog-hidden';
@Injectable({ providedIn: 'root' })
export class DialogService {
- public dialogs: DialogRef[] = [];
-
- private dialogFactory = this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
+ private appRef = inject(ApplicationRef);
+ private injector = inject(EnvironmentInjector);
+ private document = inject(DIALOG_DOCUMENT_REF);
+ private globalConfig = inject(GLOBAL_DIALOG_CONFIG);
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private injector: Injector,
- @Inject(DIALOG_DOCUMENT_REF) private document,
- @Inject(DIALOG_CONFIG)
- private defaultConfig: DialogConfig,
- @Inject(GLOBAL_DIALOG_CONFIG)
- private globalConfig: GlobalDialogConfig
- ) {}
+ dialogs: DialogRef[] = [];
closeAll() {
- this.dialogs.forEach(dialog => dialog.close());
+ this.dialogs.forEach((dialog) => dialog.close());
}
- success(
- content: DialogContent | DialogTitleAndBody,
- config: Partial> = {}
- ): DialogRef> {
- const configWithDefaults = this.mergeConfigWithContent(this.applyDefaultSize(config), content);
-
- return this.open(configWithDefaults.success.component, configWithDefaults);
- }
-
- confirm(
- content: DialogContent | DialogTitleAndBody,
- config: Partial> = {}
- ): DialogRef> {
- const configWithDefaults = this.mergeConfigWithContent(this.applyDefaultSize(config), content);
-
- return this.open(configWithDefaults.confirm.component, configWithDefaults);
- }
-
- error(
- content: DialogContent | DialogTitleAndBody,
- config: Partial> = {}
- ): DialogRef> {
- const configWithDefaults = this.mergeConfigWithContent(this.applyDefaultSize(config), content);
-
- return this.open(configWithDefaults.error.component, configWithDefaults);
- }
+ open(template: TemplateRef, config?: Partial): DialogRef;
+ open>(
+ component: C,
+ config?: Partial>>>
+ ): DialogRef>>;
+ open(componentOrTemplate: any, config: Partial> = {}): DialogRef {
+ const mergedConfig = this.mergeConfig(config);
+ mergedConfig.onOpen?.();
- open<
- TData extends ExtractDialogRefData>,
- TResult extends ExtractDialogRefResult>,
- T extends Type | TemplateRef = Type | TemplateRef,
- TDialogRef extends DialogRef = DialogRef>
- >(componentOrTemplate: T, config: Partial> = {}): TDialogRef {
- const configWithDefaults = this.mergeConfig(config);
- configWithDefaults.onOpen?.();
const dialogRef = new InternalDialogRef({
- id: configWithDefaults.id,
- data: configWithDefaults.data,
- backdropClick$: new Subject()
+ id: mergedConfig.id,
+ data: mergedConfig.data,
+ backdropClick$: new Subject(),
});
+
+ this.throwIfIDAlreadyExists(mergedConfig.id);
+
const params: OpenParams = {
- config: configWithDefaults,
- dialogRef
+ config: mergedConfig,
+ dialogRef,
};
- this.throwIfIDAlreadyExists(configWithDefaults.id);
-
this.dialogs.push(dialogRef);
+
if (this.dialogs.length === 1) {
this.document.body.classList.add(OVERFLOW_HIDDEN_CLASS);
}
return componentOrTemplate instanceof TemplateRef
- ? (this.openTemplate(componentOrTemplate, params) as TDialogRef)
+ ? (this.openTemplate(componentOrTemplate, params) as any)
: typeof componentOrTemplate === 'function'
- ? (this.openComponent(componentOrTemplate, params) as TDialogRef)
- : this.throwMustBeAComponentOrATemplateRef(componentOrTemplate);
+ ? (this.openComponent(componentOrTemplate, params) as any)
+ : throwMustBeAComponentOrATemplateRef(componentOrTemplate);
}
private openTemplate(template: TemplateRef, { config, dialogRef }: OpenParams) {
const context = {
$implicit: dialogRef,
- config
+ config,
};
const view = config.vcr?.createEmbeddedView(template, context) || template.createEmbeddedView(context);
@@ -135,43 +80,44 @@ export class DialogService {
config,
ref: template,
view,
- attachToApp: !config.vcr
+ attachToApp: !config.vcr,
});
}
- private openComponent(component: Type, { config, dialogRef }: OpenParams) {
- const factory = this.componentFactoryResolver.resolveComponentFactory(component);
- const componentRef = factory.create(
- Injector.create({
+ private openComponent(Component: Type, { config, dialogRef }: OpenParams) {
+ const componentRef = createComponent(Component, {
+ elementInjector: Injector.create({
providers: [
{
provide: DialogRef,
- useValue: dialogRef
+ useValue: dialogRef,
},
{
provide: DIALOG_CONFIG,
- useValue: config
- }
+ useValue: config,
+ },
],
- parent: config.vcr?.injector || this.injector
- })
- );
+ parent: config.vcr?.injector || this.injector,
+ }),
+ environmentInjector: this.injector,
+ });
return this.attach({
dialogRef,
config,
ref: componentRef,
- view: componentRef.hostView as EmbeddedViewRef,
- attachToApp: true
+ view: componentRef.hostView,
+ attachToApp: true,
});
}
private attach({ dialogRef, config, ref, view, attachToApp }: AttachOptions): DialogRef {
const dialog = this.createDialog(config, dialogRef, view);
+
const container = config.container instanceof ElementRef ? config.container.nativeElement : config.container;
const hooks = {
- after: new Subject()
+ after: new Subject(),
};
const onClose = (result: unknown) => {
@@ -193,7 +139,7 @@ export class DialogService {
afterClosed$: null,
backdropClick$: null,
beforeCloseGuards: null,
- onReset: null
+ onReset: null,
});
hooks.after.next(result);
@@ -213,7 +159,7 @@ export class DialogService {
ref,
onClose,
afterClosed$: hooks.after.asObservable(),
- onReset
+ onReset,
});
container.appendChild(dialog.location.nativeElement);
@@ -226,106 +172,49 @@ export class DialogService {
return dialogRef.asDialogRef();
}
- private createDialog(config: DialogConfig, dialogRef: InternalDialogRef, view: EmbeddedViewRef) {
- return this.dialogFactory.create(
- Injector.create({
+ private createDialog(config: DialogConfig, dialogRef: InternalDialogRef, view: ViewRef) {
+ return createComponent(DialogComponent, {
+ elementInjector: Injector.create({
providers: [
{
provide: InternalDialogRef,
- useValue: dialogRef
+ useValue: dialogRef,
},
{
- provide: DIALOG_CONFIG,
- useValue: config
+ provide: NODES_TO_INSERT,
+ useValue: (view as any).rootNodes,
},
{
- provide: NODES_TO_INSERT,
- useValue: view.rootNodes
- }
+ provide: DIALOG_CONFIG,
+ useValue: config,
+ },
],
- parent: this.injector
- })
- );
+ parent: this.injector,
+ }),
+ environmentInjector: this.injector,
+ });
}
- private mergeConfig(config: Partial): DialogConfig {
+ private mergeConfig(inlineConfig: Partial): DialogConfig & GlobalDialogConfig {
return {
- ...this.defaultConfig,
- id: nanoid(),
...this.globalConfig,
- ...this.cleanConfig(config),
- sizes: {
- ...this.defaultConfig.sizes,
- ...this.globalConfig?.sizes,
- ...config?.sizes
- }
- };
- }
-
- private mergeConfigWithContent(config: Partial, content: DialogContent | DialogTitleAndBody) {
- const { data, ...configWithDefaults } = this.mergeConfig(config);
-
- return {
- ...configWithDefaults,
- data: {
- ...data,
- [DialogContentSymbol]: this.isTemplateOrString(content)
- ? {
- title: null,
- body: {
- type: this.getTypeOfContent(content),
- content
- }
- }
- : Object.entries(content).reduce((acc, [key, value]) => {
- acc[key] = {
- type: this.getTypeOfContent(value),
- content: value
- };
-
- return acc;
- }, {})
- }
- };
- }
-
- private cleanConfig(config: Partial) {
- return Object.entries(config).reduce((cleanConfig, [key, value]) => {
- if (value != null) {
- cleanConfig[key] = value;
- }
- return cleanConfig;
- }, {});
- }
-
- private isTemplateOrString(content: DialogContent | DialogTitleAndBody): content is DialogContent {
- return content instanceof TemplateRef || typeof content === 'string';
- }
-
- private getTypeOfContent(content: DialogContent): DialogContentType {
- return content instanceof TemplateRef ? 'template' : 'string';
- }
-
- private throwMustBeAComponentOrATemplateRef(value: unknown): never {
- throw new TypeError(`Dialog must receive a Component or a TemplateRef, but this has been passed instead: ${value}`);
+ id: nanoid(),
+ ...inlineConfig,
+ sizes: this.globalConfig?.sizes,
+ } as DialogConfig & GlobalDialogConfig;
}
private throwIfIDAlreadyExists(id: string) {
- if (this.dialogs.find(dialog => dialog.id === id)) {
+ if (this.dialogs.find((dialog) => dialog.id === id)) {
throw new Error(`Please, ID must be unique, but there is already a dialog created with this ID: ${id}`);
}
}
+}
- private applyDefaultSize(config: Partial>): Partial> {
- return {
- ...config,
- size: config.size || 'sm'
- };
- }
+function throwMustBeAComponentOrATemplateRef(value: unknown): never {
+ throw new TypeError(`Dialog must receive a Component or a TemplateRef, but this has been passed instead: ${value}`);
}
function nanoid() {
- return `dialog-${Math.random()
- .toString(36)
- .substring(7)}`;
+ return `dialog-${Math.random().toString(36).substring(7)}`;
}
diff --git a/projects/ngneat/dialog/src/lib/dialog.spec.ts b/projects/ngneat/dialog/src/lib/dialog.spec.ts
deleted file mode 100644
index 5aa03ae..0000000
--- a/projects/ngneat/dialog/src/lib/dialog.spec.ts
+++ /dev/null
@@ -1,363 +0,0 @@
-import { Provider, Component, ViewChild, ViewContainerRef, TemplateRef } from '@angular/core';
-import { Spectator, createComponentFactory } from '@ngneat/spectator';
-import { Subject } from 'rxjs';
-
-import { DialogConfig } from './config';
-import { DIALOG_CONFIG } from './tokens';
-import { DialogDraggableDirective } from './draggable.directive';
-import { DialogService } from './dialog.service';
-import { DialogModule } from './dialog.module';
-
-describe('Dialog', () => {
- const defaultConfig: Partial = {
- id: 'test',
- container: document.body,
- backdrop: true,
- enableClose: true,
- draggable: false,
- resizable: false,
- size: 'md',
- windowClass: undefined,
- sizes: undefined,
- width: undefined,
- height: undefined,
- data: undefined,
- vcr: undefined
- };
-
- function withConfig(config: Partial = {}): { providers: Provider[] } {
- return {
- providers: [
- {
- provide: DIALOG_CONFIG,
- useValue: { ...defaultConfig, ...config }
- }
- ]
- };
- }
-
- @Component({
- selector: 'test-dialog',
- template: 'component dialog '
- })
- class TestDialogComponent {
- changes$ = new Subject();
- }
-
- @Component({
- selector: 'test-dialog',
- template: ''
- })
- class TestDialogClosableUsingDialogCloseComponent {}
-
- @Component({
- template: `
-
-
-
-
-
-
-
-
-
-
-
- `
- })
- class TestComponent {
- @ViewChild('otherVCR', { read: ViewContainerRef })
- otherVCR: ViewContainerRef;
-
- @ViewChild('tmpl')
- tmpl: TemplateRef;
-
- @ViewChild('usingDialogClose')
- tmplWithDialogClose: TemplateRef;
-
- @ViewChild('usingDialogCloseWithoutResult')
- tmplWithDialogCloseWithoutResult: TemplateRef;
-
- tmplChanges$ = new Subject();
-
- constructor(public dialog: DialogService) {}
- }
-
- let spectator: Spectator;
-
- const createComponent = createComponentFactory({
- component: TestComponent,
- declarations: [DialogDraggableDirective, TestDialogComponent, TestDialogClosableUsingDialogCloseComponent],
- imports: [DialogModule.forRoot()]
- });
-
- afterEach(() => {
- const dialogEls = document.querySelectorAll('ngneat-dialog');
-
- Array.from(dialogEls)
- .filter(Boolean)
- .forEach(el => el.remove());
- });
-
- it('should create it', () => {
- spectator = createComponent();
-
- expect(spectator.component).toBeTruthy();
- });
-
- it('should open dialog with a template', () => {
- spectator = createComponent();
- const { component } = spectator;
-
- component.dialog.open(component.tmpl);
-
- spectator.detectChanges();
-
- expect(document.querySelector('#tmpl')).toContainText('template dialog');
- });
-
- it('should be able of subscribe to afterClosed$ and backdropClick$', () => {
- spectator = createComponent();
- const { component } = spectator;
-
- const dialogRef = component.dialog.open(component.tmpl);
-
- expect(() => dialogRef.afterClosed$.subscribe()).not.toThrow();
- expect(() => dialogRef.backdropClick$.subscribe()).not.toThrow();
- });
-
- it('should open dialog with a component', () => {
- spectator = createComponent();
- const { component } = spectator;
-
- component.dialog.open(TestDialogComponent);
-
- spectator.detectChanges();
-
- expect(document.querySelector('test-dialog')).toContainText('component dialog');
- });
-
- describe('built-in dialogs', () => {
- let component: TestComponent;
- let service: DialogService;
-
- beforeEach(() => {
- spectator = createComponent();
- component = spectator.component;
- service = component.dialog;
- });
-
- ['confirm', 'error', 'success'].forEach(method => {
- describe(method, () => {
- describe(`should open it`, () => {
- it('using a ng-template', () => {
- service[method](component.tmpl);
-
- spectator.detectChanges();
-
- expect(spectator.query(`ngneat-dialog-${method}`, { root: true })).toBeTruthy();
- expect(spectator.query('.dialog-content', { root: true })).toContainText('template dialog');
- });
-
- it('apending HTML', () => {
- service[method]('();
- constructor(private host: ElementRef, private zone: NgZone, private renderer: Renderer2) {}
-
public ngAfterViewInit(): void {
if (!this.enabled) {
return;
@@ -49,7 +51,7 @@ export class DialogDraggableDirective implements AfterViewInit, OnChanges, OnDes
this.enabled = true;
/** determine if the component has been init by the handle variable */
if (this.handle) {
- this.renderer.setStyle(this.handle, 'cursor', 'move');
+ this.handle.style.setProperty('cursor', 'move');
} else if (this.enabled) {
this.init();
}
@@ -58,7 +60,7 @@ export class DialogDraggableDirective implements AfterViewInit, OnChanges, OnDes
if (!this.dialogDragEnabled) {
this.enabled = false;
if (this.handle) {
- this.renderer.setStyle(this.handle, 'cursor', '');
+ this.handle.style.setProperty('cursor', '');
}
}
}
@@ -82,17 +84,17 @@ export class DialogDraggableDirective implements AfterViewInit, OnChanges, OnDes
const mousedrag$ = mousedown$.pipe(
filter(() => this.enabled),
- map(event => ({
+ map((event) => ({
startX: event.clientX,
- startY: event.clientY
+ startY: event.clientY,
})),
switchMap(({ startX, startY }) =>
mousemove$.pipe(
- map(event => {
+ map((event) => {
event.preventDefault();
this.delta = {
x: event.clientX - startX,
- y: event.clientY - startY
+ y: event.clientY - startY,
};
if (this.dragConstraint === 'constrain') {
this.checkConstraint();
@@ -136,7 +138,7 @@ export class DialogDraggableDirective implements AfterViewInit, OnChanges, OnDes
this.zone.runOutsideAngular(() => {
requestAnimationFrame(() => {
const transform = `translate(${this.translateX}px, ${this.translateY}px)`;
- this.renderer.setStyle(this.target, 'transform', transform);
+ this.handle.style.setProperty('transform', transform);
});
});
}
@@ -167,7 +169,7 @@ export class DialogDraggableDirective implements AfterViewInit, OnChanges, OnDes
/** add the move cursor */
if (this.handle && this.enabled) {
- this.renderer.setStyle(this.handle, 'cursor', 'move');
+ this.handle.style.setProperty('cursor', 'move');
}
this.target =
@@ -181,7 +183,7 @@ export class DialogDraggableDirective implements AfterViewInit, OnChanges, OnDes
}
private checkConstraint(): void {
- const { top, width, height, left } = this.target.getBoundingClientRect();
+ const { width, height } = this.target.getBoundingClientRect();
const { innerWidth, innerHeight } = window;
const verticalDistance = this.translateY > 0 ? this.translateY + height / 2 : this.translateY - height / 2;
diff --git a/projects/ngneat/dialog/src/lib/providers.ts b/projects/ngneat/dialog/src/lib/providers.ts
new file mode 100644
index 0000000..28cff71
--- /dev/null
+++ b/projects/ngneat/dialog/src/lib/providers.ts
@@ -0,0 +1,95 @@
+import { DOCUMENT } from '@angular/common';
+import { inject, InjectionToken, Provider } from '@angular/core';
+
+import { DialogConfig, GlobalDialogConfig } from './types';
+
+export const DIALOG_DOCUMENT_REF = new InjectionToken(
+ 'A reference to the document. Useful for iframes that want appends to parent window',
+ {
+ providedIn: 'root',
+ factory() {
+ return inject(DOCUMENT);
+ },
+ }
+);
+
+export const DIALOG_CONFIG = new InjectionToken('config', {
+ providedIn: 'root',
+ factory() {
+ return {} as any;
+ },
+});
+
+export function defaultGlobalConfig(): Partial {
+ return {
+ id: undefined,
+ container: inject(DIALOG_DOCUMENT_REF).body,
+ backdrop: true,
+ closeButton: true,
+ enableClose: true,
+ draggable: false,
+ dragConstraint: 'none',
+ resizable: false,
+ size: 'md',
+ windowClass: undefined,
+ width: undefined,
+ height: undefined,
+ minHeight: undefined,
+ maxHeight: undefined,
+ data: undefined,
+ vcr: undefined,
+ sizes: {
+ sm: {
+ height: 'auto',
+ width: '400px',
+ },
+ md: {
+ height: 'auto',
+ width: '560px',
+ },
+ lg: {
+ height: 'auto',
+ width: '800px',
+ },
+ fullScreen: {
+ height: '100%',
+ width: '100%',
+ },
+ },
+ onClose: undefined,
+ onOpen: undefined,
+ };
+}
+
+export const GLOBAL_DIALOG_CONFIG = new InjectionToken>('Global dialog config token', {
+ providedIn: 'root',
+ factory() {
+ return defaultGlobalConfig();
+ },
+});
+
+export const NODES_TO_INSERT = new InjectionToken('Nodes inserted into the dialog');
+
+export function provideDialogConfig(config: Partial): Provider {
+ return {
+ provide: GLOBAL_DIALOG_CONFIG,
+ useFactory() {
+ const defaultConfig = defaultGlobalConfig();
+ return {
+ ...defaultGlobalConfig(),
+ ...config,
+ sizes: {
+ ...defaultConfig.sizes,
+ ...config.sizes,
+ },
+ };
+ },
+ };
+}
+
+export function provideDialogDocRef(doc: Document) {
+ return {
+ provide: DIALOG_DOCUMENT_REF,
+ useValue: doc,
+ };
+}
diff --git a/projects/ngneat/dialog/src/lib/dialog-close.directive.spec.ts b/projects/ngneat/dialog/src/lib/specs/dialog-close.directive.spec.ts
similarity index 76%
rename from projects/ngneat/dialog/src/lib/dialog-close.directive.spec.ts
rename to projects/ngneat/dialog/src/lib/specs/dialog-close.directive.spec.ts
index b7b16ec..36974df 100644
--- a/projects/ngneat/dialog/src/lib/dialog-close.directive.spec.ts
+++ b/projects/ngneat/dialog/src/lib/specs/dialog-close.directive.spec.ts
@@ -1,14 +1,14 @@
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { createDirectiveFactory } from '@ngneat/spectator';
-import { DialogCloseDirective } from './dialog-close.directive';
-import { DialogService } from './dialog.service';
-import { DialogRef } from './dialog-ref';
+import { DialogCloseDirective } from '../dialog-close.directive';
+import { DialogService } from '../dialog.service';
+import { DialogRef } from '../dialog-ref';
describe('DialogClose', () => {
const createDirective = createDirectiveFactory({
directive: DialogCloseDirective,
- schemas: [NO_ERRORS_SCHEMA]
+ schemas: [NO_ERRORS_SCHEMA],
});
it('should get dialog-ref getting id from parent a searching in dialog-service', () => {
@@ -21,10 +21,10 @@ describe('DialogClose', () => {
{
provide: DialogService,
useValue: {
- dialogs: [dialogRefFromParent]
- }
- }
- ]
+ dialogs: [dialogRefFromParent],
+ },
+ },
+ ],
}
);
@@ -39,15 +39,15 @@ describe('DialogClose', () => {
providers: [
{
provide: DialogRef,
- useValue: dialogRefFromInjector
+ useValue: dialogRefFromInjector,
},
{
provide: DialogService,
useValue: {
- dialogs: [dialogRefFromParent]
- }
- }
- ]
+ dialogs: [dialogRefFromParent],
+ },
+ },
+ ],
});
expect(spectator.directive.ref).toBe(dialogRefFromInjector as any);
@@ -56,22 +56,22 @@ describe('DialogClose', () => {
it('on close should call dialog-ref close method, passing result', () => {
const dialogRefFromInjector: Partial = {
id: 'from-injector',
- close: jasmine.createSpy()
+ close: jasmine.createSpy(),
};
const spectator = createDirective(``, {
providers: [
{
provide: DialogRef,
- useValue: dialogRefFromInjector
+ useValue: dialogRefFromInjector,
},
{
provide: DialogService,
useValue: {
- dialogs: []
- }
- }
- ]
+ dialogs: [],
+ },
+ },
+ ],
});
spectator.click(spectator.query('button'));
diff --git a/projects/ngneat/dialog/src/lib/dialog.component.spec.ts b/projects/ngneat/dialog/src/lib/specs/dialog.component.spec.ts
similarity index 89%
rename from projects/ngneat/dialog/src/lib/dialog.component.spec.ts
rename to projects/ngneat/dialog/src/lib/specs/dialog.component.spec.ts
index aaaa904..5520d84 100644
--- a/projects/ngneat/dialog/src/lib/dialog.component.spec.ts
+++ b/projects/ngneat/dialog/src/lib/specs/dialog.component.spec.ts
@@ -1,14 +1,14 @@
import { Provider } from '@angular/core';
import { byText, createComponentFactory, Spectator } from '@ngneat/spectator';
import { Subject } from 'rxjs';
-import { DialogConfig } from './config';
-import { InternalDialogRef } from './dialog-ref';
-import { DialogComponent } from './dialog.component';
-import { DialogDraggableDirective } from './draggable.directive';
-import { DIALOG_CONFIG, NODES_TO_INSERT } from './tokens';
+import { InternalDialogRef } from '../dialog-ref';
+import { DialogComponent } from '../dialog.component';
+import { DialogDraggableDirective } from '../draggable.directive';
+import { DIALOG_CONFIG, NODES_TO_INSERT } from '../providers';
+import { DialogConfig, GlobalDialogConfig } from '../types';
describe('DialogComponent', () => {
- const defaultConfig: Partial = {
+ const defaultConfig: Partial = {
id: 'test',
container: document.body,
backdrop: true,
@@ -21,7 +21,7 @@ describe('DialogComponent', () => {
width: undefined,
height: undefined,
data: undefined,
- vcr: undefined
+ vcr: undefined,
};
function withConfig(config: Partial = {}): { providers: Provider[] } {
@@ -29,9 +29,9 @@ describe('DialogComponent', () => {
providers: [
{
provide: DIALOG_CONFIG,
- useValue: { ...defaultConfig, ...config }
- }
- ]
+ useValue: { ...defaultConfig, ...config },
+ },
+ ],
};
}
@@ -39,31 +39,27 @@ describe('DialogComponent', () => {
const createComponent = createComponentFactory({
component: DialogComponent,
- declarations: [DialogDraggableDirective],
+ imports: [DialogDraggableDirective],
providers: [
- {
- provide: DIALOG_CONFIG,
- useValue: {}
- },
{
provide: InternalDialogRef,
useFactory: () => ({
close: jasmine.createSpy(),
- backdropClick$: new Subject()
- })
+ backdropClick$: new Subject(),
+ }),
},
{
provide: NODES_TO_INSERT,
- useValue: [document.createTextNode('nodes '), document.createTextNode('inserted')]
- }
- ]
+ useValue: [document.createTextNode('nodes '), document.createTextNode('inserted')],
+ },
+ ],
});
afterEach(() => {
const containerEls = document.querySelectorAll('.ngneat-dialog-content');
const backdropEls = document.querySelectorAll('.ngneat-dialog-backdrop');
- [...Array.from(containerEls), ...Array.from(backdropEls)].filter(Boolean).forEach(el => el.remove());
+ [...Array.from(containerEls), ...Array.from(backdropEls)].filter(Boolean).forEach((el) => el.remove());
});
it('should create', () => {
@@ -95,7 +91,7 @@ describe('DialogComponent', () => {
it('backdropClick$ should point to element', () => {
let backdropClicked = false;
spectator.inject(InternalDialogRef).backdropClick$.subscribe({
- next: () => (backdropClicked = true)
+ next: () => (backdropClicked = true),
});
spectator.dispatchMouseEvent('.ngneat-dialog-backdrop', 'click');
@@ -114,7 +110,7 @@ describe('DialogComponent', () => {
it('backdropClick$ should point to body', () => {
let backdropClicked = false;
spectator.inject(InternalDialogRef).backdropClick$.subscribe({
- next: () => (backdropClicked = true)
+ next: () => (backdropClicked = true),
});
spectator.dispatchMouseEvent(document.body, 'click');
diff --git a/projects/ngneat/dialog/src/lib/dialog.service.spec.ts b/projects/ngneat/dialog/src/lib/specs/dialog.service.spec.ts
similarity index 62%
rename from projects/ngneat/dialog/src/lib/dialog.service.spec.ts
rename to projects/ngneat/dialog/src/lib/specs/dialog.service.spec.ts
index b072472..4b1500a 100644
--- a/projects/ngneat/dialog/src/lib/dialog.service.spec.ts
+++ b/projects/ngneat/dialog/src/lib/specs/dialog.service.spec.ts
@@ -1,39 +1,36 @@
-import { ApplicationRef, ComponentFactoryResolver, InjectionToken, Injector, TemplateRef } from '@angular/core';
+import { ApplicationRef, Component, TemplateRef } from '@angular/core';
import { fakeAsync, tick } from '@angular/core/testing';
import { createServiceFactory, SpectatorService } from '@ngneat/spectator';
-import { timer } from 'rxjs';
-import { mapTo } from 'rxjs/operators';
-import { DialogConfig } from './config';
-import { DialogRef, InternalDialogRef } from './dialog-ref';
-import { DialogComponent } from './dialog.component';
-import { DialogService } from './dialog.service';
-import { DIALOG_CONFIG, DIALOG_DOCUMENT_REF, GLOBAL_DIALOG_CONFIG, NODES_TO_INSERT } from './tokens';
-
-class FakeFactoryResolver extends ComponentFactoryResolver {
+import { mapTo, timer } from 'rxjs';
+import { InternalDialogRef } from '../dialog-ref';
+import { DialogService } from '../dialog.service';
+import { DIALOG_DOCUMENT_REF, GLOBAL_DIALOG_CONFIG, provideDialogConfig } from '../providers';
+
+class FakeFactoryResolver {
componentOne = {
destroy: jasmine.createSpy(),
hostView: {
destroy: jasmine.createSpy(),
- rootNodes: [document.createTextNode('nodes 1')]
+ rootNodes: [document.createTextNode('nodes 1')],
},
location: {
- nativeElement: 'fake 1'
- }
+ nativeElement: 'fake 1',
+ },
};
componentTwo = {
destroy: jasmine.createSpy(),
hostView: {
destroy: jasmine.createSpy(),
- rootNodes: [document.createTextNode('nodes 2')]
+ rootNodes: [document.createTextNode('nodes 2')],
},
location: {
- nativeElement: 'fake 2'
- }
+ nativeElement: 'fake 2',
+ },
};
factory = {
- create: jasmine.createSpy().and.returnValues(this.componentOne, this.componentTwo)
+ create: jasmine.createSpy().and.returnValues(this.componentOne, this.componentTwo),
};
resolveComponentFactory = jasmine.createSpy().and.returnValue(this.factory);
@@ -41,10 +38,9 @@ class FakeFactoryResolver extends ComponentFactoryResolver {
class FakeTemplateRef extends TemplateRef {
elementRef = null;
-
view = {
rootNodes: [document.createTextNode('template'), document.createTextNode(' nodes')],
- destroy: jasmine.createSpy()
+ destroy: jasmine.createSpy(),
};
createEmbeddedView = jasmine.createSpy().and.returnValue(this.view);
@@ -67,21 +63,14 @@ describe('DialogService', () => {
service: DialogService,
mocks: [ApplicationRef],
providers: [
- {
- provide: GLOBAL_DIALOG_CONFIG,
- useValue: {
- sizes: {
- sm: 'other sm',
- md: 'other md',
- lg: 'other lg',
- fullScreen: 'other fullScreen'
- }
- }
- },
- {
- provide: ComponentFactoryResolver,
- useClass: FakeFactoryResolver
- },
+ provideDialogConfig({
+ sizes: {
+ sm: { width: '20px' },
+ md: { width: '20px' },
+ lg: { width: '20px' },
+ fullScreen: { width: '20px' },
+ },
+ }),
{
provide: DIALOG_DOCUMENT_REF,
useFactory: () => ({
@@ -90,19 +79,18 @@ describe('DialogService', () => {
removeChild: jasmine.createSpy(),
classList: {
add: jasmine.createSpy(),
- remove: jasmine.createSpy()
- }
- }
- })
- }
- ]
+ remove: jasmine.createSpy(),
+ },
+ },
+ }),
+ },
+ ],
});
beforeEach(() => {
spectator = createService();
service = spectator.service;
fakeAppRef = spectator.inject(ApplicationRef);
- fakeFactory = spectator.inject(ComponentFactoryResolver as any);
fakeDocument = spectator.inject(DIALOG_DOCUMENT_REF);
});
@@ -113,14 +101,12 @@ describe('DialogService', () => {
it('should overwrite sizes', () => {
service.open(new FakeTemplateRef());
- const [injector]: Injector[] = fakeFactory.factory.create.calls.mostRecent().args;
-
- expect(injector.get(DIALOG_CONFIG).sizes).toEqual(
+ expect(spectator.inject(GLOBAL_DIALOG_CONFIG).sizes).toEqual(
jasmine.objectContaining({
- sm: 'other sm',
- md: 'other md',
- lg: 'other lg',
- fullScreen: 'other fullScreen'
+ sm: { width: '20px' },
+ md: { width: '20px' },
+ lg: { width: '20px' },
+ fullScreen: { width: '20px' },
})
);
});
@@ -154,48 +140,21 @@ describe('DialogService', () => {
const fakeTemplate = new FakeTemplateRef();
const dialog = service.open(fakeTemplate, {
data: 'test',
- windowClass: 'custom-template'
+ windowClass: 'custom-template',
});
expect(dialog.ref).toBe(fakeTemplate);
expect(fakeTemplate.createEmbeddedView).toHaveBeenCalledTimes(1);
expect(fakeTemplate.createEmbeddedView).toHaveBeenCalledWith({
$implicit: dialog,
- config: jasmine.objectContaining({ windowClass: 'custom-template' })
+ config: jasmine.objectContaining({ windowClass: 'custom-template' }),
});
});
- it('should fill dialog injector', () => {
- const fakeTemplate = new FakeTemplateRef();
- const dialog = service.open(fakeTemplate) as InternalDialogRef;
-
- const fakeTemplateView = fakeTemplate.view;
-
- expect(fakeFactory.factory.create).toHaveBeenCalledTimes(1);
- const [injector]: Injector[] = fakeFactory.factory.create.calls.mostRecent().args;
- expect(injector.get(InternalDialogRef)).toBe(dialog);
- expect(injector.get(NODES_TO_INSERT)).toBe(fakeTemplateView.rootNodes);
- });
-
it('should append dialog element into container', () => {
service.open(new FakeTemplateRef());
- const fakeDialogView = fakeFactory.componentOne;
-
expect(fakeDocument.body.appendChild).toHaveBeenCalledTimes(1);
- expect(fakeDocument.body.appendChild).toHaveBeenCalledWith(fakeDialogView.location.nativeElement);
- });
-
- it('should attach view to ApplicationRef', () => {
- const fakeTemplate = new FakeTemplateRef();
- service.open(fakeTemplate);
-
- const fakeDialogView = fakeFactory.componentOne;
-
- const attachSpyCalls = (fakeAppRef.attachView as jasmine.Spy).calls.allArgs();
-
- expect(fakeAppRef.attachView).toHaveBeenCalledTimes(2);
- expect(attachSpyCalls).toEqual([[fakeDialogView.hostView], [fakeTemplate.view]]);
});
it('should use vcr to instanciate template', () => {
@@ -205,13 +164,13 @@ describe('DialogService', () => {
const dialog = service.open(template, {
vcr: otherVCR as any,
data: 'test',
- windowClass: 'custom-template'
+ windowClass: 'custom-template',
});
expect(template.createEmbeddedView).not.toHaveBeenCalled();
expect(otherVCR.createEmbeddedView).toHaveBeenCalledWith(template, {
$implicit: dialog,
- config: jasmine.objectContaining({ windowClass: 'custom-template' })
+ config: jasmine.objectContaining({ windowClass: 'custom-template' }),
});
});
});
@@ -257,82 +216,25 @@ describe('DialogService', () => {
});
describe('using a component', () => {
+ @Component({ selector: '' })
class FakeComponent {}
-
it('should open it', () => expect(service.open(FakeComponent)).toBeTruthy());
- it('should be able of get config', () => {
- service.open(FakeComponent, { windowClass: 'custom-config' });
-
- const [[fakeComponentInjector]]: readonly Injector[][] = fakeFactory.factory.create.calls.allArgs();
-
- expect(fakeComponentInjector.get(DIALOG_CONFIG).windowClass).toBe('custom-config');
- });
-
it('should add dialog to dialogs', () => {
const dialog = service.open(FakeComponent);
-
expect(service.dialogs.length).toBe(1);
expect(service.dialogs).toContain(dialog);
});
- it('should instanciate component', () => {
- service.open(FakeComponent);
-
- expect(fakeFactory.resolveComponentFactory).toHaveBeenCalledTimes(2);
- expect(fakeFactory.resolveComponentFactory.calls.allArgs()).toEqual([[DialogComponent], [FakeComponent]]);
-
- expect(fakeFactory.factory.create).toHaveBeenCalledTimes(2);
- });
-
- it('should fill component and dialog injector', () => {
- const dialog = service.open(FakeComponent, {
- data: 'test'
- }) as InternalDialogRef;
-
- const [
- [fakeComponentInjector],
- [dialogInjector]
- ]: readonly Injector[][] = fakeFactory.factory.create.calls.allArgs();
- expect(fakeComponentInjector.get(DialogRef)).toBe(dialog);
- expect(fakeComponentInjector.get(NODES_TO_INSERT, null)).toBeNull();
-
- const fakeDialogView = fakeFactory.componentOne;
-
- expect(dialogInjector.get(InternalDialogRef)).toBe(dialog);
- expect(dialogInjector.get(NODES_TO_INSERT)).toBe(fakeDialogView.hostView.rootNodes);
- });
-
it('should append dialog element into container', () => {
service.open(FakeComponent);
-
- const fakeComponentView = fakeFactory.componentTwo;
-
expect(fakeDocument.body.appendChild).toHaveBeenCalledTimes(1);
- expect(fakeDocument.body.appendChild).toHaveBeenCalledWith(fakeComponentView.location.nativeElement);
});
-
it('should attach view to ApplicationRef', () => {
service.open(FakeComponent);
- const { componentOne: fakeComponentInjectedIntoDialog, componentTwo: fakeDialogView } = fakeFactory;
-
const attachSpyCalls = (fakeAppRef.attachView as jasmine.Spy).calls.allArgs();
-
expect(fakeAppRef.attachView).toHaveBeenCalledTimes(2);
- expect(attachSpyCalls).toEqual([[fakeDialogView.hostView], [fakeComponentInjectedIntoDialog.hostView]]);
- });
-
- it('should use injector of vcr as parent injector', () => {
- const FROM_PARENT = new InjectionToken('FROM_PARENT');
-
- service.open(FakeComponent, {
- vcr: { injector: Injector.create({ providers: [{ provide: FROM_PARENT, useValue: 'test' }] }) } as any
- });
-
- const [[fakeComponentInjector]]: readonly Injector[][] = fakeFactory.factory.create.calls.allArgs();
-
- expect(fakeComponentInjector.get(FROM_PARENT)).toBe('test');
});
});
@@ -362,7 +264,7 @@ describe('DialogService', () => {
});
it('should pass result to guard', () => {
- dialog.beforeClose(result => {
+ dialog.beforeClose((result) => {
expect(result).toBe('test');
return true;
@@ -389,9 +291,7 @@ describe('DialogService', () => {
});
it('using a promise', fakeAsync(() => {
- dialog.beforeClose(
- () => new Promise(r => setTimeout(() => r(false), 1000))
- );
+ dialog.beforeClose(() => new Promise((r) => setTimeout(() => r(false), 1000)));
dialog.close();
@@ -412,9 +312,7 @@ describe('DialogService', () => {
it('using more than one guard', fakeAsync(() => {
dialog.beforeClose(() => false);
- dialog.beforeClose(
- () => new Promise(r => setTimeout(() => r(false), 1000))
- );
+ dialog.beforeClose(() => new Promise((r) => setTimeout(() => r(false), 1000)));
dialog.beforeClose(() => timer(1000).pipe(mapTo(false)));
dialog.close();
@@ -426,9 +324,7 @@ describe('DialogService', () => {
it('when only one guard returns false', fakeAsync(() => {
dialog.beforeClose(() => true);
- dialog.beforeClose(
- () => new Promise(r => setTimeout(() => r(false), 1000))
- );
+ dialog.beforeClose(() => new Promise((r) => setTimeout(() => r(false), 1000)));
dialog.beforeClose(() => timer(3000).pipe(mapTo(true)));
dialog.close();
@@ -447,9 +343,7 @@ describe('DialogService', () => {
it('should close dialog after all guards return true', fakeAsync(() => {
dialog.beforeClose(() => true);
- dialog.beforeClose(
- () => new Promise(r => setTimeout(() => r(true), 1000))
- );
+ dialog.beforeClose(() => new Promise((r) => setTimeout(() => r(true), 1000)));
dialog.beforeClose(() => timer(3000).pipe(mapTo(true)));
dialog.close();
@@ -492,9 +386,7 @@ describe('DialogService', () => {
});
it('using a promise', fakeAsync(() => {
- dialog.beforeClose(
- () => new Promise(r => setTimeout(() => r(false), 1000))
- );
+ dialog.beforeClose(() => new Promise((r) => setTimeout(() => r(false), 1000)));
service.closeAll();
@@ -515,9 +407,7 @@ describe('DialogService', () => {
it('using more than one guard', fakeAsync(() => {
dialog.beforeClose(() => false);
- dialog.beforeClose(
- () => new Promise(r => setTimeout(() => r(false), 1000))
- );
+ dialog.beforeClose(() => new Promise((r) => setTimeout(() => r(false), 1000)));
dialog.beforeClose(() => timer(1000).pipe(mapTo(false)));
service.closeAll();
@@ -529,9 +419,7 @@ describe('DialogService', () => {
it('when only one guard returns false', fakeAsync(() => {
dialog.beforeClose(() => true);
- dialog.beforeClose(
- () => new Promise(r => setTimeout(() => r(false), 1000))
- );
+ dialog.beforeClose(() => new Promise((r) => setTimeout(() => r(false), 1000)));
dialog.beforeClose(() => timer(3000).pipe(mapTo(true)));
service.closeAll();
@@ -550,9 +438,7 @@ describe('DialogService', () => {
it('should close dialog after all guards return true', fakeAsync(() => {
dialog.beforeClose(() => true);
- dialog.beforeClose(
- () => new Promise(r => setTimeout(() => r(true), 1000))
- );
+ dialog.beforeClose(() => new Promise((r) => setTimeout(() => r(true), 1000)));
dialog.beforeClose(() => timer(3000).pipe(mapTo(true)));
service.closeAll();
@@ -577,22 +463,8 @@ describe('DialogService', () => {
it('should remove child from container', () => {
dialog.close();
- const fakeDialogView = fakeFactory.componentOne;
expect(fakeDocument.body.removeChild).toHaveBeenCalledTimes(1);
- expect(fakeDocument.body.removeChild).toHaveBeenCalledWith(fakeDialogView.location.nativeElement);
- });
-
- it('should detach view from ApplicationRef', () => {
- dialog.close();
-
- expect(fakeAppRef.detachView).toHaveBeenCalledTimes(2);
- const attachSpyCalls = (fakeAppRef.detachView as jasmine.Spy).calls.allArgs();
-
- const fakeDialogView = fakeFactory.componentOne;
-
- expect(fakeAppRef.detachView).toHaveBeenCalledTimes(2);
- expect(attachSpyCalls).toEqual([[fakeDialogView.hostView], [fakeTemplate.view]]);
});
it('should remove references from DialogRef', () => {
@@ -605,7 +477,7 @@ describe('DialogService', () => {
backdropClick$: null,
beforeCloseGuards: null,
onClose: null,
- ref: null
+ ref: null,
};
expect(dialog).toEqual(jasmine.objectContaining(dialogCleaned));
@@ -623,7 +495,7 @@ describe('DialogService', () => {
});
it('should send result in afterClosed$', () => {
- dialog.afterClosed$.subscribe({ next: result => expect(result).toBe('test') });
+ dialog.afterClosed$.subscribe({ next: (result) => expect(result).toBe('test') });
dialog.close('test');
});
@@ -632,48 +504,14 @@ describe('DialogService', () => {
it('should use container to place dialog element', () => {
const template = new FakeTemplateRef();
const otherContainer = {
- appendChild: jasmine.createSpy()
+ appendChild: jasmine.createSpy(),
};
service.open(template, {
- container: otherContainer as any
+ container: otherContainer as any,
});
expect(fakeDocument.body.appendChild).not.toHaveBeenCalled();
- expect(otherContainer.appendChild).toHaveBeenCalledWith('fake 1');
- });
-
- it('should overwrite default config', () => {
- const template = new FakeTemplateRef();
-
- const otherConfig: Partial = {
- draggable: true,
- size: 'lg',
- width: '99999px',
- height: '-999999px',
- enableClose: false,
- backdrop: false,
- id: 'test',
- windowClass: 'test',
- sizes: {
- lg: 'test' as any
- }
- };
-
- service.open(template, otherConfig);
-
- const [injector]: Injector[] = fakeFactory.factory.create.calls.mostRecent().args;
-
- expect(injector.get(DIALOG_CONFIG)).toEqual(
- jasmine.objectContaining({
- ...otherConfig,
- sizes: {
- sm: 'other sm',
- md: 'other md',
- fullScreen: 'other fullScreen',
- ...otherConfig.sizes
- }
- })
- );
+ expect(otherContainer.appendChild).toHaveBeenCalledTimes(1);
});
});
diff --git a/projects/ngneat/dialog/src/lib/specs/dialog.spec.ts b/projects/ngneat/dialog/src/lib/specs/dialog.spec.ts
new file mode 100644
index 0000000..caaf0a8
--- /dev/null
+++ b/projects/ngneat/dialog/src/lib/specs/dialog.spec.ts
@@ -0,0 +1,178 @@
+import { Component, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import { createComponentFactory, Spectator } from '@ngneat/spectator';
+import { Subject } from 'rxjs';
+
+import { DialogCloseDirective } from '../dialog-close.directive';
+import { DialogService } from '../dialog.service';
+
+describe('Dialog', () => {
+ @Component({
+ selector: 'test-dialog',
+ standalone: true,
+ template: 'component dialog ',
+ })
+ class TestDialogComponent {
+ changes$ = new Subject();
+ }
+
+ @Component({
+ selector: 'test-dialog',
+ standalone: true,
+ imports: [DialogCloseDirective],
+ template: '',
+ })
+ class TestDialogClosableUsingDialogCloseComponent {}
+
+ @Component({
+ standalone: true,
+ imports: [DialogCloseDirective],
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ })
+ class TestComponent {
+ @ViewChild('otherVCR', { read: ViewContainerRef })
+ otherVCR: ViewContainerRef;
+
+ @ViewChild('tmpl')
+ tmpl: TemplateRef;
+
+ @ViewChild('usingDialogClose')
+ tmplWithDialogClose: TemplateRef;
+
+ @ViewChild('usingDialogCloseWithoutResult')
+ tmplWithDialogCloseWithoutResult: TemplateRef;
+
+ tmplChanges$ = new Subject();
+
+ constructor(public dialog: DialogService) {}
+ }
+
+ let spectator: Spectator;
+
+ const createComponent = createComponentFactory({
+ component: TestComponent,
+ imports: [TestDialogComponent, TestDialogClosableUsingDialogCloseComponent],
+ });
+
+ afterEach(() => {
+ const dialogEls = document.querySelectorAll('ngneat-dialog');
+
+ Array.from(dialogEls)
+ .filter(Boolean)
+ .forEach((el) => el.remove());
+ });
+
+ it('should create it', () => {
+ spectator = createComponent();
+
+ expect(spectator.component).toBeTruthy();
+ });
+
+ it('should open dialog with a template', () => {
+ spectator = createComponent();
+ const { component } = spectator;
+
+ component.dialog.open(component.tmpl);
+
+ spectator.detectChanges();
+
+ expect(document.querySelector('#tmpl')).toContainText('template dialog');
+ });
+
+ it('should be able of subscribe to afterClosed$ and backdropClick$', () => {
+ spectator = createComponent();
+ const { component } = spectator;
+
+ const dialogRef = component.dialog.open(component.tmpl);
+
+ expect(() => dialogRef.afterClosed$.subscribe()).not.toThrow();
+ expect(() => dialogRef.backdropClick$.subscribe()).not.toThrow();
+ });
+
+ it('should open dialog with a component', () => {
+ spectator = createComponent();
+ const { component } = spectator;
+
+ component.dialog.open(TestDialogComponent);
+
+ spectator.detectChanges();
+
+ expect(document.querySelector('test-dialog')).toContainText('component dialog');
+ });
+
+ describe('should close using dialogClose directive', () => {
+ it('into a template', () => {
+ let value = false;
+ spectator = createComponent();
+ spectator.component.dialog.open(spectator.component.tmplWithDialogClose).afterClosed$.subscribe({
+ next: (result) => (value = result),
+ });
+ spectator.detectChanges();
+ spectator.click(spectator.query('#closeUsingDialog', { root: true }));
+ expect(value).toBeTrue();
+ });
+ it('into a template without binding return empty string', () => {
+ let value = 'should be empty';
+ spectator = createComponent();
+ spectator.component.dialog.open(spectator.component.tmplWithDialogCloseWithoutResult).afterClosed$.subscribe({
+ next: (result) => (value = result),
+ });
+ spectator.detectChanges();
+ spectator.click(spectator.query('#closeUsingDialog', { root: true }));
+ expect(value).toBe('');
+ });
+ it('into a template using a view container ref', () => {
+ let value = false;
+ spectator = createComponent();
+ spectator.component.dialog
+ .open(spectator.component.tmplWithDialogClose, {
+ vcr: spectator.component.otherVCR,
+ })
+ .afterClosed$.subscribe({
+ next: (result) => (value = result),
+ });
+ spectator.detectChanges();
+ spectator.click(spectator.query('#closeUsingDialog', { root: true }));
+ expect(value).toBeTrue();
+ });
+ it('into a component', () => {
+ let value = false;
+ spectator = createComponent();
+ spectator.component.dialog.open(TestDialogClosableUsingDialogCloseComponent).afterClosed$.subscribe({
+ next: (result) => (value = result),
+ });
+ spectator.detectChanges();
+ spectator.click(spectator.query('#closeUsingDialog', { root: true }));
+ expect(value).toBeTrue();
+ });
+ it('into a component using a view container ref', () => {
+ let value = false;
+ spectator = createComponent();
+ spectator.component.dialog
+ .open(TestDialogClosableUsingDialogCloseComponent, {
+ vcr: spectator.component.otherVCR,
+ })
+ .afterClosed$.subscribe({
+ next: (result) => (value = result),
+ });
+ spectator.detectChanges();
+ spectator.click(spectator.query('#closeUsingDialog', { root: true }));
+ expect(value).toBeTrue();
+ });
+ });
+});
diff --git a/projects/ngneat/dialog/src/lib/tokens.ts b/projects/ngneat/dialog/src/lib/tokens.ts
deleted file mode 100644
index 86e846e..0000000
--- a/projects/ngneat/dialog/src/lib/tokens.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { InjectionToken, ViewRef, inject } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-
-import { DialogConfig, GlobalDialogConfig } from './config';
-import { SuccessDialogComponent, ConfirmDialogComponent, ErrorDialogComponent } from './built-in-dialogs';
-
-export const DIALOG_DOCUMENT_REF = new InjectionToken(
- 'A reference to the document. Useful for iframes that want appends to parent window',
- {
- providedIn: 'root',
- factory() {
- return inject(DOCUMENT);
- }
- }
-);
-
-export const GLOBAL_DIALOG_CONFIG = new InjectionToken>('Global dialog config token');
-
-export const DIALOG_CONFIG = new InjectionToken('Dialog config token', {
- providedIn: 'root',
- factory: () => ({
- id: undefined,
- container: inject(DIALOG_DOCUMENT_REF).body,
- backdrop: true,
- closeButton: true,
- enableClose: true,
- draggable: false,
- dragConstraint: 'none',
- resizable: false,
- size: 'md',
- windowClass: undefined,
- width: undefined,
- height: undefined,
- minHeight: undefined,
- maxHeight: undefined,
- data: undefined,
- vcr: undefined,
- sizes: {
- sm: {
- minHeight: '200px',
- width: '400px'
- },
- md: {
- minHeight: '280px',
- width: '560px'
- },
- lg: {
- minHeight: '350px',
- width: '800px'
- },
- fullScreen: {
- height: '100%',
- width: '100%'
- }
- },
- success: {
- component: SuccessDialogComponent
- },
- confirm: {
- component: ConfirmDialogComponent
- },
- error: {
- component: ErrorDialogComponent
- },
- onClose: undefined,
- onOpen: undefined
- })
-});
-export const NODES_TO_INSERT = new InjectionToken('Nodes inserted into the dialog');
diff --git a/projects/ngneat/dialog/src/lib/types.ts b/projects/ngneat/dialog/src/lib/types.ts
index 082e503..3149fce 100644
--- a/projects/ngneat/dialog/src/lib/types.ts
+++ b/projects/ngneat/dialog/src/lib/types.ts
@@ -1,64 +1,58 @@
-import { ComponentRef, TemplateRef, Type } from '@angular/core';
-import { DialogRef } from './dialog-ref';
-
-export type DialogContentTypes = 'string' | 'template';
-export type DialogContent = string | TemplateRef;
-export interface DialogTitleAndBody {
- title: DialogContent;
- body: DialogContent;
-}
-
-export interface DialogContentWithType {
- type: DialogContentTypes;
- content: DialogContent;
-}
-export interface DialogTitleAndBodyWithType {
- title: DialogContentWithType;
- body: DialogContentWithType;
+import { ComponentRef, ElementRef, TemplateRef, ViewContainerRef, ViewRef } from '@angular/core';
+import { DialogRef, InternalDialogRef } from './dialog-ref';
+
+type Sizes = 'sm' | 'md' | 'lg' | 'fullScreen' | string;
+export type DragConstraint = 'none' | 'bounce' | 'constrain';
+
+export interface GlobalDialogConfig {
+ sizes: Partial<
+ Record<
+ Sizes,
+ { width?: string | number; height?: string | number; minHeight?: string | number; maxHeight?: string | number }
+ >
+ >;
+ backdrop: boolean;
+ container: ElementRef | Element;
+ closeButton: boolean;
+ draggable: boolean;
+ dragConstraint: DragConstraint;
+ enableClose: boolean;
+ resizable: boolean;
+ width: string | number;
+ height: string | number;
+ minHeight: string | number;
+ maxHeight: string | number;
+ size: Sizes;
+ windowClass: string;
+ onOpen: () => void | undefined;
+ onClose: () => void | undefined;
}
-export const DialogContentSymbol = Symbol('Dialog Content Data');
-export interface DialogContentData {
- [DialogContentSymbol]: DialogTitleAndBodyWithType;
+export interface DialogConfig extends Omit {
+ id: string;
+ data: Data;
+ vcr: ViewContainerRef;
}
export type JustProps = {
[K in keyof T]: T[K] extends (...args: any[]) => any ? never : T[K];
};
-export type ExtractDialogRefData = T extends DialogRef ? Data : never;
-
-type _AnyIfUnknown = unknown extends T ? any : T;
-
-export type ExtractDialogRefResult = T extends DialogRef
- ? _AnyIfUnknown
- : never;
+export type ExtractRefProp = {
+ [P in keyof T]: T[P] extends DialogRef ? P : never;
+}[keyof T];
-export type ExtractDialogRefType = T extends DialogRef ? Type : never;
+export type ExtractData = T[ExtractRefProp] extends DialogRef ? Data : never;
-type _ExtractComponentDialogRef> = T extends Type
- ? TupleExtract, DialogRef>
- : never;
-
-type ExtractComponentDialogRef> = _ExtractComponentDialogRef extends [infer U]
- ? U
- : // Any is necessary to not break things: injecting DialogRef in the component constructor is optional.
- any;
-
-export type ComputedDialogRefType | TemplateRef> = T extends TemplateRef
- ? any
- : T extends Type
- ? ExtractComponentDialogRef
- : any;
-
-export type ExtractDialogResolvedRef | TemplateRef> = T extends TemplateRef
- ? T
- : T extends Type
- ? ComponentRef
- : never;
+export interface OpenParams {
+ config: DialogConfig;
+ dialogRef: InternalDialogRef;
+}
-export type TupleExtract = T extends [infer Head, ...(infer Rest)]
- ? [Head] extends [TypeToExtract]
- ? [Head, ...TupleExtract]
- : TupleExtract
- : [];
+export interface AttachOptions {
+ dialogRef: InternalDialogRef;
+ ref: ComponentRef | TemplateRef;
+ view: ViewRef;
+ attachToApp: boolean;
+ config: DialogConfig;
+}
diff --git a/projects/ngneat/dialog/src/public-api.ts b/projects/ngneat/dialog/src/public-api.ts
index 4e48208..58b6329 100644
--- a/projects/ngneat/dialog/src/public-api.ts
+++ b/projects/ngneat/dialog/src/public-api.ts
@@ -1,12 +1,5 @@
-/*
- * Public API Surface of dialog
- */
-
-export * from './lib/dialog.module';
-export * from './lib/dialog.component';
-export * from './lib/dialog.service';
-export * from './lib/config';
+export { DialogService } from './lib/dialog.service';
export { DialogRef } from './lib/dialog-ref';
-export { DialogContentData, DialogContent, DialogContentTypes, DialogContentSymbol } from './lib/types';
-export { DIALOG_CONFIG, DIALOG_DOCUMENT_REF } from './lib/tokens';
-export * from './lib/dialog-close.directive';
+export { provideDialogConfig, provideDialogDocRef } from './lib/providers';
+export { DialogCloseDirective } from './lib/dialog-close.directive';
+export { DialogConfig } from './lib/types';
diff --git a/projects/ngneat/dialog/src/test.ts b/projects/ngneat/dialog/src/test.ts
index 7b11927..3c10acf 100644
--- a/projects/ngneat/dialog/src/test.ts
+++ b/projects/ngneat/dialog/src/test.ts
@@ -5,22 +5,7 @@ import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
-declare const require: {
- context(
- path: string,
- deep?: boolean,
- filter?: RegExp
- ): {
- keys(): string[];
- (id: string): T;
- };
-};
-
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
teardown: { destroyAfterEach: false }
});
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/projects/ngneat/dialog/tsconfig.lib.json b/projects/ngneat/dialog/tsconfig.lib.json
index fddc0f1..49202fc 100644
--- a/projects/ngneat/dialog/tsconfig.lib.json
+++ b/projects/ngneat/dialog/tsconfig.lib.json
@@ -3,7 +3,6 @@
"compilerOptions": {
"outDir": "../../../out-tsc/lib",
"declarationMap": true,
- "target": "es2015",
"declaration": true,
"inlineSources": true,
"types": [],
diff --git a/projects/ngneat/dialog/tsconfig.lib.prod.json b/projects/ngneat/dialog/tsconfig.lib.prod.json
index 46634e4..2a2faa8 100644
--- a/projects/ngneat/dialog/tsconfig.lib.prod.json
+++ b/projects/ngneat/dialog/tsconfig.lib.prod.json
@@ -2,5 +2,8 @@
"extends": "./tsconfig.lib.json",
"compilerOptions": {
"declarationMap": false
+ },
+ "angularCompilerOptions": {
+ "compilationMode": "partial"
}
}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 696c8c6..923644b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -63,9 +63,7 @@
-
- template dialog
-
-
- test
');
-
- spectator.detectChanges();
-
- const content = spectator.query('.dialog-content', { root: true });
- expect(spectator.query(`ngneat-dialog-${method}`, { root: true })).toBeTruthy();
- expect(content.firstElementChild.innerHTML).toBe('test
');
- });
-
- it('using a string', () => {
- service[method]('content is a string');
-
- spectator.detectChanges();
-
- expect(spectator.query(`ngneat-dialog-${method}`, { root: true })).toBeTruthy();
- expect(spectator.query('.dialog-content', { root: true })).toContainText('content is a string');
- });
- });
-
- describe('should show title and body', () => {
- it('using an ng-template', () => {
- service[method]({
- title: component.tmpl,
- body: component.tmpl
- });
-
- spectator.detectChanges();
-
- expect(spectator.query(`ngneat-dialog-${method}`, { root: true })).toBeTruthy();
- expect(spectator.query('.dialog-header', { root: true })).toContainText('template dialog');
- expect(spectator.query('.dialog-content', { root: true })).toContainText('template dialog');
- });
-
- it('appending HTML', () => {
- service[method]({
- title: 'title into a div
',
- body: 'content into a div
'
- });
-
- spectator.detectChanges();
-
- const title = spectator.query('.dialog-header', { root: true });
- const body = spectator.query('.dialog-content', { root: true });
-
- expect(spectator.query(`ngneat-dialog-${method}`, { root: true })).toBeTruthy();
- expect(title.lastElementChild.innerHTML).toBe('title into a div
');
- expect(body.firstElementChild.innerHTML).toBe('content into a div
');
- });
-
- it('using a string', () => {
- service[method]({
- title: 'title is a string',
- body: 'content is a string'
- });
-
- spectator.detectChanges();
-
- expect(spectator.query(`ngneat-dialog-${method}`, { root: true })).toBeTruthy();
- expect(spectator.query('.dialog-header', { root: true })).toContainText('title is a string');
- expect(spectator.query('.dialog-content', { root: true })).toContainText('content is a string');
- });
- });
-
- it('should close it', () => {
- service[method]('test');
- spectator.detectChanges();
-
- spectator.click(spectator.queryLast('.btn', { root: true }));
-
- expect(spectator.query(`ngneat-dialog-${method}`, { root: true })).toBeFalsy();
- });
- });
- });
-
- it('confirm should return true if click OK', () => {
- const values = [];
- const dialogRef = service.confirm('test');
-
- spectator.detectChanges();
-
- dialogRef.beforeClose(confirmed => {
- values.push(confirmed);
-
- return true;
- });
-
- dialogRef.afterClosed$.subscribe({
- next: confirmed => values.push(confirmed)
- });
-
- spectator.click(spectator.queryLast('.btn-success', { root: true }));
-
- expect(values).toEqual([true, true]);
- });
-
- it('confirm should return false if click Cancel', () => {
- const values = [];
- const dialogRef = service.confirm('test');
-
- spectator.detectChanges();
-
- dialogRef.beforeClose(confirmed => {
- values.push(confirmed);
-
- return true;
- });
-
- dialogRef.afterClosed$.subscribe({
- next: confirmed => values.push(confirmed)
- });
-
- spectator.click(spectator.queryLast('.btn-cancel', { root: true }));
-
- expect(values).toEqual([false, false]);
- });
- });
-
- describe('should close using dialogClose directive', () => {
- it('into a template', () => {
- let value = false;
- spectator = createComponent();
- spectator.component.dialog.open(spectator.component.tmplWithDialogClose).afterClosed$.subscribe({
- next: result => (value = result)
- });
-
- spectator.detectChanges();
-
- spectator.click(spectator.query('#closeUsingDialog', { root: true }));
-
- expect(value).toBeTrue();
- });
-
- it('into a template without binding return empty string', () => {
- let value = 'should be empty';
- spectator = createComponent();
- spectator.component.dialog.open(spectator.component.tmplWithDialogCloseWithoutResult).afterClosed$.subscribe({
- next: result => (value = result)
- });
-
- spectator.detectChanges();
-
- spectator.click(spectator.query('#closeUsingDialog', { root: true }));
-
- expect(value).toBe('');
- });
-
- it('into a template using a view container ref', () => {
- let value = false;
- spectator = createComponent();
- spectator.component.dialog
- .open(spectator.component.tmplWithDialogClose, {
- vcr: spectator.component.otherVCR
- })
- .afterClosed$.subscribe({
- next: result => (value = result)
- });
-
- spectator.detectChanges();
-
- spectator.click(spectator.query('#closeUsingDialog', { root: true }));
-
- expect(value).toBeTrue();
- });
-
- it('into a component', () => {
- let value = false;
- spectator = createComponent();
- spectator.component.dialog.open(TestDialogClosableUsingDialogCloseComponent).afterClosed$.subscribe({
- next: result => (value = result)
- });
-
- spectator.detectChanges();
-
- spectator.click(spectator.query('#closeUsingDialog', { root: true }));
-
- expect(value).toBeTrue();
- });
-
- it('into a component using a view container ref', () => {
- let value = false;
- spectator = createComponent();
- spectator.component.dialog
- .open(TestDialogClosableUsingDialogCloseComponent, {
- vcr: spectator.component.otherVCR
- })
- .afterClosed$.subscribe({
- next: result => (value = result)
- });
-
- spectator.detectChanges();
-
- spectator.click(spectator.query('#closeUsingDialog', { root: true }));
-
- expect(value).toBeTrue();
- });
- });
-});
diff --git a/projects/ngneat/dialog/src/lib/draggable.directive.ts b/projects/ngneat/dialog/src/lib/draggable.directive.ts
index bc64010..70d05cd 100644
--- a/projects/ngneat/dialog/src/lib/draggable.directive.ts
+++ b/projects/ngneat/dialog/src/lib/draggable.directive.ts
@@ -1,7 +1,7 @@
-import { Directive, AfterViewInit, OnDestroy, Input, ElementRef, NgZone, Renderer2, OnChanges } from '@angular/core';
-import { Subject, fromEvent } from 'rxjs';
-import { filter, switchMap, map, takeUntil } from 'rxjs/operators';
-import { DragConstraint } from './config';
+import { AfterViewInit, Directive, ElementRef, inject, Input, NgZone, OnChanges, OnDestroy } from '@angular/core';
+import { fromEvent, Subject } from 'rxjs';
+import { filter, map, switchMap, takeUntil } from 'rxjs/operators';
+import { DragConstraint } from './types';
export type DragOffset = {
x?: number;
@@ -9,7 +9,8 @@ export type DragOffset = {
};
@Directive({
- selector: '[dialogDraggable]'
+ selector: '[dialogDraggable]',
+ standalone: true,
})
export class DialogDraggableDirective implements AfterViewInit, OnChanges, OnDestroy {
@Input()
@@ -25,17 +26,18 @@ export class DialogDraggableDirective implements AfterViewInit, OnChanges, OnDes
@Input()
dragConstraint: DragConstraint;
+ private host = inject(ElementRef);
+ private zone = inject(NgZone);
+
/** Element to be dragged */
private target: HTMLElement;
/** Drag handle */
- private handle: Element;
+ private handle: HTMLElement;
private delta = { x: 0, y: 0 };
private offset = { x: 0, y: 0 };
private enabled = true;
private destroy$ = new Subject
+ template dialog
+
+
+ Configure your dialog
- You've clicked the backdrop 👏 -
+You've clicked the backdrop 👏
@@ -73,73 +71,13 @@
-Configure your dialog
- 📢 This configuration is used in all the dialogs you open ☝️
-
-
-
-
+Built-ins dialog
- - - -📢 This configuration is used in all the dialogs you open ☝️
📢 The body or title can be a string or a TemplateRef (ng-template)
📢 You can override the built-in dialogs with your own
-
-
-
-
-
-
Use a custom container
- -
- Open the dialog into this div 👇
-
-
-
-
- - Inspect the dialog to see where it's placed 👀 -
- - -Use a custom view container
@@ -151,13 +89,9 @@Use a custom view container
-
- This dialog isn't attached to the ApplicationRef. It's attached to a custom ViewContainerRef. -
+This dialog isn't attached to the ApplicationRef. It's attached to a custom ViewContainerRef.
-- You can take control of this view (this dialog) and, for example, dettach it from the change detection. -
+You can take control of this view (this dialog) and, for example, dettach it from the change detection.
When you click Toggle button, this timer (same timer of main page) will stop: @@ -166,9 +100,7 @@
Use a custom view container
Click on Detect changes to run a change detection or click again to reattach it
- +Use a custom view container
-
-
-
-
-
Use guards to prevent closing
- -
-
- - This is embarrassing but..., why you didn't close me? -
- - -Reset location of a modal
- +
@@ -221,7 +134,5 @@
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
new file mode 100644
index 0000000..e79fe55
--- /dev/null
+++ b/src/app/app.component.scss
@@ -0,0 +1,39 @@
+.note {
+ background-color: #ffffcc;
+ padding: 16px 32px;
+}
+
+.dialog {
+ padding: 18px;
+}
+
+label {
+ padding: 0em 0.75em;
+ width: 200px;
+ display: inline-block;
+}
+
+input,
+select {
+ padding: 0.5em 0.75em;
+ width: 200px;
+}
+
+button {
+ margin-right: 10px;
+}
+
+form {
+ max-height: 260px;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-content: flex-start;
+}
+
+form > div {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ height: 32px;
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index caa0bf1..bc14e99 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,59 +1,19 @@
import { Component, TemplateRef, Type, ViewChild, ViewContainerRef } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
+import { DialogCloseDirective, DialogService, DialogConfig } from '@ngneat/dialog';
import { interval } from 'rxjs';
-import { shareReplay, tap } from 'rxjs/operators';
-import { DialogConfig, DialogRef, DialogService } from '@ngneat/dialog';
+import { shareReplay } from 'rxjs/operators';
-import { TestDialogComponent } from './test-dialog.component';
-import { ConfirmationModalComponent } from './custom-confirm-dialog.component';
+import { CommonModule } from '@angular/common';
import { ResetLocationDialogComponent } from './reset-location-dialog.component';
+import { TestDialogComponent } from './test-dialog.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
- styles: [
- `
- .note {
- background-color: #ffffcc;
- padding: 16px 32px;
- }
-
- .dialog {
- padding: 18px;
- }
-
- label {
- padding: 0em 0.75em;
- width: 200px;
- display: inline-block;
- }
-
- input,
- select {
- padding: 0.5em 0.75em;
- width: 200px;
- }
-
- button {
- margin-right: 10px;
- }
-
- form {
- max-height: 260px;
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- align-content: flex-start;
- }
-
- form > div {
- display: flex;
- align-items: center;
- margin-bottom: 10px;
- height: 32px;
- }
- `
- ]
+ imports: [ReactiveFormsModule, CommonModule, DialogCloseDirective],
+ standalone: true,
+ styleUrls: ['./app.component.scss'],
})
export class AppComponent {
@ViewChild('template', { static: true })
@@ -75,18 +35,18 @@ export class AppComponent {
draggable: [false],
dragConstraint: ['none'],
size: [''],
- windowClass: ['']
+ windowClass: [''],
} as PartialPass data to the dialog and get a result
Your last result from the dialog was: {{ messageFromDialog || 'nothing 😢' }} - +You can reset locations
+ +
+
+ `,
+ styles: [
+ `
+ .content {
+ padding: 18px;
+ padding-top: 0;
+ }
+
+ h2 {
+ border-bottom: 1px solid black;
+ padding: 18px;
+ }
+
+ .buttons {
+ text-align: right;
+ }
+ `,
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ResetLocationDialogComponent {
+ offsetX = new UntypedFormControl(0);
+ offsetY = new UntypedFormControl(0);
+ ref: DialogRef