| 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 |
| */ |
| 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.decorators = [ |
| { type: Directive, args: [{ |
| selector: '[cdkPortal]', |
| exportAs: 'cdkPortal', |
| },] } |
| ]; |
| CdkPortal.ctorParameters = () => [ |
| { type: TemplateRef }, |
| { type: ViewContainerRef } |
| ]; |
| /** |
| * @deprecated Use `CdkPortal` instead. |
| * @breaking-change 9.0.0 |
| */ |
| class TemplatePortalDirective extends CdkPortal { |
| } |
| TemplatePortalDirective.decorators = [ |
| { type: Directive, args: [{ |
| selector: '[cdk-portal], [portal]', |
| exportAs: 'cdkPortal', |
| providers: [{ |
| provide: CdkPortal, |
| useExisting: TemplatePortalDirective |
| }] |
| },] } |
| ]; |
| /** |
| * Directive version of a PortalOutlet. Because the directive *is* a PortalOutlet, portals can be |
| * directly attached to it, enabling declarative use. |
| * |
| * Usage: |
| * `<ng-template [cdkPortalOutlet]="greeting"></ng-template>` |
| */ |
| 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 `<div cdkPortalOutlet>` |
| // 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.decorators = [ |
| { type: Directive, args: [{ |
| selector: '[cdkPortalOutlet]', |
| exportAs: 'cdkPortalOutlet', |
| inputs: ['portal: cdkPortalOutlet'] |
| },] } |
| ]; |
| CdkPortalOutlet.ctorParameters = () => [ |
| { type: ComponentFactoryResolver }, |
| { type: ViewContainerRef }, |
| { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] } |
| ]; |
| CdkPortalOutlet.propDecorators = { |
| attached: [{ type: Output }] |
| }; |
| /** |
| * @deprecated Use `CdkPortalOutlet` instead. |
| * @breaking-change 9.0.0 |
| */ |
| class PortalHostDirective extends CdkPortalOutlet { |
| } |
| PortalHostDirective.decorators = [ |
| { type: Directive, args: [{ |
| selector: '[cdkPortalHost], [portalHost]', |
| exportAs: 'cdkPortalHost', |
| inputs: ['portal: cdkPortalHost'], |
| providers: [{ |
| provide: CdkPortalOutlet, |
| useExisting: PortalHostDirective |
| }] |
| },] } |
| ]; |
| class PortalModule { |
| } |
| PortalModule.decorators = [ |
| { type: NgModule, args: [{ |
| exports: [CdkPortal, CdkPortalOutlet, TemplatePortalDirective, PortalHostDirective], |
| declarations: [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 |