cdk-portal.umd.js 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. (function (global, factory) {
  9. typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
  10. typeof define === 'function' && define.amd ? define('@angular/cdk/portal', ['exports', '@angular/core'], factory) :
  11. (factory((global.ng = global.ng || {}, global.ng.cdk = global.ng.cdk || {}, global.ng.cdk.portal = {}),global.ng.core));
  12. }(this, (function (exports,core) { 'use strict';
  13. /*! *****************************************************************************
  14. Copyright (c) Microsoft Corporation. All rights reserved.
  15. Licensed under the Apache License, Version 2.0 (the "License"); you may not use
  16. this file except in compliance with the License. You may obtain a copy of the
  17. License at http://www.apache.org/licenses/LICENSE-2.0
  18. THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  19. KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
  20. WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
  21. MERCHANTABLITY OR NON-INFRINGEMENT.
  22. See the Apache Version 2.0 License for specific language governing permissions
  23. and limitations under the License.
  24. ***************************************************************************** */
  25. /* global Reflect, Promise */
  26. var extendStatics = function(d, b) {
  27. extendStatics = Object.setPrototypeOf ||
  28. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  29. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  30. return extendStatics(d, b);
  31. };
  32. function __extends(d, b) {
  33. extendStatics(d, b);
  34. function __() { this.constructor = d; }
  35. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  36. }
  37. /**
  38. * @fileoverview added by tsickle
  39. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  40. */
  41. /**
  42. * Throws an exception when attempting to attach a null portal to a host.
  43. * \@docs-private
  44. * @return {?}
  45. */
  46. function throwNullPortalError() {
  47. throw Error('Must provide a portal to attach');
  48. }
  49. /**
  50. * Throws an exception when attempting to attach a portal to a host that is already attached.
  51. * \@docs-private
  52. * @return {?}
  53. */
  54. function throwPortalAlreadyAttachedError() {
  55. throw Error('Host already has a portal attached');
  56. }
  57. /**
  58. * Throws an exception when attempting to attach a portal to an already-disposed host.
  59. * \@docs-private
  60. * @return {?}
  61. */
  62. function throwPortalOutletAlreadyDisposedError() {
  63. throw Error('This PortalOutlet has already been disposed');
  64. }
  65. /**
  66. * Throws an exception when attempting to attach an unknown portal type.
  67. * \@docs-private
  68. * @return {?}
  69. */
  70. function throwUnknownPortalTypeError() {
  71. throw Error('Attempting to attach an unknown Portal type. BasePortalOutlet accepts either ' +
  72. 'a ComponentPortal or a TemplatePortal.');
  73. }
  74. /**
  75. * Throws an exception when attempting to attach a portal to a null host.
  76. * \@docs-private
  77. * @return {?}
  78. */
  79. function throwNullPortalOutletError() {
  80. throw Error('Attempting to attach a portal to a null PortalOutlet');
  81. }
  82. /**
  83. * Throws an exception when attempting to detach a portal that is not attached.
  84. * \@docs-private
  85. * @return {?}
  86. */
  87. function throwNoPortalAttachedError() {
  88. throw Error('Attempting to detach a portal that is not attached to a host');
  89. }
  90. /**
  91. * @fileoverview added by tsickle
  92. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  93. */
  94. /**
  95. * A `Portal` is something that you want to render somewhere else.
  96. * It can be attach to / detached from a `PortalOutlet`.
  97. * @abstract
  98. * @template T
  99. */
  100. var /**
  101. * A `Portal` is something that you want to render somewhere else.
  102. * It can be attach to / detached from a `PortalOutlet`.
  103. * @abstract
  104. * @template T
  105. */
  106. Portal = /** @class */ (function () {
  107. function Portal() {
  108. }
  109. /** Attach this portal to a host. */
  110. /**
  111. * Attach this portal to a host.
  112. * @param {?} host
  113. * @return {?}
  114. */
  115. Portal.prototype.attach = /**
  116. * Attach this portal to a host.
  117. * @param {?} host
  118. * @return {?}
  119. */
  120. function (host) {
  121. if (host == null) {
  122. throwNullPortalOutletError();
  123. }
  124. if (host.hasAttached()) {
  125. throwPortalAlreadyAttachedError();
  126. }
  127. this._attachedHost = host;
  128. return (/** @type {?} */ (host.attach(this)));
  129. };
  130. /** Detach this portal from its host */
  131. /**
  132. * Detach this portal from its host
  133. * @return {?}
  134. */
  135. Portal.prototype.detach = /**
  136. * Detach this portal from its host
  137. * @return {?}
  138. */
  139. function () {
  140. /** @type {?} */
  141. var host = this._attachedHost;
  142. if (host == null) {
  143. throwNoPortalAttachedError();
  144. }
  145. else {
  146. this._attachedHost = null;
  147. host.detach();
  148. }
  149. };
  150. Object.defineProperty(Portal.prototype, "isAttached", {
  151. /** Whether this portal is attached to a host. */
  152. get: /**
  153. * Whether this portal is attached to a host.
  154. * @return {?}
  155. */
  156. function () {
  157. return this._attachedHost != null;
  158. },
  159. enumerable: true,
  160. configurable: true
  161. });
  162. /**
  163. * Sets the PortalOutlet reference without performing `attach()`. This is used directly by
  164. * the PortalOutlet when it is performing an `attach()` or `detach()`.
  165. */
  166. /**
  167. * Sets the PortalOutlet reference without performing `attach()`. This is used directly by
  168. * the PortalOutlet when it is performing an `attach()` or `detach()`.
  169. * @param {?} host
  170. * @return {?}
  171. */
  172. Portal.prototype.setAttachedHost = /**
  173. * Sets the PortalOutlet reference without performing `attach()`. This is used directly by
  174. * the PortalOutlet when it is performing an `attach()` or `detach()`.
  175. * @param {?} host
  176. * @return {?}
  177. */
  178. function (host) {
  179. this._attachedHost = host;
  180. };
  181. return Portal;
  182. }());
  183. /**
  184. * A `ComponentPortal` is a portal that instantiates some Component upon attachment.
  185. * @template T
  186. */
  187. var /**
  188. * A `ComponentPortal` is a portal that instantiates some Component upon attachment.
  189. * @template T
  190. */
  191. ComponentPortal = /** @class */ (function (_super) {
  192. __extends(ComponentPortal, _super);
  193. function ComponentPortal(component, viewContainerRef, injector, componentFactoryResolver) {
  194. var _this = _super.call(this) || this;
  195. _this.component = component;
  196. _this.viewContainerRef = viewContainerRef;
  197. _this.injector = injector;
  198. _this.componentFactoryResolver = componentFactoryResolver;
  199. return _this;
  200. }
  201. return ComponentPortal;
  202. }(Portal));
  203. /**
  204. * A `TemplatePortal` is a portal that represents some embedded template (TemplateRef).
  205. * @template C
  206. */
  207. var /**
  208. * A `TemplatePortal` is a portal that represents some embedded template (TemplateRef).
  209. * @template C
  210. */
  211. TemplatePortal = /** @class */ (function (_super) {
  212. __extends(TemplatePortal, _super);
  213. function TemplatePortal(template, viewContainerRef, context) {
  214. var _this = _super.call(this) || this;
  215. _this.templateRef = template;
  216. _this.viewContainerRef = viewContainerRef;
  217. _this.context = context;
  218. return _this;
  219. }
  220. Object.defineProperty(TemplatePortal.prototype, "origin", {
  221. get: /**
  222. * @return {?}
  223. */
  224. function () {
  225. return this.templateRef.elementRef;
  226. },
  227. enumerable: true,
  228. configurable: true
  229. });
  230. /**
  231. * Attach the portal to the provided `PortalOutlet`.
  232. * When a context is provided it will override the `context` property of the `TemplatePortal`
  233. * instance.
  234. */
  235. /**
  236. * Attach the portal to the provided `PortalOutlet`.
  237. * When a context is provided it will override the `context` property of the `TemplatePortal`
  238. * instance.
  239. * @param {?} host
  240. * @param {?=} context
  241. * @return {?}
  242. */
  243. TemplatePortal.prototype.attach = /**
  244. * Attach the portal to the provided `PortalOutlet`.
  245. * When a context is provided it will override the `context` property of the `TemplatePortal`
  246. * instance.
  247. * @param {?} host
  248. * @param {?=} context
  249. * @return {?}
  250. */
  251. function (host, context) {
  252. if (context === void 0) { context = this.context; }
  253. this.context = context;
  254. return _super.prototype.attach.call(this, host);
  255. };
  256. /**
  257. * @return {?}
  258. */
  259. TemplatePortal.prototype.detach = /**
  260. * @return {?}
  261. */
  262. function () {
  263. this.context = undefined;
  264. return _super.prototype.detach.call(this);
  265. };
  266. return TemplatePortal;
  267. }(Portal));
  268. /**
  269. * Partial implementation of PortalOutlet that handles attaching
  270. * ComponentPortal and TemplatePortal.
  271. * @abstract
  272. */
  273. var /**
  274. * Partial implementation of PortalOutlet that handles attaching
  275. * ComponentPortal and TemplatePortal.
  276. * @abstract
  277. */
  278. BasePortalOutlet = /** @class */ (function () {
  279. function BasePortalOutlet() {
  280. /**
  281. * Whether this host has already been permanently disposed.
  282. */
  283. this._isDisposed = false;
  284. }
  285. /** Whether this host has an attached portal. */
  286. /**
  287. * Whether this host has an attached portal.
  288. * @return {?}
  289. */
  290. BasePortalOutlet.prototype.hasAttached = /**
  291. * Whether this host has an attached portal.
  292. * @return {?}
  293. */
  294. function () {
  295. return !!this._attachedPortal;
  296. };
  297. /** Attaches a portal. */
  298. /**
  299. * Attaches a portal.
  300. * @param {?} portal
  301. * @return {?}
  302. */
  303. BasePortalOutlet.prototype.attach = /**
  304. * Attaches a portal.
  305. * @param {?} portal
  306. * @return {?}
  307. */
  308. function (portal) {
  309. if (!portal) {
  310. throwNullPortalError();
  311. }
  312. if (this.hasAttached()) {
  313. throwPortalAlreadyAttachedError();
  314. }
  315. if (this._isDisposed) {
  316. throwPortalOutletAlreadyDisposedError();
  317. }
  318. if (portal instanceof ComponentPortal) {
  319. this._attachedPortal = portal;
  320. return this.attachComponentPortal(portal);
  321. }
  322. else if (portal instanceof TemplatePortal) {
  323. this._attachedPortal = portal;
  324. return this.attachTemplatePortal(portal);
  325. }
  326. throwUnknownPortalTypeError();
  327. };
  328. /** Detaches a previously attached portal. */
  329. /**
  330. * Detaches a previously attached portal.
  331. * @return {?}
  332. */
  333. BasePortalOutlet.prototype.detach = /**
  334. * Detaches a previously attached portal.
  335. * @return {?}
  336. */
  337. function () {
  338. if (this._attachedPortal) {
  339. this._attachedPortal.setAttachedHost(null);
  340. this._attachedPortal = null;
  341. }
  342. this._invokeDisposeFn();
  343. };
  344. /** Permanently dispose of this portal host. */
  345. /**
  346. * Permanently dispose of this portal host.
  347. * @return {?}
  348. */
  349. BasePortalOutlet.prototype.dispose = /**
  350. * Permanently dispose of this portal host.
  351. * @return {?}
  352. */
  353. function () {
  354. if (this.hasAttached()) {
  355. this.detach();
  356. }
  357. this._invokeDisposeFn();
  358. this._isDisposed = true;
  359. };
  360. /** @docs-private */
  361. /**
  362. * \@docs-private
  363. * @param {?} fn
  364. * @return {?}
  365. */
  366. BasePortalOutlet.prototype.setDisposeFn = /**
  367. * \@docs-private
  368. * @param {?} fn
  369. * @return {?}
  370. */
  371. function (fn) {
  372. this._disposeFn = fn;
  373. };
  374. /**
  375. * @private
  376. * @return {?}
  377. */
  378. BasePortalOutlet.prototype._invokeDisposeFn = /**
  379. * @private
  380. * @return {?}
  381. */
  382. function () {
  383. if (this._disposeFn) {
  384. this._disposeFn();
  385. this._disposeFn = null;
  386. }
  387. };
  388. return BasePortalOutlet;
  389. }());
  390. /**
  391. * @deprecated Use `BasePortalOutlet` instead.
  392. * \@breaking-change 9.0.0
  393. * @abstract
  394. */
  395. var /**
  396. * @deprecated Use `BasePortalOutlet` instead.
  397. * \@breaking-change 9.0.0
  398. * @abstract
  399. */
  400. BasePortalHost = /** @class */ (function (_super) {
  401. __extends(BasePortalHost, _super);
  402. function BasePortalHost() {
  403. return _super !== null && _super.apply(this, arguments) || this;
  404. }
  405. return BasePortalHost;
  406. }(BasePortalOutlet));
  407. /**
  408. * @fileoverview added by tsickle
  409. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  410. */
  411. /**
  412. * A PortalOutlet for attaching portals to an arbitrary DOM element outside of the Angular
  413. * application context.
  414. */
  415. var /**
  416. * A PortalOutlet for attaching portals to an arbitrary DOM element outside of the Angular
  417. * application context.
  418. */
  419. DomPortalOutlet = /** @class */ (function (_super) {
  420. __extends(DomPortalOutlet, _super);
  421. function DomPortalOutlet(outletElement, _componentFactoryResolver, _appRef, _defaultInjector) {
  422. var _this = _super.call(this) || this;
  423. _this.outletElement = outletElement;
  424. _this._componentFactoryResolver = _componentFactoryResolver;
  425. _this._appRef = _appRef;
  426. _this._defaultInjector = _defaultInjector;
  427. return _this;
  428. }
  429. /**
  430. * Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver.
  431. * @param portal Portal to be attached
  432. * @returns Reference to the created component.
  433. */
  434. /**
  435. * Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver.
  436. * @template T
  437. * @param {?} portal Portal to be attached
  438. * @return {?} Reference to the created component.
  439. */
  440. DomPortalOutlet.prototype.attachComponentPortal = /**
  441. * Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver.
  442. * @template T
  443. * @param {?} portal Portal to be attached
  444. * @return {?} Reference to the created component.
  445. */
  446. function (portal) {
  447. var _this = this;
  448. /** @type {?} */
  449. var resolver = portal.componentFactoryResolver || this._componentFactoryResolver;
  450. /** @type {?} */
  451. var componentFactory = resolver.resolveComponentFactory(portal.component);
  452. /** @type {?} */
  453. var componentRef;
  454. // If the portal specifies a ViewContainerRef, we will use that as the attachment point
  455. // for the component (in terms of Angular's component tree, not rendering).
  456. // When the ViewContainerRef is missing, we use the factory to create the component directly
  457. // and then manually attach the view to the application.
  458. if (portal.viewContainerRef) {
  459. componentRef = portal.viewContainerRef.createComponent(componentFactory, portal.viewContainerRef.length, portal.injector || portal.viewContainerRef.injector);
  460. this.setDisposeFn((/**
  461. * @return {?}
  462. */
  463. function () { return componentRef.destroy(); }));
  464. }
  465. else {
  466. componentRef = componentFactory.create(portal.injector || this._defaultInjector);
  467. this._appRef.attachView(componentRef.hostView);
  468. this.setDisposeFn((/**
  469. * @return {?}
  470. */
  471. function () {
  472. _this._appRef.detachView(componentRef.hostView);
  473. componentRef.destroy();
  474. }));
  475. }
  476. // At this point the component has been instantiated, so we move it to the location in the DOM
  477. // where we want it to be rendered.
  478. this.outletElement.appendChild(this._getComponentRootNode(componentRef));
  479. return componentRef;
  480. };
  481. /**
  482. * Attaches a template portal to the DOM as an embedded view.
  483. * @param portal Portal to be attached.
  484. * @returns Reference to the created embedded view.
  485. */
  486. /**
  487. * Attaches a template portal to the DOM as an embedded view.
  488. * @template C
  489. * @param {?} portal Portal to be attached.
  490. * @return {?} Reference to the created embedded view.
  491. */
  492. DomPortalOutlet.prototype.attachTemplatePortal = /**
  493. * Attaches a template portal to the DOM as an embedded view.
  494. * @template C
  495. * @param {?} portal Portal to be attached.
  496. * @return {?} Reference to the created embedded view.
  497. */
  498. function (portal) {
  499. var _this = this;
  500. /** @type {?} */
  501. var viewContainer = portal.viewContainerRef;
  502. /** @type {?} */
  503. var viewRef = viewContainer.createEmbeddedView(portal.templateRef, portal.context);
  504. viewRef.detectChanges();
  505. // The method `createEmbeddedView` will add the view as a child of the viewContainer.
  506. // But for the DomPortalOutlet the view can be added everywhere in the DOM
  507. // (e.g Overlay Container) To move the view to the specified host element. We just
  508. // re-append the existing root nodes.
  509. viewRef.rootNodes.forEach((/**
  510. * @param {?} rootNode
  511. * @return {?}
  512. */
  513. function (rootNode) { return _this.outletElement.appendChild(rootNode); }));
  514. this.setDisposeFn(((/**
  515. * @return {?}
  516. */
  517. function () {
  518. /** @type {?} */
  519. var index = viewContainer.indexOf(viewRef);
  520. if (index !== -1) {
  521. viewContainer.remove(index);
  522. }
  523. })));
  524. // TODO(jelbourn): Return locals from view.
  525. return viewRef;
  526. };
  527. /**
  528. * Clears out a portal from the DOM.
  529. */
  530. /**
  531. * Clears out a portal from the DOM.
  532. * @return {?}
  533. */
  534. DomPortalOutlet.prototype.dispose = /**
  535. * Clears out a portal from the DOM.
  536. * @return {?}
  537. */
  538. function () {
  539. _super.prototype.dispose.call(this);
  540. if (this.outletElement.parentNode != null) {
  541. this.outletElement.parentNode.removeChild(this.outletElement);
  542. }
  543. };
  544. /** Gets the root HTMLElement for an instantiated component. */
  545. /**
  546. * Gets the root HTMLElement for an instantiated component.
  547. * @private
  548. * @param {?} componentRef
  549. * @return {?}
  550. */
  551. DomPortalOutlet.prototype._getComponentRootNode = /**
  552. * Gets the root HTMLElement for an instantiated component.
  553. * @private
  554. * @param {?} componentRef
  555. * @return {?}
  556. */
  557. function (componentRef) {
  558. return (/** @type {?} */ (((/** @type {?} */ (componentRef.hostView))).rootNodes[0]));
  559. };
  560. return DomPortalOutlet;
  561. }(BasePortalOutlet));
  562. /**
  563. * @deprecated Use `DomPortalOutlet` instead.
  564. * \@breaking-change 9.0.0
  565. */
  566. var /**
  567. * @deprecated Use `DomPortalOutlet` instead.
  568. * \@breaking-change 9.0.0
  569. */
  570. DomPortalHost = /** @class */ (function (_super) {
  571. __extends(DomPortalHost, _super);
  572. function DomPortalHost() {
  573. return _super !== null && _super.apply(this, arguments) || this;
  574. }
  575. return DomPortalHost;
  576. }(DomPortalOutlet));
  577. /**
  578. * @fileoverview added by tsickle
  579. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  580. */
  581. /**
  582. * Directive version of a `TemplatePortal`. Because the directive *is* a TemplatePortal,
  583. * the directive instance itself can be attached to a host, enabling declarative use of portals.
  584. */
  585. var CdkPortal = /** @class */ (function (_super) {
  586. __extends(CdkPortal, _super);
  587. function CdkPortal(templateRef, viewContainerRef) {
  588. return _super.call(this, templateRef, viewContainerRef) || this;
  589. }
  590. CdkPortal.decorators = [
  591. { type: core.Directive, args: [{
  592. selector: '[cdkPortal]',
  593. exportAs: 'cdkPortal',
  594. },] },
  595. ];
  596. /** @nocollapse */
  597. CdkPortal.ctorParameters = function () { return [
  598. { type: core.TemplateRef },
  599. { type: core.ViewContainerRef }
  600. ]; };
  601. return CdkPortal;
  602. }(TemplatePortal));
  603. /**
  604. * @deprecated Use `CdkPortal` instead.
  605. * \@breaking-change 9.0.0
  606. */
  607. var TemplatePortalDirective = /** @class */ (function (_super) {
  608. __extends(TemplatePortalDirective, _super);
  609. function TemplatePortalDirective() {
  610. return _super !== null && _super.apply(this, arguments) || this;
  611. }
  612. TemplatePortalDirective.decorators = [
  613. { type: core.Directive, args: [{
  614. selector: '[cdk-portal], [portal]',
  615. exportAs: 'cdkPortal',
  616. providers: [{
  617. provide: CdkPortal,
  618. useExisting: TemplatePortalDirective
  619. }]
  620. },] },
  621. ];
  622. return TemplatePortalDirective;
  623. }(CdkPortal));
  624. /**
  625. * Directive version of a PortalOutlet. Because the directive *is* a PortalOutlet, portals can be
  626. * directly attached to it, enabling declarative use.
  627. *
  628. * Usage:
  629. * `<ng-template [cdkPortalOutlet]="greeting"></ng-template>`
  630. */
  631. var CdkPortalOutlet = /** @class */ (function (_super) {
  632. __extends(CdkPortalOutlet, _super);
  633. function CdkPortalOutlet(_componentFactoryResolver, _viewContainerRef) {
  634. var _this = _super.call(this) || this;
  635. _this._componentFactoryResolver = _componentFactoryResolver;
  636. _this._viewContainerRef = _viewContainerRef;
  637. /**
  638. * Whether the portal component is initialized.
  639. */
  640. _this._isInitialized = false;
  641. /**
  642. * Emits when a portal is attached to the outlet.
  643. */
  644. _this.attached = new core.EventEmitter();
  645. return _this;
  646. }
  647. Object.defineProperty(CdkPortalOutlet.prototype, "portal", {
  648. /** Portal associated with the Portal outlet. */
  649. get: /**
  650. * Portal associated with the Portal outlet.
  651. * @return {?}
  652. */
  653. function () {
  654. return this._attachedPortal;
  655. },
  656. set: /**
  657. * @param {?} portal
  658. * @return {?}
  659. */
  660. function (portal) {
  661. // Ignore the cases where the `portal` is set to a falsy value before the lifecycle hooks have
  662. // run. This handles the cases where the user might do something like `<div cdkPortalOutlet>`
  663. // and attach a portal programmatically in the parent component. When Angular does the first CD
  664. // round, it will fire the setter with empty string, causing the user's content to be cleared.
  665. if (this.hasAttached() && !portal && !this._isInitialized) {
  666. return;
  667. }
  668. if (this.hasAttached()) {
  669. _super.prototype.detach.call(this);
  670. }
  671. if (portal) {
  672. _super.prototype.attach.call(this, portal);
  673. }
  674. this._attachedPortal = portal;
  675. },
  676. enumerable: true,
  677. configurable: true
  678. });
  679. Object.defineProperty(CdkPortalOutlet.prototype, "attachedRef", {
  680. /** Component or view reference that is attached to the portal. */
  681. get: /**
  682. * Component or view reference that is attached to the portal.
  683. * @return {?}
  684. */
  685. function () {
  686. return this._attachedRef;
  687. },
  688. enumerable: true,
  689. configurable: true
  690. });
  691. /**
  692. * @return {?}
  693. */
  694. CdkPortalOutlet.prototype.ngOnInit = /**
  695. * @return {?}
  696. */
  697. function () {
  698. this._isInitialized = true;
  699. };
  700. /**
  701. * @return {?}
  702. */
  703. CdkPortalOutlet.prototype.ngOnDestroy = /**
  704. * @return {?}
  705. */
  706. function () {
  707. _super.prototype.dispose.call(this);
  708. this._attachedPortal = null;
  709. this._attachedRef = null;
  710. };
  711. /**
  712. * Attach the given ComponentPortal to this PortalOutlet using the ComponentFactoryResolver.
  713. *
  714. * @param portal Portal to be attached to the portal outlet.
  715. * @returns Reference to the created component.
  716. */
  717. /**
  718. * Attach the given ComponentPortal to this PortalOutlet using the ComponentFactoryResolver.
  719. *
  720. * @template T
  721. * @param {?} portal Portal to be attached to the portal outlet.
  722. * @return {?} Reference to the created component.
  723. */
  724. CdkPortalOutlet.prototype.attachComponentPortal = /**
  725. * Attach the given ComponentPortal to this PortalOutlet using the ComponentFactoryResolver.
  726. *
  727. * @template T
  728. * @param {?} portal Portal to be attached to the portal outlet.
  729. * @return {?} Reference to the created component.
  730. */
  731. function (portal) {
  732. portal.setAttachedHost(this);
  733. // If the portal specifies an origin, use that as the logical location of the component
  734. // in the application tree. Otherwise use the location of this PortalOutlet.
  735. /** @type {?} */
  736. var viewContainerRef = portal.viewContainerRef != null ?
  737. portal.viewContainerRef :
  738. this._viewContainerRef;
  739. /** @type {?} */
  740. var resolver = portal.componentFactoryResolver || this._componentFactoryResolver;
  741. /** @type {?} */
  742. var componentFactory = resolver.resolveComponentFactory(portal.component);
  743. /** @type {?} */
  744. var ref = viewContainerRef.createComponent(componentFactory, viewContainerRef.length, portal.injector || viewContainerRef.injector);
  745. _super.prototype.setDisposeFn.call(this, (/**
  746. * @return {?}
  747. */
  748. function () { return ref.destroy(); }));
  749. this._attachedPortal = portal;
  750. this._attachedRef = ref;
  751. this.attached.emit(ref);
  752. return ref;
  753. };
  754. /**
  755. * Attach the given TemplatePortal to this PortlHost as an embedded View.
  756. * @param portal Portal to be attached.
  757. * @returns Reference to the created embedded view.
  758. */
  759. /**
  760. * Attach the given TemplatePortal to this PortlHost as an embedded View.
  761. * @template C
  762. * @param {?} portal Portal to be attached.
  763. * @return {?} Reference to the created embedded view.
  764. */
  765. CdkPortalOutlet.prototype.attachTemplatePortal = /**
  766. * Attach the given TemplatePortal to this PortlHost as an embedded View.
  767. * @template C
  768. * @param {?} portal Portal to be attached.
  769. * @return {?} Reference to the created embedded view.
  770. */
  771. function (portal) {
  772. var _this = this;
  773. portal.setAttachedHost(this);
  774. /** @type {?} */
  775. var viewRef = this._viewContainerRef.createEmbeddedView(portal.templateRef, portal.context);
  776. _super.prototype.setDisposeFn.call(this, (/**
  777. * @return {?}
  778. */
  779. function () { return _this._viewContainerRef.clear(); }));
  780. this._attachedPortal = portal;
  781. this._attachedRef = viewRef;
  782. this.attached.emit(viewRef);
  783. return viewRef;
  784. };
  785. CdkPortalOutlet.decorators = [
  786. { type: core.Directive, args: [{
  787. selector: '[cdkPortalOutlet]',
  788. exportAs: 'cdkPortalOutlet',
  789. inputs: ['portal: cdkPortalOutlet']
  790. },] },
  791. ];
  792. /** @nocollapse */
  793. CdkPortalOutlet.ctorParameters = function () { return [
  794. { type: core.ComponentFactoryResolver },
  795. { type: core.ViewContainerRef }
  796. ]; };
  797. CdkPortalOutlet.propDecorators = {
  798. attached: [{ type: core.Output }]
  799. };
  800. return CdkPortalOutlet;
  801. }(BasePortalOutlet));
  802. /**
  803. * @deprecated Use `CdkPortalOutlet` instead.
  804. * \@breaking-change 9.0.0
  805. */
  806. var PortalHostDirective = /** @class */ (function (_super) {
  807. __extends(PortalHostDirective, _super);
  808. function PortalHostDirective() {
  809. return _super !== null && _super.apply(this, arguments) || this;
  810. }
  811. PortalHostDirective.decorators = [
  812. { type: core.Directive, args: [{
  813. selector: '[cdkPortalHost], [portalHost]',
  814. exportAs: 'cdkPortalHost',
  815. inputs: ['portal: cdkPortalHost'],
  816. providers: [{
  817. provide: CdkPortalOutlet,
  818. useExisting: PortalHostDirective
  819. }]
  820. },] },
  821. ];
  822. return PortalHostDirective;
  823. }(CdkPortalOutlet));
  824. var PortalModule = /** @class */ (function () {
  825. function PortalModule() {
  826. }
  827. PortalModule.decorators = [
  828. { type: core.NgModule, args: [{
  829. exports: [CdkPortal, CdkPortalOutlet, TemplatePortalDirective, PortalHostDirective],
  830. declarations: [CdkPortal, CdkPortalOutlet, TemplatePortalDirective, PortalHostDirective],
  831. },] },
  832. ];
  833. return PortalModule;
  834. }());
  835. /**
  836. * @fileoverview added by tsickle
  837. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  838. */
  839. /**
  840. * Custom injector to be used when providing custom
  841. * injection tokens to components inside a portal.
  842. * \@docs-private
  843. */
  844. var /**
  845. * Custom injector to be used when providing custom
  846. * injection tokens to components inside a portal.
  847. * \@docs-private
  848. */
  849. PortalInjector = /** @class */ (function () {
  850. function PortalInjector(_parentInjector, _customTokens) {
  851. this._parentInjector = _parentInjector;
  852. this._customTokens = _customTokens;
  853. }
  854. /**
  855. * @param {?} token
  856. * @param {?=} notFoundValue
  857. * @return {?}
  858. */
  859. PortalInjector.prototype.get = /**
  860. * @param {?} token
  861. * @param {?=} notFoundValue
  862. * @return {?}
  863. */
  864. function (token, notFoundValue) {
  865. /** @type {?} */
  866. var value = this._customTokens.get(token);
  867. if (typeof value !== 'undefined') {
  868. return value;
  869. }
  870. return this._parentInjector.get(token, notFoundValue);
  871. };
  872. return PortalInjector;
  873. }());
  874. exports.Portal = Portal;
  875. exports.ComponentPortal = ComponentPortal;
  876. exports.TemplatePortal = TemplatePortal;
  877. exports.BasePortalOutlet = BasePortalOutlet;
  878. exports.BasePortalHost = BasePortalHost;
  879. exports.DomPortalOutlet = DomPortalOutlet;
  880. exports.DomPortalHost = DomPortalHost;
  881. exports.CdkPortal = CdkPortal;
  882. exports.TemplatePortalDirective = TemplatePortalDirective;
  883. exports.CdkPortalOutlet = CdkPortalOutlet;
  884. exports.PortalHostDirective = PortalHostDirective;
  885. exports.PortalModule = PortalModule;
  886. exports.PortalInjector = PortalInjector;
  887. Object.defineProperty(exports, '__esModule', { value: true });
  888. })));
  889. //# sourceMappingURL=cdk-portal.umd.js.map