cdk-overlay.umd.js 198 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864486548664867486848694870487148724873487448754876487748784879488048814882488348844885488648874888488948904891489248934894489548964897489848994900490149024903490449054906490749084909491049114912491349144915491649174918491949204921492249234924492549264927492849294930493149324933493449354936493749384939494049414942494349444945494649474948494949504951495249534954495549564957495849594960496149624963496449654966496749684969497049714972497349744975497649774978497949804981498249834984498549864987498849894990499149924993499449954996499749984999500050015002500350045005500650075008500950105011501250135014501550165017501850195020502150225023502450255026502750285029503050315032503350345035503650375038503950405041504250435044504550465047504850495050505150525053505450555056505750585059506050615062506350645065506650675068506950705071507250735074507550765077507850795080508150825083508450855086508750885089509050915092509350945095509650975098509951005101510251035104510551065107510851095110511151125113511451155116511751185119512051215122512351245125512651275128512951305131513251335134513551365137513851395140514151425143514451455146514751485149
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. (function (global, factory) {
  9. typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/coercion'), require('@angular/cdk/scrolling'), require('@angular/common'), require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/platform'), require('@angular/cdk/bidi'), require('@angular/cdk/portal'), require('@angular/cdk/keycodes')) :
  10. typeof define === 'function' && define.amd ? define('@angular/cdk/overlay', ['exports', '@angular/cdk/coercion', '@angular/cdk/scrolling', '@angular/common', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/cdk/platform', '@angular/cdk/bidi', '@angular/cdk/portal', '@angular/cdk/keycodes'], factory) :
  11. (factory((global.ng = global.ng || {}, global.ng.cdk = global.ng.cdk || {}, global.ng.cdk.overlay = {}),global.ng.cdk.coercion,global.ng.cdk.scrolling,global.ng.common,global.ng.core,global.rxjs,global.rxjs.operators,global.ng.cdk.platform,global.ng.cdk.bidi,global.ng.cdk.portal,global.ng.cdk.keycodes));
  12. }(this, (function (exports,coercion,scrolling,common,core,rxjs,operators,platform,bidi,portal,keycodes) { 'use strict';
  13. /*! *****************************************************************************
  14. Copyright (c) Microsoft Corporation. All rights reserved.
  15. Licensed under the Apache License, Version 2.0 (the "License"); you may not use
  16. this file except in compliance with the License. You may obtain a copy of the
  17. License at http://www.apache.org/licenses/LICENSE-2.0
  18. THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  19. KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
  20. WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
  21. MERCHANTABLITY OR NON-INFRINGEMENT.
  22. See the Apache Version 2.0 License for specific language governing permissions
  23. and limitations under the License.
  24. ***************************************************************************** */
  25. /* global Reflect, Promise */
  26. var extendStatics = function(d, b) {
  27. extendStatics = Object.setPrototypeOf ||
  28. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  29. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  30. return extendStatics(d, b);
  31. };
  32. function __extends(d, b) {
  33. extendStatics(d, b);
  34. function __() { this.constructor = d; }
  35. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  36. }
  37. var __assign = function() {
  38. __assign = Object.assign || function __assign(t) {
  39. for (var s, i = 1, n = arguments.length; i < n; i++) {
  40. s = arguments[i];
  41. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
  42. }
  43. return t;
  44. };
  45. return __assign.apply(this, arguments);
  46. };
  47. /**
  48. * @fileoverview added by tsickle
  49. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  50. */
  51. /**
  52. * Strategy that will prevent the user from scrolling while the overlay is visible.
  53. */
  54. var /**
  55. * Strategy that will prevent the user from scrolling while the overlay is visible.
  56. */
  57. BlockScrollStrategy = /** @class */ (function () {
  58. function BlockScrollStrategy(_viewportRuler, document) {
  59. this._viewportRuler = _viewportRuler;
  60. this._previousHTMLStyles = { top: '', left: '' };
  61. this._isEnabled = false;
  62. this._document = document;
  63. }
  64. /** Attaches this scroll strategy to an overlay. */
  65. /**
  66. * Attaches this scroll strategy to an overlay.
  67. * @return {?}
  68. */
  69. BlockScrollStrategy.prototype.attach = /**
  70. * Attaches this scroll strategy to an overlay.
  71. * @return {?}
  72. */
  73. function () { };
  74. /** Blocks page-level scroll while the attached overlay is open. */
  75. /**
  76. * Blocks page-level scroll while the attached overlay is open.
  77. * @return {?}
  78. */
  79. BlockScrollStrategy.prototype.enable = /**
  80. * Blocks page-level scroll while the attached overlay is open.
  81. * @return {?}
  82. */
  83. function () {
  84. if (this._canBeEnabled()) {
  85. /** @type {?} */
  86. var root = (/** @type {?} */ (this._document.documentElement));
  87. this._previousScrollPosition = this._viewportRuler.getViewportScrollPosition();
  88. // Cache the previous inline styles in case the user had set them.
  89. this._previousHTMLStyles.left = root.style.left || '';
  90. this._previousHTMLStyles.top = root.style.top || '';
  91. // Note: we're using the `html` node, instead of the `body`, because the `body` may
  92. // have the user agent margin, whereas the `html` is guaranteed not to have one.
  93. root.style.left = coercion.coerceCssPixelValue(-this._previousScrollPosition.left);
  94. root.style.top = coercion.coerceCssPixelValue(-this._previousScrollPosition.top);
  95. root.classList.add('cdk-global-scrollblock');
  96. this._isEnabled = true;
  97. }
  98. };
  99. /** Unblocks page-level scroll while the attached overlay is open. */
  100. /**
  101. * Unblocks page-level scroll while the attached overlay is open.
  102. * @return {?}
  103. */
  104. BlockScrollStrategy.prototype.disable = /**
  105. * Unblocks page-level scroll while the attached overlay is open.
  106. * @return {?}
  107. */
  108. function () {
  109. if (this._isEnabled) {
  110. /** @type {?} */
  111. var html = (/** @type {?} */ (this._document.documentElement));
  112. /** @type {?} */
  113. var body = (/** @type {?} */ (this._document.body));
  114. /** @type {?} */
  115. var htmlStyle = (/** @type {?} */ (html.style));
  116. /** @type {?} */
  117. var bodyStyle = (/** @type {?} */ (body.style));
  118. /** @type {?} */
  119. var previousHtmlScrollBehavior = htmlStyle.scrollBehavior || '';
  120. /** @type {?} */
  121. var previousBodyScrollBehavior = bodyStyle.scrollBehavior || '';
  122. this._isEnabled = false;
  123. htmlStyle.left = this._previousHTMLStyles.left;
  124. htmlStyle.top = this._previousHTMLStyles.top;
  125. html.classList.remove('cdk-global-scrollblock');
  126. // Disable user-defined smooth scrolling temporarily while we restore the scroll position.
  127. // See https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
  128. htmlStyle.scrollBehavior = bodyStyle.scrollBehavior = 'auto';
  129. window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top);
  130. htmlStyle.scrollBehavior = previousHtmlScrollBehavior;
  131. bodyStyle.scrollBehavior = previousBodyScrollBehavior;
  132. }
  133. };
  134. /**
  135. * @private
  136. * @return {?}
  137. */
  138. BlockScrollStrategy.prototype._canBeEnabled = /**
  139. * @private
  140. * @return {?}
  141. */
  142. function () {
  143. // Since the scroll strategies can't be singletons, we have to use a global CSS class
  144. // (`cdk-global-scrollblock`) to make sure that we don't try to disable global
  145. // scrolling multiple times.
  146. /** @type {?} */
  147. var html = (/** @type {?} */ (this._document.documentElement));
  148. if (html.classList.contains('cdk-global-scrollblock') || this._isEnabled) {
  149. return false;
  150. }
  151. /** @type {?} */
  152. var body = this._document.body;
  153. /** @type {?} */
  154. var viewport = this._viewportRuler.getViewportSize();
  155. return body.scrollHeight > viewport.height || body.scrollWidth > viewport.width;
  156. };
  157. return BlockScrollStrategy;
  158. }());
  159. /**
  160. * @fileoverview added by tsickle
  161. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  162. */
  163. /**
  164. * Returns an error to be thrown when attempting to attach an already-attached scroll strategy.
  165. * @return {?}
  166. */
  167. function getMatScrollStrategyAlreadyAttachedError() {
  168. return Error("Scroll strategy has already been attached.");
  169. }
  170. /**
  171. * @fileoverview added by tsickle
  172. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  173. */
  174. /**
  175. * Strategy that will close the overlay as soon as the user starts scrolling.
  176. */
  177. var /**
  178. * Strategy that will close the overlay as soon as the user starts scrolling.
  179. */
  180. CloseScrollStrategy = /** @class */ (function () {
  181. function CloseScrollStrategy(_scrollDispatcher, _ngZone, _viewportRuler, _config) {
  182. var _this = this;
  183. this._scrollDispatcher = _scrollDispatcher;
  184. this._ngZone = _ngZone;
  185. this._viewportRuler = _viewportRuler;
  186. this._config = _config;
  187. this._scrollSubscription = null;
  188. /**
  189. * Detaches the overlay ref and disables the scroll strategy.
  190. */
  191. this._detach = (/**
  192. * @return {?}
  193. */
  194. function () {
  195. _this.disable();
  196. if (_this._overlayRef.hasAttached()) {
  197. _this._ngZone.run((/**
  198. * @return {?}
  199. */
  200. function () { return _this._overlayRef.detach(); }));
  201. }
  202. });
  203. }
  204. /** Attaches this scroll strategy to an overlay. */
  205. /**
  206. * Attaches this scroll strategy to an overlay.
  207. * @param {?} overlayRef
  208. * @return {?}
  209. */
  210. CloseScrollStrategy.prototype.attach = /**
  211. * Attaches this scroll strategy to an overlay.
  212. * @param {?} overlayRef
  213. * @return {?}
  214. */
  215. function (overlayRef) {
  216. if (this._overlayRef) {
  217. throw getMatScrollStrategyAlreadyAttachedError();
  218. }
  219. this._overlayRef = overlayRef;
  220. };
  221. /** Enables the closing of the attached overlay on scroll. */
  222. /**
  223. * Enables the closing of the attached overlay on scroll.
  224. * @return {?}
  225. */
  226. CloseScrollStrategy.prototype.enable = /**
  227. * Enables the closing of the attached overlay on scroll.
  228. * @return {?}
  229. */
  230. function () {
  231. var _this = this;
  232. if (this._scrollSubscription) {
  233. return;
  234. }
  235. /** @type {?} */
  236. var stream = this._scrollDispatcher.scrolled(0);
  237. if (this._config && this._config.threshold && this._config.threshold > 1) {
  238. this._initialScrollPosition = this._viewportRuler.getViewportScrollPosition().top;
  239. this._scrollSubscription = stream.subscribe((/**
  240. * @return {?}
  241. */
  242. function () {
  243. /** @type {?} */
  244. var scrollPosition = _this._viewportRuler.getViewportScrollPosition().top;
  245. if (Math.abs(scrollPosition - _this._initialScrollPosition) > (/** @type {?} */ ((/** @type {?} */ (_this._config)).threshold))) {
  246. _this._detach();
  247. }
  248. else {
  249. _this._overlayRef.updatePosition();
  250. }
  251. }));
  252. }
  253. else {
  254. this._scrollSubscription = stream.subscribe(this._detach);
  255. }
  256. };
  257. /** Disables the closing the attached overlay on scroll. */
  258. /**
  259. * Disables the closing the attached overlay on scroll.
  260. * @return {?}
  261. */
  262. CloseScrollStrategy.prototype.disable = /**
  263. * Disables the closing the attached overlay on scroll.
  264. * @return {?}
  265. */
  266. function () {
  267. if (this._scrollSubscription) {
  268. this._scrollSubscription.unsubscribe();
  269. this._scrollSubscription = null;
  270. }
  271. };
  272. /**
  273. * @return {?}
  274. */
  275. CloseScrollStrategy.prototype.detach = /**
  276. * @return {?}
  277. */
  278. function () {
  279. this.disable();
  280. this._overlayRef = (/** @type {?} */ (null));
  281. };
  282. return CloseScrollStrategy;
  283. }());
  284. /**
  285. * @fileoverview added by tsickle
  286. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  287. */
  288. /**
  289. * Scroll strategy that doesn't do anything.
  290. */
  291. var /**
  292. * Scroll strategy that doesn't do anything.
  293. */
  294. NoopScrollStrategy = /** @class */ (function () {
  295. function NoopScrollStrategy() {
  296. }
  297. /** Does nothing, as this scroll strategy is a no-op. */
  298. /**
  299. * Does nothing, as this scroll strategy is a no-op.
  300. * @return {?}
  301. */
  302. NoopScrollStrategy.prototype.enable = /**
  303. * Does nothing, as this scroll strategy is a no-op.
  304. * @return {?}
  305. */
  306. function () { };
  307. /** Does nothing, as this scroll strategy is a no-op. */
  308. /**
  309. * Does nothing, as this scroll strategy is a no-op.
  310. * @return {?}
  311. */
  312. NoopScrollStrategy.prototype.disable = /**
  313. * Does nothing, as this scroll strategy is a no-op.
  314. * @return {?}
  315. */
  316. function () { };
  317. /** Does nothing, as this scroll strategy is a no-op. */
  318. /**
  319. * Does nothing, as this scroll strategy is a no-op.
  320. * @return {?}
  321. */
  322. NoopScrollStrategy.prototype.attach = /**
  323. * Does nothing, as this scroll strategy is a no-op.
  324. * @return {?}
  325. */
  326. function () { };
  327. return NoopScrollStrategy;
  328. }());
  329. /**
  330. * @fileoverview added by tsickle
  331. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  332. */
  333. // TODO(jelbourn): move this to live with the rest of the scrolling code
  334. // TODO(jelbourn): someday replace this with IntersectionObservers
  335. /**
  336. * Gets whether an element is scrolled outside of view by any of its parent scrolling containers.
  337. * \@docs-private
  338. * @param {?} element Dimensions of the element (from getBoundingClientRect)
  339. * @param {?} scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)
  340. * @return {?} Whether the element is scrolled out of view
  341. */
  342. function isElementScrolledOutsideView(element, scrollContainers) {
  343. return scrollContainers.some((/**
  344. * @param {?} containerBounds
  345. * @return {?}
  346. */
  347. function (containerBounds) {
  348. /** @type {?} */
  349. var outsideAbove = element.bottom < containerBounds.top;
  350. /** @type {?} */
  351. var outsideBelow = element.top > containerBounds.bottom;
  352. /** @type {?} */
  353. var outsideLeft = element.right < containerBounds.left;
  354. /** @type {?} */
  355. var outsideRight = element.left > containerBounds.right;
  356. return outsideAbove || outsideBelow || outsideLeft || outsideRight;
  357. }));
  358. }
  359. /**
  360. * Gets whether an element is clipped by any of its scrolling containers.
  361. * \@docs-private
  362. * @param {?} element Dimensions of the element (from getBoundingClientRect)
  363. * @param {?} scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)
  364. * @return {?} Whether the element is clipped
  365. */
  366. function isElementClippedByScrolling(element, scrollContainers) {
  367. return scrollContainers.some((/**
  368. * @param {?} scrollContainerRect
  369. * @return {?}
  370. */
  371. function (scrollContainerRect) {
  372. /** @type {?} */
  373. var clippedAbove = element.top < scrollContainerRect.top;
  374. /** @type {?} */
  375. var clippedBelow = element.bottom > scrollContainerRect.bottom;
  376. /** @type {?} */
  377. var clippedLeft = element.left < scrollContainerRect.left;
  378. /** @type {?} */
  379. var clippedRight = element.right > scrollContainerRect.right;
  380. return clippedAbove || clippedBelow || clippedLeft || clippedRight;
  381. }));
  382. }
  383. /**
  384. * @fileoverview added by tsickle
  385. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  386. */
  387. /**
  388. * Strategy that will update the element position as the user is scrolling.
  389. */
  390. var /**
  391. * Strategy that will update the element position as the user is scrolling.
  392. */
  393. RepositionScrollStrategy = /** @class */ (function () {
  394. function RepositionScrollStrategy(_scrollDispatcher, _viewportRuler, _ngZone, _config) {
  395. this._scrollDispatcher = _scrollDispatcher;
  396. this._viewportRuler = _viewportRuler;
  397. this._ngZone = _ngZone;
  398. this._config = _config;
  399. this._scrollSubscription = null;
  400. }
  401. /** Attaches this scroll strategy to an overlay. */
  402. /**
  403. * Attaches this scroll strategy to an overlay.
  404. * @param {?} overlayRef
  405. * @return {?}
  406. */
  407. RepositionScrollStrategy.prototype.attach = /**
  408. * Attaches this scroll strategy to an overlay.
  409. * @param {?} overlayRef
  410. * @return {?}
  411. */
  412. function (overlayRef) {
  413. if (this._overlayRef) {
  414. throw getMatScrollStrategyAlreadyAttachedError();
  415. }
  416. this._overlayRef = overlayRef;
  417. };
  418. /** Enables repositioning of the attached overlay on scroll. */
  419. /**
  420. * Enables repositioning of the attached overlay on scroll.
  421. * @return {?}
  422. */
  423. RepositionScrollStrategy.prototype.enable = /**
  424. * Enables repositioning of the attached overlay on scroll.
  425. * @return {?}
  426. */
  427. function () {
  428. var _this = this;
  429. if (!this._scrollSubscription) {
  430. /** @type {?} */
  431. var throttle = this._config ? this._config.scrollThrottle : 0;
  432. this._scrollSubscription = this._scrollDispatcher.scrolled(throttle).subscribe((/**
  433. * @return {?}
  434. */
  435. function () {
  436. _this._overlayRef.updatePosition();
  437. // TODO(crisbeto): make `close` on by default once all components can handle it.
  438. if (_this._config && _this._config.autoClose) {
  439. /** @type {?} */
  440. var overlayRect = _this._overlayRef.overlayElement.getBoundingClientRect();
  441. var _a = _this._viewportRuler.getViewportSize(), width = _a.width, height = _a.height;
  442. // TODO(crisbeto): include all ancestor scroll containers here once
  443. // we have a way of exposing the trigger element to the scroll strategy.
  444. /** @type {?} */
  445. var parentRects = [{ width: width, height: height, bottom: height, right: width, top: 0, left: 0 }];
  446. if (isElementScrolledOutsideView(overlayRect, parentRects)) {
  447. _this.disable();
  448. _this._ngZone.run((/**
  449. * @return {?}
  450. */
  451. function () { return _this._overlayRef.detach(); }));
  452. }
  453. }
  454. }));
  455. }
  456. };
  457. /** Disables repositioning of the attached overlay on scroll. */
  458. /**
  459. * Disables repositioning of the attached overlay on scroll.
  460. * @return {?}
  461. */
  462. RepositionScrollStrategy.prototype.disable = /**
  463. * Disables repositioning of the attached overlay on scroll.
  464. * @return {?}
  465. */
  466. function () {
  467. if (this._scrollSubscription) {
  468. this._scrollSubscription.unsubscribe();
  469. this._scrollSubscription = null;
  470. }
  471. };
  472. /**
  473. * @return {?}
  474. */
  475. RepositionScrollStrategy.prototype.detach = /**
  476. * @return {?}
  477. */
  478. function () {
  479. this.disable();
  480. this._overlayRef = (/** @type {?} */ (null));
  481. };
  482. return RepositionScrollStrategy;
  483. }());
  484. /**
  485. * @fileoverview added by tsickle
  486. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  487. */
  488. /**
  489. * Options for how an overlay will handle scrolling.
  490. *
  491. * Users can provide a custom value for `ScrollStrategyOptions` to replace the default
  492. * behaviors. This class primarily acts as a factory for ScrollStrategy instances.
  493. */
  494. var ScrollStrategyOptions = /** @class */ (function () {
  495. function ScrollStrategyOptions(_scrollDispatcher, _viewportRuler, _ngZone, document) {
  496. var _this = this;
  497. this._scrollDispatcher = _scrollDispatcher;
  498. this._viewportRuler = _viewportRuler;
  499. this._ngZone = _ngZone;
  500. /**
  501. * Do nothing on scroll.
  502. */
  503. this.noop = (/**
  504. * @return {?}
  505. */
  506. function () { return new NoopScrollStrategy(); });
  507. /**
  508. * Close the overlay as soon as the user scrolls.
  509. * @param config Configuration to be used inside the scroll strategy.
  510. */
  511. this.close = (/**
  512. * @param {?=} config
  513. * @return {?}
  514. */
  515. function (config) { return new CloseScrollStrategy(_this._scrollDispatcher, _this._ngZone, _this._viewportRuler, config); });
  516. /**
  517. * Block scrolling.
  518. */
  519. this.block = (/**
  520. * @return {?}
  521. */
  522. function () { return new BlockScrollStrategy(_this._viewportRuler, _this._document); });
  523. /**
  524. * Update the overlay's position on scroll.
  525. * @param config Configuration to be used inside the scroll strategy.
  526. * Allows debouncing the reposition calls.
  527. */
  528. this.reposition = (/**
  529. * @param {?=} config
  530. * @return {?}
  531. */
  532. function (config) { return new RepositionScrollStrategy(_this._scrollDispatcher, _this._viewportRuler, _this._ngZone, config); });
  533. this._document = document;
  534. }
  535. ScrollStrategyOptions.decorators = [
  536. { type: core.Injectable, args: [{ providedIn: 'root' },] },
  537. ];
  538. /** @nocollapse */
  539. ScrollStrategyOptions.ctorParameters = function () { return [
  540. { type: scrolling.ScrollDispatcher },
  541. { type: scrolling.ViewportRuler },
  542. { type: core.NgZone },
  543. { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }
  544. ]; };
  545. /** @nocollapse */ ScrollStrategyOptions.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function ScrollStrategyOptions_Factory() { return new ScrollStrategyOptions(core.ɵɵinject(scrolling.ScrollDispatcher), core.ɵɵinject(scrolling.ViewportRuler), core.ɵɵinject(core.NgZone), core.ɵɵinject(common.DOCUMENT)); }, token: ScrollStrategyOptions, providedIn: "root" });
  546. return ScrollStrategyOptions;
  547. }());
  548. /**
  549. * @fileoverview added by tsickle
  550. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  551. */
  552. /**
  553. * @fileoverview added by tsickle
  554. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  555. */
  556. /**
  557. * Initial configuration used when creating an overlay.
  558. */
  559. var /**
  560. * Initial configuration used when creating an overlay.
  561. */
  562. OverlayConfig = /** @class */ (function () {
  563. function OverlayConfig(config) {
  564. /**
  565. * Strategy to be used when handling scroll events while the overlay is open.
  566. */
  567. this.scrollStrategy = new NoopScrollStrategy();
  568. /**
  569. * Custom class to add to the overlay pane.
  570. */
  571. this.panelClass = '';
  572. /**
  573. * Whether the overlay has a backdrop.
  574. */
  575. this.hasBackdrop = false;
  576. /**
  577. * Custom class to add to the backdrop
  578. */
  579. this.backdropClass = 'cdk-overlay-dark-backdrop';
  580. /**
  581. * Whether the overlay should be disposed of when the user goes backwards/forwards in history.
  582. * Note that this usually doesn't include clicking on links (unless the user is using
  583. * the `HashLocationStrategy`).
  584. */
  585. this.disposeOnNavigation = false;
  586. if (config) {
  587. /** @type {?} */
  588. var configKeys = (/** @type {?} */ (Object.keys(config)));
  589. for (var _i = 0, configKeys_1 = configKeys; _i < configKeys_1.length; _i++) {
  590. var key = configKeys_1[_i];
  591. if (config[key] !== undefined) {
  592. // TypeScript, as of version 3.5, sees the left-hand-side of this expression
  593. // as "I don't know *which* key this is, so the only valid value is the intersection
  594. // of all the posible values." In this case, that happens to be `undefined`. TypeScript
  595. // is not smart enough to see that the right-hand-side is actually an access of the same
  596. // exact type with the same exact key, meaning that the value type must be identical.
  597. // So we use `any` to work around this.
  598. this[key] = (/** @type {?} */ (config[key]));
  599. }
  600. }
  601. }
  602. }
  603. return OverlayConfig;
  604. }());
  605. /**
  606. * @fileoverview added by tsickle
  607. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  608. */
  609. /**
  610. * The points of the origin element and the overlay element to connect.
  611. */
  612. var /**
  613. * The points of the origin element and the overlay element to connect.
  614. */
  615. ConnectionPositionPair = /** @class */ (function () {
  616. function ConnectionPositionPair(origin, overlay, offsetX, offsetY, panelClass) {
  617. this.offsetX = offsetX;
  618. this.offsetY = offsetY;
  619. this.panelClass = panelClass;
  620. this.originX = origin.originX;
  621. this.originY = origin.originY;
  622. this.overlayX = overlay.overlayX;
  623. this.overlayY = overlay.overlayY;
  624. }
  625. return ConnectionPositionPair;
  626. }());
  627. /**
  628. * Set of properties regarding the position of the origin and overlay relative to the viewport
  629. * with respect to the containing Scrollable elements.
  630. *
  631. * The overlay and origin are clipped if any part of their bounding client rectangle exceeds the
  632. * bounds of any one of the strategy's Scrollable's bounding client rectangle.
  633. *
  634. * The overlay and origin are outside view if there is no overlap between their bounding client
  635. * rectangle and any one of the strategy's Scrollable's bounding client rectangle.
  636. *
  637. * ----------- -----------
  638. * | outside | | clipped |
  639. * | view | --------------------------
  640. * | | | | | |
  641. * ---------- | ----------- |
  642. * -------------------------- | |
  643. * | | | Scrollable |
  644. * | | | |
  645. * | | --------------------------
  646. * | Scrollable |
  647. * | |
  648. * --------------------------
  649. *
  650. * \@docs-private
  651. */
  652. var /**
  653. * Set of properties regarding the position of the origin and overlay relative to the viewport
  654. * with respect to the containing Scrollable elements.
  655. *
  656. * The overlay and origin are clipped if any part of their bounding client rectangle exceeds the
  657. * bounds of any one of the strategy's Scrollable's bounding client rectangle.
  658. *
  659. * The overlay and origin are outside view if there is no overlap between their bounding client
  660. * rectangle and any one of the strategy's Scrollable's bounding client rectangle.
  661. *
  662. * ----------- -----------
  663. * | outside | | clipped |
  664. * | view | --------------------------
  665. * | | | | | |
  666. * ---------- | ----------- |
  667. * -------------------------- | |
  668. * | | | Scrollable |
  669. * | | | |
  670. * | | --------------------------
  671. * | Scrollable |
  672. * | |
  673. * --------------------------
  674. *
  675. * \@docs-private
  676. */
  677. ScrollingVisibility = /** @class */ (function () {
  678. function ScrollingVisibility() {
  679. }
  680. return ScrollingVisibility;
  681. }());
  682. /**
  683. * The change event emitted by the strategy when a fallback position is used.
  684. */
  685. var ConnectedOverlayPositionChange = /** @class */ (function () {
  686. function ConnectedOverlayPositionChange(connectionPair, scrollableViewProperties) {
  687. this.connectionPair = connectionPair;
  688. this.scrollableViewProperties = scrollableViewProperties;
  689. }
  690. /** @nocollapse */
  691. ConnectedOverlayPositionChange.ctorParameters = function () { return [
  692. { type: ConnectionPositionPair },
  693. { type: ScrollingVisibility, decorators: [{ type: core.Optional }] }
  694. ]; };
  695. return ConnectedOverlayPositionChange;
  696. }());
  697. /**
  698. * Validates whether a vertical position property matches the expected values.
  699. * \@docs-private
  700. * @param {?} property Name of the property being validated.
  701. * @param {?} value Value of the property being validated.
  702. * @return {?}
  703. */
  704. function validateVerticalPosition(property, value) {
  705. if (value !== 'top' && value !== 'bottom' && value !== 'center') {
  706. throw Error("ConnectedPosition: Invalid " + property + " \"" + value + "\". " +
  707. "Expected \"top\", \"bottom\" or \"center\".");
  708. }
  709. }
  710. /**
  711. * Validates whether a horizontal position property matches the expected values.
  712. * \@docs-private
  713. * @param {?} property Name of the property being validated.
  714. * @param {?} value Value of the property being validated.
  715. * @return {?}
  716. */
  717. function validateHorizontalPosition(property, value) {
  718. if (value !== 'start' && value !== 'end' && value !== 'center') {
  719. throw Error("ConnectedPosition: Invalid " + property + " \"" + value + "\". " +
  720. "Expected \"start\", \"end\" or \"center\".");
  721. }
  722. }
  723. /**
  724. * @fileoverview added by tsickle
  725. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  726. */
  727. /**
  728. * Service for dispatching keyboard events that land on the body to appropriate overlay ref,
  729. * if any. It maintains a list of attached overlays to determine best suited overlay based
  730. * on event target and order of overlay opens.
  731. */
  732. var OverlayKeyboardDispatcher = /** @class */ (function () {
  733. function OverlayKeyboardDispatcher(document) {
  734. var _this = this;
  735. /**
  736. * Currently attached overlays in the order they were attached.
  737. */
  738. this._attachedOverlays = [];
  739. /**
  740. * Keyboard event listener that will be attached to the body.
  741. */
  742. this._keydownListener = (/**
  743. * @param {?} event
  744. * @return {?}
  745. */
  746. function (event) {
  747. /** @type {?} */
  748. var overlays = _this._attachedOverlays;
  749. for (var i = overlays.length - 1; i > -1; i--) {
  750. // Dispatch the keydown event to the top overlay which has subscribers to its keydown events.
  751. // We want to target the most recent overlay, rather than trying to match where the event came
  752. // from, because some components might open an overlay, but keep focus on a trigger element
  753. // (e.g. for select and autocomplete). We skip overlays without keydown event subscriptions,
  754. // because we don't want overlays that don't handle keyboard events to block the ones below
  755. // them that do.
  756. if (overlays[i]._keydownEventSubscriptions > 0) {
  757. overlays[i]._keydownEvents.next(event);
  758. break;
  759. }
  760. }
  761. });
  762. this._document = document;
  763. }
  764. /**
  765. * @return {?}
  766. */
  767. OverlayKeyboardDispatcher.prototype.ngOnDestroy = /**
  768. * @return {?}
  769. */
  770. function () {
  771. this._detach();
  772. };
  773. /** Add a new overlay to the list of attached overlay refs. */
  774. /**
  775. * Add a new overlay to the list of attached overlay refs.
  776. * @param {?} overlayRef
  777. * @return {?}
  778. */
  779. OverlayKeyboardDispatcher.prototype.add = /**
  780. * Add a new overlay to the list of attached overlay refs.
  781. * @param {?} overlayRef
  782. * @return {?}
  783. */
  784. function (overlayRef) {
  785. // Ensure that we don't get the same overlay multiple times.
  786. this.remove(overlayRef);
  787. // Lazily start dispatcher once first overlay is added
  788. if (!this._isAttached) {
  789. this._document.body.addEventListener('keydown', this._keydownListener);
  790. this._isAttached = true;
  791. }
  792. this._attachedOverlays.push(overlayRef);
  793. };
  794. /** Remove an overlay from the list of attached overlay refs. */
  795. /**
  796. * Remove an overlay from the list of attached overlay refs.
  797. * @param {?} overlayRef
  798. * @return {?}
  799. */
  800. OverlayKeyboardDispatcher.prototype.remove = /**
  801. * Remove an overlay from the list of attached overlay refs.
  802. * @param {?} overlayRef
  803. * @return {?}
  804. */
  805. function (overlayRef) {
  806. /** @type {?} */
  807. var index = this._attachedOverlays.indexOf(overlayRef);
  808. if (index > -1) {
  809. this._attachedOverlays.splice(index, 1);
  810. }
  811. // Remove the global listener once there are no more overlays.
  812. if (this._attachedOverlays.length === 0) {
  813. this._detach();
  814. }
  815. };
  816. /** Detaches the global keyboard event listener. */
  817. /**
  818. * Detaches the global keyboard event listener.
  819. * @private
  820. * @return {?}
  821. */
  822. OverlayKeyboardDispatcher.prototype._detach = /**
  823. * Detaches the global keyboard event listener.
  824. * @private
  825. * @return {?}
  826. */
  827. function () {
  828. if (this._isAttached) {
  829. this._document.body.removeEventListener('keydown', this._keydownListener);
  830. this._isAttached = false;
  831. }
  832. };
  833. OverlayKeyboardDispatcher.decorators = [
  834. { type: core.Injectable, args: [{ providedIn: 'root' },] },
  835. ];
  836. /** @nocollapse */
  837. OverlayKeyboardDispatcher.ctorParameters = function () { return [
  838. { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }
  839. ]; };
  840. /** @nocollapse */ OverlayKeyboardDispatcher.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function OverlayKeyboardDispatcher_Factory() { return new OverlayKeyboardDispatcher(core.ɵɵinject(common.DOCUMENT)); }, token: OverlayKeyboardDispatcher, providedIn: "root" });
  841. return OverlayKeyboardDispatcher;
  842. }());
  843. /**
  844. * \@docs-private \@deprecated \@breaking-change 8.0.0
  845. * @param {?} dispatcher
  846. * @param {?} _document
  847. * @return {?}
  848. */
  849. function OVERLAY_KEYBOARD_DISPATCHER_PROVIDER_FACTORY(dispatcher, _document) {
  850. return dispatcher || new OverlayKeyboardDispatcher(_document);
  851. }
  852. /**
  853. * \@docs-private \@deprecated \@breaking-change 8.0.0
  854. * @type {?}
  855. */
  856. var OVERLAY_KEYBOARD_DISPATCHER_PROVIDER = {
  857. // If there is already an OverlayKeyboardDispatcher available, use that.
  858. // Otherwise, provide a new one.
  859. provide: OverlayKeyboardDispatcher,
  860. deps: [
  861. [new core.Optional(), new core.SkipSelf(), OverlayKeyboardDispatcher],
  862. (/** @type {?} */ (
  863. // Coerce to `InjectionToken` so that the `deps` match the "shape"
  864. // of the type expected by Angular
  865. common.DOCUMENT))
  866. ],
  867. useFactory: OVERLAY_KEYBOARD_DISPATCHER_PROVIDER_FACTORY
  868. };
  869. /**
  870. * @fileoverview added by tsickle
  871. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  872. */
  873. /**
  874. * Container inside which all overlays will render.
  875. */
  876. var OverlayContainer = /** @class */ (function () {
  877. function OverlayContainer(document) {
  878. this._document = document;
  879. }
  880. /**
  881. * @return {?}
  882. */
  883. OverlayContainer.prototype.ngOnDestroy = /**
  884. * @return {?}
  885. */
  886. function () {
  887. if (this._containerElement && this._containerElement.parentNode) {
  888. this._containerElement.parentNode.removeChild(this._containerElement);
  889. }
  890. };
  891. /**
  892. * This method returns the overlay container element. It will lazily
  893. * create the element the first time it is called to facilitate using
  894. * the container in non-browser environments.
  895. * @returns the container element
  896. */
  897. /**
  898. * This method returns the overlay container element. It will lazily
  899. * create the element the first time it is called to facilitate using
  900. * the container in non-browser environments.
  901. * @return {?} the container element
  902. */
  903. OverlayContainer.prototype.getContainerElement = /**
  904. * This method returns the overlay container element. It will lazily
  905. * create the element the first time it is called to facilitate using
  906. * the container in non-browser environments.
  907. * @return {?} the container element
  908. */
  909. function () {
  910. if (!this._containerElement) {
  911. this._createContainer();
  912. }
  913. return this._containerElement;
  914. };
  915. /**
  916. * Create the overlay container element, which is simply a div
  917. * with the 'cdk-overlay-container' class on the document body.
  918. */
  919. /**
  920. * Create the overlay container element, which is simply a div
  921. * with the 'cdk-overlay-container' class on the document body.
  922. * @protected
  923. * @return {?}
  924. */
  925. OverlayContainer.prototype._createContainer = /**
  926. * Create the overlay container element, which is simply a div
  927. * with the 'cdk-overlay-container' class on the document body.
  928. * @protected
  929. * @return {?}
  930. */
  931. function () {
  932. /** @type {?} */
  933. var containerClass = 'cdk-overlay-container';
  934. /** @type {?} */
  935. var previousContainers = this._document.getElementsByClassName(containerClass);
  936. // Remove any old containers. This can happen when transitioning from the server to the client.
  937. for (var i = 0; i < previousContainers.length; i++) {
  938. (/** @type {?} */ (previousContainers[i].parentNode)).removeChild(previousContainers[i]);
  939. }
  940. /** @type {?} */
  941. var container = this._document.createElement('div');
  942. container.classList.add(containerClass);
  943. this._document.body.appendChild(container);
  944. this._containerElement = container;
  945. };
  946. OverlayContainer.decorators = [
  947. { type: core.Injectable, args: [{ providedIn: 'root' },] },
  948. ];
  949. /** @nocollapse */
  950. OverlayContainer.ctorParameters = function () { return [
  951. { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }
  952. ]; };
  953. /** @nocollapse */ OverlayContainer.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function OverlayContainer_Factory() { return new OverlayContainer(core.ɵɵinject(common.DOCUMENT)); }, token: OverlayContainer, providedIn: "root" });
  954. return OverlayContainer;
  955. }());
  956. /**
  957. * \@docs-private \@deprecated \@breaking-change 8.0.0
  958. * @param {?} parentContainer
  959. * @param {?} _document
  960. * @return {?}
  961. */
  962. function OVERLAY_CONTAINER_PROVIDER_FACTORY(parentContainer, _document) {
  963. return parentContainer || new OverlayContainer(_document);
  964. }
  965. /**
  966. * \@docs-private \@deprecated \@breaking-change 8.0.0
  967. * @type {?}
  968. */
  969. var OVERLAY_CONTAINER_PROVIDER = {
  970. // If there is already an OverlayContainer available, use that. Otherwise, provide a new one.
  971. provide: OverlayContainer,
  972. deps: [
  973. [new core.Optional(), new core.SkipSelf(), OverlayContainer],
  974. (/** @type {?} */ (common.DOCUMENT))
  975. ],
  976. useFactory: OVERLAY_CONTAINER_PROVIDER_FACTORY
  977. };
  978. /**
  979. * @fileoverview added by tsickle
  980. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  981. */
  982. /**
  983. * Reference to an overlay that has been created with the Overlay service.
  984. * Used to manipulate or dispose of said overlay.
  985. */
  986. var /**
  987. * Reference to an overlay that has been created with the Overlay service.
  988. * Used to manipulate or dispose of said overlay.
  989. */
  990. OverlayRef = /** @class */ (function () {
  991. function OverlayRef(_portalOutlet, _host, _pane, _config, _ngZone, _keyboardDispatcher, _document, _location) {
  992. var _this = this;
  993. this._portalOutlet = _portalOutlet;
  994. this._host = _host;
  995. this._pane = _pane;
  996. this._config = _config;
  997. this._ngZone = _ngZone;
  998. this._keyboardDispatcher = _keyboardDispatcher;
  999. this._document = _document;
  1000. this._location = _location;
  1001. this._backdropElement = null;
  1002. this._backdropClick = new rxjs.Subject();
  1003. this._attachments = new rxjs.Subject();
  1004. this._detachments = new rxjs.Subject();
  1005. this._locationChanges = rxjs.Subscription.EMPTY;
  1006. this._backdropClickHandler = (/**
  1007. * @param {?} event
  1008. * @return {?}
  1009. */
  1010. function (event) { return _this._backdropClick.next(event); });
  1011. this._keydownEventsObservable = new rxjs.Observable((/**
  1012. * @param {?} observer
  1013. * @return {?}
  1014. */
  1015. function (observer) {
  1016. /** @type {?} */
  1017. var subscription = _this._keydownEvents.subscribe(observer);
  1018. _this._keydownEventSubscriptions++;
  1019. return (/**
  1020. * @return {?}
  1021. */
  1022. function () {
  1023. subscription.unsubscribe();
  1024. _this._keydownEventSubscriptions--;
  1025. });
  1026. }));
  1027. /**
  1028. * Stream of keydown events dispatched to this overlay.
  1029. */
  1030. this._keydownEvents = new rxjs.Subject();
  1031. /**
  1032. * Amount of subscriptions to the keydown events.
  1033. */
  1034. this._keydownEventSubscriptions = 0;
  1035. if (_config.scrollStrategy) {
  1036. this._scrollStrategy = _config.scrollStrategy;
  1037. this._scrollStrategy.attach(this);
  1038. }
  1039. this._positionStrategy = _config.positionStrategy;
  1040. }
  1041. Object.defineProperty(OverlayRef.prototype, "overlayElement", {
  1042. /** The overlay's HTML element */
  1043. get: /**
  1044. * The overlay's HTML element
  1045. * @return {?}
  1046. */
  1047. function () {
  1048. return this._pane;
  1049. },
  1050. enumerable: true,
  1051. configurable: true
  1052. });
  1053. Object.defineProperty(OverlayRef.prototype, "backdropElement", {
  1054. /** The overlay's backdrop HTML element. */
  1055. get: /**
  1056. * The overlay's backdrop HTML element.
  1057. * @return {?}
  1058. */
  1059. function () {
  1060. return this._backdropElement;
  1061. },
  1062. enumerable: true,
  1063. configurable: true
  1064. });
  1065. Object.defineProperty(OverlayRef.prototype, "hostElement", {
  1066. /**
  1067. * Wrapper around the panel element. Can be used for advanced
  1068. * positioning where a wrapper with specific styling is
  1069. * required around the overlay pane.
  1070. */
  1071. get: /**
  1072. * Wrapper around the panel element. Can be used for advanced
  1073. * positioning where a wrapper with specific styling is
  1074. * required around the overlay pane.
  1075. * @return {?}
  1076. */
  1077. function () {
  1078. return this._host;
  1079. },
  1080. enumerable: true,
  1081. configurable: true
  1082. });
  1083. /**
  1084. * Attaches content, given via a Portal, to the overlay.
  1085. * If the overlay is configured to have a backdrop, it will be created.
  1086. *
  1087. * @param portal Portal instance to which to attach the overlay.
  1088. * @returns The portal attachment result.
  1089. */
  1090. /**
  1091. * Attaches content, given via a Portal, to the overlay.
  1092. * If the overlay is configured to have a backdrop, it will be created.
  1093. *
  1094. * @param {?} portal Portal instance to which to attach the overlay.
  1095. * @return {?} The portal attachment result.
  1096. */
  1097. OverlayRef.prototype.attach = /**
  1098. * Attaches content, given via a Portal, to the overlay.
  1099. * If the overlay is configured to have a backdrop, it will be created.
  1100. *
  1101. * @param {?} portal Portal instance to which to attach the overlay.
  1102. * @return {?} The portal attachment result.
  1103. */
  1104. function (portal$$1) {
  1105. var _this = this;
  1106. /** @type {?} */
  1107. var attachResult = this._portalOutlet.attach(portal$$1);
  1108. if (this._positionStrategy) {
  1109. this._positionStrategy.attach(this);
  1110. }
  1111. // Update the pane element with the given configuration.
  1112. if (!this._host.parentElement && this._previousHostParent) {
  1113. this._previousHostParent.appendChild(this._host);
  1114. }
  1115. this._updateStackingOrder();
  1116. this._updateElementSize();
  1117. this._updateElementDirection();
  1118. if (this._scrollStrategy) {
  1119. this._scrollStrategy.enable();
  1120. }
  1121. // Update the position once the zone is stable so that the overlay will be fully rendered
  1122. // before attempting to position it, as the position may depend on the size of the rendered
  1123. // content.
  1124. this._ngZone.onStable
  1125. .asObservable()
  1126. .pipe(operators.take(1))
  1127. .subscribe((/**
  1128. * @return {?}
  1129. */
  1130. function () {
  1131. // The overlay could've been detached before the zone has stabilized.
  1132. if (_this.hasAttached()) {
  1133. _this.updatePosition();
  1134. }
  1135. }));
  1136. // Enable pointer events for the overlay pane element.
  1137. this._togglePointerEvents(true);
  1138. if (this._config.hasBackdrop) {
  1139. this._attachBackdrop();
  1140. }
  1141. if (this._config.panelClass) {
  1142. this._toggleClasses(this._pane, this._config.panelClass, true);
  1143. }
  1144. // Only emit the `attachments` event once all other setup is done.
  1145. this._attachments.next();
  1146. // Track this overlay by the keyboard dispatcher
  1147. this._keyboardDispatcher.add(this);
  1148. // @breaking-change 8.0.0 remove the null check for `_location`
  1149. // once the constructor parameter is made required.
  1150. if (this._config.disposeOnNavigation && this._location) {
  1151. this._locationChanges = this._location.subscribe((/**
  1152. * @return {?}
  1153. */
  1154. function () { return _this.dispose(); }));
  1155. }
  1156. return attachResult;
  1157. };
  1158. /**
  1159. * Detaches an overlay from a portal.
  1160. * @returns The portal detachment result.
  1161. */
  1162. /**
  1163. * Detaches an overlay from a portal.
  1164. * @return {?} The portal detachment result.
  1165. */
  1166. OverlayRef.prototype.detach = /**
  1167. * Detaches an overlay from a portal.
  1168. * @return {?} The portal detachment result.
  1169. */
  1170. function () {
  1171. if (!this.hasAttached()) {
  1172. return;
  1173. }
  1174. this.detachBackdrop();
  1175. // When the overlay is detached, the pane element should disable pointer events.
  1176. // This is necessary because otherwise the pane element will cover the page and disable
  1177. // pointer events therefore. Depends on the position strategy and the applied pane boundaries.
  1178. this._togglePointerEvents(false);
  1179. if (this._positionStrategy && this._positionStrategy.detach) {
  1180. this._positionStrategy.detach();
  1181. }
  1182. if (this._scrollStrategy) {
  1183. this._scrollStrategy.disable();
  1184. }
  1185. /** @type {?} */
  1186. var detachmentResult = this._portalOutlet.detach();
  1187. // Only emit after everything is detached.
  1188. this._detachments.next();
  1189. // Remove this overlay from keyboard dispatcher tracking.
  1190. this._keyboardDispatcher.remove(this);
  1191. // Keeping the host element in DOM the can cause scroll jank, because it still gets
  1192. // rendered, even though it's transparent and unclickable which is why we remove it.
  1193. this._detachContentWhenStable();
  1194. // Stop listening for location changes.
  1195. this._locationChanges.unsubscribe();
  1196. return detachmentResult;
  1197. };
  1198. /** Cleans up the overlay from the DOM. */
  1199. /**
  1200. * Cleans up the overlay from the DOM.
  1201. * @return {?}
  1202. */
  1203. OverlayRef.prototype.dispose = /**
  1204. * Cleans up the overlay from the DOM.
  1205. * @return {?}
  1206. */
  1207. function () {
  1208. /** @type {?} */
  1209. var isAttached = this.hasAttached();
  1210. if (this._positionStrategy) {
  1211. this._positionStrategy.dispose();
  1212. }
  1213. this._disposeScrollStrategy();
  1214. this.detachBackdrop();
  1215. this._locationChanges.unsubscribe();
  1216. this._keyboardDispatcher.remove(this);
  1217. this._portalOutlet.dispose();
  1218. this._attachments.complete();
  1219. this._backdropClick.complete();
  1220. this._keydownEvents.complete();
  1221. if (this._host && this._host.parentNode) {
  1222. this._host.parentNode.removeChild(this._host);
  1223. this._host = (/** @type {?} */ (null));
  1224. }
  1225. this._previousHostParent = this._pane = (/** @type {?} */ (null));
  1226. if (isAttached) {
  1227. this._detachments.next();
  1228. }
  1229. this._detachments.complete();
  1230. };
  1231. /** Whether the overlay has attached content. */
  1232. /**
  1233. * Whether the overlay has attached content.
  1234. * @return {?}
  1235. */
  1236. OverlayRef.prototype.hasAttached = /**
  1237. * Whether the overlay has attached content.
  1238. * @return {?}
  1239. */
  1240. function () {
  1241. return this._portalOutlet.hasAttached();
  1242. };
  1243. /** Gets an observable that emits when the backdrop has been clicked. */
  1244. /**
  1245. * Gets an observable that emits when the backdrop has been clicked.
  1246. * @return {?}
  1247. */
  1248. OverlayRef.prototype.backdropClick = /**
  1249. * Gets an observable that emits when the backdrop has been clicked.
  1250. * @return {?}
  1251. */
  1252. function () {
  1253. return this._backdropClick.asObservable();
  1254. };
  1255. /** Gets an observable that emits when the overlay has been attached. */
  1256. /**
  1257. * Gets an observable that emits when the overlay has been attached.
  1258. * @return {?}
  1259. */
  1260. OverlayRef.prototype.attachments = /**
  1261. * Gets an observable that emits when the overlay has been attached.
  1262. * @return {?}
  1263. */
  1264. function () {
  1265. return this._attachments.asObservable();
  1266. };
  1267. /** Gets an observable that emits when the overlay has been detached. */
  1268. /**
  1269. * Gets an observable that emits when the overlay has been detached.
  1270. * @return {?}
  1271. */
  1272. OverlayRef.prototype.detachments = /**
  1273. * Gets an observable that emits when the overlay has been detached.
  1274. * @return {?}
  1275. */
  1276. function () {
  1277. return this._detachments.asObservable();
  1278. };
  1279. /** Gets an observable of keydown events targeted to this overlay. */
  1280. /**
  1281. * Gets an observable of keydown events targeted to this overlay.
  1282. * @return {?}
  1283. */
  1284. OverlayRef.prototype.keydownEvents = /**
  1285. * Gets an observable of keydown events targeted to this overlay.
  1286. * @return {?}
  1287. */
  1288. function () {
  1289. return this._keydownEventsObservable;
  1290. };
  1291. /** Gets the current overlay configuration, which is immutable. */
  1292. /**
  1293. * Gets the current overlay configuration, which is immutable.
  1294. * @return {?}
  1295. */
  1296. OverlayRef.prototype.getConfig = /**
  1297. * Gets the current overlay configuration, which is immutable.
  1298. * @return {?}
  1299. */
  1300. function () {
  1301. return this._config;
  1302. };
  1303. /** Updates the position of the overlay based on the position strategy. */
  1304. /**
  1305. * Updates the position of the overlay based on the position strategy.
  1306. * @return {?}
  1307. */
  1308. OverlayRef.prototype.updatePosition = /**
  1309. * Updates the position of the overlay based on the position strategy.
  1310. * @return {?}
  1311. */
  1312. function () {
  1313. if (this._positionStrategy) {
  1314. this._positionStrategy.apply();
  1315. }
  1316. };
  1317. /** Switches to a new position strategy and updates the overlay position. */
  1318. /**
  1319. * Switches to a new position strategy and updates the overlay position.
  1320. * @param {?} strategy
  1321. * @return {?}
  1322. */
  1323. OverlayRef.prototype.updatePositionStrategy = /**
  1324. * Switches to a new position strategy and updates the overlay position.
  1325. * @param {?} strategy
  1326. * @return {?}
  1327. */
  1328. function (strategy) {
  1329. if (strategy === this._positionStrategy) {
  1330. return;
  1331. }
  1332. if (this._positionStrategy) {
  1333. this._positionStrategy.dispose();
  1334. }
  1335. this._positionStrategy = strategy;
  1336. if (this.hasAttached()) {
  1337. strategy.attach(this);
  1338. this.updatePosition();
  1339. }
  1340. };
  1341. /** Update the size properties of the overlay. */
  1342. /**
  1343. * Update the size properties of the overlay.
  1344. * @param {?} sizeConfig
  1345. * @return {?}
  1346. */
  1347. OverlayRef.prototype.updateSize = /**
  1348. * Update the size properties of the overlay.
  1349. * @param {?} sizeConfig
  1350. * @return {?}
  1351. */
  1352. function (sizeConfig) {
  1353. this._config = __assign({}, this._config, sizeConfig);
  1354. this._updateElementSize();
  1355. };
  1356. /** Sets the LTR/RTL direction for the overlay. */
  1357. /**
  1358. * Sets the LTR/RTL direction for the overlay.
  1359. * @param {?} dir
  1360. * @return {?}
  1361. */
  1362. OverlayRef.prototype.setDirection = /**
  1363. * Sets the LTR/RTL direction for the overlay.
  1364. * @param {?} dir
  1365. * @return {?}
  1366. */
  1367. function (dir) {
  1368. this._config = __assign({}, this._config, { direction: dir });
  1369. this._updateElementDirection();
  1370. };
  1371. /** Add a CSS class or an array of classes to the overlay pane. */
  1372. /**
  1373. * Add a CSS class or an array of classes to the overlay pane.
  1374. * @param {?} classes
  1375. * @return {?}
  1376. */
  1377. OverlayRef.prototype.addPanelClass = /**
  1378. * Add a CSS class or an array of classes to the overlay pane.
  1379. * @param {?} classes
  1380. * @return {?}
  1381. */
  1382. function (classes) {
  1383. if (this._pane) {
  1384. this._toggleClasses(this._pane, classes, true);
  1385. }
  1386. };
  1387. /** Remove a CSS class or an array of classes from the overlay pane. */
  1388. /**
  1389. * Remove a CSS class or an array of classes from the overlay pane.
  1390. * @param {?} classes
  1391. * @return {?}
  1392. */
  1393. OverlayRef.prototype.removePanelClass = /**
  1394. * Remove a CSS class or an array of classes from the overlay pane.
  1395. * @param {?} classes
  1396. * @return {?}
  1397. */
  1398. function (classes) {
  1399. if (this._pane) {
  1400. this._toggleClasses(this._pane, classes, false);
  1401. }
  1402. };
  1403. /**
  1404. * Returns the layout direction of the overlay panel.
  1405. */
  1406. /**
  1407. * Returns the layout direction of the overlay panel.
  1408. * @return {?}
  1409. */
  1410. OverlayRef.prototype.getDirection = /**
  1411. * Returns the layout direction of the overlay panel.
  1412. * @return {?}
  1413. */
  1414. function () {
  1415. /** @type {?} */
  1416. var direction = this._config.direction;
  1417. if (!direction) {
  1418. return 'ltr';
  1419. }
  1420. return typeof direction === 'string' ? direction : direction.value;
  1421. };
  1422. /** Switches to a new scroll strategy. */
  1423. /**
  1424. * Switches to a new scroll strategy.
  1425. * @param {?} strategy
  1426. * @return {?}
  1427. */
  1428. OverlayRef.prototype.updateScrollStrategy = /**
  1429. * Switches to a new scroll strategy.
  1430. * @param {?} strategy
  1431. * @return {?}
  1432. */
  1433. function (strategy) {
  1434. if (strategy === this._scrollStrategy) {
  1435. return;
  1436. }
  1437. this._disposeScrollStrategy();
  1438. this._scrollStrategy = strategy;
  1439. if (this.hasAttached()) {
  1440. strategy.attach(this);
  1441. strategy.enable();
  1442. }
  1443. };
  1444. /** Updates the text direction of the overlay panel. */
  1445. /**
  1446. * Updates the text direction of the overlay panel.
  1447. * @private
  1448. * @return {?}
  1449. */
  1450. OverlayRef.prototype._updateElementDirection = /**
  1451. * Updates the text direction of the overlay panel.
  1452. * @private
  1453. * @return {?}
  1454. */
  1455. function () {
  1456. this._host.setAttribute('dir', this.getDirection());
  1457. };
  1458. /** Updates the size of the overlay element based on the overlay config. */
  1459. /**
  1460. * Updates the size of the overlay element based on the overlay config.
  1461. * @private
  1462. * @return {?}
  1463. */
  1464. OverlayRef.prototype._updateElementSize = /**
  1465. * Updates the size of the overlay element based on the overlay config.
  1466. * @private
  1467. * @return {?}
  1468. */
  1469. function () {
  1470. if (!this._pane) {
  1471. return;
  1472. }
  1473. /** @type {?} */
  1474. var style = this._pane.style;
  1475. style.width = coercion.coerceCssPixelValue(this._config.width);
  1476. style.height = coercion.coerceCssPixelValue(this._config.height);
  1477. style.minWidth = coercion.coerceCssPixelValue(this._config.minWidth);
  1478. style.minHeight = coercion.coerceCssPixelValue(this._config.minHeight);
  1479. style.maxWidth = coercion.coerceCssPixelValue(this._config.maxWidth);
  1480. style.maxHeight = coercion.coerceCssPixelValue(this._config.maxHeight);
  1481. };
  1482. /** Toggles the pointer events for the overlay pane element. */
  1483. /**
  1484. * Toggles the pointer events for the overlay pane element.
  1485. * @private
  1486. * @param {?} enablePointer
  1487. * @return {?}
  1488. */
  1489. OverlayRef.prototype._togglePointerEvents = /**
  1490. * Toggles the pointer events for the overlay pane element.
  1491. * @private
  1492. * @param {?} enablePointer
  1493. * @return {?}
  1494. */
  1495. function (enablePointer) {
  1496. this._pane.style.pointerEvents = enablePointer ? 'auto' : 'none';
  1497. };
  1498. /** Attaches a backdrop for this overlay. */
  1499. /**
  1500. * Attaches a backdrop for this overlay.
  1501. * @private
  1502. * @return {?}
  1503. */
  1504. OverlayRef.prototype._attachBackdrop = /**
  1505. * Attaches a backdrop for this overlay.
  1506. * @private
  1507. * @return {?}
  1508. */
  1509. function () {
  1510. var _this = this;
  1511. /** @type {?} */
  1512. var showingClass = 'cdk-overlay-backdrop-showing';
  1513. this._backdropElement = this._document.createElement('div');
  1514. this._backdropElement.classList.add('cdk-overlay-backdrop');
  1515. if (this._config.backdropClass) {
  1516. this._toggleClasses(this._backdropElement, this._config.backdropClass, true);
  1517. }
  1518. // Insert the backdrop before the pane in the DOM order,
  1519. // in order to handle stacked overlays properly.
  1520. (/** @type {?} */ (this._host.parentElement)).insertBefore(this._backdropElement, this._host);
  1521. // Forward backdrop clicks such that the consumer of the overlay can perform whatever
  1522. // action desired when such a click occurs (usually closing the overlay).
  1523. this._backdropElement.addEventListener('click', this._backdropClickHandler);
  1524. // Add class to fade-in the backdrop after one frame.
  1525. if (typeof requestAnimationFrame !== 'undefined') {
  1526. this._ngZone.runOutsideAngular((/**
  1527. * @return {?}
  1528. */
  1529. function () {
  1530. requestAnimationFrame((/**
  1531. * @return {?}
  1532. */
  1533. function () {
  1534. if (_this._backdropElement) {
  1535. _this._backdropElement.classList.add(showingClass);
  1536. }
  1537. }));
  1538. }));
  1539. }
  1540. else {
  1541. this._backdropElement.classList.add(showingClass);
  1542. }
  1543. };
  1544. /**
  1545. * Updates the stacking order of the element, moving it to the top if necessary.
  1546. * This is required in cases where one overlay was detached, while another one,
  1547. * that should be behind it, was destroyed. The next time both of them are opened,
  1548. * the stacking will be wrong, because the detached element's pane will still be
  1549. * in its original DOM position.
  1550. */
  1551. /**
  1552. * Updates the stacking order of the element, moving it to the top if necessary.
  1553. * This is required in cases where one overlay was detached, while another one,
  1554. * that should be behind it, was destroyed. The next time both of them are opened,
  1555. * the stacking will be wrong, because the detached element's pane will still be
  1556. * in its original DOM position.
  1557. * @private
  1558. * @return {?}
  1559. */
  1560. OverlayRef.prototype._updateStackingOrder = /**
  1561. * Updates the stacking order of the element, moving it to the top if necessary.
  1562. * This is required in cases where one overlay was detached, while another one,
  1563. * that should be behind it, was destroyed. The next time both of them are opened,
  1564. * the stacking will be wrong, because the detached element's pane will still be
  1565. * in its original DOM position.
  1566. * @private
  1567. * @return {?}
  1568. */
  1569. function () {
  1570. if (this._host.nextSibling) {
  1571. (/** @type {?} */ (this._host.parentNode)).appendChild(this._host);
  1572. }
  1573. };
  1574. /** Detaches the backdrop (if any) associated with the overlay. */
  1575. /**
  1576. * Detaches the backdrop (if any) associated with the overlay.
  1577. * @return {?}
  1578. */
  1579. OverlayRef.prototype.detachBackdrop = /**
  1580. * Detaches the backdrop (if any) associated with the overlay.
  1581. * @return {?}
  1582. */
  1583. function () {
  1584. var _this = this;
  1585. /** @type {?} */
  1586. var backdropToDetach = this._backdropElement;
  1587. if (!backdropToDetach) {
  1588. return;
  1589. }
  1590. /** @type {?} */
  1591. var timeoutId;
  1592. /** @type {?} */
  1593. var finishDetach = (/**
  1594. * @return {?}
  1595. */
  1596. function () {
  1597. // It may not be attached to anything in certain cases (e.g. unit tests).
  1598. if (backdropToDetach) {
  1599. backdropToDetach.removeEventListener('click', _this._backdropClickHandler);
  1600. backdropToDetach.removeEventListener('transitionend', finishDetach);
  1601. if (backdropToDetach.parentNode) {
  1602. backdropToDetach.parentNode.removeChild(backdropToDetach);
  1603. }
  1604. }
  1605. // It is possible that a new portal has been attached to this overlay since we started
  1606. // removing the backdrop. If that is the case, only clear the backdrop reference if it
  1607. // is still the same instance that we started to remove.
  1608. if (_this._backdropElement == backdropToDetach) {
  1609. _this._backdropElement = null;
  1610. }
  1611. if (_this._config.backdropClass) {
  1612. _this._toggleClasses((/** @type {?} */ (backdropToDetach)), _this._config.backdropClass, false);
  1613. }
  1614. clearTimeout(timeoutId);
  1615. });
  1616. backdropToDetach.classList.remove('cdk-overlay-backdrop-showing');
  1617. this._ngZone.runOutsideAngular((/**
  1618. * @return {?}
  1619. */
  1620. function () {
  1621. (/** @type {?} */ (backdropToDetach)).addEventListener('transitionend', finishDetach);
  1622. }));
  1623. // If the backdrop doesn't have a transition, the `transitionend` event won't fire.
  1624. // In this case we make it unclickable and we try to remove it after a delay.
  1625. backdropToDetach.style.pointerEvents = 'none';
  1626. // Run this outside the Angular zone because there's nothing that Angular cares about.
  1627. // If it were to run inside the Angular zone, every test that used Overlay would have to be
  1628. // either async or fakeAsync.
  1629. timeoutId = this._ngZone.runOutsideAngular((/**
  1630. * @return {?}
  1631. */
  1632. function () { return setTimeout(finishDetach, 500); }));
  1633. };
  1634. /** Toggles a single CSS class or an array of classes on an element. */
  1635. /**
  1636. * Toggles a single CSS class or an array of classes on an element.
  1637. * @private
  1638. * @param {?} element
  1639. * @param {?} cssClasses
  1640. * @param {?} isAdd
  1641. * @return {?}
  1642. */
  1643. OverlayRef.prototype._toggleClasses = /**
  1644. * Toggles a single CSS class or an array of classes on an element.
  1645. * @private
  1646. * @param {?} element
  1647. * @param {?} cssClasses
  1648. * @param {?} isAdd
  1649. * @return {?}
  1650. */
  1651. function (element, cssClasses, isAdd) {
  1652. /** @type {?} */
  1653. var classList = element.classList;
  1654. coercion.coerceArray(cssClasses).forEach((/**
  1655. * @param {?} cssClass
  1656. * @return {?}
  1657. */
  1658. function (cssClass) {
  1659. // We can't do a spread here, because IE doesn't support setting multiple classes.
  1660. // Also trying to add an empty string to a DOMTokenList will throw.
  1661. if (cssClass) {
  1662. isAdd ? classList.add(cssClass) : classList.remove(cssClass);
  1663. }
  1664. }));
  1665. };
  1666. /** Detaches the overlay content next time the zone stabilizes. */
  1667. /**
  1668. * Detaches the overlay content next time the zone stabilizes.
  1669. * @private
  1670. * @return {?}
  1671. */
  1672. OverlayRef.prototype._detachContentWhenStable = /**
  1673. * Detaches the overlay content next time the zone stabilizes.
  1674. * @private
  1675. * @return {?}
  1676. */
  1677. function () {
  1678. var _this = this;
  1679. // Normally we wouldn't have to explicitly run this outside the `NgZone`, however
  1680. // if the consumer is using `zone-patch-rxjs`, the `Subscription.unsubscribe` call will
  1681. // be patched to run inside the zone, which will throw us into an infinite loop.
  1682. this._ngZone.runOutsideAngular((/**
  1683. * @return {?}
  1684. */
  1685. function () {
  1686. // We can't remove the host here immediately, because the overlay pane's content
  1687. // might still be animating. This stream helps us avoid interrupting the animation
  1688. // by waiting for the pane to become empty.
  1689. /** @type {?} */
  1690. var subscription = _this._ngZone.onStable
  1691. .asObservable()
  1692. .pipe(operators.takeUntil(rxjs.merge(_this._attachments, _this._detachments)))
  1693. .subscribe((/**
  1694. * @return {?}
  1695. */
  1696. function () {
  1697. // Needs a couple of checks for the pane and host, because
  1698. // they may have been removed by the time the zone stabilizes.
  1699. if (!_this._pane || !_this._host || _this._pane.children.length === 0) {
  1700. if (_this._pane && _this._config.panelClass) {
  1701. _this._toggleClasses(_this._pane, _this._config.panelClass, false);
  1702. }
  1703. if (_this._host && _this._host.parentElement) {
  1704. _this._previousHostParent = _this._host.parentElement;
  1705. _this._previousHostParent.removeChild(_this._host);
  1706. }
  1707. subscription.unsubscribe();
  1708. }
  1709. }));
  1710. }));
  1711. };
  1712. /** Disposes of a scroll strategy. */
  1713. /**
  1714. * Disposes of a scroll strategy.
  1715. * @private
  1716. * @return {?}
  1717. */
  1718. OverlayRef.prototype._disposeScrollStrategy = /**
  1719. * Disposes of a scroll strategy.
  1720. * @private
  1721. * @return {?}
  1722. */
  1723. function () {
  1724. /** @type {?} */
  1725. var scrollStrategy = this._scrollStrategy;
  1726. if (scrollStrategy) {
  1727. scrollStrategy.disable();
  1728. if (scrollStrategy.detach) {
  1729. scrollStrategy.detach();
  1730. }
  1731. }
  1732. };
  1733. return OverlayRef;
  1734. }());
  1735. /**
  1736. * @fileoverview added by tsickle
  1737. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  1738. */
  1739. // TODO: refactor clipping detection into a separate thing (part of scrolling module)
  1740. // TODO: doesn't handle both flexible width and height when it has to scroll along both axis.
  1741. /**
  1742. * Class to be added to the overlay bounding box.
  1743. * @type {?}
  1744. */
  1745. var boundingBoxClass = 'cdk-overlay-connected-position-bounding-box';
  1746. /**
  1747. * A strategy for positioning overlays. Using this strategy, an overlay is given an
  1748. * implicit position relative some origin element. The relative position is defined in terms of
  1749. * a point on the origin element that is connected to a point on the overlay element. For example,
  1750. * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner
  1751. * of the overlay.
  1752. */
  1753. var /**
  1754. * A strategy for positioning overlays. Using this strategy, an overlay is given an
  1755. * implicit position relative some origin element. The relative position is defined in terms of
  1756. * a point on the origin element that is connected to a point on the overlay element. For example,
  1757. * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner
  1758. * of the overlay.
  1759. */
  1760. FlexibleConnectedPositionStrategy = /** @class */ (function () {
  1761. function FlexibleConnectedPositionStrategy(connectedTo, _viewportRuler, _document, _platform, _overlayContainer) {
  1762. this._viewportRuler = _viewportRuler;
  1763. this._document = _document;
  1764. this._platform = _platform;
  1765. this._overlayContainer = _overlayContainer;
  1766. /**
  1767. * Last size used for the bounding box. Used to avoid resizing the overlay after open.
  1768. */
  1769. this._lastBoundingBoxSize = { width: 0, height: 0 };
  1770. /**
  1771. * Whether the overlay was pushed in a previous positioning.
  1772. */
  1773. this._isPushed = false;
  1774. /**
  1775. * Whether the overlay can be pushed on-screen on the initial open.
  1776. */
  1777. this._canPush = true;
  1778. /**
  1779. * Whether the overlay can grow via flexible width/height after the initial open.
  1780. */
  1781. this._growAfterOpen = false;
  1782. /**
  1783. * Whether the overlay's width and height can be constrained to fit within the viewport.
  1784. */
  1785. this._hasFlexibleDimensions = true;
  1786. /**
  1787. * Whether the overlay position is locked.
  1788. */
  1789. this._positionLocked = false;
  1790. /**
  1791. * Amount of space that must be maintained between the overlay and the edge of the viewport.
  1792. */
  1793. this._viewportMargin = 0;
  1794. /**
  1795. * The Scrollable containers used to check scrollable view properties on position change.
  1796. */
  1797. this._scrollables = [];
  1798. /**
  1799. * Ordered list of preferred positions, from most to least desirable.
  1800. */
  1801. this._preferredPositions = [];
  1802. /**
  1803. * Subject that emits whenever the position changes.
  1804. */
  1805. this._positionChanges = new rxjs.Subject();
  1806. /**
  1807. * Subscription to viewport size changes.
  1808. */
  1809. this._resizeSubscription = rxjs.Subscription.EMPTY;
  1810. /**
  1811. * Default offset for the overlay along the x axis.
  1812. */
  1813. this._offsetX = 0;
  1814. /**
  1815. * Default offset for the overlay along the y axis.
  1816. */
  1817. this._offsetY = 0;
  1818. /**
  1819. * Keeps track of the CSS classes that the position strategy has applied on the overlay panel.
  1820. */
  1821. this._appliedPanelClasses = [];
  1822. /**
  1823. * Observable sequence of position changes.
  1824. */
  1825. this.positionChanges = this._positionChanges.asObservable();
  1826. this.setOrigin(connectedTo);
  1827. }
  1828. Object.defineProperty(FlexibleConnectedPositionStrategy.prototype, "positions", {
  1829. /** Ordered list of preferred positions, from most to least desirable. */
  1830. get: /**
  1831. * Ordered list of preferred positions, from most to least desirable.
  1832. * @return {?}
  1833. */
  1834. function () {
  1835. return this._preferredPositions;
  1836. },
  1837. enumerable: true,
  1838. configurable: true
  1839. });
  1840. /** Attaches this position strategy to an overlay. */
  1841. /**
  1842. * Attaches this position strategy to an overlay.
  1843. * @param {?} overlayRef
  1844. * @return {?}
  1845. */
  1846. FlexibleConnectedPositionStrategy.prototype.attach = /**
  1847. * Attaches this position strategy to an overlay.
  1848. * @param {?} overlayRef
  1849. * @return {?}
  1850. */
  1851. function (overlayRef) {
  1852. var _this = this;
  1853. if (this._overlayRef && overlayRef !== this._overlayRef) {
  1854. throw Error('This position strategy is already attached to an overlay');
  1855. }
  1856. this._validatePositions();
  1857. overlayRef.hostElement.classList.add(boundingBoxClass);
  1858. this._overlayRef = overlayRef;
  1859. this._boundingBox = overlayRef.hostElement;
  1860. this._pane = overlayRef.overlayElement;
  1861. this._isDisposed = false;
  1862. this._isInitialRender = true;
  1863. this._lastPosition = null;
  1864. this._resizeSubscription.unsubscribe();
  1865. this._resizeSubscription = this._viewportRuler.change().subscribe((/**
  1866. * @return {?}
  1867. */
  1868. function () {
  1869. // When the window is resized, we want to trigger the next reposition as if it
  1870. // was an initial render, in order for the strategy to pick a new optimal position,
  1871. // otherwise position locking will cause it to stay at the old one.
  1872. _this._isInitialRender = true;
  1873. _this.apply();
  1874. }));
  1875. };
  1876. /**
  1877. * Updates the position of the overlay element, using whichever preferred position relative
  1878. * to the origin best fits on-screen.
  1879. *
  1880. * The selection of a position goes as follows:
  1881. * - If any positions fit completely within the viewport as-is,
  1882. * choose the first position that does so.
  1883. * - If flexible dimensions are enabled and at least one satifies the given minimum width/height,
  1884. * choose the position with the greatest available size modified by the positions' weight.
  1885. * - If pushing is enabled, take the position that went off-screen the least and push it
  1886. * on-screen.
  1887. * - If none of the previous criteria were met, use the position that goes off-screen the least.
  1888. * @docs-private
  1889. */
  1890. /**
  1891. * Updates the position of the overlay element, using whichever preferred position relative
  1892. * to the origin best fits on-screen.
  1893. *
  1894. * The selection of a position goes as follows:
  1895. * - If any positions fit completely within the viewport as-is,
  1896. * choose the first position that does so.
  1897. * - If flexible dimensions are enabled and at least one satifies the given minimum width/height,
  1898. * choose the position with the greatest available size modified by the positions' weight.
  1899. * - If pushing is enabled, take the position that went off-screen the least and push it
  1900. * on-screen.
  1901. * - If none of the previous criteria were met, use the position that goes off-screen the least.
  1902. * \@docs-private
  1903. * @return {?}
  1904. */
  1905. FlexibleConnectedPositionStrategy.prototype.apply = /**
  1906. * Updates the position of the overlay element, using whichever preferred position relative
  1907. * to the origin best fits on-screen.
  1908. *
  1909. * The selection of a position goes as follows:
  1910. * - If any positions fit completely within the viewport as-is,
  1911. * choose the first position that does so.
  1912. * - If flexible dimensions are enabled and at least one satifies the given minimum width/height,
  1913. * choose the position with the greatest available size modified by the positions' weight.
  1914. * - If pushing is enabled, take the position that went off-screen the least and push it
  1915. * on-screen.
  1916. * - If none of the previous criteria were met, use the position that goes off-screen the least.
  1917. * \@docs-private
  1918. * @return {?}
  1919. */
  1920. function () {
  1921. // We shouldn't do anything if the strategy was disposed or we're on the server.
  1922. if (this._isDisposed || !this._platform.isBrowser) {
  1923. return;
  1924. }
  1925. // If the position has been applied already (e.g. when the overlay was opened) and the
  1926. // consumer opted into locking in the position, re-use the old position, in order to
  1927. // prevent the overlay from jumping around.
  1928. if (!this._isInitialRender && this._positionLocked && this._lastPosition) {
  1929. this.reapplyLastPosition();
  1930. return;
  1931. }
  1932. this._clearPanelClasses();
  1933. this._resetOverlayElementStyles();
  1934. this._resetBoundingBoxStyles();
  1935. // We need the bounding rects for the origin and the overlay to determine how to position
  1936. // the overlay relative to the origin.
  1937. // We use the viewport rect to determine whether a position would go off-screen.
  1938. this._viewportRect = this._getNarrowedViewportRect();
  1939. this._originRect = this._getOriginRect();
  1940. this._overlayRect = this._pane.getBoundingClientRect();
  1941. /** @type {?} */
  1942. var originRect = this._originRect;
  1943. /** @type {?} */
  1944. var overlayRect = this._overlayRect;
  1945. /** @type {?} */
  1946. var viewportRect = this._viewportRect;
  1947. // Positions where the overlay will fit with flexible dimensions.
  1948. /** @type {?} */
  1949. var flexibleFits = [];
  1950. // Fallback if none of the preferred positions fit within the viewport.
  1951. /** @type {?} */
  1952. var fallback;
  1953. // Go through each of the preferred positions looking for a good fit.
  1954. // If a good fit is found, it will be applied immediately.
  1955. for (var _i = 0, _a = this._preferredPositions; _i < _a.length; _i++) {
  1956. var pos = _a[_i];
  1957. // Get the exact (x, y) coordinate for the point-of-origin on the origin element.
  1958. /** @type {?} */
  1959. var originPoint = this._getOriginPoint(originRect, pos);
  1960. // From that point-of-origin, get the exact (x, y) coordinate for the top-left corner of the
  1961. // overlay in this position. We use the top-left corner for calculations and later translate
  1962. // this into an appropriate (top, left, bottom, right) style.
  1963. /** @type {?} */
  1964. var overlayPoint = this._getOverlayPoint(originPoint, overlayRect, pos);
  1965. // Calculate how well the overlay would fit into the viewport with this point.
  1966. /** @type {?} */
  1967. var overlayFit = this._getOverlayFit(overlayPoint, overlayRect, viewportRect, pos);
  1968. // If the overlay, without any further work, fits into the viewport, use this position.
  1969. if (overlayFit.isCompletelyWithinViewport) {
  1970. this._isPushed = false;
  1971. this._applyPosition(pos, originPoint);
  1972. return;
  1973. }
  1974. // If the overlay has flexible dimensions, we can use this position
  1975. // so long as there's enough space for the minimum dimensions.
  1976. if (this._canFitWithFlexibleDimensions(overlayFit, overlayPoint, viewportRect)) {
  1977. // Save positions where the overlay will fit with flexible dimensions. We will use these
  1978. // if none of the positions fit *without* flexible dimensions.
  1979. flexibleFits.push({
  1980. position: pos,
  1981. origin: originPoint,
  1982. overlayRect: overlayRect,
  1983. boundingBoxRect: this._calculateBoundingBoxRect(originPoint, pos)
  1984. });
  1985. continue;
  1986. }
  1987. // If the current preferred position does not fit on the screen, remember the position
  1988. // if it has more visible area on-screen than we've seen and move onto the next preferred
  1989. // position.
  1990. if (!fallback || fallback.overlayFit.visibleArea < overlayFit.visibleArea) {
  1991. fallback = { overlayFit: overlayFit, overlayPoint: overlayPoint, originPoint: originPoint, position: pos, overlayRect: overlayRect };
  1992. }
  1993. }
  1994. // If there are any positions where the overlay would fit with flexible dimensions, choose the
  1995. // one that has the greatest area available modified by the position's weight
  1996. if (flexibleFits.length) {
  1997. /** @type {?} */
  1998. var bestFit = null;
  1999. /** @type {?} */
  2000. var bestScore = -1;
  2001. for (var _b = 0, flexibleFits_1 = flexibleFits; _b < flexibleFits_1.length; _b++) {
  2002. var fit = flexibleFits_1[_b];
  2003. /** @type {?} */
  2004. var score = fit.boundingBoxRect.width * fit.boundingBoxRect.height * (fit.position.weight || 1);
  2005. if (score > bestScore) {
  2006. bestScore = score;
  2007. bestFit = fit;
  2008. }
  2009. }
  2010. this._isPushed = false;
  2011. this._applyPosition((/** @type {?} */ (bestFit)).position, (/** @type {?} */ (bestFit)).origin);
  2012. return;
  2013. }
  2014. // When none of the preferred positions fit within the viewport, take the position
  2015. // that went off-screen the least and attempt to push it on-screen.
  2016. if (this._canPush) {
  2017. // TODO(jelbourn): after pushing, the opening "direction" of the overlay might not make sense.
  2018. this._isPushed = true;
  2019. this._applyPosition((/** @type {?} */ (fallback)).position, (/** @type {?} */ (fallback)).originPoint);
  2020. return;
  2021. }
  2022. // All options for getting the overlay within the viewport have been exhausted, so go with the
  2023. // position that went off-screen the least.
  2024. this._applyPosition((/** @type {?} */ (fallback)).position, (/** @type {?} */ (fallback)).originPoint);
  2025. };
  2026. /**
  2027. * @return {?}
  2028. */
  2029. FlexibleConnectedPositionStrategy.prototype.detach = /**
  2030. * @return {?}
  2031. */
  2032. function () {
  2033. this._clearPanelClasses();
  2034. this._lastPosition = null;
  2035. this._previousPushAmount = null;
  2036. this._resizeSubscription.unsubscribe();
  2037. };
  2038. /** Cleanup after the element gets destroyed. */
  2039. /**
  2040. * Cleanup after the element gets destroyed.
  2041. * @return {?}
  2042. */
  2043. FlexibleConnectedPositionStrategy.prototype.dispose = /**
  2044. * Cleanup after the element gets destroyed.
  2045. * @return {?}
  2046. */
  2047. function () {
  2048. if (this._isDisposed) {
  2049. return;
  2050. }
  2051. // We can't use `_resetBoundingBoxStyles` here, because it resets
  2052. // some properties to zero, rather than removing them.
  2053. if (this._boundingBox) {
  2054. extendStyles(this._boundingBox.style, (/** @type {?} */ ({
  2055. top: '',
  2056. left: '',
  2057. right: '',
  2058. bottom: '',
  2059. height: '',
  2060. width: '',
  2061. alignItems: '',
  2062. justifyContent: '',
  2063. })));
  2064. }
  2065. if (this._pane) {
  2066. this._resetOverlayElementStyles();
  2067. }
  2068. if (this._overlayRef) {
  2069. this._overlayRef.hostElement.classList.remove(boundingBoxClass);
  2070. }
  2071. this.detach();
  2072. this._positionChanges.complete();
  2073. this._overlayRef = this._boundingBox = (/** @type {?} */ (null));
  2074. this._isDisposed = true;
  2075. };
  2076. /**
  2077. * This re-aligns the overlay element with the trigger in its last calculated position,
  2078. * even if a position higher in the "preferred positions" list would now fit. This
  2079. * allows one to re-align the panel without changing the orientation of the panel.
  2080. */
  2081. /**
  2082. * This re-aligns the overlay element with the trigger in its last calculated position,
  2083. * even if a position higher in the "preferred positions" list would now fit. This
  2084. * allows one to re-align the panel without changing the orientation of the panel.
  2085. * @return {?}
  2086. */
  2087. FlexibleConnectedPositionStrategy.prototype.reapplyLastPosition = /**
  2088. * This re-aligns the overlay element with the trigger in its last calculated position,
  2089. * even if a position higher in the "preferred positions" list would now fit. This
  2090. * allows one to re-align the panel without changing the orientation of the panel.
  2091. * @return {?}
  2092. */
  2093. function () {
  2094. if (!this._isDisposed && (!this._platform || this._platform.isBrowser)) {
  2095. this._originRect = this._getOriginRect();
  2096. this._overlayRect = this._pane.getBoundingClientRect();
  2097. this._viewportRect = this._getNarrowedViewportRect();
  2098. /** @type {?} */
  2099. var lastPosition = this._lastPosition || this._preferredPositions[0];
  2100. /** @type {?} */
  2101. var originPoint = this._getOriginPoint(this._originRect, lastPosition);
  2102. this._applyPosition(lastPosition, originPoint);
  2103. }
  2104. };
  2105. /**
  2106. * Sets the list of Scrollable containers that host the origin element so that
  2107. * on reposition we can evaluate if it or the overlay has been clipped or outside view. Every
  2108. * Scrollable must be an ancestor element of the strategy's origin element.
  2109. */
  2110. /**
  2111. * Sets the list of Scrollable containers that host the origin element so that
  2112. * on reposition we can evaluate if it or the overlay has been clipped or outside view. Every
  2113. * Scrollable must be an ancestor element of the strategy's origin element.
  2114. * @template THIS
  2115. * @this {THIS}
  2116. * @param {?} scrollables
  2117. * @return {THIS}
  2118. */
  2119. FlexibleConnectedPositionStrategy.prototype.withScrollableContainers = /**
  2120. * Sets the list of Scrollable containers that host the origin element so that
  2121. * on reposition we can evaluate if it or the overlay has been clipped or outside view. Every
  2122. * Scrollable must be an ancestor element of the strategy's origin element.
  2123. * @template THIS
  2124. * @this {THIS}
  2125. * @param {?} scrollables
  2126. * @return {THIS}
  2127. */
  2128. function (scrollables) {
  2129. (/** @type {?} */ (this))._scrollables = scrollables;
  2130. return (/** @type {?} */ (this));
  2131. };
  2132. /**
  2133. * Adds new preferred positions.
  2134. * @param positions List of positions options for this overlay.
  2135. */
  2136. /**
  2137. * Adds new preferred positions.
  2138. * @template THIS
  2139. * @this {THIS}
  2140. * @param {?} positions List of positions options for this overlay.
  2141. * @return {THIS}
  2142. */
  2143. FlexibleConnectedPositionStrategy.prototype.withPositions = /**
  2144. * Adds new preferred positions.
  2145. * @template THIS
  2146. * @this {THIS}
  2147. * @param {?} positions List of positions options for this overlay.
  2148. * @return {THIS}
  2149. */
  2150. function (positions) {
  2151. (/** @type {?} */ (this))._preferredPositions = positions;
  2152. // If the last calculated position object isn't part of the positions anymore, clear
  2153. // it in order to avoid it being picked up if the consumer tries to re-apply.
  2154. if (positions.indexOf((/** @type {?} */ ((/** @type {?} */ (this))._lastPosition))) === -1) {
  2155. (/** @type {?} */ (this))._lastPosition = null;
  2156. }
  2157. (/** @type {?} */ (this))._validatePositions();
  2158. return (/** @type {?} */ (this));
  2159. };
  2160. /**
  2161. * Sets a minimum distance the overlay may be positioned to the edge of the viewport.
  2162. * @param margin Required margin between the overlay and the viewport edge in pixels.
  2163. */
  2164. /**
  2165. * Sets a minimum distance the overlay may be positioned to the edge of the viewport.
  2166. * @template THIS
  2167. * @this {THIS}
  2168. * @param {?} margin Required margin between the overlay and the viewport edge in pixels.
  2169. * @return {THIS}
  2170. */
  2171. FlexibleConnectedPositionStrategy.prototype.withViewportMargin = /**
  2172. * Sets a minimum distance the overlay may be positioned to the edge of the viewport.
  2173. * @template THIS
  2174. * @this {THIS}
  2175. * @param {?} margin Required margin between the overlay and the viewport edge in pixels.
  2176. * @return {THIS}
  2177. */
  2178. function (margin) {
  2179. (/** @type {?} */ (this))._viewportMargin = margin;
  2180. return (/** @type {?} */ (this));
  2181. };
  2182. /** Sets whether the overlay's width and height can be constrained to fit within the viewport. */
  2183. /**
  2184. * Sets whether the overlay's width and height can be constrained to fit within the viewport.
  2185. * @template THIS
  2186. * @this {THIS}
  2187. * @param {?=} flexibleDimensions
  2188. * @return {THIS}
  2189. */
  2190. FlexibleConnectedPositionStrategy.prototype.withFlexibleDimensions = /**
  2191. * Sets whether the overlay's width and height can be constrained to fit within the viewport.
  2192. * @template THIS
  2193. * @this {THIS}
  2194. * @param {?=} flexibleDimensions
  2195. * @return {THIS}
  2196. */
  2197. function (flexibleDimensions) {
  2198. if (flexibleDimensions === void 0) { flexibleDimensions = true; }
  2199. (/** @type {?} */ (this))._hasFlexibleDimensions = flexibleDimensions;
  2200. return (/** @type {?} */ (this));
  2201. };
  2202. /** Sets whether the overlay can grow after the initial open via flexible width/height. */
  2203. /**
  2204. * Sets whether the overlay can grow after the initial open via flexible width/height.
  2205. * @template THIS
  2206. * @this {THIS}
  2207. * @param {?=} growAfterOpen
  2208. * @return {THIS}
  2209. */
  2210. FlexibleConnectedPositionStrategy.prototype.withGrowAfterOpen = /**
  2211. * Sets whether the overlay can grow after the initial open via flexible width/height.
  2212. * @template THIS
  2213. * @this {THIS}
  2214. * @param {?=} growAfterOpen
  2215. * @return {THIS}
  2216. */
  2217. function (growAfterOpen) {
  2218. if (growAfterOpen === void 0) { growAfterOpen = true; }
  2219. (/** @type {?} */ (this))._growAfterOpen = growAfterOpen;
  2220. return (/** @type {?} */ (this));
  2221. };
  2222. /** Sets whether the overlay can be pushed on-screen if none of the provided positions fit. */
  2223. /**
  2224. * Sets whether the overlay can be pushed on-screen if none of the provided positions fit.
  2225. * @template THIS
  2226. * @this {THIS}
  2227. * @param {?=} canPush
  2228. * @return {THIS}
  2229. */
  2230. FlexibleConnectedPositionStrategy.prototype.withPush = /**
  2231. * Sets whether the overlay can be pushed on-screen if none of the provided positions fit.
  2232. * @template THIS
  2233. * @this {THIS}
  2234. * @param {?=} canPush
  2235. * @return {THIS}
  2236. */
  2237. function (canPush) {
  2238. if (canPush === void 0) { canPush = true; }
  2239. (/** @type {?} */ (this))._canPush = canPush;
  2240. return (/** @type {?} */ (this));
  2241. };
  2242. /**
  2243. * Sets whether the overlay's position should be locked in after it is positioned
  2244. * initially. When an overlay is locked in, it won't attempt to reposition itself
  2245. * when the position is re-applied (e.g. when the user scrolls away).
  2246. * @param isLocked Whether the overlay should locked in.
  2247. */
  2248. /**
  2249. * Sets whether the overlay's position should be locked in after it is positioned
  2250. * initially. When an overlay is locked in, it won't attempt to reposition itself
  2251. * when the position is re-applied (e.g. when the user scrolls away).
  2252. * @template THIS
  2253. * @this {THIS}
  2254. * @param {?=} isLocked Whether the overlay should locked in.
  2255. * @return {THIS}
  2256. */
  2257. FlexibleConnectedPositionStrategy.prototype.withLockedPosition = /**
  2258. * Sets whether the overlay's position should be locked in after it is positioned
  2259. * initially. When an overlay is locked in, it won't attempt to reposition itself
  2260. * when the position is re-applied (e.g. when the user scrolls away).
  2261. * @template THIS
  2262. * @this {THIS}
  2263. * @param {?=} isLocked Whether the overlay should locked in.
  2264. * @return {THIS}
  2265. */
  2266. function (isLocked) {
  2267. if (isLocked === void 0) { isLocked = true; }
  2268. (/** @type {?} */ (this))._positionLocked = isLocked;
  2269. return (/** @type {?} */ (this));
  2270. };
  2271. /**
  2272. * Sets the origin, relative to which to position the overlay.
  2273. * Using an element origin is useful for building components that need to be positioned
  2274. * relatively to a trigger (e.g. dropdown menus or tooltips), whereas using a point can be
  2275. * used for cases like contextual menus which open relative to the user's pointer.
  2276. * @param origin Reference to the new origin.
  2277. */
  2278. /**
  2279. * Sets the origin, relative to which to position the overlay.
  2280. * Using an element origin is useful for building components that need to be positioned
  2281. * relatively to a trigger (e.g. dropdown menus or tooltips), whereas using a point can be
  2282. * used for cases like contextual menus which open relative to the user's pointer.
  2283. * @template THIS
  2284. * @this {THIS}
  2285. * @param {?} origin Reference to the new origin.
  2286. * @return {THIS}
  2287. */
  2288. FlexibleConnectedPositionStrategy.prototype.setOrigin = /**
  2289. * Sets the origin, relative to which to position the overlay.
  2290. * Using an element origin is useful for building components that need to be positioned
  2291. * relatively to a trigger (e.g. dropdown menus or tooltips), whereas using a point can be
  2292. * used for cases like contextual menus which open relative to the user's pointer.
  2293. * @template THIS
  2294. * @this {THIS}
  2295. * @param {?} origin Reference to the new origin.
  2296. * @return {THIS}
  2297. */
  2298. function (origin) {
  2299. (/** @type {?} */ (this))._origin = origin;
  2300. return (/** @type {?} */ (this));
  2301. };
  2302. /**
  2303. * Sets the default offset for the overlay's connection point on the x-axis.
  2304. * @param offset New offset in the X axis.
  2305. */
  2306. /**
  2307. * Sets the default offset for the overlay's connection point on the x-axis.
  2308. * @template THIS
  2309. * @this {THIS}
  2310. * @param {?} offset New offset in the X axis.
  2311. * @return {THIS}
  2312. */
  2313. FlexibleConnectedPositionStrategy.prototype.withDefaultOffsetX = /**
  2314. * Sets the default offset for the overlay's connection point on the x-axis.
  2315. * @template THIS
  2316. * @this {THIS}
  2317. * @param {?} offset New offset in the X axis.
  2318. * @return {THIS}
  2319. */
  2320. function (offset) {
  2321. (/** @type {?} */ (this))._offsetX = offset;
  2322. return (/** @type {?} */ (this));
  2323. };
  2324. /**
  2325. * Sets the default offset for the overlay's connection point on the y-axis.
  2326. * @param offset New offset in the Y axis.
  2327. */
  2328. /**
  2329. * Sets the default offset for the overlay's connection point on the y-axis.
  2330. * @template THIS
  2331. * @this {THIS}
  2332. * @param {?} offset New offset in the Y axis.
  2333. * @return {THIS}
  2334. */
  2335. FlexibleConnectedPositionStrategy.prototype.withDefaultOffsetY = /**
  2336. * Sets the default offset for the overlay's connection point on the y-axis.
  2337. * @template THIS
  2338. * @this {THIS}
  2339. * @param {?} offset New offset in the Y axis.
  2340. * @return {THIS}
  2341. */
  2342. function (offset) {
  2343. (/** @type {?} */ (this))._offsetY = offset;
  2344. return (/** @type {?} */ (this));
  2345. };
  2346. /**
  2347. * Configures that the position strategy should set a `transform-origin` on some elements
  2348. * inside the overlay, depending on the current position that is being applied. This is
  2349. * useful for the cases where the origin of an animation can change depending on the
  2350. * alignment of the overlay.
  2351. * @param selector CSS selector that will be used to find the target
  2352. * elements onto which to set the transform origin.
  2353. */
  2354. /**
  2355. * Configures that the position strategy should set a `transform-origin` on some elements
  2356. * inside the overlay, depending on the current position that is being applied. This is
  2357. * useful for the cases where the origin of an animation can change depending on the
  2358. * alignment of the overlay.
  2359. * @template THIS
  2360. * @this {THIS}
  2361. * @param {?} selector CSS selector that will be used to find the target
  2362. * elements onto which to set the transform origin.
  2363. * @return {THIS}
  2364. */
  2365. FlexibleConnectedPositionStrategy.prototype.withTransformOriginOn = /**
  2366. * Configures that the position strategy should set a `transform-origin` on some elements
  2367. * inside the overlay, depending on the current position that is being applied. This is
  2368. * useful for the cases where the origin of an animation can change depending on the
  2369. * alignment of the overlay.
  2370. * @template THIS
  2371. * @this {THIS}
  2372. * @param {?} selector CSS selector that will be used to find the target
  2373. * elements onto which to set the transform origin.
  2374. * @return {THIS}
  2375. */
  2376. function (selector) {
  2377. (/** @type {?} */ (this))._transformOriginSelector = selector;
  2378. return (/** @type {?} */ (this));
  2379. };
  2380. /**
  2381. * Gets the (x, y) coordinate of a connection point on the origin based on a relative position.
  2382. */
  2383. /**
  2384. * Gets the (x, y) coordinate of a connection point on the origin based on a relative position.
  2385. * @private
  2386. * @param {?} originRect
  2387. * @param {?} pos
  2388. * @return {?}
  2389. */
  2390. FlexibleConnectedPositionStrategy.prototype._getOriginPoint = /**
  2391. * Gets the (x, y) coordinate of a connection point on the origin based on a relative position.
  2392. * @private
  2393. * @param {?} originRect
  2394. * @param {?} pos
  2395. * @return {?}
  2396. */
  2397. function (originRect, pos) {
  2398. /** @type {?} */
  2399. var x;
  2400. if (pos.originX == 'center') {
  2401. // Note: when centering we should always use the `left`
  2402. // offset, otherwise the position will be wrong in RTL.
  2403. x = originRect.left + (originRect.width / 2);
  2404. }
  2405. else {
  2406. /** @type {?} */
  2407. var startX = this._isRtl() ? originRect.right : originRect.left;
  2408. /** @type {?} */
  2409. var endX = this._isRtl() ? originRect.left : originRect.right;
  2410. x = pos.originX == 'start' ? startX : endX;
  2411. }
  2412. /** @type {?} */
  2413. var y;
  2414. if (pos.originY == 'center') {
  2415. y = originRect.top + (originRect.height / 2);
  2416. }
  2417. else {
  2418. y = pos.originY == 'top' ? originRect.top : originRect.bottom;
  2419. }
  2420. return { x: x, y: y };
  2421. };
  2422. /**
  2423. * Gets the (x, y) coordinate of the top-left corner of the overlay given a given position and
  2424. * origin point to which the overlay should be connected.
  2425. */
  2426. /**
  2427. * Gets the (x, y) coordinate of the top-left corner of the overlay given a given position and
  2428. * origin point to which the overlay should be connected.
  2429. * @private
  2430. * @param {?} originPoint
  2431. * @param {?} overlayRect
  2432. * @param {?} pos
  2433. * @return {?}
  2434. */
  2435. FlexibleConnectedPositionStrategy.prototype._getOverlayPoint = /**
  2436. * Gets the (x, y) coordinate of the top-left corner of the overlay given a given position and
  2437. * origin point to which the overlay should be connected.
  2438. * @private
  2439. * @param {?} originPoint
  2440. * @param {?} overlayRect
  2441. * @param {?} pos
  2442. * @return {?}
  2443. */
  2444. function (originPoint, overlayRect, pos) {
  2445. // Calculate the (overlayStartX, overlayStartY), the start of the
  2446. // potential overlay position relative to the origin point.
  2447. /** @type {?} */
  2448. var overlayStartX;
  2449. if (pos.overlayX == 'center') {
  2450. overlayStartX = -overlayRect.width / 2;
  2451. }
  2452. else if (pos.overlayX === 'start') {
  2453. overlayStartX = this._isRtl() ? -overlayRect.width : 0;
  2454. }
  2455. else {
  2456. overlayStartX = this._isRtl() ? 0 : -overlayRect.width;
  2457. }
  2458. /** @type {?} */
  2459. var overlayStartY;
  2460. if (pos.overlayY == 'center') {
  2461. overlayStartY = -overlayRect.height / 2;
  2462. }
  2463. else {
  2464. overlayStartY = pos.overlayY == 'top' ? 0 : -overlayRect.height;
  2465. }
  2466. // The (x, y) coordinates of the overlay.
  2467. return {
  2468. x: originPoint.x + overlayStartX,
  2469. y: originPoint.y + overlayStartY,
  2470. };
  2471. };
  2472. /** Gets how well an overlay at the given point will fit within the viewport. */
  2473. /**
  2474. * Gets how well an overlay at the given point will fit within the viewport.
  2475. * @private
  2476. * @param {?} point
  2477. * @param {?} overlay
  2478. * @param {?} viewport
  2479. * @param {?} position
  2480. * @return {?}
  2481. */
  2482. FlexibleConnectedPositionStrategy.prototype._getOverlayFit = /**
  2483. * Gets how well an overlay at the given point will fit within the viewport.
  2484. * @private
  2485. * @param {?} point
  2486. * @param {?} overlay
  2487. * @param {?} viewport
  2488. * @param {?} position
  2489. * @return {?}
  2490. */
  2491. function (point, overlay, viewport, position) {
  2492. var x = point.x, y = point.y;
  2493. /** @type {?} */
  2494. var offsetX = this._getOffset(position, 'x');
  2495. /** @type {?} */
  2496. var offsetY = this._getOffset(position, 'y');
  2497. // Account for the offsets since they could push the overlay out of the viewport.
  2498. if (offsetX) {
  2499. x += offsetX;
  2500. }
  2501. if (offsetY) {
  2502. y += offsetY;
  2503. }
  2504. // How much the overlay would overflow at this position, on each side.
  2505. /** @type {?} */
  2506. var leftOverflow = 0 - x;
  2507. /** @type {?} */
  2508. var rightOverflow = (x + overlay.width) - viewport.width;
  2509. /** @type {?} */
  2510. var topOverflow = 0 - y;
  2511. /** @type {?} */
  2512. var bottomOverflow = (y + overlay.height) - viewport.height;
  2513. // Visible parts of the element on each axis.
  2514. /** @type {?} */
  2515. var visibleWidth = this._subtractOverflows(overlay.width, leftOverflow, rightOverflow);
  2516. /** @type {?} */
  2517. var visibleHeight = this._subtractOverflows(overlay.height, topOverflow, bottomOverflow);
  2518. /** @type {?} */
  2519. var visibleArea = visibleWidth * visibleHeight;
  2520. return {
  2521. visibleArea: visibleArea,
  2522. isCompletelyWithinViewport: (overlay.width * overlay.height) === visibleArea,
  2523. fitsInViewportVertically: visibleHeight === overlay.height,
  2524. fitsInViewportHorizontally: visibleWidth == overlay.width,
  2525. };
  2526. };
  2527. /**
  2528. * Whether the overlay can fit within the viewport when it may resize either its width or height.
  2529. * @param fit How well the overlay fits in the viewport at some position.
  2530. * @param point The (x, y) coordinates of the overlat at some position.
  2531. * @param viewport The geometry of the viewport.
  2532. */
  2533. /**
  2534. * Whether the overlay can fit within the viewport when it may resize either its width or height.
  2535. * @private
  2536. * @param {?} fit How well the overlay fits in the viewport at some position.
  2537. * @param {?} point The (x, y) coordinates of the overlat at some position.
  2538. * @param {?} viewport The geometry of the viewport.
  2539. * @return {?}
  2540. */
  2541. FlexibleConnectedPositionStrategy.prototype._canFitWithFlexibleDimensions = /**
  2542. * Whether the overlay can fit within the viewport when it may resize either its width or height.
  2543. * @private
  2544. * @param {?} fit How well the overlay fits in the viewport at some position.
  2545. * @param {?} point The (x, y) coordinates of the overlat at some position.
  2546. * @param {?} viewport The geometry of the viewport.
  2547. * @return {?}
  2548. */
  2549. function (fit, point, viewport) {
  2550. if (this._hasFlexibleDimensions) {
  2551. /** @type {?} */
  2552. var availableHeight = viewport.bottom - point.y;
  2553. /** @type {?} */
  2554. var availableWidth = viewport.right - point.x;
  2555. /** @type {?} */
  2556. var minHeight = this._overlayRef.getConfig().minHeight;
  2557. /** @type {?} */
  2558. var minWidth = this._overlayRef.getConfig().minWidth;
  2559. /** @type {?} */
  2560. var verticalFit = fit.fitsInViewportVertically ||
  2561. (minHeight != null && minHeight <= availableHeight);
  2562. /** @type {?} */
  2563. var horizontalFit = fit.fitsInViewportHorizontally ||
  2564. (minWidth != null && minWidth <= availableWidth);
  2565. return verticalFit && horizontalFit;
  2566. }
  2567. return false;
  2568. };
  2569. /**
  2570. * Gets the point at which the overlay can be "pushed" on-screen. If the overlay is larger than
  2571. * the viewport, the top-left corner will be pushed on-screen (with overflow occuring on the
  2572. * right and bottom).
  2573. *
  2574. * @param start Starting point from which the overlay is pushed.
  2575. * @param overlay Dimensions of the overlay.
  2576. * @param scrollPosition Current viewport scroll position.
  2577. * @returns The point at which to position the overlay after pushing. This is effectively a new
  2578. * originPoint.
  2579. */
  2580. /**
  2581. * Gets the point at which the overlay can be "pushed" on-screen. If the overlay is larger than
  2582. * the viewport, the top-left corner will be pushed on-screen (with overflow occuring on the
  2583. * right and bottom).
  2584. *
  2585. * @private
  2586. * @param {?} start Starting point from which the overlay is pushed.
  2587. * @param {?} overlay Dimensions of the overlay.
  2588. * @param {?} scrollPosition Current viewport scroll position.
  2589. * @return {?} The point at which to position the overlay after pushing. This is effectively a new
  2590. * originPoint.
  2591. */
  2592. FlexibleConnectedPositionStrategy.prototype._pushOverlayOnScreen = /**
  2593. * Gets the point at which the overlay can be "pushed" on-screen. If the overlay is larger than
  2594. * the viewport, the top-left corner will be pushed on-screen (with overflow occuring on the
  2595. * right and bottom).
  2596. *
  2597. * @private
  2598. * @param {?} start Starting point from which the overlay is pushed.
  2599. * @param {?} overlay Dimensions of the overlay.
  2600. * @param {?} scrollPosition Current viewport scroll position.
  2601. * @return {?} The point at which to position the overlay after pushing. This is effectively a new
  2602. * originPoint.
  2603. */
  2604. function (start, overlay, scrollPosition) {
  2605. // If the position is locked and we've pushed the overlay already, reuse the previous push
  2606. // amount, rather than pushing it again. If we were to continue pushing, the element would
  2607. // remain in the viewport, which goes against the expectations when position locking is enabled.
  2608. if (this._previousPushAmount && this._positionLocked) {
  2609. return {
  2610. x: start.x + this._previousPushAmount.x,
  2611. y: start.y + this._previousPushAmount.y
  2612. };
  2613. }
  2614. /** @type {?} */
  2615. var viewport = this._viewportRect;
  2616. // Determine how much the overlay goes outside the viewport on each
  2617. // side, which we'll use to decide which direction to push it.
  2618. /** @type {?} */
  2619. var overflowRight = Math.max(start.x + overlay.width - viewport.right, 0);
  2620. /** @type {?} */
  2621. var overflowBottom = Math.max(start.y + overlay.height - viewport.bottom, 0);
  2622. /** @type {?} */
  2623. var overflowTop = Math.max(viewport.top - scrollPosition.top - start.y, 0);
  2624. /** @type {?} */
  2625. var overflowLeft = Math.max(viewport.left - scrollPosition.left - start.x, 0);
  2626. // Amount by which to push the overlay in each axis such that it remains on-screen.
  2627. /** @type {?} */
  2628. var pushX = 0;
  2629. /** @type {?} */
  2630. var pushY = 0;
  2631. // If the overlay fits completely within the bounds of the viewport, push it from whichever
  2632. // direction is goes off-screen. Otherwise, push the top-left corner such that its in the
  2633. // viewport and allow for the trailing end of the overlay to go out of bounds.
  2634. if (overlay.width <= viewport.width) {
  2635. pushX = overflowLeft || -overflowRight;
  2636. }
  2637. else {
  2638. pushX = start.x < this._viewportMargin ? (viewport.left - scrollPosition.left) - start.x : 0;
  2639. }
  2640. if (overlay.height <= viewport.height) {
  2641. pushY = overflowTop || -overflowBottom;
  2642. }
  2643. else {
  2644. pushY = start.y < this._viewportMargin ? (viewport.top - scrollPosition.top) - start.y : 0;
  2645. }
  2646. this._previousPushAmount = { x: pushX, y: pushY };
  2647. return {
  2648. x: start.x + pushX,
  2649. y: start.y + pushY,
  2650. };
  2651. };
  2652. /**
  2653. * Applies a computed position to the overlay and emits a position change.
  2654. * @param position The position preference
  2655. * @param originPoint The point on the origin element where the overlay is connected.
  2656. */
  2657. /**
  2658. * Applies a computed position to the overlay and emits a position change.
  2659. * @private
  2660. * @param {?} position The position preference
  2661. * @param {?} originPoint The point on the origin element where the overlay is connected.
  2662. * @return {?}
  2663. */
  2664. FlexibleConnectedPositionStrategy.prototype._applyPosition = /**
  2665. * Applies a computed position to the overlay and emits a position change.
  2666. * @private
  2667. * @param {?} position The position preference
  2668. * @param {?} originPoint The point on the origin element where the overlay is connected.
  2669. * @return {?}
  2670. */
  2671. function (position, originPoint) {
  2672. this._setTransformOrigin(position);
  2673. this._setOverlayElementStyles(originPoint, position);
  2674. this._setBoundingBoxStyles(originPoint, position);
  2675. if (position.panelClass) {
  2676. this._addPanelClasses(position.panelClass);
  2677. }
  2678. // Save the last connected position in case the position needs to be re-calculated.
  2679. this._lastPosition = position;
  2680. // Notify that the position has been changed along with its change properties.
  2681. // We only emit if we've got any subscriptions, because the scroll visibility
  2682. // calculcations can be somewhat expensive.
  2683. if (this._positionChanges.observers.length) {
  2684. /** @type {?} */
  2685. var scrollableViewProperties = this._getScrollVisibility();
  2686. /** @type {?} */
  2687. var changeEvent = new ConnectedOverlayPositionChange(position, scrollableViewProperties);
  2688. this._positionChanges.next(changeEvent);
  2689. }
  2690. this._isInitialRender = false;
  2691. };
  2692. /** Sets the transform origin based on the configured selector and the passed-in position. */
  2693. /**
  2694. * Sets the transform origin based on the configured selector and the passed-in position.
  2695. * @private
  2696. * @param {?} position
  2697. * @return {?}
  2698. */
  2699. FlexibleConnectedPositionStrategy.prototype._setTransformOrigin = /**
  2700. * Sets the transform origin based on the configured selector and the passed-in position.
  2701. * @private
  2702. * @param {?} position
  2703. * @return {?}
  2704. */
  2705. function (position) {
  2706. if (!this._transformOriginSelector) {
  2707. return;
  2708. }
  2709. /** @type {?} */
  2710. var elements = (/** @type {?} */ (this._boundingBox)).querySelectorAll(this._transformOriginSelector);
  2711. /** @type {?} */
  2712. var xOrigin;
  2713. /** @type {?} */
  2714. var yOrigin = position.overlayY;
  2715. if (position.overlayX === 'center') {
  2716. xOrigin = 'center';
  2717. }
  2718. else if (this._isRtl()) {
  2719. xOrigin = position.overlayX === 'start' ? 'right' : 'left';
  2720. }
  2721. else {
  2722. xOrigin = position.overlayX === 'start' ? 'left' : 'right';
  2723. }
  2724. for (var i = 0; i < elements.length; i++) {
  2725. elements[i].style.transformOrigin = xOrigin + " " + yOrigin;
  2726. }
  2727. };
  2728. /**
  2729. * Gets the position and size of the overlay's sizing container.
  2730. *
  2731. * This method does no measuring and applies no styles so that we can cheaply compute the
  2732. * bounds for all positions and choose the best fit based on these results.
  2733. */
  2734. /**
  2735. * Gets the position and size of the overlay's sizing container.
  2736. *
  2737. * This method does no measuring and applies no styles so that we can cheaply compute the
  2738. * bounds for all positions and choose the best fit based on these results.
  2739. * @private
  2740. * @param {?} origin
  2741. * @param {?} position
  2742. * @return {?}
  2743. */
  2744. FlexibleConnectedPositionStrategy.prototype._calculateBoundingBoxRect = /**
  2745. * Gets the position and size of the overlay's sizing container.
  2746. *
  2747. * This method does no measuring and applies no styles so that we can cheaply compute the
  2748. * bounds for all positions and choose the best fit based on these results.
  2749. * @private
  2750. * @param {?} origin
  2751. * @param {?} position
  2752. * @return {?}
  2753. */
  2754. function (origin, position) {
  2755. /** @type {?} */
  2756. var viewport = this._viewportRect;
  2757. /** @type {?} */
  2758. var isRtl = this._isRtl();
  2759. /** @type {?} */
  2760. var height;
  2761. /** @type {?} */
  2762. var top;
  2763. /** @type {?} */
  2764. var bottom;
  2765. if (position.overlayY === 'top') {
  2766. // Overlay is opening "downward" and thus is bound by the bottom viewport edge.
  2767. top = origin.y;
  2768. height = viewport.height - top + this._viewportMargin;
  2769. }
  2770. else if (position.overlayY === 'bottom') {
  2771. // Overlay is opening "upward" and thus is bound by the top viewport edge. We need to add
  2772. // the viewport margin back in, because the viewport rect is narrowed down to remove the
  2773. // margin, whereas the `origin` position is calculated based on its `ClientRect`.
  2774. bottom = viewport.height - origin.y + this._viewportMargin * 2;
  2775. height = viewport.height - bottom + this._viewportMargin;
  2776. }
  2777. else {
  2778. // If neither top nor bottom, it means that the overlay is vertically centered on the
  2779. // origin point. Note that we want the position relative to the viewport, rather than
  2780. // the page, which is why we don't use something like `viewport.bottom - origin.y` and
  2781. // `origin.y - viewport.top`.
  2782. /** @type {?} */
  2783. var smallestDistanceToViewportEdge = Math.min(viewport.bottom - origin.y + viewport.top, origin.y);
  2784. /** @type {?} */
  2785. var previousHeight = this._lastBoundingBoxSize.height;
  2786. height = smallestDistanceToViewportEdge * 2;
  2787. top = origin.y - smallestDistanceToViewportEdge;
  2788. if (height > previousHeight && !this._isInitialRender && !this._growAfterOpen) {
  2789. top = origin.y - (previousHeight / 2);
  2790. }
  2791. }
  2792. // The overlay is opening 'right-ward' (the content flows to the right).
  2793. /** @type {?} */
  2794. var isBoundedByRightViewportEdge = (position.overlayX === 'start' && !isRtl) ||
  2795. (position.overlayX === 'end' && isRtl);
  2796. // The overlay is opening 'left-ward' (the content flows to the left).
  2797. /** @type {?} */
  2798. var isBoundedByLeftViewportEdge = (position.overlayX === 'end' && !isRtl) ||
  2799. (position.overlayX === 'start' && isRtl);
  2800. /** @type {?} */
  2801. var width;
  2802. /** @type {?} */
  2803. var left;
  2804. /** @type {?} */
  2805. var right;
  2806. if (isBoundedByLeftViewportEdge) {
  2807. right = viewport.width - origin.x + this._viewportMargin;
  2808. width = origin.x - this._viewportMargin;
  2809. }
  2810. else if (isBoundedByRightViewportEdge) {
  2811. left = origin.x;
  2812. width = viewport.right - origin.x;
  2813. }
  2814. else {
  2815. // If neither start nor end, it means that the overlay is horizontally centered on the
  2816. // origin point. Note that we want the position relative to the viewport, rather than
  2817. // the page, which is why we don't use something like `viewport.right - origin.x` and
  2818. // `origin.x - viewport.left`.
  2819. /** @type {?} */
  2820. var smallestDistanceToViewportEdge = Math.min(viewport.right - origin.x + viewport.left, origin.x);
  2821. /** @type {?} */
  2822. var previousWidth = this._lastBoundingBoxSize.width;
  2823. width = smallestDistanceToViewportEdge * 2;
  2824. left = origin.x - smallestDistanceToViewportEdge;
  2825. if (width > previousWidth && !this._isInitialRender && !this._growAfterOpen) {
  2826. left = origin.x - (previousWidth / 2);
  2827. }
  2828. }
  2829. return { top: (/** @type {?} */ (top)), left: (/** @type {?} */ (left)), bottom: (/** @type {?} */ (bottom)), right: (/** @type {?} */ (right)), width: width, height: height };
  2830. };
  2831. /**
  2832. * Sets the position and size of the overlay's sizing wrapper. The wrapper is positioned on the
  2833. * origin's connection point and stetches to the bounds of the viewport.
  2834. *
  2835. * @param origin The point on the origin element where the overlay is connected.
  2836. * @param position The position preference
  2837. */
  2838. /**
  2839. * Sets the position and size of the overlay's sizing wrapper. The wrapper is positioned on the
  2840. * origin's connection point and stetches to the bounds of the viewport.
  2841. *
  2842. * @private
  2843. * @param {?} origin The point on the origin element where the overlay is connected.
  2844. * @param {?} position The position preference
  2845. * @return {?}
  2846. */
  2847. FlexibleConnectedPositionStrategy.prototype._setBoundingBoxStyles = /**
  2848. * Sets the position and size of the overlay's sizing wrapper. The wrapper is positioned on the
  2849. * origin's connection point and stetches to the bounds of the viewport.
  2850. *
  2851. * @private
  2852. * @param {?} origin The point on the origin element where the overlay is connected.
  2853. * @param {?} position The position preference
  2854. * @return {?}
  2855. */
  2856. function (origin, position) {
  2857. /** @type {?} */
  2858. var boundingBoxRect = this._calculateBoundingBoxRect(origin, position);
  2859. // It's weird if the overlay *grows* while scrolling, so we take the last size into account
  2860. // when applying a new size.
  2861. if (!this._isInitialRender && !this._growAfterOpen) {
  2862. boundingBoxRect.height = Math.min(boundingBoxRect.height, this._lastBoundingBoxSize.height);
  2863. boundingBoxRect.width = Math.min(boundingBoxRect.width, this._lastBoundingBoxSize.width);
  2864. }
  2865. /** @type {?} */
  2866. var styles = (/** @type {?} */ ({}));
  2867. if (this._hasExactPosition()) {
  2868. styles.top = styles.left = '0';
  2869. styles.bottom = styles.right = '';
  2870. styles.width = styles.height = '100%';
  2871. }
  2872. else {
  2873. /** @type {?} */
  2874. var maxHeight = this._overlayRef.getConfig().maxHeight;
  2875. /** @type {?} */
  2876. var maxWidth = this._overlayRef.getConfig().maxWidth;
  2877. styles.height = coercion.coerceCssPixelValue(boundingBoxRect.height);
  2878. styles.top = coercion.coerceCssPixelValue(boundingBoxRect.top);
  2879. styles.bottom = coercion.coerceCssPixelValue(boundingBoxRect.bottom);
  2880. styles.width = coercion.coerceCssPixelValue(boundingBoxRect.width);
  2881. styles.left = coercion.coerceCssPixelValue(boundingBoxRect.left);
  2882. styles.right = coercion.coerceCssPixelValue(boundingBoxRect.right);
  2883. // Push the pane content towards the proper direction.
  2884. if (position.overlayX === 'center') {
  2885. styles.alignItems = 'center';
  2886. }
  2887. else {
  2888. styles.alignItems = position.overlayX === 'end' ? 'flex-end' : 'flex-start';
  2889. }
  2890. if (position.overlayY === 'center') {
  2891. styles.justifyContent = 'center';
  2892. }
  2893. else {
  2894. styles.justifyContent = position.overlayY === 'bottom' ? 'flex-end' : 'flex-start';
  2895. }
  2896. if (maxHeight) {
  2897. styles.maxHeight = coercion.coerceCssPixelValue(maxHeight);
  2898. }
  2899. if (maxWidth) {
  2900. styles.maxWidth = coercion.coerceCssPixelValue(maxWidth);
  2901. }
  2902. }
  2903. this._lastBoundingBoxSize = boundingBoxRect;
  2904. extendStyles((/** @type {?} */ (this._boundingBox)).style, styles);
  2905. };
  2906. /** Resets the styles for the bounding box so that a new positioning can be computed. */
  2907. /**
  2908. * Resets the styles for the bounding box so that a new positioning can be computed.
  2909. * @private
  2910. * @return {?}
  2911. */
  2912. FlexibleConnectedPositionStrategy.prototype._resetBoundingBoxStyles = /**
  2913. * Resets the styles for the bounding box so that a new positioning can be computed.
  2914. * @private
  2915. * @return {?}
  2916. */
  2917. function () {
  2918. extendStyles((/** @type {?} */ (this._boundingBox)).style, (/** @type {?} */ ({
  2919. top: '0',
  2920. left: '0',
  2921. right: '0',
  2922. bottom: '0',
  2923. height: '',
  2924. width: '',
  2925. alignItems: '',
  2926. justifyContent: '',
  2927. })));
  2928. };
  2929. /** Resets the styles for the overlay pane so that a new positioning can be computed. */
  2930. /**
  2931. * Resets the styles for the overlay pane so that a new positioning can be computed.
  2932. * @private
  2933. * @return {?}
  2934. */
  2935. FlexibleConnectedPositionStrategy.prototype._resetOverlayElementStyles = /**
  2936. * Resets the styles for the overlay pane so that a new positioning can be computed.
  2937. * @private
  2938. * @return {?}
  2939. */
  2940. function () {
  2941. extendStyles(this._pane.style, (/** @type {?} */ ({
  2942. top: '',
  2943. left: '',
  2944. bottom: '',
  2945. right: '',
  2946. position: '',
  2947. transform: '',
  2948. })));
  2949. };
  2950. /** Sets positioning styles to the overlay element. */
  2951. /**
  2952. * Sets positioning styles to the overlay element.
  2953. * @private
  2954. * @param {?} originPoint
  2955. * @param {?} position
  2956. * @return {?}
  2957. */
  2958. FlexibleConnectedPositionStrategy.prototype._setOverlayElementStyles = /**
  2959. * Sets positioning styles to the overlay element.
  2960. * @private
  2961. * @param {?} originPoint
  2962. * @param {?} position
  2963. * @return {?}
  2964. */
  2965. function (originPoint, position) {
  2966. /** @type {?} */
  2967. var styles = (/** @type {?} */ ({}));
  2968. if (this._hasExactPosition()) {
  2969. /** @type {?} */
  2970. var scrollPosition = this._viewportRuler.getViewportScrollPosition();
  2971. extendStyles(styles, this._getExactOverlayY(position, originPoint, scrollPosition));
  2972. extendStyles(styles, this._getExactOverlayX(position, originPoint, scrollPosition));
  2973. }
  2974. else {
  2975. styles.position = 'static';
  2976. }
  2977. // Use a transform to apply the offsets. We do this because the `center` positions rely on
  2978. // being in the normal flex flow and setting a `top` / `left` at all will completely throw
  2979. // off the position. We also can't use margins, because they won't have an effect in some
  2980. // cases where the element doesn't have anything to "push off of". Finally, this works
  2981. // better both with flexible and non-flexible positioning.
  2982. /** @type {?} */
  2983. var transformString = '';
  2984. /** @type {?} */
  2985. var offsetX = this._getOffset(position, 'x');
  2986. /** @type {?} */
  2987. var offsetY = this._getOffset(position, 'y');
  2988. if (offsetX) {
  2989. transformString += "translateX(" + offsetX + "px) ";
  2990. }
  2991. if (offsetY) {
  2992. transformString += "translateY(" + offsetY + "px)";
  2993. }
  2994. styles.transform = transformString.trim();
  2995. // If a maxWidth or maxHeight is specified on the overlay, we remove them. We do this because
  2996. // we need these values to both be set to "100%" for the automatic flexible sizing to work.
  2997. // The maxHeight and maxWidth are set on the boundingBox in order to enforce the constraint.
  2998. if (this._hasFlexibleDimensions && this._overlayRef.getConfig().maxHeight) {
  2999. styles.maxHeight = '';
  3000. }
  3001. if (this._hasFlexibleDimensions && this._overlayRef.getConfig().maxWidth) {
  3002. styles.maxWidth = '';
  3003. }
  3004. extendStyles(this._pane.style, styles);
  3005. };
  3006. /** Gets the exact top/bottom for the overlay when not using flexible sizing or when pushing. */
  3007. /**
  3008. * Gets the exact top/bottom for the overlay when not using flexible sizing or when pushing.
  3009. * @private
  3010. * @param {?} position
  3011. * @param {?} originPoint
  3012. * @param {?} scrollPosition
  3013. * @return {?}
  3014. */
  3015. FlexibleConnectedPositionStrategy.prototype._getExactOverlayY = /**
  3016. * Gets the exact top/bottom for the overlay when not using flexible sizing or when pushing.
  3017. * @private
  3018. * @param {?} position
  3019. * @param {?} originPoint
  3020. * @param {?} scrollPosition
  3021. * @return {?}
  3022. */
  3023. function (position, originPoint, scrollPosition) {
  3024. // Reset any existing styles. This is necessary in case the
  3025. // preferred position has changed since the last `apply`.
  3026. /** @type {?} */
  3027. var styles = (/** @type {?} */ ({ top: null, bottom: null }));
  3028. /** @type {?} */
  3029. var overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);
  3030. if (this._isPushed) {
  3031. overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);
  3032. }
  3033. /** @type {?} */
  3034. var virtualKeyboardOffset = this._overlayContainer.getContainerElement().getBoundingClientRect().top;
  3035. // Normally this would be zero, however when the overlay is attached to an input (e.g. in an
  3036. // autocomplete), mobile browsers will shift everything in order to put the input in the middle
  3037. // of the screen and to make space for the virtual keyboard. We need to account for this offset,
  3038. // otherwise our positioning will be thrown off.
  3039. overlayPoint.y -= virtualKeyboardOffset;
  3040. // We want to set either `top` or `bottom` based on whether the overlay wants to appear
  3041. // above or below the origin and the direction in which the element will expand.
  3042. if (position.overlayY === 'bottom') {
  3043. // When using `bottom`, we adjust the y position such that it is the distance
  3044. // from the bottom of the viewport rather than the top.
  3045. /** @type {?} */
  3046. var documentHeight = (/** @type {?} */ (this._document.documentElement)).clientHeight;
  3047. styles.bottom = documentHeight - (overlayPoint.y + this._overlayRect.height) + "px";
  3048. }
  3049. else {
  3050. styles.top = coercion.coerceCssPixelValue(overlayPoint.y);
  3051. }
  3052. return styles;
  3053. };
  3054. /** Gets the exact left/right for the overlay when not using flexible sizing or when pushing. */
  3055. /**
  3056. * Gets the exact left/right for the overlay when not using flexible sizing or when pushing.
  3057. * @private
  3058. * @param {?} position
  3059. * @param {?} originPoint
  3060. * @param {?} scrollPosition
  3061. * @return {?}
  3062. */
  3063. FlexibleConnectedPositionStrategy.prototype._getExactOverlayX = /**
  3064. * Gets the exact left/right for the overlay when not using flexible sizing or when pushing.
  3065. * @private
  3066. * @param {?} position
  3067. * @param {?} originPoint
  3068. * @param {?} scrollPosition
  3069. * @return {?}
  3070. */
  3071. function (position, originPoint, scrollPosition) {
  3072. // Reset any existing styles. This is necessary in case the preferred position has
  3073. // changed since the last `apply`.
  3074. /** @type {?} */
  3075. var styles = (/** @type {?} */ ({ left: null, right: null }));
  3076. /** @type {?} */
  3077. var overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);
  3078. if (this._isPushed) {
  3079. overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);
  3080. }
  3081. // We want to set either `left` or `right` based on whether the overlay wants to appear "before"
  3082. // or "after" the origin, which determines the direction in which the element will expand.
  3083. // For the horizontal axis, the meaning of "before" and "after" change based on whether the
  3084. // page is in RTL or LTR.
  3085. /** @type {?} */
  3086. var horizontalStyleProperty;
  3087. if (this._isRtl()) {
  3088. horizontalStyleProperty = position.overlayX === 'end' ? 'left' : 'right';
  3089. }
  3090. else {
  3091. horizontalStyleProperty = position.overlayX === 'end' ? 'right' : 'left';
  3092. }
  3093. // When we're setting `right`, we adjust the x position such that it is the distance
  3094. // from the right edge of the viewport rather than the left edge.
  3095. if (horizontalStyleProperty === 'right') {
  3096. /** @type {?} */
  3097. var documentWidth = (/** @type {?} */ (this._document.documentElement)).clientWidth;
  3098. styles.right = documentWidth - (overlayPoint.x + this._overlayRect.width) + "px";
  3099. }
  3100. else {
  3101. styles.left = coercion.coerceCssPixelValue(overlayPoint.x);
  3102. }
  3103. return styles;
  3104. };
  3105. /**
  3106. * Gets the view properties of the trigger and overlay, including whether they are clipped
  3107. * or completely outside the view of any of the strategy's scrollables.
  3108. */
  3109. /**
  3110. * Gets the view properties of the trigger and overlay, including whether they are clipped
  3111. * or completely outside the view of any of the strategy's scrollables.
  3112. * @private
  3113. * @return {?}
  3114. */
  3115. FlexibleConnectedPositionStrategy.prototype._getScrollVisibility = /**
  3116. * Gets the view properties of the trigger and overlay, including whether they are clipped
  3117. * or completely outside the view of any of the strategy's scrollables.
  3118. * @private
  3119. * @return {?}
  3120. */
  3121. function () {
  3122. // Note: needs fresh rects since the position could've changed.
  3123. /** @type {?} */
  3124. var originBounds = this._getOriginRect();
  3125. /** @type {?} */
  3126. var overlayBounds = this._pane.getBoundingClientRect();
  3127. // TODO(jelbourn): instead of needing all of the client rects for these scrolling containers
  3128. // every time, we should be able to use the scrollTop of the containers if the size of those
  3129. // containers hasn't changed.
  3130. /** @type {?} */
  3131. var scrollContainerBounds = this._scrollables.map((/**
  3132. * @param {?} scrollable
  3133. * @return {?}
  3134. */
  3135. function (scrollable) {
  3136. return scrollable.getElementRef().nativeElement.getBoundingClientRect();
  3137. }));
  3138. return {
  3139. isOriginClipped: isElementClippedByScrolling(originBounds, scrollContainerBounds),
  3140. isOriginOutsideView: isElementScrolledOutsideView(originBounds, scrollContainerBounds),
  3141. isOverlayClipped: isElementClippedByScrolling(overlayBounds, scrollContainerBounds),
  3142. isOverlayOutsideView: isElementScrolledOutsideView(overlayBounds, scrollContainerBounds),
  3143. };
  3144. };
  3145. /** Subtracts the amount that an element is overflowing on an axis from its length. */
  3146. /**
  3147. * Subtracts the amount that an element is overflowing on an axis from its length.
  3148. * @private
  3149. * @param {?} length
  3150. * @param {...?} overflows
  3151. * @return {?}
  3152. */
  3153. FlexibleConnectedPositionStrategy.prototype._subtractOverflows = /**
  3154. * Subtracts the amount that an element is overflowing on an axis from its length.
  3155. * @private
  3156. * @param {?} length
  3157. * @param {...?} overflows
  3158. * @return {?}
  3159. */
  3160. function (length) {
  3161. var overflows = [];
  3162. for (var _i = 1; _i < arguments.length; _i++) {
  3163. overflows[_i - 1] = arguments[_i];
  3164. }
  3165. return overflows.reduce((/**
  3166. * @param {?} currentValue
  3167. * @param {?} currentOverflow
  3168. * @return {?}
  3169. */
  3170. function (currentValue, currentOverflow) {
  3171. return currentValue - Math.max(currentOverflow, 0);
  3172. }), length);
  3173. };
  3174. /** Narrows the given viewport rect by the current _viewportMargin. */
  3175. /**
  3176. * Narrows the given viewport rect by the current _viewportMargin.
  3177. * @private
  3178. * @return {?}
  3179. */
  3180. FlexibleConnectedPositionStrategy.prototype._getNarrowedViewportRect = /**
  3181. * Narrows the given viewport rect by the current _viewportMargin.
  3182. * @private
  3183. * @return {?}
  3184. */
  3185. function () {
  3186. // We recalculate the viewport rect here ourselves, rather than using the ViewportRuler,
  3187. // because we want to use the `clientWidth` and `clientHeight` as the base. The difference
  3188. // being that the client properties don't include the scrollbar, as opposed to `innerWidth`
  3189. // and `innerHeight` that do. This is necessary, because the overlay container uses
  3190. // 100% `width` and `height` which don't include the scrollbar either.
  3191. /** @type {?} */
  3192. var width = (/** @type {?} */ (this._document.documentElement)).clientWidth;
  3193. /** @type {?} */
  3194. var height = (/** @type {?} */ (this._document.documentElement)).clientHeight;
  3195. /** @type {?} */
  3196. var scrollPosition = this._viewportRuler.getViewportScrollPosition();
  3197. return {
  3198. top: scrollPosition.top + this._viewportMargin,
  3199. left: scrollPosition.left + this._viewportMargin,
  3200. right: scrollPosition.left + width - this._viewportMargin,
  3201. bottom: scrollPosition.top + height - this._viewportMargin,
  3202. width: width - (2 * this._viewportMargin),
  3203. height: height - (2 * this._viewportMargin),
  3204. };
  3205. };
  3206. /** Whether the we're dealing with an RTL context */
  3207. /**
  3208. * Whether the we're dealing with an RTL context
  3209. * @private
  3210. * @return {?}
  3211. */
  3212. FlexibleConnectedPositionStrategy.prototype._isRtl = /**
  3213. * Whether the we're dealing with an RTL context
  3214. * @private
  3215. * @return {?}
  3216. */
  3217. function () {
  3218. return this._overlayRef.getDirection() === 'rtl';
  3219. };
  3220. /** Determines whether the overlay uses exact or flexible positioning. */
  3221. /**
  3222. * Determines whether the overlay uses exact or flexible positioning.
  3223. * @private
  3224. * @return {?}
  3225. */
  3226. FlexibleConnectedPositionStrategy.prototype._hasExactPosition = /**
  3227. * Determines whether the overlay uses exact or flexible positioning.
  3228. * @private
  3229. * @return {?}
  3230. */
  3231. function () {
  3232. return !this._hasFlexibleDimensions || this._isPushed;
  3233. };
  3234. /** Retrieves the offset of a position along the x or y axis. */
  3235. /**
  3236. * Retrieves the offset of a position along the x or y axis.
  3237. * @private
  3238. * @param {?} position
  3239. * @param {?} axis
  3240. * @return {?}
  3241. */
  3242. FlexibleConnectedPositionStrategy.prototype._getOffset = /**
  3243. * Retrieves the offset of a position along the x or y axis.
  3244. * @private
  3245. * @param {?} position
  3246. * @param {?} axis
  3247. * @return {?}
  3248. */
  3249. function (position, axis) {
  3250. if (axis === 'x') {
  3251. // We don't do something like `position['offset' + axis]` in
  3252. // order to avoid breking minifiers that rename properties.
  3253. return position.offsetX == null ? this._offsetX : position.offsetX;
  3254. }
  3255. return position.offsetY == null ? this._offsetY : position.offsetY;
  3256. };
  3257. /** Validates that the current position match the expected values. */
  3258. /**
  3259. * Validates that the current position match the expected values.
  3260. * @private
  3261. * @return {?}
  3262. */
  3263. FlexibleConnectedPositionStrategy.prototype._validatePositions = /**
  3264. * Validates that the current position match the expected values.
  3265. * @private
  3266. * @return {?}
  3267. */
  3268. function () {
  3269. if (!this._preferredPositions.length) {
  3270. throw Error('FlexibleConnectedPositionStrategy: At least one position is required.');
  3271. }
  3272. // TODO(crisbeto): remove these once Angular's template type
  3273. // checking is advanced enough to catch these cases.
  3274. this._preferredPositions.forEach((/**
  3275. * @param {?} pair
  3276. * @return {?}
  3277. */
  3278. function (pair) {
  3279. validateHorizontalPosition('originX', pair.originX);
  3280. validateVerticalPosition('originY', pair.originY);
  3281. validateHorizontalPosition('overlayX', pair.overlayX);
  3282. validateVerticalPosition('overlayY', pair.overlayY);
  3283. }));
  3284. };
  3285. /** Adds a single CSS class or an array of classes on the overlay panel. */
  3286. /**
  3287. * Adds a single CSS class or an array of classes on the overlay panel.
  3288. * @private
  3289. * @param {?} cssClasses
  3290. * @return {?}
  3291. */
  3292. FlexibleConnectedPositionStrategy.prototype._addPanelClasses = /**
  3293. * Adds a single CSS class or an array of classes on the overlay panel.
  3294. * @private
  3295. * @param {?} cssClasses
  3296. * @return {?}
  3297. */
  3298. function (cssClasses) {
  3299. var _this = this;
  3300. if (this._pane) {
  3301. coercion.coerceArray(cssClasses).forEach((/**
  3302. * @param {?} cssClass
  3303. * @return {?}
  3304. */
  3305. function (cssClass) {
  3306. if (cssClass !== '' && _this._appliedPanelClasses.indexOf(cssClass) === -1) {
  3307. _this._appliedPanelClasses.push(cssClass);
  3308. _this._pane.classList.add(cssClass);
  3309. }
  3310. }));
  3311. }
  3312. };
  3313. /** Clears the classes that the position strategy has applied from the overlay panel. */
  3314. /**
  3315. * Clears the classes that the position strategy has applied from the overlay panel.
  3316. * @private
  3317. * @return {?}
  3318. */
  3319. FlexibleConnectedPositionStrategy.prototype._clearPanelClasses = /**
  3320. * Clears the classes that the position strategy has applied from the overlay panel.
  3321. * @private
  3322. * @return {?}
  3323. */
  3324. function () {
  3325. var _this = this;
  3326. if (this._pane) {
  3327. this._appliedPanelClasses.forEach((/**
  3328. * @param {?} cssClass
  3329. * @return {?}
  3330. */
  3331. function (cssClass) {
  3332. _this._pane.classList.remove(cssClass);
  3333. }));
  3334. this._appliedPanelClasses = [];
  3335. }
  3336. };
  3337. /** Returns the ClientRect of the current origin. */
  3338. /**
  3339. * Returns the ClientRect of the current origin.
  3340. * @private
  3341. * @return {?}
  3342. */
  3343. FlexibleConnectedPositionStrategy.prototype._getOriginRect = /**
  3344. * Returns the ClientRect of the current origin.
  3345. * @private
  3346. * @return {?}
  3347. */
  3348. function () {
  3349. /** @type {?} */
  3350. var origin = this._origin;
  3351. if (origin instanceof core.ElementRef) {
  3352. return origin.nativeElement.getBoundingClientRect();
  3353. }
  3354. if (origin instanceof HTMLElement) {
  3355. return origin.getBoundingClientRect();
  3356. }
  3357. /** @type {?} */
  3358. var width = origin.width || 0;
  3359. /** @type {?} */
  3360. var height = origin.height || 0;
  3361. // If the origin is a point, return a client rect as if it was a 0x0 element at the point.
  3362. return {
  3363. top: origin.y,
  3364. bottom: origin.y + height,
  3365. left: origin.x,
  3366. right: origin.x + width,
  3367. height: height,
  3368. width: width
  3369. };
  3370. };
  3371. return FlexibleConnectedPositionStrategy;
  3372. }());
  3373. /**
  3374. * Shallow-extends a stylesheet object with another stylesheet object.
  3375. * @param {?} dest
  3376. * @param {?} source
  3377. * @return {?}
  3378. */
  3379. function extendStyles(dest, source) {
  3380. for (var key in source) {
  3381. if (source.hasOwnProperty(key)) {
  3382. dest[key] = source[key];
  3383. }
  3384. }
  3385. return dest;
  3386. }
  3387. /**
  3388. * @fileoverview added by tsickle
  3389. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  3390. */
  3391. /**
  3392. * A strategy for positioning overlays. Using this strategy, an overlay is given an
  3393. * implicit position relative to some origin element. The relative position is defined in terms of
  3394. * a point on the origin element that is connected to a point on the overlay element. For example,
  3395. * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner
  3396. * of the overlay.
  3397. * @deprecated Use `FlexibleConnectedPositionStrategy` instead.
  3398. * \@breaking-change 8.0.0
  3399. */
  3400. var /**
  3401. * A strategy for positioning overlays. Using this strategy, an overlay is given an
  3402. * implicit position relative to some origin element. The relative position is defined in terms of
  3403. * a point on the origin element that is connected to a point on the overlay element. For example,
  3404. * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner
  3405. * of the overlay.
  3406. * @deprecated Use `FlexibleConnectedPositionStrategy` instead.
  3407. * \@breaking-change 8.0.0
  3408. */
  3409. ConnectedPositionStrategy = /** @class */ (function () {
  3410. function ConnectedPositionStrategy(originPos, overlayPos, connectedTo, viewportRuler, document, platform$$1, overlayContainer) {
  3411. /**
  3412. * Ordered list of preferred positions, from most to least desirable.
  3413. */
  3414. this._preferredPositions = [];
  3415. // Since the `ConnectedPositionStrategy` is deprecated and we don't want to maintain
  3416. // the extra logic, we create an instance of the positioning strategy that has some
  3417. // defaults that make it behave as the old position strategy and to which we'll
  3418. // proxy all of the API calls.
  3419. this._positionStrategy = new FlexibleConnectedPositionStrategy(connectedTo, viewportRuler, document, platform$$1, overlayContainer)
  3420. .withFlexibleDimensions(false)
  3421. .withPush(false)
  3422. .withViewportMargin(0);
  3423. this.withFallbackPosition(originPos, overlayPos);
  3424. }
  3425. Object.defineProperty(ConnectedPositionStrategy.prototype, "_isRtl", {
  3426. /** Whether the we're dealing with an RTL context */
  3427. get: /**
  3428. * Whether the we're dealing with an RTL context
  3429. * @return {?}
  3430. */
  3431. function () {
  3432. return this._overlayRef.getDirection() === 'rtl';
  3433. },
  3434. enumerable: true,
  3435. configurable: true
  3436. });
  3437. Object.defineProperty(ConnectedPositionStrategy.prototype, "onPositionChange", {
  3438. /** Emits an event when the connection point changes. */
  3439. get: /**
  3440. * Emits an event when the connection point changes.
  3441. * @return {?}
  3442. */
  3443. function () {
  3444. return this._positionStrategy.positionChanges;
  3445. },
  3446. enumerable: true,
  3447. configurable: true
  3448. });
  3449. Object.defineProperty(ConnectedPositionStrategy.prototype, "positions", {
  3450. /** Ordered list of preferred positions, from most to least desirable. */
  3451. get: /**
  3452. * Ordered list of preferred positions, from most to least desirable.
  3453. * @return {?}
  3454. */
  3455. function () {
  3456. return this._preferredPositions;
  3457. },
  3458. enumerable: true,
  3459. configurable: true
  3460. });
  3461. /** Attach this position strategy to an overlay. */
  3462. /**
  3463. * Attach this position strategy to an overlay.
  3464. * @param {?} overlayRef
  3465. * @return {?}
  3466. */
  3467. ConnectedPositionStrategy.prototype.attach = /**
  3468. * Attach this position strategy to an overlay.
  3469. * @param {?} overlayRef
  3470. * @return {?}
  3471. */
  3472. function (overlayRef) {
  3473. this._overlayRef = overlayRef;
  3474. this._positionStrategy.attach(overlayRef);
  3475. if (this._direction) {
  3476. overlayRef.setDirection(this._direction);
  3477. this._direction = null;
  3478. }
  3479. };
  3480. /** Disposes all resources used by the position strategy. */
  3481. /**
  3482. * Disposes all resources used by the position strategy.
  3483. * @return {?}
  3484. */
  3485. ConnectedPositionStrategy.prototype.dispose = /**
  3486. * Disposes all resources used by the position strategy.
  3487. * @return {?}
  3488. */
  3489. function () {
  3490. this._positionStrategy.dispose();
  3491. };
  3492. /** @docs-private */
  3493. /**
  3494. * \@docs-private
  3495. * @return {?}
  3496. */
  3497. ConnectedPositionStrategy.prototype.detach = /**
  3498. * \@docs-private
  3499. * @return {?}
  3500. */
  3501. function () {
  3502. this._positionStrategy.detach();
  3503. };
  3504. /**
  3505. * Updates the position of the overlay element, using whichever preferred position relative
  3506. * to the origin fits on-screen.
  3507. * @docs-private
  3508. */
  3509. /**
  3510. * Updates the position of the overlay element, using whichever preferred position relative
  3511. * to the origin fits on-screen.
  3512. * \@docs-private
  3513. * @return {?}
  3514. */
  3515. ConnectedPositionStrategy.prototype.apply = /**
  3516. * Updates the position of the overlay element, using whichever preferred position relative
  3517. * to the origin fits on-screen.
  3518. * \@docs-private
  3519. * @return {?}
  3520. */
  3521. function () {
  3522. this._positionStrategy.apply();
  3523. };
  3524. /**
  3525. * Re-positions the overlay element with the trigger in its last calculated position,
  3526. * even if a position higher in the "preferred positions" list would now fit. This
  3527. * allows one to re-align the panel without changing the orientation of the panel.
  3528. */
  3529. /**
  3530. * Re-positions the overlay element with the trigger in its last calculated position,
  3531. * even if a position higher in the "preferred positions" list would now fit. This
  3532. * allows one to re-align the panel without changing the orientation of the panel.
  3533. * @return {?}
  3534. */
  3535. ConnectedPositionStrategy.prototype.recalculateLastPosition = /**
  3536. * Re-positions the overlay element with the trigger in its last calculated position,
  3537. * even if a position higher in the "preferred positions" list would now fit. This
  3538. * allows one to re-align the panel without changing the orientation of the panel.
  3539. * @return {?}
  3540. */
  3541. function () {
  3542. this._positionStrategy.reapplyLastPosition();
  3543. };
  3544. /**
  3545. * Sets the list of Scrollable containers that host the origin element so that
  3546. * on reposition we can evaluate if it or the overlay has been clipped or outside view. Every
  3547. * Scrollable must be an ancestor element of the strategy's origin element.
  3548. */
  3549. /**
  3550. * Sets the list of Scrollable containers that host the origin element so that
  3551. * on reposition we can evaluate if it or the overlay has been clipped or outside view. Every
  3552. * Scrollable must be an ancestor element of the strategy's origin element.
  3553. * @param {?} scrollables
  3554. * @return {?}
  3555. */
  3556. ConnectedPositionStrategy.prototype.withScrollableContainers = /**
  3557. * Sets the list of Scrollable containers that host the origin element so that
  3558. * on reposition we can evaluate if it or the overlay has been clipped or outside view. Every
  3559. * Scrollable must be an ancestor element of the strategy's origin element.
  3560. * @param {?} scrollables
  3561. * @return {?}
  3562. */
  3563. function (scrollables) {
  3564. this._positionStrategy.withScrollableContainers(scrollables);
  3565. };
  3566. /**
  3567. * Adds a new preferred fallback position.
  3568. * @param originPos
  3569. * @param overlayPos
  3570. */
  3571. /**
  3572. * Adds a new preferred fallback position.
  3573. * @template THIS
  3574. * @this {THIS}
  3575. * @param {?} originPos
  3576. * @param {?} overlayPos
  3577. * @param {?=} offsetX
  3578. * @param {?=} offsetY
  3579. * @return {THIS}
  3580. */
  3581. ConnectedPositionStrategy.prototype.withFallbackPosition = /**
  3582. * Adds a new preferred fallback position.
  3583. * @template THIS
  3584. * @this {THIS}
  3585. * @param {?} originPos
  3586. * @param {?} overlayPos
  3587. * @param {?=} offsetX
  3588. * @param {?=} offsetY
  3589. * @return {THIS}
  3590. */
  3591. function (originPos, overlayPos, offsetX, offsetY) {
  3592. /** @type {?} */
  3593. var position = new ConnectionPositionPair(originPos, overlayPos, offsetX, offsetY);
  3594. (/** @type {?} */ (this))._preferredPositions.push(position);
  3595. (/** @type {?} */ (this))._positionStrategy.withPositions((/** @type {?} */ (this))._preferredPositions);
  3596. return (/** @type {?} */ (this));
  3597. };
  3598. /**
  3599. * Sets the layout direction so the overlay's position can be adjusted to match.
  3600. * @param dir New layout direction.
  3601. */
  3602. /**
  3603. * Sets the layout direction so the overlay's position can be adjusted to match.
  3604. * @template THIS
  3605. * @this {THIS}
  3606. * @param {?} dir New layout direction.
  3607. * @return {THIS}
  3608. */
  3609. ConnectedPositionStrategy.prototype.withDirection = /**
  3610. * Sets the layout direction so the overlay's position can be adjusted to match.
  3611. * @template THIS
  3612. * @this {THIS}
  3613. * @param {?} dir New layout direction.
  3614. * @return {THIS}
  3615. */
  3616. function (dir) {
  3617. // Since the direction might be declared before the strategy is attached,
  3618. // we save the value in a temporary property and we'll transfer it to the
  3619. // overlay ref on attachment.
  3620. if ((/** @type {?} */ (this))._overlayRef) {
  3621. (/** @type {?} */ (this))._overlayRef.setDirection(dir);
  3622. }
  3623. else {
  3624. (/** @type {?} */ (this))._direction = dir;
  3625. }
  3626. return (/** @type {?} */ (this));
  3627. };
  3628. /**
  3629. * Sets an offset for the overlay's connection point on the x-axis
  3630. * @param offset New offset in the X axis.
  3631. */
  3632. /**
  3633. * Sets an offset for the overlay's connection point on the x-axis
  3634. * @template THIS
  3635. * @this {THIS}
  3636. * @param {?} offset New offset in the X axis.
  3637. * @return {THIS}
  3638. */
  3639. ConnectedPositionStrategy.prototype.withOffsetX = /**
  3640. * Sets an offset for the overlay's connection point on the x-axis
  3641. * @template THIS
  3642. * @this {THIS}
  3643. * @param {?} offset New offset in the X axis.
  3644. * @return {THIS}
  3645. */
  3646. function (offset) {
  3647. (/** @type {?} */ (this))._positionStrategy.withDefaultOffsetX(offset);
  3648. return (/** @type {?} */ (this));
  3649. };
  3650. /**
  3651. * Sets an offset for the overlay's connection point on the y-axis
  3652. * @param offset New offset in the Y axis.
  3653. */
  3654. /**
  3655. * Sets an offset for the overlay's connection point on the y-axis
  3656. * @template THIS
  3657. * @this {THIS}
  3658. * @param {?} offset New offset in the Y axis.
  3659. * @return {THIS}
  3660. */
  3661. ConnectedPositionStrategy.prototype.withOffsetY = /**
  3662. * Sets an offset for the overlay's connection point on the y-axis
  3663. * @template THIS
  3664. * @this {THIS}
  3665. * @param {?} offset New offset in the Y axis.
  3666. * @return {THIS}
  3667. */
  3668. function (offset) {
  3669. (/** @type {?} */ (this))._positionStrategy.withDefaultOffsetY(offset);
  3670. return (/** @type {?} */ (this));
  3671. };
  3672. /**
  3673. * Sets whether the overlay's position should be locked in after it is positioned
  3674. * initially. When an overlay is locked in, it won't attempt to reposition itself
  3675. * when the position is re-applied (e.g. when the user scrolls away).
  3676. * @param isLocked Whether the overlay should locked in.
  3677. */
  3678. /**
  3679. * Sets whether the overlay's position should be locked in after it is positioned
  3680. * initially. When an overlay is locked in, it won't attempt to reposition itself
  3681. * when the position is re-applied (e.g. when the user scrolls away).
  3682. * @template THIS
  3683. * @this {THIS}
  3684. * @param {?} isLocked Whether the overlay should locked in.
  3685. * @return {THIS}
  3686. */
  3687. ConnectedPositionStrategy.prototype.withLockedPosition = /**
  3688. * Sets whether the overlay's position should be locked in after it is positioned
  3689. * initially. When an overlay is locked in, it won't attempt to reposition itself
  3690. * when the position is re-applied (e.g. when the user scrolls away).
  3691. * @template THIS
  3692. * @this {THIS}
  3693. * @param {?} isLocked Whether the overlay should locked in.
  3694. * @return {THIS}
  3695. */
  3696. function (isLocked) {
  3697. (/** @type {?} */ (this))._positionStrategy.withLockedPosition(isLocked);
  3698. return (/** @type {?} */ (this));
  3699. };
  3700. /**
  3701. * Overwrites the current set of positions with an array of new ones.
  3702. * @param positions Position pairs to be set on the strategy.
  3703. */
  3704. /**
  3705. * Overwrites the current set of positions with an array of new ones.
  3706. * @template THIS
  3707. * @this {THIS}
  3708. * @param {?} positions Position pairs to be set on the strategy.
  3709. * @return {THIS}
  3710. */
  3711. ConnectedPositionStrategy.prototype.withPositions = /**
  3712. * Overwrites the current set of positions with an array of new ones.
  3713. * @template THIS
  3714. * @this {THIS}
  3715. * @param {?} positions Position pairs to be set on the strategy.
  3716. * @return {THIS}
  3717. */
  3718. function (positions) {
  3719. (/** @type {?} */ (this))._preferredPositions = positions.slice();
  3720. (/** @type {?} */ (this))._positionStrategy.withPositions((/** @type {?} */ (this))._preferredPositions);
  3721. return (/** @type {?} */ (this));
  3722. };
  3723. /**
  3724. * Sets the origin element, relative to which to position the overlay.
  3725. * @param origin Reference to the new origin element.
  3726. */
  3727. /**
  3728. * Sets the origin element, relative to which to position the overlay.
  3729. * @template THIS
  3730. * @this {THIS}
  3731. * @param {?} origin Reference to the new origin element.
  3732. * @return {THIS}
  3733. */
  3734. ConnectedPositionStrategy.prototype.setOrigin = /**
  3735. * Sets the origin element, relative to which to position the overlay.
  3736. * @template THIS
  3737. * @this {THIS}
  3738. * @param {?} origin Reference to the new origin element.
  3739. * @return {THIS}
  3740. */
  3741. function (origin) {
  3742. (/** @type {?} */ (this))._positionStrategy.setOrigin(origin);
  3743. return (/** @type {?} */ (this));
  3744. };
  3745. return ConnectedPositionStrategy;
  3746. }());
  3747. /**
  3748. * @fileoverview added by tsickle
  3749. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  3750. */
  3751. /**
  3752. * Class to be added to the overlay pane wrapper.
  3753. * @type {?}
  3754. */
  3755. var wrapperClass = 'cdk-global-overlay-wrapper';
  3756. /**
  3757. * A strategy for positioning overlays. Using this strategy, an overlay is given an
  3758. * explicit position relative to the browser's viewport. We use flexbox, instead of
  3759. * transforms, in order to avoid issues with subpixel rendering which can cause the
  3760. * element to become blurry.
  3761. */
  3762. var /**
  3763. * A strategy for positioning overlays. Using this strategy, an overlay is given an
  3764. * explicit position relative to the browser's viewport. We use flexbox, instead of
  3765. * transforms, in order to avoid issues with subpixel rendering which can cause the
  3766. * element to become blurry.
  3767. */
  3768. GlobalPositionStrategy = /** @class */ (function () {
  3769. function GlobalPositionStrategy() {
  3770. this._cssPosition = 'static';
  3771. this._topOffset = '';
  3772. this._bottomOffset = '';
  3773. this._leftOffset = '';
  3774. this._rightOffset = '';
  3775. this._alignItems = '';
  3776. this._justifyContent = '';
  3777. this._width = '';
  3778. this._height = '';
  3779. }
  3780. /**
  3781. * @param {?} overlayRef
  3782. * @return {?}
  3783. */
  3784. GlobalPositionStrategy.prototype.attach = /**
  3785. * @param {?} overlayRef
  3786. * @return {?}
  3787. */
  3788. function (overlayRef) {
  3789. /** @type {?} */
  3790. var config = overlayRef.getConfig();
  3791. this._overlayRef = overlayRef;
  3792. if (this._width && !config.width) {
  3793. overlayRef.updateSize({ width: this._width });
  3794. }
  3795. if (this._height && !config.height) {
  3796. overlayRef.updateSize({ height: this._height });
  3797. }
  3798. overlayRef.hostElement.classList.add(wrapperClass);
  3799. this._isDisposed = false;
  3800. };
  3801. /**
  3802. * Sets the top position of the overlay. Clears any previously set vertical position.
  3803. * @param value New top offset.
  3804. */
  3805. /**
  3806. * Sets the top position of the overlay. Clears any previously set vertical position.
  3807. * @template THIS
  3808. * @this {THIS}
  3809. * @param {?=} value New top offset.
  3810. * @return {THIS}
  3811. */
  3812. GlobalPositionStrategy.prototype.top = /**
  3813. * Sets the top position of the overlay. Clears any previously set vertical position.
  3814. * @template THIS
  3815. * @this {THIS}
  3816. * @param {?=} value New top offset.
  3817. * @return {THIS}
  3818. */
  3819. function (value) {
  3820. if (value === void 0) { value = ''; }
  3821. (/** @type {?} */ (this))._bottomOffset = '';
  3822. (/** @type {?} */ (this))._topOffset = value;
  3823. (/** @type {?} */ (this))._alignItems = 'flex-start';
  3824. return (/** @type {?} */ (this));
  3825. };
  3826. /**
  3827. * Sets the left position of the overlay. Clears any previously set horizontal position.
  3828. * @param value New left offset.
  3829. */
  3830. /**
  3831. * Sets the left position of the overlay. Clears any previously set horizontal position.
  3832. * @template THIS
  3833. * @this {THIS}
  3834. * @param {?=} value New left offset.
  3835. * @return {THIS}
  3836. */
  3837. GlobalPositionStrategy.prototype.left = /**
  3838. * Sets the left position of the overlay. Clears any previously set horizontal position.
  3839. * @template THIS
  3840. * @this {THIS}
  3841. * @param {?=} value New left offset.
  3842. * @return {THIS}
  3843. */
  3844. function (value) {
  3845. if (value === void 0) { value = ''; }
  3846. (/** @type {?} */ (this))._rightOffset = '';
  3847. (/** @type {?} */ (this))._leftOffset = value;
  3848. (/** @type {?} */ (this))._justifyContent = 'flex-start';
  3849. return (/** @type {?} */ (this));
  3850. };
  3851. /**
  3852. * Sets the bottom position of the overlay. Clears any previously set vertical position.
  3853. * @param value New bottom offset.
  3854. */
  3855. /**
  3856. * Sets the bottom position of the overlay. Clears any previously set vertical position.
  3857. * @template THIS
  3858. * @this {THIS}
  3859. * @param {?=} value New bottom offset.
  3860. * @return {THIS}
  3861. */
  3862. GlobalPositionStrategy.prototype.bottom = /**
  3863. * Sets the bottom position of the overlay. Clears any previously set vertical position.
  3864. * @template THIS
  3865. * @this {THIS}
  3866. * @param {?=} value New bottom offset.
  3867. * @return {THIS}
  3868. */
  3869. function (value) {
  3870. if (value === void 0) { value = ''; }
  3871. (/** @type {?} */ (this))._topOffset = '';
  3872. (/** @type {?} */ (this))._bottomOffset = value;
  3873. (/** @type {?} */ (this))._alignItems = 'flex-end';
  3874. return (/** @type {?} */ (this));
  3875. };
  3876. /**
  3877. * Sets the right position of the overlay. Clears any previously set horizontal position.
  3878. * @param value New right offset.
  3879. */
  3880. /**
  3881. * Sets the right position of the overlay. Clears any previously set horizontal position.
  3882. * @template THIS
  3883. * @this {THIS}
  3884. * @param {?=} value New right offset.
  3885. * @return {THIS}
  3886. */
  3887. GlobalPositionStrategy.prototype.right = /**
  3888. * Sets the right position of the overlay. Clears any previously set horizontal position.
  3889. * @template THIS
  3890. * @this {THIS}
  3891. * @param {?=} value New right offset.
  3892. * @return {THIS}
  3893. */
  3894. function (value) {
  3895. if (value === void 0) { value = ''; }
  3896. (/** @type {?} */ (this))._leftOffset = '';
  3897. (/** @type {?} */ (this))._rightOffset = value;
  3898. (/** @type {?} */ (this))._justifyContent = 'flex-end';
  3899. return (/** @type {?} */ (this));
  3900. };
  3901. /**
  3902. * Sets the overlay width and clears any previously set width.
  3903. * @param value New width for the overlay
  3904. * @deprecated Pass the `width` through the `OverlayConfig`.
  3905. * @breaking-change 8.0.0
  3906. */
  3907. /**
  3908. * Sets the overlay width and clears any previously set width.
  3909. * @deprecated Pass the `width` through the `OverlayConfig`.
  3910. * \@breaking-change 8.0.0
  3911. * @template THIS
  3912. * @this {THIS}
  3913. * @param {?=} value New width for the overlay
  3914. * @return {THIS}
  3915. */
  3916. GlobalPositionStrategy.prototype.width = /**
  3917. * Sets the overlay width and clears any previously set width.
  3918. * @deprecated Pass the `width` through the `OverlayConfig`.
  3919. * \@breaking-change 8.0.0
  3920. * @template THIS
  3921. * @this {THIS}
  3922. * @param {?=} value New width for the overlay
  3923. * @return {THIS}
  3924. */
  3925. function (value) {
  3926. if (value === void 0) { value = ''; }
  3927. if ((/** @type {?} */ (this))._overlayRef) {
  3928. (/** @type {?} */ (this))._overlayRef.updateSize({ width: value });
  3929. }
  3930. else {
  3931. (/** @type {?} */ (this))._width = value;
  3932. }
  3933. return (/** @type {?} */ (this));
  3934. };
  3935. /**
  3936. * Sets the overlay height and clears any previously set height.
  3937. * @param value New height for the overlay
  3938. * @deprecated Pass the `height` through the `OverlayConfig`.
  3939. * @breaking-change 8.0.0
  3940. */
  3941. /**
  3942. * Sets the overlay height and clears any previously set height.
  3943. * @deprecated Pass the `height` through the `OverlayConfig`.
  3944. * \@breaking-change 8.0.0
  3945. * @template THIS
  3946. * @this {THIS}
  3947. * @param {?=} value New height for the overlay
  3948. * @return {THIS}
  3949. */
  3950. GlobalPositionStrategy.prototype.height = /**
  3951. * Sets the overlay height and clears any previously set height.
  3952. * @deprecated Pass the `height` through the `OverlayConfig`.
  3953. * \@breaking-change 8.0.0
  3954. * @template THIS
  3955. * @this {THIS}
  3956. * @param {?=} value New height for the overlay
  3957. * @return {THIS}
  3958. */
  3959. function (value) {
  3960. if (value === void 0) { value = ''; }
  3961. if ((/** @type {?} */ (this))._overlayRef) {
  3962. (/** @type {?} */ (this))._overlayRef.updateSize({ height: value });
  3963. }
  3964. else {
  3965. (/** @type {?} */ (this))._height = value;
  3966. }
  3967. return (/** @type {?} */ (this));
  3968. };
  3969. /**
  3970. * Centers the overlay horizontally with an optional offset.
  3971. * Clears any previously set horizontal position.
  3972. *
  3973. * @param offset Overlay offset from the horizontal center.
  3974. */
  3975. /**
  3976. * Centers the overlay horizontally with an optional offset.
  3977. * Clears any previously set horizontal position.
  3978. *
  3979. * @template THIS
  3980. * @this {THIS}
  3981. * @param {?=} offset Overlay offset from the horizontal center.
  3982. * @return {THIS}
  3983. */
  3984. GlobalPositionStrategy.prototype.centerHorizontally = /**
  3985. * Centers the overlay horizontally with an optional offset.
  3986. * Clears any previously set horizontal position.
  3987. *
  3988. * @template THIS
  3989. * @this {THIS}
  3990. * @param {?=} offset Overlay offset from the horizontal center.
  3991. * @return {THIS}
  3992. */
  3993. function (offset) {
  3994. if (offset === void 0) { offset = ''; }
  3995. (/** @type {?} */ (this)).left(offset);
  3996. (/** @type {?} */ (this))._justifyContent = 'center';
  3997. return (/** @type {?} */ (this));
  3998. };
  3999. /**
  4000. * Centers the overlay vertically with an optional offset.
  4001. * Clears any previously set vertical position.
  4002. *
  4003. * @param offset Overlay offset from the vertical center.
  4004. */
  4005. /**
  4006. * Centers the overlay vertically with an optional offset.
  4007. * Clears any previously set vertical position.
  4008. *
  4009. * @template THIS
  4010. * @this {THIS}
  4011. * @param {?=} offset Overlay offset from the vertical center.
  4012. * @return {THIS}
  4013. */
  4014. GlobalPositionStrategy.prototype.centerVertically = /**
  4015. * Centers the overlay vertically with an optional offset.
  4016. * Clears any previously set vertical position.
  4017. *
  4018. * @template THIS
  4019. * @this {THIS}
  4020. * @param {?=} offset Overlay offset from the vertical center.
  4021. * @return {THIS}
  4022. */
  4023. function (offset) {
  4024. if (offset === void 0) { offset = ''; }
  4025. (/** @type {?} */ (this)).top(offset);
  4026. (/** @type {?} */ (this))._alignItems = 'center';
  4027. return (/** @type {?} */ (this));
  4028. };
  4029. /**
  4030. * Apply the position to the element.
  4031. * @docs-private
  4032. */
  4033. /**
  4034. * Apply the position to the element.
  4035. * \@docs-private
  4036. * @return {?}
  4037. */
  4038. GlobalPositionStrategy.prototype.apply = /**
  4039. * Apply the position to the element.
  4040. * \@docs-private
  4041. * @return {?}
  4042. */
  4043. function () {
  4044. // Since the overlay ref applies the strategy asynchronously, it could
  4045. // have been disposed before it ends up being applied. If that is the
  4046. // case, we shouldn't do anything.
  4047. if (!this._overlayRef || !this._overlayRef.hasAttached()) {
  4048. return;
  4049. }
  4050. /** @type {?} */
  4051. var styles = this._overlayRef.overlayElement.style;
  4052. /** @type {?} */
  4053. var parentStyles = this._overlayRef.hostElement.style;
  4054. /** @type {?} */
  4055. var config = this._overlayRef.getConfig();
  4056. styles.position = this._cssPosition;
  4057. styles.marginLeft = config.width === '100%' ? '0' : this._leftOffset;
  4058. styles.marginTop = config.height === '100%' ? '0' : this._topOffset;
  4059. styles.marginBottom = this._bottomOffset;
  4060. styles.marginRight = this._rightOffset;
  4061. if (config.width === '100%') {
  4062. parentStyles.justifyContent = 'flex-start';
  4063. }
  4064. else if (this._justifyContent === 'center') {
  4065. parentStyles.justifyContent = 'center';
  4066. }
  4067. else if (this._overlayRef.getConfig().direction === 'rtl') {
  4068. // In RTL the browser will invert `flex-start` and `flex-end` automatically, but we
  4069. // don't want that because our positioning is explicitly `left` and `right`, hence
  4070. // why we do another inversion to ensure that the overlay stays in the same position.
  4071. // TODO: reconsider this if we add `start` and `end` methods.
  4072. if (this._justifyContent === 'flex-start') {
  4073. parentStyles.justifyContent = 'flex-end';
  4074. }
  4075. else if (this._justifyContent === 'flex-end') {
  4076. parentStyles.justifyContent = 'flex-start';
  4077. }
  4078. }
  4079. else {
  4080. parentStyles.justifyContent = this._justifyContent;
  4081. }
  4082. parentStyles.alignItems = config.height === '100%' ? 'flex-start' : this._alignItems;
  4083. };
  4084. /**
  4085. * Cleans up the DOM changes from the position strategy.
  4086. * @docs-private
  4087. */
  4088. /**
  4089. * Cleans up the DOM changes from the position strategy.
  4090. * \@docs-private
  4091. * @return {?}
  4092. */
  4093. GlobalPositionStrategy.prototype.dispose = /**
  4094. * Cleans up the DOM changes from the position strategy.
  4095. * \@docs-private
  4096. * @return {?}
  4097. */
  4098. function () {
  4099. if (this._isDisposed || !this._overlayRef) {
  4100. return;
  4101. }
  4102. /** @type {?} */
  4103. var styles = this._overlayRef.overlayElement.style;
  4104. /** @type {?} */
  4105. var parent = this._overlayRef.hostElement;
  4106. /** @type {?} */
  4107. var parentStyles = parent.style;
  4108. parent.classList.remove(wrapperClass);
  4109. parentStyles.justifyContent = parentStyles.alignItems = styles.marginTop =
  4110. styles.marginBottom = styles.marginLeft = styles.marginRight = styles.position = '';
  4111. this._overlayRef = (/** @type {?} */ (null));
  4112. this._isDisposed = true;
  4113. };
  4114. return GlobalPositionStrategy;
  4115. }());
  4116. /**
  4117. * @fileoverview added by tsickle
  4118. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  4119. */
  4120. /**
  4121. * Builder for overlay position strategy.
  4122. */
  4123. var OverlayPositionBuilder = /** @class */ (function () {
  4124. function OverlayPositionBuilder(_viewportRuler, _document, _platform, _overlayContainer) {
  4125. this._viewportRuler = _viewportRuler;
  4126. this._document = _document;
  4127. this._platform = _platform;
  4128. this._overlayContainer = _overlayContainer;
  4129. }
  4130. /**
  4131. * Creates a global position strategy.
  4132. */
  4133. /**
  4134. * Creates a global position strategy.
  4135. * @return {?}
  4136. */
  4137. OverlayPositionBuilder.prototype.global = /**
  4138. * Creates a global position strategy.
  4139. * @return {?}
  4140. */
  4141. function () {
  4142. return new GlobalPositionStrategy();
  4143. };
  4144. /**
  4145. * Creates a relative position strategy.
  4146. * @param elementRef
  4147. * @param originPos
  4148. * @param overlayPos
  4149. * @deprecated Use `flexibleConnectedTo` instead.
  4150. * @breaking-change 8.0.0
  4151. */
  4152. /**
  4153. * Creates a relative position strategy.
  4154. * @deprecated Use `flexibleConnectedTo` instead.
  4155. * \@breaking-change 8.0.0
  4156. * @param {?} elementRef
  4157. * @param {?} originPos
  4158. * @param {?} overlayPos
  4159. * @return {?}
  4160. */
  4161. OverlayPositionBuilder.prototype.connectedTo = /**
  4162. * Creates a relative position strategy.
  4163. * @deprecated Use `flexibleConnectedTo` instead.
  4164. * \@breaking-change 8.0.0
  4165. * @param {?} elementRef
  4166. * @param {?} originPos
  4167. * @param {?} overlayPos
  4168. * @return {?}
  4169. */
  4170. function (elementRef, originPos, overlayPos) {
  4171. return new ConnectedPositionStrategy(originPos, overlayPos, elementRef, this._viewportRuler, this._document, this._platform, this._overlayContainer);
  4172. };
  4173. /**
  4174. * Creates a flexible position strategy.
  4175. * @param origin Origin relative to which to position the overlay.
  4176. */
  4177. /**
  4178. * Creates a flexible position strategy.
  4179. * @param {?} origin Origin relative to which to position the overlay.
  4180. * @return {?}
  4181. */
  4182. OverlayPositionBuilder.prototype.flexibleConnectedTo = /**
  4183. * Creates a flexible position strategy.
  4184. * @param {?} origin Origin relative to which to position the overlay.
  4185. * @return {?}
  4186. */
  4187. function (origin) {
  4188. return new FlexibleConnectedPositionStrategy(origin, this._viewportRuler, this._document, this._platform, this._overlayContainer);
  4189. };
  4190. OverlayPositionBuilder.decorators = [
  4191. { type: core.Injectable, args: [{ providedIn: 'root' },] },
  4192. ];
  4193. /** @nocollapse */
  4194. OverlayPositionBuilder.ctorParameters = function () { return [
  4195. { type: scrolling.ViewportRuler },
  4196. { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] },
  4197. { type: platform.Platform },
  4198. { type: OverlayContainer }
  4199. ]; };
  4200. /** @nocollapse */ OverlayPositionBuilder.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function OverlayPositionBuilder_Factory() { return new OverlayPositionBuilder(core.ɵɵinject(scrolling.ViewportRuler), core.ɵɵinject(common.DOCUMENT), core.ɵɵinject(platform.Platform), core.ɵɵinject(OverlayContainer)); }, token: OverlayPositionBuilder, providedIn: "root" });
  4201. return OverlayPositionBuilder;
  4202. }());
  4203. /**
  4204. * @fileoverview added by tsickle
  4205. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  4206. */
  4207. /**
  4208. * Next overlay unique ID.
  4209. * @type {?}
  4210. */
  4211. var nextUniqueId = 0;
  4212. // Note that Overlay is *not* scoped to the app root because the ComponentFactoryResolver
  4213. // it needs is different based on where OverlayModule is imported.
  4214. /**
  4215. * Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be
  4216. * used as a low-level building block for other components. Dialogs, tooltips, menus,
  4217. * selects, etc. can all be built using overlays. The service should primarily be used by authors
  4218. * of re-usable components rather than developers building end-user applications.
  4219. *
  4220. * An overlay *is* a PortalOutlet, so any kind of Portal can be loaded into one.
  4221. */
  4222. var Overlay = /** @class */ (function () {
  4223. function Overlay(scrollStrategies, _overlayContainer, _componentFactoryResolver, _positionBuilder, _keyboardDispatcher, _injector, _ngZone, _document, _directionality, _location) {
  4224. this.scrollStrategies = scrollStrategies;
  4225. this._overlayContainer = _overlayContainer;
  4226. this._componentFactoryResolver = _componentFactoryResolver;
  4227. this._positionBuilder = _positionBuilder;
  4228. this._keyboardDispatcher = _keyboardDispatcher;
  4229. this._injector = _injector;
  4230. this._ngZone = _ngZone;
  4231. this._document = _document;
  4232. this._directionality = _directionality;
  4233. this._location = _location;
  4234. }
  4235. /**
  4236. * Creates an overlay.
  4237. * @param config Configuration applied to the overlay.
  4238. * @returns Reference to the created overlay.
  4239. */
  4240. /**
  4241. * Creates an overlay.
  4242. * @param {?=} config Configuration applied to the overlay.
  4243. * @return {?} Reference to the created overlay.
  4244. */
  4245. Overlay.prototype.create = /**
  4246. * Creates an overlay.
  4247. * @param {?=} config Configuration applied to the overlay.
  4248. * @return {?} Reference to the created overlay.
  4249. */
  4250. function (config) {
  4251. /** @type {?} */
  4252. var host = this._createHostElement();
  4253. /** @type {?} */
  4254. var pane = this._createPaneElement(host);
  4255. /** @type {?} */
  4256. var portalOutlet = this._createPortalOutlet(pane);
  4257. /** @type {?} */
  4258. var overlayConfig = new OverlayConfig(config);
  4259. overlayConfig.direction = overlayConfig.direction || this._directionality.value;
  4260. return new OverlayRef(portalOutlet, host, pane, overlayConfig, this._ngZone, this._keyboardDispatcher, this._document, this._location);
  4261. };
  4262. /**
  4263. * Gets a position builder that can be used, via fluent API,
  4264. * to construct and configure a position strategy.
  4265. * @returns An overlay position builder.
  4266. */
  4267. /**
  4268. * Gets a position builder that can be used, via fluent API,
  4269. * to construct and configure a position strategy.
  4270. * @return {?} An overlay position builder.
  4271. */
  4272. Overlay.prototype.position = /**
  4273. * Gets a position builder that can be used, via fluent API,
  4274. * to construct and configure a position strategy.
  4275. * @return {?} An overlay position builder.
  4276. */
  4277. function () {
  4278. return this._positionBuilder;
  4279. };
  4280. /**
  4281. * Creates the DOM element for an overlay and appends it to the overlay container.
  4282. * @returns Newly-created pane element
  4283. */
  4284. /**
  4285. * Creates the DOM element for an overlay and appends it to the overlay container.
  4286. * @private
  4287. * @param {?} host
  4288. * @return {?} Newly-created pane element
  4289. */
  4290. Overlay.prototype._createPaneElement = /**
  4291. * Creates the DOM element for an overlay and appends it to the overlay container.
  4292. * @private
  4293. * @param {?} host
  4294. * @return {?} Newly-created pane element
  4295. */
  4296. function (host) {
  4297. /** @type {?} */
  4298. var pane = this._document.createElement('div');
  4299. pane.id = "cdk-overlay-" + nextUniqueId++;
  4300. pane.classList.add('cdk-overlay-pane');
  4301. host.appendChild(pane);
  4302. return pane;
  4303. };
  4304. /**
  4305. * Creates the host element that wraps around an overlay
  4306. * and can be used for advanced positioning.
  4307. * @returns Newly-create host element.
  4308. */
  4309. /**
  4310. * Creates the host element that wraps around an overlay
  4311. * and can be used for advanced positioning.
  4312. * @private
  4313. * @return {?} Newly-create host element.
  4314. */
  4315. Overlay.prototype._createHostElement = /**
  4316. * Creates the host element that wraps around an overlay
  4317. * and can be used for advanced positioning.
  4318. * @private
  4319. * @return {?} Newly-create host element.
  4320. */
  4321. function () {
  4322. /** @type {?} */
  4323. var host = this._document.createElement('div');
  4324. this._overlayContainer.getContainerElement().appendChild(host);
  4325. return host;
  4326. };
  4327. /**
  4328. * Create a DomPortalOutlet into which the overlay content can be loaded.
  4329. * @param pane The DOM element to turn into a portal outlet.
  4330. * @returns A portal outlet for the given DOM element.
  4331. */
  4332. /**
  4333. * Create a DomPortalOutlet into which the overlay content can be loaded.
  4334. * @private
  4335. * @param {?} pane The DOM element to turn into a portal outlet.
  4336. * @return {?} A portal outlet for the given DOM element.
  4337. */
  4338. Overlay.prototype._createPortalOutlet = /**
  4339. * Create a DomPortalOutlet into which the overlay content can be loaded.
  4340. * @private
  4341. * @param {?} pane The DOM element to turn into a portal outlet.
  4342. * @return {?} A portal outlet for the given DOM element.
  4343. */
  4344. function (pane) {
  4345. // We have to resolve the ApplicationRef later in order to allow people
  4346. // to use overlay-based providers during app initialization.
  4347. if (!this._appRef) {
  4348. this._appRef = this._injector.get(core.ApplicationRef);
  4349. }
  4350. return new portal.DomPortalOutlet(pane, this._componentFactoryResolver, this._appRef, this._injector);
  4351. };
  4352. Overlay.decorators = [
  4353. { type: core.Injectable },
  4354. ];
  4355. /** @nocollapse */
  4356. Overlay.ctorParameters = function () { return [
  4357. { type: ScrollStrategyOptions },
  4358. { type: OverlayContainer },
  4359. { type: core.ComponentFactoryResolver },
  4360. { type: OverlayPositionBuilder },
  4361. { type: OverlayKeyboardDispatcher },
  4362. { type: core.Injector },
  4363. { type: core.NgZone },
  4364. { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] },
  4365. { type: bidi.Directionality },
  4366. { type: common.Location, decorators: [{ type: core.Optional }] }
  4367. ]; };
  4368. return Overlay;
  4369. }());
  4370. /**
  4371. * @fileoverview added by tsickle
  4372. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  4373. */
  4374. /**
  4375. * Default set of positions for the overlay. Follows the behavior of a dropdown.
  4376. * @type {?}
  4377. */
  4378. var defaultPositionList = [
  4379. {
  4380. originX: 'start',
  4381. originY: 'bottom',
  4382. overlayX: 'start',
  4383. overlayY: 'top'
  4384. },
  4385. {
  4386. originX: 'start',
  4387. originY: 'top',
  4388. overlayX: 'start',
  4389. overlayY: 'bottom'
  4390. },
  4391. {
  4392. originX: 'end',
  4393. originY: 'top',
  4394. overlayX: 'end',
  4395. overlayY: 'bottom'
  4396. },
  4397. {
  4398. originX: 'end',
  4399. originY: 'bottom',
  4400. overlayX: 'end',
  4401. overlayY: 'top'
  4402. }
  4403. ];
  4404. /**
  4405. * Injection token that determines the scroll handling while the connected overlay is open.
  4406. * @type {?}
  4407. */
  4408. var CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY = new core.InjectionToken('cdk-connected-overlay-scroll-strategy');
  4409. /**
  4410. * Directive applied to an element to make it usable as an origin for an Overlay using a
  4411. * ConnectedPositionStrategy.
  4412. */
  4413. var CdkOverlayOrigin = /** @class */ (function () {
  4414. function CdkOverlayOrigin(elementRef) {
  4415. this.elementRef = elementRef;
  4416. }
  4417. CdkOverlayOrigin.decorators = [
  4418. { type: core.Directive, args: [{
  4419. selector: '[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]',
  4420. exportAs: 'cdkOverlayOrigin',
  4421. },] },
  4422. ];
  4423. /** @nocollapse */
  4424. CdkOverlayOrigin.ctorParameters = function () { return [
  4425. { type: core.ElementRef }
  4426. ]; };
  4427. return CdkOverlayOrigin;
  4428. }());
  4429. /**
  4430. * Directive to facilitate declarative creation of an
  4431. * Overlay using a FlexibleConnectedPositionStrategy.
  4432. */
  4433. var CdkConnectedOverlay = /** @class */ (function () {
  4434. // TODO(jelbourn): inputs for size, scroll behavior, animation, etc.
  4435. function CdkConnectedOverlay(_overlay, templateRef, viewContainerRef, scrollStrategyFactory, _dir) {
  4436. this._overlay = _overlay;
  4437. this._dir = _dir;
  4438. this._hasBackdrop = false;
  4439. this._lockPosition = false;
  4440. this._growAfterOpen = false;
  4441. this._flexibleDimensions = false;
  4442. this._push = false;
  4443. this._backdropSubscription = rxjs.Subscription.EMPTY;
  4444. /**
  4445. * Margin between the overlay and the viewport edges.
  4446. */
  4447. this.viewportMargin = 0;
  4448. /**
  4449. * Whether the overlay is open.
  4450. */
  4451. this.open = false;
  4452. /**
  4453. * Event emitted when the backdrop is clicked.
  4454. */
  4455. this.backdropClick = new core.EventEmitter();
  4456. /**
  4457. * Event emitted when the position has changed.
  4458. */
  4459. this.positionChange = new core.EventEmitter();
  4460. /**
  4461. * Event emitted when the overlay has been attached.
  4462. */
  4463. this.attach = new core.EventEmitter();
  4464. /**
  4465. * Event emitted when the overlay has been detached.
  4466. */
  4467. this.detach = new core.EventEmitter();
  4468. /**
  4469. * Emits when there are keyboard events that are targeted at the overlay.
  4470. */
  4471. this.overlayKeydown = new core.EventEmitter();
  4472. this._templatePortal = new portal.TemplatePortal(templateRef, viewContainerRef);
  4473. this._scrollStrategyFactory = scrollStrategyFactory;
  4474. this.scrollStrategy = this._scrollStrategyFactory();
  4475. }
  4476. Object.defineProperty(CdkConnectedOverlay.prototype, "offsetX", {
  4477. /** The offset in pixels for the overlay connection point on the x-axis */
  4478. get: /**
  4479. * The offset in pixels for the overlay connection point on the x-axis
  4480. * @return {?}
  4481. */
  4482. function () { return this._offsetX; },
  4483. set: /**
  4484. * @param {?} offsetX
  4485. * @return {?}
  4486. */
  4487. function (offsetX) {
  4488. this._offsetX = offsetX;
  4489. if (this._position) {
  4490. this._updatePositionStrategy(this._position);
  4491. }
  4492. },
  4493. enumerable: true,
  4494. configurable: true
  4495. });
  4496. Object.defineProperty(CdkConnectedOverlay.prototype, "offsetY", {
  4497. /** The offset in pixels for the overlay connection point on the y-axis */
  4498. get: /**
  4499. * The offset in pixels for the overlay connection point on the y-axis
  4500. * @return {?}
  4501. */
  4502. function () { return this._offsetY; },
  4503. set: /**
  4504. * @param {?} offsetY
  4505. * @return {?}
  4506. */
  4507. function (offsetY) {
  4508. this._offsetY = offsetY;
  4509. if (this._position) {
  4510. this._updatePositionStrategy(this._position);
  4511. }
  4512. },
  4513. enumerable: true,
  4514. configurable: true
  4515. });
  4516. Object.defineProperty(CdkConnectedOverlay.prototype, "hasBackdrop", {
  4517. /** Whether or not the overlay should attach a backdrop. */
  4518. get: /**
  4519. * Whether or not the overlay should attach a backdrop.
  4520. * @return {?}
  4521. */
  4522. function () { return this._hasBackdrop; },
  4523. set: /**
  4524. * @param {?} value
  4525. * @return {?}
  4526. */
  4527. function (value) { this._hasBackdrop = coercion.coerceBooleanProperty(value); },
  4528. enumerable: true,
  4529. configurable: true
  4530. });
  4531. Object.defineProperty(CdkConnectedOverlay.prototype, "lockPosition", {
  4532. /** Whether or not the overlay should be locked when scrolling. */
  4533. get: /**
  4534. * Whether or not the overlay should be locked when scrolling.
  4535. * @return {?}
  4536. */
  4537. function () { return this._lockPosition; },
  4538. set: /**
  4539. * @param {?} value
  4540. * @return {?}
  4541. */
  4542. function (value) { this._lockPosition = coercion.coerceBooleanProperty(value); },
  4543. enumerable: true,
  4544. configurable: true
  4545. });
  4546. Object.defineProperty(CdkConnectedOverlay.prototype, "flexibleDimensions", {
  4547. /** Whether the overlay's width and height can be constrained to fit within the viewport. */
  4548. get: /**
  4549. * Whether the overlay's width and height can be constrained to fit within the viewport.
  4550. * @return {?}
  4551. */
  4552. function () { return this._flexibleDimensions; },
  4553. set: /**
  4554. * @param {?} value
  4555. * @return {?}
  4556. */
  4557. function (value) {
  4558. this._flexibleDimensions = coercion.coerceBooleanProperty(value);
  4559. },
  4560. enumerable: true,
  4561. configurable: true
  4562. });
  4563. Object.defineProperty(CdkConnectedOverlay.prototype, "growAfterOpen", {
  4564. /** Whether the overlay can grow after the initial open when flexible positioning is turned on. */
  4565. get: /**
  4566. * Whether the overlay can grow after the initial open when flexible positioning is turned on.
  4567. * @return {?}
  4568. */
  4569. function () { return this._growAfterOpen; },
  4570. set: /**
  4571. * @param {?} value
  4572. * @return {?}
  4573. */
  4574. function (value) { this._growAfterOpen = coercion.coerceBooleanProperty(value); },
  4575. enumerable: true,
  4576. configurable: true
  4577. });
  4578. Object.defineProperty(CdkConnectedOverlay.prototype, "push", {
  4579. /** Whether the overlay can be pushed on-screen if none of the provided positions fit. */
  4580. get: /**
  4581. * Whether the overlay can be pushed on-screen if none of the provided positions fit.
  4582. * @return {?}
  4583. */
  4584. function () { return this._push; },
  4585. set: /**
  4586. * @param {?} value
  4587. * @return {?}
  4588. */
  4589. function (value) { this._push = coercion.coerceBooleanProperty(value); },
  4590. enumerable: true,
  4591. configurable: true
  4592. });
  4593. Object.defineProperty(CdkConnectedOverlay.prototype, "overlayRef", {
  4594. /** The associated overlay reference. */
  4595. get: /**
  4596. * The associated overlay reference.
  4597. * @return {?}
  4598. */
  4599. function () {
  4600. return this._overlayRef;
  4601. },
  4602. enumerable: true,
  4603. configurable: true
  4604. });
  4605. Object.defineProperty(CdkConnectedOverlay.prototype, "dir", {
  4606. /** The element's layout direction. */
  4607. get: /**
  4608. * The element's layout direction.
  4609. * @return {?}
  4610. */
  4611. function () {
  4612. return this._dir ? this._dir.value : 'ltr';
  4613. },
  4614. enumerable: true,
  4615. configurable: true
  4616. });
  4617. /**
  4618. * @return {?}
  4619. */
  4620. CdkConnectedOverlay.prototype.ngOnDestroy = /**
  4621. * @return {?}
  4622. */
  4623. function () {
  4624. if (this._overlayRef) {
  4625. this._overlayRef.dispose();
  4626. }
  4627. this._backdropSubscription.unsubscribe();
  4628. };
  4629. /**
  4630. * @param {?} changes
  4631. * @return {?}
  4632. */
  4633. CdkConnectedOverlay.prototype.ngOnChanges = /**
  4634. * @param {?} changes
  4635. * @return {?}
  4636. */
  4637. function (changes) {
  4638. if (this._position) {
  4639. this._updatePositionStrategy(this._position);
  4640. this._overlayRef.updateSize({
  4641. width: this.width,
  4642. minWidth: this.minWidth,
  4643. height: this.height,
  4644. minHeight: this.minHeight,
  4645. });
  4646. if (changes['origin'] && this.open) {
  4647. this._position.apply();
  4648. }
  4649. }
  4650. if (changes['open']) {
  4651. this.open ? this._attachOverlay() : this._detachOverlay();
  4652. }
  4653. };
  4654. /** Creates an overlay */
  4655. /**
  4656. * Creates an overlay
  4657. * @private
  4658. * @return {?}
  4659. */
  4660. CdkConnectedOverlay.prototype._createOverlay = /**
  4661. * Creates an overlay
  4662. * @private
  4663. * @return {?}
  4664. */
  4665. function () {
  4666. var _this = this;
  4667. if (!this.positions || !this.positions.length) {
  4668. this.positions = defaultPositionList;
  4669. }
  4670. this._overlayRef = this._overlay.create(this._buildConfig());
  4671. this._overlayRef.keydownEvents().subscribe((/**
  4672. * @param {?} event
  4673. * @return {?}
  4674. */
  4675. function (event) {
  4676. _this.overlayKeydown.next(event);
  4677. if (event.keyCode === keycodes.ESCAPE && !keycodes.hasModifierKey(event)) {
  4678. event.preventDefault();
  4679. _this._detachOverlay();
  4680. }
  4681. }));
  4682. };
  4683. /** Builds the overlay config based on the directive's inputs */
  4684. /**
  4685. * Builds the overlay config based on the directive's inputs
  4686. * @private
  4687. * @return {?}
  4688. */
  4689. CdkConnectedOverlay.prototype._buildConfig = /**
  4690. * Builds the overlay config based on the directive's inputs
  4691. * @private
  4692. * @return {?}
  4693. */
  4694. function () {
  4695. /** @type {?} */
  4696. var positionStrategy = this._position = this._createPositionStrategy();
  4697. /** @type {?} */
  4698. var overlayConfig = new OverlayConfig({
  4699. direction: this._dir,
  4700. positionStrategy: positionStrategy,
  4701. scrollStrategy: this.scrollStrategy,
  4702. hasBackdrop: this.hasBackdrop
  4703. });
  4704. if (this.width || this.width === 0) {
  4705. overlayConfig.width = this.width;
  4706. }
  4707. if (this.height || this.height === 0) {
  4708. overlayConfig.height = this.height;
  4709. }
  4710. if (this.minWidth || this.minWidth === 0) {
  4711. overlayConfig.minWidth = this.minWidth;
  4712. }
  4713. if (this.minHeight || this.minHeight === 0) {
  4714. overlayConfig.minHeight = this.minHeight;
  4715. }
  4716. if (this.backdropClass) {
  4717. overlayConfig.backdropClass = this.backdropClass;
  4718. }
  4719. if (this.panelClass) {
  4720. overlayConfig.panelClass = this.panelClass;
  4721. }
  4722. return overlayConfig;
  4723. };
  4724. /** Updates the state of a position strategy, based on the values of the directive inputs. */
  4725. /**
  4726. * Updates the state of a position strategy, based on the values of the directive inputs.
  4727. * @private
  4728. * @param {?} positionStrategy
  4729. * @return {?}
  4730. */
  4731. CdkConnectedOverlay.prototype._updatePositionStrategy = /**
  4732. * Updates the state of a position strategy, based on the values of the directive inputs.
  4733. * @private
  4734. * @param {?} positionStrategy
  4735. * @return {?}
  4736. */
  4737. function (positionStrategy) {
  4738. var _this = this;
  4739. /** @type {?} */
  4740. var positions = this.positions.map((/**
  4741. * @param {?} currentPosition
  4742. * @return {?}
  4743. */
  4744. function (currentPosition) { return ({
  4745. originX: currentPosition.originX,
  4746. originY: currentPosition.originY,
  4747. overlayX: currentPosition.overlayX,
  4748. overlayY: currentPosition.overlayY,
  4749. offsetX: currentPosition.offsetX || _this.offsetX,
  4750. offsetY: currentPosition.offsetY || _this.offsetY,
  4751. panelClass: currentPosition.panelClass || undefined,
  4752. }); }));
  4753. return positionStrategy
  4754. .setOrigin(this.origin.elementRef)
  4755. .withPositions(positions)
  4756. .withFlexibleDimensions(this.flexibleDimensions)
  4757. .withPush(this.push)
  4758. .withGrowAfterOpen(this.growAfterOpen)
  4759. .withViewportMargin(this.viewportMargin)
  4760. .withLockedPosition(this.lockPosition);
  4761. };
  4762. /** Returns the position strategy of the overlay to be set on the overlay config */
  4763. /**
  4764. * Returns the position strategy of the overlay to be set on the overlay config
  4765. * @private
  4766. * @return {?}
  4767. */
  4768. CdkConnectedOverlay.prototype._createPositionStrategy = /**
  4769. * Returns the position strategy of the overlay to be set on the overlay config
  4770. * @private
  4771. * @return {?}
  4772. */
  4773. function () {
  4774. var _this = this;
  4775. /** @type {?} */
  4776. var strategy = this._overlay.position().flexibleConnectedTo(this.origin.elementRef);
  4777. this._updatePositionStrategy(strategy);
  4778. strategy.positionChanges.subscribe((/**
  4779. * @param {?} p
  4780. * @return {?}
  4781. */
  4782. function (p) { return _this.positionChange.emit(p); }));
  4783. return strategy;
  4784. };
  4785. /** Attaches the overlay and subscribes to backdrop clicks if backdrop exists */
  4786. /**
  4787. * Attaches the overlay and subscribes to backdrop clicks if backdrop exists
  4788. * @private
  4789. * @return {?}
  4790. */
  4791. CdkConnectedOverlay.prototype._attachOverlay = /**
  4792. * Attaches the overlay and subscribes to backdrop clicks if backdrop exists
  4793. * @private
  4794. * @return {?}
  4795. */
  4796. function () {
  4797. var _this = this;
  4798. if (!this._overlayRef) {
  4799. this._createOverlay();
  4800. }
  4801. else {
  4802. // Update the overlay size, in case the directive's inputs have changed
  4803. this._overlayRef.getConfig().hasBackdrop = this.hasBackdrop;
  4804. }
  4805. if (!this._overlayRef.hasAttached()) {
  4806. this._overlayRef.attach(this._templatePortal);
  4807. this.attach.emit();
  4808. }
  4809. if (this.hasBackdrop) {
  4810. this._backdropSubscription = this._overlayRef.backdropClick().subscribe((/**
  4811. * @param {?} event
  4812. * @return {?}
  4813. */
  4814. function (event) {
  4815. _this.backdropClick.emit(event);
  4816. }));
  4817. }
  4818. else {
  4819. this._backdropSubscription.unsubscribe();
  4820. }
  4821. };
  4822. /** Detaches the overlay and unsubscribes to backdrop clicks if backdrop exists */
  4823. /**
  4824. * Detaches the overlay and unsubscribes to backdrop clicks if backdrop exists
  4825. * @private
  4826. * @return {?}
  4827. */
  4828. CdkConnectedOverlay.prototype._detachOverlay = /**
  4829. * Detaches the overlay and unsubscribes to backdrop clicks if backdrop exists
  4830. * @private
  4831. * @return {?}
  4832. */
  4833. function () {
  4834. if (this._overlayRef) {
  4835. this._overlayRef.detach();
  4836. this.detach.emit();
  4837. }
  4838. this._backdropSubscription.unsubscribe();
  4839. };
  4840. CdkConnectedOverlay.decorators = [
  4841. { type: core.Directive, args: [{
  4842. selector: '[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]',
  4843. exportAs: 'cdkConnectedOverlay'
  4844. },] },
  4845. ];
  4846. /** @nocollapse */
  4847. CdkConnectedOverlay.ctorParameters = function () { return [
  4848. { type: Overlay },
  4849. { type: core.TemplateRef },
  4850. { type: core.ViewContainerRef },
  4851. { type: undefined, decorators: [{ type: core.Inject, args: [CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY,] }] },
  4852. { type: bidi.Directionality, decorators: [{ type: core.Optional }] }
  4853. ]; };
  4854. CdkConnectedOverlay.propDecorators = {
  4855. origin: [{ type: core.Input, args: ['cdkConnectedOverlayOrigin',] }],
  4856. positions: [{ type: core.Input, args: ['cdkConnectedOverlayPositions',] }],
  4857. offsetX: [{ type: core.Input, args: ['cdkConnectedOverlayOffsetX',] }],
  4858. offsetY: [{ type: core.Input, args: ['cdkConnectedOverlayOffsetY',] }],
  4859. width: [{ type: core.Input, args: ['cdkConnectedOverlayWidth',] }],
  4860. height: [{ type: core.Input, args: ['cdkConnectedOverlayHeight',] }],
  4861. minWidth: [{ type: core.Input, args: ['cdkConnectedOverlayMinWidth',] }],
  4862. minHeight: [{ type: core.Input, args: ['cdkConnectedOverlayMinHeight',] }],
  4863. backdropClass: [{ type: core.Input, args: ['cdkConnectedOverlayBackdropClass',] }],
  4864. panelClass: [{ type: core.Input, args: ['cdkConnectedOverlayPanelClass',] }],
  4865. viewportMargin: [{ type: core.Input, args: ['cdkConnectedOverlayViewportMargin',] }],
  4866. scrollStrategy: [{ type: core.Input, args: ['cdkConnectedOverlayScrollStrategy',] }],
  4867. open: [{ type: core.Input, args: ['cdkConnectedOverlayOpen',] }],
  4868. hasBackdrop: [{ type: core.Input, args: ['cdkConnectedOverlayHasBackdrop',] }],
  4869. lockPosition: [{ type: core.Input, args: ['cdkConnectedOverlayLockPosition',] }],
  4870. flexibleDimensions: [{ type: core.Input, args: ['cdkConnectedOverlayFlexibleDimensions',] }],
  4871. growAfterOpen: [{ type: core.Input, args: ['cdkConnectedOverlayGrowAfterOpen',] }],
  4872. push: [{ type: core.Input, args: ['cdkConnectedOverlayPush',] }],
  4873. backdropClick: [{ type: core.Output }],
  4874. positionChange: [{ type: core.Output }],
  4875. attach: [{ type: core.Output }],
  4876. detach: [{ type: core.Output }],
  4877. overlayKeydown: [{ type: core.Output }]
  4878. };
  4879. return CdkConnectedOverlay;
  4880. }());
  4881. /**
  4882. * \@docs-private
  4883. * @param {?} overlay
  4884. * @return {?}
  4885. */
  4886. function CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
  4887. return (/**
  4888. * @return {?}
  4889. */
  4890. function () { return overlay.scrollStrategies.reposition(); });
  4891. }
  4892. /**
  4893. * \@docs-private
  4894. * @type {?}
  4895. */
  4896. var CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {
  4897. provide: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY,
  4898. deps: [Overlay],
  4899. useFactory: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY,
  4900. };
  4901. /**
  4902. * @fileoverview added by tsickle
  4903. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  4904. */
  4905. var OverlayModule = /** @class */ (function () {
  4906. function OverlayModule() {
  4907. }
  4908. OverlayModule.decorators = [
  4909. { type: core.NgModule, args: [{
  4910. imports: [bidi.BidiModule, portal.PortalModule, scrolling.ScrollingModule],
  4911. exports: [CdkConnectedOverlay, CdkOverlayOrigin, scrolling.ScrollingModule],
  4912. declarations: [CdkConnectedOverlay, CdkOverlayOrigin],
  4913. providers: [
  4914. Overlay,
  4915. CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER,
  4916. ],
  4917. },] },
  4918. ];
  4919. return OverlayModule;
  4920. }());
  4921. /**
  4922. * @deprecated Use `OverlayModule` instead.
  4923. * \@breaking-change 8.0.0
  4924. * \@docs-private
  4925. * @type {?}
  4926. */
  4927. var OVERLAY_PROVIDERS = [
  4928. Overlay,
  4929. OverlayPositionBuilder,
  4930. OVERLAY_KEYBOARD_DISPATCHER_PROVIDER,
  4931. scrolling.VIEWPORT_RULER_PROVIDER,
  4932. OVERLAY_CONTAINER_PROVIDER,
  4933. CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER,
  4934. ];
  4935. /**
  4936. * @fileoverview added by tsickle
  4937. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  4938. */
  4939. /**
  4940. * Alternative to OverlayContainer that supports correct displaying of overlay elements in
  4941. * Fullscreen mode
  4942. * https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen
  4943. *
  4944. * Should be provided in the root component.
  4945. */
  4946. var FullscreenOverlayContainer = /** @class */ (function (_super) {
  4947. __extends(FullscreenOverlayContainer, _super);
  4948. function FullscreenOverlayContainer(_document) {
  4949. return _super.call(this, _document) || this;
  4950. }
  4951. /**
  4952. * @return {?}
  4953. */
  4954. FullscreenOverlayContainer.prototype.ngOnDestroy = /**
  4955. * @return {?}
  4956. */
  4957. function () {
  4958. _super.prototype.ngOnDestroy.call(this);
  4959. if (this._fullScreenEventName && this._fullScreenListener) {
  4960. this._document.removeEventListener(this._fullScreenEventName, this._fullScreenListener);
  4961. }
  4962. };
  4963. /**
  4964. * @protected
  4965. * @return {?}
  4966. */
  4967. FullscreenOverlayContainer.prototype._createContainer = /**
  4968. * @protected
  4969. * @return {?}
  4970. */
  4971. function () {
  4972. var _this = this;
  4973. _super.prototype._createContainer.call(this);
  4974. this._adjustParentForFullscreenChange();
  4975. this._addFullscreenChangeListener((/**
  4976. * @return {?}
  4977. */
  4978. function () { return _this._adjustParentForFullscreenChange(); }));
  4979. };
  4980. /**
  4981. * @private
  4982. * @return {?}
  4983. */
  4984. FullscreenOverlayContainer.prototype._adjustParentForFullscreenChange = /**
  4985. * @private
  4986. * @return {?}
  4987. */
  4988. function () {
  4989. if (!this._containerElement) {
  4990. return;
  4991. }
  4992. /** @type {?} */
  4993. var fullscreenElement = this.getFullscreenElement();
  4994. /** @type {?} */
  4995. var parent = fullscreenElement || this._document.body;
  4996. parent.appendChild(this._containerElement);
  4997. };
  4998. /**
  4999. * @private
  5000. * @param {?} fn
  5001. * @return {?}
  5002. */
  5003. FullscreenOverlayContainer.prototype._addFullscreenChangeListener = /**
  5004. * @private
  5005. * @param {?} fn
  5006. * @return {?}
  5007. */
  5008. function (fn) {
  5009. /** @type {?} */
  5010. var eventName = this._getEventName();
  5011. if (eventName) {
  5012. if (this._fullScreenListener) {
  5013. this._document.removeEventListener(eventName, this._fullScreenListener);
  5014. }
  5015. this._document.addEventListener(eventName, fn);
  5016. this._fullScreenListener = fn;
  5017. }
  5018. };
  5019. /**
  5020. * @private
  5021. * @return {?}
  5022. */
  5023. FullscreenOverlayContainer.prototype._getEventName = /**
  5024. * @private
  5025. * @return {?}
  5026. */
  5027. function () {
  5028. if (!this._fullScreenEventName) {
  5029. /** @type {?} */
  5030. var _document = (/** @type {?} */ (this._document));
  5031. if (_document.fullscreenEnabled) {
  5032. this._fullScreenEventName = 'fullscreenchange';
  5033. }
  5034. else if (_document.webkitFullscreenEnabled) {
  5035. this._fullScreenEventName = 'webkitfullscreenchange';
  5036. }
  5037. else if (_document.mozFullScreenEnabled) {
  5038. this._fullScreenEventName = 'mozfullscreenchange';
  5039. }
  5040. else if (_document.msFullscreenEnabled) {
  5041. this._fullScreenEventName = 'MSFullscreenChange';
  5042. }
  5043. }
  5044. return this._fullScreenEventName;
  5045. };
  5046. /**
  5047. * When the page is put into fullscreen mode, a specific element is specified.
  5048. * Only that element and its children are visible when in fullscreen mode.
  5049. */
  5050. /**
  5051. * When the page is put into fullscreen mode, a specific element is specified.
  5052. * Only that element and its children are visible when in fullscreen mode.
  5053. * @return {?}
  5054. */
  5055. FullscreenOverlayContainer.prototype.getFullscreenElement = /**
  5056. * When the page is put into fullscreen mode, a specific element is specified.
  5057. * Only that element and its children are visible when in fullscreen mode.
  5058. * @return {?}
  5059. */
  5060. function () {
  5061. /** @type {?} */
  5062. var _document = (/** @type {?} */ (this._document));
  5063. return _document.fullscreenElement ||
  5064. _document.webkitFullscreenElement ||
  5065. _document.mozFullScreenElement ||
  5066. _document.msFullscreenElement ||
  5067. null;
  5068. };
  5069. FullscreenOverlayContainer.decorators = [
  5070. { type: core.Injectable, args: [{ providedIn: 'root' },] },
  5071. ];
  5072. /** @nocollapse */
  5073. FullscreenOverlayContainer.ctorParameters = function () { return [
  5074. { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }
  5075. ]; };
  5076. /** @nocollapse */ FullscreenOverlayContainer.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function FullscreenOverlayContainer_Factory() { return new FullscreenOverlayContainer(core.ɵɵinject(common.DOCUMENT)); }, token: FullscreenOverlayContainer, providedIn: "root" });
  5077. return FullscreenOverlayContainer;
  5078. }(OverlayContainer));
  5079. exports.ViewportRuler = scrolling.ViewportRuler;
  5080. exports.VIEWPORT_RULER_PROVIDER = scrolling.VIEWPORT_RULER_PROVIDER;
  5081. exports.CdkScrollable = scrolling.CdkScrollable;
  5082. exports.ScrollDispatcher = scrolling.ScrollDispatcher;
  5083. exports.Overlay = Overlay;
  5084. exports.OverlayContainer = OverlayContainer;
  5085. exports.CdkOverlayOrigin = CdkOverlayOrigin;
  5086. exports.CdkConnectedOverlay = CdkConnectedOverlay;
  5087. exports.FullscreenOverlayContainer = FullscreenOverlayContainer;
  5088. exports.OverlayRef = OverlayRef;
  5089. exports.OverlayKeyboardDispatcher = OverlayKeyboardDispatcher;
  5090. exports.OverlayPositionBuilder = OverlayPositionBuilder;
  5091. exports.GlobalPositionStrategy = GlobalPositionStrategy;
  5092. exports.ConnectedPositionStrategy = ConnectedPositionStrategy;
  5093. exports.FlexibleConnectedPositionStrategy = FlexibleConnectedPositionStrategy;
  5094. exports.OverlayConfig = OverlayConfig;
  5095. exports.validateVerticalPosition = validateVerticalPosition;
  5096. exports.validateHorizontalPosition = validateHorizontalPosition;
  5097. exports.ConnectionPositionPair = ConnectionPositionPair;
  5098. exports.ScrollingVisibility = ScrollingVisibility;
  5099. exports.ConnectedOverlayPositionChange = ConnectedOverlayPositionChange;
  5100. exports.ScrollStrategyOptions = ScrollStrategyOptions;
  5101. exports.RepositionScrollStrategy = RepositionScrollStrategy;
  5102. exports.CloseScrollStrategy = CloseScrollStrategy;
  5103. exports.NoopScrollStrategy = NoopScrollStrategy;
  5104. exports.BlockScrollStrategy = BlockScrollStrategy;
  5105. exports.OverlayModule = OverlayModule;
  5106. exports.OVERLAY_PROVIDERS = OVERLAY_PROVIDERS;
  5107. exports.ɵg = OVERLAY_KEYBOARD_DISPATCHER_PROVIDER;
  5108. exports.ɵf = OVERLAY_KEYBOARD_DISPATCHER_PROVIDER_FACTORY;
  5109. exports.ɵb = OVERLAY_CONTAINER_PROVIDER;
  5110. exports.ɵa = OVERLAY_CONTAINER_PROVIDER_FACTORY;
  5111. exports.ɵc = CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY;
  5112. exports.ɵe = CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER;
  5113. exports.ɵd = CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY;
  5114. Object.defineProperty(exports, '__esModule', { value: true });
  5115. })));
  5116. //# sourceMappingURL=cdk-overlay.umd.js.map