12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029 |
- import * as i0 from '@angular/core';
- 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';
- import { DOCUMENT, Location } from '@angular/common';
- import { P as Platform } from './platform-DmdVEw_C.mjs';
- import { _ as _bindEventWithOptions } from './backwards-compatibility-DHR38MsD.mjs';
- import { _ as _getEventTarget } from './shadow-dom-B0oHn41l.mjs';
- import { _ as _isTestEnvironment } from './test-environment-CT0XxPyp.mjs';
- import { _ as _CdkPrivateStyleLoader } from './style-loader-Cu9AvjH9.mjs';
- import { Subject, Subscription, merge } from 'rxjs';
- import { filter, takeUntil, takeWhile } from 'rxjs/operators';
- import { c as coerceCssPixelValue } from './css-pixel-value-C_HEqLhI.mjs';
- import { c as coerceArray } from './array-I1yfCXUO.mjs';
- import { ScrollDispatcher, ViewportRuler, ScrollingModule } from './scrolling.mjs';
- import { s as supportsScrollBehavior } from './scrolling-BkvA05C8.mjs';
- import { b as DomPortalOutlet, T as TemplatePortal, h as PortalModule } from './portal-directives-Bw5woq8I.mjs';
- import { D as Directionality } from './directionality-CBXD4hga.mjs';
- import { _ as _IdGenerator } from './id-generator-Dw_9dSDu.mjs';
- import { g as ESCAPE } from './keycodes-CpHkExLC.mjs';
- import { hasModifierKey } from './keycodes.mjs';
- import { BidiModule } from './bidi.mjs';
- const scrollBehaviorSupported = supportsScrollBehavior();
- /**
- * Strategy that will prevent the user from scrolling while the overlay is visible.
- */
- class BlockScrollStrategy {
- _viewportRuler;
- _previousHTMLStyles = { top: '', left: '' };
- _previousScrollPosition;
- _isEnabled = false;
- _document;
- constructor(_viewportRuler, document) {
- this._viewportRuler = _viewportRuler;
- this._document = document;
- }
- /** Attaches this scroll strategy to an overlay. */
- attach() { }
- /** Blocks page-level scroll while the attached overlay is open. */
- enable() {
- if (this._canBeEnabled()) {
- const root = this._document.documentElement;
- this._previousScrollPosition = this._viewportRuler.getViewportScrollPosition();
- // Cache the previous inline styles in case the user had set them.
- this._previousHTMLStyles.left = root.style.left || '';
- this._previousHTMLStyles.top = root.style.top || '';
- // Note: we're using the `html` node, instead of the `body`, because the `body` may
- // have the user agent margin, whereas the `html` is guaranteed not to have one.
- root.style.left = coerceCssPixelValue(-this._previousScrollPosition.left);
- root.style.top = coerceCssPixelValue(-this._previousScrollPosition.top);
- root.classList.add('cdk-global-scrollblock');
- this._isEnabled = true;
- }
- }
- /** Unblocks page-level scroll while the attached overlay is open. */
- disable() {
- if (this._isEnabled) {
- const html = this._document.documentElement;
- const body = this._document.body;
- const htmlStyle = html.style;
- const bodyStyle = body.style;
- const previousHtmlScrollBehavior = htmlStyle.scrollBehavior || '';
- const previousBodyScrollBehavior = bodyStyle.scrollBehavior || '';
- this._isEnabled = false;
- htmlStyle.left = this._previousHTMLStyles.left;
- htmlStyle.top = this._previousHTMLStyles.top;
- html.classList.remove('cdk-global-scrollblock');
- // Disable user-defined smooth scrolling temporarily while we restore the scroll position.
- // See https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
- // Note that we don't mutate the property if the browser doesn't support `scroll-behavior`,
- // because it can throw off feature detections in `supportsScrollBehavior` which
- // checks for `'scrollBehavior' in documentElement.style`.
- if (scrollBehaviorSupported) {
- htmlStyle.scrollBehavior = bodyStyle.scrollBehavior = 'auto';
- }
- window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top);
- if (scrollBehaviorSupported) {
- htmlStyle.scrollBehavior = previousHtmlScrollBehavior;
- bodyStyle.scrollBehavior = previousBodyScrollBehavior;
- }
- }
- }
- _canBeEnabled() {
- // Since the scroll strategies can't be singletons, we have to use a global CSS class
- // (`cdk-global-scrollblock`) to make sure that we don't try to disable global
- // scrolling multiple times.
- const html = this._document.documentElement;
- if (html.classList.contains('cdk-global-scrollblock') || this._isEnabled) {
- return false;
- }
- const rootElement = this._document.documentElement;
- const viewport = this._viewportRuler.getViewportSize();
- return rootElement.scrollHeight > viewport.height || rootElement.scrollWidth > viewport.width;
- }
- }
- /**
- * Returns an error to be thrown when attempting to attach an already-attached scroll strategy.
- */
- function getMatScrollStrategyAlreadyAttachedError() {
- return Error(`Scroll strategy has already been attached.`);
- }
- /**
- * Strategy that will close the overlay as soon as the user starts scrolling.
- */
- class CloseScrollStrategy {
- _scrollDispatcher;
- _ngZone;
- _viewportRuler;
- _config;
- _scrollSubscription = null;
- _overlayRef;
- _initialScrollPosition;
- constructor(_scrollDispatcher, _ngZone, _viewportRuler, _config) {
- this._scrollDispatcher = _scrollDispatcher;
- this._ngZone = _ngZone;
- this._viewportRuler = _viewportRuler;
- this._config = _config;
- }
- /** Attaches this scroll strategy to an overlay. */
- attach(overlayRef) {
- if (this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {
- throw getMatScrollStrategyAlreadyAttachedError();
- }
- this._overlayRef = overlayRef;
- }
- /** Enables the closing of the attached overlay on scroll. */
- enable() {
- if (this._scrollSubscription) {
- return;
- }
- const stream = this._scrollDispatcher.scrolled(0).pipe(filter(scrollable => {
- return (!scrollable ||
- !this._overlayRef.overlayElement.contains(scrollable.getElementRef().nativeElement));
- }));
- if (this._config && this._config.threshold && this._config.threshold > 1) {
- this._initialScrollPosition = this._viewportRuler.getViewportScrollPosition().top;
- this._scrollSubscription = stream.subscribe(() => {
- const scrollPosition = this._viewportRuler.getViewportScrollPosition().top;
- if (Math.abs(scrollPosition - this._initialScrollPosition) > this._config.threshold) {
- this._detach();
- }
- else {
- this._overlayRef.updatePosition();
- }
- });
- }
- else {
- this._scrollSubscription = stream.subscribe(this._detach);
- }
- }
- /** Disables the closing the attached overlay on scroll. */
- disable() {
- if (this._scrollSubscription) {
- this._scrollSubscription.unsubscribe();
- this._scrollSubscription = null;
- }
- }
- detach() {
- this.disable();
- this._overlayRef = null;
- }
- /** Detaches the overlay ref and disables the scroll strategy. */
- _detach = () => {
- this.disable();
- if (this._overlayRef.hasAttached()) {
- this._ngZone.run(() => this._overlayRef.detach());
- }
- };
- }
- /** Scroll strategy that doesn't do anything. */
- class NoopScrollStrategy {
- /** Does nothing, as this scroll strategy is a no-op. */
- enable() { }
- /** Does nothing, as this scroll strategy is a no-op. */
- disable() { }
- /** Does nothing, as this scroll strategy is a no-op. */
- attach() { }
- }
- /**
- * Gets whether an element is scrolled outside of view by any of its parent scrolling containers.
- * @param element Dimensions of the element (from getBoundingClientRect)
- * @param scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)
- * @returns Whether the element is scrolled out of view
- * @docs-private
- */
- function isElementScrolledOutsideView(element, scrollContainers) {
- return scrollContainers.some(containerBounds => {
- const outsideAbove = element.bottom < containerBounds.top;
- const outsideBelow = element.top > containerBounds.bottom;
- const outsideLeft = element.right < containerBounds.left;
- const outsideRight = element.left > containerBounds.right;
- return outsideAbove || outsideBelow || outsideLeft || outsideRight;
- });
- }
- /**
- * Gets whether an element is clipped by any of its scrolling containers.
- * @param element Dimensions of the element (from getBoundingClientRect)
- * @param scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)
- * @returns Whether the element is clipped
- * @docs-private
- */
- function isElementClippedByScrolling(element, scrollContainers) {
- return scrollContainers.some(scrollContainerRect => {
- const clippedAbove = element.top < scrollContainerRect.top;
- const clippedBelow = element.bottom > scrollContainerRect.bottom;
- const clippedLeft = element.left < scrollContainerRect.left;
- const clippedRight = element.right > scrollContainerRect.right;
- return clippedAbove || clippedBelow || clippedLeft || clippedRight;
- });
- }
- /**
- * Strategy that will update the element position as the user is scrolling.
- */
- class RepositionScrollStrategy {
- _scrollDispatcher;
- _viewportRuler;
- _ngZone;
- _config;
- _scrollSubscription = null;
- _overlayRef;
- constructor(_scrollDispatcher, _viewportRuler, _ngZone, _config) {
- this._scrollDispatcher = _scrollDispatcher;
- this._viewportRuler = _viewportRuler;
- this._ngZone = _ngZone;
- this._config = _config;
- }
- /** Attaches this scroll strategy to an overlay. */
- attach(overlayRef) {
- if (this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {
- throw getMatScrollStrategyAlreadyAttachedError();
- }
- this._overlayRef = overlayRef;
- }
- /** Enables repositioning of the attached overlay on scroll. */
- enable() {
- if (!this._scrollSubscription) {
- const throttle = this._config ? this._config.scrollThrottle : 0;
- this._scrollSubscription = this._scrollDispatcher.scrolled(throttle).subscribe(() => {
- this._overlayRef.updatePosition();
- // TODO(crisbeto): make `close` on by default once all components can handle it.
- if (this._config && this._config.autoClose) {
- const overlayRect = this._overlayRef.overlayElement.getBoundingClientRect();
- const { width, height } = this._viewportRuler.getViewportSize();
- // TODO(crisbeto): include all ancestor scroll containers here once
- // we have a way of exposing the trigger element to the scroll strategy.
- const parentRects = [{ width, height, bottom: height, right: width, top: 0, left: 0 }];
- if (isElementScrolledOutsideView(overlayRect, parentRects)) {
- this.disable();
- this._ngZone.run(() => this._overlayRef.detach());
- }
- }
- });
- }
- }
- /** Disables repositioning of the attached overlay on scroll. */
- disable() {
- if (this._scrollSubscription) {
- this._scrollSubscription.unsubscribe();
- this._scrollSubscription = null;
- }
- }
- detach() {
- this.disable();
- this._overlayRef = null;
- }
- }
- /**
- * Options for how an overlay will handle scrolling.
- *
- * Users can provide a custom value for `ScrollStrategyOptions` to replace the default
- * behaviors. This class primarily acts as a factory for ScrollStrategy instances.
- */
- class ScrollStrategyOptions {
- _scrollDispatcher = inject(ScrollDispatcher);
- _viewportRuler = inject(ViewportRuler);
- _ngZone = inject(NgZone);
- _document = inject(DOCUMENT);
- constructor() { }
- /** Do nothing on scroll. */
- noop = () => new NoopScrollStrategy();
- /**
- * Close the overlay as soon as the user scrolls.
- * @param config Configuration to be used inside the scroll strategy.
- */
- close = (config) => new CloseScrollStrategy(this._scrollDispatcher, this._ngZone, this._viewportRuler, config);
- /** Block scrolling. */
- block = () => new BlockScrollStrategy(this._viewportRuler, this._document);
- /**
- * Update the overlay's position on scroll.
- * @param config Configuration to be used inside the scroll strategy.
- * Allows debouncing the reposition calls.
- */
- reposition = (config) => new RepositionScrollStrategy(this._scrollDispatcher, this._viewportRuler, this._ngZone, config);
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollStrategyOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollStrategyOptions, providedIn: 'root' });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScrollStrategyOptions, decorators: [{
- type: Injectable,
- args: [{ providedIn: 'root' }]
- }], ctorParameters: () => [] });
- /** Initial configuration used when creating an overlay. */
- class OverlayConfig {
- /** Strategy with which to position the overlay. */
- positionStrategy;
- /** Strategy to be used when handling scroll events while the overlay is open. */
- scrollStrategy = new NoopScrollStrategy();
- /** Custom class to add to the overlay pane. */
- panelClass = '';
- /** Whether the overlay has a backdrop. */
- hasBackdrop = false;
- /** Custom class to add to the backdrop */
- backdropClass = 'cdk-overlay-dark-backdrop';
- /** The width of the overlay panel. If a number is provided, pixel units are assumed. */
- width;
- /** The height of the overlay panel. If a number is provided, pixel units are assumed. */
- height;
- /** The min-width of the overlay panel. If a number is provided, pixel units are assumed. */
- minWidth;
- /** The min-height of the overlay panel. If a number is provided, pixel units are assumed. */
- minHeight;
- /** The max-width of the overlay panel. If a number is provided, pixel units are assumed. */
- maxWidth;
- /** The max-height of the overlay panel. If a number is provided, pixel units are assumed. */
- maxHeight;
- /**
- * Direction of the text in the overlay panel. If a `Directionality` instance
- * is passed in, the overlay will handle changes to its value automatically.
- */
- direction;
- /**
- * Whether the overlay should be disposed of when the user goes backwards/forwards in history.
- * Note that this usually doesn't include clicking on links (unless the user is using
- * the `HashLocationStrategy`).
- */
- disposeOnNavigation = false;
- constructor(config) {
- if (config) {
- // Use `Iterable` instead of `Array` because TypeScript, as of 3.6.3,
- // loses the array generic type in the `for of`. But we *also* have to use `Array` because
- // typescript won't iterate over an `Iterable` unless you compile with `--downlevelIteration`
- const configKeys = Object.keys(config);
- for (const key of configKeys) {
- if (config[key] !== undefined) {
- // TypeScript, as of version 3.5, sees the left-hand-side of this expression
- // as "I don't know *which* key this is, so the only valid value is the intersection
- // of all the possible values." In this case, that happens to be `undefined`. TypeScript
- // is not smart enough to see that the right-hand-side is actually an access of the same
- // exact type with the same exact key, meaning that the value type must be identical.
- // So we use `any` to work around this.
- this[key] = config[key];
- }
- }
- }
- }
- }
- /** The points of the origin element and the overlay element to connect. */
- class ConnectionPositionPair {
- offsetX;
- offsetY;
- panelClass;
- /** X-axis attachment point for connected overlay origin. Can be 'start', 'end', or 'center'. */
- originX;
- /** Y-axis attachment point for connected overlay origin. Can be 'top', 'bottom', or 'center'. */
- originY;
- /** X-axis attachment point for connected overlay. Can be 'start', 'end', or 'center'. */
- overlayX;
- /** Y-axis attachment point for connected overlay. Can be 'top', 'bottom', or 'center'. */
- overlayY;
- constructor(origin, overlay,
- /** Offset along the X axis. */
- offsetX,
- /** Offset along the Y axis. */
- offsetY,
- /** Class(es) to be applied to the panel while this position is active. */
- panelClass) {
- this.offsetX = offsetX;
- this.offsetY = offsetY;
- this.panelClass = panelClass;
- this.originX = origin.originX;
- this.originY = origin.originY;
- this.overlayX = overlay.overlayX;
- this.overlayY = overlay.overlayY;
- }
- }
- /**
- * Set of properties regarding the position of the origin and overlay relative to the viewport
- * with respect to the containing Scrollable elements.
- *
- * The overlay and origin are clipped if any part of their bounding client rectangle exceeds the
- * bounds of any one of the strategy's Scrollable's bounding client rectangle.
- *
- * The overlay and origin are outside view if there is no overlap between their bounding client
- * rectangle and any one of the strategy's Scrollable's bounding client rectangle.
- *
- * ----------- -----------
- * | outside | | clipped |
- * | view | --------------------------
- * | | | | | |
- * ---------- | ----------- |
- * -------------------------- | |
- * | | | Scrollable |
- * | | | |
- * | | --------------------------
- * | Scrollable |
- * | |
- * --------------------------
- *
- * @docs-private
- */
- class ScrollingVisibility {
- isOriginClipped;
- isOriginOutsideView;
- isOverlayClipped;
- isOverlayOutsideView;
- }
- /** The change event emitted by the strategy when a fallback position is used. */
- class ConnectedOverlayPositionChange {
- connectionPair;
- scrollableViewProperties;
- constructor(
- /** The position used as a result of this change. */
- connectionPair,
- /** @docs-private */
- scrollableViewProperties) {
- this.connectionPair = connectionPair;
- this.scrollableViewProperties = scrollableViewProperties;
- }
- }
- /**
- * Validates whether a vertical position property matches the expected values.
- * @param property Name of the property being validated.
- * @param value Value of the property being validated.
- * @docs-private
- */
- function validateVerticalPosition(property, value) {
- if (value !== 'top' && value !== 'bottom' && value !== 'center') {
- throw Error(`ConnectedPosition: Invalid ${property} "${value}". ` +
- `Expected "top", "bottom" or "center".`);
- }
- }
- /**
- * Validates whether a horizontal position property matches the expected values.
- * @param property Name of the property being validated.
- * @param value Value of the property being validated.
- * @docs-private
- */
- function validateHorizontalPosition(property, value) {
- if (value !== 'start' && value !== 'end' && value !== 'center') {
- throw Error(`ConnectedPosition: Invalid ${property} "${value}". ` +
- `Expected "start", "end" or "center".`);
- }
- }
- /**
- * Service for dispatching events that land on the body to appropriate overlay ref,
- * if any. It maintains a list of attached overlays to determine best suited overlay based
- * on event target and order of overlay opens.
- */
- class BaseOverlayDispatcher {
- /** Currently attached overlays in the order they were attached. */
- _attachedOverlays = [];
- _document = inject(DOCUMENT);
- _isAttached;
- constructor() { }
- ngOnDestroy() {
- this.detach();
- }
- /** Add a new overlay to the list of attached overlay refs. */
- add(overlayRef) {
- // Ensure that we don't get the same overlay multiple times.
- this.remove(overlayRef);
- this._attachedOverlays.push(overlayRef);
- }
- /** Remove an overlay from the list of attached overlay refs. */
- remove(overlayRef) {
- const index = this._attachedOverlays.indexOf(overlayRef);
- if (index > -1) {
- this._attachedOverlays.splice(index, 1);
- }
- // Remove the global listener once there are no more overlays.
- if (this._attachedOverlays.length === 0) {
- this.detach();
- }
- }
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BaseOverlayDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BaseOverlayDispatcher, providedIn: 'root' });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BaseOverlayDispatcher, decorators: [{
- type: Injectable,
- args: [{ providedIn: 'root' }]
- }], ctorParameters: () => [] });
- /**
- * Service for dispatching keyboard events that land on the body to appropriate overlay ref,
- * if any. It maintains a list of attached overlays to determine best suited overlay based
- * on event target and order of overlay opens.
- */
- class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {
- _ngZone = inject(NgZone);
- _renderer = inject(RendererFactory2).createRenderer(null, null);
- _cleanupKeydown;
- /** Add a new overlay to the list of attached overlay refs. */
- add(overlayRef) {
- super.add(overlayRef);
- // Lazily start dispatcher once first overlay is added
- if (!this._isAttached) {
- this._ngZone.runOutsideAngular(() => {
- this._cleanupKeydown = this._renderer.listen('body', 'keydown', this._keydownListener);
- });
- this._isAttached = true;
- }
- }
- /** Detaches the global keyboard event listener. */
- detach() {
- if (this._isAttached) {
- this._cleanupKeydown?.();
- this._isAttached = false;
- }
- }
- /** Keyboard event listener that will be attached to the body. */
- _keydownListener = (event) => {
- const overlays = this._attachedOverlays;
- for (let i = overlays.length - 1; i > -1; i--) {
- // Dispatch the keydown event to the top overlay which has subscribers to its keydown events.
- // We want to target the most recent overlay, rather than trying to match where the event came
- // from, because some components might open an overlay, but keep focus on a trigger element
- // (e.g. for select and autocomplete). We skip overlays without keydown event subscriptions,
- // because we don't want overlays that don't handle keyboard events to block the ones below
- // them that do.
- if (overlays[i]._keydownEvents.observers.length > 0) {
- this._ngZone.run(() => overlays[i]._keydownEvents.next(event));
- break;
- }
- }
- };
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayKeyboardDispatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayKeyboardDispatcher, providedIn: 'root' });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayKeyboardDispatcher, decorators: [{
- type: Injectable,
- args: [{ providedIn: 'root' }]
- }] });
- /**
- * Service for dispatching mouse click events that land on the body to appropriate overlay ref,
- * if any. It maintains a list of attached overlays to determine best suited overlay based
- * on event target and order of overlay opens.
- */
- class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
- _platform = inject(Platform);
- _ngZone = inject(NgZone);
- _renderer = inject(RendererFactory2).createRenderer(null, null);
- _cursorOriginalValue;
- _cursorStyleIsSet = false;
- _pointerDownEventTarget;
- _cleanups;
- /** Add a new overlay to the list of attached overlay refs. */
- add(overlayRef) {
- super.add(overlayRef);
- // Safari on iOS does not generate click events for non-interactive
- // elements. However, we want to receive a click for any element outside
- // the overlay. We can force a "clickable" state by setting
- // `cursor: pointer` on the document body. See:
- // https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile
- // https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
- if (!this._isAttached) {
- const body = this._document.body;
- const eventOptions = { capture: true };
- this._cleanups = this._ngZone.runOutsideAngular(() => [
- _bindEventWithOptions(this._renderer, body, 'pointerdown', this._pointerDownListener, eventOptions),
- _bindEventWithOptions(this._renderer, body, 'click', this._clickListener, eventOptions),
- _bindEventWithOptions(this._renderer, body, 'auxclick', this._clickListener, eventOptions),
- _bindEventWithOptions(this._renderer, body, 'contextmenu', this._clickListener, eventOptions),
- ]);
- // click event is not fired on iOS. To make element "clickable" we are
- // setting the cursor to pointer
- if (this._platform.IOS && !this._cursorStyleIsSet) {
- this._cursorOriginalValue = body.style.cursor;
- body.style.cursor = 'pointer';
- this._cursorStyleIsSet = true;
- }
- this._isAttached = true;
- }
- }
- /** Detaches the global keyboard event listener. */
- detach() {
- if (this._isAttached) {
- this._cleanups?.forEach(cleanup => cleanup());
- this._cleanups = undefined;
- if (this._platform.IOS && this._cursorStyleIsSet) {
- this._document.body.style.cursor = this._cursorOriginalValue;
- this._cursorStyleIsSet = false;
- }
- this._isAttached = false;
- }
- }
- /** Store pointerdown event target to track origin of click. */
- _pointerDownListener = (event) => {
- this._pointerDownEventTarget = _getEventTarget(event);
- };
- /** Click event listener that will be attached to the body propagate phase. */
- _clickListener = (event) => {
- const target = _getEventTarget(event);
- // In case of a click event, we want to check the origin of the click
- // (e.g. in case where a user starts a click inside the overlay and
- // releases the click outside of it).
- // This is done by using the event target of the preceding pointerdown event.
- // Every click event caused by a pointer device has a preceding pointerdown
- // event, unless the click was programmatically triggered (e.g. in a unit test).
- const origin = event.type === 'click' && this._pointerDownEventTarget
- ? this._pointerDownEventTarget
- : target;
- // Reset the stored pointerdown event target, to avoid having it interfere
- // in subsequent events.
- this._pointerDownEventTarget = null;
- // We copy the array because the original may be modified asynchronously if the
- // outsidePointerEvents listener decides to detach overlays resulting in index errors inside
- // the for loop.
- const overlays = this._attachedOverlays.slice();
- // Dispatch the mouse event to the top overlay which has subscribers to its mouse events.
- // We want to target all overlays for which the click could be considered as outside click.
- // As soon as we reach an overlay for which the click is not outside click we break off
- // the loop.
- for (let i = overlays.length - 1; i > -1; i--) {
- const overlayRef = overlays[i];
- if (overlayRef._outsidePointerEvents.observers.length < 1 || !overlayRef.hasAttached()) {
- continue;
- }
- // If it's a click inside the overlay, just break - we should do nothing
- // If it's an outside click (both origin and target of the click) dispatch the mouse event,
- // and proceed with the next overlay
- if (containsPierceShadowDom(overlayRef.overlayElement, target) ||
- containsPierceShadowDom(overlayRef.overlayElement, origin)) {
- break;
- }
- const outsidePointerEvents = overlayRef._outsidePointerEvents;
- /** @breaking-change 14.0.0 _ngZone will be required. */
- if (this._ngZone) {
- this._ngZone.run(() => outsidePointerEvents.next(event));
- }
- else {
- outsidePointerEvents.next(event);
- }
- }
- };
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayOutsideClickDispatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayOutsideClickDispatcher, providedIn: 'root' });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayOutsideClickDispatcher, decorators: [{
- type: Injectable,
- args: [{ providedIn: 'root' }]
- }] });
- /** Version of `Element.contains` that transcends shadow DOM boundaries. */
- function containsPierceShadowDom(parent, child) {
- const supportsShadowRoot = typeof ShadowRoot !== 'undefined' && ShadowRoot;
- let current = child;
- while (current) {
- if (current === parent) {
- return true;
- }
- current =
- supportsShadowRoot && current instanceof ShadowRoot ? current.host : current.parentNode;
- }
- return false;
- }
- class _CdkOverlayStyleLoader {
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: _CdkOverlayStyleLoader, deps: [], target: i0.ɵɵFactoryTarget.Component });
- 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 });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: _CdkOverlayStyleLoader, decorators: [{
- type: Component,
- 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"] }]
- }] });
- /** Container inside which all overlays will render. */
- class OverlayContainer {
- _platform = inject(Platform);
- _containerElement;
- _document = inject(DOCUMENT);
- _styleLoader = inject(_CdkPrivateStyleLoader);
- constructor() { }
- ngOnDestroy() {
- this._containerElement?.remove();
- }
- /**
- * This method returns the overlay container element. It will lazily
- * create the element the first time it is called to facilitate using
- * the container in non-browser environments.
- * @returns the container element
- */
- getContainerElement() {
- this._loadStyles();
- if (!this._containerElement) {
- this._createContainer();
- }
- return this._containerElement;
- }
- /**
- * Create the overlay container element, which is simply a div
- * with the 'cdk-overlay-container' class on the document body.
- */
- _createContainer() {
- const containerClass = 'cdk-overlay-container';
- // TODO(crisbeto): remove the testing check once we have an overlay testing
- // module or Angular starts tearing down the testing `NgModule`. See:
- // https://github.com/angular/angular/issues/18831
- if (this._platform.isBrowser || _isTestEnvironment()) {
- const oppositePlatformContainers = this._document.querySelectorAll(`.${containerClass}[platform="server"], ` + `.${containerClass}[platform="test"]`);
- // Remove any old containers from the opposite platform.
- // This can happen when transitioning from the server to the client.
- for (let i = 0; i < oppositePlatformContainers.length; i++) {
- oppositePlatformContainers[i].remove();
- }
- }
- const container = this._document.createElement('div');
- container.classList.add(containerClass);
- // A long time ago we kept adding new overlay containers whenever a new app was instantiated,
- // but at some point we added logic which clears the duplicate ones in order to avoid leaks.
- // The new logic was a little too aggressive since it was breaking some legitimate use cases.
- // To mitigate the problem we made it so that only containers from a different platform are
- // cleared, but the side-effect was that people started depending on the overly-aggressive
- // logic to clean up their tests for them. Until we can introduce an overlay-specific testing
- // module which does the cleanup, we try to detect that we're in a test environment and we
- // always clear the container. See #17006.
- // TODO(crisbeto): remove the test environment check once we have an overlay testing module.
- if (_isTestEnvironment()) {
- container.setAttribute('platform', 'test');
- }
- else if (!this._platform.isBrowser) {
- container.setAttribute('platform', 'server');
- }
- this._document.body.appendChild(container);
- this._containerElement = container;
- }
- /** Loads the structural styles necessary for the overlay to work. */
- _loadStyles() {
- this._styleLoader.load(_CdkOverlayStyleLoader);
- }
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayContainer, providedIn: 'root' });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayContainer, decorators: [{
- type: Injectable,
- args: [{ providedIn: 'root' }]
- }], ctorParameters: () => [] });
- /** Encapsulates the logic for attaching and detaching a backdrop. */
- class BackdropRef {
- _renderer;
- _ngZone;
- element;
- _cleanupClick;
- _cleanupTransitionEnd;
- _fallbackTimeout;
- constructor(document, _renderer, _ngZone, onClick) {
- this._renderer = _renderer;
- this._ngZone = _ngZone;
- this.element = document.createElement('div');
- this.element.classList.add('cdk-overlay-backdrop');
- this._cleanupClick = _renderer.listen(this.element, 'click', onClick);
- }
- detach() {
- this._ngZone.runOutsideAngular(() => {
- const element = this.element;
- clearTimeout(this._fallbackTimeout);
- this._cleanupTransitionEnd?.();
- this._cleanupTransitionEnd = this._renderer.listen(element, 'transitionend', this.dispose);
- this._fallbackTimeout = setTimeout(this.dispose, 500);
- // If the backdrop doesn't have a transition, the `transitionend` event won't fire.
- // In this case we make it unclickable and we try to remove it after a delay.
- element.style.pointerEvents = 'none';
- element.classList.remove('cdk-overlay-backdrop-showing');
- });
- }
- dispose = () => {
- clearTimeout(this._fallbackTimeout);
- this._cleanupClick?.();
- this._cleanupTransitionEnd?.();
- this._cleanupClick = this._cleanupTransitionEnd = this._fallbackTimeout = undefined;
- this.element.remove();
- };
- }
- /**
- * Reference to an overlay that has been created with the Overlay service.
- * Used to manipulate or dispose of said overlay.
- */
- class OverlayRef {
- _portalOutlet;
- _host;
- _pane;
- _config;
- _ngZone;
- _keyboardDispatcher;
- _document;
- _location;
- _outsideClickDispatcher;
- _animationsDisabled;
- _injector;
- _renderer;
- _backdropClick = new Subject();
- _attachments = new Subject();
- _detachments = new Subject();
- _positionStrategy;
- _scrollStrategy;
- _locationChanges = Subscription.EMPTY;
- _backdropRef = null;
- /**
- * Reference to the parent of the `_host` at the time it was detached. Used to restore
- * the `_host` to its original position in the DOM when it gets re-attached.
- */
- _previousHostParent;
- /** Stream of keydown events dispatched to this overlay. */
- _keydownEvents = new Subject();
- /** Stream of mouse outside events dispatched to this overlay. */
- _outsidePointerEvents = new Subject();
- _renders = new Subject();
- _afterRenderRef;
- /** Reference to the currently-running `afterNextRender` call. */
- _afterNextRenderRef;
- constructor(_portalOutlet, _host, _pane, _config, _ngZone, _keyboardDispatcher, _document, _location, _outsideClickDispatcher, _animationsDisabled = false, _injector, _renderer) {
- this._portalOutlet = _portalOutlet;
- this._host = _host;
- this._pane = _pane;
- this._config = _config;
- this._ngZone = _ngZone;
- this._keyboardDispatcher = _keyboardDispatcher;
- this._document = _document;
- this._location = _location;
- this._outsideClickDispatcher = _outsideClickDispatcher;
- this._animationsDisabled = _animationsDisabled;
- this._injector = _injector;
- this._renderer = _renderer;
- if (_config.scrollStrategy) {
- this._scrollStrategy = _config.scrollStrategy;
- this._scrollStrategy.attach(this);
- }
- this._positionStrategy = _config.positionStrategy;
- // Users could open the overlay from an `effect`, in which case we need to
- // run the `afterRender` as `untracked`. We don't recommend that users do
- // this, but we also don't want to break users who are doing it.
- this._afterRenderRef = untracked(() => afterRender(() => {
- this._renders.next();
- }, { injector: this._injector }));
- }
- /** The overlay's HTML element */
- get overlayElement() {
- return this._pane;
- }
- /** The overlay's backdrop HTML element. */
- get backdropElement() {
- return this._backdropRef?.element || null;
- }
- /**
- * Wrapper around the panel element. Can be used for advanced
- * positioning where a wrapper with specific styling is
- * required around the overlay pane.
- */
- get hostElement() {
- return this._host;
- }
- /**
- * Attaches content, given via a Portal, to the overlay.
- * If the overlay is configured to have a backdrop, it will be created.
- *
- * @param portal Portal instance to which to attach the overlay.
- * @returns The portal attachment result.
- */
- attach(portal) {
- // Insert the host into the DOM before attaching the portal, otherwise
- // the animations module will skip animations on repeat attachments.
- if (!this._host.parentElement && this._previousHostParent) {
- this._previousHostParent.appendChild(this._host);
- }
- const attachResult = this._portalOutlet.attach(portal);
- if (this._positionStrategy) {
- this._positionStrategy.attach(this);
- }
- this._updateStackingOrder();
- this._updateElementSize();
- this._updateElementDirection();
- if (this._scrollStrategy) {
- this._scrollStrategy.enable();
- }
- // We need to clean this up ourselves, because we're passing in an
- // `EnvironmentInjector` below which won't ever be destroyed.
- // Otherwise it causes some callbacks to be retained (see #29696).
- this._afterNextRenderRef?.destroy();
- // Update the position once the overlay is fully rendered before attempting to position it,
- // as the position may depend on the size of the rendered content.
- this._afterNextRenderRef = afterNextRender(() => {
- // The overlay could've been detached before the callback executed.
- if (this.hasAttached()) {
- this.updatePosition();
- }
- }, { injector: this._injector });
- // Enable pointer events for the overlay pane element.
- this._togglePointerEvents(true);
- if (this._config.hasBackdrop) {
- this._attachBackdrop();
- }
- if (this._config.panelClass) {
- this._toggleClasses(this._pane, this._config.panelClass, true);
- }
- // Only emit the `attachments` event once all other setup is done.
- this._attachments.next();
- // Track this overlay by the keyboard dispatcher
- this._keyboardDispatcher.add(this);
- if (this._config.disposeOnNavigation) {
- this._locationChanges = this._location.subscribe(() => this.dispose());
- }
- this._outsideClickDispatcher.add(this);
- // TODO(crisbeto): the null check is here, because the portal outlet returns `any`.
- // We should be guaranteed for the result to be `ComponentRef | EmbeddedViewRef`, but
- // `instanceof EmbeddedViewRef` doesn't appear to work at the moment.
- if (typeof attachResult?.onDestroy === 'function') {
- // In most cases we control the portal and we know when it is being detached so that
- // we can finish the disposal process. The exception is if the user passes in a custom
- // `ViewContainerRef` that isn't destroyed through the overlay API. Note that we use
- // `detach` here instead of `dispose`, because we don't know if the user intends to
- // reattach the overlay at a later point. It also has the advantage of waiting for animations.
- attachResult.onDestroy(() => {
- if (this.hasAttached()) {
- // We have to delay the `detach` call, because detaching immediately prevents
- // other destroy hooks from running. This is likely a framework bug similar to
- // https://github.com/angular/angular/issues/46119
- this._ngZone.runOutsideAngular(() => Promise.resolve().then(() => this.detach()));
- }
- });
- }
- return attachResult;
- }
- /**
- * Detaches an overlay from a portal.
- * @returns The portal detachment result.
- */
- detach() {
- if (!this.hasAttached()) {
- return;
- }
- this.detachBackdrop();
- // When the overlay is detached, the pane element should disable pointer events.
- // This is necessary because otherwise the pane element will cover the page and disable
- // pointer events therefore. Depends on the position strategy and the applied pane boundaries.
- this._togglePointerEvents(false);
- if (this._positionStrategy && this._positionStrategy.detach) {
- this._positionStrategy.detach();
- }
- if (this._scrollStrategy) {
- this._scrollStrategy.disable();
- }
- const detachmentResult = this._portalOutlet.detach();
- // Only emit after everything is detached.
- this._detachments.next();
- // Remove this overlay from keyboard dispatcher tracking.
- this._keyboardDispatcher.remove(this);
- // Keeping the host element in the DOM can cause scroll jank, because it still gets
- // rendered, even though it's transparent and unclickable which is why we remove it.
- this._detachContentWhenEmpty();
- this._locationChanges.unsubscribe();
- this._outsideClickDispatcher.remove(this);
- return detachmentResult;
- }
- /** Cleans up the overlay from the DOM. */
- dispose() {
- const isAttached = this.hasAttached();
- if (this._positionStrategy) {
- this._positionStrategy.dispose();
- }
- this._disposeScrollStrategy();
- this._backdropRef?.dispose();
- this._locationChanges.unsubscribe();
- this._keyboardDispatcher.remove(this);
- this._portalOutlet.dispose();
- this._attachments.complete();
- this._backdropClick.complete();
- this._keydownEvents.complete();
- this._outsidePointerEvents.complete();
- this._outsideClickDispatcher.remove(this);
- this._host?.remove();
- this._afterNextRenderRef?.destroy();
- this._previousHostParent = this._pane = this._host = this._backdropRef = null;
- if (isAttached) {
- this._detachments.next();
- }
- this._detachments.complete();
- this._afterRenderRef.destroy();
- this._renders.complete();
- }
- /** Whether the overlay has attached content. */
- hasAttached() {
- return this._portalOutlet.hasAttached();
- }
- /** Gets an observable that emits when the backdrop has been clicked. */
- backdropClick() {
- return this._backdropClick;
- }
- /** Gets an observable that emits when the overlay has been attached. */
- attachments() {
- return this._attachments;
- }
- /** Gets an observable that emits when the overlay has been detached. */
- detachments() {
- return this._detachments;
- }
- /** Gets an observable of keydown events targeted to this overlay. */
- keydownEvents() {
- return this._keydownEvents;
- }
- /** Gets an observable of pointer events targeted outside this overlay. */
- outsidePointerEvents() {
- return this._outsidePointerEvents;
- }
- /** Gets the current overlay configuration, which is immutable. */
- getConfig() {
- return this._config;
- }
- /** Updates the position of the overlay based on the position strategy. */
- updatePosition() {
- if (this._positionStrategy) {
- this._positionStrategy.apply();
- }
- }
- /** Switches to a new position strategy and updates the overlay position. */
- updatePositionStrategy(strategy) {
- if (strategy === this._positionStrategy) {
- return;
- }
- if (this._positionStrategy) {
- this._positionStrategy.dispose();
- }
- this._positionStrategy = strategy;
- if (this.hasAttached()) {
- strategy.attach(this);
- this.updatePosition();
- }
- }
- /** Update the size properties of the overlay. */
- updateSize(sizeConfig) {
- this._config = { ...this._config, ...sizeConfig };
- this._updateElementSize();
- }
- /** Sets the LTR/RTL direction for the overlay. */
- setDirection(dir) {
- this._config = { ...this._config, direction: dir };
- this._updateElementDirection();
- }
- /** Add a CSS class or an array of classes to the overlay pane. */
- addPanelClass(classes) {
- if (this._pane) {
- this._toggleClasses(this._pane, classes, true);
- }
- }
- /** Remove a CSS class or an array of classes from the overlay pane. */
- removePanelClass(classes) {
- if (this._pane) {
- this._toggleClasses(this._pane, classes, false);
- }
- }
- /**
- * Returns the layout direction of the overlay panel.
- */
- getDirection() {
- const direction = this._config.direction;
- if (!direction) {
- return 'ltr';
- }
- return typeof direction === 'string' ? direction : direction.value;
- }
- /** Switches to a new scroll strategy. */
- updateScrollStrategy(strategy) {
- if (strategy === this._scrollStrategy) {
- return;
- }
- this._disposeScrollStrategy();
- this._scrollStrategy = strategy;
- if (this.hasAttached()) {
- strategy.attach(this);
- strategy.enable();
- }
- }
- /** Updates the text direction of the overlay panel. */
- _updateElementDirection() {
- this._host.setAttribute('dir', this.getDirection());
- }
- /** Updates the size of the overlay element based on the overlay config. */
- _updateElementSize() {
- if (!this._pane) {
- return;
- }
- const style = this._pane.style;
- style.width = coerceCssPixelValue(this._config.width);
- style.height = coerceCssPixelValue(this._config.height);
- style.minWidth = coerceCssPixelValue(this._config.minWidth);
- style.minHeight = coerceCssPixelValue(this._config.minHeight);
- style.maxWidth = coerceCssPixelValue(this._config.maxWidth);
- style.maxHeight = coerceCssPixelValue(this._config.maxHeight);
- }
- /** Toggles the pointer events for the overlay pane element. */
- _togglePointerEvents(enablePointer) {
- this._pane.style.pointerEvents = enablePointer ? '' : 'none';
- }
- /** Attaches a backdrop for this overlay. */
- _attachBackdrop() {
- const showingClass = 'cdk-overlay-backdrop-showing';
- this._backdropRef?.dispose();
- this._backdropRef = new BackdropRef(this._document, this._renderer, this._ngZone, event => {
- this._backdropClick.next(event);
- });
- if (this._animationsDisabled) {
- this._backdropRef.element.classList.add('cdk-overlay-backdrop-noop-animation');
- }
- if (this._config.backdropClass) {
- this._toggleClasses(this._backdropRef.element, this._config.backdropClass, true);
- }
- // Insert the backdrop before the pane in the DOM order,
- // in order to handle stacked overlays properly.
- this._host.parentElement.insertBefore(this._backdropRef.element, this._host);
- // Add class to fade-in the backdrop after one frame.
- if (!this._animationsDisabled && typeof requestAnimationFrame !== 'undefined') {
- this._ngZone.runOutsideAngular(() => {
- requestAnimationFrame(() => this._backdropRef?.element.classList.add(showingClass));
- });
- }
- else {
- this._backdropRef.element.classList.add(showingClass);
- }
- }
- /**
- * Updates the stacking order of the element, moving it to the top if necessary.
- * This is required in cases where one overlay was detached, while another one,
- * that should be behind it, was destroyed. The next time both of them are opened,
- * the stacking will be wrong, because the detached element's pane will still be
- * in its original DOM position.
- */
- _updateStackingOrder() {
- if (this._host.nextSibling) {
- this._host.parentNode.appendChild(this._host);
- }
- }
- /** Detaches the backdrop (if any) associated with the overlay. */
- detachBackdrop() {
- if (this._animationsDisabled) {
- this._backdropRef?.dispose();
- this._backdropRef = null;
- }
- else {
- this._backdropRef?.detach();
- }
- }
- /** Toggles a single CSS class or an array of classes on an element. */
- _toggleClasses(element, cssClasses, isAdd) {
- const classes = coerceArray(cssClasses || []).filter(c => !!c);
- if (classes.length) {
- isAdd ? element.classList.add(...classes) : element.classList.remove(...classes);
- }
- }
- /** Detaches the overlay content next time the zone stabilizes. */
- _detachContentWhenEmpty() {
- // Normally we wouldn't have to explicitly run this outside the `NgZone`, however
- // if the consumer is using `zone-patch-rxjs`, the `Subscription.unsubscribe` call will
- // be patched to run inside the zone, which will throw us into an infinite loop.
- this._ngZone.runOutsideAngular(() => {
- // We can't remove the host here immediately, because the overlay pane's content
- // might still be animating. This stream helps us avoid interrupting the animation
- // by waiting for the pane to become empty.
- const subscription = this._renders
- .pipe(takeUntil(merge(this._attachments, this._detachments)))
- .subscribe(() => {
- // Needs a couple of checks for the pane and host, because
- // they may have been removed by the time the zone stabilizes.
- if (!this._pane || !this._host || this._pane.children.length === 0) {
- if (this._pane && this._config.panelClass) {
- this._toggleClasses(this._pane, this._config.panelClass, false);
- }
- if (this._host && this._host.parentElement) {
- this._previousHostParent = this._host.parentElement;
- this._host.remove();
- }
- subscription.unsubscribe();
- }
- });
- });
- }
- /** Disposes of a scroll strategy. */
- _disposeScrollStrategy() {
- const scrollStrategy = this._scrollStrategy;
- scrollStrategy?.disable();
- scrollStrategy?.detach?.();
- }
- }
- // TODO: refactor clipping detection into a separate thing (part of scrolling module)
- // TODO: doesn't handle both flexible width and height when it has to scroll along both axis.
- /** Class to be added to the overlay bounding box. */
- const boundingBoxClass = 'cdk-overlay-connected-position-bounding-box';
- /** Regex used to split a string on its CSS units. */
- const cssUnitPattern = /([A-Za-z%]+)$/;
- /**
- * A strategy for positioning overlays. Using this strategy, an overlay is given an
- * implicit position relative some origin element. The relative position is defined in terms of
- * a point on the origin element that is connected to a point on the overlay element. For example,
- * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner
- * of the overlay.
- */
- class FlexibleConnectedPositionStrategy {
- _viewportRuler;
- _document;
- _platform;
- _overlayContainer;
- /** The overlay to which this strategy is attached. */
- _overlayRef;
- /** Whether we're performing the very first positioning of the overlay. */
- _isInitialRender;
- /** Last size used for the bounding box. Used to avoid resizing the overlay after open. */
- _lastBoundingBoxSize = { width: 0, height: 0 };
- /** Whether the overlay was pushed in a previous positioning. */
- _isPushed = false;
- /** Whether the overlay can be pushed on-screen on the initial open. */
- _canPush = true;
- /** Whether the overlay can grow via flexible width/height after the initial open. */
- _growAfterOpen = false;
- /** Whether the overlay's width and height can be constrained to fit within the viewport. */
- _hasFlexibleDimensions = true;
- /** Whether the overlay position is locked. */
- _positionLocked = false;
- /** Cached origin dimensions */
- _originRect;
- /** Cached overlay dimensions */
- _overlayRect;
- /** Cached viewport dimensions */
- _viewportRect;
- /** Cached container dimensions */
- _containerRect;
- /** Amount of space that must be maintained between the overlay and the edge of the viewport. */
- _viewportMargin = 0;
- /** The Scrollable containers used to check scrollable view properties on position change. */
- _scrollables = [];
- /** Ordered list of preferred positions, from most to least desirable. */
- _preferredPositions = [];
- /** The origin element against which the overlay will be positioned. */
- _origin;
- /** The overlay pane element. */
- _pane;
- /** Whether the strategy has been disposed of already. */
- _isDisposed;
- /**
- * Parent element for the overlay panel used to constrain the overlay panel's size to fit
- * within the viewport.
- */
- _boundingBox;
- /** The last position to have been calculated as the best fit position. */
- _lastPosition;
- /** The last calculated scroll visibility. Only tracked */
- _lastScrollVisibility;
- /** Subject that emits whenever the position changes. */
- _positionChanges = new Subject();
- /** Subscription to viewport size changes. */
- _resizeSubscription = Subscription.EMPTY;
- /** Default offset for the overlay along the x axis. */
- _offsetX = 0;
- /** Default offset for the overlay along the y axis. */
- _offsetY = 0;
- /** Selector to be used when finding the elements on which to set the transform origin. */
- _transformOriginSelector;
- /** Keeps track of the CSS classes that the position strategy has applied on the overlay panel. */
- _appliedPanelClasses = [];
- /** Amount by which the overlay was pushed in each axis during the last time it was positioned. */
- _previousPushAmount;
- /** Observable sequence of position changes. */
- positionChanges = this._positionChanges;
- /** Ordered list of preferred positions, from most to least desirable. */
- get positions() {
- return this._preferredPositions;
- }
- constructor(connectedTo, _viewportRuler, _document, _platform, _overlayContainer) {
- this._viewportRuler = _viewportRuler;
- this._document = _document;
- this._platform = _platform;
- this._overlayContainer = _overlayContainer;
- this.setOrigin(connectedTo);
- }
- /** Attaches this position strategy to an overlay. */
- attach(overlayRef) {
- if (this._overlayRef &&
- overlayRef !== this._overlayRef &&
- (typeof ngDevMode === 'undefined' || ngDevMode)) {
- throw Error('This position strategy is already attached to an overlay');
- }
- this._validatePositions();
- overlayRef.hostElement.classList.add(boundingBoxClass);
- this._overlayRef = overlayRef;
- this._boundingBox = overlayRef.hostElement;
- this._pane = overlayRef.overlayElement;
- this._isDisposed = false;
- this._isInitialRender = true;
- this._lastPosition = null;
- this._resizeSubscription.unsubscribe();
- this._resizeSubscription = this._viewportRuler.change().subscribe(() => {
- // When the window is resized, we want to trigger the next reposition as if it
- // was an initial render, in order for the strategy to pick a new optimal position,
- // otherwise position locking will cause it to stay at the old one.
- this._isInitialRender = true;
- this.apply();
- });
- }
- /**
- * Updates the position of the overlay element, using whichever preferred position relative
- * to the origin best fits on-screen.
- *
- * The selection of a position goes as follows:
- * - If any positions fit completely within the viewport as-is,
- * choose the first position that does so.
- * - If flexible dimensions are enabled and at least one satisfies the given minimum width/height,
- * choose the position with the greatest available size modified by the positions' weight.
- * - If pushing is enabled, take the position that went off-screen the least and push it
- * on-screen.
- * - If none of the previous criteria were met, use the position that goes off-screen the least.
- * @docs-private
- */
- apply() {
- // We shouldn't do anything if the strategy was disposed or we're on the server.
- if (this._isDisposed || !this._platform.isBrowser) {
- return;
- }
- // If the position has been applied already (e.g. when the overlay was opened) and the
- // consumer opted into locking in the position, re-use the old position, in order to
- // prevent the overlay from jumping around.
- if (!this._isInitialRender && this._positionLocked && this._lastPosition) {
- this.reapplyLastPosition();
- return;
- }
- this._clearPanelClasses();
- this._resetOverlayElementStyles();
- this._resetBoundingBoxStyles();
- // We need the bounding rects for the origin, the overlay and the container to determine how to position
- // the overlay relative to the origin.
- // We use the viewport rect to determine whether a position would go off-screen.
- this._viewportRect = this._getNarrowedViewportRect();
- this._originRect = this._getOriginRect();
- this._overlayRect = this._pane.getBoundingClientRect();
- this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();
- const originRect = this._originRect;
- const overlayRect = this._overlayRect;
- const viewportRect = this._viewportRect;
- const containerRect = this._containerRect;
- // Positions where the overlay will fit with flexible dimensions.
- const flexibleFits = [];
- // Fallback if none of the preferred positions fit within the viewport.
- let fallback;
- // Go through each of the preferred positions looking for a good fit.
- // If a good fit is found, it will be applied immediately.
- for (let pos of this._preferredPositions) {
- // Get the exact (x, y) coordinate for the point-of-origin on the origin element.
- let originPoint = this._getOriginPoint(originRect, containerRect, pos);
- // From that point-of-origin, get the exact (x, y) coordinate for the top-left corner of the
- // overlay in this position. We use the top-left corner for calculations and later translate
- // this into an appropriate (top, left, bottom, right) style.
- let overlayPoint = this._getOverlayPoint(originPoint, overlayRect, pos);
- // Calculate how well the overlay would fit into the viewport with this point.
- let overlayFit = this._getOverlayFit(overlayPoint, overlayRect, viewportRect, pos);
- // If the overlay, without any further work, fits into the viewport, use this position.
- if (overlayFit.isCompletelyWithinViewport) {
- this._isPushed = false;
- this._applyPosition(pos, originPoint);
- return;
- }
- // If the overlay has flexible dimensions, we can use this position
- // so long as there's enough space for the minimum dimensions.
- if (this._canFitWithFlexibleDimensions(overlayFit, overlayPoint, viewportRect)) {
- // Save positions where the overlay will fit with flexible dimensions. We will use these
- // if none of the positions fit *without* flexible dimensions.
- flexibleFits.push({
- position: pos,
- origin: originPoint,
- overlayRect,
- boundingBoxRect: this._calculateBoundingBoxRect(originPoint, pos),
- });
- continue;
- }
- // If the current preferred position does not fit on the screen, remember the position
- // if it has more visible area on-screen than we've seen and move onto the next preferred
- // position.
- if (!fallback || fallback.overlayFit.visibleArea < overlayFit.visibleArea) {
- fallback = { overlayFit, overlayPoint, originPoint, position: pos, overlayRect };
- }
- }
- // If there are any positions where the overlay would fit with flexible dimensions, choose the
- // one that has the greatest area available modified by the position's weight
- if (flexibleFits.length) {
- let bestFit = null;
- let bestScore = -1;
- for (const fit of flexibleFits) {
- const score = fit.boundingBoxRect.width * fit.boundingBoxRect.height * (fit.position.weight || 1);
- if (score > bestScore) {
- bestScore = score;
- bestFit = fit;
- }
- }
- this._isPushed = false;
- this._applyPosition(bestFit.position, bestFit.origin);
- return;
- }
- // When none of the preferred positions fit within the viewport, take the position
- // that went off-screen the least and attempt to push it on-screen.
- if (this._canPush) {
- // TODO(jelbourn): after pushing, the opening "direction" of the overlay might not make sense.
- this._isPushed = true;
- this._applyPosition(fallback.position, fallback.originPoint);
- return;
- }
- // All options for getting the overlay within the viewport have been exhausted, so go with the
- // position that went off-screen the least.
- this._applyPosition(fallback.position, fallback.originPoint);
- }
- detach() {
- this._clearPanelClasses();
- this._lastPosition = null;
- this._previousPushAmount = null;
- this._resizeSubscription.unsubscribe();
- }
- /** Cleanup after the element gets destroyed. */
- dispose() {
- if (this._isDisposed) {
- return;
- }
- // We can't use `_resetBoundingBoxStyles` here, because it resets
- // some properties to zero, rather than removing them.
- if (this._boundingBox) {
- extendStyles(this._boundingBox.style, {
- top: '',
- left: '',
- right: '',
- bottom: '',
- height: '',
- width: '',
- alignItems: '',
- justifyContent: '',
- });
- }
- if (this._pane) {
- this._resetOverlayElementStyles();
- }
- if (this._overlayRef) {
- this._overlayRef.hostElement.classList.remove(boundingBoxClass);
- }
- this.detach();
- this._positionChanges.complete();
- this._overlayRef = this._boundingBox = null;
- this._isDisposed = true;
- }
- /**
- * This re-aligns the overlay element with the trigger in its last calculated position,
- * even if a position higher in the "preferred positions" list would now fit. This
- * allows one to re-align the panel without changing the orientation of the panel.
- */
- reapplyLastPosition() {
- if (this._isDisposed || !this._platform.isBrowser) {
- return;
- }
- const lastPosition = this._lastPosition;
- if (lastPosition) {
- this._originRect = this._getOriginRect();
- this._overlayRect = this._pane.getBoundingClientRect();
- this._viewportRect = this._getNarrowedViewportRect();
- this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();
- const originPoint = this._getOriginPoint(this._originRect, this._containerRect, lastPosition);
- this._applyPosition(lastPosition, originPoint);
- }
- else {
- this.apply();
- }
- }
- /**
- * Sets the list of Scrollable containers that host the origin element so that
- * on reposition we can evaluate if it or the overlay has been clipped or outside view. Every
- * Scrollable must be an ancestor element of the strategy's origin element.
- */
- withScrollableContainers(scrollables) {
- this._scrollables = scrollables;
- return this;
- }
- /**
- * Adds new preferred positions.
- * @param positions List of positions options for this overlay.
- */
- withPositions(positions) {
- this._preferredPositions = positions;
- // If the last calculated position object isn't part of the positions anymore, clear
- // it in order to avoid it being picked up if the consumer tries to re-apply.
- if (positions.indexOf(this._lastPosition) === -1) {
- this._lastPosition = null;
- }
- this._validatePositions();
- return this;
- }
- /**
- * Sets a minimum distance the overlay may be positioned to the edge of the viewport.
- * @param margin Required margin between the overlay and the viewport edge in pixels.
- */
- withViewportMargin(margin) {
- this._viewportMargin = margin;
- return this;
- }
- /** Sets whether the overlay's width and height can be constrained to fit within the viewport. */
- withFlexibleDimensions(flexibleDimensions = true) {
- this._hasFlexibleDimensions = flexibleDimensions;
- return this;
- }
- /** Sets whether the overlay can grow after the initial open via flexible width/height. */
- withGrowAfterOpen(growAfterOpen = true) {
- this._growAfterOpen = growAfterOpen;
- return this;
- }
- /** Sets whether the overlay can be pushed on-screen if none of the provided positions fit. */
- withPush(canPush = true) {
- this._canPush = canPush;
- return this;
- }
- /**
- * Sets whether the overlay's position should be locked in after it is positioned
- * initially. When an overlay is locked in, it won't attempt to reposition itself
- * when the position is re-applied (e.g. when the user scrolls away).
- * @param isLocked Whether the overlay should locked in.
- */
- withLockedPosition(isLocked = true) {
- this._positionLocked = isLocked;
- return this;
- }
- /**
- * Sets the origin, relative to which to position the overlay.
- * Using an element origin is useful for building components that need to be positioned
- * relatively to a trigger (e.g. dropdown menus or tooltips), whereas using a point can be
- * used for cases like contextual menus which open relative to the user's pointer.
- * @param origin Reference to the new origin.
- */
- setOrigin(origin) {
- this._origin = origin;
- return this;
- }
- /**
- * Sets the default offset for the overlay's connection point on the x-axis.
- * @param offset New offset in the X axis.
- */
- withDefaultOffsetX(offset) {
- this._offsetX = offset;
- return this;
- }
- /**
- * Sets the default offset for the overlay's connection point on the y-axis.
- * @param offset New offset in the Y axis.
- */
- withDefaultOffsetY(offset) {
- this._offsetY = offset;
- return this;
- }
- /**
- * Configures that the position strategy should set a `transform-origin` on some elements
- * inside the overlay, depending on the current position that is being applied. This is
- * useful for the cases where the origin of an animation can change depending on the
- * alignment of the overlay.
- * @param selector CSS selector that will be used to find the target
- * elements onto which to set the transform origin.
- */
- withTransformOriginOn(selector) {
- this._transformOriginSelector = selector;
- return this;
- }
- /**
- * Gets the (x, y) coordinate of a connection point on the origin based on a relative position.
- */
- _getOriginPoint(originRect, containerRect, pos) {
- let x;
- if (pos.originX == 'center') {
- // Note: when centering we should always use the `left`
- // offset, otherwise the position will be wrong in RTL.
- x = originRect.left + originRect.width / 2;
- }
- else {
- const startX = this._isRtl() ? originRect.right : originRect.left;
- const endX = this._isRtl() ? originRect.left : originRect.right;
- x = pos.originX == 'start' ? startX : endX;
- }
- // When zooming in Safari the container rectangle contains negative values for the position
- // and we need to re-add them to the calculated coordinates.
- if (containerRect.left < 0) {
- x -= containerRect.left;
- }
- let y;
- if (pos.originY == 'center') {
- y = originRect.top + originRect.height / 2;
- }
- else {
- y = pos.originY == 'top' ? originRect.top : originRect.bottom;
- }
- // Normally the containerRect's top value would be zero, however when the overlay is attached to an input
- // (e.g. in an autocomplete), mobile browsers will shift everything in order to put the input in the middle
- // of the screen and to make space for the virtual keyboard. We need to account for this offset,
- // otherwise our positioning will be thrown off.
- // Additionally, when zooming in Safari this fixes the vertical position.
- if (containerRect.top < 0) {
- y -= containerRect.top;
- }
- return { x, y };
- }
- /**
- * Gets the (x, y) coordinate of the top-left corner of the overlay given a given position and
- * origin point to which the overlay should be connected.
- */
- _getOverlayPoint(originPoint, overlayRect, pos) {
- // Calculate the (overlayStartX, overlayStartY), the start of the
- // potential overlay position relative to the origin point.
- let overlayStartX;
- if (pos.overlayX == 'center') {
- overlayStartX = -overlayRect.width / 2;
- }
- else if (pos.overlayX === 'start') {
- overlayStartX = this._isRtl() ? -overlayRect.width : 0;
- }
- else {
- overlayStartX = this._isRtl() ? 0 : -overlayRect.width;
- }
- let overlayStartY;
- if (pos.overlayY == 'center') {
- overlayStartY = -overlayRect.height / 2;
- }
- else {
- overlayStartY = pos.overlayY == 'top' ? 0 : -overlayRect.height;
- }
- // The (x, y) coordinates of the overlay.
- return {
- x: originPoint.x + overlayStartX,
- y: originPoint.y + overlayStartY,
- };
- }
- /** Gets how well an overlay at the given point will fit within the viewport. */
- _getOverlayFit(point, rawOverlayRect, viewport, position) {
- // Round the overlay rect when comparing against the
- // viewport, because the viewport is always rounded.
- const overlay = getRoundedBoundingClientRect(rawOverlayRect);
- let { x, y } = point;
- let offsetX = this._getOffset(position, 'x');
- let offsetY = this._getOffset(position, 'y');
- // Account for the offsets since they could push the overlay out of the viewport.
- if (offsetX) {
- x += offsetX;
- }
- if (offsetY) {
- y += offsetY;
- }
- // How much the overlay would overflow at this position, on each side.
- let leftOverflow = 0 - x;
- let rightOverflow = x + overlay.width - viewport.width;
- let topOverflow = 0 - y;
- let bottomOverflow = y + overlay.height - viewport.height;
- // Visible parts of the element on each axis.
- let visibleWidth = this._subtractOverflows(overlay.width, leftOverflow, rightOverflow);
- let visibleHeight = this._subtractOverflows(overlay.height, topOverflow, bottomOverflow);
- let visibleArea = visibleWidth * visibleHeight;
- return {
- visibleArea,
- isCompletelyWithinViewport: overlay.width * overlay.height === visibleArea,
- fitsInViewportVertically: visibleHeight === overlay.height,
- fitsInViewportHorizontally: visibleWidth == overlay.width,
- };
- }
- /**
- * Whether the overlay can fit within the viewport when it may resize either its width or height.
- * @param fit How well the overlay fits in the viewport at some position.
- * @param point The (x, y) coordinates of the overlay at some position.
- * @param viewport The geometry of the viewport.
- */
- _canFitWithFlexibleDimensions(fit, point, viewport) {
- if (this._hasFlexibleDimensions) {
- const availableHeight = viewport.bottom - point.y;
- const availableWidth = viewport.right - point.x;
- const minHeight = getPixelValue(this._overlayRef.getConfig().minHeight);
- const minWidth = getPixelValue(this._overlayRef.getConfig().minWidth);
- const verticalFit = fit.fitsInViewportVertically || (minHeight != null && minHeight <= availableHeight);
- const horizontalFit = fit.fitsInViewportHorizontally || (minWidth != null && minWidth <= availableWidth);
- return verticalFit && horizontalFit;
- }
- return false;
- }
- /**
- * Gets the point at which the overlay can be "pushed" on-screen. If the overlay is larger than
- * the viewport, the top-left corner will be pushed on-screen (with overflow occurring on the
- * right and bottom).
- *
- * @param start Starting point from which the overlay is pushed.
- * @param rawOverlayRect Dimensions of the overlay.
- * @param scrollPosition Current viewport scroll position.
- * @returns The point at which to position the overlay after pushing. This is effectively a new
- * originPoint.
- */
- _pushOverlayOnScreen(start, rawOverlayRect, scrollPosition) {
- // If the position is locked and we've pushed the overlay already, reuse the previous push
- // amount, rather than pushing it again. If we were to continue pushing, the element would
- // remain in the viewport, which goes against the expectations when position locking is enabled.
- if (this._previousPushAmount && this._positionLocked) {
- return {
- x: start.x + this._previousPushAmount.x,
- y: start.y + this._previousPushAmount.y,
- };
- }
- // Round the overlay rect when comparing against the
- // viewport, because the viewport is always rounded.
- const overlay = getRoundedBoundingClientRect(rawOverlayRect);
- const viewport = this._viewportRect;
- // Determine how much the overlay goes outside the viewport on each
- // side, which we'll use to decide which direction to push it.
- const overflowRight = Math.max(start.x + overlay.width - viewport.width, 0);
- const overflowBottom = Math.max(start.y + overlay.height - viewport.height, 0);
- const overflowTop = Math.max(viewport.top - scrollPosition.top - start.y, 0);
- const overflowLeft = Math.max(viewport.left - scrollPosition.left - start.x, 0);
- // Amount by which to push the overlay in each axis such that it remains on-screen.
- let pushX = 0;
- let pushY = 0;
- // If the overlay fits completely within the bounds of the viewport, push it from whichever
- // direction is goes off-screen. Otherwise, push the top-left corner such that its in the
- // viewport and allow for the trailing end of the overlay to go out of bounds.
- if (overlay.width <= viewport.width) {
- pushX = overflowLeft || -overflowRight;
- }
- else {
- pushX = start.x < this._viewportMargin ? viewport.left - scrollPosition.left - start.x : 0;
- }
- if (overlay.height <= viewport.height) {
- pushY = overflowTop || -overflowBottom;
- }
- else {
- pushY = start.y < this._viewportMargin ? viewport.top - scrollPosition.top - start.y : 0;
- }
- this._previousPushAmount = { x: pushX, y: pushY };
- return {
- x: start.x + pushX,
- y: start.y + pushY,
- };
- }
- /**
- * Applies a computed position to the overlay and emits a position change.
- * @param position The position preference
- * @param originPoint The point on the origin element where the overlay is connected.
- */
- _applyPosition(position, originPoint) {
- this._setTransformOrigin(position);
- this._setOverlayElementStyles(originPoint, position);
- this._setBoundingBoxStyles(originPoint, position);
- if (position.panelClass) {
- this._addPanelClasses(position.panelClass);
- }
- // Notify that the position has been changed along with its change properties.
- // We only emit if we've got any subscriptions, because the scroll visibility
- // calculations can be somewhat expensive.
- if (this._positionChanges.observers.length) {
- const scrollVisibility = this._getScrollVisibility();
- // We're recalculating on scroll, but we only want to emit if anything
- // changed since downstream code might be hitting the `NgZone`.
- if (position !== this._lastPosition ||
- !this._lastScrollVisibility ||
- !compareScrollVisibility(this._lastScrollVisibility, scrollVisibility)) {
- const changeEvent = new ConnectedOverlayPositionChange(position, scrollVisibility);
- this._positionChanges.next(changeEvent);
- }
- this._lastScrollVisibility = scrollVisibility;
- }
- // Save the last connected position in case the position needs to be re-calculated.
- this._lastPosition = position;
- this._isInitialRender = false;
- }
- /** Sets the transform origin based on the configured selector and the passed-in position. */
- _setTransformOrigin(position) {
- if (!this._transformOriginSelector) {
- return;
- }
- const elements = this._boundingBox.querySelectorAll(this._transformOriginSelector);
- let xOrigin;
- let yOrigin = position.overlayY;
- if (position.overlayX === 'center') {
- xOrigin = 'center';
- }
- else if (this._isRtl()) {
- xOrigin = position.overlayX === 'start' ? 'right' : 'left';
- }
- else {
- xOrigin = position.overlayX === 'start' ? 'left' : 'right';
- }
- for (let i = 0; i < elements.length; i++) {
- elements[i].style.transformOrigin = `${xOrigin} ${yOrigin}`;
- }
- }
- /**
- * Gets the position and size of the overlay's sizing container.
- *
- * This method does no measuring and applies no styles so that we can cheaply compute the
- * bounds for all positions and choose the best fit based on these results.
- */
- _calculateBoundingBoxRect(origin, position) {
- const viewport = this._viewportRect;
- const isRtl = this._isRtl();
- let height, top, bottom;
- if (position.overlayY === 'top') {
- // Overlay is opening "downward" and thus is bound by the bottom viewport edge.
- top = origin.y;
- height = viewport.height - top + this._viewportMargin;
- }
- else if (position.overlayY === 'bottom') {
- // Overlay is opening "upward" and thus is bound by the top viewport edge. We need to add
- // the viewport margin back in, because the viewport rect is narrowed down to remove the
- // margin, whereas the `origin` position is calculated based on its `DOMRect`.
- bottom = viewport.height - origin.y + this._viewportMargin * 2;
- height = viewport.height - bottom + this._viewportMargin;
- }
- else {
- // If neither top nor bottom, it means that the overlay is vertically centered on the
- // origin point. Note that we want the position relative to the viewport, rather than
- // the page, which is why we don't use something like `viewport.bottom - origin.y` and
- // `origin.y - viewport.top`.
- const smallestDistanceToViewportEdge = Math.min(viewport.bottom - origin.y + viewport.top, origin.y);
- const previousHeight = this._lastBoundingBoxSize.height;
- height = smallestDistanceToViewportEdge * 2;
- top = origin.y - smallestDistanceToViewportEdge;
- if (height > previousHeight && !this._isInitialRender && !this._growAfterOpen) {
- top = origin.y - previousHeight / 2;
- }
- }
- // The overlay is opening 'right-ward' (the content flows to the right).
- const isBoundedByRightViewportEdge = (position.overlayX === 'start' && !isRtl) || (position.overlayX === 'end' && isRtl);
- // The overlay is opening 'left-ward' (the content flows to the left).
- const isBoundedByLeftViewportEdge = (position.overlayX === 'end' && !isRtl) || (position.overlayX === 'start' && isRtl);
- let width, left, right;
- if (isBoundedByLeftViewportEdge) {
- right = viewport.width - origin.x + this._viewportMargin * 2;
- width = origin.x - this._viewportMargin;
- }
- else if (isBoundedByRightViewportEdge) {
- left = origin.x;
- width = viewport.right - origin.x;
- }
- else {
- // If neither start nor end, it means that the overlay is horizontally centered on the
- // origin point. Note that we want the position relative to the viewport, rather than
- // the page, which is why we don't use something like `viewport.right - origin.x` and
- // `origin.x - viewport.left`.
- const smallestDistanceToViewportEdge = Math.min(viewport.right - origin.x + viewport.left, origin.x);
- const previousWidth = this._lastBoundingBoxSize.width;
- width = smallestDistanceToViewportEdge * 2;
- left = origin.x - smallestDistanceToViewportEdge;
- if (width > previousWidth && !this._isInitialRender && !this._growAfterOpen) {
- left = origin.x - previousWidth / 2;
- }
- }
- return { top: top, left: left, bottom: bottom, right: right, width, height };
- }
- /**
- * Sets the position and size of the overlay's sizing wrapper. The wrapper is positioned on the
- * origin's connection point and stretches to the bounds of the viewport.
- *
- * @param origin The point on the origin element where the overlay is connected.
- * @param position The position preference
- */
- _setBoundingBoxStyles(origin, position) {
- const boundingBoxRect = this._calculateBoundingBoxRect(origin, position);
- // It's weird if the overlay *grows* while scrolling, so we take the last size into account
- // when applying a new size.
- if (!this._isInitialRender && !this._growAfterOpen) {
- boundingBoxRect.height = Math.min(boundingBoxRect.height, this._lastBoundingBoxSize.height);
- boundingBoxRect.width = Math.min(boundingBoxRect.width, this._lastBoundingBoxSize.width);
- }
- const styles = {};
- if (this._hasExactPosition()) {
- styles.top = styles.left = '0';
- styles.bottom = styles.right = styles.maxHeight = styles.maxWidth = '';
- styles.width = styles.height = '100%';
- }
- else {
- const maxHeight = this._overlayRef.getConfig().maxHeight;
- const maxWidth = this._overlayRef.getConfig().maxWidth;
- styles.height = coerceCssPixelValue(boundingBoxRect.height);
- styles.top = coerceCssPixelValue(boundingBoxRect.top);
- styles.bottom = coerceCssPixelValue(boundingBoxRect.bottom);
- styles.width = coerceCssPixelValue(boundingBoxRect.width);
- styles.left = coerceCssPixelValue(boundingBoxRect.left);
- styles.right = coerceCssPixelValue(boundingBoxRect.right);
- // Push the pane content towards the proper direction.
- if (position.overlayX === 'center') {
- styles.alignItems = 'center';
- }
- else {
- styles.alignItems = position.overlayX === 'end' ? 'flex-end' : 'flex-start';
- }
- if (position.overlayY === 'center') {
- styles.justifyContent = 'center';
- }
- else {
- styles.justifyContent = position.overlayY === 'bottom' ? 'flex-end' : 'flex-start';
- }
- if (maxHeight) {
- styles.maxHeight = coerceCssPixelValue(maxHeight);
- }
- if (maxWidth) {
- styles.maxWidth = coerceCssPixelValue(maxWidth);
- }
- }
- this._lastBoundingBoxSize = boundingBoxRect;
- extendStyles(this._boundingBox.style, styles);
- }
- /** Resets the styles for the bounding box so that a new positioning can be computed. */
- _resetBoundingBoxStyles() {
- extendStyles(this._boundingBox.style, {
- top: '0',
- left: '0',
- right: '0',
- bottom: '0',
- height: '',
- width: '',
- alignItems: '',
- justifyContent: '',
- });
- }
- /** Resets the styles for the overlay pane so that a new positioning can be computed. */
- _resetOverlayElementStyles() {
- extendStyles(this._pane.style, {
- top: '',
- left: '',
- bottom: '',
- right: '',
- position: '',
- transform: '',
- });
- }
- /** Sets positioning styles to the overlay element. */
- _setOverlayElementStyles(originPoint, position) {
- const styles = {};
- const hasExactPosition = this._hasExactPosition();
- const hasFlexibleDimensions = this._hasFlexibleDimensions;
- const config = this._overlayRef.getConfig();
- if (hasExactPosition) {
- const scrollPosition = this._viewportRuler.getViewportScrollPosition();
- extendStyles(styles, this._getExactOverlayY(position, originPoint, scrollPosition));
- extendStyles(styles, this._getExactOverlayX(position, originPoint, scrollPosition));
- }
- else {
- styles.position = 'static';
- }
- // Use a transform to apply the offsets. We do this because the `center` positions rely on
- // being in the normal flex flow and setting a `top` / `left` at all will completely throw
- // off the position. We also can't use margins, because they won't have an effect in some
- // cases where the element doesn't have anything to "push off of". Finally, this works
- // better both with flexible and non-flexible positioning.
- let transformString = '';
- let offsetX = this._getOffset(position, 'x');
- let offsetY = this._getOffset(position, 'y');
- if (offsetX) {
- transformString += `translateX(${offsetX}px) `;
- }
- if (offsetY) {
- transformString += `translateY(${offsetY}px)`;
- }
- styles.transform = transformString.trim();
- // If a maxWidth or maxHeight is specified on the overlay, we remove them. We do this because
- // we need these values to both be set to "100%" for the automatic flexible sizing to work.
- // The maxHeight and maxWidth are set on the boundingBox in order to enforce the constraint.
- // Note that this doesn't apply when we have an exact position, in which case we do want to
- // apply them because they'll be cleared from the bounding box.
- if (config.maxHeight) {
- if (hasExactPosition) {
- styles.maxHeight = coerceCssPixelValue(config.maxHeight);
- }
- else if (hasFlexibleDimensions) {
- styles.maxHeight = '';
- }
- }
- if (config.maxWidth) {
- if (hasExactPosition) {
- styles.maxWidth = coerceCssPixelValue(config.maxWidth);
- }
- else if (hasFlexibleDimensions) {
- styles.maxWidth = '';
- }
- }
- extendStyles(this._pane.style, styles);
- }
- /** Gets the exact top/bottom for the overlay when not using flexible sizing or when pushing. */
- _getExactOverlayY(position, originPoint, scrollPosition) {
- // Reset any existing styles. This is necessary in case the
- // preferred position has changed since the last `apply`.
- let styles = { top: '', bottom: '' };
- let overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);
- if (this._isPushed) {
- overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);
- }
- // We want to set either `top` or `bottom` based on whether the overlay wants to appear
- // above or below the origin and the direction in which the element will expand.
- if (position.overlayY === 'bottom') {
- // When using `bottom`, we adjust the y position such that it is the distance
- // from the bottom of the viewport rather than the top.
- const documentHeight = this._document.documentElement.clientHeight;
- styles.bottom = `${documentHeight - (overlayPoint.y + this._overlayRect.height)}px`;
- }
- else {
- styles.top = coerceCssPixelValue(overlayPoint.y);
- }
- return styles;
- }
- /** Gets the exact left/right for the overlay when not using flexible sizing or when pushing. */
- _getExactOverlayX(position, originPoint, scrollPosition) {
- // Reset any existing styles. This is necessary in case the preferred position has
- // changed since the last `apply`.
- let styles = { left: '', right: '' };
- let overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);
- if (this._isPushed) {
- overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);
- }
- // We want to set either `left` or `right` based on whether the overlay wants to appear "before"
- // or "after" the origin, which determines the direction in which the element will expand.
- // For the horizontal axis, the meaning of "before" and "after" change based on whether the
- // page is in RTL or LTR.
- let horizontalStyleProperty;
- if (this._isRtl()) {
- horizontalStyleProperty = position.overlayX === 'end' ? 'left' : 'right';
- }
- else {
- horizontalStyleProperty = position.overlayX === 'end' ? 'right' : 'left';
- }
- // When we're setting `right`, we adjust the x position such that it is the distance
- // from the right edge of the viewport rather than the left edge.
- if (horizontalStyleProperty === 'right') {
- const documentWidth = this._document.documentElement.clientWidth;
- styles.right = `${documentWidth - (overlayPoint.x + this._overlayRect.width)}px`;
- }
- else {
- styles.left = coerceCssPixelValue(overlayPoint.x);
- }
- return styles;
- }
- /**
- * Gets the view properties of the trigger and overlay, including whether they are clipped
- * or completely outside the view of any of the strategy's scrollables.
- */
- _getScrollVisibility() {
- // Note: needs fresh rects since the position could've changed.
- const originBounds = this._getOriginRect();
- const overlayBounds = this._pane.getBoundingClientRect();
- // TODO(jelbourn): instead of needing all of the client rects for these scrolling containers
- // every time, we should be able to use the scrollTop of the containers if the size of those
- // containers hasn't changed.
- const scrollContainerBounds = this._scrollables.map(scrollable => {
- return scrollable.getElementRef().nativeElement.getBoundingClientRect();
- });
- return {
- isOriginClipped: isElementClippedByScrolling(originBounds, scrollContainerBounds),
- isOriginOutsideView: isElementScrolledOutsideView(originBounds, scrollContainerBounds),
- isOverlayClipped: isElementClippedByScrolling(overlayBounds, scrollContainerBounds),
- isOverlayOutsideView: isElementScrolledOutsideView(overlayBounds, scrollContainerBounds),
- };
- }
- /** Subtracts the amount that an element is overflowing on an axis from its length. */
- _subtractOverflows(length, ...overflows) {
- return overflows.reduce((currentValue, currentOverflow) => {
- return currentValue - Math.max(currentOverflow, 0);
- }, length);
- }
- /** Narrows the given viewport rect by the current _viewportMargin. */
- _getNarrowedViewportRect() {
- // We recalculate the viewport rect here ourselves, rather than using the ViewportRuler,
- // because we want to use the `clientWidth` and `clientHeight` as the base. The difference
- // being that the client properties don't include the scrollbar, as opposed to `innerWidth`
- // and `innerHeight` that do. This is necessary, because the overlay container uses
- // 100% `width` and `height` which don't include the scrollbar either.
- const width = this._document.documentElement.clientWidth;
- const height = this._document.documentElement.clientHeight;
- const scrollPosition = this._viewportRuler.getViewportScrollPosition();
- return {
- top: scrollPosition.top + this._viewportMargin,
- left: scrollPosition.left + this._viewportMargin,
- right: scrollPosition.left + width - this._viewportMargin,
- bottom: scrollPosition.top + height - this._viewportMargin,
- width: width - 2 * this._viewportMargin,
- height: height - 2 * this._viewportMargin,
- };
- }
- /** Whether the we're dealing with an RTL context */
- _isRtl() {
- return this._overlayRef.getDirection() === 'rtl';
- }
- /** Determines whether the overlay uses exact or flexible positioning. */
- _hasExactPosition() {
- return !this._hasFlexibleDimensions || this._isPushed;
- }
- /** Retrieves the offset of a position along the x or y axis. */
- _getOffset(position, axis) {
- if (axis === 'x') {
- // We don't do something like `position['offset' + axis]` in
- // order to avoid breaking minifiers that rename properties.
- return position.offsetX == null ? this._offsetX : position.offsetX;
- }
- return position.offsetY == null ? this._offsetY : position.offsetY;
- }
- /** Validates that the current position match the expected values. */
- _validatePositions() {
- if (typeof ngDevMode === 'undefined' || ngDevMode) {
- if (!this._preferredPositions.length) {
- throw Error('FlexibleConnectedPositionStrategy: At least one position is required.');
- }
- // TODO(crisbeto): remove these once Angular's template type
- // checking is advanced enough to catch these cases.
- this._preferredPositions.forEach(pair => {
- validateHorizontalPosition('originX', pair.originX);
- validateVerticalPosition('originY', pair.originY);
- validateHorizontalPosition('overlayX', pair.overlayX);
- validateVerticalPosition('overlayY', pair.overlayY);
- });
- }
- }
- /** Adds a single CSS class or an array of classes on the overlay panel. */
- _addPanelClasses(cssClasses) {
- if (this._pane) {
- coerceArray(cssClasses).forEach(cssClass => {
- if (cssClass !== '' && this._appliedPanelClasses.indexOf(cssClass) === -1) {
- this._appliedPanelClasses.push(cssClass);
- this._pane.classList.add(cssClass);
- }
- });
- }
- }
- /** Clears the classes that the position strategy has applied from the overlay panel. */
- _clearPanelClasses() {
- if (this._pane) {
- this._appliedPanelClasses.forEach(cssClass => {
- this._pane.classList.remove(cssClass);
- });
- this._appliedPanelClasses = [];
- }
- }
- /** Returns the DOMRect of the current origin. */
- _getOriginRect() {
- const origin = this._origin;
- if (origin instanceof ElementRef) {
- return origin.nativeElement.getBoundingClientRect();
- }
- // Check for Element so SVG elements are also supported.
- if (origin instanceof Element) {
- return origin.getBoundingClientRect();
- }
- const width = origin.width || 0;
- const height = origin.height || 0;
- // If the origin is a point, return a client rect as if it was a 0x0 element at the point.
- return {
- top: origin.y,
- bottom: origin.y + height,
- left: origin.x,
- right: origin.x + width,
- height,
- width,
- };
- }
- }
- /** Shallow-extends a stylesheet object with another stylesheet object. */
- function extendStyles(destination, source) {
- for (let key in source) {
- if (source.hasOwnProperty(key)) {
- destination[key] = source[key];
- }
- }
- return destination;
- }
- /**
- * Extracts the pixel value as a number from a value, if it's a number
- * or a CSS pixel string (e.g. `1337px`). Otherwise returns null.
- */
- function getPixelValue(input) {
- if (typeof input !== 'number' && input != null) {
- const [value, units] = input.split(cssUnitPattern);
- return !units || units === 'px' ? parseFloat(value) : null;
- }
- return input || null;
- }
- /**
- * Gets a version of an element's bounding `DOMRect` where all the values are rounded down to
- * the nearest pixel. This allows us to account for the cases where there may be sub-pixel
- * deviations in the `DOMRect` returned by the browser (e.g. when zoomed in with a percentage
- * size, see #21350).
- */
- function getRoundedBoundingClientRect(clientRect) {
- return {
- top: Math.floor(clientRect.top),
- right: Math.floor(clientRect.right),
- bottom: Math.floor(clientRect.bottom),
- left: Math.floor(clientRect.left),
- width: Math.floor(clientRect.width),
- height: Math.floor(clientRect.height),
- };
- }
- /** Returns whether two `ScrollingVisibility` objects are identical. */
- function compareScrollVisibility(a, b) {
- if (a === b) {
- return true;
- }
- return (a.isOriginClipped === b.isOriginClipped &&
- a.isOriginOutsideView === b.isOriginOutsideView &&
- a.isOverlayClipped === b.isOverlayClipped &&
- a.isOverlayOutsideView === b.isOverlayOutsideView);
- }
- const STANDARD_DROPDOWN_BELOW_POSITIONS = [
- { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
- { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
- { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
- { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
- ];
- const STANDARD_DROPDOWN_ADJACENT_POSITIONS = [
- { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },
- { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' },
- { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },
- { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom' },
- ];
- /** Class to be added to the overlay pane wrapper. */
- const wrapperClass = 'cdk-global-overlay-wrapper';
- /**
- * A strategy for positioning overlays. Using this strategy, an overlay is given an
- * explicit position relative to the browser's viewport. We use flexbox, instead of
- * transforms, in order to avoid issues with subpixel rendering which can cause the
- * element to become blurry.
- */
- class GlobalPositionStrategy {
- /** The overlay to which this strategy is attached. */
- _overlayRef;
- _cssPosition = 'static';
- _topOffset = '';
- _bottomOffset = '';
- _alignItems = '';
- _xPosition = '';
- _xOffset = '';
- _width = '';
- _height = '';
- _isDisposed = false;
- attach(overlayRef) {
- const config = overlayRef.getConfig();
- this._overlayRef = overlayRef;
- if (this._width && !config.width) {
- overlayRef.updateSize({ width: this._width });
- }
- if (this._height && !config.height) {
- overlayRef.updateSize({ height: this._height });
- }
- overlayRef.hostElement.classList.add(wrapperClass);
- this._isDisposed = false;
- }
- /**
- * Sets the top position of the overlay. Clears any previously set vertical position.
- * @param value New top offset.
- */
- top(value = '') {
- this._bottomOffset = '';
- this._topOffset = value;
- this._alignItems = 'flex-start';
- return this;
- }
- /**
- * Sets the left position of the overlay. Clears any previously set horizontal position.
- * @param value New left offset.
- */
- left(value = '') {
- this._xOffset = value;
- this._xPosition = 'left';
- return this;
- }
- /**
- * Sets the bottom position of the overlay. Clears any previously set vertical position.
- * @param value New bottom offset.
- */
- bottom(value = '') {
- this._topOffset = '';
- this._bottomOffset = value;
- this._alignItems = 'flex-end';
- return this;
- }
- /**
- * Sets the right position of the overlay. Clears any previously set horizontal position.
- * @param value New right offset.
- */
- right(value = '') {
- this._xOffset = value;
- this._xPosition = 'right';
- return this;
- }
- /**
- * Sets the overlay to the start of the viewport, depending on the overlay direction.
- * This will be to the left in LTR layouts and to the right in RTL.
- * @param offset Offset from the edge of the screen.
- */
- start(value = '') {
- this._xOffset = value;
- this._xPosition = 'start';
- return this;
- }
- /**
- * Sets the overlay to the end of the viewport, depending on the overlay direction.
- * This will be to the right in LTR layouts and to the left in RTL.
- * @param offset Offset from the edge of the screen.
- */
- end(value = '') {
- this._xOffset = value;
- this._xPosition = 'end';
- return this;
- }
- /**
- * Sets the overlay width and clears any previously set width.
- * @param value New width for the overlay
- * @deprecated Pass the `width` through the `OverlayConfig`.
- * @breaking-change 8.0.0
- */
- width(value = '') {
- if (this._overlayRef) {
- this._overlayRef.updateSize({ width: value });
- }
- else {
- this._width = value;
- }
- return this;
- }
- /**
- * Sets the overlay height and clears any previously set height.
- * @param value New height for the overlay
- * @deprecated Pass the `height` through the `OverlayConfig`.
- * @breaking-change 8.0.0
- */
- height(value = '') {
- if (this._overlayRef) {
- this._overlayRef.updateSize({ height: value });
- }
- else {
- this._height = value;
- }
- return this;
- }
- /**
- * Centers the overlay horizontally with an optional offset.
- * Clears any previously set horizontal position.
- *
- * @param offset Overlay offset from the horizontal center.
- */
- centerHorizontally(offset = '') {
- this.left(offset);
- this._xPosition = 'center';
- return this;
- }
- /**
- * Centers the overlay vertically with an optional offset.
- * Clears any previously set vertical position.
- *
- * @param offset Overlay offset from the vertical center.
- */
- centerVertically(offset = '') {
- this.top(offset);
- this._alignItems = 'center';
- return this;
- }
- /**
- * Apply the position to the element.
- * @docs-private
- */
- apply() {
- // Since the overlay ref applies the strategy asynchronously, it could
- // have been disposed before it ends up being applied. If that is the
- // case, we shouldn't do anything.
- if (!this._overlayRef || !this._overlayRef.hasAttached()) {
- return;
- }
- const styles = this._overlayRef.overlayElement.style;
- const parentStyles = this._overlayRef.hostElement.style;
- const config = this._overlayRef.getConfig();
- const { width, height, maxWidth, maxHeight } = config;
- const shouldBeFlushHorizontally = (width === '100%' || width === '100vw') &&
- (!maxWidth || maxWidth === '100%' || maxWidth === '100vw');
- const shouldBeFlushVertically = (height === '100%' || height === '100vh') &&
- (!maxHeight || maxHeight === '100%' || maxHeight === '100vh');
- const xPosition = this._xPosition;
- const xOffset = this._xOffset;
- const isRtl = this._overlayRef.getConfig().direction === 'rtl';
- let marginLeft = '';
- let marginRight = '';
- let justifyContent = '';
- if (shouldBeFlushHorizontally) {
- justifyContent = 'flex-start';
- }
- else if (xPosition === 'center') {
- justifyContent = 'center';
- if (isRtl) {
- marginRight = xOffset;
- }
- else {
- marginLeft = xOffset;
- }
- }
- else if (isRtl) {
- if (xPosition === 'left' || xPosition === 'end') {
- justifyContent = 'flex-end';
- marginLeft = xOffset;
- }
- else if (xPosition === 'right' || xPosition === 'start') {
- justifyContent = 'flex-start';
- marginRight = xOffset;
- }
- }
- else if (xPosition === 'left' || xPosition === 'start') {
- justifyContent = 'flex-start';
- marginLeft = xOffset;
- }
- else if (xPosition === 'right' || xPosition === 'end') {
- justifyContent = 'flex-end';
- marginRight = xOffset;
- }
- styles.position = this._cssPosition;
- styles.marginLeft = shouldBeFlushHorizontally ? '0' : marginLeft;
- styles.marginTop = shouldBeFlushVertically ? '0' : this._topOffset;
- styles.marginBottom = this._bottomOffset;
- styles.marginRight = shouldBeFlushHorizontally ? '0' : marginRight;
- parentStyles.justifyContent = justifyContent;
- parentStyles.alignItems = shouldBeFlushVertically ? 'flex-start' : this._alignItems;
- }
- /**
- * Cleans up the DOM changes from the position strategy.
- * @docs-private
- */
- dispose() {
- if (this._isDisposed || !this._overlayRef) {
- return;
- }
- const styles = this._overlayRef.overlayElement.style;
- const parent = this._overlayRef.hostElement;
- const parentStyles = parent.style;
- parent.classList.remove(wrapperClass);
- parentStyles.justifyContent =
- parentStyles.alignItems =
- styles.marginTop =
- styles.marginBottom =
- styles.marginLeft =
- styles.marginRight =
- styles.position =
- '';
- this._overlayRef = null;
- this._isDisposed = true;
- }
- }
- /** Builder for overlay position strategy. */
- class OverlayPositionBuilder {
- _viewportRuler = inject(ViewportRuler);
- _document = inject(DOCUMENT);
- _platform = inject(Platform);
- _overlayContainer = inject(OverlayContainer);
- constructor() { }
- /**
- * Creates a global position strategy.
- */
- global() {
- return new GlobalPositionStrategy();
- }
- /**
- * Creates a flexible position strategy.
- * @param origin Origin relative to which to position the overlay.
- */
- flexibleConnectedTo(origin) {
- return new FlexibleConnectedPositionStrategy(origin, this._viewportRuler, this._document, this._platform, this._overlayContainer);
- }
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayPositionBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayPositionBuilder, providedIn: 'root' });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayPositionBuilder, decorators: [{
- type: Injectable,
- args: [{ providedIn: 'root' }]
- }], ctorParameters: () => [] });
- /**
- * Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be
- * used as a low-level building block for other components. Dialogs, tooltips, menus,
- * selects, etc. can all be built using overlays. The service should primarily be used by authors
- * of re-usable components rather than developers building end-user applications.
- *
- * An overlay *is* a PortalOutlet, so any kind of Portal can be loaded into one.
- */
- class Overlay {
- scrollStrategies = inject(ScrollStrategyOptions);
- _overlayContainer = inject(OverlayContainer);
- _positionBuilder = inject(OverlayPositionBuilder);
- _keyboardDispatcher = inject(OverlayKeyboardDispatcher);
- _injector = inject(Injector);
- _ngZone = inject(NgZone);
- _document = inject(DOCUMENT);
- _directionality = inject(Directionality);
- _location = inject(Location);
- _outsideClickDispatcher = inject(OverlayOutsideClickDispatcher);
- _animationsModuleType = inject(ANIMATION_MODULE_TYPE, { optional: true });
- _idGenerator = inject(_IdGenerator);
- _renderer = inject(RendererFactory2).createRenderer(null, null);
- _appRef;
- _styleLoader = inject(_CdkPrivateStyleLoader);
- constructor() { }
- /**
- * Creates an overlay.
- * @param config Configuration applied to the overlay.
- * @returns Reference to the created overlay.
- */
- create(config) {
- // This is done in the overlay container as well, but we have it here
- // since it's common to mock out the overlay container in tests.
- this._styleLoader.load(_CdkOverlayStyleLoader);
- const host = this._createHostElement();
- const pane = this._createPaneElement(host);
- const portalOutlet = this._createPortalOutlet(pane);
- const overlayConfig = new OverlayConfig(config);
- overlayConfig.direction = overlayConfig.direction || this._directionality.value;
- 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);
- }
- /**
- * Gets a position builder that can be used, via fluent API,
- * to construct and configure a position strategy.
- * @returns An overlay position builder.
- */
- position() {
- return this._positionBuilder;
- }
- /**
- * Creates the DOM element for an overlay and appends it to the overlay container.
- * @returns Newly-created pane element
- */
- _createPaneElement(host) {
- const pane = this._document.createElement('div');
- pane.id = this._idGenerator.getId('cdk-overlay-');
- pane.classList.add('cdk-overlay-pane');
- host.appendChild(pane);
- return pane;
- }
- /**
- * Creates the host element that wraps around an overlay
- * and can be used for advanced positioning.
- * @returns Newly-create host element.
- */
- _createHostElement() {
- const host = this._document.createElement('div');
- this._overlayContainer.getContainerElement().appendChild(host);
- return host;
- }
- /**
- * Create a DomPortalOutlet into which the overlay content can be loaded.
- * @param pane The DOM element to turn into a portal outlet.
- * @returns A portal outlet for the given DOM element.
- */
- _createPortalOutlet(pane) {
- // We have to resolve the ApplicationRef later in order to allow people
- // to use overlay-based providers during app initialization.
- if (!this._appRef) {
- this._appRef = this._injector.get(ApplicationRef);
- }
- return new DomPortalOutlet(pane, null, this._appRef, this._injector, this._document);
- }
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Overlay, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Overlay, providedIn: 'root' });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: Overlay, decorators: [{
- type: Injectable,
- args: [{ providedIn: 'root' }]
- }], ctorParameters: () => [] });
- /** Default set of positions for the overlay. Follows the behavior of a dropdown. */
- const defaultPositionList = [
- {
- originX: 'start',
- originY: 'bottom',
- overlayX: 'start',
- overlayY: 'top',
- },
- {
- originX: 'start',
- originY: 'top',
- overlayX: 'start',
- overlayY: 'bottom',
- },
- {
- originX: 'end',
- originY: 'top',
- overlayX: 'end',
- overlayY: 'bottom',
- },
- {
- originX: 'end',
- originY: 'bottom',
- overlayX: 'end',
- overlayY: 'top',
- },
- ];
- /** Injection token that determines the scroll handling while the connected overlay is open. */
- const CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY = new InjectionToken('cdk-connected-overlay-scroll-strategy', {
- providedIn: 'root',
- factory: () => {
- const overlay = inject(Overlay);
- return () => overlay.scrollStrategies.reposition();
- },
- });
- /**
- * Directive applied to an element to make it usable as an origin for an Overlay using a
- * ConnectedPositionStrategy.
- */
- class CdkOverlayOrigin {
- elementRef = inject(ElementRef);
- constructor() { }
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkOverlayOrigin, deps: [], target: i0.ɵɵFactoryTarget.Directive });
- 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 });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkOverlayOrigin, decorators: [{
- type: Directive,
- args: [{
- selector: '[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]',
- exportAs: 'cdkOverlayOrigin',
- }]
- }], ctorParameters: () => [] });
- /**
- * Directive to facilitate declarative creation of an
- * Overlay using a FlexibleConnectedPositionStrategy.
- */
- class CdkConnectedOverlay {
- _overlay = inject(Overlay);
- _dir = inject(Directionality, { optional: true });
- _overlayRef;
- _templatePortal;
- _backdropSubscription = Subscription.EMPTY;
- _attachSubscription = Subscription.EMPTY;
- _detachSubscription = Subscription.EMPTY;
- _positionSubscription = Subscription.EMPTY;
- _offsetX;
- _offsetY;
- _position;
- _scrollStrategyFactory = inject(CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY);
- _disposeOnNavigation = false;
- _ngZone = inject(NgZone);
- /** Origin for the connected overlay. */
- origin;
- /** Registered connected position pairs. */
- positions;
- /**
- * This input overrides the positions input if specified. It lets users pass
- * in arbitrary positioning strategies.
- */
- positionStrategy;
- /** The offset in pixels for the overlay connection point on the x-axis */
- get offsetX() {
- return this._offsetX;
- }
- set offsetX(offsetX) {
- this._offsetX = offsetX;
- if (this._position) {
- this._updatePositionStrategy(this._position);
- }
- }
- /** The offset in pixels for the overlay connection point on the y-axis */
- get offsetY() {
- return this._offsetY;
- }
- set offsetY(offsetY) {
- this._offsetY = offsetY;
- if (this._position) {
- this._updatePositionStrategy(this._position);
- }
- }
- /** The width of the overlay panel. */
- width;
- /** The height of the overlay panel. */
- height;
- /** The min width of the overlay panel. */
- minWidth;
- /** The min height of the overlay panel. */
- minHeight;
- /** The custom class to be set on the backdrop element. */
- backdropClass;
- /** The custom class to add to the overlay pane element. */
- panelClass;
- /** Margin between the overlay and the viewport edges. */
- viewportMargin = 0;
- /** Strategy to be used when handling scroll events while the overlay is open. */
- scrollStrategy;
- /** Whether the overlay is open. */
- open = false;
- /** Whether the overlay can be closed by user interaction. */
- disableClose = false;
- /** CSS selector which to set the transform origin. */
- transformOriginSelector;
- /** Whether or not the overlay should attach a backdrop. */
- hasBackdrop = false;
- /** Whether or not the overlay should be locked when scrolling. */
- lockPosition = false;
- /** Whether the overlay's width and height can be constrained to fit within the viewport. */
- flexibleDimensions = false;
- /** Whether the overlay can grow after the initial open when flexible positioning is turned on. */
- growAfterOpen = false;
- /** Whether the overlay can be pushed on-screen if none of the provided positions fit. */
- push = false;
- /** Whether the overlay should be disposed of when the user goes backwards/forwards in history. */
- get disposeOnNavigation() {
- return this._disposeOnNavigation;
- }
- set disposeOnNavigation(value) {
- this._disposeOnNavigation = value;
- }
- /** Event emitted when the backdrop is clicked. */
- backdropClick = new EventEmitter();
- /** Event emitted when the position has changed. */
- positionChange = new EventEmitter();
- /** Event emitted when the overlay has been attached. */
- attach = new EventEmitter();
- /** Event emitted when the overlay has been detached. */
- detach = new EventEmitter();
- /** Emits when there are keyboard events that are targeted at the overlay. */
- overlayKeydown = new EventEmitter();
- /** Emits when there are mouse outside click events that are targeted at the overlay. */
- overlayOutsideClick = new EventEmitter();
- // TODO(jelbourn): inputs for size, scroll behavior, animation, etc.
- constructor() {
- const templateRef = inject(TemplateRef);
- const viewContainerRef = inject(ViewContainerRef);
- this._templatePortal = new TemplatePortal(templateRef, viewContainerRef);
- this.scrollStrategy = this._scrollStrategyFactory();
- }
- /** The associated overlay reference. */
- get overlayRef() {
- return this._overlayRef;
- }
- /** The element's layout direction. */
- get dir() {
- return this._dir ? this._dir.value : 'ltr';
- }
- ngOnDestroy() {
- this._attachSubscription.unsubscribe();
- this._detachSubscription.unsubscribe();
- this._backdropSubscription.unsubscribe();
- this._positionSubscription.unsubscribe();
- this._overlayRef?.dispose();
- }
- ngOnChanges(changes) {
- if (this._position) {
- this._updatePositionStrategy(this._position);
- this._overlayRef?.updateSize({
- width: this.width,
- minWidth: this.minWidth,
- height: this.height,
- minHeight: this.minHeight,
- });
- if (changes['origin'] && this.open) {
- this._position.apply();
- }
- }
- if (changes['open']) {
- this.open ? this.attachOverlay() : this.detachOverlay();
- }
- }
- /** Creates an overlay */
- _createOverlay() {
- if (!this.positions || !this.positions.length) {
- this.positions = defaultPositionList;
- }
- const overlayRef = (this._overlayRef = this._overlay.create(this._buildConfig()));
- this._attachSubscription = overlayRef.attachments().subscribe(() => this.attach.emit());
- this._detachSubscription = overlayRef.detachments().subscribe(() => this.detach.emit());
- overlayRef.keydownEvents().subscribe((event) => {
- this.overlayKeydown.next(event);
- if (event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)) {
- event.preventDefault();
- this.detachOverlay();
- }
- });
- this._overlayRef.outsidePointerEvents().subscribe((event) => {
- const origin = this._getOriginElement();
- const target = _getEventTarget(event);
- if (!origin || (origin !== target && !origin.contains(target))) {
- this.overlayOutsideClick.next(event);
- }
- });
- }
- /** Builds the overlay config based on the directive's inputs */
- _buildConfig() {
- const positionStrategy = (this._position =
- this.positionStrategy || this._createPositionStrategy());
- const overlayConfig = new OverlayConfig({
- direction: this._dir || 'ltr',
- positionStrategy,
- scrollStrategy: this.scrollStrategy,
- hasBackdrop: this.hasBackdrop,
- disposeOnNavigation: this.disposeOnNavigation,
- });
- if (this.width || this.width === 0) {
- overlayConfig.width = this.width;
- }
- if (this.height || this.height === 0) {
- overlayConfig.height = this.height;
- }
- if (this.minWidth || this.minWidth === 0) {
- overlayConfig.minWidth = this.minWidth;
- }
- if (this.minHeight || this.minHeight === 0) {
- overlayConfig.minHeight = this.minHeight;
- }
- if (this.backdropClass) {
- overlayConfig.backdropClass = this.backdropClass;
- }
- if (this.panelClass) {
- overlayConfig.panelClass = this.panelClass;
- }
- return overlayConfig;
- }
- /** Updates the state of a position strategy, based on the values of the directive inputs. */
- _updatePositionStrategy(positionStrategy) {
- const positions = this.positions.map(currentPosition => ({
- originX: currentPosition.originX,
- originY: currentPosition.originY,
- overlayX: currentPosition.overlayX,
- overlayY: currentPosition.overlayY,
- offsetX: currentPosition.offsetX || this.offsetX,
- offsetY: currentPosition.offsetY || this.offsetY,
- panelClass: currentPosition.panelClass || undefined,
- }));
- return positionStrategy
- .setOrigin(this._getOrigin())
- .withPositions(positions)
- .withFlexibleDimensions(this.flexibleDimensions)
- .withPush(this.push)
- .withGrowAfterOpen(this.growAfterOpen)
- .withViewportMargin(this.viewportMargin)
- .withLockedPosition(this.lockPosition)
- .withTransformOriginOn(this.transformOriginSelector);
- }
- /** Returns the position strategy of the overlay to be set on the overlay config */
- _createPositionStrategy() {
- const strategy = this._overlay.position().flexibleConnectedTo(this._getOrigin());
- this._updatePositionStrategy(strategy);
- return strategy;
- }
- _getOrigin() {
- if (this.origin instanceof CdkOverlayOrigin) {
- return this.origin.elementRef;
- }
- else {
- return this.origin;
- }
- }
- _getOriginElement() {
- if (this.origin instanceof CdkOverlayOrigin) {
- return this.origin.elementRef.nativeElement;
- }
- if (this.origin instanceof ElementRef) {
- return this.origin.nativeElement;
- }
- if (typeof Element !== 'undefined' && this.origin instanceof Element) {
- return this.origin;
- }
- return null;
- }
- /** Attaches the overlay. */
- attachOverlay() {
- if (!this._overlayRef) {
- this._createOverlay();
- }
- else {
- // Update the overlay size, in case the directive's inputs have changed
- this._overlayRef.getConfig().hasBackdrop = this.hasBackdrop;
- }
- if (!this._overlayRef.hasAttached()) {
- this._overlayRef.attach(this._templatePortal);
- }
- if (this.hasBackdrop) {
- this._backdropSubscription = this._overlayRef.backdropClick().subscribe(event => {
- this.backdropClick.emit(event);
- });
- }
- else {
- this._backdropSubscription.unsubscribe();
- }
- this._positionSubscription.unsubscribe();
- // Only subscribe to `positionChanges` if requested, because putting
- // together all the information for it can be expensive.
- if (this.positionChange.observers.length > 0) {
- this._positionSubscription = this._position.positionChanges
- .pipe(takeWhile(() => this.positionChange.observers.length > 0))
- .subscribe(position => {
- this._ngZone.run(() => this.positionChange.emit(position));
- if (this.positionChange.observers.length === 0) {
- this._positionSubscription.unsubscribe();
- }
- });
- }
- this.open = true;
- }
- /** Detaches the overlay. */
- detachOverlay() {
- this._overlayRef?.detach();
- this._backdropSubscription.unsubscribe();
- this._positionSubscription.unsubscribe();
- this.open = false;
- }
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkConnectedOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
- 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 });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CdkConnectedOverlay, decorators: [{
- type: Directive,
- args: [{
- selector: '[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]',
- exportAs: 'cdkConnectedOverlay',
- }]
- }], ctorParameters: () => [], propDecorators: { origin: [{
- type: Input,
- args: ['cdkConnectedOverlayOrigin']
- }], positions: [{
- type: Input,
- args: ['cdkConnectedOverlayPositions']
- }], positionStrategy: [{
- type: Input,
- args: ['cdkConnectedOverlayPositionStrategy']
- }], offsetX: [{
- type: Input,
- args: ['cdkConnectedOverlayOffsetX']
- }], offsetY: [{
- type: Input,
- args: ['cdkConnectedOverlayOffsetY']
- }], width: [{
- type: Input,
- args: ['cdkConnectedOverlayWidth']
- }], height: [{
- type: Input,
- args: ['cdkConnectedOverlayHeight']
- }], minWidth: [{
- type: Input,
- args: ['cdkConnectedOverlayMinWidth']
- }], minHeight: [{
- type: Input,
- args: ['cdkConnectedOverlayMinHeight']
- }], backdropClass: [{
- type: Input,
- args: ['cdkConnectedOverlayBackdropClass']
- }], panelClass: [{
- type: Input,
- args: ['cdkConnectedOverlayPanelClass']
- }], viewportMargin: [{
- type: Input,
- args: ['cdkConnectedOverlayViewportMargin']
- }], scrollStrategy: [{
- type: Input,
- args: ['cdkConnectedOverlayScrollStrategy']
- }], open: [{
- type: Input,
- args: ['cdkConnectedOverlayOpen']
- }], disableClose: [{
- type: Input,
- args: ['cdkConnectedOverlayDisableClose']
- }], transformOriginSelector: [{
- type: Input,
- args: ['cdkConnectedOverlayTransformOriginOn']
- }], hasBackdrop: [{
- type: Input,
- args: [{ alias: 'cdkConnectedOverlayHasBackdrop', transform: booleanAttribute }]
- }], lockPosition: [{
- type: Input,
- args: [{ alias: 'cdkConnectedOverlayLockPosition', transform: booleanAttribute }]
- }], flexibleDimensions: [{
- type: Input,
- args: [{ alias: 'cdkConnectedOverlayFlexibleDimensions', transform: booleanAttribute }]
- }], growAfterOpen: [{
- type: Input,
- args: [{ alias: 'cdkConnectedOverlayGrowAfterOpen', transform: booleanAttribute }]
- }], push: [{
- type: Input,
- args: [{ alias: 'cdkConnectedOverlayPush', transform: booleanAttribute }]
- }], disposeOnNavigation: [{
- type: Input,
- args: [{ alias: 'cdkConnectedOverlayDisposeOnNavigation', transform: booleanAttribute }]
- }], backdropClick: [{
- type: Output
- }], positionChange: [{
- type: Output
- }], attach: [{
- type: Output
- }], detach: [{
- type: Output
- }], overlayKeydown: [{
- type: Output
- }], overlayOutsideClick: [{
- type: Output
- }] } });
- /**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
- function CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
- return () => overlay.scrollStrategies.reposition();
- }
- /**
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
- const CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {
- provide: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY,
- deps: [Overlay],
- useFactory: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY,
- };
- class OverlayModule {
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
- 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] });
- 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] });
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: OverlayModule, decorators: [{
- type: NgModule,
- args: [{
- imports: [BidiModule, PortalModule, ScrollingModule, CdkConnectedOverlay, CdkOverlayOrigin],
- exports: [CdkConnectedOverlay, CdkOverlayOrigin, ScrollingModule],
- providers: [Overlay, CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER],
- }]
- }] });
- 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 };
- //# sourceMappingURL=overlay-module-BUj0D19H.mjs.map
|