import { ElementRef, Directive, TemplateRef, ViewContainerRef, EventEmitter, ComponentFactoryResolver, Inject, Output, NgModule } from '@angular/core'; import { DOCUMENT } from '@angular/common'; /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * Throws an exception when attempting to attach a null portal to a host. * @docs-private */ import * as ɵngcc0 from '@angular/core'; function throwNullPortalError() { throw Error('Must provide a portal to attach'); } /** * Throws an exception when attempting to attach a portal to a host that is already attached. * @docs-private */ function throwPortalAlreadyAttachedError() { throw Error('Host already has a portal attached'); } /** * Throws an exception when attempting to attach a portal to an already-disposed host. * @docs-private */ function throwPortalOutletAlreadyDisposedError() { throw Error('This PortalOutlet has already been disposed'); } /** * Throws an exception when attempting to attach an unknown portal type. * @docs-private */ function throwUnknownPortalTypeError() { throw Error('Attempting to attach an unknown Portal type. BasePortalOutlet accepts either ' + 'a ComponentPortal or a TemplatePortal.'); } /** * Throws an exception when attempting to attach a portal to a null host. * @docs-private */ function throwNullPortalOutletError() { throw Error('Attempting to attach a portal to a null PortalOutlet'); } /** * Throws an exception when attempting to detach a portal that is not attached. * @docs-private */ function throwNoPortalAttachedError() { throw Error('Attempting to detach a portal that is not attached to a host'); } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * A `Portal` is something that you want to render somewhere else. * It can be attach to / detached from a `PortalOutlet`. */ class Portal { /** Attach this portal to a host. */ attach(host) { if (typeof ngDevMode === 'undefined' || ngDevMode) { if (host == null) { throwNullPortalOutletError(); } if (host.hasAttached()) { throwPortalAlreadyAttachedError(); } } this._attachedHost = host; return host.attach(this); } /** Detach this portal from its host */ detach() { let host = this._attachedHost; if (host != null) { this._attachedHost = null; host.detach(); } else if (typeof ngDevMode === 'undefined' || ngDevMode) { throwNoPortalAttachedError(); } } /** Whether this portal is attached to a host. */ get isAttached() { return this._attachedHost != null; } /** * Sets the PortalOutlet reference without performing `attach()`. This is used directly by * the PortalOutlet when it is performing an `attach()` or `detach()`. */ setAttachedHost(host) { this._attachedHost = host; } } /** * A `ComponentPortal` is a portal that instantiates some Component upon attachment. */ class ComponentPortal extends Portal { constructor(component, viewContainerRef, injector, componentFactoryResolver) { super(); this.component = component; this.viewContainerRef = viewContainerRef; this.injector = injector; this.componentFactoryResolver = componentFactoryResolver; } } /** * A `TemplatePortal` is a portal that represents some embedded template (TemplateRef). */ class TemplatePortal extends Portal { constructor(template, viewContainerRef, context) { super(); this.templateRef = template; this.viewContainerRef = viewContainerRef; this.context = context; } get origin() { return this.templateRef.elementRef; } /** * Attach the portal to the provided `PortalOutlet`. * When a context is provided it will override the `context` property of the `TemplatePortal` * instance. */ attach(host, context = this.context) { this.context = context; return super.attach(host); } detach() { this.context = undefined; return super.detach(); } } /** * A `DomPortal` is a portal whose DOM element will be taken from its current position * in the DOM and moved into a portal outlet, when it is attached. On detach, the content * will be restored to its original position. */ class DomPortal extends Portal { constructor(element) { super(); this.element = element instanceof ElementRef ? element.nativeElement : element; } } /** * Partial implementation of PortalOutlet that handles attaching * ComponentPortal and TemplatePortal. */ class BasePortalOutlet { constructor() { /** Whether this host has already been permanently disposed. */ this._isDisposed = false; // @breaking-change 10.0.0 `attachDomPortal` to become a required abstract method. this.attachDomPortal = null; } /** Whether this host has an attached portal. */ hasAttached() { return !!this._attachedPortal; } /** Attaches a portal. */ attach(portal) { if (typeof ngDevMode === 'undefined' || ngDevMode) { if (!portal) { throwNullPortalError(); } if (this.hasAttached()) { throwPortalAlreadyAttachedError(); } if (this._isDisposed) { throwPortalOutletAlreadyDisposedError(); } } if (portal instanceof ComponentPortal) { this._attachedPortal = portal; return this.attachComponentPortal(portal); } else if (portal instanceof TemplatePortal) { this._attachedPortal = portal; return this.attachTemplatePortal(portal); // @breaking-change 10.0.0 remove null check for `this.attachDomPortal`. } else if (this.attachDomPortal && portal instanceof DomPortal) { this._attachedPortal = portal; return this.attachDomPortal(portal); } if (typeof ngDevMode === 'undefined' || ngDevMode) { throwUnknownPortalTypeError(); } } /** Detaches a previously attached portal. */ detach() { if (this._attachedPortal) { this._attachedPortal.setAttachedHost(null); this._attachedPortal = null; } this._invokeDisposeFn(); } /** Permanently dispose of this portal host. */ dispose() { if (this.hasAttached()) { this.detach(); } this._invokeDisposeFn(); this._isDisposed = true; } /** @docs-private */ setDisposeFn(fn) { this._disposeFn = fn; } _invokeDisposeFn() { if (this._disposeFn) { this._disposeFn(); this._disposeFn = null; } } } /** * @deprecated Use `BasePortalOutlet` instead. * @breaking-change 9.0.0 */ class BasePortalHost extends BasePortalOutlet { } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * A PortalOutlet for attaching portals to an arbitrary DOM element outside of the Angular * application context. */ class DomPortalOutlet extends BasePortalOutlet { constructor( /** Element into which the content is projected. */ outletElement, _componentFactoryResolver, _appRef, _defaultInjector, /** * @deprecated `_document` Parameter to be made required. * @breaking-change 10.0.0 */ _document) { super(); this.outletElement = outletElement; this._componentFactoryResolver = _componentFactoryResolver; this._appRef = _appRef; this._defaultInjector = _defaultInjector; /** * Attaches a DOM portal by transferring its content into the outlet. * @param portal Portal to be attached. * @deprecated To be turned into a method. * @breaking-change 10.0.0 */ this.attachDomPortal = (portal) => { // @breaking-change 10.0.0 Remove check and error once the // `_document` constructor parameter is required. if (!this._document && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('Cannot attach DOM portal without _document constructor parameter'); } const element = portal.element; if (!element.parentNode && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('DOM portal content must be attached to a parent node.'); } // Anchor used to save the element's previous position so // that we can restore it when the portal is detached. const anchorNode = this._document.createComment('dom-portal'); element.parentNode.insertBefore(anchorNode, element); this.outletElement.appendChild(element); this._attachedPortal = portal; super.setDisposeFn(() => { // We can't use `replaceWith` here because IE doesn't support it. if (anchorNode.parentNode) { anchorNode.parentNode.replaceChild(element, anchorNode); } }); }; this._document = _document; } /** * Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver. * @param portal Portal to be attached * @returns Reference to the created component. */ attachComponentPortal(portal) { const resolver = portal.componentFactoryResolver || this._componentFactoryResolver; const componentFactory = resolver.resolveComponentFactory(portal.component); let componentRef; // If the portal specifies a ViewContainerRef, we will use that as the attachment point // for the component (in terms of Angular's component tree, not rendering). // When the ViewContainerRef is missing, we use the factory to create the component directly // and then manually attach the view to the application. if (portal.viewContainerRef) { componentRef = portal.viewContainerRef.createComponent(componentFactory, portal.viewContainerRef.length, portal.injector || portal.viewContainerRef.injector); this.setDisposeFn(() => componentRef.destroy()); } else { componentRef = componentFactory.create(portal.injector || this._defaultInjector); this._appRef.attachView(componentRef.hostView); this.setDisposeFn(() => { this._appRef.detachView(componentRef.hostView); componentRef.destroy(); }); } // At this point the component has been instantiated, so we move it to the location in the DOM // where we want it to be rendered. this.outletElement.appendChild(this._getComponentRootNode(componentRef)); this._attachedPortal = portal; return componentRef; } /** * Attaches a template portal to the DOM as an embedded view. * @param portal Portal to be attached. * @returns Reference to the created embedded view. */ attachTemplatePortal(portal) { let viewContainer = portal.viewContainerRef; let viewRef = viewContainer.createEmbeddedView(portal.templateRef, portal.context); // The method `createEmbeddedView` will add the view as a child of the viewContainer. // But for the DomPortalOutlet the view can be added everywhere in the DOM // (e.g Overlay Container) To move the view to the specified host element. We just // re-append the existing root nodes. viewRef.rootNodes.forEach(rootNode => this.outletElement.appendChild(rootNode)); // Note that we want to detect changes after the nodes have been moved so that // any directives inside the portal that are looking at the DOM inside a lifecycle // hook won't be invoked too early. viewRef.detectChanges(); this.setDisposeFn((() => { let index = viewContainer.indexOf(viewRef); if (index !== -1) { viewContainer.remove(index); } })); this._attachedPortal = portal; // TODO(jelbourn): Return locals from view. return viewRef; } /** * Clears out a portal from the DOM. */ dispose() { super.dispose(); if (this.outletElement.parentNode != null) { this.outletElement.parentNode.removeChild(this.outletElement); } } /** Gets the root HTMLElement for an instantiated component. */ _getComponentRootNode(componentRef) { return componentRef.hostView.rootNodes[0]; } } /** * @deprecated Use `DomPortalOutlet` instead. * @breaking-change 9.0.0 */ class DomPortalHost extends DomPortalOutlet { } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * Directive version of a `TemplatePortal`. Because the directive *is* a TemplatePortal, * the directive instance itself can be attached to a host, enabling declarative use of portals. */ class CdkPortal extends TemplatePortal { constructor(templateRef, viewContainerRef) { super(templateRef, viewContainerRef); } } CdkPortal.ɵfac = function CdkPortal_Factory(t) { return new (t || CdkPortal)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.TemplateRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ViewContainerRef)); }; CdkPortal.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: CdkPortal, selectors: [["", "cdkPortal", ""]], exportAs: ["cdkPortal"], features: [ɵngcc0.ɵɵInheritDefinitionFeature] }); CdkPortal.ctorParameters = () => [ { type: TemplateRef }, { type: ViewContainerRef } ]; (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(CdkPortal, [{ type: Directive, args: [{ selector: '[cdkPortal]', exportAs: 'cdkPortal' }] }], function () { return [{ type: ɵngcc0.TemplateRef }, { type: ɵngcc0.ViewContainerRef }]; }, null); })(); /** * @deprecated Use `CdkPortal` instead. * @breaking-change 9.0.0 */ class TemplatePortalDirective extends CdkPortal { } TemplatePortalDirective.ɵfac = /*@__PURE__*/ function () { let ɵTemplatePortalDirective_BaseFactory; return function TemplatePortalDirective_Factory(t) { return (ɵTemplatePortalDirective_BaseFactory || (ɵTemplatePortalDirective_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(TemplatePortalDirective)))(t || TemplatePortalDirective); }; }(); TemplatePortalDirective.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: TemplatePortalDirective, selectors: [["", "cdk-portal", ""], ["", "portal", ""]], exportAs: ["cdkPortal"], features: [ɵngcc0.ɵɵProvidersFeature([{ provide: CdkPortal, useExisting: TemplatePortalDirective }]), ɵngcc0.ɵɵInheritDefinitionFeature] }); (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(TemplatePortalDirective, [{ type: Directive, args: [{ selector: '[cdk-portal], [portal]', exportAs: 'cdkPortal', providers: [{ provide: CdkPortal, useExisting: TemplatePortalDirective }] }] }], null, null); })(); /** * Directive version of a PortalOutlet. Because the directive *is* a PortalOutlet, portals can be * directly attached to it, enabling declarative use. * * Usage: * `` */ class CdkPortalOutlet extends BasePortalOutlet { constructor(_componentFactoryResolver, _viewContainerRef, /** * @deprecated `_document` parameter to be made required. * @breaking-change 9.0.0 */ _document) { super(); this._componentFactoryResolver = _componentFactoryResolver; this._viewContainerRef = _viewContainerRef; /** Whether the portal component is initialized. */ this._isInitialized = false; /** Emits when a portal is attached to the outlet. */ this.attached = new EventEmitter(); /** * Attaches the given DomPortal to this PortalHost by moving all of the portal content into it. * @param portal Portal to be attached. * @deprecated To be turned into a method. * @breaking-change 10.0.0 */ this.attachDomPortal = (portal) => { // @breaking-change 9.0.0 Remove check and error once the // `_document` constructor parameter is required. if (!this._document && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('Cannot attach DOM portal without _document constructor parameter'); } const element = portal.element; if (!element.parentNode && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('DOM portal content must be attached to a parent node.'); } // Anchor used to save the element's previous position so // that we can restore it when the portal is detached. const anchorNode = this._document.createComment('dom-portal'); portal.setAttachedHost(this); element.parentNode.insertBefore(anchorNode, element); this._getRootNode().appendChild(element); this._attachedPortal = portal; super.setDisposeFn(() => { if (anchorNode.parentNode) { anchorNode.parentNode.replaceChild(element, anchorNode); } }); }; this._document = _document; } /** Portal associated with the Portal outlet. */ get portal() { return this._attachedPortal; } set portal(portal) { // Ignore the cases where the `portal` is set to a falsy value before the lifecycle hooks have // run. This handles the cases where the user might do something like `
` // and attach a portal programmatically in the parent component. When Angular does the first CD // round, it will fire the setter with empty string, causing the user's content to be cleared. if (this.hasAttached() && !portal && !this._isInitialized) { return; } if (this.hasAttached()) { super.detach(); } if (portal) { super.attach(portal); } this._attachedPortal = portal; } /** Component or view reference that is attached to the portal. */ get attachedRef() { return this._attachedRef; } ngOnInit() { this._isInitialized = true; } ngOnDestroy() { super.dispose(); this._attachedPortal = null; this._attachedRef = null; } /** * Attach the given ComponentPortal to this PortalOutlet using the ComponentFactoryResolver. * * @param portal Portal to be attached to the portal outlet. * @returns Reference to the created component. */ attachComponentPortal(portal) { portal.setAttachedHost(this); // If the portal specifies an origin, use that as the logical location of the component // in the application tree. Otherwise use the location of this PortalOutlet. const viewContainerRef = portal.viewContainerRef != null ? portal.viewContainerRef : this._viewContainerRef; const resolver = portal.componentFactoryResolver || this._componentFactoryResolver; const componentFactory = resolver.resolveComponentFactory(portal.component); const ref = viewContainerRef.createComponent(componentFactory, viewContainerRef.length, portal.injector || viewContainerRef.injector); // If we're using a view container that's different from the injected one (e.g. when the portal // specifies its own) we need to move the component into the outlet, otherwise it'll be rendered // inside of the alternate view container. if (viewContainerRef !== this._viewContainerRef) { this._getRootNode().appendChild(ref.hostView.rootNodes[0]); } super.setDisposeFn(() => ref.destroy()); this._attachedPortal = portal; this._attachedRef = ref; this.attached.emit(ref); return ref; } /** * Attach the given TemplatePortal to this PortalHost as an embedded View. * @param portal Portal to be attached. * @returns Reference to the created embedded view. */ attachTemplatePortal(portal) { portal.setAttachedHost(this); const viewRef = this._viewContainerRef.createEmbeddedView(portal.templateRef, portal.context); super.setDisposeFn(() => this._viewContainerRef.clear()); this._attachedPortal = portal; this._attachedRef = viewRef; this.attached.emit(viewRef); return viewRef; } /** Gets the root node of the portal outlet. */ _getRootNode() { const nativeElement = this._viewContainerRef.element.nativeElement; // The directive could be set on a template which will result in a comment // node being the root. Use the comment's parent node if that is the case. return (nativeElement.nodeType === nativeElement.ELEMENT_NODE ? nativeElement : nativeElement.parentNode); } } CdkPortalOutlet.ɵfac = function CdkPortalOutlet_Factory(t) { return new (t || CdkPortalOutlet)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ComponentFactoryResolver), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ViewContainerRef), ɵngcc0.ɵɵdirectiveInject(DOCUMENT)); }; CdkPortalOutlet.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: CdkPortalOutlet, selectors: [["", "cdkPortalOutlet", ""]], inputs: { portal: ["cdkPortalOutlet", "portal"] }, outputs: { attached: "attached" }, exportAs: ["cdkPortalOutlet"], features: [ɵngcc0.ɵɵInheritDefinitionFeature] }); CdkPortalOutlet.ctorParameters = () => [ { type: ComponentFactoryResolver }, { type: ViewContainerRef }, { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] } ]; CdkPortalOutlet.propDecorators = { attached: [{ type: Output }] }; (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(CdkPortalOutlet, [{ type: Directive, args: [{ selector: '[cdkPortalOutlet]', exportAs: 'cdkPortalOutlet', inputs: ['portal: cdkPortalOutlet'] }] }], function () { return [{ type: ɵngcc0.ComponentFactoryResolver }, { type: ɵngcc0.ViewContainerRef }, { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT] }] }]; }, { attached: [{ type: Output }] }); })(); /** * @deprecated Use `CdkPortalOutlet` instead. * @breaking-change 9.0.0 */ class PortalHostDirective extends CdkPortalOutlet { } PortalHostDirective.ɵfac = /*@__PURE__*/ function () { let ɵPortalHostDirective_BaseFactory; return function PortalHostDirective_Factory(t) { return (ɵPortalHostDirective_BaseFactory || (ɵPortalHostDirective_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(PortalHostDirective)))(t || PortalHostDirective); }; }(); PortalHostDirective.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: PortalHostDirective, selectors: [["", "cdkPortalHost", ""], ["", "portalHost", ""]], inputs: { portal: ["cdkPortalHost", "portal"] }, exportAs: ["cdkPortalHost"], features: [ɵngcc0.ɵɵProvidersFeature([{ provide: CdkPortalOutlet, useExisting: PortalHostDirective }]), ɵngcc0.ɵɵInheritDefinitionFeature] }); (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(PortalHostDirective, [{ type: Directive, args: [{ selector: '[cdkPortalHost], [portalHost]', exportAs: 'cdkPortalHost', inputs: ['portal: cdkPortalHost'], providers: [{ provide: CdkPortalOutlet, useExisting: PortalHostDirective }] }] }], null, null); })(); class PortalModule { } PortalModule.ɵfac = function PortalModule_Factory(t) { return new (t || PortalModule)(); }; PortalModule.ɵmod = /*@__PURE__*/ ɵngcc0.ɵɵdefineNgModule({ type: PortalModule }); PortalModule.ɵinj = /*@__PURE__*/ ɵngcc0.ɵɵdefineInjector({}); (function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(PortalModule, [{ type: NgModule, args: [{ exports: [CdkPortal, CdkPortalOutlet, TemplatePortalDirective, PortalHostDirective], declarations: [CdkPortal, CdkPortalOutlet, TemplatePortalDirective, PortalHostDirective] }] }], null, null); })(); (function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(PortalModule, { declarations: [CdkPortal, CdkPortalOutlet, TemplatePortalDirective, PortalHostDirective], exports: [CdkPortal, CdkPortalOutlet, TemplatePortalDirective, PortalHostDirective] }); })(); /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * Custom injector to be used when providing custom * injection tokens to components inside a portal. * @docs-private * @deprecated Use `Injector.create` instead. * @breaking-change 11.0.0 */ class PortalInjector { constructor(_parentInjector, _customTokens) { this._parentInjector = _parentInjector; this._customTokens = _customTokens; } get(token, notFoundValue) { const value = this._customTokens.get(token); if (typeof value !== 'undefined') { return value; } return this._parentInjector.get(token, notFoundValue); } } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * Generated bundle index. Do not edit. */ export { BasePortalHost, BasePortalOutlet, CdkPortal, CdkPortalOutlet, ComponentPortal, DomPortal, DomPortalHost, DomPortalOutlet, Portal, PortalHostDirective, PortalInjector, PortalModule, TemplatePortal, TemplatePortalDirective }; //# sourceMappingURL=portal.js.map