overlay-module-BUj0D19H.mjs 139 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029
  1. import * as i0 from '@angular/core';
  2. import { inject, NgZone, Injectable, RendererFactory2, Component, ChangeDetectionStrategy, ViewEncapsulation, untracked, afterRender, afterNextRender, ElementRef, Injector, ANIMATION_MODULE_TYPE, EnvironmentInjector, ApplicationRef, InjectionToken, Directive, EventEmitter, TemplateRef, ViewContainerRef, booleanAttribute, Input, Output, NgModule } from '@angular/core';
  3. import { DOCUMENT, Location } from '@angular/common';
  4. import { P as Platform } from './platform-DmdVEw_C.mjs';
  5. import { _ as _bindEventWithOptions } from './backwards-compatibility-DHR38MsD.mjs';
  6. import { _ as _getEventTarget } from './shadow-dom-B0oHn41l.mjs';
  7. import { _ as _isTestEnvironment } from './test-environment-CT0XxPyp.mjs';
  8. import { _ as _CdkPrivateStyleLoader } from './style-loader-Cu9AvjH9.mjs';
  9. import { Subject, Subscription, merge } from 'rxjs';
  10. import { filter, takeUntil, takeWhile } from 'rxjs/operators';
  11. import { c as coerceCssPixelValue } from './css-pixel-value-C_HEqLhI.mjs';
  12. import { c as coerceArray } from './array-I1yfCXUO.mjs';
  13. import { ScrollDispatcher, ViewportRuler, ScrollingModule } from './scrolling.mjs';
  14. import { s as supportsScrollBehavior } from './scrolling-BkvA05C8.mjs';
  15. import { b as DomPortalOutlet, T as TemplatePortal, h as PortalModule } from './portal-directives-Bw5woq8I.mjs';
  16. import { D as Directionality } from './directionality-CBXD4hga.mjs';
  17. import { _ as _IdGenerator } from './id-generator-Dw_9dSDu.mjs';
  18. import { g as ESCAPE } from './keycodes-CpHkExLC.mjs';
  19. import { hasModifierKey } from './keycodes.mjs';
  20. import { BidiModule } from './bidi.mjs';
  21. const scrollBehaviorSupported = supportsScrollBehavior();
  22. /**
  23. * Strategy that will prevent the user from scrolling while the overlay is visible.
  24. */
  25. class BlockScrollStrategy {
  26. _viewportRuler;
  27. _previousHTMLStyles = { top: '', left: '' };
  28. _previousScrollPosition;
  29. _isEnabled = false;
  30. _document;
  31. constructor(_viewportRuler, document) {
  32. this._viewportRuler = _viewportRuler;
  33. this._document = document;
  34. }
  35. /** Attaches this scroll strategy to an overlay. */
  36. attach() { }
  37. /** Blocks page-level scroll while the attached overlay is open. */
  38. enable() {
  39. if (this._canBeEnabled()) {
  40. const root = this._document.documentElement;
  41. this._previousScrollPosition = this._viewportRuler.getViewportScrollPosition();
  42. // Cache the previous inline styles in case the user had set them.
  43. this._previousHTMLStyles.left = root.style.left || '';
  44. this._previousHTMLStyles.top = root.style.top || '';
  45. // Note: we're using the `html` node, instead of the `body`, because the `body` may
  46. // have the user agent margin, whereas the `html` is guaranteed not to have one.
  47. root.style.left = coerceCssPixelValue(-this._previousScrollPosition.left);
  48. root.style.top = coerceCssPixelValue(-this._previousScrollPosition.top);
  49. root.classList.add('cdk-global-scrollblock');
  50. this._isEnabled = true;
  51. }
  52. }
  53. /** Unblocks page-level scroll while the attached overlay is open. */
  54. disable() {
  55. if (this._isEnabled) {
  56. const html = this._document.documentElement;
  57. const body = this._document.body;
  58. const htmlStyle = html.style;
  59. const bodyStyle = body.style;
  60. const previousHtmlScrollBehavior = htmlStyle.scrollBehavior || '';
  61. const previousBodyScrollBehavior = bodyStyle.scrollBehavior || '';
  62. this._isEnabled = false;
  63. htmlStyle.left = this._previousHTMLStyles.left;
  64. htmlStyle.top = this._previousHTMLStyles.top;
  65. html.classList.remove('cdk-global-scrollblock');
  66. // Disable user-defined smooth scrolling temporarily while we restore the scroll position.
  67. // See https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
  68. // Note that we don't mutate the property if the browser doesn't support `scroll-behavior`,
  69. // because it can throw off feature detections in `supportsScrollBehavior` which
  70. // checks for `'scrollBehavior' in documentElement.style`.
  71. if (scrollBehaviorSupported) {
  72. htmlStyle.scrollBehavior = bodyStyle.scrollBehavior = 'auto';
  73. }
  74. window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top);
  75. if (scrollBehaviorSupported) {
  76. htmlStyle.scrollBehavior = previousHtmlScrollBehavior;
  77. bodyStyle.scrollBehavior = previousBodyScrollBehavior;
  78. }
  79. }
  80. }
  81. _canBeEnabled() {
  82. // Since the scroll strategies can't be singletons, we have to use a global CSS class
  83. // (`cdk-global-scrollblock`) to make sure that we don't try to disable global
  84. // scrolling multiple times.
  85. const html = this._document.documentElement;
  86. if (html.classList.contains('cdk-global-scrollblock') || this._isEnabled) {
  87. return false;
  88. }
  89. const rootElement = this._document.documentElement;
  90. const viewport = this._viewportRuler.getViewportSize();
  91. return rootElement.scrollHeight > viewport.height || rootElement.scrollWidth > viewport.width;
  92. }
  93. }
  94. /**
  95. * Returns an error to be thrown when attempting to attach an already-attached scroll strategy.
  96. */
  97. function getMatScrollStrategyAlreadyAttachedError() {
  98. return Error(`Scroll strategy has already been attached.`);
  99. }
  100. /**
  101. * Strategy that will close the overlay as soon as the user starts scrolling.
  102. */
  103. class CloseScrollStrategy {
  104. _scrollDispatcher;
  105. _ngZone;
  106. _viewportRuler;
  107. _config;
  108. _scrollSubscription = null;
  109. _overlayRef;
  110. _initialScrollPosition;
  111. constructor(_scrollDispatcher, _ngZone, _viewportRuler, _config) {
  112. this._scrollDispatcher = _scrollDispatcher;
  113. this._ngZone = _ngZone;
  114. this._viewportRuler = _viewportRuler;
  115. this._config = _config;
  116. }
  117. /** Attaches this scroll strategy to an overlay. */
  118. attach(overlayRef) {
  119. if (this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {
  120. throw getMatScrollStrategyAlreadyAttachedError();
  121. }
  122. this._overlayRef = overlayRef;
  123. }
  124. /** Enables the closing of the attached overlay on scroll. */
  125. enable() {
  126. if (this._scrollSubscription) {
  127. return;
  128. }
  129. const stream = this._scrollDispatcher.scrolled(0).pipe(filter(scrollable => {
  130. return (!scrollable ||
  131. !this._overlayRef.overlayElement.contains(scrollable.getElementRef().nativeElement));
  132. }));
  133. if (this._config && this._config.threshold && this._config.threshold > 1) {
  134. this._initialScrollPosition = this._viewportRuler.getViewportScrollPosition().top;
  135. this._scrollSubscription = stream.subscribe(() => {
  136. const scrollPosition = this._viewportRuler.getViewportScrollPosition().top;
  137. if (Math.abs(scrollPosition - this._initialScrollPosition) > this._config.threshold) {
  138. this._detach();
  139. }
  140. else {
  141. this._overlayRef.updatePosition();
  142. }
  143. });
  144. }
  145. else {
  146. this._scrollSubscription = stream.subscribe(this._detach);
  147. }
  148. }
  149. /** Disables the closing the attached overlay on scroll. */
  150. disable() {
  151. if (this._scrollSubscription) {
  152. this._scrollSubscription.unsubscribe();
  153. this._scrollSubscription = null;
  154. }
  155. }
  156. detach() {
  157. this.disable();
  158. this._overlayRef = null;
  159. }
  160. /** Detaches the overlay ref and disables the scroll strategy. */
  161. _detach = () => {
  162. this.disable();
  163. if (this._overlayRef.hasAttached()) {
  164. this._ngZone.run(() => this._overlayRef.detach());
  165. }
  166. };
  167. }
  168. /** Scroll strategy that doesn't do anything. */
  169. class NoopScrollStrategy {
  170. /** Does nothing, as this scroll strategy is a no-op. */
  171. enable() { }
  172. /** Does nothing, as this scroll strategy is a no-op. */
  173. disable() { }
  174. /** Does nothing, as this scroll strategy is a no-op. */
  175. attach() { }
  176. }
  177. /**
  178. * Gets whether an element is scrolled outside of view by any of its parent scrolling containers.
  179. * @param element Dimensions of the element (from getBoundingClientRect)
  180. * @param scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)
  181. * @returns Whether the element is scrolled out of view
  182. * @docs-private
  183. */
  184. function isElementScrolledOutsideView(element, scrollContainers) {
  185. return scrollContainers.some(containerBounds => {
  186. const outsideAbove = element.bottom < containerBounds.top;
  187. const outsideBelow = element.top > containerBounds.bottom;
  188. const outsideLeft = element.right < containerBounds.left;
  189. const outsideRight = element.left > containerBounds.right;
  190. return outsideAbove || outsideBelow || outsideLeft || outsideRight;
  191. });
  192. }
  193. /**
  194. * Gets whether an element is clipped by any of its scrolling containers.
  195. * @param element Dimensions of the element (from getBoundingClientRect)
  196. * @param scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)
  197. * @returns Whether the element is clipped
  198. * @docs-private
  199. */
  200. function isElementClippedByScrolling(element, scrollContainers) {
  201. return scrollContainers.some(scrollContainerRect => {
  202. const clippedAbove = element.top < scrollContainerRect.top;
  203. const clippedBelow = element.bottom > scrollContainerRect.bottom;
  204. const clippedLeft = element.left < scrollContainerRect.left;
  205. const clippedRight = element.right > scrollContainerRect.right;
  206. return clippedAbove || clippedBelow || clippedLeft || clippedRight;
  207. });
  208. }
  209. /**
  210. * Strategy that will update the element position as the user is scrolling.
  211. */
  212. class RepositionScrollStrategy {
  213. _scrollDispatcher;
  214. _viewportRuler;
  215. _ngZone;
  216. _config;
  217. _scrollSubscription = null;
  218. _overlayRef;
  219. constructor(_scrollDispatcher, _viewportRuler, _ngZone, _config) {
  220. this._scrollDispatcher = _scrollDispatcher;
  221. this._viewportRuler = _viewportRuler;
  222. this._ngZone = _ngZone;
  223. this._config = _config;
  224. }
  225. /** Attaches this scroll strategy to an overlay. */
  226. attach(overlayRef) {
  227. if (this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {
  228. throw getMatScrollStrategyAlreadyAttachedError();
  229. }
  230. this._overlayRef = overlayRef;
  231. }
  232. /** Enables repositioning of the attached overlay on scroll. */
  233. enable() {
  234. if (!this._scrollSubscription) {
  235. const throttle = this._config ? this._config.scrollThrottle : 0;
  236. this._scrollSubscription = this._scrollDispatcher.scrolled(throttle).subscribe(() => {
  237. this._overlayRef.updatePosition();
  238. // TODO(crisbeto): make `close` on by default once all components can handle it.
  239. if (this._config && this._config.autoClose) {
  240. const overlayRect = this._overlayRef.overlayElement.getBoundingClientRect();
  241. const { width, height } = this._viewportRuler.getViewportSize();
  242. // TODO(crisbeto): include all ancestor scroll containers here once
  243. // we have a way of exposing the trigger element to the scroll strategy.
  244. const parentRects = [{ width, height, bottom: height, right: width, top: 0, left: 0 }];
  245. if (isElementScrolledOutsideView(overlayRect, parentRects)) {
  246. this.disable();
  247. this._ngZone.run(() => this._overlayRef.detach());
  248. }
  249. }
  250. });
  251. }
  252. }
  253. /** Disables repositioning of the attached overlay on scroll. */
  254. disable() {
  255. if (this._scrollSubscription) {
  256. this._scrollSubscription.unsubscribe();
  257. this._scrollSubscription = null;
  258. }
  259. }
  260. detach() {
  261. this.disable();
  262. this._overlayRef = null;
  263. }
  264. }
  265. /**
  266. * Options for how an overlay will handle scrolling.
  267. *
  268. * Users can provide a custom value for `ScrollStrategyOptions` to replace the default
  269. * behaviors. This class primarily acts as a factory for ScrollStrategy instances.
  270. */
  271. class ScrollStrategyOptions {
  272. _scrollDispatcher = inject(ScrollDispatcher);
  273. _viewportRuler = inject(ViewportRuler);
  274. _ngZone = inject(NgZone);
  275. _document = inject(DOCUMENT);
  276. constructor() { }
  277. /** Do nothing on scroll. */
  278. noop = () => new NoopScrollStrategy();
  279. /**
  280. * Close the overlay as soon as the user scrolls.
  281. * @param config Configuration to be used inside the scroll strategy.
  282. */
  283. close = (config) => new CloseScrollStrategy(this._scrollDispatcher, this._ngZone, this._viewportRuler, config);
  284. /** Block scrolling. */
  285. block = () => new BlockScrollStrategy(this._viewportRuler, this._document);
  286. /**
  287. * Update the overlay's position on scroll.
  288. * @param config Configuration to be used inside the scroll strategy.
  289. * Allows debouncing the reposition calls.
  290. */
  291. reposition = (config) => new RepositionScrollStrategy(this._scrollDispatcher, this._viewportRuler, this._ngZone, config);
  292. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollStrategyOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
  293. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollStrategyOptions, providedIn: 'root' });
  294. }
  295. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollStrategyOptions, decorators: [{
  296. type: Injectable,
  297. args: [{ providedIn: 'root' }]
  298. }], ctorParameters: () => [] });
  299. /** Initial configuration used when creating an overlay. */
  300. class OverlayConfig {
  301. /** Strategy with which to position the overlay. */
  302. positionStrategy;
  303. /** Strategy to be used when handling scroll events while the overlay is open. */
  304. scrollStrategy = new NoopScrollStrategy();
  305. /** Custom class to add to the overlay pane. */
  306. panelClass = '';
  307. /** Whether the overlay has a backdrop. */
  308. hasBackdrop = false;
  309. /** Custom class to add to the backdrop */
  310. backdropClass = 'cdk-overlay-dark-backdrop';
  311. /** The width of the overlay panel. If a number is provided, pixel units are assumed. */
  312. width;
  313. /** The height of the overlay panel. If a number is provided, pixel units are assumed. */
  314. height;
  315. /** The min-width of the overlay panel. If a number is provided, pixel units are assumed. */
  316. minWidth;
  317. /** The min-height of the overlay panel. If a number is provided, pixel units are assumed. */
  318. minHeight;
  319. /** The max-width of the overlay panel. If a number is provided, pixel units are assumed. */
  320. maxWidth;
  321. /** The max-height of the overlay panel. If a number is provided, pixel units are assumed. */
  322. maxHeight;
  323. /**
  324. * Direction of the text in the overlay panel. If a `Directionality` instance
  325. * is passed in, the overlay will handle changes to its value automatically.
  326. */
  327. direction;
  328. /**
  329. * Whether the overlay should be disposed of when the user goes backwards/forwards in history.
  330. * Note that this usually doesn't include clicking on links (unless the user is using
  331. * the `HashLocationStrategy`).
  332. */
  333. disposeOnNavigation = false;
  334. constructor(config) {
  335. if (config) {
  336. // Use `Iterable` instead of `Array` because TypeScript, as of 3.6.3,
  337. // loses the array generic type in the `for of`. But we *also* have to use `Array` because
  338. // typescript won't iterate over an `Iterable` unless you compile with `--downlevelIteration`
  339. const configKeys = Object.keys(config);
  340. for (const key of configKeys) {
  341. if (config[key] !== undefined) {
  342. // TypeScript, as of version 3.5, sees the left-hand-side of this expression
  343. // as "I don't know *which* key this is, so the only valid value is the intersection
  344. // of all the possible values." In this case, that happens to be `undefined`. TypeScript
  345. // is not smart enough to see that the right-hand-side is actually an access of the same
  346. // exact type with the same exact key, meaning that the value type must be identical.
  347. // So we use `any` to work around this.
  348. this[key] = config[key];
  349. }
  350. }
  351. }
  352. }
  353. }
  354. /** The points of the origin element and the overlay element to connect. */
  355. class ConnectionPositionPair {
  356. offsetX;
  357. offsetY;
  358. panelClass;
  359. /** X-axis attachment point for connected overlay origin. Can be 'start', 'end', or 'center'. */
  360. originX;
  361. /** Y-axis attachment point for connected overlay origin. Can be 'top', 'bottom', or 'center'. */
  362. originY;
  363. /** X-axis attachment point for connected overlay. Can be 'start', 'end', or 'center'. */
  364. overlayX;
  365. /** Y-axis attachment point for connected overlay. Can be 'top', 'bottom', or 'center'. */
  366. overlayY;
  367. constructor(origin, overlay,
  368. /** Offset along the X axis. */
  369. offsetX,
  370. /** Offset along the Y axis. */
  371. offsetY,
  372. /** Class(es) to be applied to the panel while this position is active. */
  373. panelClass) {
  374. this.offsetX = offsetX;
  375. this.offsetY = offsetY;
  376. this.panelClass = panelClass;
  377. this.originX = origin.originX;
  378. this.originY = origin.originY;
  379. this.overlayX = overlay.overlayX;
  380. this.overlayY = overlay.overlayY;
  381. }
  382. }
  383. /**
  384. * Set of properties regarding the position of the origin and overlay relative to the viewport
  385. * with respect to the containing Scrollable elements.
  386. *
  387. * The overlay and origin are clipped if any part of their bounding client rectangle exceeds the
  388. * bounds of any one of the strategy's Scrollable's bounding client rectangle.
  389. *
  390. * The overlay and origin are outside view if there is no overlap between their bounding client
  391. * rectangle and any one of the strategy's Scrollable's bounding client rectangle.
  392. *
  393. * ----------- -----------
  394. * | outside | | clipped |
  395. * | view | --------------------------
  396. * | | | | | |
  397. * ---------- | ----------- |
  398. * -------------------------- | |
  399. * | | | Scrollable |
  400. * | | | |
  401. * | | --------------------------
  402. * | Scrollable |
  403. * | |
  404. * --------------------------
  405. *
  406. * @docs-private
  407. */
  408. class ScrollingVisibility {
  409. isOriginClipped;
  410. isOriginOutsideView;
  411. isOverlayClipped;
  412. isOverlayOutsideView;
  413. }
  414. /** The change event emitted by the strategy when a fallback position is used. */
  415. class ConnectedOverlayPositionChange {
  416. connectionPair;
  417. scrollableViewProperties;
  418. constructor(
  419. /** The position used as a result of this change. */
  420. connectionPair,
  421. /** @docs-private */
  422. scrollableViewProperties) {
  423. this.connectionPair = connectionPair;
  424. this.scrollableViewProperties = scrollableViewProperties;
  425. }
  426. }
  427. /**
  428. * Validates whether a vertical position property matches the expected values.
  429. * @param property Name of the property being validated.
  430. * @param value Value of the property being validated.
  431. * @docs-private
  432. */
  433. function validateVerticalPosition(property, value) {
  434. if (value !== 'top' && value !== 'bottom' && value !== 'center') {
  435. throw Error(`ConnectedPosition: Invalid ${property} "${value}". ` +
  436. `Expected "top", "bottom" or "center".`);
  437. }
  438. }
  439. /**
  440. * Validates whether a horizontal position property matches the expected values.
  441. * @param property Name of the property being validated.
  442. * @param value Value of the property being validated.
  443. * @docs-private
  444. */
  445. function validateHorizontalPosition(property, value) {
  446. if (value !== 'start' && value !== 'end' && value !== 'center') {
  447. throw Error(`ConnectedPosition: Invalid ${property} "${value}". ` +
  448. `Expected "start", "end" or "center".`);
  449. }
  450. }
  451. /**
  452. * Service for dispatching events that land on the body to appropriate overlay ref,
  453. * if any. It maintains a list of attached overlays to determine best suited overlay based
  454. * on event target and order of overlay opens.
  455. */
  456. class BaseOverlayDispatcher {
  457. /** Currently attached overlays in the order they were attached. */
  458. _attachedOverlays = [];
  459. _document = inject(DOCUMENT);
  460. _isAttached;
  461. constructor() { }
  462. ngOnDestroy() {
  463. this.detach();
  464. }
  465. /** Add a new overlay to the list of attached overlay refs. */
  466. add(overlayRef) {
  467. // Ensure that we don't get the same overlay multiple times.
  468. this.remove(overlayRef);
  469. this._attachedOverlays.push(overlayRef);
  470. }
  471. /** Remove an overlay from the list of attached overlay refs. */
  472. remove(overlayRef) {
  473. const index = this._attachedOverlays.indexOf(overlayRef);
  474. if (index > -1) {
  475. this._attachedOverlays.splice(index, 1);
  476. }
  477. // Remove the global listener once there are no more overlays.
  478. if (this._attachedOverlays.length === 0) {
  479. this.detach();
  480. }
  481. }
  482. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BaseOverlayDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
  483. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BaseOverlayDispatcher, providedIn: 'root' });
  484. }
  485. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BaseOverlayDispatcher, decorators: [{
  486. type: Injectable,
  487. args: [{ providedIn: 'root' }]
  488. }], ctorParameters: () => [] });
  489. /**
  490. * Service for dispatching keyboard events that land on the body to appropriate overlay ref,
  491. * if any. It maintains a list of attached overlays to determine best suited overlay based
  492. * on event target and order of overlay opens.
  493. */
  494. class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {
  495. _ngZone = inject(NgZone);
  496. _renderer = inject(RendererFactory2).createRenderer(null, null);
  497. _cleanupKeydown;
  498. /** Add a new overlay to the list of attached overlay refs. */
  499. add(overlayRef) {
  500. super.add(overlayRef);
  501. // Lazily start dispatcher once first overlay is added
  502. if (!this._isAttached) {
  503. this._ngZone.runOutsideAngular(() => {
  504. this._cleanupKeydown = this._renderer.listen('body', 'keydown', this._keydownListener);
  505. });
  506. this._isAttached = true;
  507. }
  508. }
  509. /** Detaches the global keyboard event listener. */
  510. detach() {
  511. if (this._isAttached) {
  512. this._cleanupKeydown?.();
  513. this._isAttached = false;
  514. }
  515. }
  516. /** Keyboard event listener that will be attached to the body. */
  517. _keydownListener = (event) => {
  518. const overlays = this._attachedOverlays;
  519. for (let i = overlays.length - 1; i > -1; i--) {
  520. // Dispatch the keydown event to the top overlay which has subscribers to its keydown events.
  521. // We want to target the most recent overlay, rather than trying to match where the event came
  522. // from, because some components might open an overlay, but keep focus on a trigger element
  523. // (e.g. for select and autocomplete). We skip overlays without keydown event subscriptions,
  524. // because we don't want overlays that don't handle keyboard events to block the ones below
  525. // them that do.
  526. if (overlays[i]._keydownEvents.observers.length > 0) {
  527. this._ngZone.run(() => overlays[i]._keydownEvents.next(event));
  528. break;
  529. }
  530. }
  531. };
  532. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayKeyboardDispatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
  533. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayKeyboardDispatcher, providedIn: 'root' });
  534. }
  535. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayKeyboardDispatcher, decorators: [{
  536. type: Injectable,
  537. args: [{ providedIn: 'root' }]
  538. }] });
  539. /**
  540. * Service for dispatching mouse click events that land on the body to appropriate overlay ref,
  541. * if any. It maintains a list of attached overlays to determine best suited overlay based
  542. * on event target and order of overlay opens.
  543. */
  544. class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
  545. _platform = inject(Platform);
  546. _ngZone = inject(NgZone);
  547. _renderer = inject(RendererFactory2).createRenderer(null, null);
  548. _cursorOriginalValue;
  549. _cursorStyleIsSet = false;
  550. _pointerDownEventTarget;
  551. _cleanups;
  552. /** Add a new overlay to the list of attached overlay refs. */
  553. add(overlayRef) {
  554. super.add(overlayRef);
  555. // Safari on iOS does not generate click events for non-interactive
  556. // elements. However, we want to receive a click for any element outside
  557. // the overlay. We can force a "clickable" state by setting
  558. // `cursor: pointer` on the document body. See:
  559. // https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile
  560. // https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
  561. if (!this._isAttached) {
  562. const body = this._document.body;
  563. const eventOptions = { capture: true };
  564. this._cleanups = this._ngZone.runOutsideAngular(() => [
  565. _bindEventWithOptions(this._renderer, body, 'pointerdown', this._pointerDownListener, eventOptions),
  566. _bindEventWithOptions(this._renderer, body, 'click', this._clickListener, eventOptions),
  567. _bindEventWithOptions(this._renderer, body, 'auxclick', this._clickListener, eventOptions),
  568. _bindEventWithOptions(this._renderer, body, 'contextmenu', this._clickListener, eventOptions),
  569. ]);
  570. // click event is not fired on iOS. To make element "clickable" we are
  571. // setting the cursor to pointer
  572. if (this._platform.IOS && !this._cursorStyleIsSet) {
  573. this._cursorOriginalValue = body.style.cursor;
  574. body.style.cursor = 'pointer';
  575. this._cursorStyleIsSet = true;
  576. }
  577. this._isAttached = true;
  578. }
  579. }
  580. /** Detaches the global keyboard event listener. */
  581. detach() {
  582. if (this._isAttached) {
  583. this._cleanups?.forEach(cleanup => cleanup());
  584. this._cleanups = undefined;
  585. if (this._platform.IOS && this._cursorStyleIsSet) {
  586. this._document.body.style.cursor = this._cursorOriginalValue;
  587. this._cursorStyleIsSet = false;
  588. }
  589. this._isAttached = false;
  590. }
  591. }
  592. /** Store pointerdown event target to track origin of click. */
  593. _pointerDownListener = (event) => {
  594. this._pointerDownEventTarget = _getEventTarget(event);
  595. };
  596. /** Click event listener that will be attached to the body propagate phase. */
  597. _clickListener = (event) => {
  598. const target = _getEventTarget(event);
  599. // In case of a click event, we want to check the origin of the click
  600. // (e.g. in case where a user starts a click inside the overlay and
  601. // releases the click outside of it).
  602. // This is done by using the event target of the preceding pointerdown event.
  603. // Every click event caused by a pointer device has a preceding pointerdown
  604. // event, unless the click was programmatically triggered (e.g. in a unit test).
  605. const origin = event.type === 'click' && this._pointerDownEventTarget
  606. ? this._pointerDownEventTarget
  607. : target;
  608. // Reset the stored pointerdown event target, to avoid having it interfere
  609. // in subsequent events.
  610. this._pointerDownEventTarget = null;
  611. // We copy the array because the original may be modified asynchronously if the
  612. // outsidePointerEvents listener decides to detach overlays resulting in index errors inside
  613. // the for loop.
  614. const overlays = this._attachedOverlays.slice();
  615. // Dispatch the mouse event to the top overlay which has subscribers to its mouse events.
  616. // We want to target all overlays for which the click could be considered as outside click.
  617. // As soon as we reach an overlay for which the click is not outside click we break off
  618. // the loop.
  619. for (let i = overlays.length - 1; i > -1; i--) {
  620. const overlayRef = overlays[i];
  621. if (overlayRef._outsidePointerEvents.observers.length < 1 || !overlayRef.hasAttached()) {
  622. continue;
  623. }
  624. // If it's a click inside the overlay, just break - we should do nothing
  625. // If it's an outside click (both origin and target of the click) dispatch the mouse event,
  626. // and proceed with the next overlay
  627. if (containsPierceShadowDom(overlayRef.overlayElement, target) ||
  628. containsPierceShadowDom(overlayRef.overlayElement, origin)) {
  629. break;
  630. }
  631. const outsidePointerEvents = overlayRef._outsidePointerEvents;
  632. /** @breaking-change 14.0.0 _ngZone will be required. */
  633. if (this._ngZone) {
  634. this._ngZone.run(() => outsidePointerEvents.next(event));
  635. }
  636. else {
  637. outsidePointerEvents.next(event);
  638. }
  639. }
  640. };
  641. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayOutsideClickDispatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
  642. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayOutsideClickDispatcher, providedIn: 'root' });
  643. }
  644. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayOutsideClickDispatcher, decorators: [{
  645. type: Injectable,
  646. args: [{ providedIn: 'root' }]
  647. }] });
  648. /** Version of `Element.contains` that transcends shadow DOM boundaries. */
  649. function containsPierceShadowDom(parent, child) {
  650. const supportsShadowRoot = typeof ShadowRoot !== 'undefined' && ShadowRoot;
  651. let current = child;
  652. while (current) {
  653. if (current === parent) {
  654. return true;
  655. }
  656. current =
  657. supportsShadowRoot && current instanceof ShadowRoot ? current.host : current.parentNode;
  658. }
  659. return false;
  660. }
  661. class _CdkOverlayStyleLoader {
  662. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: _CdkOverlayStyleLoader, deps: [], target: i0.ɵɵFactoryTarget.Component });
  663. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: _CdkOverlayStyleLoader, isStandalone: true, selector: "ng-component", host: { attributes: { "cdk-overlay-style-loader": "" } }, ngImport: i0, template: '', isInline: true, styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed}@layer cdk-overlay{.cdk-overlay-container{z-index:1000}}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute}@layer cdk-overlay{.cdk-global-overlay-wrapper{z-index:1000}}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%}@layer cdk-overlay{.cdk-overlay-pane{z-index:1000}}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation}@layer cdk-overlay{.cdk-overlay-backdrop{z-index:1000;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}@layer cdk-overlay{.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px}@layer cdk-overlay{.cdk-overlay-connected-position-bounding-box{z-index:1000}}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  664. }
  665. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: _CdkOverlayStyleLoader, decorators: [{
  666. type: Component,
  667. args: [{ template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'cdk-overlay-style-loader': '' }, styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed}@layer cdk-overlay{.cdk-overlay-container{z-index:1000}}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute}@layer cdk-overlay{.cdk-global-overlay-wrapper{z-index:1000}}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%}@layer cdk-overlay{.cdk-overlay-pane{z-index:1000}}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation}@layer cdk-overlay{.cdk-overlay-backdrop{z-index:1000;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}@layer cdk-overlay{.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px}@layer cdk-overlay{.cdk-overlay-connected-position-bounding-box{z-index:1000}}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}\n"] }]
  668. }] });
  669. /** Container inside which all overlays will render. */
  670. class OverlayContainer {
  671. _platform = inject(Platform);
  672. _containerElement;
  673. _document = inject(DOCUMENT);
  674. _styleLoader = inject(_CdkPrivateStyleLoader);
  675. constructor() { }
  676. ngOnDestroy() {
  677. this._containerElement?.remove();
  678. }
  679. /**
  680. * This method returns the overlay container element. It will lazily
  681. * create the element the first time it is called to facilitate using
  682. * the container in non-browser environments.
  683. * @returns the container element
  684. */
  685. getContainerElement() {
  686. this._loadStyles();
  687. if (!this._containerElement) {
  688. this._createContainer();
  689. }
  690. return this._containerElement;
  691. }
  692. /**
  693. * Create the overlay container element, which is simply a div
  694. * with the 'cdk-overlay-container' class on the document body.
  695. */
  696. _createContainer() {
  697. const containerClass = 'cdk-overlay-container';
  698. // TODO(crisbeto): remove the testing check once we have an overlay testing
  699. // module or Angular starts tearing down the testing `NgModule`. See:
  700. // https://github.com/angular/angular/issues/18831
  701. if (this._platform.isBrowser || _isTestEnvironment()) {
  702. const oppositePlatformContainers = this._document.querySelectorAll(`.${containerClass}[platform="server"], ` + `.${containerClass}[platform="test"]`);
  703. // Remove any old containers from the opposite platform.
  704. // This can happen when transitioning from the server to the client.
  705. for (let i = 0; i < oppositePlatformContainers.length; i++) {
  706. oppositePlatformContainers[i].remove();
  707. }
  708. }
  709. const container = this._document.createElement('div');
  710. container.classList.add(containerClass);
  711. // A long time ago we kept adding new overlay containers whenever a new app was instantiated,
  712. // but at some point we added logic which clears the duplicate ones in order to avoid leaks.
  713. // The new logic was a little too aggressive since it was breaking some legitimate use cases.
  714. // To mitigate the problem we made it so that only containers from a different platform are
  715. // cleared, but the side-effect was that people started depending on the overly-aggressive
  716. // logic to clean up their tests for them. Until we can introduce an overlay-specific testing
  717. // module which does the cleanup, we try to detect that we're in a test environment and we
  718. // always clear the container. See #17006.
  719. // TODO(crisbeto): remove the test environment check once we have an overlay testing module.
  720. if (_isTestEnvironment()) {
  721. container.setAttribute('platform', 'test');
  722. }
  723. else if (!this._platform.isBrowser) {
  724. container.setAttribute('platform', 'server');
  725. }
  726. this._document.body.appendChild(container);
  727. this._containerElement = container;
  728. }
  729. /** Loads the structural styles necessary for the overlay to work. */
  730. _loadStyles() {
  731. this._styleLoader.load(_CdkOverlayStyleLoader);
  732. }
  733. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
  734. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayContainer, providedIn: 'root' });
  735. }
  736. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayContainer, decorators: [{
  737. type: Injectable,
  738. args: [{ providedIn: 'root' }]
  739. }], ctorParameters: () => [] });
  740. /** Encapsulates the logic for attaching and detaching a backdrop. */
  741. class BackdropRef {
  742. _renderer;
  743. _ngZone;
  744. element;
  745. _cleanupClick;
  746. _cleanupTransitionEnd;
  747. _fallbackTimeout;
  748. constructor(document, _renderer, _ngZone, onClick) {
  749. this._renderer = _renderer;
  750. this._ngZone = _ngZone;
  751. this.element = document.createElement('div');
  752. this.element.classList.add('cdk-overlay-backdrop');
  753. this._cleanupClick = _renderer.listen(this.element, 'click', onClick);
  754. }
  755. detach() {
  756. this._ngZone.runOutsideAngular(() => {
  757. const element = this.element;
  758. clearTimeout(this._fallbackTimeout);
  759. this._cleanupTransitionEnd?.();
  760. this._cleanupTransitionEnd = this._renderer.listen(element, 'transitionend', this.dispose);
  761. this._fallbackTimeout = setTimeout(this.dispose, 500);
  762. // If the backdrop doesn't have a transition, the `transitionend` event won't fire.
  763. // In this case we make it unclickable and we try to remove it after a delay.
  764. element.style.pointerEvents = 'none';
  765. element.classList.remove('cdk-overlay-backdrop-showing');
  766. });
  767. }
  768. dispose = () => {
  769. clearTimeout(this._fallbackTimeout);
  770. this._cleanupClick?.();
  771. this._cleanupTransitionEnd?.();
  772. this._cleanupClick = this._cleanupTransitionEnd = this._fallbackTimeout = undefined;
  773. this.element.remove();
  774. };
  775. }
  776. /**
  777. * Reference to an overlay that has been created with the Overlay service.
  778. * Used to manipulate or dispose of said overlay.
  779. */
  780. class OverlayRef {
  781. _portalOutlet;
  782. _host;
  783. _pane;
  784. _config;
  785. _ngZone;
  786. _keyboardDispatcher;
  787. _document;
  788. _location;
  789. _outsideClickDispatcher;
  790. _animationsDisabled;
  791. _injector;
  792. _renderer;
  793. _backdropClick = new Subject();
  794. _attachments = new Subject();
  795. _detachments = new Subject();
  796. _positionStrategy;
  797. _scrollStrategy;
  798. _locationChanges = Subscription.EMPTY;
  799. _backdropRef = null;
  800. /**
  801. * Reference to the parent of the `_host` at the time it was detached. Used to restore
  802. * the `_host` to its original position in the DOM when it gets re-attached.
  803. */
  804. _previousHostParent;
  805. /** Stream of keydown events dispatched to this overlay. */
  806. _keydownEvents = new Subject();
  807. /** Stream of mouse outside events dispatched to this overlay. */
  808. _outsidePointerEvents = new Subject();
  809. _renders = new Subject();
  810. _afterRenderRef;
  811. /** Reference to the currently-running `afterNextRender` call. */
  812. _afterNextRenderRef;
  813. constructor(_portalOutlet, _host, _pane, _config, _ngZone, _keyboardDispatcher, _document, _location, _outsideClickDispatcher, _animationsDisabled = false, _injector, _renderer) {
  814. this._portalOutlet = _portalOutlet;
  815. this._host = _host;
  816. this._pane = _pane;
  817. this._config = _config;
  818. this._ngZone = _ngZone;
  819. this._keyboardDispatcher = _keyboardDispatcher;
  820. this._document = _document;
  821. this._location = _location;
  822. this._outsideClickDispatcher = _outsideClickDispatcher;
  823. this._animationsDisabled = _animationsDisabled;
  824. this._injector = _injector;
  825. this._renderer = _renderer;
  826. if (_config.scrollStrategy) {
  827. this._scrollStrategy = _config.scrollStrategy;
  828. this._scrollStrategy.attach(this);
  829. }
  830. this._positionStrategy = _config.positionStrategy;
  831. // Users could open the overlay from an `effect`, in which case we need to
  832. // run the `afterRender` as `untracked`. We don't recommend that users do
  833. // this, but we also don't want to break users who are doing it.
  834. this._afterRenderRef = untracked(() => afterRender(() => {
  835. this._renders.next();
  836. }, { injector: this._injector }));
  837. }
  838. /** The overlay's HTML element */
  839. get overlayElement() {
  840. return this._pane;
  841. }
  842. /** The overlay's backdrop HTML element. */
  843. get backdropElement() {
  844. return this._backdropRef?.element || null;
  845. }
  846. /**
  847. * Wrapper around the panel element. Can be used for advanced
  848. * positioning where a wrapper with specific styling is
  849. * required around the overlay pane.
  850. */
  851. get hostElement() {
  852. return this._host;
  853. }
  854. /**
  855. * Attaches content, given via a Portal, to the overlay.
  856. * If the overlay is configured to have a backdrop, it will be created.
  857. *
  858. * @param portal Portal instance to which to attach the overlay.
  859. * @returns The portal attachment result.
  860. */
  861. attach(portal) {
  862. // Insert the host into the DOM before attaching the portal, otherwise
  863. // the animations module will skip animations on repeat attachments.
  864. if (!this._host.parentElement && this._previousHostParent) {
  865. this._previousHostParent.appendChild(this._host);
  866. }
  867. const attachResult = this._portalOutlet.attach(portal);
  868. if (this._positionStrategy) {
  869. this._positionStrategy.attach(this);
  870. }
  871. this._updateStackingOrder();
  872. this._updateElementSize();
  873. this._updateElementDirection();
  874. if (this._scrollStrategy) {
  875. this._scrollStrategy.enable();
  876. }
  877. // We need to clean this up ourselves, because we're passing in an
  878. // `EnvironmentInjector` below which won't ever be destroyed.
  879. // Otherwise it causes some callbacks to be retained (see #29696).
  880. this._afterNextRenderRef?.destroy();
  881. // Update the position once the overlay is fully rendered before attempting to position it,
  882. // as the position may depend on the size of the rendered content.
  883. this._afterNextRenderRef = afterNextRender(() => {
  884. // The overlay could've been detached before the callback executed.
  885. if (this.hasAttached()) {
  886. this.updatePosition();
  887. }
  888. }, { injector: this._injector });
  889. // Enable pointer events for the overlay pane element.
  890. this._togglePointerEvents(true);
  891. if (this._config.hasBackdrop) {
  892. this._attachBackdrop();
  893. }
  894. if (this._config.panelClass) {
  895. this._toggleClasses(this._pane, this._config.panelClass, true);
  896. }
  897. // Only emit the `attachments` event once all other setup is done.
  898. this._attachments.next();
  899. // Track this overlay by the keyboard dispatcher
  900. this._keyboardDispatcher.add(this);
  901. if (this._config.disposeOnNavigation) {
  902. this._locationChanges = this._location.subscribe(() => this.dispose());
  903. }
  904. this._outsideClickDispatcher.add(this);
  905. // TODO(crisbeto): the null check is here, because the portal outlet returns `any`.
  906. // We should be guaranteed for the result to be `ComponentRef | EmbeddedViewRef`, but
  907. // `instanceof EmbeddedViewRef` doesn't appear to work at the moment.
  908. if (typeof attachResult?.onDestroy === 'function') {
  909. // In most cases we control the portal and we know when it is being detached so that
  910. // we can finish the disposal process. The exception is if the user passes in a custom
  911. // `ViewContainerRef` that isn't destroyed through the overlay API. Note that we use
  912. // `detach` here instead of `dispose`, because we don't know if the user intends to
  913. // reattach the overlay at a later point. It also has the advantage of waiting for animations.
  914. attachResult.onDestroy(() => {
  915. if (this.hasAttached()) {
  916. // We have to delay the `detach` call, because detaching immediately prevents
  917. // other destroy hooks from running. This is likely a framework bug similar to
  918. // https://github.com/angular/angular/issues/46119
  919. this._ngZone.runOutsideAngular(() => Promise.resolve().then(() => this.detach()));
  920. }
  921. });
  922. }
  923. return attachResult;
  924. }
  925. /**
  926. * Detaches an overlay from a portal.
  927. * @returns The portal detachment result.
  928. */
  929. detach() {
  930. if (!this.hasAttached()) {
  931. return;
  932. }
  933. this.detachBackdrop();
  934. // When the overlay is detached, the pane element should disable pointer events.
  935. // This is necessary because otherwise the pane element will cover the page and disable
  936. // pointer events therefore. Depends on the position strategy and the applied pane boundaries.
  937. this._togglePointerEvents(false);
  938. if (this._positionStrategy && this._positionStrategy.detach) {
  939. this._positionStrategy.detach();
  940. }
  941. if (this._scrollStrategy) {
  942. this._scrollStrategy.disable();
  943. }
  944. const detachmentResult = this._portalOutlet.detach();
  945. // Only emit after everything is detached.
  946. this._detachments.next();
  947. // Remove this overlay from keyboard dispatcher tracking.
  948. this._keyboardDispatcher.remove(this);
  949. // Keeping the host element in the DOM can cause scroll jank, because it still gets
  950. // rendered, even though it's transparent and unclickable which is why we remove it.
  951. this._detachContentWhenEmpty();
  952. this._locationChanges.unsubscribe();
  953. this._outsideClickDispatcher.remove(this);
  954. return detachmentResult;
  955. }
  956. /** Cleans up the overlay from the DOM. */
  957. dispose() {
  958. const isAttached = this.hasAttached();
  959. if (this._positionStrategy) {
  960. this._positionStrategy.dispose();
  961. }
  962. this._disposeScrollStrategy();
  963. this._backdropRef?.dispose();
  964. this._locationChanges.unsubscribe();
  965. this._keyboardDispatcher.remove(this);
  966. this._portalOutlet.dispose();
  967. this._attachments.complete();
  968. this._backdropClick.complete();
  969. this._keydownEvents.complete();
  970. this._outsidePointerEvents.complete();
  971. this._outsideClickDispatcher.remove(this);
  972. this._host?.remove();
  973. this._afterNextRenderRef?.destroy();
  974. this._previousHostParent = this._pane = this._host = this._backdropRef = null;
  975. if (isAttached) {
  976. this._detachments.next();
  977. }
  978. this._detachments.complete();
  979. this._afterRenderRef.destroy();
  980. this._renders.complete();
  981. }
  982. /** Whether the overlay has attached content. */
  983. hasAttached() {
  984. return this._portalOutlet.hasAttached();
  985. }
  986. /** Gets an observable that emits when the backdrop has been clicked. */
  987. backdropClick() {
  988. return this._backdropClick;
  989. }
  990. /** Gets an observable that emits when the overlay has been attached. */
  991. attachments() {
  992. return this._attachments;
  993. }
  994. /** Gets an observable that emits when the overlay has been detached. */
  995. detachments() {
  996. return this._detachments;
  997. }
  998. /** Gets an observable of keydown events targeted to this overlay. */
  999. keydownEvents() {
  1000. return this._keydownEvents;
  1001. }
  1002. /** Gets an observable of pointer events targeted outside this overlay. */
  1003. outsidePointerEvents() {
  1004. return this._outsidePointerEvents;
  1005. }
  1006. /** Gets the current overlay configuration, which is immutable. */
  1007. getConfig() {
  1008. return this._config;
  1009. }
  1010. /** Updates the position of the overlay based on the position strategy. */
  1011. updatePosition() {
  1012. if (this._positionStrategy) {
  1013. this._positionStrategy.apply();
  1014. }
  1015. }
  1016. /** Switches to a new position strategy and updates the overlay position. */
  1017. updatePositionStrategy(strategy) {
  1018. if (strategy === this._positionStrategy) {
  1019. return;
  1020. }
  1021. if (this._positionStrategy) {
  1022. this._positionStrategy.dispose();
  1023. }
  1024. this._positionStrategy = strategy;
  1025. if (this.hasAttached()) {
  1026. strategy.attach(this);
  1027. this.updatePosition();
  1028. }
  1029. }
  1030. /** Update the size properties of the overlay. */
  1031. updateSize(sizeConfig) {
  1032. this._config = { ...this._config, ...sizeConfig };
  1033. this._updateElementSize();
  1034. }
  1035. /** Sets the LTR/RTL direction for the overlay. */
  1036. setDirection(dir) {
  1037. this._config = { ...this._config, direction: dir };
  1038. this._updateElementDirection();
  1039. }
  1040. /** Add a CSS class or an array of classes to the overlay pane. */
  1041. addPanelClass(classes) {
  1042. if (this._pane) {
  1043. this._toggleClasses(this._pane, classes, true);
  1044. }
  1045. }
  1046. /** Remove a CSS class or an array of classes from the overlay pane. */
  1047. removePanelClass(classes) {
  1048. if (this._pane) {
  1049. this._toggleClasses(this._pane, classes, false);
  1050. }
  1051. }
  1052. /**
  1053. * Returns the layout direction of the overlay panel.
  1054. */
  1055. getDirection() {
  1056. const direction = this._config.direction;
  1057. if (!direction) {
  1058. return 'ltr';
  1059. }
  1060. return typeof direction === 'string' ? direction : direction.value;
  1061. }
  1062. /** Switches to a new scroll strategy. */
  1063. updateScrollStrategy(strategy) {
  1064. if (strategy === this._scrollStrategy) {
  1065. return;
  1066. }
  1067. this._disposeScrollStrategy();
  1068. this._scrollStrategy = strategy;
  1069. if (this.hasAttached()) {
  1070. strategy.attach(this);
  1071. strategy.enable();
  1072. }
  1073. }
  1074. /** Updates the text direction of the overlay panel. */
  1075. _updateElementDirection() {
  1076. this._host.setAttribute('dir', this.getDirection());
  1077. }
  1078. /** Updates the size of the overlay element based on the overlay config. */
  1079. _updateElementSize() {
  1080. if (!this._pane) {
  1081. return;
  1082. }
  1083. const style = this._pane.style;
  1084. style.width = coerceCssPixelValue(this._config.width);
  1085. style.height = coerceCssPixelValue(this._config.height);
  1086. style.minWidth = coerceCssPixelValue(this._config.minWidth);
  1087. style.minHeight = coerceCssPixelValue(this._config.minHeight);
  1088. style.maxWidth = coerceCssPixelValue(this._config.maxWidth);
  1089. style.maxHeight = coerceCssPixelValue(this._config.maxHeight);
  1090. }
  1091. /** Toggles the pointer events for the overlay pane element. */
  1092. _togglePointerEvents(enablePointer) {
  1093. this._pane.style.pointerEvents = enablePointer ? '' : 'none';
  1094. }
  1095. /** Attaches a backdrop for this overlay. */
  1096. _attachBackdrop() {
  1097. const showingClass = 'cdk-overlay-backdrop-showing';
  1098. this._backdropRef?.dispose();
  1099. this._backdropRef = new BackdropRef(this._document, this._renderer, this._ngZone, event => {
  1100. this._backdropClick.next(event);
  1101. });
  1102. if (this._animationsDisabled) {
  1103. this._backdropRef.element.classList.add('cdk-overlay-backdrop-noop-animation');
  1104. }
  1105. if (this._config.backdropClass) {
  1106. this._toggleClasses(this._backdropRef.element, this._config.backdropClass, true);
  1107. }
  1108. // Insert the backdrop before the pane in the DOM order,
  1109. // in order to handle stacked overlays properly.
  1110. this._host.parentElement.insertBefore(this._backdropRef.element, this._host);
  1111. // Add class to fade-in the backdrop after one frame.
  1112. if (!this._animationsDisabled && typeof requestAnimationFrame !== 'undefined') {
  1113. this._ngZone.runOutsideAngular(() => {
  1114. requestAnimationFrame(() => this._backdropRef?.element.classList.add(showingClass));
  1115. });
  1116. }
  1117. else {
  1118. this._backdropRef.element.classList.add(showingClass);
  1119. }
  1120. }
  1121. /**
  1122. * Updates the stacking order of the element, moving it to the top if necessary.
  1123. * This is required in cases where one overlay was detached, while another one,
  1124. * that should be behind it, was destroyed. The next time both of them are opened,
  1125. * the stacking will be wrong, because the detached element's pane will still be
  1126. * in its original DOM position.
  1127. */
  1128. _updateStackingOrder() {
  1129. if (this._host.nextSibling) {
  1130. this._host.parentNode.appendChild(this._host);
  1131. }
  1132. }
  1133. /** Detaches the backdrop (if any) associated with the overlay. */
  1134. detachBackdrop() {
  1135. if (this._animationsDisabled) {
  1136. this._backdropRef?.dispose();
  1137. this._backdropRef = null;
  1138. }
  1139. else {
  1140. this._backdropRef?.detach();
  1141. }
  1142. }
  1143. /** Toggles a single CSS class or an array of classes on an element. */
  1144. _toggleClasses(element, cssClasses, isAdd) {
  1145. const classes = coerceArray(cssClasses || []).filter(c => !!c);
  1146. if (classes.length) {
  1147. isAdd ? element.classList.add(...classes) : element.classList.remove(...classes);
  1148. }
  1149. }
  1150. /** Detaches the overlay content next time the zone stabilizes. */
  1151. _detachContentWhenEmpty() {
  1152. // Normally we wouldn't have to explicitly run this outside the `NgZone`, however
  1153. // if the consumer is using `zone-patch-rxjs`, the `Subscription.unsubscribe` call will
  1154. // be patched to run inside the zone, which will throw us into an infinite loop.
  1155. this._ngZone.runOutsideAngular(() => {
  1156. // We can't remove the host here immediately, because the overlay pane's content
  1157. // might still be animating. This stream helps us avoid interrupting the animation
  1158. // by waiting for the pane to become empty.
  1159. const subscription = this._renders
  1160. .pipe(takeUntil(merge(this._attachments, this._detachments)))
  1161. .subscribe(() => {
  1162. // Needs a couple of checks for the pane and host, because
  1163. // they may have been removed by the time the zone stabilizes.
  1164. if (!this._pane || !this._host || this._pane.children.length === 0) {
  1165. if (this._pane && this._config.panelClass) {
  1166. this._toggleClasses(this._pane, this._config.panelClass, false);
  1167. }
  1168. if (this._host && this._host.parentElement) {
  1169. this._previousHostParent = this._host.parentElement;
  1170. this._host.remove();
  1171. }
  1172. subscription.unsubscribe();
  1173. }
  1174. });
  1175. });
  1176. }
  1177. /** Disposes of a scroll strategy. */
  1178. _disposeScrollStrategy() {
  1179. const scrollStrategy = this._scrollStrategy;
  1180. scrollStrategy?.disable();
  1181. scrollStrategy?.detach?.();
  1182. }
  1183. }
  1184. // TODO: refactor clipping detection into a separate thing (part of scrolling module)
  1185. // TODO: doesn't handle both flexible width and height when it has to scroll along both axis.
  1186. /** Class to be added to the overlay bounding box. */
  1187. const boundingBoxClass = 'cdk-overlay-connected-position-bounding-box';
  1188. /** Regex used to split a string on its CSS units. */
  1189. const cssUnitPattern = /([A-Za-z%]+)$/;
  1190. /**
  1191. * A strategy for positioning overlays. Using this strategy, an overlay is given an
  1192. * implicit position relative some origin element. The relative position is defined in terms of
  1193. * a point on the origin element that is connected to a point on the overlay element. For example,
  1194. * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner
  1195. * of the overlay.
  1196. */
  1197. class FlexibleConnectedPositionStrategy {
  1198. _viewportRuler;
  1199. _document;
  1200. _platform;
  1201. _overlayContainer;
  1202. /** The overlay to which this strategy is attached. */
  1203. _overlayRef;
  1204. /** Whether we're performing the very first positioning of the overlay. */
  1205. _isInitialRender;
  1206. /** Last size used for the bounding box. Used to avoid resizing the overlay after open. */
  1207. _lastBoundingBoxSize = { width: 0, height: 0 };
  1208. /** Whether the overlay was pushed in a previous positioning. */
  1209. _isPushed = false;
  1210. /** Whether the overlay can be pushed on-screen on the initial open. */
  1211. _canPush = true;
  1212. /** Whether the overlay can grow via flexible width/height after the initial open. */
  1213. _growAfterOpen = false;
  1214. /** Whether the overlay's width and height can be constrained to fit within the viewport. */
  1215. _hasFlexibleDimensions = true;
  1216. /** Whether the overlay position is locked. */
  1217. _positionLocked = false;
  1218. /** Cached origin dimensions */
  1219. _originRect;
  1220. /** Cached overlay dimensions */
  1221. _overlayRect;
  1222. /** Cached viewport dimensions */
  1223. _viewportRect;
  1224. /** Cached container dimensions */
  1225. _containerRect;
  1226. /** Amount of space that must be maintained between the overlay and the edge of the viewport. */
  1227. _viewportMargin = 0;
  1228. /** The Scrollable containers used to check scrollable view properties on position change. */
  1229. _scrollables = [];
  1230. /** Ordered list of preferred positions, from most to least desirable. */
  1231. _preferredPositions = [];
  1232. /** The origin element against which the overlay will be positioned. */
  1233. _origin;
  1234. /** The overlay pane element. */
  1235. _pane;
  1236. /** Whether the strategy has been disposed of already. */
  1237. _isDisposed;
  1238. /**
  1239. * Parent element for the overlay panel used to constrain the overlay panel's size to fit
  1240. * within the viewport.
  1241. */
  1242. _boundingBox;
  1243. /** The last position to have been calculated as the best fit position. */
  1244. _lastPosition;
  1245. /** The last calculated scroll visibility. Only tracked */
  1246. _lastScrollVisibility;
  1247. /** Subject that emits whenever the position changes. */
  1248. _positionChanges = new Subject();
  1249. /** Subscription to viewport size changes. */
  1250. _resizeSubscription = Subscription.EMPTY;
  1251. /** Default offset for the overlay along the x axis. */
  1252. _offsetX = 0;
  1253. /** Default offset for the overlay along the y axis. */
  1254. _offsetY = 0;
  1255. /** Selector to be used when finding the elements on which to set the transform origin. */
  1256. _transformOriginSelector;
  1257. /** Keeps track of the CSS classes that the position strategy has applied on the overlay panel. */
  1258. _appliedPanelClasses = [];
  1259. /** Amount by which the overlay was pushed in each axis during the last time it was positioned. */
  1260. _previousPushAmount;
  1261. /** Observable sequence of position changes. */
  1262. positionChanges = this._positionChanges;
  1263. /** Ordered list of preferred positions, from most to least desirable. */
  1264. get positions() {
  1265. return this._preferredPositions;
  1266. }
  1267. constructor(connectedTo, _viewportRuler, _document, _platform, _overlayContainer) {
  1268. this._viewportRuler = _viewportRuler;
  1269. this._document = _document;
  1270. this._platform = _platform;
  1271. this._overlayContainer = _overlayContainer;
  1272. this.setOrigin(connectedTo);
  1273. }
  1274. /** Attaches this position strategy to an overlay. */
  1275. attach(overlayRef) {
  1276. if (this._overlayRef &&
  1277. overlayRef !== this._overlayRef &&
  1278. (typeof ngDevMode === 'undefined' || ngDevMode)) {
  1279. throw Error('This position strategy is already attached to an overlay');
  1280. }
  1281. this._validatePositions();
  1282. overlayRef.hostElement.classList.add(boundingBoxClass);
  1283. this._overlayRef = overlayRef;
  1284. this._boundingBox = overlayRef.hostElement;
  1285. this._pane = overlayRef.overlayElement;
  1286. this._isDisposed = false;
  1287. this._isInitialRender = true;
  1288. this._lastPosition = null;
  1289. this._resizeSubscription.unsubscribe();
  1290. this._resizeSubscription = this._viewportRuler.change().subscribe(() => {
  1291. // When the window is resized, we want to trigger the next reposition as if it
  1292. // was an initial render, in order for the strategy to pick a new optimal position,
  1293. // otherwise position locking will cause it to stay at the old one.
  1294. this._isInitialRender = true;
  1295. this.apply();
  1296. });
  1297. }
  1298. /**
  1299. * Updates the position of the overlay element, using whichever preferred position relative
  1300. * to the origin best fits on-screen.
  1301. *
  1302. * The selection of a position goes as follows:
  1303. * - If any positions fit completely within the viewport as-is,
  1304. * choose the first position that does so.
  1305. * - If flexible dimensions are enabled and at least one satisfies the given minimum width/height,
  1306. * choose the position with the greatest available size modified by the positions' weight.
  1307. * - If pushing is enabled, take the position that went off-screen the least and push it
  1308. * on-screen.
  1309. * - If none of the previous criteria were met, use the position that goes off-screen the least.
  1310. * @docs-private
  1311. */
  1312. apply() {
  1313. // We shouldn't do anything if the strategy was disposed or we're on the server.
  1314. if (this._isDisposed || !this._platform.isBrowser) {
  1315. return;
  1316. }
  1317. // If the position has been applied already (e.g. when the overlay was opened) and the
  1318. // consumer opted into locking in the position, re-use the old position, in order to
  1319. // prevent the overlay from jumping around.
  1320. if (!this._isInitialRender && this._positionLocked && this._lastPosition) {
  1321. this.reapplyLastPosition();
  1322. return;
  1323. }
  1324. this._clearPanelClasses();
  1325. this._resetOverlayElementStyles();
  1326. this._resetBoundingBoxStyles();
  1327. // We need the bounding rects for the origin, the overlay and the container to determine how to position
  1328. // the overlay relative to the origin.
  1329. // We use the viewport rect to determine whether a position would go off-screen.
  1330. this._viewportRect = this._getNarrowedViewportRect();
  1331. this._originRect = this._getOriginRect();
  1332. this._overlayRect = this._pane.getBoundingClientRect();
  1333. this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();
  1334. const originRect = this._originRect;
  1335. const overlayRect = this._overlayRect;
  1336. const viewportRect = this._viewportRect;
  1337. const containerRect = this._containerRect;
  1338. // Positions where the overlay will fit with flexible dimensions.
  1339. const flexibleFits = [];
  1340. // Fallback if none of the preferred positions fit within the viewport.
  1341. let fallback;
  1342. // Go through each of the preferred positions looking for a good fit.
  1343. // If a good fit is found, it will be applied immediately.
  1344. for (let pos of this._preferredPositions) {
  1345. // Get the exact (x, y) coordinate for the point-of-origin on the origin element.
  1346. let originPoint = this._getOriginPoint(originRect, containerRect, pos);
  1347. // From that point-of-origin, get the exact (x, y) coordinate for the top-left corner of the
  1348. // overlay in this position. We use the top-left corner for calculations and later translate
  1349. // this into an appropriate (top, left, bottom, right) style.
  1350. let overlayPoint = this._getOverlayPoint(originPoint, overlayRect, pos);
  1351. // Calculate how well the overlay would fit into the viewport with this point.
  1352. let overlayFit = this._getOverlayFit(overlayPoint, overlayRect, viewportRect, pos);
  1353. // If the overlay, without any further work, fits into the viewport, use this position.
  1354. if (overlayFit.isCompletelyWithinViewport) {
  1355. this._isPushed = false;
  1356. this._applyPosition(pos, originPoint);
  1357. return;
  1358. }
  1359. // If the overlay has flexible dimensions, we can use this position
  1360. // so long as there's enough space for the minimum dimensions.
  1361. if (this._canFitWithFlexibleDimensions(overlayFit, overlayPoint, viewportRect)) {
  1362. // Save positions where the overlay will fit with flexible dimensions. We will use these
  1363. // if none of the positions fit *without* flexible dimensions.
  1364. flexibleFits.push({
  1365. position: pos,
  1366. origin: originPoint,
  1367. overlayRect,
  1368. boundingBoxRect: this._calculateBoundingBoxRect(originPoint, pos),
  1369. });
  1370. continue;
  1371. }
  1372. // If the current preferred position does not fit on the screen, remember the position
  1373. // if it has more visible area on-screen than we've seen and move onto the next preferred
  1374. // position.
  1375. if (!fallback || fallback.overlayFit.visibleArea < overlayFit.visibleArea) {
  1376. fallback = { overlayFit, overlayPoint, originPoint, position: pos, overlayRect };
  1377. }
  1378. }
  1379. // If there are any positions where the overlay would fit with flexible dimensions, choose the
  1380. // one that has the greatest area available modified by the position's weight
  1381. if (flexibleFits.length) {
  1382. let bestFit = null;
  1383. let bestScore = -1;
  1384. for (const fit of flexibleFits) {
  1385. const score = fit.boundingBoxRect.width * fit.boundingBoxRect.height * (fit.position.weight || 1);
  1386. if (score > bestScore) {
  1387. bestScore = score;
  1388. bestFit = fit;
  1389. }
  1390. }
  1391. this._isPushed = false;
  1392. this._applyPosition(bestFit.position, bestFit.origin);
  1393. return;
  1394. }
  1395. // When none of the preferred positions fit within the viewport, take the position
  1396. // that went off-screen the least and attempt to push it on-screen.
  1397. if (this._canPush) {
  1398. // TODO(jelbourn): after pushing, the opening "direction" of the overlay might not make sense.
  1399. this._isPushed = true;
  1400. this._applyPosition(fallback.position, fallback.originPoint);
  1401. return;
  1402. }
  1403. // All options for getting the overlay within the viewport have been exhausted, so go with the
  1404. // position that went off-screen the least.
  1405. this._applyPosition(fallback.position, fallback.originPoint);
  1406. }
  1407. detach() {
  1408. this._clearPanelClasses();
  1409. this._lastPosition = null;
  1410. this._previousPushAmount = null;
  1411. this._resizeSubscription.unsubscribe();
  1412. }
  1413. /** Cleanup after the element gets destroyed. */
  1414. dispose() {
  1415. if (this._isDisposed) {
  1416. return;
  1417. }
  1418. // We can't use `_resetBoundingBoxStyles` here, because it resets
  1419. // some properties to zero, rather than removing them.
  1420. if (this._boundingBox) {
  1421. extendStyles(this._boundingBox.style, {
  1422. top: '',
  1423. left: '',
  1424. right: '',
  1425. bottom: '',
  1426. height: '',
  1427. width: '',
  1428. alignItems: '',
  1429. justifyContent: '',
  1430. });
  1431. }
  1432. if (this._pane) {
  1433. this._resetOverlayElementStyles();
  1434. }
  1435. if (this._overlayRef) {
  1436. this._overlayRef.hostElement.classList.remove(boundingBoxClass);
  1437. }
  1438. this.detach();
  1439. this._positionChanges.complete();
  1440. this._overlayRef = this._boundingBox = null;
  1441. this._isDisposed = true;
  1442. }
  1443. /**
  1444. * This re-aligns the overlay element with the trigger in its last calculated position,
  1445. * even if a position higher in the "preferred positions" list would now fit. This
  1446. * allows one to re-align the panel without changing the orientation of the panel.
  1447. */
  1448. reapplyLastPosition() {
  1449. if (this._isDisposed || !this._platform.isBrowser) {
  1450. return;
  1451. }
  1452. const lastPosition = this._lastPosition;
  1453. if (lastPosition) {
  1454. this._originRect = this._getOriginRect();
  1455. this._overlayRect = this._pane.getBoundingClientRect();
  1456. this._viewportRect = this._getNarrowedViewportRect();
  1457. this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();
  1458. const originPoint = this._getOriginPoint(this._originRect, this._containerRect, lastPosition);
  1459. this._applyPosition(lastPosition, originPoint);
  1460. }
  1461. else {
  1462. this.apply();
  1463. }
  1464. }
  1465. /**
  1466. * Sets the list of Scrollable containers that host the origin element so that
  1467. * on reposition we can evaluate if it or the overlay has been clipped or outside view. Every
  1468. * Scrollable must be an ancestor element of the strategy's origin element.
  1469. */
  1470. withScrollableContainers(scrollables) {
  1471. this._scrollables = scrollables;
  1472. return this;
  1473. }
  1474. /**
  1475. * Adds new preferred positions.
  1476. * @param positions List of positions options for this overlay.
  1477. */
  1478. withPositions(positions) {
  1479. this._preferredPositions = positions;
  1480. // If the last calculated position object isn't part of the positions anymore, clear
  1481. // it in order to avoid it being picked up if the consumer tries to re-apply.
  1482. if (positions.indexOf(this._lastPosition) === -1) {
  1483. this._lastPosition = null;
  1484. }
  1485. this._validatePositions();
  1486. return this;
  1487. }
  1488. /**
  1489. * Sets a minimum distance the overlay may be positioned to the edge of the viewport.
  1490. * @param margin Required margin between the overlay and the viewport edge in pixels.
  1491. */
  1492. withViewportMargin(margin) {
  1493. this._viewportMargin = margin;
  1494. return this;
  1495. }
  1496. /** Sets whether the overlay's width and height can be constrained to fit within the viewport. */
  1497. withFlexibleDimensions(flexibleDimensions = true) {
  1498. this._hasFlexibleDimensions = flexibleDimensions;
  1499. return this;
  1500. }
  1501. /** Sets whether the overlay can grow after the initial open via flexible width/height. */
  1502. withGrowAfterOpen(growAfterOpen = true) {
  1503. this._growAfterOpen = growAfterOpen;
  1504. return this;
  1505. }
  1506. /** Sets whether the overlay can be pushed on-screen if none of the provided positions fit. */
  1507. withPush(canPush = true) {
  1508. this._canPush = canPush;
  1509. return this;
  1510. }
  1511. /**
  1512. * Sets whether the overlay's position should be locked in after it is positioned
  1513. * initially. When an overlay is locked in, it won't attempt to reposition itself
  1514. * when the position is re-applied (e.g. when the user scrolls away).
  1515. * @param isLocked Whether the overlay should locked in.
  1516. */
  1517. withLockedPosition(isLocked = true) {
  1518. this._positionLocked = isLocked;
  1519. return this;
  1520. }
  1521. /**
  1522. * Sets the origin, relative to which to position the overlay.
  1523. * Using an element origin is useful for building components that need to be positioned
  1524. * relatively to a trigger (e.g. dropdown menus or tooltips), whereas using a point can be
  1525. * used for cases like contextual menus which open relative to the user's pointer.
  1526. * @param origin Reference to the new origin.
  1527. */
  1528. setOrigin(origin) {
  1529. this._origin = origin;
  1530. return this;
  1531. }
  1532. /**
  1533. * Sets the default offset for the overlay's connection point on the x-axis.
  1534. * @param offset New offset in the X axis.
  1535. */
  1536. withDefaultOffsetX(offset) {
  1537. this._offsetX = offset;
  1538. return this;
  1539. }
  1540. /**
  1541. * Sets the default offset for the overlay's connection point on the y-axis.
  1542. * @param offset New offset in the Y axis.
  1543. */
  1544. withDefaultOffsetY(offset) {
  1545. this._offsetY = offset;
  1546. return this;
  1547. }
  1548. /**
  1549. * Configures that the position strategy should set a `transform-origin` on some elements
  1550. * inside the overlay, depending on the current position that is being applied. This is
  1551. * useful for the cases where the origin of an animation can change depending on the
  1552. * alignment of the overlay.
  1553. * @param selector CSS selector that will be used to find the target
  1554. * elements onto which to set the transform origin.
  1555. */
  1556. withTransformOriginOn(selector) {
  1557. this._transformOriginSelector = selector;
  1558. return this;
  1559. }
  1560. /**
  1561. * Gets the (x, y) coordinate of a connection point on the origin based on a relative position.
  1562. */
  1563. _getOriginPoint(originRect, containerRect, pos) {
  1564. let x;
  1565. if (pos.originX == 'center') {
  1566. // Note: when centering we should always use the `left`
  1567. // offset, otherwise the position will be wrong in RTL.
  1568. x = originRect.left + originRect.width / 2;
  1569. }
  1570. else {
  1571. const startX = this._isRtl() ? originRect.right : originRect.left;
  1572. const endX = this._isRtl() ? originRect.left : originRect.right;
  1573. x = pos.originX == 'start' ? startX : endX;
  1574. }
  1575. // When zooming in Safari the container rectangle contains negative values for the position
  1576. // and we need to re-add them to the calculated coordinates.
  1577. if (containerRect.left < 0) {
  1578. x -= containerRect.left;
  1579. }
  1580. let y;
  1581. if (pos.originY == 'center') {
  1582. y = originRect.top + originRect.height / 2;
  1583. }
  1584. else {
  1585. y = pos.originY == 'top' ? originRect.top : originRect.bottom;
  1586. }
  1587. // Normally the containerRect's top value would be zero, however when the overlay is attached to an input
  1588. // (e.g. in an autocomplete), mobile browsers will shift everything in order to put the input in the middle
  1589. // of the screen and to make space for the virtual keyboard. We need to account for this offset,
  1590. // otherwise our positioning will be thrown off.
  1591. // Additionally, when zooming in Safari this fixes the vertical position.
  1592. if (containerRect.top < 0) {
  1593. y -= containerRect.top;
  1594. }
  1595. return { x, y };
  1596. }
  1597. /**
  1598. * Gets the (x, y) coordinate of the top-left corner of the overlay given a given position and
  1599. * origin point to which the overlay should be connected.
  1600. */
  1601. _getOverlayPoint(originPoint, overlayRect, pos) {
  1602. // Calculate the (overlayStartX, overlayStartY), the start of the
  1603. // potential overlay position relative to the origin point.
  1604. let overlayStartX;
  1605. if (pos.overlayX == 'center') {
  1606. overlayStartX = -overlayRect.width / 2;
  1607. }
  1608. else if (pos.overlayX === 'start') {
  1609. overlayStartX = this._isRtl() ? -overlayRect.width : 0;
  1610. }
  1611. else {
  1612. overlayStartX = this._isRtl() ? 0 : -overlayRect.width;
  1613. }
  1614. let overlayStartY;
  1615. if (pos.overlayY == 'center') {
  1616. overlayStartY = -overlayRect.height / 2;
  1617. }
  1618. else {
  1619. overlayStartY = pos.overlayY == 'top' ? 0 : -overlayRect.height;
  1620. }
  1621. // The (x, y) coordinates of the overlay.
  1622. return {
  1623. x: originPoint.x + overlayStartX,
  1624. y: originPoint.y + overlayStartY,
  1625. };
  1626. }
  1627. /** Gets how well an overlay at the given point will fit within the viewport. */
  1628. _getOverlayFit(point, rawOverlayRect, viewport, position) {
  1629. // Round the overlay rect when comparing against the
  1630. // viewport, because the viewport is always rounded.
  1631. const overlay = getRoundedBoundingClientRect(rawOverlayRect);
  1632. let { x, y } = point;
  1633. let offsetX = this._getOffset(position, 'x');
  1634. let offsetY = this._getOffset(position, 'y');
  1635. // Account for the offsets since they could push the overlay out of the viewport.
  1636. if (offsetX) {
  1637. x += offsetX;
  1638. }
  1639. if (offsetY) {
  1640. y += offsetY;
  1641. }
  1642. // How much the overlay would overflow at this position, on each side.
  1643. let leftOverflow = 0 - x;
  1644. let rightOverflow = x + overlay.width - viewport.width;
  1645. let topOverflow = 0 - y;
  1646. let bottomOverflow = y + overlay.height - viewport.height;
  1647. // Visible parts of the element on each axis.
  1648. let visibleWidth = this._subtractOverflows(overlay.width, leftOverflow, rightOverflow);
  1649. let visibleHeight = this._subtractOverflows(overlay.height, topOverflow, bottomOverflow);
  1650. let visibleArea = visibleWidth * visibleHeight;
  1651. return {
  1652. visibleArea,
  1653. isCompletelyWithinViewport: overlay.width * overlay.height === visibleArea,
  1654. fitsInViewportVertically: visibleHeight === overlay.height,
  1655. fitsInViewportHorizontally: visibleWidth == overlay.width,
  1656. };
  1657. }
  1658. /**
  1659. * Whether the overlay can fit within the viewport when it may resize either its width or height.
  1660. * @param fit How well the overlay fits in the viewport at some position.
  1661. * @param point The (x, y) coordinates of the overlay at some position.
  1662. * @param viewport The geometry of the viewport.
  1663. */
  1664. _canFitWithFlexibleDimensions(fit, point, viewport) {
  1665. if (this._hasFlexibleDimensions) {
  1666. const availableHeight = viewport.bottom - point.y;
  1667. const availableWidth = viewport.right - point.x;
  1668. const minHeight = getPixelValue(this._overlayRef.getConfig().minHeight);
  1669. const minWidth = getPixelValue(this._overlayRef.getConfig().minWidth);
  1670. const verticalFit = fit.fitsInViewportVertically || (minHeight != null && minHeight <= availableHeight);
  1671. const horizontalFit = fit.fitsInViewportHorizontally || (minWidth != null && minWidth <= availableWidth);
  1672. return verticalFit && horizontalFit;
  1673. }
  1674. return false;
  1675. }
  1676. /**
  1677. * Gets the point at which the overlay can be "pushed" on-screen. If the overlay is larger than
  1678. * the viewport, the top-left corner will be pushed on-screen (with overflow occurring on the
  1679. * right and bottom).
  1680. *
  1681. * @param start Starting point from which the overlay is pushed.
  1682. * @param rawOverlayRect Dimensions of the overlay.
  1683. * @param scrollPosition Current viewport scroll position.
  1684. * @returns The point at which to position the overlay after pushing. This is effectively a new
  1685. * originPoint.
  1686. */
  1687. _pushOverlayOnScreen(start, rawOverlayRect, scrollPosition) {
  1688. // If the position is locked and we've pushed the overlay already, reuse the previous push
  1689. // amount, rather than pushing it again. If we were to continue pushing, the element would
  1690. // remain in the viewport, which goes against the expectations when position locking is enabled.
  1691. if (this._previousPushAmount && this._positionLocked) {
  1692. return {
  1693. x: start.x + this._previousPushAmount.x,
  1694. y: start.y + this._previousPushAmount.y,
  1695. };
  1696. }
  1697. // Round the overlay rect when comparing against the
  1698. // viewport, because the viewport is always rounded.
  1699. const overlay = getRoundedBoundingClientRect(rawOverlayRect);
  1700. const viewport = this._viewportRect;
  1701. // Determine how much the overlay goes outside the viewport on each
  1702. // side, which we'll use to decide which direction to push it.
  1703. const overflowRight = Math.max(start.x + overlay.width - viewport.width, 0);
  1704. const overflowBottom = Math.max(start.y + overlay.height - viewport.height, 0);
  1705. const overflowTop = Math.max(viewport.top - scrollPosition.top - start.y, 0);
  1706. const overflowLeft = Math.max(viewport.left - scrollPosition.left - start.x, 0);
  1707. // Amount by which to push the overlay in each axis such that it remains on-screen.
  1708. let pushX = 0;
  1709. let pushY = 0;
  1710. // If the overlay fits completely within the bounds of the viewport, push it from whichever
  1711. // direction is goes off-screen. Otherwise, push the top-left corner such that its in the
  1712. // viewport and allow for the trailing end of the overlay to go out of bounds.
  1713. if (overlay.width <= viewport.width) {
  1714. pushX = overflowLeft || -overflowRight;
  1715. }
  1716. else {
  1717. pushX = start.x < this._viewportMargin ? viewport.left - scrollPosition.left - start.x : 0;
  1718. }
  1719. if (overlay.height <= viewport.height) {
  1720. pushY = overflowTop || -overflowBottom;
  1721. }
  1722. else {
  1723. pushY = start.y < this._viewportMargin ? viewport.top - scrollPosition.top - start.y : 0;
  1724. }
  1725. this._previousPushAmount = { x: pushX, y: pushY };
  1726. return {
  1727. x: start.x + pushX,
  1728. y: start.y + pushY,
  1729. };
  1730. }
  1731. /**
  1732. * Applies a computed position to the overlay and emits a position change.
  1733. * @param position The position preference
  1734. * @param originPoint The point on the origin element where the overlay is connected.
  1735. */
  1736. _applyPosition(position, originPoint) {
  1737. this._setTransformOrigin(position);
  1738. this._setOverlayElementStyles(originPoint, position);
  1739. this._setBoundingBoxStyles(originPoint, position);
  1740. if (position.panelClass) {
  1741. this._addPanelClasses(position.panelClass);
  1742. }
  1743. // Notify that the position has been changed along with its change properties.
  1744. // We only emit if we've got any subscriptions, because the scroll visibility
  1745. // calculations can be somewhat expensive.
  1746. if (this._positionChanges.observers.length) {
  1747. const scrollVisibility = this._getScrollVisibility();
  1748. // We're recalculating on scroll, but we only want to emit if anything
  1749. // changed since downstream code might be hitting the `NgZone`.
  1750. if (position !== this._lastPosition ||
  1751. !this._lastScrollVisibility ||
  1752. !compareScrollVisibility(this._lastScrollVisibility, scrollVisibility)) {
  1753. const changeEvent = new ConnectedOverlayPositionChange(position, scrollVisibility);
  1754. this._positionChanges.next(changeEvent);
  1755. }
  1756. this._lastScrollVisibility = scrollVisibility;
  1757. }
  1758. // Save the last connected position in case the position needs to be re-calculated.
  1759. this._lastPosition = position;
  1760. this._isInitialRender = false;
  1761. }
  1762. /** Sets the transform origin based on the configured selector and the passed-in position. */
  1763. _setTransformOrigin(position) {
  1764. if (!this._transformOriginSelector) {
  1765. return;
  1766. }
  1767. const elements = this._boundingBox.querySelectorAll(this._transformOriginSelector);
  1768. let xOrigin;
  1769. let yOrigin = position.overlayY;
  1770. if (position.overlayX === 'center') {
  1771. xOrigin = 'center';
  1772. }
  1773. else if (this._isRtl()) {
  1774. xOrigin = position.overlayX === 'start' ? 'right' : 'left';
  1775. }
  1776. else {
  1777. xOrigin = position.overlayX === 'start' ? 'left' : 'right';
  1778. }
  1779. for (let i = 0; i < elements.length; i++) {
  1780. elements[i].style.transformOrigin = `${xOrigin} ${yOrigin}`;
  1781. }
  1782. }
  1783. /**
  1784. * Gets the position and size of the overlay's sizing container.
  1785. *
  1786. * This method does no measuring and applies no styles so that we can cheaply compute the
  1787. * bounds for all positions and choose the best fit based on these results.
  1788. */
  1789. _calculateBoundingBoxRect(origin, position) {
  1790. const viewport = this._viewportRect;
  1791. const isRtl = this._isRtl();
  1792. let height, top, bottom;
  1793. if (position.overlayY === 'top') {
  1794. // Overlay is opening "downward" and thus is bound by the bottom viewport edge.
  1795. top = origin.y;
  1796. height = viewport.height - top + this._viewportMargin;
  1797. }
  1798. else if (position.overlayY === 'bottom') {
  1799. // Overlay is opening "upward" and thus is bound by the top viewport edge. We need to add
  1800. // the viewport margin back in, because the viewport rect is narrowed down to remove the
  1801. // margin, whereas the `origin` position is calculated based on its `DOMRect`.
  1802. bottom = viewport.height - origin.y + this._viewportMargin * 2;
  1803. height = viewport.height - bottom + this._viewportMargin;
  1804. }
  1805. else {
  1806. // If neither top nor bottom, it means that the overlay is vertically centered on the
  1807. // origin point. Note that we want the position relative to the viewport, rather than
  1808. // the page, which is why we don't use something like `viewport.bottom - origin.y` and
  1809. // `origin.y - viewport.top`.
  1810. const smallestDistanceToViewportEdge = Math.min(viewport.bottom - origin.y + viewport.top, origin.y);
  1811. const previousHeight = this._lastBoundingBoxSize.height;
  1812. height = smallestDistanceToViewportEdge * 2;
  1813. top = origin.y - smallestDistanceToViewportEdge;
  1814. if (height > previousHeight && !this._isInitialRender && !this._growAfterOpen) {
  1815. top = origin.y - previousHeight / 2;
  1816. }
  1817. }
  1818. // The overlay is opening 'right-ward' (the content flows to the right).
  1819. const isBoundedByRightViewportEdge = (position.overlayX === 'start' && !isRtl) || (position.overlayX === 'end' && isRtl);
  1820. // The overlay is opening 'left-ward' (the content flows to the left).
  1821. const isBoundedByLeftViewportEdge = (position.overlayX === 'end' && !isRtl) || (position.overlayX === 'start' && isRtl);
  1822. let width, left, right;
  1823. if (isBoundedByLeftViewportEdge) {
  1824. right = viewport.width - origin.x + this._viewportMargin * 2;
  1825. width = origin.x - this._viewportMargin;
  1826. }
  1827. else if (isBoundedByRightViewportEdge) {
  1828. left = origin.x;
  1829. width = viewport.right - origin.x;
  1830. }
  1831. else {
  1832. // If neither start nor end, it means that the overlay is horizontally centered on the
  1833. // origin point. Note that we want the position relative to the viewport, rather than
  1834. // the page, which is why we don't use something like `viewport.right - origin.x` and
  1835. // `origin.x - viewport.left`.
  1836. const smallestDistanceToViewportEdge = Math.min(viewport.right - origin.x + viewport.left, origin.x);
  1837. const previousWidth = this._lastBoundingBoxSize.width;
  1838. width = smallestDistanceToViewportEdge * 2;
  1839. left = origin.x - smallestDistanceToViewportEdge;
  1840. if (width > previousWidth && !this._isInitialRender && !this._growAfterOpen) {
  1841. left = origin.x - previousWidth / 2;
  1842. }
  1843. }
  1844. return { top: top, left: left, bottom: bottom, right: right, width, height };
  1845. }
  1846. /**
  1847. * Sets the position and size of the overlay's sizing wrapper. The wrapper is positioned on the
  1848. * origin's connection point and stretches to the bounds of the viewport.
  1849. *
  1850. * @param origin The point on the origin element where the overlay is connected.
  1851. * @param position The position preference
  1852. */
  1853. _setBoundingBoxStyles(origin, position) {
  1854. const boundingBoxRect = this._calculateBoundingBoxRect(origin, position);
  1855. // It's weird if the overlay *grows* while scrolling, so we take the last size into account
  1856. // when applying a new size.
  1857. if (!this._isInitialRender && !this._growAfterOpen) {
  1858. boundingBoxRect.height = Math.min(boundingBoxRect.height, this._lastBoundingBoxSize.height);
  1859. boundingBoxRect.width = Math.min(boundingBoxRect.width, this._lastBoundingBoxSize.width);
  1860. }
  1861. const styles = {};
  1862. if (this._hasExactPosition()) {
  1863. styles.top = styles.left = '0';
  1864. styles.bottom = styles.right = styles.maxHeight = styles.maxWidth = '';
  1865. styles.width = styles.height = '100%';
  1866. }
  1867. else {
  1868. const maxHeight = this._overlayRef.getConfig().maxHeight;
  1869. const maxWidth = this._overlayRef.getConfig().maxWidth;
  1870. styles.height = coerceCssPixelValue(boundingBoxRect.height);
  1871. styles.top = coerceCssPixelValue(boundingBoxRect.top);
  1872. styles.bottom = coerceCssPixelValue(boundingBoxRect.bottom);
  1873. styles.width = coerceCssPixelValue(boundingBoxRect.width);
  1874. styles.left = coerceCssPixelValue(boundingBoxRect.left);
  1875. styles.right = coerceCssPixelValue(boundingBoxRect.right);
  1876. // Push the pane content towards the proper direction.
  1877. if (position.overlayX === 'center') {
  1878. styles.alignItems = 'center';
  1879. }
  1880. else {
  1881. styles.alignItems = position.overlayX === 'end' ? 'flex-end' : 'flex-start';
  1882. }
  1883. if (position.overlayY === 'center') {
  1884. styles.justifyContent = 'center';
  1885. }
  1886. else {
  1887. styles.justifyContent = position.overlayY === 'bottom' ? 'flex-end' : 'flex-start';
  1888. }
  1889. if (maxHeight) {
  1890. styles.maxHeight = coerceCssPixelValue(maxHeight);
  1891. }
  1892. if (maxWidth) {
  1893. styles.maxWidth = coerceCssPixelValue(maxWidth);
  1894. }
  1895. }
  1896. this._lastBoundingBoxSize = boundingBoxRect;
  1897. extendStyles(this._boundingBox.style, styles);
  1898. }
  1899. /** Resets the styles for the bounding box so that a new positioning can be computed. */
  1900. _resetBoundingBoxStyles() {
  1901. extendStyles(this._boundingBox.style, {
  1902. top: '0',
  1903. left: '0',
  1904. right: '0',
  1905. bottom: '0',
  1906. height: '',
  1907. width: '',
  1908. alignItems: '',
  1909. justifyContent: '',
  1910. });
  1911. }
  1912. /** Resets the styles for the overlay pane so that a new positioning can be computed. */
  1913. _resetOverlayElementStyles() {
  1914. extendStyles(this._pane.style, {
  1915. top: '',
  1916. left: '',
  1917. bottom: '',
  1918. right: '',
  1919. position: '',
  1920. transform: '',
  1921. });
  1922. }
  1923. /** Sets positioning styles to the overlay element. */
  1924. _setOverlayElementStyles(originPoint, position) {
  1925. const styles = {};
  1926. const hasExactPosition = this._hasExactPosition();
  1927. const hasFlexibleDimensions = this._hasFlexibleDimensions;
  1928. const config = this._overlayRef.getConfig();
  1929. if (hasExactPosition) {
  1930. const scrollPosition = this._viewportRuler.getViewportScrollPosition();
  1931. extendStyles(styles, this._getExactOverlayY(position, originPoint, scrollPosition));
  1932. extendStyles(styles, this._getExactOverlayX(position, originPoint, scrollPosition));
  1933. }
  1934. else {
  1935. styles.position = 'static';
  1936. }
  1937. // Use a transform to apply the offsets. We do this because the `center` positions rely on
  1938. // being in the normal flex flow and setting a `top` / `left` at all will completely throw
  1939. // off the position. We also can't use margins, because they won't have an effect in some
  1940. // cases where the element doesn't have anything to "push off of". Finally, this works
  1941. // better both with flexible and non-flexible positioning.
  1942. let transformString = '';
  1943. let offsetX = this._getOffset(position, 'x');
  1944. let offsetY = this._getOffset(position, 'y');
  1945. if (offsetX) {
  1946. transformString += `translateX(${offsetX}px) `;
  1947. }
  1948. if (offsetY) {
  1949. transformString += `translateY(${offsetY}px)`;
  1950. }
  1951. styles.transform = transformString.trim();
  1952. // If a maxWidth or maxHeight is specified on the overlay, we remove them. We do this because
  1953. // we need these values to both be set to "100%" for the automatic flexible sizing to work.
  1954. // The maxHeight and maxWidth are set on the boundingBox in order to enforce the constraint.
  1955. // Note that this doesn't apply when we have an exact position, in which case we do want to
  1956. // apply them because they'll be cleared from the bounding box.
  1957. if (config.maxHeight) {
  1958. if (hasExactPosition) {
  1959. styles.maxHeight = coerceCssPixelValue(config.maxHeight);
  1960. }
  1961. else if (hasFlexibleDimensions) {
  1962. styles.maxHeight = '';
  1963. }
  1964. }
  1965. if (config.maxWidth) {
  1966. if (hasExactPosition) {
  1967. styles.maxWidth = coerceCssPixelValue(config.maxWidth);
  1968. }
  1969. else if (hasFlexibleDimensions) {
  1970. styles.maxWidth = '';
  1971. }
  1972. }
  1973. extendStyles(this._pane.style, styles);
  1974. }
  1975. /** Gets the exact top/bottom for the overlay when not using flexible sizing or when pushing. */
  1976. _getExactOverlayY(position, originPoint, scrollPosition) {
  1977. // Reset any existing styles. This is necessary in case the
  1978. // preferred position has changed since the last `apply`.
  1979. let styles = { top: '', bottom: '' };
  1980. let overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);
  1981. if (this._isPushed) {
  1982. overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);
  1983. }
  1984. // We want to set either `top` or `bottom` based on whether the overlay wants to appear
  1985. // above or below the origin and the direction in which the element will expand.
  1986. if (position.overlayY === 'bottom') {
  1987. // When using `bottom`, we adjust the y position such that it is the distance
  1988. // from the bottom of the viewport rather than the top.
  1989. const documentHeight = this._document.documentElement.clientHeight;
  1990. styles.bottom = `${documentHeight - (overlayPoint.y + this._overlayRect.height)}px`;
  1991. }
  1992. else {
  1993. styles.top = coerceCssPixelValue(overlayPoint.y);
  1994. }
  1995. return styles;
  1996. }
  1997. /** Gets the exact left/right for the overlay when not using flexible sizing or when pushing. */
  1998. _getExactOverlayX(position, originPoint, scrollPosition) {
  1999. // Reset any existing styles. This is necessary in case the preferred position has
  2000. // changed since the last `apply`.
  2001. let styles = { left: '', right: '' };
  2002. let overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);
  2003. if (this._isPushed) {
  2004. overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);
  2005. }
  2006. // We want to set either `left` or `right` based on whether the overlay wants to appear "before"
  2007. // or "after" the origin, which determines the direction in which the element will expand.
  2008. // For the horizontal axis, the meaning of "before" and "after" change based on whether the
  2009. // page is in RTL or LTR.
  2010. let horizontalStyleProperty;
  2011. if (this._isRtl()) {
  2012. horizontalStyleProperty = position.overlayX === 'end' ? 'left' : 'right';
  2013. }
  2014. else {
  2015. horizontalStyleProperty = position.overlayX === 'end' ? 'right' : 'left';
  2016. }
  2017. // When we're setting `right`, we adjust the x position such that it is the distance
  2018. // from the right edge of the viewport rather than the left edge.
  2019. if (horizontalStyleProperty === 'right') {
  2020. const documentWidth = this._document.documentElement.clientWidth;
  2021. styles.right = `${documentWidth - (overlayPoint.x + this._overlayRect.width)}px`;
  2022. }
  2023. else {
  2024. styles.left = coerceCssPixelValue(overlayPoint.x);
  2025. }
  2026. return styles;
  2027. }
  2028. /**
  2029. * Gets the view properties of the trigger and overlay, including whether they are clipped
  2030. * or completely outside the view of any of the strategy's scrollables.
  2031. */
  2032. _getScrollVisibility() {
  2033. // Note: needs fresh rects since the position could've changed.
  2034. const originBounds = this._getOriginRect();
  2035. const overlayBounds = this._pane.getBoundingClientRect();
  2036. // TODO(jelbourn): instead of needing all of the client rects for these scrolling containers
  2037. // every time, we should be able to use the scrollTop of the containers if the size of those
  2038. // containers hasn't changed.
  2039. const scrollContainerBounds = this._scrollables.map(scrollable => {
  2040. return scrollable.getElementRef().nativeElement.getBoundingClientRect();
  2041. });
  2042. return {
  2043. isOriginClipped: isElementClippedByScrolling(originBounds, scrollContainerBounds),
  2044. isOriginOutsideView: isElementScrolledOutsideView(originBounds, scrollContainerBounds),
  2045. isOverlayClipped: isElementClippedByScrolling(overlayBounds, scrollContainerBounds),
  2046. isOverlayOutsideView: isElementScrolledOutsideView(overlayBounds, scrollContainerBounds),
  2047. };
  2048. }
  2049. /** Subtracts the amount that an element is overflowing on an axis from its length. */
  2050. _subtractOverflows(length, ...overflows) {
  2051. return overflows.reduce((currentValue, currentOverflow) => {
  2052. return currentValue - Math.max(currentOverflow, 0);
  2053. }, length);
  2054. }
  2055. /** Narrows the given viewport rect by the current _viewportMargin. */
  2056. _getNarrowedViewportRect() {
  2057. // We recalculate the viewport rect here ourselves, rather than using the ViewportRuler,
  2058. // because we want to use the `clientWidth` and `clientHeight` as the base. The difference
  2059. // being that the client properties don't include the scrollbar, as opposed to `innerWidth`
  2060. // and `innerHeight` that do. This is necessary, because the overlay container uses
  2061. // 100% `width` and `height` which don't include the scrollbar either.
  2062. const width = this._document.documentElement.clientWidth;
  2063. const height = this._document.documentElement.clientHeight;
  2064. const scrollPosition = this._viewportRuler.getViewportScrollPosition();
  2065. return {
  2066. top: scrollPosition.top + this._viewportMargin,
  2067. left: scrollPosition.left + this._viewportMargin,
  2068. right: scrollPosition.left + width - this._viewportMargin,
  2069. bottom: scrollPosition.top + height - this._viewportMargin,
  2070. width: width - 2 * this._viewportMargin,
  2071. height: height - 2 * this._viewportMargin,
  2072. };
  2073. }
  2074. /** Whether the we're dealing with an RTL context */
  2075. _isRtl() {
  2076. return this._overlayRef.getDirection() === 'rtl';
  2077. }
  2078. /** Determines whether the overlay uses exact or flexible positioning. */
  2079. _hasExactPosition() {
  2080. return !this._hasFlexibleDimensions || this._isPushed;
  2081. }
  2082. /** Retrieves the offset of a position along the x or y axis. */
  2083. _getOffset(position, axis) {
  2084. if (axis === 'x') {
  2085. // We don't do something like `position['offset' + axis]` in
  2086. // order to avoid breaking minifiers that rename properties.
  2087. return position.offsetX == null ? this._offsetX : position.offsetX;
  2088. }
  2089. return position.offsetY == null ? this._offsetY : position.offsetY;
  2090. }
  2091. /** Validates that the current position match the expected values. */
  2092. _validatePositions() {
  2093. if (typeof ngDevMode === 'undefined' || ngDevMode) {
  2094. if (!this._preferredPositions.length) {
  2095. throw Error('FlexibleConnectedPositionStrategy: At least one position is required.');
  2096. }
  2097. // TODO(crisbeto): remove these once Angular's template type
  2098. // checking is advanced enough to catch these cases.
  2099. this._preferredPositions.forEach(pair => {
  2100. validateHorizontalPosition('originX', pair.originX);
  2101. validateVerticalPosition('originY', pair.originY);
  2102. validateHorizontalPosition('overlayX', pair.overlayX);
  2103. validateVerticalPosition('overlayY', pair.overlayY);
  2104. });
  2105. }
  2106. }
  2107. /** Adds a single CSS class or an array of classes on the overlay panel. */
  2108. _addPanelClasses(cssClasses) {
  2109. if (this._pane) {
  2110. coerceArray(cssClasses).forEach(cssClass => {
  2111. if (cssClass !== '' && this._appliedPanelClasses.indexOf(cssClass) === -1) {
  2112. this._appliedPanelClasses.push(cssClass);
  2113. this._pane.classList.add(cssClass);
  2114. }
  2115. });
  2116. }
  2117. }
  2118. /** Clears the classes that the position strategy has applied from the overlay panel. */
  2119. _clearPanelClasses() {
  2120. if (this._pane) {
  2121. this._appliedPanelClasses.forEach(cssClass => {
  2122. this._pane.classList.remove(cssClass);
  2123. });
  2124. this._appliedPanelClasses = [];
  2125. }
  2126. }
  2127. /** Returns the DOMRect of the current origin. */
  2128. _getOriginRect() {
  2129. const origin = this._origin;
  2130. if (origin instanceof ElementRef) {
  2131. return origin.nativeElement.getBoundingClientRect();
  2132. }
  2133. // Check for Element so SVG elements are also supported.
  2134. if (origin instanceof Element) {
  2135. return origin.getBoundingClientRect();
  2136. }
  2137. const width = origin.width || 0;
  2138. const height = origin.height || 0;
  2139. // If the origin is a point, return a client rect as if it was a 0x0 element at the point.
  2140. return {
  2141. top: origin.y,
  2142. bottom: origin.y + height,
  2143. left: origin.x,
  2144. right: origin.x + width,
  2145. height,
  2146. width,
  2147. };
  2148. }
  2149. }
  2150. /** Shallow-extends a stylesheet object with another stylesheet object. */
  2151. function extendStyles(destination, source) {
  2152. for (let key in source) {
  2153. if (source.hasOwnProperty(key)) {
  2154. destination[key] = source[key];
  2155. }
  2156. }
  2157. return destination;
  2158. }
  2159. /**
  2160. * Extracts the pixel value as a number from a value, if it's a number
  2161. * or a CSS pixel string (e.g. `1337px`). Otherwise returns null.
  2162. */
  2163. function getPixelValue(input) {
  2164. if (typeof input !== 'number' && input != null) {
  2165. const [value, units] = input.split(cssUnitPattern);
  2166. return !units || units === 'px' ? parseFloat(value) : null;
  2167. }
  2168. return input || null;
  2169. }
  2170. /**
  2171. * Gets a version of an element's bounding `DOMRect` where all the values are rounded down to
  2172. * the nearest pixel. This allows us to account for the cases where there may be sub-pixel
  2173. * deviations in the `DOMRect` returned by the browser (e.g. when zoomed in with a percentage
  2174. * size, see #21350).
  2175. */
  2176. function getRoundedBoundingClientRect(clientRect) {
  2177. return {
  2178. top: Math.floor(clientRect.top),
  2179. right: Math.floor(clientRect.right),
  2180. bottom: Math.floor(clientRect.bottom),
  2181. left: Math.floor(clientRect.left),
  2182. width: Math.floor(clientRect.width),
  2183. height: Math.floor(clientRect.height),
  2184. };
  2185. }
  2186. /** Returns whether two `ScrollingVisibility` objects are identical. */
  2187. function compareScrollVisibility(a, b) {
  2188. if (a === b) {
  2189. return true;
  2190. }
  2191. return (a.isOriginClipped === b.isOriginClipped &&
  2192. a.isOriginOutsideView === b.isOriginOutsideView &&
  2193. a.isOverlayClipped === b.isOverlayClipped &&
  2194. a.isOverlayOutsideView === b.isOverlayOutsideView);
  2195. }
  2196. const STANDARD_DROPDOWN_BELOW_POSITIONS = [
  2197. { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
  2198. { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
  2199. { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
  2200. { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
  2201. ];
  2202. const STANDARD_DROPDOWN_ADJACENT_POSITIONS = [
  2203. { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },
  2204. { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' },
  2205. { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },
  2206. { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom' },
  2207. ];
  2208. /** Class to be added to the overlay pane wrapper. */
  2209. const wrapperClass = 'cdk-global-overlay-wrapper';
  2210. /**
  2211. * A strategy for positioning overlays. Using this strategy, an overlay is given an
  2212. * explicit position relative to the browser's viewport. We use flexbox, instead of
  2213. * transforms, in order to avoid issues with subpixel rendering which can cause the
  2214. * element to become blurry.
  2215. */
  2216. class GlobalPositionStrategy {
  2217. /** The overlay to which this strategy is attached. */
  2218. _overlayRef;
  2219. _cssPosition = 'static';
  2220. _topOffset = '';
  2221. _bottomOffset = '';
  2222. _alignItems = '';
  2223. _xPosition = '';
  2224. _xOffset = '';
  2225. _width = '';
  2226. _height = '';
  2227. _isDisposed = false;
  2228. attach(overlayRef) {
  2229. const config = overlayRef.getConfig();
  2230. this._overlayRef = overlayRef;
  2231. if (this._width && !config.width) {
  2232. overlayRef.updateSize({ width: this._width });
  2233. }
  2234. if (this._height && !config.height) {
  2235. overlayRef.updateSize({ height: this._height });
  2236. }
  2237. overlayRef.hostElement.classList.add(wrapperClass);
  2238. this._isDisposed = false;
  2239. }
  2240. /**
  2241. * Sets the top position of the overlay. Clears any previously set vertical position.
  2242. * @param value New top offset.
  2243. */
  2244. top(value = '') {
  2245. this._bottomOffset = '';
  2246. this._topOffset = value;
  2247. this._alignItems = 'flex-start';
  2248. return this;
  2249. }
  2250. /**
  2251. * Sets the left position of the overlay. Clears any previously set horizontal position.
  2252. * @param value New left offset.
  2253. */
  2254. left(value = '') {
  2255. this._xOffset = value;
  2256. this._xPosition = 'left';
  2257. return this;
  2258. }
  2259. /**
  2260. * Sets the bottom position of the overlay. Clears any previously set vertical position.
  2261. * @param value New bottom offset.
  2262. */
  2263. bottom(value = '') {
  2264. this._topOffset = '';
  2265. this._bottomOffset = value;
  2266. this._alignItems = 'flex-end';
  2267. return this;
  2268. }
  2269. /**
  2270. * Sets the right position of the overlay. Clears any previously set horizontal position.
  2271. * @param value New right offset.
  2272. */
  2273. right(value = '') {
  2274. this._xOffset = value;
  2275. this._xPosition = 'right';
  2276. return this;
  2277. }
  2278. /**
  2279. * Sets the overlay to the start of the viewport, depending on the overlay direction.
  2280. * This will be to the left in LTR layouts and to the right in RTL.
  2281. * @param offset Offset from the edge of the screen.
  2282. */
  2283. start(value = '') {
  2284. this._xOffset = value;
  2285. this._xPosition = 'start';
  2286. return this;
  2287. }
  2288. /**
  2289. * Sets the overlay to the end of the viewport, depending on the overlay direction.
  2290. * This will be to the right in LTR layouts and to the left in RTL.
  2291. * @param offset Offset from the edge of the screen.
  2292. */
  2293. end(value = '') {
  2294. this._xOffset = value;
  2295. this._xPosition = 'end';
  2296. return this;
  2297. }
  2298. /**
  2299. * Sets the overlay width and clears any previously set width.
  2300. * @param value New width for the overlay
  2301. * @deprecated Pass the `width` through the `OverlayConfig`.
  2302. * @breaking-change 8.0.0
  2303. */
  2304. width(value = '') {
  2305. if (this._overlayRef) {
  2306. this._overlayRef.updateSize({ width: value });
  2307. }
  2308. else {
  2309. this._width = value;
  2310. }
  2311. return this;
  2312. }
  2313. /**
  2314. * Sets the overlay height and clears any previously set height.
  2315. * @param value New height for the overlay
  2316. * @deprecated Pass the `height` through the `OverlayConfig`.
  2317. * @breaking-change 8.0.0
  2318. */
  2319. height(value = '') {
  2320. if (this._overlayRef) {
  2321. this._overlayRef.updateSize({ height: value });
  2322. }
  2323. else {
  2324. this._height = value;
  2325. }
  2326. return this;
  2327. }
  2328. /**
  2329. * Centers the overlay horizontally with an optional offset.
  2330. * Clears any previously set horizontal position.
  2331. *
  2332. * @param offset Overlay offset from the horizontal center.
  2333. */
  2334. centerHorizontally(offset = '') {
  2335. this.left(offset);
  2336. this._xPosition = 'center';
  2337. return this;
  2338. }
  2339. /**
  2340. * Centers the overlay vertically with an optional offset.
  2341. * Clears any previously set vertical position.
  2342. *
  2343. * @param offset Overlay offset from the vertical center.
  2344. */
  2345. centerVertically(offset = '') {
  2346. this.top(offset);
  2347. this._alignItems = 'center';
  2348. return this;
  2349. }
  2350. /**
  2351. * Apply the position to the element.
  2352. * @docs-private
  2353. */
  2354. apply() {
  2355. // Since the overlay ref applies the strategy asynchronously, it could
  2356. // have been disposed before it ends up being applied. If that is the
  2357. // case, we shouldn't do anything.
  2358. if (!this._overlayRef || !this._overlayRef.hasAttached()) {
  2359. return;
  2360. }
  2361. const styles = this._overlayRef.overlayElement.style;
  2362. const parentStyles = this._overlayRef.hostElement.style;
  2363. const config = this._overlayRef.getConfig();
  2364. const { width, height, maxWidth, maxHeight } = config;
  2365. const shouldBeFlushHorizontally = (width === '100%' || width === '100vw') &&
  2366. (!maxWidth || maxWidth === '100%' || maxWidth === '100vw');
  2367. const shouldBeFlushVertically = (height === '100%' || height === '100vh') &&
  2368. (!maxHeight || maxHeight === '100%' || maxHeight === '100vh');
  2369. const xPosition = this._xPosition;
  2370. const xOffset = this._xOffset;
  2371. const isRtl = this._overlayRef.getConfig().direction === 'rtl';
  2372. let marginLeft = '';
  2373. let marginRight = '';
  2374. let justifyContent = '';
  2375. if (shouldBeFlushHorizontally) {
  2376. justifyContent = 'flex-start';
  2377. }
  2378. else if (xPosition === 'center') {
  2379. justifyContent = 'center';
  2380. if (isRtl) {
  2381. marginRight = xOffset;
  2382. }
  2383. else {
  2384. marginLeft = xOffset;
  2385. }
  2386. }
  2387. else if (isRtl) {
  2388. if (xPosition === 'left' || xPosition === 'end') {
  2389. justifyContent = 'flex-end';
  2390. marginLeft = xOffset;
  2391. }
  2392. else if (xPosition === 'right' || xPosition === 'start') {
  2393. justifyContent = 'flex-start';
  2394. marginRight = xOffset;
  2395. }
  2396. }
  2397. else if (xPosition === 'left' || xPosition === 'start') {
  2398. justifyContent = 'flex-start';
  2399. marginLeft = xOffset;
  2400. }
  2401. else if (xPosition === 'right' || xPosition === 'end') {
  2402. justifyContent = 'flex-end';
  2403. marginRight = xOffset;
  2404. }
  2405. styles.position = this._cssPosition;
  2406. styles.marginLeft = shouldBeFlushHorizontally ? '0' : marginLeft;
  2407. styles.marginTop = shouldBeFlushVertically ? '0' : this._topOffset;
  2408. styles.marginBottom = this._bottomOffset;
  2409. styles.marginRight = shouldBeFlushHorizontally ? '0' : marginRight;
  2410. parentStyles.justifyContent = justifyContent;
  2411. parentStyles.alignItems = shouldBeFlushVertically ? 'flex-start' : this._alignItems;
  2412. }
  2413. /**
  2414. * Cleans up the DOM changes from the position strategy.
  2415. * @docs-private
  2416. */
  2417. dispose() {
  2418. if (this._isDisposed || !this._overlayRef) {
  2419. return;
  2420. }
  2421. const styles = this._overlayRef.overlayElement.style;
  2422. const parent = this._overlayRef.hostElement;
  2423. const parentStyles = parent.style;
  2424. parent.classList.remove(wrapperClass);
  2425. parentStyles.justifyContent =
  2426. parentStyles.alignItems =
  2427. styles.marginTop =
  2428. styles.marginBottom =
  2429. styles.marginLeft =
  2430. styles.marginRight =
  2431. styles.position =
  2432. '';
  2433. this._overlayRef = null;
  2434. this._isDisposed = true;
  2435. }
  2436. }
  2437. /** Builder for overlay position strategy. */
  2438. class OverlayPositionBuilder {
  2439. _viewportRuler = inject(ViewportRuler);
  2440. _document = inject(DOCUMENT);
  2441. _platform = inject(Platform);
  2442. _overlayContainer = inject(OverlayContainer);
  2443. constructor() { }
  2444. /**
  2445. * Creates a global position strategy.
  2446. */
  2447. global() {
  2448. return new GlobalPositionStrategy();
  2449. }
  2450. /**
  2451. * Creates a flexible position strategy.
  2452. * @param origin Origin relative to which to position the overlay.
  2453. */
  2454. flexibleConnectedTo(origin) {
  2455. return new FlexibleConnectedPositionStrategy(origin, this._viewportRuler, this._document, this._platform, this._overlayContainer);
  2456. }
  2457. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayPositionBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
  2458. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayPositionBuilder, providedIn: 'root' });
  2459. }
  2460. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayPositionBuilder, decorators: [{
  2461. type: Injectable,
  2462. args: [{ providedIn: 'root' }]
  2463. }], ctorParameters: () => [] });
  2464. /**
  2465. * Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be
  2466. * used as a low-level building block for other components. Dialogs, tooltips, menus,
  2467. * selects, etc. can all be built using overlays. The service should primarily be used by authors
  2468. * of re-usable components rather than developers building end-user applications.
  2469. *
  2470. * An overlay *is* a PortalOutlet, so any kind of Portal can be loaded into one.
  2471. */
  2472. class Overlay {
  2473. scrollStrategies = inject(ScrollStrategyOptions);
  2474. _overlayContainer = inject(OverlayContainer);
  2475. _positionBuilder = inject(OverlayPositionBuilder);
  2476. _keyboardDispatcher = inject(OverlayKeyboardDispatcher);
  2477. _injector = inject(Injector);
  2478. _ngZone = inject(NgZone);
  2479. _document = inject(DOCUMENT);
  2480. _directionality = inject(Directionality);
  2481. _location = inject(Location);
  2482. _outsideClickDispatcher = inject(OverlayOutsideClickDispatcher);
  2483. _animationsModuleType = inject(ANIMATION_MODULE_TYPE, { optional: true });
  2484. _idGenerator = inject(_IdGenerator);
  2485. _renderer = inject(RendererFactory2).createRenderer(null, null);
  2486. _appRef;
  2487. _styleLoader = inject(_CdkPrivateStyleLoader);
  2488. constructor() { }
  2489. /**
  2490. * Creates an overlay.
  2491. * @param config Configuration applied to the overlay.
  2492. * @returns Reference to the created overlay.
  2493. */
  2494. create(config) {
  2495. // This is done in the overlay container as well, but we have it here
  2496. // since it's common to mock out the overlay container in tests.
  2497. this._styleLoader.load(_CdkOverlayStyleLoader);
  2498. const host = this._createHostElement();
  2499. const pane = this._createPaneElement(host);
  2500. const portalOutlet = this._createPortalOutlet(pane);
  2501. const overlayConfig = new OverlayConfig(config);
  2502. overlayConfig.direction = overlayConfig.direction || this._directionality.value;
  2503. return new OverlayRef(portalOutlet, host, pane, overlayConfig, this._ngZone, this._keyboardDispatcher, this._document, this._location, this._outsideClickDispatcher, this._animationsModuleType === 'NoopAnimations', this._injector.get(EnvironmentInjector), this._renderer);
  2504. }
  2505. /**
  2506. * Gets a position builder that can be used, via fluent API,
  2507. * to construct and configure a position strategy.
  2508. * @returns An overlay position builder.
  2509. */
  2510. position() {
  2511. return this._positionBuilder;
  2512. }
  2513. /**
  2514. * Creates the DOM element for an overlay and appends it to the overlay container.
  2515. * @returns Newly-created pane element
  2516. */
  2517. _createPaneElement(host) {
  2518. const pane = this._document.createElement('div');
  2519. pane.id = this._idGenerator.getId('cdk-overlay-');
  2520. pane.classList.add('cdk-overlay-pane');
  2521. host.appendChild(pane);
  2522. return pane;
  2523. }
  2524. /**
  2525. * Creates the host element that wraps around an overlay
  2526. * and can be used for advanced positioning.
  2527. * @returns Newly-create host element.
  2528. */
  2529. _createHostElement() {
  2530. const host = this._document.createElement('div');
  2531. this._overlayContainer.getContainerElement().appendChild(host);
  2532. return host;
  2533. }
  2534. /**
  2535. * Create a DomPortalOutlet into which the overlay content can be loaded.
  2536. * @param pane The DOM element to turn into a portal outlet.
  2537. * @returns A portal outlet for the given DOM element.
  2538. */
  2539. _createPortalOutlet(pane) {
  2540. // We have to resolve the ApplicationRef later in order to allow people
  2541. // to use overlay-based providers during app initialization.
  2542. if (!this._appRef) {
  2543. this._appRef = this._injector.get(ApplicationRef);
  2544. }
  2545. return new DomPortalOutlet(pane, null, this._appRef, this._injector, this._document);
  2546. }
  2547. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Overlay, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
  2548. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Overlay, providedIn: 'root' });
  2549. }
  2550. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Overlay, decorators: [{
  2551. type: Injectable,
  2552. args: [{ providedIn: 'root' }]
  2553. }], ctorParameters: () => [] });
  2554. /** Default set of positions for the overlay. Follows the behavior of a dropdown. */
  2555. const defaultPositionList = [
  2556. {
  2557. originX: 'start',
  2558. originY: 'bottom',
  2559. overlayX: 'start',
  2560. overlayY: 'top',
  2561. },
  2562. {
  2563. originX: 'start',
  2564. originY: 'top',
  2565. overlayX: 'start',
  2566. overlayY: 'bottom',
  2567. },
  2568. {
  2569. originX: 'end',
  2570. originY: 'top',
  2571. overlayX: 'end',
  2572. overlayY: 'bottom',
  2573. },
  2574. {
  2575. originX: 'end',
  2576. originY: 'bottom',
  2577. overlayX: 'end',
  2578. overlayY: 'top',
  2579. },
  2580. ];
  2581. /** Injection token that determines the scroll handling while the connected overlay is open. */
  2582. const CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY = new InjectionToken('cdk-connected-overlay-scroll-strategy', {
  2583. providedIn: 'root',
  2584. factory: () => {
  2585. const overlay = inject(Overlay);
  2586. return () => overlay.scrollStrategies.reposition();
  2587. },
  2588. });
  2589. /**
  2590. * Directive applied to an element to make it usable as an origin for an Overlay using a
  2591. * ConnectedPositionStrategy.
  2592. */
  2593. class CdkOverlayOrigin {
  2594. elementRef = inject(ElementRef);
  2595. constructor() { }
  2596. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkOverlayOrigin, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  2597. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: CdkOverlayOrigin, isStandalone: true, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"], ngImport: i0 });
  2598. }
  2599. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkOverlayOrigin, decorators: [{
  2600. type: Directive,
  2601. args: [{
  2602. selector: '[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]',
  2603. exportAs: 'cdkOverlayOrigin',
  2604. }]
  2605. }], ctorParameters: () => [] });
  2606. /**
  2607. * Directive to facilitate declarative creation of an
  2608. * Overlay using a FlexibleConnectedPositionStrategy.
  2609. */
  2610. class CdkConnectedOverlay {
  2611. _overlay = inject(Overlay);
  2612. _dir = inject(Directionality, { optional: true });
  2613. _overlayRef;
  2614. _templatePortal;
  2615. _backdropSubscription = Subscription.EMPTY;
  2616. _attachSubscription = Subscription.EMPTY;
  2617. _detachSubscription = Subscription.EMPTY;
  2618. _positionSubscription = Subscription.EMPTY;
  2619. _offsetX;
  2620. _offsetY;
  2621. _position;
  2622. _scrollStrategyFactory = inject(CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY);
  2623. _disposeOnNavigation = false;
  2624. _ngZone = inject(NgZone);
  2625. /** Origin for the connected overlay. */
  2626. origin;
  2627. /** Registered connected position pairs. */
  2628. positions;
  2629. /**
  2630. * This input overrides the positions input if specified. It lets users pass
  2631. * in arbitrary positioning strategies.
  2632. */
  2633. positionStrategy;
  2634. /** The offset in pixels for the overlay connection point on the x-axis */
  2635. get offsetX() {
  2636. return this._offsetX;
  2637. }
  2638. set offsetX(offsetX) {
  2639. this._offsetX = offsetX;
  2640. if (this._position) {
  2641. this._updatePositionStrategy(this._position);
  2642. }
  2643. }
  2644. /** The offset in pixels for the overlay connection point on the y-axis */
  2645. get offsetY() {
  2646. return this._offsetY;
  2647. }
  2648. set offsetY(offsetY) {
  2649. this._offsetY = offsetY;
  2650. if (this._position) {
  2651. this._updatePositionStrategy(this._position);
  2652. }
  2653. }
  2654. /** The width of the overlay panel. */
  2655. width;
  2656. /** The height of the overlay panel. */
  2657. height;
  2658. /** The min width of the overlay panel. */
  2659. minWidth;
  2660. /** The min height of the overlay panel. */
  2661. minHeight;
  2662. /** The custom class to be set on the backdrop element. */
  2663. backdropClass;
  2664. /** The custom class to add to the overlay pane element. */
  2665. panelClass;
  2666. /** Margin between the overlay and the viewport edges. */
  2667. viewportMargin = 0;
  2668. /** Strategy to be used when handling scroll events while the overlay is open. */
  2669. scrollStrategy;
  2670. /** Whether the overlay is open. */
  2671. open = false;
  2672. /** Whether the overlay can be closed by user interaction. */
  2673. disableClose = false;
  2674. /** CSS selector which to set the transform origin. */
  2675. transformOriginSelector;
  2676. /** Whether or not the overlay should attach a backdrop. */
  2677. hasBackdrop = false;
  2678. /** Whether or not the overlay should be locked when scrolling. */
  2679. lockPosition = false;
  2680. /** Whether the overlay's width and height can be constrained to fit within the viewport. */
  2681. flexibleDimensions = false;
  2682. /** Whether the overlay can grow after the initial open when flexible positioning is turned on. */
  2683. growAfterOpen = false;
  2684. /** Whether the overlay can be pushed on-screen if none of the provided positions fit. */
  2685. push = false;
  2686. /** Whether the overlay should be disposed of when the user goes backwards/forwards in history. */
  2687. get disposeOnNavigation() {
  2688. return this._disposeOnNavigation;
  2689. }
  2690. set disposeOnNavigation(value) {
  2691. this._disposeOnNavigation = value;
  2692. }
  2693. /** Event emitted when the backdrop is clicked. */
  2694. backdropClick = new EventEmitter();
  2695. /** Event emitted when the position has changed. */
  2696. positionChange = new EventEmitter();
  2697. /** Event emitted when the overlay has been attached. */
  2698. attach = new EventEmitter();
  2699. /** Event emitted when the overlay has been detached. */
  2700. detach = new EventEmitter();
  2701. /** Emits when there are keyboard events that are targeted at the overlay. */
  2702. overlayKeydown = new EventEmitter();
  2703. /** Emits when there are mouse outside click events that are targeted at the overlay. */
  2704. overlayOutsideClick = new EventEmitter();
  2705. // TODO(jelbourn): inputs for size, scroll behavior, animation, etc.
  2706. constructor() {
  2707. const templateRef = inject(TemplateRef);
  2708. const viewContainerRef = inject(ViewContainerRef);
  2709. this._templatePortal = new TemplatePortal(templateRef, viewContainerRef);
  2710. this.scrollStrategy = this._scrollStrategyFactory();
  2711. }
  2712. /** The associated overlay reference. */
  2713. get overlayRef() {
  2714. return this._overlayRef;
  2715. }
  2716. /** The element's layout direction. */
  2717. get dir() {
  2718. return this._dir ? this._dir.value : 'ltr';
  2719. }
  2720. ngOnDestroy() {
  2721. this._attachSubscription.unsubscribe();
  2722. this._detachSubscription.unsubscribe();
  2723. this._backdropSubscription.unsubscribe();
  2724. this._positionSubscription.unsubscribe();
  2725. this._overlayRef?.dispose();
  2726. }
  2727. ngOnChanges(changes) {
  2728. if (this._position) {
  2729. this._updatePositionStrategy(this._position);
  2730. this._overlayRef?.updateSize({
  2731. width: this.width,
  2732. minWidth: this.minWidth,
  2733. height: this.height,
  2734. minHeight: this.minHeight,
  2735. });
  2736. if (changes['origin'] && this.open) {
  2737. this._position.apply();
  2738. }
  2739. }
  2740. if (changes['open']) {
  2741. this.open ? this.attachOverlay() : this.detachOverlay();
  2742. }
  2743. }
  2744. /** Creates an overlay */
  2745. _createOverlay() {
  2746. if (!this.positions || !this.positions.length) {
  2747. this.positions = defaultPositionList;
  2748. }
  2749. const overlayRef = (this._overlayRef = this._overlay.create(this._buildConfig()));
  2750. this._attachSubscription = overlayRef.attachments().subscribe(() => this.attach.emit());
  2751. this._detachSubscription = overlayRef.detachments().subscribe(() => this.detach.emit());
  2752. overlayRef.keydownEvents().subscribe((event) => {
  2753. this.overlayKeydown.next(event);
  2754. if (event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)) {
  2755. event.preventDefault();
  2756. this.detachOverlay();
  2757. }
  2758. });
  2759. this._overlayRef.outsidePointerEvents().subscribe((event) => {
  2760. const origin = this._getOriginElement();
  2761. const target = _getEventTarget(event);
  2762. if (!origin || (origin !== target && !origin.contains(target))) {
  2763. this.overlayOutsideClick.next(event);
  2764. }
  2765. });
  2766. }
  2767. /** Builds the overlay config based on the directive's inputs */
  2768. _buildConfig() {
  2769. const positionStrategy = (this._position =
  2770. this.positionStrategy || this._createPositionStrategy());
  2771. const overlayConfig = new OverlayConfig({
  2772. direction: this._dir || 'ltr',
  2773. positionStrategy,
  2774. scrollStrategy: this.scrollStrategy,
  2775. hasBackdrop: this.hasBackdrop,
  2776. disposeOnNavigation: this.disposeOnNavigation,
  2777. });
  2778. if (this.width || this.width === 0) {
  2779. overlayConfig.width = this.width;
  2780. }
  2781. if (this.height || this.height === 0) {
  2782. overlayConfig.height = this.height;
  2783. }
  2784. if (this.minWidth || this.minWidth === 0) {
  2785. overlayConfig.minWidth = this.minWidth;
  2786. }
  2787. if (this.minHeight || this.minHeight === 0) {
  2788. overlayConfig.minHeight = this.minHeight;
  2789. }
  2790. if (this.backdropClass) {
  2791. overlayConfig.backdropClass = this.backdropClass;
  2792. }
  2793. if (this.panelClass) {
  2794. overlayConfig.panelClass = this.panelClass;
  2795. }
  2796. return overlayConfig;
  2797. }
  2798. /** Updates the state of a position strategy, based on the values of the directive inputs. */
  2799. _updatePositionStrategy(positionStrategy) {
  2800. const positions = this.positions.map(currentPosition => ({
  2801. originX: currentPosition.originX,
  2802. originY: currentPosition.originY,
  2803. overlayX: currentPosition.overlayX,
  2804. overlayY: currentPosition.overlayY,
  2805. offsetX: currentPosition.offsetX || this.offsetX,
  2806. offsetY: currentPosition.offsetY || this.offsetY,
  2807. panelClass: currentPosition.panelClass || undefined,
  2808. }));
  2809. return positionStrategy
  2810. .setOrigin(this._getOrigin())
  2811. .withPositions(positions)
  2812. .withFlexibleDimensions(this.flexibleDimensions)
  2813. .withPush(this.push)
  2814. .withGrowAfterOpen(this.growAfterOpen)
  2815. .withViewportMargin(this.viewportMargin)
  2816. .withLockedPosition(this.lockPosition)
  2817. .withTransformOriginOn(this.transformOriginSelector);
  2818. }
  2819. /** Returns the position strategy of the overlay to be set on the overlay config */
  2820. _createPositionStrategy() {
  2821. const strategy = this._overlay.position().flexibleConnectedTo(this._getOrigin());
  2822. this._updatePositionStrategy(strategy);
  2823. return strategy;
  2824. }
  2825. _getOrigin() {
  2826. if (this.origin instanceof CdkOverlayOrigin) {
  2827. return this.origin.elementRef;
  2828. }
  2829. else {
  2830. return this.origin;
  2831. }
  2832. }
  2833. _getOriginElement() {
  2834. if (this.origin instanceof CdkOverlayOrigin) {
  2835. return this.origin.elementRef.nativeElement;
  2836. }
  2837. if (this.origin instanceof ElementRef) {
  2838. return this.origin.nativeElement;
  2839. }
  2840. if (typeof Element !== 'undefined' && this.origin instanceof Element) {
  2841. return this.origin;
  2842. }
  2843. return null;
  2844. }
  2845. /** Attaches the overlay. */
  2846. attachOverlay() {
  2847. if (!this._overlayRef) {
  2848. this._createOverlay();
  2849. }
  2850. else {
  2851. // Update the overlay size, in case the directive's inputs have changed
  2852. this._overlayRef.getConfig().hasBackdrop = this.hasBackdrop;
  2853. }
  2854. if (!this._overlayRef.hasAttached()) {
  2855. this._overlayRef.attach(this._templatePortal);
  2856. }
  2857. if (this.hasBackdrop) {
  2858. this._backdropSubscription = this._overlayRef.backdropClick().subscribe(event => {
  2859. this.backdropClick.emit(event);
  2860. });
  2861. }
  2862. else {
  2863. this._backdropSubscription.unsubscribe();
  2864. }
  2865. this._positionSubscription.unsubscribe();
  2866. // Only subscribe to `positionChanges` if requested, because putting
  2867. // together all the information for it can be expensive.
  2868. if (this.positionChange.observers.length > 0) {
  2869. this._positionSubscription = this._position.positionChanges
  2870. .pipe(takeWhile(() => this.positionChange.observers.length > 0))
  2871. .subscribe(position => {
  2872. this._ngZone.run(() => this.positionChange.emit(position));
  2873. if (this.positionChange.observers.length === 0) {
  2874. this._positionSubscription.unsubscribe();
  2875. }
  2876. });
  2877. }
  2878. this.open = true;
  2879. }
  2880. /** Detaches the overlay. */
  2881. detachOverlay() {
  2882. this._overlayRef?.detach();
  2883. this._backdropSubscription.unsubscribe();
  2884. this._positionSubscription.unsubscribe();
  2885. this.open = false;
  2886. }
  2887. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkConnectedOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  2888. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.6", type: CdkConnectedOverlay, isStandalone: true, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: { origin: ["cdkConnectedOverlayOrigin", "origin"], positions: ["cdkConnectedOverlayPositions", "positions"], positionStrategy: ["cdkConnectedOverlayPositionStrategy", "positionStrategy"], offsetX: ["cdkConnectedOverlayOffsetX", "offsetX"], offsetY: ["cdkConnectedOverlayOffsetY", "offsetY"], width: ["cdkConnectedOverlayWidth", "width"], height: ["cdkConnectedOverlayHeight", "height"], minWidth: ["cdkConnectedOverlayMinWidth", "minWidth"], minHeight: ["cdkConnectedOverlayMinHeight", "minHeight"], backdropClass: ["cdkConnectedOverlayBackdropClass", "backdropClass"], panelClass: ["cdkConnectedOverlayPanelClass", "panelClass"], viewportMargin: ["cdkConnectedOverlayViewportMargin", "viewportMargin"], scrollStrategy: ["cdkConnectedOverlayScrollStrategy", "scrollStrategy"], open: ["cdkConnectedOverlayOpen", "open"], disableClose: ["cdkConnectedOverlayDisableClose", "disableClose"], transformOriginSelector: ["cdkConnectedOverlayTransformOriginOn", "transformOriginSelector"], hasBackdrop: ["cdkConnectedOverlayHasBackdrop", "hasBackdrop", booleanAttribute], lockPosition: ["cdkConnectedOverlayLockPosition", "lockPosition", booleanAttribute], flexibleDimensions: ["cdkConnectedOverlayFlexibleDimensions", "flexibleDimensions", booleanAttribute], growAfterOpen: ["cdkConnectedOverlayGrowAfterOpen", "growAfterOpen", booleanAttribute], push: ["cdkConnectedOverlayPush", "push", booleanAttribute], disposeOnNavigation: ["cdkConnectedOverlayDisposeOnNavigation", "disposeOnNavigation", booleanAttribute] }, outputs: { backdropClick: "backdropClick", positionChange: "positionChange", attach: "attach", detach: "detach", overlayKeydown: "overlayKeydown", overlayOutsideClick: "overlayOutsideClick" }, exportAs: ["cdkConnectedOverlay"], usesOnChanges: true, ngImport: i0 });
  2889. }
  2890. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkConnectedOverlay, decorators: [{
  2891. type: Directive,
  2892. args: [{
  2893. selector: '[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]',
  2894. exportAs: 'cdkConnectedOverlay',
  2895. }]
  2896. }], ctorParameters: () => [], propDecorators: { origin: [{
  2897. type: Input,
  2898. args: ['cdkConnectedOverlayOrigin']
  2899. }], positions: [{
  2900. type: Input,
  2901. args: ['cdkConnectedOverlayPositions']
  2902. }], positionStrategy: [{
  2903. type: Input,
  2904. args: ['cdkConnectedOverlayPositionStrategy']
  2905. }], offsetX: [{
  2906. type: Input,
  2907. args: ['cdkConnectedOverlayOffsetX']
  2908. }], offsetY: [{
  2909. type: Input,
  2910. args: ['cdkConnectedOverlayOffsetY']
  2911. }], width: [{
  2912. type: Input,
  2913. args: ['cdkConnectedOverlayWidth']
  2914. }], height: [{
  2915. type: Input,
  2916. args: ['cdkConnectedOverlayHeight']
  2917. }], minWidth: [{
  2918. type: Input,
  2919. args: ['cdkConnectedOverlayMinWidth']
  2920. }], minHeight: [{
  2921. type: Input,
  2922. args: ['cdkConnectedOverlayMinHeight']
  2923. }], backdropClass: [{
  2924. type: Input,
  2925. args: ['cdkConnectedOverlayBackdropClass']
  2926. }], panelClass: [{
  2927. type: Input,
  2928. args: ['cdkConnectedOverlayPanelClass']
  2929. }], viewportMargin: [{
  2930. type: Input,
  2931. args: ['cdkConnectedOverlayViewportMargin']
  2932. }], scrollStrategy: [{
  2933. type: Input,
  2934. args: ['cdkConnectedOverlayScrollStrategy']
  2935. }], open: [{
  2936. type: Input,
  2937. args: ['cdkConnectedOverlayOpen']
  2938. }], disableClose: [{
  2939. type: Input,
  2940. args: ['cdkConnectedOverlayDisableClose']
  2941. }], transformOriginSelector: [{
  2942. type: Input,
  2943. args: ['cdkConnectedOverlayTransformOriginOn']
  2944. }], hasBackdrop: [{
  2945. type: Input,
  2946. args: [{ alias: 'cdkConnectedOverlayHasBackdrop', transform: booleanAttribute }]
  2947. }], lockPosition: [{
  2948. type: Input,
  2949. args: [{ alias: 'cdkConnectedOverlayLockPosition', transform: booleanAttribute }]
  2950. }], flexibleDimensions: [{
  2951. type: Input,
  2952. args: [{ alias: 'cdkConnectedOverlayFlexibleDimensions', transform: booleanAttribute }]
  2953. }], growAfterOpen: [{
  2954. type: Input,
  2955. args: [{ alias: 'cdkConnectedOverlayGrowAfterOpen', transform: booleanAttribute }]
  2956. }], push: [{
  2957. type: Input,
  2958. args: [{ alias: 'cdkConnectedOverlayPush', transform: booleanAttribute }]
  2959. }], disposeOnNavigation: [{
  2960. type: Input,
  2961. args: [{ alias: 'cdkConnectedOverlayDisposeOnNavigation', transform: booleanAttribute }]
  2962. }], backdropClick: [{
  2963. type: Output
  2964. }], positionChange: [{
  2965. type: Output
  2966. }], attach: [{
  2967. type: Output
  2968. }], detach: [{
  2969. type: Output
  2970. }], overlayKeydown: [{
  2971. type: Output
  2972. }], overlayOutsideClick: [{
  2973. type: Output
  2974. }] } });
  2975. /**
  2976. * @docs-private
  2977. * @deprecated No longer used, will be removed.
  2978. * @breaking-change 21.0.0
  2979. */
  2980. function CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
  2981. return () => overlay.scrollStrategies.reposition();
  2982. }
  2983. /**
  2984. * @docs-private
  2985. * @deprecated No longer used, will be removed.
  2986. * @breaking-change 21.0.0
  2987. */
  2988. const CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {
  2989. provide: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY,
  2990. deps: [Overlay],
  2991. useFactory: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY,
  2992. };
  2993. class OverlayModule {
  2994. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  2995. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: OverlayModule, imports: [BidiModule, PortalModule, ScrollingModule, CdkConnectedOverlay, CdkOverlayOrigin], exports: [CdkConnectedOverlay, CdkOverlayOrigin, ScrollingModule] });
  2996. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayModule, providers: [Overlay, CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER], imports: [BidiModule, PortalModule, ScrollingModule, ScrollingModule] });
  2997. }
  2998. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayModule, decorators: [{
  2999. type: NgModule,
  3000. args: [{
  3001. imports: [BidiModule, PortalModule, ScrollingModule, CdkConnectedOverlay, CdkOverlayOrigin],
  3002. exports: [CdkConnectedOverlay, CdkOverlayOrigin, ScrollingModule],
  3003. providers: [Overlay, CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER],
  3004. }]
  3005. }] });
  3006. export { BlockScrollStrategy as B, CdkOverlayOrigin as C, FlexibleConnectedPositionStrategy as F, GlobalPositionStrategy as G, NoopScrollStrategy as N, OverlayContainer as O, RepositionScrollStrategy as R, STANDARD_DROPDOWN_ADJACENT_POSITIONS as S, Overlay as a, CdkConnectedOverlay as b, OverlayRef as c, OverlayPositionBuilder as d, STANDARD_DROPDOWN_BELOW_POSITIONS as e, OverlayConfig as f, ConnectionPositionPair as g, ScrollingVisibility as h, ConnectedOverlayPositionChange as i, validateHorizontalPosition as j, ScrollStrategyOptions as k, CloseScrollStrategy as l, OverlayModule as m, OverlayOutsideClickDispatcher as n, OverlayKeyboardDispatcher as o, validateVerticalPosition as v };
  3007. //# sourceMappingURL=overlay-module-BUj0D19H.mjs.map