{"version":3,"sources":["libs/proman/src/lib/overlay/global-overlay.service.ts","libs/proman/src/lib/overlay/global-overlay.component.ts","libs/proman/src/lib/overlay/global-overlay-appending.service.ts","libs/proman/src/lib/overlay/global-overlay.directive.ts","libs/proman/src/lib/overlay/global-overlay.module.ts","libs/proman/src/lib/tooltip/tooltip.directive.ts","libs/proman/src/lib/tooltip/tooltip-directive.module.ts","libs/proman/src/lib/button/proman-button.component.ts","libs/proman/src/lib/services/query-expression.service.ts","node_modules/@angular/cdk/fesm2022/overlay.mjs","node_modules/@angular/cdk/fesm2022/portal.mjs","node_modules/@angular/cdk/fesm2022/dialog.mjs","node_modules/@angular/material/fesm2022/dialog.mjs","node_modules/@angular/material/fesm2022/legacy-dialog.mjs","libs/proman/src/lib/shared/directives/image-error.directive.ts","libs/proman/src/lib/shared/directives/for-2.directive.ts","libs/proman/src/lib/shared/directives/proman-contrasting-color.directive.ts","libs/proman/src/lib/shared/directives/click-stop-propagation.directive.ts","libs/proman/src/lib/shared/directives/init.directive.ts","libs/proman/src/lib/shared/directives/scroll-limit.directive.ts","libs/proman/src/lib/shared/directives/scroll-into-view.directive.ts","libs/proman/src/lib/shared/directives/shift-scroll-horizontal.directive.ts","libs/proman/src/lib/shared/directives/on-resize.directive.ts","libs/proman/src/lib/shared/directives/element-on-load.directive.ts","libs/proman/src/lib/shared/directives/delay-render.directive.ts","libs/proman/src/lib/shared/directives/shared-directives.module.ts","node_modules/@angular/forms/fesm2022/forms.mjs","node_modules/@angular/material/fesm2022/form-field.mjs","node_modules/@angular/material/fesm2022/legacy-form-field.mjs","node_modules/@angular/cdk/fesm2022/text-field.mjs","node_modules/@angular/material/fesm2022/input.mjs","node_modules/@angular/material/fesm2022/legacy-input.mjs","libs/proman/src/lib/validators/input-error-state-matcher.ts"],"sourcesContent":["import {\n ElementRef,\n Injectable, TemplateRef,\n} from '@angular/core';\n\nimport { BehaviorSubject, Subject, Subscription } from '@proman/rxjs-common';\nimport { DocsIdValues } from '../store/docs-id';\nimport { MediaChange, MediaObserver } from 'ngx-flexible-layout';\n\nconst DEFAULT_POS = [-9999, -9999];\n\n@Injectable({ providedIn: 'root' })\nexport class GlobalOverlayService {\n\n constructor(\n media: MediaObserver,\n ) {\n this.watcher = media.asObservable().subscribe((change: MediaChange[]) => {\n this.isMobile = change.some((change: MediaChange) => change.mqAlias === 'xs');\n });\n }\n\n overlayPos: number[] = DEFAULT_POS;\n overlayShow: Subject = new Subject();\n data: BehaviorSubject = new BehaviorSubject({});\n template: BehaviorSubject> = new BehaviorSubject(null);\n\n docValues: Subject = new Subject();\n docShow: Subject = new Subject();\n docActive: Subject = new Subject();\n\n watcher: Subscription;\n isMobile: boolean;\n\n // -- COMMON METHODS\n\n getPos(el: ElementRef, i: number) {\n const getPxString = (value: number) => `${value}px`;\n\n if (!el.nativeElement) return ;\n\n let _el: number[] = [ +el.nativeElement.getBoundingClientRect().width, +el.nativeElement.getBoundingClientRect().height ];\n let _window: number[] = [window.innerWidth, window.innerHeight];\n let event: number[] = this.overlayPos;\n\n return getPxString((_window[i] < (event[i] + _el[i] + 10)) ? _window[i] - _el[i] - 30 : event[i] + 10);\n\n }\n\n // -- OVERLAY\n\n setData(data: any) {\n this.data.next(data);\n }\n\n show($event: any) {\n this.overlayPos = [$event.clientX, $event.clientY];\n this.overlayShow.next($event.clientX + $event.clientY);\n }\n\n hide() {\n this.overlayPos = DEFAULT_POS;\n this.overlayShow.next(0);\n }\n\n}\n","import {\n AfterViewInit, ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef, Inject, OnChanges, OnDestroy,\n OnInit,\n Renderer2,\n TemplateRef,\n ViewChild,\n} from '@angular/core';\nimport { Observable, Subject, Subscription } from '@proman/rxjs-common';\nimport { distinctUntilChanged, takeUntil } from '@proman/rxjs-common';\nimport { GlobalOverlayService } from './global-overlay.service';\nimport { UI_DARK_MODE, UiPreferencesService } from '@proman/services/ui-preferences.service';\n\n@Component({\n selector: 'pro-overlay',\n template: `\n
\n \n
\n \n
\n
\n
\n\n \n \n
\n {{ data.data }}\n
\n
\n
\n `,\n styles: [\n `\n .GlobalOverlay {\n position: absolute;\n z-index: 30000;\n font-size: 1.2rem;\n font-size: 11px;\n /*min-width: 250px;*/\n\n left: -9999px;\n top: -9999px;\n pointer-events: none;\n\n /*&.NoMinWidth {*/\n /* min-width: initial;*/\n /* }*/\n\n /*.Overlay-img {*/\n /* max-width: 450px;*/\n /* max-height: 450px;*/\n\n /*&> img {*/\n /* display: block;*/\n /* margin: 0 auto;*/\n /* max-width: 100%;*/\n /* max-height: 100%;*/\n /* object-fit: contain;*/\n /* }*/\n\n /*}*/\n\n /*.Overlay-saleOpportunity {*/\n /* max-width: 400px;*/\n /*}*/\n\n }\n\n .GlobalOverlay > div {\n background-color: rgba(255, 255, 255, 0.95);\n border: 1px solid rgb(99, 99, 99, 0.9);\n border-radius: 15%;\n pointer-events: none;\n padding: 2px 4px;\n }\n \n .GlobalOverlay.dark-mode > div {\n background-color: grey;\n color: lightgrey;\n }\n\n .DiffOverlay, .EventOverlay {\n word-break: break-all;\n }\n\n .DiffOverlay {\n max-width: 400px;\n }\n\n .EventOverlay {\n max-width: 900px;\n }\n\n .Overlay-saleOpportunity {\n overflow: hidden;\n }\n `\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\n\nexport class GlobalOverlayComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {\n @ViewChild('el') el: ElementRef;\n\n type: string;\n isDarkMode: boolean;\n data$: Observable<{ type: string; data: any }>;\n _subShow: Subscription;\n destroyed$: Subject = new Subject();\n overlayTemplate: TemplateRef;\n result: string = '';\n\n constructor(\n @Inject(GlobalOverlayService) private GlobalOverlayService: GlobalOverlayService,\n private Render2: Renderer2,\n private UiPrefs: UiPreferencesService,\n private cd: ChangeDetectorRef,\n ) {\n this.isDarkMode = this.UiPrefs.get(UI_DARK_MODE);\n }\n\n ngOnInit() {\n this.GlobalOverlayService.overlayShow\n .pipe(\n takeUntil(this.destroyed$),\n distinctUntilChanged()\n )\n .subscribe((value: any) => {\n value ? this.show() : this.hide();\n });\n\n this.GlobalOverlayService.template\n .subscribe((value) => {\n this.overlayTemplate = value;\n this.cd.markForCheck();\n });\n\n this.data$ = this.GlobalOverlayService.data\n .pipe(\n takeUntil(this.destroyed$),\n distinctUntilChanged(),\n );\n }\n\n ngAfterViewInit() {\n\n }\n\n ngOnDestroy() {\n this.destroyed$.next();\n }\n\n ngOnChanges() {\n this.cd.markForCheck();\n }\n\n async show() {\n this.Render2.removeClass(this.el.nativeElement, 'DisplayNone');\n\n await this.setPosition();\n\n this.cd.markForCheck();\n }\n\n setPosition() {\n setTimeout(() => { // timeout to load image before repositioning\n this.Render2.setStyle(this.el.nativeElement, 'left', this.GlobalOverlayService.getPos(this.el, 0));\n this.Render2.setStyle(this.el.nativeElement, 'top', this.GlobalOverlayService.getPos(this.el, 1));\n\n this.cd.markForCheck();\n });\n }\n\n hide() {\n this.Render2.addClass(this.el.nativeElement, 'DisplayNone');\n\n this.Render2.setStyle(this.el.nativeElement, 'top', '-999999px');\n this.Render2.setStyle(this.el.nativeElement, 'left', '-999999px');\n\n this.cd.markForCheck();\n }\n\n}\n","import {\n ApplicationRef,\n ComponentFactoryResolver,\n ComponentRef,\n EmbeddedViewRef,\n Injectable,\n Injector,\n} from '@angular/core';\nimport { GlobalOverlayComponent } from './global-overlay.component';\n\n@Injectable({ providedIn: 'root' })\nexport class GlobalOverlayAppendingService {\n\n constructor(\n private appRef: ApplicationRef,\n private injector: Injector,\n private componentFactoryResolver: ComponentFactoryResolver,\n ) {\n this.appendElement();\n }\n\n appendElement() {\n const componentRef: ComponentRef = this.componentFactoryResolver\n .resolveComponentFactory(GlobalOverlayComponent)\n .create(this.injector);\n this.appRef.attachView(componentRef.hostView);\n\n const domElem: HTMLElement = (componentRef.hostView as EmbeddedViewRef).rootNodes[0] as HTMLElement;\n document.body.appendChild(domElem);\n }\n\n}\n","import {\n ChangeDetectorRef,\n Directive,\n HostListener,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n SimpleChanges,\n TemplateRef,\n} from '@angular/core';\nimport { debounce } from '../utils';\nimport { GlobalOverlayService } from './global-overlay.service';\nimport { GlobalOverlayAppendingService } from './global-overlay-appending.service';\n\nexport type GlobalOverlayType = 'button';\n\n@Directive({\n selector: '[proOverlay]'\n})\nexport class GlobalOverlayDirective implements OnInit, OnDestroy, OnChanges {\n @Input('proOverlay') data: any;\n @Input('proOverlayType') type: GlobalOverlayType = 'button';\n @Input('proOverlayDebounce') debounce: any = 500;\n @Input('proOverlayDelay') delay: any = 0;\n @Input('proOverlayForceHide') forceHide: boolean;\n @Input('proOverlayTemplate') template: TemplateRef;\n\n _inited: boolean;\n visible: boolean = false;\n toBeShown: boolean = false;\n\n isIgnored: boolean;\n\n debounceShow: any;\n\n constructor(\n private cd: ChangeDetectorRef,\n private GlobalOverlay: GlobalOverlayService,\n private Appending: GlobalOverlayAppendingService,\n ) {\n\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (changes.data && this._inited) this.GlobalOverlay.setData(changes.data.currentValue);\n\n if (this.isIgnored && changes.data.currentValue && changes.data.currentValue.data) {\n this.isIgnored = false;\n this.ngOnInit();\n }\n\n if (changes && changes.forceHide && changes.forceHide.currentValue) {\n this.disableOverlay();\n }\n }\n\n @HostListener('mouseover', ['$event'])\n public setOverlayData($event: MouseEvent) {\n if (this.isIgnored) return;\n\n $event.stopPropagation();\n\n this.GlobalOverlay.template.next(this.template);\n this.GlobalOverlay.setData(this.data);\n\n this.debounceShow($event);\n\n this.toBeShown = true;\n\n this.cd.markForCheck();\n }\n\n @HostListener('mouseleave')\n public disableOverlay() {\n if (this.isIgnored) return;\n\n if (!this.visible || this.toBeShown) {\n this.debounceShow.cancel();\n this.GlobalOverlay.hide();\n\n } else {\n this.GlobalOverlay.hide();\n\n this.visible = false;\n\n }\n\n this.toBeShown = false;\n }\n\n ngOnInit() {\n if (!this.data.data || this.GlobalOverlay.isMobile) {\n return this.isIgnored = true;\n\n }\n\n this.debounceShow = debounce(($event: MouseEvent) => {\n this.GlobalOverlay.show($event);\n\n this.visible = true;\n\n }, this.debounce);\n\n this._inited = true;\n\n document.addEventListener('click', this.handleDocumentClick);\n\n }\n\n handleDocumentClick = () => {\n if (this.visible) {\n this.GlobalOverlay.hide();\n }\n };\n\n ngOnDestroy() {\n if (this.toBeShown) this.debounceShow.cancel();\n if (this.visible) this.GlobalOverlay.hide();\n\n document.removeEventListener('click', this.handleDocumentClick);\n\n }\n\n}\n","import { ApplicationInitStatus, ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';\nimport { GlobalOverlayDirective } from './global-overlay.directive';\nimport { GlobalOverlayService } from './global-overlay.service';\nimport { GlobalOverlayComponent } from './global-overlay.component';\nimport { GlobalOverlayAppendingService } from './global-overlay-appending.service';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n imports: [\n CommonModule,\n ],\n declarations: [\n GlobalOverlayDirective,\n GlobalOverlayComponent,\n ],\n exports: [\n GlobalOverlayDirective,\n GlobalOverlayComponent,\n ]\n})\n\nexport class GlobalOverlayModule {\n\n constructor() {\n\n }\n\n\n static forRoot(): ModuleWithProviders {\n return {\n ngModule: GlobalOverlayModule,\n providers: [\n GlobalOverlayService,\n GlobalOverlayAppendingService,\n ]\n };\n }\n}\n","import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges } from '@angular/core';\nimport { FilterService } from '../services/filter.service';\nimport { TranslateService } from '@ngx-translate/core';\n\nexport type TooltipPosition = 'top'|'bottom'|'left'|'right';\n\n@Directive({\n selector: '[proTooltip]'\n})\nexport class TooltipDirective implements OnInit, OnDestroy, OnChanges {\n @Input('proTooltip') tooltip: string;\n @Input('proTooltipPosition') position: TooltipPosition = 'top';\n\n constructor(\n private element: ElementRef,\n private Render2: Renderer2,\n private Translate: TranslateService,\n ) {\n\n }\n\n ngOnInit() {\n this.setTooltip();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n this.setTooltip();\n }\n\n ngOnDestroy() {\n\n }\n\n setTooltip() {\n if (this.tooltip) {\n this.Render2.setAttribute(this.element.nativeElement, 'data-tooltip', this.Translate.instant(this.tooltip));\n\n }\n\n if (this.position) {\n this.Render2.addClass(this.element.nativeElement, `has-tooltip-${this.position}`);\n\n }\n\n }\n\n}\n","import { NgModule } from '@angular/core';\nimport { TooltipDirective } from './tooltip.directive';\n\n@NgModule({\n imports: [],\n declarations: [TooltipDirective],\n exports: [TooltipDirective],\n})\n\nexport class TooltipDirectiveModule {}\n","import {\n Component,\n Input,\n Output,\n OnChanges,\n EventEmitter,\n SimpleChanges, HostListener\n} from '@angular/core';\nimport { TooltipPosition } from '../tooltip/tooltip.directive';\nimport { BtnThemePalette } from '../interfaces/btn-theme-pallete';\nimport { CommonModule } from '@angular/common';\nimport { Fa6Module } from '../fa/fa6.module';\nimport { GlobalOverlayModule } from '../overlay/global-overlay.module';\nimport { TooltipDirectiveModule } from '../tooltip/tooltip-directive.module';\nimport { TranslateService } from '@ngx-translate/core';\nimport { TranslatePipe } from '../shared/pipes/pipes/translate.pipe';\nimport { MatLegacyButtonModule } from '@angular/material/legacy-button';\n\n@Component({\n selector: 'pro-btn',\n standalone: true,\n imports: [\n CommonModule,\n MatLegacyButtonModule,\n Fa6Module,\n GlobalOverlayModule,\n TooltipDirectiveModule,\n TranslatePipe,\n ],\n template: `\n @switch (!!icon) {\n @case (true) {\n \n }\n @case (false) {\n \n }\n\n }\n\n `,\n styles: [`\n .ButtonDisabledTooltip {\n position: absolute;\n height: 100%;\n width: 100%;\n top:0;\n left: 0;\n background: transparent;\n }\n :host {\n position: relative;\n }\n button:hover {\n cursor: pointer;\n }\n .has-background {\n margin: 0 4px;\n }\n .accent-background {\n border: 1px solid cornflowerblue;\n }\n .stretched {\n width: 100%;\n }\n `],\n providers: [\n TranslateService,\n ]\n})\n\nexport class PromanButtonComponent implements OnChanges {\n @Input() label: string;\n @Input() theme: BtnThemePalette;\n @Input() type: string;\n @Input() icon: string;\n @Input() pattern: string;\n @Input() faClass: string;\n @Input() faStyles: string;\n @Input() size: string = '2x';\n @Input() disabled: boolean;\n @Input() tooltip: string;\n @Input() tooltipPosition: TooltipPosition;\n @Input() disabledTooltip: string;\n @Input() pending: any;\n @Input() table: boolean;\n @Input() tabIndex: number;\n @Input() isCheckbox: boolean;\n @Input() background: string;\n @Input() stretch: boolean;\n @Input() delayMultiClick: boolean = true;\n @Output() onClick: EventEmitter = new EventEmitter();\n delayDisabled: boolean = false;\n\n @HostListener('click', ['$event']) handleClick($event: MouseEvent) {\n if (!this.disabled && !this.delayDisabled) {\n this.onClick.emit($event);\n }\n\n if (this.delayMultiClick) {\n this.delayDisabled = true;\n setTimeout(() => this.delayDisabled = false, 2000);\n }\n }\n\n private patterns: any = {\n confirm: {\n label: 'confirm',\n theme: 'accent'\n },\n copy: {\n label: 'copy',\n theme: 'accent'\n },\n create: {\n label: 'create',\n theme: 'accent'\n },\n add: {\n label: 'add',\n theme: 'accent'\n },\n cancel: {\n label: 'cancel',\n theme: 'primary'\n },\n close: {\n label: 'close',\n theme: 'primary'\n },\n remove: {\n label: 'remove',\n theme: 'warn'\n },\n update: {\n label: 'update',\n theme: 'accent'\n }\n };\n\n constructor(\n private Translate: TranslateService,\n ) {\n\n }\n\n ngOnChanges(changes: SimpleChanges) {\n\n if (changes.theme || changes.label || changes.icon || changes.pattern || changes.disabled) {\n\n if (this.pattern) {\n this.label = this.Translate.instant(this.getPatternValue('label'));\n this.theme = this.getPatternValue('theme');\n console.log('is pattern', this.label, this.theme);\n }\n }\n }\n\n getPatternValue(property: string) {\n return this.patterns[this.pattern] ? this.patterns[this.pattern][property] : null;\n }\n\n}\n","import moment from 'moment';\nimport { utcFormat, isNotUtc } from '@proman/utils';\nimport { Injectable } from \"@angular/core\";\n\nconst AND = '&';\nconst OR = '|';\nconst EQ = '=';\nconst NULL = '-';\nconst NOT = '!';\nconst LTE = '<=';\nconst LT = '<';\nconst GTE = '>=';\nconst GT = '>';\n\n/**\n * `QueryExpression` service\n *\n */\n@Injectable()\nexport class QueryExpressionService {\n\n orStrict(args: any) {\n if (!args) return;\n\n return args.map((element: any) => EQ + element).join(OR);\n };\n\n or(args: any) {\n if (!args) return;\n\n return args.join(OR);\n };\n\n eqStrict(arg: any) {\n return EQ + arg;\n };\n\n notEqStrict(arg: any) {\n return NOT + EQ + arg;\n };\n\n // sets \"from\" to start of day, sets \"to\" to end of day\n dateRange(from: any, to: any, inclusive?: boolean) {\n // convert dates to moment\n if (!from || !from.format) from = moment(from);\n if (!to || !to.format) to = moment(to);\n return this.from(utcFormat(from.startOf('day')), inclusive) + AND + this.to(utcFormat(to.endOf('day')), inclusive);\n };\n\n // Formats exact datetime values without modification\n dateTimeRange(from: any, to: any, inclusive?: any) {\n let output = '';\n let prefix = '';\n\n if (from) {\n output += this.from(from, inclusive);\n prefix = AND;\n }\n\n if (to) {\n output += prefix + this.to(to, inclusive);\n }\n\n return output;\n };\n\n from(from: any, inclusive?: boolean) {\n let fromOp;\n\n if (typeof inclusive === 'undefined') inclusive = true;\n if (isNotUtc(from)) from = utcFormat(moment(from));\n if (typeof from !== 'string' && from.format) from = utcFormat(from);\n\n fromOp = inclusive ? GTE : GT;\n\n return fromOp + from;\n };\n\n to(to: any, inclusive?: any) {\n\n if (typeof inclusive === 'undefined') inclusive = true;\n if (isNotUtc(to)) to = utcFormat(moment(to))\n if (typeof to !== 'string' && to?.format) to = utcFormat(to);\n\n return (inclusive ? LTE : LT) + to;\n };\n\n parseDateRange(expr: any) {\n let parts = expr.split(AND);\n let opRegex = new RegExp('^[' + LT + GT + EQ + ']{1,2}');\n\n if (parts.length === 2) {\n let from = parts[0].replace(opRegex, '');\n let to = parts[1].replace(opRegex, '');\n\n return { from, to };\n\n } else {\n let date = parts[0].replace(opRegex, '');\n\n if (parts[0].indexOf(GT) > -1) {\n return { from: date }\n } else {\n return { to: date }\n }\n }\n };\n\n notIn(args: any[]) {\n return args.length ? NOT + args.map((arg: any) => arg).join(OR) : '';\n }\n\n notInStrict(args: any[]) {\n return args.length ? args.map((arg: any) => NOT + EQ + arg).join(AND) : '';\n };\n\n in(args: any[]) {\n return args?.length ? args.map(String).join(OR) : '';\n };\n\n notOrNull(arg: any) {\n return NOT + arg + OR + NULL;\n };\n\n orNull(arg: any) {\n return arg + OR + NULL;\n };\n\n notNull() {\n return NOT + NULL;\n };\n\n isNull() {\n return NULL;\n };\n}\n","import * as i1 from '@angular/cdk/scrolling';\nimport { ScrollingModule } from '@angular/cdk/scrolling';\nexport { CdkScrollable, ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling';\nimport * as i6 from '@angular/common';\nimport { DOCUMENT } from '@angular/common';\nimport * as i0 from '@angular/core';\nimport { Injectable, Inject, Optional, ElementRef, ApplicationRef, ANIMATION_MODULE_TYPE, InjectionToken, Directive, EventEmitter, booleanAttribute, Input, Output, NgModule } from '@angular/core';\nimport { coerceCssPixelValue, coerceArray } from '@angular/cdk/coercion';\nimport * as i1$1 from '@angular/cdk/platform';\nimport { supportsScrollBehavior, _getEventTarget, _isTestEnvironment } from '@angular/cdk/platform';\nimport { filter, take, takeUntil, takeWhile } from 'rxjs/operators';\nimport * as i5 from '@angular/cdk/bidi';\nimport { BidiModule } from '@angular/cdk/bidi';\nimport { DomPortalOutlet, TemplatePortal, PortalModule } from '@angular/cdk/portal';\nimport { Subject, Subscription, merge } from 'rxjs';\nimport { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';\nconst scrollBehaviorSupported = /*#__PURE__*/supportsScrollBehavior();\n/**\n * Strategy that will prevent the user from scrolling while the overlay is visible.\n */\nclass BlockScrollStrategy {\n constructor(_viewportRuler, document) {\n this._viewportRuler = _viewportRuler;\n this._previousHTMLStyles = {\n top: '',\n left: ''\n };\n this._isEnabled = false;\n this._document = document;\n }\n /** Attaches this scroll strategy to an overlay. */\n attach() {}\n /** Blocks page-level scroll while the attached overlay is open. */\n enable() {\n if (this._canBeEnabled()) {\n const root = this._document.documentElement;\n this._previousScrollPosition = this._viewportRuler.getViewportScrollPosition();\n // Cache the previous inline styles in case the user had set them.\n this._previousHTMLStyles.left = root.style.left || '';\n this._previousHTMLStyles.top = root.style.top || '';\n // Note: we're using the `html` node, instead of the `body`, because the `body` may\n // have the user agent margin, whereas the `html` is guaranteed not to have one.\n root.style.left = coerceCssPixelValue(-this._previousScrollPosition.left);\n root.style.top = coerceCssPixelValue(-this._previousScrollPosition.top);\n root.classList.add('cdk-global-scrollblock');\n this._isEnabled = true;\n }\n }\n /** Unblocks page-level scroll while the attached overlay is open. */\n disable() {\n if (this._isEnabled) {\n const html = this._document.documentElement;\n const body = this._document.body;\n const htmlStyle = html.style;\n const bodyStyle = body.style;\n const previousHtmlScrollBehavior = htmlStyle.scrollBehavior || '';\n const previousBodyScrollBehavior = bodyStyle.scrollBehavior || '';\n this._isEnabled = false;\n htmlStyle.left = this._previousHTMLStyles.left;\n htmlStyle.top = this._previousHTMLStyles.top;\n html.classList.remove('cdk-global-scrollblock');\n // Disable user-defined smooth scrolling temporarily while we restore the scroll position.\n // See https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior\n // Note that we don't mutate the property if the browser doesn't support `scroll-behavior`,\n // because it can throw off feature detections in `supportsScrollBehavior` which\n // checks for `'scrollBehavior' in documentElement.style`.\n if (scrollBehaviorSupported) {\n htmlStyle.scrollBehavior = bodyStyle.scrollBehavior = 'auto';\n }\n window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top);\n if (scrollBehaviorSupported) {\n htmlStyle.scrollBehavior = previousHtmlScrollBehavior;\n bodyStyle.scrollBehavior = previousBodyScrollBehavior;\n }\n }\n }\n _canBeEnabled() {\n // Since the scroll strategies can't be singletons, we have to use a global CSS class\n // (`cdk-global-scrollblock`) to make sure that we don't try to disable global\n // scrolling multiple times.\n const html = this._document.documentElement;\n if (html.classList.contains('cdk-global-scrollblock') || this._isEnabled) {\n return false;\n }\n const body = this._document.body;\n const viewport = this._viewportRuler.getViewportSize();\n return body.scrollHeight > viewport.height || body.scrollWidth > viewport.width;\n }\n}\n\n/**\n * Returns an error to be thrown when attempting to attach an already-attached scroll strategy.\n */\nfunction getMatScrollStrategyAlreadyAttachedError() {\n return Error(`Scroll strategy has already been attached.`);\n}\n\n/**\n * Strategy that will close the overlay as soon as the user starts scrolling.\n */\nclass CloseScrollStrategy {\n constructor(_scrollDispatcher, _ngZone, _viewportRuler, _config) {\n this._scrollDispatcher = _scrollDispatcher;\n this._ngZone = _ngZone;\n this._viewportRuler = _viewportRuler;\n this._config = _config;\n this._scrollSubscription = null;\n /** Detaches the overlay ref and disables the scroll strategy. */\n this._detach = () => {\n this.disable();\n if (this._overlayRef.hasAttached()) {\n this._ngZone.run(() => this._overlayRef.detach());\n }\n };\n }\n /** Attaches this scroll strategy to an overlay. */\n attach(overlayRef) {\n if (this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw getMatScrollStrategyAlreadyAttachedError();\n }\n this._overlayRef = overlayRef;\n }\n /** Enables the closing of the attached overlay on scroll. */\n enable() {\n if (this._scrollSubscription) {\n return;\n }\n const stream = this._scrollDispatcher.scrolled(0).pipe(filter(scrollable => {\n return !scrollable || !this._overlayRef.overlayElement.contains(scrollable.getElementRef().nativeElement);\n }));\n if (this._config && this._config.threshold && this._config.threshold > 1) {\n this._initialScrollPosition = this._viewportRuler.getViewportScrollPosition().top;\n this._scrollSubscription = stream.subscribe(() => {\n const scrollPosition = this._viewportRuler.getViewportScrollPosition().top;\n if (Math.abs(scrollPosition - this._initialScrollPosition) > this._config.threshold) {\n this._detach();\n } else {\n this._overlayRef.updatePosition();\n }\n });\n } else {\n this._scrollSubscription = stream.subscribe(this._detach);\n }\n }\n /** Disables the closing the attached overlay on scroll. */\n disable() {\n if (this._scrollSubscription) {\n this._scrollSubscription.unsubscribe();\n this._scrollSubscription = null;\n }\n }\n detach() {\n this.disable();\n this._overlayRef = null;\n }\n}\n\n/** Scroll strategy that doesn't do anything. */\nclass NoopScrollStrategy {\n /** Does nothing, as this scroll strategy is a no-op. */\n enable() {}\n /** Does nothing, as this scroll strategy is a no-op. */\n disable() {}\n /** Does nothing, as this scroll strategy is a no-op. */\n attach() {}\n}\n\n/**\n * Gets whether an element is scrolled outside of view by any of its parent scrolling containers.\n * @param element Dimensions of the element (from getBoundingClientRect)\n * @param scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)\n * @returns Whether the element is scrolled out of view\n * @docs-private\n */\nfunction isElementScrolledOutsideView(element, scrollContainers) {\n return scrollContainers.some(containerBounds => {\n const outsideAbove = element.bottom < containerBounds.top;\n const outsideBelow = element.top > containerBounds.bottom;\n const outsideLeft = element.right < containerBounds.left;\n const outsideRight = element.left > containerBounds.right;\n return outsideAbove || outsideBelow || outsideLeft || outsideRight;\n });\n}\n/**\n * Gets whether an element is clipped by any of its scrolling containers.\n * @param element Dimensions of the element (from getBoundingClientRect)\n * @param scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)\n * @returns Whether the element is clipped\n * @docs-private\n */\nfunction isElementClippedByScrolling(element, scrollContainers) {\n return scrollContainers.some(scrollContainerRect => {\n const clippedAbove = element.top < scrollContainerRect.top;\n const clippedBelow = element.bottom > scrollContainerRect.bottom;\n const clippedLeft = element.left < scrollContainerRect.left;\n const clippedRight = element.right > scrollContainerRect.right;\n return clippedAbove || clippedBelow || clippedLeft || clippedRight;\n });\n}\n\n/**\n * Strategy that will update the element position as the user is scrolling.\n */\nclass RepositionScrollStrategy {\n constructor(_scrollDispatcher, _viewportRuler, _ngZone, _config) {\n this._scrollDispatcher = _scrollDispatcher;\n this._viewportRuler = _viewportRuler;\n this._ngZone = _ngZone;\n this._config = _config;\n this._scrollSubscription = null;\n }\n /** Attaches this scroll strategy to an overlay. */\n attach(overlayRef) {\n if (this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw getMatScrollStrategyAlreadyAttachedError();\n }\n this._overlayRef = overlayRef;\n }\n /** Enables repositioning of the attached overlay on scroll. */\n enable() {\n if (!this._scrollSubscription) {\n const throttle = this._config ? this._config.scrollThrottle : 0;\n this._scrollSubscription = this._scrollDispatcher.scrolled(throttle).subscribe(() => {\n this._overlayRef.updatePosition();\n // TODO(crisbeto): make `close` on by default once all components can handle it.\n if (this._config && this._config.autoClose) {\n const overlayRect = this._overlayRef.overlayElement.getBoundingClientRect();\n const {\n width,\n height\n } = this._viewportRuler.getViewportSize();\n // TODO(crisbeto): include all ancestor scroll containers here once\n // we have a way of exposing the trigger element to the scroll strategy.\n const parentRects = [{\n width,\n height,\n bottom: height,\n right: width,\n top: 0,\n left: 0\n }];\n if (isElementScrolledOutsideView(overlayRect, parentRects)) {\n this.disable();\n this._ngZone.run(() => this._overlayRef.detach());\n }\n }\n });\n }\n }\n /** Disables repositioning of the attached overlay on scroll. */\n disable() {\n if (this._scrollSubscription) {\n this._scrollSubscription.unsubscribe();\n this._scrollSubscription = null;\n }\n }\n detach() {\n this.disable();\n this._overlayRef = null;\n }\n}\n\n/**\n * Options for how an overlay will handle scrolling.\n *\n * Users can provide a custom value for `ScrollStrategyOptions` to replace the default\n * behaviors. This class primarily acts as a factory for ScrollStrategy instances.\n */\nlet ScrollStrategyOptions = /*#__PURE__*/(() => {\n class ScrollStrategyOptions {\n constructor(_scrollDispatcher, _viewportRuler, _ngZone, document) {\n this._scrollDispatcher = _scrollDispatcher;\n this._viewportRuler = _viewportRuler;\n this._ngZone = _ngZone;\n /** Do nothing on scroll. */\n this.noop = () => new NoopScrollStrategy();\n /**\n * Close the overlay as soon as the user scrolls.\n * @param config Configuration to be used inside the scroll strategy.\n */\n this.close = config => new CloseScrollStrategy(this._scrollDispatcher, this._ngZone, this._viewportRuler, config);\n /** Block scrolling. */\n this.block = () => new BlockScrollStrategy(this._viewportRuler, this._document);\n /**\n * Update the overlay's position on scroll.\n * @param config Configuration to be used inside the scroll strategy.\n * Allows debouncing the reposition calls.\n */\n this.reposition = config => new RepositionScrollStrategy(this._scrollDispatcher, this._viewportRuler, this._ngZone, config);\n this._document = document;\n }\n static {\n this.ɵfac = function ScrollStrategyOptions_Factory(t) {\n return new (t || ScrollStrategyOptions)(i0.ɵɵinject(i1.ScrollDispatcher), i0.ɵɵinject(i1.ViewportRuler), i0.ɵɵinject(i0.NgZone), i0.ɵɵinject(DOCUMENT));\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: ScrollStrategyOptions,\n factory: ScrollStrategyOptions.ɵfac,\n providedIn: 'root'\n });\n }\n }\n return ScrollStrategyOptions;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Initial configuration used when creating an overlay. */\nclass OverlayConfig {\n constructor(config) {\n /** Strategy to be used when handling scroll events while the overlay is open. */\n this.scrollStrategy = new NoopScrollStrategy();\n /** Custom class to add to the overlay pane. */\n this.panelClass = '';\n /** Whether the overlay has a backdrop. */\n this.hasBackdrop = false;\n /** Custom class to add to the backdrop */\n this.backdropClass = 'cdk-overlay-dark-backdrop';\n /**\n * Whether the overlay should be disposed of when the user goes backwards/forwards in history.\n * Note that this usually doesn't include clicking on links (unless the user is using\n * the `HashLocationStrategy`).\n */\n this.disposeOnNavigation = false;\n if (config) {\n // Use `Iterable` instead of `Array` because TypeScript, as of 3.6.3,\n // loses the array generic type in the `for of`. But we *also* have to use `Array` because\n // typescript won't iterate over an `Iterable` unless you compile with `--downlevelIteration`\n const configKeys = Object.keys(config);\n for (const key of configKeys) {\n if (config[key] !== undefined) {\n // TypeScript, as of version 3.5, sees the left-hand-side of this expression\n // as \"I don't know *which* key this is, so the only valid value is the intersection\n // of all the possible values.\" In this case, that happens to be `undefined`. TypeScript\n // is not smart enough to see that the right-hand-side is actually an access of the same\n // exact type with the same exact key, meaning that the value type must be identical.\n // So we use `any` to work around this.\n this[key] = config[key];\n }\n }\n }\n }\n}\n\n/** The points of the origin element and the overlay element to connect. */\nclass ConnectionPositionPair {\n constructor(origin, overlay, /** Offset along the X axis. */\n offsetX, /** Offset along the Y axis. */\n offsetY, /** Class(es) to be applied to the panel while this position is active. */\n panelClass) {\n this.offsetX = offsetX;\n this.offsetY = offsetY;\n this.panelClass = panelClass;\n this.originX = origin.originX;\n this.originY = origin.originY;\n this.overlayX = overlay.overlayX;\n this.overlayY = overlay.overlayY;\n }\n}\n/**\n * Set of properties regarding the position of the origin and overlay relative to the viewport\n * with respect to the containing Scrollable elements.\n *\n * The overlay and origin are clipped if any part of their bounding client rectangle exceeds the\n * bounds of any one of the strategy's Scrollable's bounding client rectangle.\n *\n * The overlay and origin are outside view if there is no overlap between their bounding client\n * rectangle and any one of the strategy's Scrollable's bounding client rectangle.\n *\n * ----------- -----------\n * | outside | | clipped |\n * | view | --------------------------\n * | | | | | |\n * ---------- | ----------- |\n * -------------------------- | |\n * | | | Scrollable |\n * | | | |\n * | | --------------------------\n * | Scrollable |\n * | |\n * --------------------------\n *\n * @docs-private\n */\nclass ScrollingVisibility {}\n/** The change event emitted by the strategy when a fallback position is used. */\nclass ConnectedOverlayPositionChange {\n constructor( /** The position used as a result of this change. */\n connectionPair, /** @docs-private */\n scrollableViewProperties) {\n this.connectionPair = connectionPair;\n this.scrollableViewProperties = scrollableViewProperties;\n }\n}\n/**\n * Validates whether a vertical position property matches the expected values.\n * @param property Name of the property being validated.\n * @param value Value of the property being validated.\n * @docs-private\n */\nfunction validateVerticalPosition(property, value) {\n if (value !== 'top' && value !== 'bottom' && value !== 'center') {\n throw Error(`ConnectedPosition: Invalid ${property} \"${value}\". ` + `Expected \"top\", \"bottom\" or \"center\".`);\n }\n}\n/**\n * Validates whether a horizontal position property matches the expected values.\n * @param property Name of the property being validated.\n * @param value Value of the property being validated.\n * @docs-private\n */\nfunction validateHorizontalPosition(property, value) {\n if (value !== 'start' && value !== 'end' && value !== 'center') {\n throw Error(`ConnectedPosition: Invalid ${property} \"${value}\". ` + `Expected \"start\", \"end\" or \"center\".`);\n }\n}\n\n/**\n * Service for dispatching events that land on the body to appropriate overlay ref,\n * if any. It maintains a list of attached overlays to determine best suited overlay based\n * on event target and order of overlay opens.\n */\nlet BaseOverlayDispatcher = /*#__PURE__*/(() => {\n class BaseOverlayDispatcher {\n constructor(document) {\n /** Currently attached overlays in the order they were attached. */\n this._attachedOverlays = [];\n this._document = document;\n }\n ngOnDestroy() {\n this.detach();\n }\n /** Add a new overlay to the list of attached overlay refs. */\n add(overlayRef) {\n // Ensure that we don't get the same overlay multiple times.\n this.remove(overlayRef);\n this._attachedOverlays.push(overlayRef);\n }\n /** Remove an overlay from the list of attached overlay refs. */\n remove(overlayRef) {\n const index = this._attachedOverlays.indexOf(overlayRef);\n if (index > -1) {\n this._attachedOverlays.splice(index, 1);\n }\n // Remove the global listener once there are no more overlays.\n if (this._attachedOverlays.length === 0) {\n this.detach();\n }\n }\n static {\n this.ɵfac = function BaseOverlayDispatcher_Factory(t) {\n return new (t || BaseOverlayDispatcher)(i0.ɵɵinject(DOCUMENT));\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: BaseOverlayDispatcher,\n factory: BaseOverlayDispatcher.ɵfac,\n providedIn: 'root'\n });\n }\n }\n return BaseOverlayDispatcher;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Service for dispatching keyboard events that land on the body to appropriate overlay ref,\n * if any. It maintains a list of attached overlays to determine best suited overlay based\n * on event target and order of overlay opens.\n */\nlet OverlayKeyboardDispatcher = /*#__PURE__*/(() => {\n class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {\n constructor(document, /** @breaking-change 14.0.0 _ngZone will be required. */\n _ngZone) {\n super(document);\n this._ngZone = _ngZone;\n /** Keyboard event listener that will be attached to the body. */\n this._keydownListener = event => {\n const overlays = this._attachedOverlays;\n for (let i = overlays.length - 1; i > -1; i--) {\n // Dispatch the keydown event to the top overlay which has subscribers to its keydown events.\n // We want to target the most recent overlay, rather than trying to match where the event came\n // from, because some components might open an overlay, but keep focus on a trigger element\n // (e.g. for select and autocomplete). We skip overlays without keydown event subscriptions,\n // because we don't want overlays that don't handle keyboard events to block the ones below\n // them that do.\n if (overlays[i]._keydownEvents.observers.length > 0) {\n const keydownEvents = overlays[i]._keydownEvents;\n /** @breaking-change 14.0.0 _ngZone will be required. */\n if (this._ngZone) {\n this._ngZone.run(() => keydownEvents.next(event));\n } else {\n keydownEvents.next(event);\n }\n break;\n }\n }\n };\n }\n /** Add a new overlay to the list of attached overlay refs. */\n add(overlayRef) {\n super.add(overlayRef);\n // Lazily start dispatcher once first overlay is added\n if (!this._isAttached) {\n /** @breaking-change 14.0.0 _ngZone will be required. */\n if (this._ngZone) {\n this._ngZone.runOutsideAngular(() => this._document.body.addEventListener('keydown', this._keydownListener));\n } else {\n this._document.body.addEventListener('keydown', this._keydownListener);\n }\n this._isAttached = true;\n }\n }\n /** Detaches the global keyboard event listener. */\n detach() {\n if (this._isAttached) {\n this._document.body.removeEventListener('keydown', this._keydownListener);\n this._isAttached = false;\n }\n }\n static {\n this.ɵfac = function OverlayKeyboardDispatcher_Factory(t) {\n return new (t || OverlayKeyboardDispatcher)(i0.ɵɵinject(DOCUMENT), i0.ɵɵinject(i0.NgZone, 8));\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: OverlayKeyboardDispatcher,\n factory: OverlayKeyboardDispatcher.ɵfac,\n providedIn: 'root'\n });\n }\n }\n return OverlayKeyboardDispatcher;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Service for dispatching mouse click events that land on the body to appropriate overlay ref,\n * if any. It maintains a list of attached overlays to determine best suited overlay based\n * on event target and order of overlay opens.\n */\nlet OverlayOutsideClickDispatcher = /*#__PURE__*/(() => {\n class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {\n constructor(document, _platform, /** @breaking-change 14.0.0 _ngZone will be required. */\n _ngZone) {\n super(document);\n this._platform = _platform;\n this._ngZone = _ngZone;\n this._cursorStyleIsSet = false;\n /** Store pointerdown event target to track origin of click. */\n this._pointerDownListener = event => {\n this._pointerDownEventTarget = _getEventTarget(event);\n };\n /** Click event listener that will be attached to the body propagate phase. */\n this._clickListener = event => {\n const target = _getEventTarget(event);\n // In case of a click event, we want to check the origin of the click\n // (e.g. in case where a user starts a click inside the overlay and\n // releases the click outside of it).\n // This is done by using the event target of the preceding pointerdown event.\n // Every click event caused by a pointer device has a preceding pointerdown\n // event, unless the click was programmatically triggered (e.g. in a unit test).\n const origin = event.type === 'click' && this._pointerDownEventTarget ? this._pointerDownEventTarget : target;\n // Reset the stored pointerdown event target, to avoid having it interfere\n // in subsequent events.\n this._pointerDownEventTarget = null;\n // We copy the array because the original may be modified asynchronously if the\n // outsidePointerEvents listener decides to detach overlays resulting in index errors inside\n // the for loop.\n const overlays = this._attachedOverlays.slice();\n // Dispatch the mouse event to the top overlay which has subscribers to its mouse events.\n // We want to target all overlays for which the click could be considered as outside click.\n // As soon as we reach an overlay for which the click is not outside click we break off\n // the loop.\n for (let i = overlays.length - 1; i > -1; i--) {\n const overlayRef = overlays[i];\n if (overlayRef._outsidePointerEvents.observers.length < 1 || !overlayRef.hasAttached()) {\n continue;\n }\n // If it's a click inside the overlay, just break - we should do nothing\n // If it's an outside click (both origin and target of the click) dispatch the mouse event,\n // and proceed with the next overlay\n if (overlayRef.overlayElement.contains(target) || overlayRef.overlayElement.contains(origin)) {\n break;\n }\n const outsidePointerEvents = overlayRef._outsidePointerEvents;\n /** @breaking-change 14.0.0 _ngZone will be required. */\n if (this._ngZone) {\n this._ngZone.run(() => outsidePointerEvents.next(event));\n } else {\n outsidePointerEvents.next(event);\n }\n }\n };\n }\n /** Add a new overlay to the list of attached overlay refs. */\n add(overlayRef) {\n super.add(overlayRef);\n // Safari on iOS does not generate click events for non-interactive\n // elements. However, we want to receive a click for any element outside\n // the overlay. We can force a \"clickable\" state by setting\n // `cursor: pointer` on the document body. See:\n // https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile\n // https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html\n if (!this._isAttached) {\n const body = this._document.body;\n /** @breaking-change 14.0.0 _ngZone will be required. */\n if (this._ngZone) {\n this._ngZone.runOutsideAngular(() => this._addEventListeners(body));\n } else {\n this._addEventListeners(body);\n }\n // click event is not fired on iOS. To make element \"clickable\" we are\n // setting the cursor to pointer\n if (this._platform.IOS && !this._cursorStyleIsSet) {\n this._cursorOriginalValue = body.style.cursor;\n body.style.cursor = 'pointer';\n this._cursorStyleIsSet = true;\n }\n this._isAttached = true;\n }\n }\n /** Detaches the global keyboard event listener. */\n detach() {\n if (this._isAttached) {\n const body = this._document.body;\n body.removeEventListener('pointerdown', this._pointerDownListener, true);\n body.removeEventListener('click', this._clickListener, true);\n body.removeEventListener('auxclick', this._clickListener, true);\n body.removeEventListener('contextmenu', this._clickListener, true);\n if (this._platform.IOS && this._cursorStyleIsSet) {\n body.style.cursor = this._cursorOriginalValue;\n this._cursorStyleIsSet = false;\n }\n this._isAttached = false;\n }\n }\n _addEventListeners(body) {\n body.addEventListener('pointerdown', this._pointerDownListener, true);\n body.addEventListener('click', this._clickListener, true);\n body.addEventListener('auxclick', this._clickListener, true);\n body.addEventListener('contextmenu', this._clickListener, true);\n }\n static {\n this.ɵfac = function OverlayOutsideClickDispatcher_Factory(t) {\n return new (t || OverlayOutsideClickDispatcher)(i0.ɵɵinject(DOCUMENT), i0.ɵɵinject(i1$1.Platform), i0.ɵɵinject(i0.NgZone, 8));\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: OverlayOutsideClickDispatcher,\n factory: OverlayOutsideClickDispatcher.ɵfac,\n providedIn: 'root'\n });\n }\n }\n return OverlayOutsideClickDispatcher;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Container inside which all overlays will render. */\nlet OverlayContainer = /*#__PURE__*/(() => {\n class OverlayContainer {\n constructor(document, _platform) {\n this._platform = _platform;\n this._document = document;\n }\n ngOnDestroy() {\n this._containerElement?.remove();\n }\n /**\n * This method returns the overlay container element. It will lazily\n * create the element the first time it is called to facilitate using\n * the container in non-browser environments.\n * @returns the container element\n */\n getContainerElement() {\n if (!this._containerElement) {\n this._createContainer();\n }\n return this._containerElement;\n }\n /**\n * Create the overlay container element, which is simply a div\n * with the 'cdk-overlay-container' class on the document body.\n */\n _createContainer() {\n const containerClass = 'cdk-overlay-container';\n // TODO(crisbeto): remove the testing check once we have an overlay testing\n // module or Angular starts tearing down the testing `NgModule`. See:\n // https://github.com/angular/angular/issues/18831\n if (this._platform.isBrowser || _isTestEnvironment()) {\n const oppositePlatformContainers = this._document.querySelectorAll(`.${containerClass}[platform=\"server\"], ` + `.${containerClass}[platform=\"test\"]`);\n // Remove any old containers from the opposite platform.\n // This can happen when transitioning from the server to the client.\n for (let i = 0; i < oppositePlatformContainers.length; i++) {\n oppositePlatformContainers[i].remove();\n }\n }\n const container = this._document.createElement('div');\n container.classList.add(containerClass);\n // A long time ago we kept adding new overlay containers whenever a new app was instantiated,\n // but at some point we added logic which clears the duplicate ones in order to avoid leaks.\n // The new logic was a little too aggressive since it was breaking some legitimate use cases.\n // To mitigate the problem we made it so that only containers from a different platform are\n // cleared, but the side-effect was that people started depending on the overly-aggressive\n // logic to clean up their tests for them. Until we can introduce an overlay-specific testing\n // module which does the cleanup, we try to detect that we're in a test environment and we\n // always clear the container. See #17006.\n // TODO(crisbeto): remove the test environment check once we have an overlay testing module.\n if (_isTestEnvironment()) {\n container.setAttribute('platform', 'test');\n } else if (!this._platform.isBrowser) {\n container.setAttribute('platform', 'server');\n }\n this._document.body.appendChild(container);\n this._containerElement = container;\n }\n static {\n this.ɵfac = function OverlayContainer_Factory(t) {\n return new (t || OverlayContainer)(i0.ɵɵinject(DOCUMENT), i0.ɵɵinject(i1$1.Platform));\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: OverlayContainer,\n factory: OverlayContainer.ɵfac,\n providedIn: 'root'\n });\n }\n }\n return OverlayContainer;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Reference to an overlay that has been created with the Overlay service.\n * Used to manipulate or dispose of said overlay.\n */\nclass OverlayRef {\n constructor(_portalOutlet, _host, _pane, _config, _ngZone, _keyboardDispatcher, _document, _location, _outsideClickDispatcher, _animationsDisabled = false) {\n this._portalOutlet = _portalOutlet;\n this._host = _host;\n this._pane = _pane;\n this._config = _config;\n this._ngZone = _ngZone;\n this._keyboardDispatcher = _keyboardDispatcher;\n this._document = _document;\n this._location = _location;\n this._outsideClickDispatcher = _outsideClickDispatcher;\n this._animationsDisabled = _animationsDisabled;\n this._backdropElement = null;\n this._backdropClick = new Subject();\n this._attachments = new Subject();\n this._detachments = new Subject();\n this._locationChanges = Subscription.EMPTY;\n this._backdropClickHandler = event => this._backdropClick.next(event);\n this._backdropTransitionendHandler = event => {\n this._disposeBackdrop(event.target);\n };\n /** Stream of keydown events dispatched to this overlay. */\n this._keydownEvents = new Subject();\n /** Stream of mouse outside events dispatched to this overlay. */\n this._outsidePointerEvents = new Subject();\n if (_config.scrollStrategy) {\n this._scrollStrategy = _config.scrollStrategy;\n this._scrollStrategy.attach(this);\n }\n this._positionStrategy = _config.positionStrategy;\n }\n /** The overlay's HTML element */\n get overlayElement() {\n return this._pane;\n }\n /** The overlay's backdrop HTML element. */\n get backdropElement() {\n return this._backdropElement;\n }\n /**\n * Wrapper around the panel element. Can be used for advanced\n * positioning where a wrapper with specific styling is\n * required around the overlay pane.\n */\n get hostElement() {\n return this._host;\n }\n /**\n * Attaches content, given via a Portal, to the overlay.\n * If the overlay is configured to have a backdrop, it will be created.\n *\n * @param portal Portal instance to which to attach the overlay.\n * @returns The portal attachment result.\n */\n attach(portal) {\n // Insert the host into the DOM before attaching the portal, otherwise\n // the animations module will skip animations on repeat attachments.\n if (!this._host.parentElement && this._previousHostParent) {\n this._previousHostParent.appendChild(this._host);\n }\n const attachResult = this._portalOutlet.attach(portal);\n if (this._positionStrategy) {\n this._positionStrategy.attach(this);\n }\n this._updateStackingOrder();\n this._updateElementSize();\n this._updateElementDirection();\n if (this._scrollStrategy) {\n this._scrollStrategy.enable();\n }\n // Update the position once the zone is stable so that the overlay will be fully rendered\n // before attempting to position it, as the position may depend on the size of the rendered\n // content.\n this._ngZone.onStable.pipe(take(1)).subscribe(() => {\n // The overlay could've been detached before the zone has stabilized.\n if (this.hasAttached()) {\n this.updatePosition();\n }\n });\n // Enable pointer events for the overlay pane element.\n this._togglePointerEvents(true);\n if (this._config.hasBackdrop) {\n this._attachBackdrop();\n }\n if (this._config.panelClass) {\n this._toggleClasses(this._pane, this._config.panelClass, true);\n }\n // Only emit the `attachments` event once all other setup is done.\n this._attachments.next();\n // Track this overlay by the keyboard dispatcher\n this._keyboardDispatcher.add(this);\n if (this._config.disposeOnNavigation) {\n this._locationChanges = this._location.subscribe(() => this.dispose());\n }\n this._outsideClickDispatcher.add(this);\n // TODO(crisbeto): the null check is here, because the portal outlet returns `any`.\n // We should be guaranteed for the result to be `ComponentRef | EmbeddedViewRef`, but\n // `instanceof EmbeddedViewRef` doesn't appear to work at the moment.\n if (typeof attachResult?.onDestroy === 'function') {\n // In most cases we control the portal and we know when it is being detached so that\n // we can finish the disposal process. The exception is if the user passes in a custom\n // `ViewContainerRef` that isn't destroyed through the overlay API. Note that we use\n // `detach` here instead of `dispose`, because we don't know if the user intends to\n // reattach the overlay at a later point. It also has the advantage of waiting for animations.\n attachResult.onDestroy(() => {\n if (this.hasAttached()) {\n // We have to delay the `detach` call, because detaching immediately prevents\n // other destroy hooks from running. This is likely a framework bug similar to\n // https://github.com/angular/angular/issues/46119\n this._ngZone.runOutsideAngular(() => Promise.resolve().then(() => this.detach()));\n }\n });\n }\n return attachResult;\n }\n /**\n * Detaches an overlay from a portal.\n * @returns The portal detachment result.\n */\n detach() {\n if (!this.hasAttached()) {\n return;\n }\n this.detachBackdrop();\n // When the overlay is detached, the pane element should disable pointer events.\n // This is necessary because otherwise the pane element will cover the page and disable\n // pointer events therefore. Depends on the position strategy and the applied pane boundaries.\n this._togglePointerEvents(false);\n if (this._positionStrategy && this._positionStrategy.detach) {\n this._positionStrategy.detach();\n }\n if (this._scrollStrategy) {\n this._scrollStrategy.disable();\n }\n const detachmentResult = this._portalOutlet.detach();\n // Only emit after everything is detached.\n this._detachments.next();\n // Remove this overlay from keyboard dispatcher tracking.\n this._keyboardDispatcher.remove(this);\n // Keeping the host element in the DOM can cause scroll jank, because it still gets\n // rendered, even though it's transparent and unclickable which is why we remove it.\n this._detachContentWhenStable();\n this._locationChanges.unsubscribe();\n this._outsideClickDispatcher.remove(this);\n return detachmentResult;\n }\n /** Cleans up the overlay from the DOM. */\n dispose() {\n const isAttached = this.hasAttached();\n if (this._positionStrategy) {\n this._positionStrategy.dispose();\n }\n this._disposeScrollStrategy();\n this._disposeBackdrop(this._backdropElement);\n this._locationChanges.unsubscribe();\n this._keyboardDispatcher.remove(this);\n this._portalOutlet.dispose();\n this._attachments.complete();\n this._backdropClick.complete();\n this._keydownEvents.complete();\n this._outsidePointerEvents.complete();\n this._outsideClickDispatcher.remove(this);\n this._host?.remove();\n this._previousHostParent = this._pane = this._host = null;\n if (isAttached) {\n this._detachments.next();\n }\n this._detachments.complete();\n }\n /** Whether the overlay has attached content. */\n hasAttached() {\n return this._portalOutlet.hasAttached();\n }\n /** Gets an observable that emits when the backdrop has been clicked. */\n backdropClick() {\n return this._backdropClick;\n }\n /** Gets an observable that emits when the overlay has been attached. */\n attachments() {\n return this._attachments;\n }\n /** Gets an observable that emits when the overlay has been detached. */\n detachments() {\n return this._detachments;\n }\n /** Gets an observable of keydown events targeted to this overlay. */\n keydownEvents() {\n return this._keydownEvents;\n }\n /** Gets an observable of pointer events targeted outside this overlay. */\n outsidePointerEvents() {\n return this._outsidePointerEvents;\n }\n /** Gets the current overlay configuration, which is immutable. */\n getConfig() {\n return this._config;\n }\n /** Updates the position of the overlay based on the position strategy. */\n updatePosition() {\n if (this._positionStrategy) {\n this._positionStrategy.apply();\n }\n }\n /** Switches to a new position strategy and updates the overlay position. */\n updatePositionStrategy(strategy) {\n if (strategy === this._positionStrategy) {\n return;\n }\n if (this._positionStrategy) {\n this._positionStrategy.dispose();\n }\n this._positionStrategy = strategy;\n if (this.hasAttached()) {\n strategy.attach(this);\n this.updatePosition();\n }\n }\n /** Update the size properties of the overlay. */\n updateSize(sizeConfig) {\n this._config = {\n ...this._config,\n ...sizeConfig\n };\n this._updateElementSize();\n }\n /** Sets the LTR/RTL direction for the overlay. */\n setDirection(dir) {\n this._config = {\n ...this._config,\n direction: dir\n };\n this._updateElementDirection();\n }\n /** Add a CSS class or an array of classes to the overlay pane. */\n addPanelClass(classes) {\n if (this._pane) {\n this._toggleClasses(this._pane, classes, true);\n }\n }\n /** Remove a CSS class or an array of classes from the overlay pane. */\n removePanelClass(classes) {\n if (this._pane) {\n this._toggleClasses(this._pane, classes, false);\n }\n }\n /**\n * Returns the layout direction of the overlay panel.\n */\n getDirection() {\n const direction = this._config.direction;\n if (!direction) {\n return 'ltr';\n }\n return typeof direction === 'string' ? direction : direction.value;\n }\n /** Switches to a new scroll strategy. */\n updateScrollStrategy(strategy) {\n if (strategy === this._scrollStrategy) {\n return;\n }\n this._disposeScrollStrategy();\n this._scrollStrategy = strategy;\n if (this.hasAttached()) {\n strategy.attach(this);\n strategy.enable();\n }\n }\n /** Updates the text direction of the overlay panel. */\n _updateElementDirection() {\n this._host.setAttribute('dir', this.getDirection());\n }\n /** Updates the size of the overlay element based on the overlay config. */\n _updateElementSize() {\n if (!this._pane) {\n return;\n }\n const style = this._pane.style;\n style.width = coerceCssPixelValue(this._config.width);\n style.height = coerceCssPixelValue(this._config.height);\n style.minWidth = coerceCssPixelValue(this._config.minWidth);\n style.minHeight = coerceCssPixelValue(this._config.minHeight);\n style.maxWidth = coerceCssPixelValue(this._config.maxWidth);\n style.maxHeight = coerceCssPixelValue(this._config.maxHeight);\n }\n /** Toggles the pointer events for the overlay pane element. */\n _togglePointerEvents(enablePointer) {\n this._pane.style.pointerEvents = enablePointer ? '' : 'none';\n }\n /** Attaches a backdrop for this overlay. */\n _attachBackdrop() {\n const showingClass = 'cdk-overlay-backdrop-showing';\n this._backdropElement = this._document.createElement('div');\n this._backdropElement.classList.add('cdk-overlay-backdrop');\n if (this._animationsDisabled) {\n this._backdropElement.classList.add('cdk-overlay-backdrop-noop-animation');\n }\n if (this._config.backdropClass) {\n this._toggleClasses(this._backdropElement, this._config.backdropClass, true);\n }\n // Insert the backdrop before the pane in the DOM order,\n // in order to handle stacked overlays properly.\n this._host.parentElement.insertBefore(this._backdropElement, this._host);\n // Forward backdrop clicks such that the consumer of the overlay can perform whatever\n // action desired when such a click occurs (usually closing the overlay).\n this._backdropElement.addEventListener('click', this._backdropClickHandler);\n // Add class to fade-in the backdrop after one frame.\n if (!this._animationsDisabled && typeof requestAnimationFrame !== 'undefined') {\n this._ngZone.runOutsideAngular(() => {\n requestAnimationFrame(() => {\n if (this._backdropElement) {\n this._backdropElement.classList.add(showingClass);\n }\n });\n });\n } else {\n this._backdropElement.classList.add(showingClass);\n }\n }\n /**\n * Updates the stacking order of the element, moving it to the top if necessary.\n * This is required in cases where one overlay was detached, while another one,\n * that should be behind it, was destroyed. The next time both of them are opened,\n * the stacking will be wrong, because the detached element's pane will still be\n * in its original DOM position.\n */\n _updateStackingOrder() {\n if (this._host.nextSibling) {\n this._host.parentNode.appendChild(this._host);\n }\n }\n /** Detaches the backdrop (if any) associated with the overlay. */\n detachBackdrop() {\n const backdropToDetach = this._backdropElement;\n if (!backdropToDetach) {\n return;\n }\n if (this._animationsDisabled) {\n this._disposeBackdrop(backdropToDetach);\n return;\n }\n backdropToDetach.classList.remove('cdk-overlay-backdrop-showing');\n this._ngZone.runOutsideAngular(() => {\n backdropToDetach.addEventListener('transitionend', this._backdropTransitionendHandler);\n });\n // If the backdrop doesn't have a transition, the `transitionend` event won't fire.\n // In this case we make it unclickable and we try to remove it after a delay.\n backdropToDetach.style.pointerEvents = 'none';\n // Run this outside the Angular zone because there's nothing that Angular cares about.\n // If it were to run inside the Angular zone, every test that used Overlay would have to be\n // either async or fakeAsync.\n this._backdropTimeout = this._ngZone.runOutsideAngular(() => setTimeout(() => {\n this._disposeBackdrop(backdropToDetach);\n }, 500));\n }\n /** Toggles a single CSS class or an array of classes on an element. */\n _toggleClasses(element, cssClasses, isAdd) {\n const classes = coerceArray(cssClasses || []).filter(c => !!c);\n if (classes.length) {\n isAdd ? element.classList.add(...classes) : element.classList.remove(...classes);\n }\n }\n /** Detaches the overlay content next time the zone stabilizes. */\n _detachContentWhenStable() {\n // Normally we wouldn't have to explicitly run this outside the `NgZone`, however\n // if the consumer is using `zone-patch-rxjs`, the `Subscription.unsubscribe` call will\n // be patched to run inside the zone, which will throw us into an infinite loop.\n this._ngZone.runOutsideAngular(() => {\n // We can't remove the host here immediately, because the overlay pane's content\n // might still be animating. This stream helps us avoid interrupting the animation\n // by waiting for the pane to become empty.\n const subscription = this._ngZone.onStable.pipe(takeUntil(merge(this._attachments, this._detachments))).subscribe(() => {\n // Needs a couple of checks for the pane and host, because\n // they may have been removed by the time the zone stabilizes.\n if (!this._pane || !this._host || this._pane.children.length === 0) {\n if (this._pane && this._config.panelClass) {\n this._toggleClasses(this._pane, this._config.panelClass, false);\n }\n if (this._host && this._host.parentElement) {\n this._previousHostParent = this._host.parentElement;\n this._host.remove();\n }\n subscription.unsubscribe();\n }\n });\n });\n }\n /** Disposes of a scroll strategy. */\n _disposeScrollStrategy() {\n const scrollStrategy = this._scrollStrategy;\n if (scrollStrategy) {\n scrollStrategy.disable();\n if (scrollStrategy.detach) {\n scrollStrategy.detach();\n }\n }\n }\n /** Removes a backdrop element from the DOM. */\n _disposeBackdrop(backdrop) {\n if (backdrop) {\n backdrop.removeEventListener('click', this._backdropClickHandler);\n backdrop.removeEventListener('transitionend', this._backdropTransitionendHandler);\n backdrop.remove();\n // It is possible that a new portal has been attached to this overlay since we started\n // removing the backdrop. If that is the case, only clear the backdrop reference if it\n // is still the same instance that we started to remove.\n if (this._backdropElement === backdrop) {\n this._backdropElement = null;\n }\n }\n if (this._backdropTimeout) {\n clearTimeout(this._backdropTimeout);\n this._backdropTimeout = undefined;\n }\n }\n}\n\n// TODO: refactor clipping detection into a separate thing (part of scrolling module)\n// TODO: doesn't handle both flexible width and height when it has to scroll along both axis.\n/** Class to be added to the overlay bounding box. */\nconst boundingBoxClass = 'cdk-overlay-connected-position-bounding-box';\n/** Regex used to split a string on its CSS units. */\nconst cssUnitPattern = /([A-Za-z%]+)$/;\n/**\n * A strategy for positioning overlays. Using this strategy, an overlay is given an\n * implicit position relative some origin element. The relative position is defined in terms of\n * a point on the origin element that is connected to a point on the overlay element. For example,\n * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner\n * of the overlay.\n */\nclass FlexibleConnectedPositionStrategy {\n /** Ordered list of preferred positions, from most to least desirable. */\n get positions() {\n return this._preferredPositions;\n }\n constructor(connectedTo, _viewportRuler, _document, _platform, _overlayContainer) {\n this._viewportRuler = _viewportRuler;\n this._document = _document;\n this._platform = _platform;\n this._overlayContainer = _overlayContainer;\n /** Last size used for the bounding box. Used to avoid resizing the overlay after open. */\n this._lastBoundingBoxSize = {\n width: 0,\n height: 0\n };\n /** Whether the overlay was pushed in a previous positioning. */\n this._isPushed = false;\n /** Whether the overlay can be pushed on-screen on the initial open. */\n this._canPush = true;\n /** Whether the overlay can grow via flexible width/height after the initial open. */\n this._growAfterOpen = false;\n /** Whether the overlay's width and height can be constrained to fit within the viewport. */\n this._hasFlexibleDimensions = true;\n /** Whether the overlay position is locked. */\n this._positionLocked = false;\n /** Amount of space that must be maintained between the overlay and the edge of the viewport. */\n this._viewportMargin = 0;\n /** The Scrollable containers used to check scrollable view properties on position change. */\n this._scrollables = [];\n /** Ordered list of preferred positions, from most to least desirable. */\n this._preferredPositions = [];\n /** Subject that emits whenever the position changes. */\n this._positionChanges = new Subject();\n /** Subscription to viewport size changes. */\n this._resizeSubscription = Subscription.EMPTY;\n /** Default offset for the overlay along the x axis. */\n this._offsetX = 0;\n /** Default offset for the overlay along the y axis. */\n this._offsetY = 0;\n /** Keeps track of the CSS classes that the position strategy has applied on the overlay panel. */\n this._appliedPanelClasses = [];\n /** Observable sequence of position changes. */\n this.positionChanges = this._positionChanges;\n this.setOrigin(connectedTo);\n }\n /** Attaches this position strategy to an overlay. */\n attach(overlayRef) {\n if (this._overlayRef && overlayRef !== this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('This position strategy is already attached to an overlay');\n }\n this._validatePositions();\n overlayRef.hostElement.classList.add(boundingBoxClass);\n this._overlayRef = overlayRef;\n this._boundingBox = overlayRef.hostElement;\n this._pane = overlayRef.overlayElement;\n this._isDisposed = false;\n this._isInitialRender = true;\n this._lastPosition = null;\n this._resizeSubscription.unsubscribe();\n this._resizeSubscription = this._viewportRuler.change().subscribe(() => {\n // When the window is resized, we want to trigger the next reposition as if it\n // was an initial render, in order for the strategy to pick a new optimal position,\n // otherwise position locking will cause it to stay at the old one.\n this._isInitialRender = true;\n this.apply();\n });\n }\n /**\n * Updates the position of the overlay element, using whichever preferred position relative\n * to the origin best fits on-screen.\n *\n * The selection of a position goes as follows:\n * - If any positions fit completely within the viewport as-is,\n * choose the first position that does so.\n * - If flexible dimensions are enabled and at least one satisfies the given minimum width/height,\n * choose the position with the greatest available size modified by the positions' weight.\n * - If pushing is enabled, take the position that went off-screen the least and push it\n * on-screen.\n * - If none of the previous criteria were met, use the position that goes off-screen the least.\n * @docs-private\n */\n apply() {\n // We shouldn't do anything if the strategy was disposed or we're on the server.\n if (this._isDisposed || !this._platform.isBrowser) {\n return;\n }\n // If the position has been applied already (e.g. when the overlay was opened) and the\n // consumer opted into locking in the position, re-use the old position, in order to\n // prevent the overlay from jumping around.\n if (!this._isInitialRender && this._positionLocked && this._lastPosition) {\n this.reapplyLastPosition();\n return;\n }\n this._clearPanelClasses();\n this._resetOverlayElementStyles();\n this._resetBoundingBoxStyles();\n // We need the bounding rects for the origin, the overlay and the container to determine how to position\n // the overlay relative to the origin.\n // We use the viewport rect to determine whether a position would go off-screen.\n this._viewportRect = this._getNarrowedViewportRect();\n this._originRect = this._getOriginRect();\n this._overlayRect = this._pane.getBoundingClientRect();\n this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();\n const originRect = this._originRect;\n const overlayRect = this._overlayRect;\n const viewportRect = this._viewportRect;\n const containerRect = this._containerRect;\n // Positions where the overlay will fit with flexible dimensions.\n const flexibleFits = [];\n // Fallback if none of the preferred positions fit within the viewport.\n let fallback;\n // Go through each of the preferred positions looking for a good fit.\n // If a good fit is found, it will be applied immediately.\n for (let pos of this._preferredPositions) {\n // Get the exact (x, y) coordinate for the point-of-origin on the origin element.\n let originPoint = this._getOriginPoint(originRect, containerRect, pos);\n // From that point-of-origin, get the exact (x, y) coordinate for the top-left corner of the\n // overlay in this position. We use the top-left corner for calculations and later translate\n // this into an appropriate (top, left, bottom, right) style.\n let overlayPoint = this._getOverlayPoint(originPoint, overlayRect, pos);\n // Calculate how well the overlay would fit into the viewport with this point.\n let overlayFit = this._getOverlayFit(overlayPoint, overlayRect, viewportRect, pos);\n // If the overlay, without any further work, fits into the viewport, use this position.\n if (overlayFit.isCompletelyWithinViewport) {\n this._isPushed = false;\n this._applyPosition(pos, originPoint);\n return;\n }\n // If the overlay has flexible dimensions, we can use this position\n // so long as there's enough space for the minimum dimensions.\n if (this._canFitWithFlexibleDimensions(overlayFit, overlayPoint, viewportRect)) {\n // Save positions where the overlay will fit with flexible dimensions. We will use these\n // if none of the positions fit *without* flexible dimensions.\n flexibleFits.push({\n position: pos,\n origin: originPoint,\n overlayRect,\n boundingBoxRect: this._calculateBoundingBoxRect(originPoint, pos)\n });\n continue;\n }\n // If the current preferred position does not fit on the screen, remember the position\n // if it has more visible area on-screen than we've seen and move onto the next preferred\n // position.\n if (!fallback || fallback.overlayFit.visibleArea < overlayFit.visibleArea) {\n fallback = {\n overlayFit,\n overlayPoint,\n originPoint,\n position: pos,\n overlayRect\n };\n }\n }\n // If there are any positions where the overlay would fit with flexible dimensions, choose the\n // one that has the greatest area available modified by the position's weight\n if (flexibleFits.length) {\n let bestFit = null;\n let bestScore = -1;\n for (const fit of flexibleFits) {\n const score = fit.boundingBoxRect.width * fit.boundingBoxRect.height * (fit.position.weight || 1);\n if (score > bestScore) {\n bestScore = score;\n bestFit = fit;\n }\n }\n this._isPushed = false;\n this._applyPosition(bestFit.position, bestFit.origin);\n return;\n }\n // When none of the preferred positions fit within the viewport, take the position\n // that went off-screen the least and attempt to push it on-screen.\n if (this._canPush) {\n // TODO(jelbourn): after pushing, the opening \"direction\" of the overlay might not make sense.\n this._isPushed = true;\n this._applyPosition(fallback.position, fallback.originPoint);\n return;\n }\n // All options for getting the overlay within the viewport have been exhausted, so go with the\n // position that went off-screen the least.\n this._applyPosition(fallback.position, fallback.originPoint);\n }\n detach() {\n this._clearPanelClasses();\n this._lastPosition = null;\n this._previousPushAmount = null;\n this._resizeSubscription.unsubscribe();\n }\n /** Cleanup after the element gets destroyed. */\n dispose() {\n if (this._isDisposed) {\n return;\n }\n // We can't use `_resetBoundingBoxStyles` here, because it resets\n // some properties to zero, rather than removing them.\n if (this._boundingBox) {\n extendStyles(this._boundingBox.style, {\n top: '',\n left: '',\n right: '',\n bottom: '',\n height: '',\n width: '',\n alignItems: '',\n justifyContent: ''\n });\n }\n if (this._pane) {\n this._resetOverlayElementStyles();\n }\n if (this._overlayRef) {\n this._overlayRef.hostElement.classList.remove(boundingBoxClass);\n }\n this.detach();\n this._positionChanges.complete();\n this._overlayRef = this._boundingBox = null;\n this._isDisposed = true;\n }\n /**\n * This re-aligns the overlay element with the trigger in its last calculated position,\n * even if a position higher in the \"preferred positions\" list would now fit. This\n * allows one to re-align the panel without changing the orientation of the panel.\n */\n reapplyLastPosition() {\n if (this._isDisposed || !this._platform.isBrowser) {\n return;\n }\n const lastPosition = this._lastPosition;\n if (lastPosition) {\n this._originRect = this._getOriginRect();\n this._overlayRect = this._pane.getBoundingClientRect();\n this._viewportRect = this._getNarrowedViewportRect();\n this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();\n const originPoint = this._getOriginPoint(this._originRect, this._containerRect, lastPosition);\n this._applyPosition(lastPosition, originPoint);\n } else {\n this.apply();\n }\n }\n /**\n * Sets the list of Scrollable containers that host the origin element so that\n * on reposition we can evaluate if it or the overlay has been clipped or outside view. Every\n * Scrollable must be an ancestor element of the strategy's origin element.\n */\n withScrollableContainers(scrollables) {\n this._scrollables = scrollables;\n return this;\n }\n /**\n * Adds new preferred positions.\n * @param positions List of positions options for this overlay.\n */\n withPositions(positions) {\n this._preferredPositions = positions;\n // If the last calculated position object isn't part of the positions anymore, clear\n // it in order to avoid it being picked up if the consumer tries to re-apply.\n if (positions.indexOf(this._lastPosition) === -1) {\n this._lastPosition = null;\n }\n this._validatePositions();\n return this;\n }\n /**\n * Sets a minimum distance the overlay may be positioned to the edge of the viewport.\n * @param margin Required margin between the overlay and the viewport edge in pixels.\n */\n withViewportMargin(margin) {\n this._viewportMargin = margin;\n return this;\n }\n /** Sets whether the overlay's width and height can be constrained to fit within the viewport. */\n withFlexibleDimensions(flexibleDimensions = true) {\n this._hasFlexibleDimensions = flexibleDimensions;\n return this;\n }\n /** Sets whether the overlay can grow after the initial open via flexible width/height. */\n withGrowAfterOpen(growAfterOpen = true) {\n this._growAfterOpen = growAfterOpen;\n return this;\n }\n /** Sets whether the overlay can be pushed on-screen if none of the provided positions fit. */\n withPush(canPush = true) {\n this._canPush = canPush;\n return this;\n }\n /**\n * Sets whether the overlay's position should be locked in after it is positioned\n * initially. When an overlay is locked in, it won't attempt to reposition itself\n * when the position is re-applied (e.g. when the user scrolls away).\n * @param isLocked Whether the overlay should locked in.\n */\n withLockedPosition(isLocked = true) {\n this._positionLocked = isLocked;\n return this;\n }\n /**\n * Sets the origin, relative to which to position the overlay.\n * Using an element origin is useful for building components that need to be positioned\n * relatively to a trigger (e.g. dropdown menus or tooltips), whereas using a point can be\n * used for cases like contextual menus which open relative to the user's pointer.\n * @param origin Reference to the new origin.\n */\n setOrigin(origin) {\n this._origin = origin;\n return this;\n }\n /**\n * Sets the default offset for the overlay's connection point on the x-axis.\n * @param offset New offset in the X axis.\n */\n withDefaultOffsetX(offset) {\n this._offsetX = offset;\n return this;\n }\n /**\n * Sets the default offset for the overlay's connection point on the y-axis.\n * @param offset New offset in the Y axis.\n */\n withDefaultOffsetY(offset) {\n this._offsetY = offset;\n return this;\n }\n /**\n * Configures that the position strategy should set a `transform-origin` on some elements\n * inside the overlay, depending on the current position that is being applied. This is\n * useful for the cases where the origin of an animation can change depending on the\n * alignment of the overlay.\n * @param selector CSS selector that will be used to find the target\n * elements onto which to set the transform origin.\n */\n withTransformOriginOn(selector) {\n this._transformOriginSelector = selector;\n return this;\n }\n /**\n * Gets the (x, y) coordinate of a connection point on the origin based on a relative position.\n */\n _getOriginPoint(originRect, containerRect, pos) {\n let x;\n if (pos.originX == 'center') {\n // Note: when centering we should always use the `left`\n // offset, otherwise the position will be wrong in RTL.\n x = originRect.left + originRect.width / 2;\n } else {\n const startX = this._isRtl() ? originRect.right : originRect.left;\n const endX = this._isRtl() ? originRect.left : originRect.right;\n x = pos.originX == 'start' ? startX : endX;\n }\n // When zooming in Safari the container rectangle contains negative values for the position\n // and we need to re-add them to the calculated coordinates.\n if (containerRect.left < 0) {\n x -= containerRect.left;\n }\n let y;\n if (pos.originY == 'center') {\n y = originRect.top + originRect.height / 2;\n } else {\n y = pos.originY == 'top' ? originRect.top : originRect.bottom;\n }\n // Normally the containerRect's top value would be zero, however when the overlay is attached to an input\n // (e.g. in an autocomplete), mobile browsers will shift everything in order to put the input in the middle\n // of the screen and to make space for the virtual keyboard. We need to account for this offset,\n // otherwise our positioning will be thrown off.\n // Additionally, when zooming in Safari this fixes the vertical position.\n if (containerRect.top < 0) {\n y -= containerRect.top;\n }\n return {\n x,\n y\n };\n }\n /**\n * Gets the (x, y) coordinate of the top-left corner of the overlay given a given position and\n * origin point to which the overlay should be connected.\n */\n _getOverlayPoint(originPoint, overlayRect, pos) {\n // Calculate the (overlayStartX, overlayStartY), the start of the\n // potential overlay position relative to the origin point.\n let overlayStartX;\n if (pos.overlayX == 'center') {\n overlayStartX = -overlayRect.width / 2;\n } else if (pos.overlayX === 'start') {\n overlayStartX = this._isRtl() ? -overlayRect.width : 0;\n } else {\n overlayStartX = this._isRtl() ? 0 : -overlayRect.width;\n }\n let overlayStartY;\n if (pos.overlayY == 'center') {\n overlayStartY = -overlayRect.height / 2;\n } else {\n overlayStartY = pos.overlayY == 'top' ? 0 : -overlayRect.height;\n }\n // The (x, y) coordinates of the overlay.\n return {\n x: originPoint.x + overlayStartX,\n y: originPoint.y + overlayStartY\n };\n }\n /** Gets how well an overlay at the given point will fit within the viewport. */\n _getOverlayFit(point, rawOverlayRect, viewport, position) {\n // Round the overlay rect when comparing against the\n // viewport, because the viewport is always rounded.\n const overlay = getRoundedBoundingClientRect(rawOverlayRect);\n let {\n x,\n y\n } = point;\n let offsetX = this._getOffset(position, 'x');\n let offsetY = this._getOffset(position, 'y');\n // Account for the offsets since they could push the overlay out of the viewport.\n if (offsetX) {\n x += offsetX;\n }\n if (offsetY) {\n y += offsetY;\n }\n // How much the overlay would overflow at this position, on each side.\n let leftOverflow = 0 - x;\n let rightOverflow = x + overlay.width - viewport.width;\n let topOverflow = 0 - y;\n let bottomOverflow = y + overlay.height - viewport.height;\n // Visible parts of the element on each axis.\n let visibleWidth = this._subtractOverflows(overlay.width, leftOverflow, rightOverflow);\n let visibleHeight = this._subtractOverflows(overlay.height, topOverflow, bottomOverflow);\n let visibleArea = visibleWidth * visibleHeight;\n return {\n visibleArea,\n isCompletelyWithinViewport: overlay.width * overlay.height === visibleArea,\n fitsInViewportVertically: visibleHeight === overlay.height,\n fitsInViewportHorizontally: visibleWidth == overlay.width\n };\n }\n /**\n * Whether the overlay can fit within the viewport when it may resize either its width or height.\n * @param fit How well the overlay fits in the viewport at some position.\n * @param point The (x, y) coordinates of the overlay at some position.\n * @param viewport The geometry of the viewport.\n */\n _canFitWithFlexibleDimensions(fit, point, viewport) {\n if (this._hasFlexibleDimensions) {\n const availableHeight = viewport.bottom - point.y;\n const availableWidth = viewport.right - point.x;\n const minHeight = getPixelValue(this._overlayRef.getConfig().minHeight);\n const minWidth = getPixelValue(this._overlayRef.getConfig().minWidth);\n const verticalFit = fit.fitsInViewportVertically || minHeight != null && minHeight <= availableHeight;\n const horizontalFit = fit.fitsInViewportHorizontally || minWidth != null && minWidth <= availableWidth;\n return verticalFit && horizontalFit;\n }\n return false;\n }\n /**\n * Gets the point at which the overlay can be \"pushed\" on-screen. If the overlay is larger than\n * the viewport, the top-left corner will be pushed on-screen (with overflow occurring on the\n * right and bottom).\n *\n * @param start Starting point from which the overlay is pushed.\n * @param rawOverlayRect Dimensions of the overlay.\n * @param scrollPosition Current viewport scroll position.\n * @returns The point at which to position the overlay after pushing. This is effectively a new\n * originPoint.\n */\n _pushOverlayOnScreen(start, rawOverlayRect, scrollPosition) {\n // If the position is locked and we've pushed the overlay already, reuse the previous push\n // amount, rather than pushing it again. If we were to continue pushing, the element would\n // remain in the viewport, which goes against the expectations when position locking is enabled.\n if (this._previousPushAmount && this._positionLocked) {\n return {\n x: start.x + this._previousPushAmount.x,\n y: start.y + this._previousPushAmount.y\n };\n }\n // Round the overlay rect when comparing against the\n // viewport, because the viewport is always rounded.\n const overlay = getRoundedBoundingClientRect(rawOverlayRect);\n const viewport = this._viewportRect;\n // Determine how much the overlay goes outside the viewport on each\n // side, which we'll use to decide which direction to push it.\n const overflowRight = Math.max(start.x + overlay.width - viewport.width, 0);\n const overflowBottom = Math.max(start.y + overlay.height - viewport.height, 0);\n const overflowTop = Math.max(viewport.top - scrollPosition.top - start.y, 0);\n const overflowLeft = Math.max(viewport.left - scrollPosition.left - start.x, 0);\n // Amount by which to push the overlay in each axis such that it remains on-screen.\n let pushX = 0;\n let pushY = 0;\n // If the overlay fits completely within the bounds of the viewport, push it from whichever\n // direction is goes off-screen. Otherwise, push the top-left corner such that its in the\n // viewport and allow for the trailing end of the overlay to go out of bounds.\n if (overlay.width <= viewport.width) {\n pushX = overflowLeft || -overflowRight;\n } else {\n pushX = start.x < this._viewportMargin ? viewport.left - scrollPosition.left - start.x : 0;\n }\n if (overlay.height <= viewport.height) {\n pushY = overflowTop || -overflowBottom;\n } else {\n pushY = start.y < this._viewportMargin ? viewport.top - scrollPosition.top - start.y : 0;\n }\n this._previousPushAmount = {\n x: pushX,\n y: pushY\n };\n return {\n x: start.x + pushX,\n y: start.y + pushY\n };\n }\n /**\n * Applies a computed position to the overlay and emits a position change.\n * @param position The position preference\n * @param originPoint The point on the origin element where the overlay is connected.\n */\n _applyPosition(position, originPoint) {\n this._setTransformOrigin(position);\n this._setOverlayElementStyles(originPoint, position);\n this._setBoundingBoxStyles(originPoint, position);\n if (position.panelClass) {\n this._addPanelClasses(position.panelClass);\n }\n // Save the last connected position in case the position needs to be re-calculated.\n this._lastPosition = position;\n // Notify that the position has been changed along with its change properties.\n // We only emit if we've got any subscriptions, because the scroll visibility\n // calculations can be somewhat expensive.\n if (this._positionChanges.observers.length) {\n const scrollableViewProperties = this._getScrollVisibility();\n const changeEvent = new ConnectedOverlayPositionChange(position, scrollableViewProperties);\n this._positionChanges.next(changeEvent);\n }\n this._isInitialRender = false;\n }\n /** Sets the transform origin based on the configured selector and the passed-in position. */\n _setTransformOrigin(position) {\n if (!this._transformOriginSelector) {\n return;\n }\n const elements = this._boundingBox.querySelectorAll(this._transformOriginSelector);\n let xOrigin;\n let yOrigin = position.overlayY;\n if (position.overlayX === 'center') {\n xOrigin = 'center';\n } else if (this._isRtl()) {\n xOrigin = position.overlayX === 'start' ? 'right' : 'left';\n } else {\n xOrigin = position.overlayX === 'start' ? 'left' : 'right';\n }\n for (let i = 0; i < elements.length; i++) {\n elements[i].style.transformOrigin = `${xOrigin} ${yOrigin}`;\n }\n }\n /**\n * Gets the position and size of the overlay's sizing container.\n *\n * This method does no measuring and applies no styles so that we can cheaply compute the\n * bounds for all positions and choose the best fit based on these results.\n */\n _calculateBoundingBoxRect(origin, position) {\n const viewport = this._viewportRect;\n const isRtl = this._isRtl();\n let height, top, bottom;\n if (position.overlayY === 'top') {\n // Overlay is opening \"downward\" and thus is bound by the bottom viewport edge.\n top = origin.y;\n height = viewport.height - top + this._viewportMargin;\n } else if (position.overlayY === 'bottom') {\n // Overlay is opening \"upward\" and thus is bound by the top viewport edge. We need to add\n // the viewport margin back in, because the viewport rect is narrowed down to remove the\n // margin, whereas the `origin` position is calculated based on its `ClientRect`.\n bottom = viewport.height - origin.y + this._viewportMargin * 2;\n height = viewport.height - bottom + this._viewportMargin;\n } else {\n // If neither top nor bottom, it means that the overlay is vertically centered on the\n // origin point. Note that we want the position relative to the viewport, rather than\n // the page, which is why we don't use something like `viewport.bottom - origin.y` and\n // `origin.y - viewport.top`.\n const smallestDistanceToViewportEdge = Math.min(viewport.bottom - origin.y + viewport.top, origin.y);\n const previousHeight = this._lastBoundingBoxSize.height;\n height = smallestDistanceToViewportEdge * 2;\n top = origin.y - smallestDistanceToViewportEdge;\n if (height > previousHeight && !this._isInitialRender && !this._growAfterOpen) {\n top = origin.y - previousHeight / 2;\n }\n }\n // The overlay is opening 'right-ward' (the content flows to the right).\n const isBoundedByRightViewportEdge = position.overlayX === 'start' && !isRtl || position.overlayX === 'end' && isRtl;\n // The overlay is opening 'left-ward' (the content flows to the left).\n const isBoundedByLeftViewportEdge = position.overlayX === 'end' && !isRtl || position.overlayX === 'start' && isRtl;\n let width, left, right;\n if (isBoundedByLeftViewportEdge) {\n right = viewport.width - origin.x + this._viewportMargin;\n width = origin.x - this._viewportMargin;\n } else if (isBoundedByRightViewportEdge) {\n left = origin.x;\n width = viewport.right - origin.x;\n } else {\n // If neither start nor end, it means that the overlay is horizontally centered on the\n // origin point. Note that we want the position relative to the viewport, rather than\n // the page, which is why we don't use something like `viewport.right - origin.x` and\n // `origin.x - viewport.left`.\n const smallestDistanceToViewportEdge = Math.min(viewport.right - origin.x + viewport.left, origin.x);\n const previousWidth = this._lastBoundingBoxSize.width;\n width = smallestDistanceToViewportEdge * 2;\n left = origin.x - smallestDistanceToViewportEdge;\n if (width > previousWidth && !this._isInitialRender && !this._growAfterOpen) {\n left = origin.x - previousWidth / 2;\n }\n }\n return {\n top: top,\n left: left,\n bottom: bottom,\n right: right,\n width,\n height\n };\n }\n /**\n * Sets the position and size of the overlay's sizing wrapper. The wrapper is positioned on the\n * origin's connection point and stretches to the bounds of the viewport.\n *\n * @param origin The point on the origin element where the overlay is connected.\n * @param position The position preference\n */\n _setBoundingBoxStyles(origin, position) {\n const boundingBoxRect = this._calculateBoundingBoxRect(origin, position);\n // It's weird if the overlay *grows* while scrolling, so we take the last size into account\n // when applying a new size.\n if (!this._isInitialRender && !this._growAfterOpen) {\n boundingBoxRect.height = Math.min(boundingBoxRect.height, this._lastBoundingBoxSize.height);\n boundingBoxRect.width = Math.min(boundingBoxRect.width, this._lastBoundingBoxSize.width);\n }\n const styles = {};\n if (this._hasExactPosition()) {\n styles.top = styles.left = '0';\n styles.bottom = styles.right = styles.maxHeight = styles.maxWidth = '';\n styles.width = styles.height = '100%';\n } else {\n const maxHeight = this._overlayRef.getConfig().maxHeight;\n const maxWidth = this._overlayRef.getConfig().maxWidth;\n styles.height = coerceCssPixelValue(boundingBoxRect.height);\n styles.top = coerceCssPixelValue(boundingBoxRect.top);\n styles.bottom = coerceCssPixelValue(boundingBoxRect.bottom);\n styles.width = coerceCssPixelValue(boundingBoxRect.width);\n styles.left = coerceCssPixelValue(boundingBoxRect.left);\n styles.right = coerceCssPixelValue(boundingBoxRect.right);\n // Push the pane content towards the proper direction.\n if (position.overlayX === 'center') {\n styles.alignItems = 'center';\n } else {\n styles.alignItems = position.overlayX === 'end' ? 'flex-end' : 'flex-start';\n }\n if (position.overlayY === 'center') {\n styles.justifyContent = 'center';\n } else {\n styles.justifyContent = position.overlayY === 'bottom' ? 'flex-end' : 'flex-start';\n }\n if (maxHeight) {\n styles.maxHeight = coerceCssPixelValue(maxHeight);\n }\n if (maxWidth) {\n styles.maxWidth = coerceCssPixelValue(maxWidth);\n }\n }\n this._lastBoundingBoxSize = boundingBoxRect;\n extendStyles(this._boundingBox.style, styles);\n }\n /** Resets the styles for the bounding box so that a new positioning can be computed. */\n _resetBoundingBoxStyles() {\n extendStyles(this._boundingBox.style, {\n top: '0',\n left: '0',\n right: '0',\n bottom: '0',\n height: '',\n width: '',\n alignItems: '',\n justifyContent: ''\n });\n }\n /** Resets the styles for the overlay pane so that a new positioning can be computed. */\n _resetOverlayElementStyles() {\n extendStyles(this._pane.style, {\n top: '',\n left: '',\n bottom: '',\n right: '',\n position: '',\n transform: ''\n });\n }\n /** Sets positioning styles to the overlay element. */\n _setOverlayElementStyles(originPoint, position) {\n const styles = {};\n const hasExactPosition = this._hasExactPosition();\n const hasFlexibleDimensions = this._hasFlexibleDimensions;\n const config = this._overlayRef.getConfig();\n if (hasExactPosition) {\n const scrollPosition = this._viewportRuler.getViewportScrollPosition();\n extendStyles(styles, this._getExactOverlayY(position, originPoint, scrollPosition));\n extendStyles(styles, this._getExactOverlayX(position, originPoint, scrollPosition));\n } else {\n styles.position = 'static';\n }\n // Use a transform to apply the offsets. We do this because the `center` positions rely on\n // being in the normal flex flow and setting a `top` / `left` at all will completely throw\n // off the position. We also can't use margins, because they won't have an effect in some\n // cases where the element doesn't have anything to \"push off of\". Finally, this works\n // better both with flexible and non-flexible positioning.\n let transformString = '';\n let offsetX = this._getOffset(position, 'x');\n let offsetY = this._getOffset(position, 'y');\n if (offsetX) {\n transformString += `translateX(${offsetX}px) `;\n }\n if (offsetY) {\n transformString += `translateY(${offsetY}px)`;\n }\n styles.transform = transformString.trim();\n // If a maxWidth or maxHeight is specified on the overlay, we remove them. We do this because\n // we need these values to both be set to \"100%\" for the automatic flexible sizing to work.\n // The maxHeight and maxWidth are set on the boundingBox in order to enforce the constraint.\n // Note that this doesn't apply when we have an exact position, in which case we do want to\n // apply them because they'll be cleared from the bounding box.\n if (config.maxHeight) {\n if (hasExactPosition) {\n styles.maxHeight = coerceCssPixelValue(config.maxHeight);\n } else if (hasFlexibleDimensions) {\n styles.maxHeight = '';\n }\n }\n if (config.maxWidth) {\n if (hasExactPosition) {\n styles.maxWidth = coerceCssPixelValue(config.maxWidth);\n } else if (hasFlexibleDimensions) {\n styles.maxWidth = '';\n }\n }\n extendStyles(this._pane.style, styles);\n }\n /** Gets the exact top/bottom for the overlay when not using flexible sizing or when pushing. */\n _getExactOverlayY(position, originPoint, scrollPosition) {\n // Reset any existing styles. This is necessary in case the\n // preferred position has changed since the last `apply`.\n let styles = {\n top: '',\n bottom: ''\n };\n let overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);\n if (this._isPushed) {\n overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);\n }\n // We want to set either `top` or `bottom` based on whether the overlay wants to appear\n // above or below the origin and the direction in which the element will expand.\n if (position.overlayY === 'bottom') {\n // When using `bottom`, we adjust the y position such that it is the distance\n // from the bottom of the viewport rather than the top.\n const documentHeight = this._document.documentElement.clientHeight;\n styles.bottom = `${documentHeight - (overlayPoint.y + this._overlayRect.height)}px`;\n } else {\n styles.top = coerceCssPixelValue(overlayPoint.y);\n }\n return styles;\n }\n /** Gets the exact left/right for the overlay when not using flexible sizing or when pushing. */\n _getExactOverlayX(position, originPoint, scrollPosition) {\n // Reset any existing styles. This is necessary in case the preferred position has\n // changed since the last `apply`.\n let styles = {\n left: '',\n right: ''\n };\n let overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);\n if (this._isPushed) {\n overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);\n }\n // We want to set either `left` or `right` based on whether the overlay wants to appear \"before\"\n // or \"after\" the origin, which determines the direction in which the element will expand.\n // For the horizontal axis, the meaning of \"before\" and \"after\" change based on whether the\n // page is in RTL or LTR.\n let horizontalStyleProperty;\n if (this._isRtl()) {\n horizontalStyleProperty = position.overlayX === 'end' ? 'left' : 'right';\n } else {\n horizontalStyleProperty = position.overlayX === 'end' ? 'right' : 'left';\n }\n // When we're setting `right`, we adjust the x position such that it is the distance\n // from the right edge of the viewport rather than the left edge.\n if (horizontalStyleProperty === 'right') {\n const documentWidth = this._document.documentElement.clientWidth;\n styles.right = `${documentWidth - (overlayPoint.x + this._overlayRect.width)}px`;\n } else {\n styles.left = coerceCssPixelValue(overlayPoint.x);\n }\n return styles;\n }\n /**\n * Gets the view properties of the trigger and overlay, including whether they are clipped\n * or completely outside the view of any of the strategy's scrollables.\n */\n _getScrollVisibility() {\n // Note: needs fresh rects since the position could've changed.\n const originBounds = this._getOriginRect();\n const overlayBounds = this._pane.getBoundingClientRect();\n // TODO(jelbourn): instead of needing all of the client rects for these scrolling containers\n // every time, we should be able to use the scrollTop of the containers if the size of those\n // containers hasn't changed.\n const scrollContainerBounds = this._scrollables.map(scrollable => {\n return scrollable.getElementRef().nativeElement.getBoundingClientRect();\n });\n return {\n isOriginClipped: isElementClippedByScrolling(originBounds, scrollContainerBounds),\n isOriginOutsideView: isElementScrolledOutsideView(originBounds, scrollContainerBounds),\n isOverlayClipped: isElementClippedByScrolling(overlayBounds, scrollContainerBounds),\n isOverlayOutsideView: isElementScrolledOutsideView(overlayBounds, scrollContainerBounds)\n };\n }\n /** Subtracts the amount that an element is overflowing on an axis from its length. */\n _subtractOverflows(length, ...overflows) {\n return overflows.reduce((currentValue, currentOverflow) => {\n return currentValue - Math.max(currentOverflow, 0);\n }, length);\n }\n /** Narrows the given viewport rect by the current _viewportMargin. */\n _getNarrowedViewportRect() {\n // We recalculate the viewport rect here ourselves, rather than using the ViewportRuler,\n // because we want to use the `clientWidth` and `clientHeight` as the base. The difference\n // being that the client properties don't include the scrollbar, as opposed to `innerWidth`\n // and `innerHeight` that do. This is necessary, because the overlay container uses\n // 100% `width` and `height` which don't include the scrollbar either.\n const width = this._document.documentElement.clientWidth;\n const height = this._document.documentElement.clientHeight;\n const scrollPosition = this._viewportRuler.getViewportScrollPosition();\n return {\n top: scrollPosition.top + this._viewportMargin,\n left: scrollPosition.left + this._viewportMargin,\n right: scrollPosition.left + width - this._viewportMargin,\n bottom: scrollPosition.top + height - this._viewportMargin,\n width: width - 2 * this._viewportMargin,\n height: height - 2 * this._viewportMargin\n };\n }\n /** Whether the we're dealing with an RTL context */\n _isRtl() {\n return this._overlayRef.getDirection() === 'rtl';\n }\n /** Determines whether the overlay uses exact or flexible positioning. */\n _hasExactPosition() {\n return !this._hasFlexibleDimensions || this._isPushed;\n }\n /** Retrieves the offset of a position along the x or y axis. */\n _getOffset(position, axis) {\n if (axis === 'x') {\n // We don't do something like `position['offset' + axis]` in\n // order to avoid breaking minifiers that rename properties.\n return position.offsetX == null ? this._offsetX : position.offsetX;\n }\n return position.offsetY == null ? this._offsetY : position.offsetY;\n }\n /** Validates that the current position match the expected values. */\n _validatePositions() {\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (!this._preferredPositions.length) {\n throw Error('FlexibleConnectedPositionStrategy: At least one position is required.');\n }\n // TODO(crisbeto): remove these once Angular's template type\n // checking is advanced enough to catch these cases.\n this._preferredPositions.forEach(pair => {\n validateHorizontalPosition('originX', pair.originX);\n validateVerticalPosition('originY', pair.originY);\n validateHorizontalPosition('overlayX', pair.overlayX);\n validateVerticalPosition('overlayY', pair.overlayY);\n });\n }\n }\n /** Adds a single CSS class or an array of classes on the overlay panel. */\n _addPanelClasses(cssClasses) {\n if (this._pane) {\n coerceArray(cssClasses).forEach(cssClass => {\n if (cssClass !== '' && this._appliedPanelClasses.indexOf(cssClass) === -1) {\n this._appliedPanelClasses.push(cssClass);\n this._pane.classList.add(cssClass);\n }\n });\n }\n }\n /** Clears the classes that the position strategy has applied from the overlay panel. */\n _clearPanelClasses() {\n if (this._pane) {\n this._appliedPanelClasses.forEach(cssClass => {\n this._pane.classList.remove(cssClass);\n });\n this._appliedPanelClasses = [];\n }\n }\n /** Returns the ClientRect of the current origin. */\n _getOriginRect() {\n const origin = this._origin;\n if (origin instanceof ElementRef) {\n return origin.nativeElement.getBoundingClientRect();\n }\n // Check for Element so SVG elements are also supported.\n if (origin instanceof Element) {\n return origin.getBoundingClientRect();\n }\n const width = origin.width || 0;\n const height = origin.height || 0;\n // If the origin is a point, return a client rect as if it was a 0x0 element at the point.\n return {\n top: origin.y,\n bottom: origin.y + height,\n left: origin.x,\n right: origin.x + width,\n height,\n width\n };\n }\n}\n/** Shallow-extends a stylesheet object with another stylesheet object. */\nfunction extendStyles(destination, source) {\n for (let key in source) {\n if (source.hasOwnProperty(key)) {\n destination[key] = source[key];\n }\n }\n return destination;\n}\n/**\n * Extracts the pixel value as a number from a value, if it's a number\n * or a CSS pixel string (e.g. `1337px`). Otherwise returns null.\n */\nfunction getPixelValue(input) {\n if (typeof input !== 'number' && input != null) {\n const [value, units] = input.split(cssUnitPattern);\n return !units || units === 'px' ? parseFloat(value) : null;\n }\n return input || null;\n}\n/**\n * Gets a version of an element's bounding `ClientRect` where all the values are rounded down to\n * the nearest pixel. This allows us to account for the cases where there may be sub-pixel\n * deviations in the `ClientRect` returned by the browser (e.g. when zoomed in with a percentage\n * size, see #21350).\n */\nfunction getRoundedBoundingClientRect(clientRect) {\n return {\n top: Math.floor(clientRect.top),\n right: Math.floor(clientRect.right),\n bottom: Math.floor(clientRect.bottom),\n left: Math.floor(clientRect.left),\n width: Math.floor(clientRect.width),\n height: Math.floor(clientRect.height)\n };\n}\nconst STANDARD_DROPDOWN_BELOW_POSITIONS = [{\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top'\n}, {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom'\n}, {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top'\n}, {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom'\n}];\nconst STANDARD_DROPDOWN_ADJACENT_POSITIONS = [{\n originX: 'end',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'top'\n}, {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'bottom'\n}, {\n originX: 'start',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'top'\n}, {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'bottom'\n}];\n\n/** Class to be added to the overlay pane wrapper. */\nconst wrapperClass = 'cdk-global-overlay-wrapper';\n/**\n * A strategy for positioning overlays. Using this strategy, an overlay is given an\n * explicit position relative to the browser's viewport. We use flexbox, instead of\n * transforms, in order to avoid issues with subpixel rendering which can cause the\n * element to become blurry.\n */\nclass GlobalPositionStrategy {\n constructor() {\n this._cssPosition = 'static';\n this._topOffset = '';\n this._bottomOffset = '';\n this._alignItems = '';\n this._xPosition = '';\n this._xOffset = '';\n this._width = '';\n this._height = '';\n this._isDisposed = false;\n }\n attach(overlayRef) {\n const config = overlayRef.getConfig();\n this._overlayRef = overlayRef;\n if (this._width && !config.width) {\n overlayRef.updateSize({\n width: this._width\n });\n }\n if (this._height && !config.height) {\n overlayRef.updateSize({\n height: this._height\n });\n }\n overlayRef.hostElement.classList.add(wrapperClass);\n this._isDisposed = false;\n }\n /**\n * Sets the top position of the overlay. Clears any previously set vertical position.\n * @param value New top offset.\n */\n top(value = '') {\n this._bottomOffset = '';\n this._topOffset = value;\n this._alignItems = 'flex-start';\n return this;\n }\n /**\n * Sets the left position of the overlay. Clears any previously set horizontal position.\n * @param value New left offset.\n */\n left(value = '') {\n this._xOffset = value;\n this._xPosition = 'left';\n return this;\n }\n /**\n * Sets the bottom position of the overlay. Clears any previously set vertical position.\n * @param value New bottom offset.\n */\n bottom(value = '') {\n this._topOffset = '';\n this._bottomOffset = value;\n this._alignItems = 'flex-end';\n return this;\n }\n /**\n * Sets the right position of the overlay. Clears any previously set horizontal position.\n * @param value New right offset.\n */\n right(value = '') {\n this._xOffset = value;\n this._xPosition = 'right';\n return this;\n }\n /**\n * Sets the overlay to the start of the viewport, depending on the overlay direction.\n * This will be to the left in LTR layouts and to the right in RTL.\n * @param offset Offset from the edge of the screen.\n */\n start(value = '') {\n this._xOffset = value;\n this._xPosition = 'start';\n return this;\n }\n /**\n * Sets the overlay to the end of the viewport, depending on the overlay direction.\n * This will be to the right in LTR layouts and to the left in RTL.\n * @param offset Offset from the edge of the screen.\n */\n end(value = '') {\n this._xOffset = value;\n this._xPosition = 'end';\n return this;\n }\n /**\n * Sets the overlay width and clears any previously set width.\n * @param value New width for the overlay\n * @deprecated Pass the `width` through the `OverlayConfig`.\n * @breaking-change 8.0.0\n */\n width(value = '') {\n if (this._overlayRef) {\n this._overlayRef.updateSize({\n width: value\n });\n } else {\n this._width = value;\n }\n return this;\n }\n /**\n * Sets the overlay height and clears any previously set height.\n * @param value New height for the overlay\n * @deprecated Pass the `height` through the `OverlayConfig`.\n * @breaking-change 8.0.0\n */\n height(value = '') {\n if (this._overlayRef) {\n this._overlayRef.updateSize({\n height: value\n });\n } else {\n this._height = value;\n }\n return this;\n }\n /**\n * Centers the overlay horizontally with an optional offset.\n * Clears any previously set horizontal position.\n *\n * @param offset Overlay offset from the horizontal center.\n */\n centerHorizontally(offset = '') {\n this.left(offset);\n this._xPosition = 'center';\n return this;\n }\n /**\n * Centers the overlay vertically with an optional offset.\n * Clears any previously set vertical position.\n *\n * @param offset Overlay offset from the vertical center.\n */\n centerVertically(offset = '') {\n this.top(offset);\n this._alignItems = 'center';\n return this;\n }\n /**\n * Apply the position to the element.\n * @docs-private\n */\n apply() {\n // Since the overlay ref applies the strategy asynchronously, it could\n // have been disposed before it ends up being applied. If that is the\n // case, we shouldn't do anything.\n if (!this._overlayRef || !this._overlayRef.hasAttached()) {\n return;\n }\n const styles = this._overlayRef.overlayElement.style;\n const parentStyles = this._overlayRef.hostElement.style;\n const config = this._overlayRef.getConfig();\n const {\n width,\n height,\n maxWidth,\n maxHeight\n } = config;\n const shouldBeFlushHorizontally = (width === '100%' || width === '100vw') && (!maxWidth || maxWidth === '100%' || maxWidth === '100vw');\n const shouldBeFlushVertically = (height === '100%' || height === '100vh') && (!maxHeight || maxHeight === '100%' || maxHeight === '100vh');\n const xPosition = this._xPosition;\n const xOffset = this._xOffset;\n const isRtl = this._overlayRef.getConfig().direction === 'rtl';\n let marginLeft = '';\n let marginRight = '';\n let justifyContent = '';\n if (shouldBeFlushHorizontally) {\n justifyContent = 'flex-start';\n } else if (xPosition === 'center') {\n justifyContent = 'center';\n if (isRtl) {\n marginRight = xOffset;\n } else {\n marginLeft = xOffset;\n }\n } else if (isRtl) {\n if (xPosition === 'left' || xPosition === 'end') {\n justifyContent = 'flex-end';\n marginLeft = xOffset;\n } else if (xPosition === 'right' || xPosition === 'start') {\n justifyContent = 'flex-start';\n marginRight = xOffset;\n }\n } else if (xPosition === 'left' || xPosition === 'start') {\n justifyContent = 'flex-start';\n marginLeft = xOffset;\n } else if (xPosition === 'right' || xPosition === 'end') {\n justifyContent = 'flex-end';\n marginRight = xOffset;\n }\n styles.position = this._cssPosition;\n styles.marginLeft = shouldBeFlushHorizontally ? '0' : marginLeft;\n styles.marginTop = shouldBeFlushVertically ? '0' : this._topOffset;\n styles.marginBottom = this._bottomOffset;\n styles.marginRight = shouldBeFlushHorizontally ? '0' : marginRight;\n parentStyles.justifyContent = justifyContent;\n parentStyles.alignItems = shouldBeFlushVertically ? 'flex-start' : this._alignItems;\n }\n /**\n * Cleans up the DOM changes from the position strategy.\n * @docs-private\n */\n dispose() {\n if (this._isDisposed || !this._overlayRef) {\n return;\n }\n const styles = this._overlayRef.overlayElement.style;\n const parent = this._overlayRef.hostElement;\n const parentStyles = parent.style;\n parent.classList.remove(wrapperClass);\n parentStyles.justifyContent = parentStyles.alignItems = styles.marginTop = styles.marginBottom = styles.marginLeft = styles.marginRight = styles.position = '';\n this._overlayRef = null;\n this._isDisposed = true;\n }\n}\n\n/** Builder for overlay position strategy. */\nlet OverlayPositionBuilder = /*#__PURE__*/(() => {\n class OverlayPositionBuilder {\n constructor(_viewportRuler, _document, _platform, _overlayContainer) {\n this._viewportRuler = _viewportRuler;\n this._document = _document;\n this._platform = _platform;\n this._overlayContainer = _overlayContainer;\n }\n /**\n * Creates a global position strategy.\n */\n global() {\n return new GlobalPositionStrategy();\n }\n /**\n * Creates a flexible position strategy.\n * @param origin Origin relative to which to position the overlay.\n */\n flexibleConnectedTo(origin) {\n return new FlexibleConnectedPositionStrategy(origin, this._viewportRuler, this._document, this._platform, this._overlayContainer);\n }\n static {\n this.ɵfac = function OverlayPositionBuilder_Factory(t) {\n return new (t || OverlayPositionBuilder)(i0.ɵɵinject(i1.ViewportRuler), i0.ɵɵinject(DOCUMENT), i0.ɵɵinject(i1$1.Platform), i0.ɵɵinject(OverlayContainer));\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: OverlayPositionBuilder,\n factory: OverlayPositionBuilder.ɵfac,\n providedIn: 'root'\n });\n }\n }\n return OverlayPositionBuilder;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Next overlay unique ID. */\nlet nextUniqueId = 0;\n// Note that Overlay is *not* scoped to the app root because of the ComponentFactoryResolver\n// which needs to be different depending on where OverlayModule is imported.\n/**\n * Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be\n * used as a low-level building block for other components. Dialogs, tooltips, menus,\n * selects, etc. can all be built using overlays. The service should primarily be used by authors\n * of re-usable components rather than developers building end-user applications.\n *\n * An overlay *is* a PortalOutlet, so any kind of Portal can be loaded into one.\n */\nlet Overlay = /*#__PURE__*/(() => {\n class Overlay {\n constructor( /** Scrolling strategies that can be used when creating an overlay. */\n scrollStrategies, _overlayContainer, _componentFactoryResolver, _positionBuilder, _keyboardDispatcher, _injector, _ngZone, _document, _directionality, _location, _outsideClickDispatcher, _animationsModuleType) {\n this.scrollStrategies = scrollStrategies;\n this._overlayContainer = _overlayContainer;\n this._componentFactoryResolver = _componentFactoryResolver;\n this._positionBuilder = _positionBuilder;\n this._keyboardDispatcher = _keyboardDispatcher;\n this._injector = _injector;\n this._ngZone = _ngZone;\n this._document = _document;\n this._directionality = _directionality;\n this._location = _location;\n this._outsideClickDispatcher = _outsideClickDispatcher;\n this._animationsModuleType = _animationsModuleType;\n }\n /**\n * Creates an overlay.\n * @param config Configuration applied to the overlay.\n * @returns Reference to the created overlay.\n */\n create(config) {\n const host = this._createHostElement();\n const pane = this._createPaneElement(host);\n const portalOutlet = this._createPortalOutlet(pane);\n const overlayConfig = new OverlayConfig(config);\n overlayConfig.direction = overlayConfig.direction || this._directionality.value;\n return new OverlayRef(portalOutlet, host, pane, overlayConfig, this._ngZone, this._keyboardDispatcher, this._document, this._location, this._outsideClickDispatcher, this._animationsModuleType === 'NoopAnimations');\n }\n /**\n * Gets a position builder that can be used, via fluent API,\n * to construct and configure a position strategy.\n * @returns An overlay position builder.\n */\n position() {\n return this._positionBuilder;\n }\n /**\n * Creates the DOM element for an overlay and appends it to the overlay container.\n * @returns Newly-created pane element\n */\n _createPaneElement(host) {\n const pane = this._document.createElement('div');\n pane.id = `cdk-overlay-${nextUniqueId++}`;\n pane.classList.add('cdk-overlay-pane');\n host.appendChild(pane);\n return pane;\n }\n /**\n * Creates the host element that wraps around an overlay\n * and can be used for advanced positioning.\n * @returns Newly-create host element.\n */\n _createHostElement() {\n const host = this._document.createElement('div');\n this._overlayContainer.getContainerElement().appendChild(host);\n return host;\n }\n /**\n * Create a DomPortalOutlet into which the overlay content can be loaded.\n * @param pane The DOM element to turn into a portal outlet.\n * @returns A portal outlet for the given DOM element.\n */\n _createPortalOutlet(pane) {\n // We have to resolve the ApplicationRef later in order to allow people\n // to use overlay-based providers during app initialization.\n if (!this._appRef) {\n this._appRef = this._injector.get(ApplicationRef);\n }\n return new DomPortalOutlet(pane, this._componentFactoryResolver, this._appRef, this._injector, this._document);\n }\n static {\n this.ɵfac = function Overlay_Factory(t) {\n return new (t || Overlay)(i0.ɵɵinject(ScrollStrategyOptions), i0.ɵɵinject(OverlayContainer), i0.ɵɵinject(i0.ComponentFactoryResolver), i0.ɵɵinject(OverlayPositionBuilder), i0.ɵɵinject(OverlayKeyboardDispatcher), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(i0.NgZone), i0.ɵɵinject(DOCUMENT), i0.ɵɵinject(i5.Directionality), i0.ɵɵinject(i6.Location), i0.ɵɵinject(OverlayOutsideClickDispatcher), i0.ɵɵinject(ANIMATION_MODULE_TYPE, 8));\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: Overlay,\n factory: Overlay.ɵfac,\n providedIn: 'root'\n });\n }\n }\n return Overlay;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Default set of positions for the overlay. Follows the behavior of a dropdown. */\nconst defaultPositionList = [{\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top'\n}, {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom'\n}, {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom'\n}, {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top'\n}];\n/** Injection token that determines the scroll handling while the connected overlay is open. */\nconst CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY = /*#__PURE__*/new InjectionToken('cdk-connected-overlay-scroll-strategy');\n/**\n * Directive applied to an element to make it usable as an origin for an Overlay using a\n * ConnectedPositionStrategy.\n */\nlet CdkOverlayOrigin = /*#__PURE__*/(() => {\n class CdkOverlayOrigin {\n constructor( /** Reference to the element on which the directive is applied. */\n elementRef) {\n this.elementRef = elementRef;\n }\n static {\n this.ɵfac = function CdkOverlayOrigin_Factory(t) {\n return new (t || CdkOverlayOrigin)(i0.ɵɵdirectiveInject(i0.ElementRef));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkOverlayOrigin,\n selectors: [[\"\", \"cdk-overlay-origin\", \"\"], [\"\", \"overlay-origin\", \"\"], [\"\", \"cdkOverlayOrigin\", \"\"]],\n exportAs: [\"cdkOverlayOrigin\"],\n standalone: true\n });\n }\n }\n return CdkOverlayOrigin;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Directive to facilitate declarative creation of an\n * Overlay using a FlexibleConnectedPositionStrategy.\n */\nlet CdkConnectedOverlay = /*#__PURE__*/(() => {\n class CdkConnectedOverlay {\n /** The offset in pixels for the overlay connection point on the x-axis */\n get offsetX() {\n return this._offsetX;\n }\n set offsetX(offsetX) {\n this._offsetX = offsetX;\n if (this._position) {\n this._updatePositionStrategy(this._position);\n }\n }\n /** The offset in pixels for the overlay connection point on the y-axis */\n get offsetY() {\n return this._offsetY;\n }\n set offsetY(offsetY) {\n this._offsetY = offsetY;\n if (this._position) {\n this._updatePositionStrategy(this._position);\n }\n }\n /** Whether the overlay should be disposed of when the user goes backwards/forwards in history. */\n get disposeOnNavigation() {\n return this._disposeOnNavigation;\n }\n set disposeOnNavigation(value) {\n this._disposeOnNavigation = value;\n }\n // TODO(jelbourn): inputs for size, scroll behavior, animation, etc.\n constructor(_overlay, templateRef, viewContainerRef, scrollStrategyFactory, _dir) {\n this._overlay = _overlay;\n this._dir = _dir;\n this._backdropSubscription = Subscription.EMPTY;\n this._attachSubscription = Subscription.EMPTY;\n this._detachSubscription = Subscription.EMPTY;\n this._positionSubscription = Subscription.EMPTY;\n this._disposeOnNavigation = false;\n /** Margin between the overlay and the viewport edges. */\n this.viewportMargin = 0;\n /** Whether the overlay is open. */\n this.open = false;\n /** Whether the overlay can be closed by user interaction. */\n this.disableClose = false;\n /** Whether or not the overlay should attach a backdrop. */\n this.hasBackdrop = false;\n /** Whether or not the overlay should be locked when scrolling. */\n this.lockPosition = false;\n /** Whether the overlay's width and height can be constrained to fit within the viewport. */\n this.flexibleDimensions = false;\n /** Whether the overlay can grow after the initial open when flexible positioning is turned on. */\n this.growAfterOpen = false;\n /** Whether the overlay can be pushed on-screen if none of the provided positions fit. */\n this.push = false;\n /** Event emitted when the backdrop is clicked. */\n this.backdropClick = new EventEmitter();\n /** Event emitted when the position has changed. */\n this.positionChange = new EventEmitter();\n /** Event emitted when the overlay has been attached. */\n this.attach = new EventEmitter();\n /** Event emitted when the overlay has been detached. */\n this.detach = new EventEmitter();\n /** Emits when there are keyboard events that are targeted at the overlay. */\n this.overlayKeydown = new EventEmitter();\n /** Emits when there are mouse outside click events that are targeted at the overlay. */\n this.overlayOutsideClick = new EventEmitter();\n this._templatePortal = new TemplatePortal(templateRef, viewContainerRef);\n this._scrollStrategyFactory = scrollStrategyFactory;\n this.scrollStrategy = this._scrollStrategyFactory();\n }\n /** The associated overlay reference. */\n get overlayRef() {\n return this._overlayRef;\n }\n /** The element's layout direction. */\n get dir() {\n return this._dir ? this._dir.value : 'ltr';\n }\n ngOnDestroy() {\n this._attachSubscription.unsubscribe();\n this._detachSubscription.unsubscribe();\n this._backdropSubscription.unsubscribe();\n this._positionSubscription.unsubscribe();\n if (this._overlayRef) {\n this._overlayRef.dispose();\n }\n }\n ngOnChanges(changes) {\n if (this._position) {\n this._updatePositionStrategy(this._position);\n this._overlayRef.updateSize({\n width: this.width,\n minWidth: this.minWidth,\n height: this.height,\n minHeight: this.minHeight\n });\n if (changes['origin'] && this.open) {\n this._position.apply();\n }\n }\n if (changes['open']) {\n this.open ? this._attachOverlay() : this._detachOverlay();\n }\n }\n /** Creates an overlay */\n _createOverlay() {\n if (!this.positions || !this.positions.length) {\n this.positions = defaultPositionList;\n }\n const overlayRef = this._overlayRef = this._overlay.create(this._buildConfig());\n this._attachSubscription = overlayRef.attachments().subscribe(() => this.attach.emit());\n this._detachSubscription = overlayRef.detachments().subscribe(() => this.detach.emit());\n overlayRef.keydownEvents().subscribe(event => {\n this.overlayKeydown.next(event);\n if (event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)) {\n event.preventDefault();\n this._detachOverlay();\n }\n });\n this._overlayRef.outsidePointerEvents().subscribe(event => {\n this.overlayOutsideClick.next(event);\n });\n }\n /** Builds the overlay config based on the directive's inputs */\n _buildConfig() {\n const positionStrategy = this._position = this.positionStrategy || this._createPositionStrategy();\n const overlayConfig = new OverlayConfig({\n direction: this._dir,\n positionStrategy,\n scrollStrategy: this.scrollStrategy,\n hasBackdrop: this.hasBackdrop,\n disposeOnNavigation: this.disposeOnNavigation\n });\n if (this.width || this.width === 0) {\n overlayConfig.width = this.width;\n }\n if (this.height || this.height === 0) {\n overlayConfig.height = this.height;\n }\n if (this.minWidth || this.minWidth === 0) {\n overlayConfig.minWidth = this.minWidth;\n }\n if (this.minHeight || this.minHeight === 0) {\n overlayConfig.minHeight = this.minHeight;\n }\n if (this.backdropClass) {\n overlayConfig.backdropClass = this.backdropClass;\n }\n if (this.panelClass) {\n overlayConfig.panelClass = this.panelClass;\n }\n return overlayConfig;\n }\n /** Updates the state of a position strategy, based on the values of the directive inputs. */\n _updatePositionStrategy(positionStrategy) {\n const positions = this.positions.map(currentPosition => ({\n originX: currentPosition.originX,\n originY: currentPosition.originY,\n overlayX: currentPosition.overlayX,\n overlayY: currentPosition.overlayY,\n offsetX: currentPosition.offsetX || this.offsetX,\n offsetY: currentPosition.offsetY || this.offsetY,\n panelClass: currentPosition.panelClass || undefined\n }));\n return positionStrategy.setOrigin(this._getFlexibleConnectedPositionStrategyOrigin()).withPositions(positions).withFlexibleDimensions(this.flexibleDimensions).withPush(this.push).withGrowAfterOpen(this.growAfterOpen).withViewportMargin(this.viewportMargin).withLockedPosition(this.lockPosition).withTransformOriginOn(this.transformOriginSelector);\n }\n /** Returns the position strategy of the overlay to be set on the overlay config */\n _createPositionStrategy() {\n const strategy = this._overlay.position().flexibleConnectedTo(this._getFlexibleConnectedPositionStrategyOrigin());\n this._updatePositionStrategy(strategy);\n return strategy;\n }\n _getFlexibleConnectedPositionStrategyOrigin() {\n if (this.origin instanceof CdkOverlayOrigin) {\n return this.origin.elementRef;\n } else {\n return this.origin;\n }\n }\n /** Attaches the overlay and subscribes to backdrop clicks if backdrop exists */\n _attachOverlay() {\n if (!this._overlayRef) {\n this._createOverlay();\n } else {\n // Update the overlay size, in case the directive's inputs have changed\n this._overlayRef.getConfig().hasBackdrop = this.hasBackdrop;\n }\n if (!this._overlayRef.hasAttached()) {\n this._overlayRef.attach(this._templatePortal);\n }\n if (this.hasBackdrop) {\n this._backdropSubscription = this._overlayRef.backdropClick().subscribe(event => {\n this.backdropClick.emit(event);\n });\n } else {\n this._backdropSubscription.unsubscribe();\n }\n this._positionSubscription.unsubscribe();\n // Only subscribe to `positionChanges` if requested, because putting\n // together all the information for it can be expensive.\n if (this.positionChange.observers.length > 0) {\n this._positionSubscription = this._position.positionChanges.pipe(takeWhile(() => this.positionChange.observers.length > 0)).subscribe(position => {\n this.positionChange.emit(position);\n if (this.positionChange.observers.length === 0) {\n this._positionSubscription.unsubscribe();\n }\n });\n }\n }\n /** Detaches the overlay and unsubscribes to backdrop clicks if backdrop exists */\n _detachOverlay() {\n if (this._overlayRef) {\n this._overlayRef.detach();\n }\n this._backdropSubscription.unsubscribe();\n this._positionSubscription.unsubscribe();\n }\n static {\n this.ɵfac = function CdkConnectedOverlay_Factory(t) {\n return new (t || CdkConnectedOverlay)(i0.ɵɵdirectiveInject(Overlay), i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY), i0.ɵɵdirectiveInject(i5.Directionality, 8));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkConnectedOverlay,\n selectors: [[\"\", \"cdk-connected-overlay\", \"\"], [\"\", \"connected-overlay\", \"\"], [\"\", \"cdkConnectedOverlay\", \"\"]],\n inputs: {\n origin: [\"cdkConnectedOverlayOrigin\", \"origin\"],\n positions: [\"cdkConnectedOverlayPositions\", \"positions\"],\n positionStrategy: [\"cdkConnectedOverlayPositionStrategy\", \"positionStrategy\"],\n offsetX: [\"cdkConnectedOverlayOffsetX\", \"offsetX\"],\n offsetY: [\"cdkConnectedOverlayOffsetY\", \"offsetY\"],\n width: [\"cdkConnectedOverlayWidth\", \"width\"],\n height: [\"cdkConnectedOverlayHeight\", \"height\"],\n minWidth: [\"cdkConnectedOverlayMinWidth\", \"minWidth\"],\n minHeight: [\"cdkConnectedOverlayMinHeight\", \"minHeight\"],\n backdropClass: [\"cdkConnectedOverlayBackdropClass\", \"backdropClass\"],\n panelClass: [\"cdkConnectedOverlayPanelClass\", \"panelClass\"],\n viewportMargin: [\"cdkConnectedOverlayViewportMargin\", \"viewportMargin\"],\n scrollStrategy: [\"cdkConnectedOverlayScrollStrategy\", \"scrollStrategy\"],\n open: [\"cdkConnectedOverlayOpen\", \"open\"],\n disableClose: [\"cdkConnectedOverlayDisableClose\", \"disableClose\"],\n transformOriginSelector: [\"cdkConnectedOverlayTransformOriginOn\", \"transformOriginSelector\"],\n hasBackdrop: [\"cdkConnectedOverlayHasBackdrop\", \"hasBackdrop\", booleanAttribute],\n lockPosition: [\"cdkConnectedOverlayLockPosition\", \"lockPosition\", booleanAttribute],\n flexibleDimensions: [\"cdkConnectedOverlayFlexibleDimensions\", \"flexibleDimensions\", booleanAttribute],\n growAfterOpen: [\"cdkConnectedOverlayGrowAfterOpen\", \"growAfterOpen\", booleanAttribute],\n push: [\"cdkConnectedOverlayPush\", \"push\", booleanAttribute],\n disposeOnNavigation: [\"cdkConnectedOverlayDisposeOnNavigation\", \"disposeOnNavigation\", booleanAttribute]\n },\n outputs: {\n backdropClick: \"backdropClick\",\n positionChange: \"positionChange\",\n attach: \"attach\",\n detach: \"detach\",\n overlayKeydown: \"overlayKeydown\",\n overlayOutsideClick: \"overlayOutsideClick\"\n },\n exportAs: [\"cdkConnectedOverlay\"],\n standalone: true,\n features: [i0.ɵɵInputTransformsFeature, i0.ɵɵNgOnChangesFeature]\n });\n }\n }\n return CdkConnectedOverlay;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** @docs-private */\nfunction CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {\n return () => overlay.scrollStrategies.reposition();\n}\n/** @docs-private */\nconst CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {\n provide: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY,\n deps: [Overlay],\n useFactory: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY\n};\nlet OverlayModule = /*#__PURE__*/(() => {\n class OverlayModule {\n static {\n this.ɵfac = function OverlayModule_Factory(t) {\n return new (t || OverlayModule)();\n };\n }\n static {\n this.ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: OverlayModule\n });\n }\n static {\n this.ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n providers: [Overlay, CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER],\n imports: [BidiModule, PortalModule, ScrollingModule, ScrollingModule]\n });\n }\n }\n return OverlayModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Alternative to OverlayContainer that supports correct displaying of overlay elements in\n * Fullscreen mode\n * https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen\n *\n * Should be provided in the root component.\n */\nlet FullscreenOverlayContainer = /*#__PURE__*/(() => {\n class FullscreenOverlayContainer extends OverlayContainer {\n constructor(_document, platform) {\n super(_document, platform);\n }\n ngOnDestroy() {\n super.ngOnDestroy();\n if (this._fullScreenEventName && this._fullScreenListener) {\n this._document.removeEventListener(this._fullScreenEventName, this._fullScreenListener);\n }\n }\n _createContainer() {\n super._createContainer();\n this._adjustParentForFullscreenChange();\n this._addFullscreenChangeListener(() => this._adjustParentForFullscreenChange());\n }\n _adjustParentForFullscreenChange() {\n if (!this._containerElement) {\n return;\n }\n const fullscreenElement = this.getFullscreenElement();\n const parent = fullscreenElement || this._document.body;\n parent.appendChild(this._containerElement);\n }\n _addFullscreenChangeListener(fn) {\n const eventName = this._getEventName();\n if (eventName) {\n if (this._fullScreenListener) {\n this._document.removeEventListener(eventName, this._fullScreenListener);\n }\n this._document.addEventListener(eventName, fn);\n this._fullScreenListener = fn;\n }\n }\n _getEventName() {\n if (!this._fullScreenEventName) {\n const _document = this._document;\n if (_document.fullscreenEnabled) {\n this._fullScreenEventName = 'fullscreenchange';\n } else if (_document.webkitFullscreenEnabled) {\n this._fullScreenEventName = 'webkitfullscreenchange';\n } else if (_document.mozFullScreenEnabled) {\n this._fullScreenEventName = 'mozfullscreenchange';\n } else if (_document.msFullscreenEnabled) {\n this._fullScreenEventName = 'MSFullscreenChange';\n }\n }\n return this._fullScreenEventName;\n }\n /**\n * When the page is put into fullscreen mode, a specific element is specified.\n * Only that element and its children are visible when in fullscreen mode.\n */\n getFullscreenElement() {\n const _document = this._document;\n return _document.fullscreenElement || _document.webkitFullscreenElement || _document.mozFullScreenElement || _document.msFullscreenElement || null;\n }\n static {\n this.ɵfac = function FullscreenOverlayContainer_Factory(t) {\n return new (t || FullscreenOverlayContainer)(i0.ɵɵinject(DOCUMENT), i0.ɵɵinject(i1$1.Platform));\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: FullscreenOverlayContainer,\n factory: FullscreenOverlayContainer.ɵfac,\n providedIn: 'root'\n });\n }\n }\n return FullscreenOverlayContainer;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { BlockScrollStrategy, CdkConnectedOverlay, CdkOverlayOrigin, CloseScrollStrategy, ConnectedOverlayPositionChange, ConnectionPositionPair, FlexibleConnectedPositionStrategy, FullscreenOverlayContainer, GlobalPositionStrategy, NoopScrollStrategy, Overlay, OverlayConfig, OverlayContainer, OverlayKeyboardDispatcher, OverlayModule, OverlayOutsideClickDispatcher, OverlayPositionBuilder, OverlayRef, RepositionScrollStrategy, STANDARD_DROPDOWN_ADJACENT_POSITIONS, STANDARD_DROPDOWN_BELOW_POSITIONS, ScrollStrategyOptions, ScrollingVisibility, validateHorizontalPosition, validateVerticalPosition };\n","import * as i0 from '@angular/core';\nimport { ElementRef, Injector, Directive, EventEmitter, Inject, Output, NgModule } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\n\n/**\n * Throws an exception when attempting to attach a null portal to a host.\n * @docs-private\n */\nfunction throwNullPortalError() {\n throw Error('Must provide a portal to attach');\n}\n/**\n * Throws an exception when attempting to attach a portal to a host that is already attached.\n * @docs-private\n */\nfunction throwPortalAlreadyAttachedError() {\n throw Error('Host already has a portal attached');\n}\n/**\n * Throws an exception when attempting to attach a portal to an already-disposed host.\n * @docs-private\n */\nfunction throwPortalOutletAlreadyDisposedError() {\n throw Error('This PortalOutlet has already been disposed');\n}\n/**\n * Throws an exception when attempting to attach an unknown portal type.\n * @docs-private\n */\nfunction throwUnknownPortalTypeError() {\n throw Error('Attempting to attach an unknown Portal type. BasePortalOutlet accepts either ' + 'a ComponentPortal or a TemplatePortal.');\n}\n/**\n * Throws an exception when attempting to attach a portal to a null host.\n * @docs-private\n */\nfunction throwNullPortalOutletError() {\n throw Error('Attempting to attach a portal to a null PortalOutlet');\n}\n/**\n * Throws an exception when attempting to detach a portal that is not attached.\n * @docs-private\n */\nfunction throwNoPortalAttachedError() {\n throw Error('Attempting to detach a portal that is not attached to a host');\n}\n\n/**\n * A `Portal` is something that you want to render somewhere else.\n * It can be attach to / detached from a `PortalOutlet`.\n */\nclass Portal {\n /** Attach this portal to a host. */\n attach(host) {\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (host == null) {\n throwNullPortalOutletError();\n }\n if (host.hasAttached()) {\n throwPortalAlreadyAttachedError();\n }\n }\n this._attachedHost = host;\n return host.attach(this);\n }\n /** Detach this portal from its host */\n detach() {\n let host = this._attachedHost;\n if (host != null) {\n this._attachedHost = null;\n host.detach();\n } else if (typeof ngDevMode === 'undefined' || ngDevMode) {\n throwNoPortalAttachedError();\n }\n }\n /** Whether this portal is attached to a host. */\n get isAttached() {\n return this._attachedHost != null;\n }\n /**\n * Sets the PortalOutlet reference without performing `attach()`. This is used directly by\n * the PortalOutlet when it is performing an `attach()` or `detach()`.\n */\n setAttachedHost(host) {\n this._attachedHost = host;\n }\n}\n/**\n * A `ComponentPortal` is a portal that instantiates some Component upon attachment.\n */\nclass ComponentPortal extends Portal {\n constructor(component, viewContainerRef, injector, componentFactoryResolver, projectableNodes) {\n super();\n this.component = component;\n this.viewContainerRef = viewContainerRef;\n this.injector = injector;\n this.componentFactoryResolver = componentFactoryResolver;\n this.projectableNodes = projectableNodes;\n }\n}\n/**\n * A `TemplatePortal` is a portal that represents some embedded template (TemplateRef).\n */\nclass TemplatePortal extends Portal {\n constructor( /** The embedded template that will be used to instantiate an embedded View in the host. */\n templateRef, /** Reference to the ViewContainer into which the template will be stamped out. */\n viewContainerRef, /** Contextual data to be passed in to the embedded view. */\n context, /** The injector to use for the embedded view. */\n injector) {\n super();\n this.templateRef = templateRef;\n this.viewContainerRef = viewContainerRef;\n this.context = context;\n this.injector = injector;\n }\n get origin() {\n return this.templateRef.elementRef;\n }\n /**\n * Attach the portal to the provided `PortalOutlet`.\n * When a context is provided it will override the `context` property of the `TemplatePortal`\n * instance.\n */\n attach(host, context = this.context) {\n this.context = context;\n return super.attach(host);\n }\n detach() {\n this.context = undefined;\n return super.detach();\n }\n}\n/**\n * A `DomPortal` is a portal whose DOM element will be taken from its current position\n * in the DOM and moved into a portal outlet, when it is attached. On detach, the content\n * will be restored to its original position.\n */\nclass DomPortal extends Portal {\n constructor(element) {\n super();\n this.element = element instanceof ElementRef ? element.nativeElement : element;\n }\n}\n/**\n * Partial implementation of PortalOutlet that handles attaching\n * ComponentPortal and TemplatePortal.\n */\nclass BasePortalOutlet {\n constructor() {\n /** Whether this host has already been permanently disposed. */\n this._isDisposed = false;\n // @breaking-change 10.0.0 `attachDomPortal` to become a required abstract method.\n this.attachDomPortal = null;\n }\n /** Whether this host has an attached portal. */\n hasAttached() {\n return !!this._attachedPortal;\n }\n /** Attaches a portal. */\n attach(portal) {\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (!portal) {\n throwNullPortalError();\n }\n if (this.hasAttached()) {\n throwPortalAlreadyAttachedError();\n }\n if (this._isDisposed) {\n throwPortalOutletAlreadyDisposedError();\n }\n }\n if (portal instanceof ComponentPortal) {\n this._attachedPortal = portal;\n return this.attachComponentPortal(portal);\n } else if (portal instanceof TemplatePortal) {\n this._attachedPortal = portal;\n return this.attachTemplatePortal(portal);\n // @breaking-change 10.0.0 remove null check for `this.attachDomPortal`.\n } else if (this.attachDomPortal && portal instanceof DomPortal) {\n this._attachedPortal = portal;\n return this.attachDomPortal(portal);\n }\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n throwUnknownPortalTypeError();\n }\n }\n /** Detaches a previously attached portal. */\n detach() {\n if (this._attachedPortal) {\n this._attachedPortal.setAttachedHost(null);\n this._attachedPortal = null;\n }\n this._invokeDisposeFn();\n }\n /** Permanently dispose of this portal host. */\n dispose() {\n if (this.hasAttached()) {\n this.detach();\n }\n this._invokeDisposeFn();\n this._isDisposed = true;\n }\n /** @docs-private */\n setDisposeFn(fn) {\n this._disposeFn = fn;\n }\n _invokeDisposeFn() {\n if (this._disposeFn) {\n this._disposeFn();\n this._disposeFn = null;\n }\n }\n}\n/**\n * @deprecated Use `BasePortalOutlet` instead.\n * @breaking-change 9.0.0\n */\nclass BasePortalHost extends BasePortalOutlet {}\n\n/**\n * A PortalOutlet for attaching portals to an arbitrary DOM element outside of the Angular\n * application context.\n */\nclass DomPortalOutlet extends BasePortalOutlet {\n /**\n * @param outletElement Element into which the content is projected.\n * @param _componentFactoryResolver Used to resolve the component factory.\n * Only required when attaching component portals.\n * @param _appRef Reference to the application. Only used in component portals when there\n * is no `ViewContainerRef` available.\n * @param _defaultInjector Injector to use as a fallback when the portal being attached doesn't\n * have one. Only used for component portals.\n * @param _document Reference to the document. Used when attaching a DOM portal. Will eventually\n * become a required parameter.\n */\n constructor( /** Element into which the content is projected. */\n outletElement, _componentFactoryResolver, _appRef, _defaultInjector,\n /**\n * @deprecated `_document` Parameter to be made required.\n * @breaking-change 10.0.0\n */\n _document) {\n super();\n this.outletElement = outletElement;\n this._componentFactoryResolver = _componentFactoryResolver;\n this._appRef = _appRef;\n this._defaultInjector = _defaultInjector;\n /**\n * Attaches a DOM portal by transferring its content into the outlet.\n * @param portal Portal to be attached.\n * @deprecated To be turned into a method.\n * @breaking-change 10.0.0\n */\n this.attachDomPortal = portal => {\n // @breaking-change 10.0.0 Remove check and error once the\n // `_document` constructor parameter is required.\n if (!this._document && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('Cannot attach DOM portal without _document constructor parameter');\n }\n const element = portal.element;\n if (!element.parentNode && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('DOM portal content must be attached to a parent node.');\n }\n // Anchor used to save the element's previous position so\n // that we can restore it when the portal is detached.\n const anchorNode = this._document.createComment('dom-portal');\n element.parentNode.insertBefore(anchorNode, element);\n this.outletElement.appendChild(element);\n this._attachedPortal = portal;\n super.setDisposeFn(() => {\n // We can't use `replaceWith` here because IE doesn't support it.\n if (anchorNode.parentNode) {\n anchorNode.parentNode.replaceChild(element, anchorNode);\n }\n });\n };\n this._document = _document;\n }\n /**\n * Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver.\n * @param portal Portal to be attached\n * @returns Reference to the created component.\n */\n attachComponentPortal(portal) {\n const resolver = portal.componentFactoryResolver || this._componentFactoryResolver;\n if ((typeof ngDevMode === 'undefined' || ngDevMode) && !resolver) {\n throw Error('Cannot attach component portal to outlet without a ComponentFactoryResolver.');\n }\n const componentFactory = resolver.resolveComponentFactory(portal.component);\n let componentRef;\n // If the portal specifies a ViewContainerRef, we will use that as the attachment point\n // for the component (in terms of Angular's component tree, not rendering).\n // When the ViewContainerRef is missing, we use the factory to create the component directly\n // and then manually attach the view to the application.\n if (portal.viewContainerRef) {\n componentRef = portal.viewContainerRef.createComponent(componentFactory, portal.viewContainerRef.length, portal.injector || portal.viewContainerRef.injector, portal.projectableNodes || undefined);\n this.setDisposeFn(() => componentRef.destroy());\n } else {\n if ((typeof ngDevMode === 'undefined' || ngDevMode) && !this._appRef) {\n throw Error('Cannot attach component portal to outlet without an ApplicationRef.');\n }\n componentRef = componentFactory.create(portal.injector || this._defaultInjector || Injector.NULL);\n this._appRef.attachView(componentRef.hostView);\n this.setDisposeFn(() => {\n // Verify that the ApplicationRef has registered views before trying to detach a host view.\n // This check also protects the `detachView` from being called on a destroyed ApplicationRef.\n if (this._appRef.viewCount > 0) {\n this._appRef.detachView(componentRef.hostView);\n }\n componentRef.destroy();\n });\n }\n // At this point the component has been instantiated, so we move it to the location in the DOM\n // where we want it to be rendered.\n this.outletElement.appendChild(this._getComponentRootNode(componentRef));\n this._attachedPortal = portal;\n return componentRef;\n }\n /**\n * Attaches a template portal to the DOM as an embedded view.\n * @param portal Portal to be attached.\n * @returns Reference to the created embedded view.\n */\n attachTemplatePortal(portal) {\n let viewContainer = portal.viewContainerRef;\n let viewRef = viewContainer.createEmbeddedView(portal.templateRef, portal.context, {\n injector: portal.injector\n });\n // The method `createEmbeddedView` will add the view as a child of the viewContainer.\n // But for the DomPortalOutlet the view can be added everywhere in the DOM\n // (e.g Overlay Container) To move the view to the specified host element. We just\n // re-append the existing root nodes.\n viewRef.rootNodes.forEach(rootNode => this.outletElement.appendChild(rootNode));\n // Note that we want to detect changes after the nodes have been moved so that\n // any directives inside the portal that are looking at the DOM inside a lifecycle\n // hook won't be invoked too early.\n viewRef.detectChanges();\n this.setDisposeFn(() => {\n let index = viewContainer.indexOf(viewRef);\n if (index !== -1) {\n viewContainer.remove(index);\n }\n });\n this._attachedPortal = portal;\n // TODO(jelbourn): Return locals from view.\n return viewRef;\n }\n /**\n * Clears out a portal from the DOM.\n */\n dispose() {\n super.dispose();\n this.outletElement.remove();\n }\n /** Gets the root HTMLElement for an instantiated component. */\n _getComponentRootNode(componentRef) {\n return componentRef.hostView.rootNodes[0];\n }\n}\n/**\n * @deprecated Use `DomPortalOutlet` instead.\n * @breaking-change 9.0.0\n */\nclass DomPortalHost extends DomPortalOutlet {}\n\n/**\n * Directive version of a `TemplatePortal`. Because the directive *is* a TemplatePortal,\n * the directive instance itself can be attached to a host, enabling declarative use of portals.\n */\nlet CdkPortal = /*#__PURE__*/(() => {\n class CdkPortal extends TemplatePortal {\n constructor(templateRef, viewContainerRef) {\n super(templateRef, viewContainerRef);\n }\n static {\n this.ɵfac = function CdkPortal_Factory(t) {\n return new (t || CdkPortal)(i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkPortal,\n selectors: [[\"\", \"cdkPortal\", \"\"]],\n exportAs: [\"cdkPortal\"],\n features: [i0.ɵɵInheritDefinitionFeature]\n });\n }\n }\n return CdkPortal;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * @deprecated Use `CdkPortal` instead.\n * @breaking-change 9.0.0\n */\nlet TemplatePortalDirective = /*#__PURE__*/(() => {\n class TemplatePortalDirective extends CdkPortal {\n static {\n this.ɵfac = /* @__PURE__ */(() => {\n let ɵTemplatePortalDirective_BaseFactory;\n return function TemplatePortalDirective_Factory(t) {\n return (ɵTemplatePortalDirective_BaseFactory || (ɵTemplatePortalDirective_BaseFactory = i0.ɵɵgetInheritedFactory(TemplatePortalDirective)))(t || TemplatePortalDirective);\n };\n })();\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: TemplatePortalDirective,\n selectors: [[\"\", \"cdk-portal\", \"\"], [\"\", \"portal\", \"\"]],\n exportAs: [\"cdkPortal\"],\n features: [i0.ɵɵProvidersFeature([{\n provide: CdkPortal,\n useExisting: TemplatePortalDirective\n }]), i0.ɵɵInheritDefinitionFeature]\n });\n }\n }\n return TemplatePortalDirective;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Directive version of a PortalOutlet. Because the directive *is* a PortalOutlet, portals can be\n * directly attached to it, enabling declarative use.\n *\n * Usage:\n * ``\n */\nlet CdkPortalOutlet = /*#__PURE__*/(() => {\n class CdkPortalOutlet extends BasePortalOutlet {\n constructor(_componentFactoryResolver, _viewContainerRef,\n /**\n * @deprecated `_document` parameter to be made required.\n * @breaking-change 9.0.0\n */\n _document) {\n super();\n this._componentFactoryResolver = _componentFactoryResolver;\n this._viewContainerRef = _viewContainerRef;\n /** Whether the portal component is initialized. */\n this._isInitialized = false;\n /** Emits when a portal is attached to the outlet. */\n this.attached = new EventEmitter();\n /**\n * Attaches the given DomPortal to this PortalHost by moving all of the portal content into it.\n * @param portal Portal to be attached.\n * @deprecated To be turned into a method.\n * @breaking-change 10.0.0\n */\n this.attachDomPortal = portal => {\n // @breaking-change 9.0.0 Remove check and error once the\n // `_document` constructor parameter is required.\n if (!this._document && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('Cannot attach DOM portal without _document constructor parameter');\n }\n const element = portal.element;\n if (!element.parentNode && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('DOM portal content must be attached to a parent node.');\n }\n // Anchor used to save the element's previous position so\n // that we can restore it when the portal is detached.\n const anchorNode = this._document.createComment('dom-portal');\n portal.setAttachedHost(this);\n element.parentNode.insertBefore(anchorNode, element);\n this._getRootNode().appendChild(element);\n this._attachedPortal = portal;\n super.setDisposeFn(() => {\n if (anchorNode.parentNode) {\n anchorNode.parentNode.replaceChild(element, anchorNode);\n }\n });\n };\n this._document = _document;\n }\n /** Portal associated with the Portal outlet. */\n get portal() {\n return this._attachedPortal;\n }\n set portal(portal) {\n // Ignore the cases where the `portal` is set to a falsy value before the lifecycle hooks have\n // run. This handles the cases where the user might do something like `
`\n // and attach a portal programmatically in the parent component. When Angular does the first CD\n // round, it will fire the setter with empty string, causing the user's content to be cleared.\n if (this.hasAttached() && !portal && !this._isInitialized) {\n return;\n }\n if (this.hasAttached()) {\n super.detach();\n }\n if (portal) {\n super.attach(portal);\n }\n this._attachedPortal = portal || null;\n }\n /** Component or view reference that is attached to the portal. */\n get attachedRef() {\n return this._attachedRef;\n }\n ngOnInit() {\n this._isInitialized = true;\n }\n ngOnDestroy() {\n super.dispose();\n this._attachedRef = this._attachedPortal = null;\n }\n /**\n * Attach the given ComponentPortal to this PortalOutlet using the ComponentFactoryResolver.\n *\n * @param portal Portal to be attached to the portal outlet.\n * @returns Reference to the created component.\n */\n attachComponentPortal(portal) {\n portal.setAttachedHost(this);\n // If the portal specifies an origin, use that as the logical location of the component\n // in the application tree. Otherwise use the location of this PortalOutlet.\n const viewContainerRef = portal.viewContainerRef != null ? portal.viewContainerRef : this._viewContainerRef;\n const resolver = portal.componentFactoryResolver || this._componentFactoryResolver;\n const componentFactory = resolver.resolveComponentFactory(portal.component);\n const ref = viewContainerRef.createComponent(componentFactory, viewContainerRef.length, portal.injector || viewContainerRef.injector, portal.projectableNodes || undefined);\n // If we're using a view container that's different from the injected one (e.g. when the portal\n // specifies its own) we need to move the component into the outlet, otherwise it'll be rendered\n // inside of the alternate view container.\n if (viewContainerRef !== this._viewContainerRef) {\n this._getRootNode().appendChild(ref.hostView.rootNodes[0]);\n }\n super.setDisposeFn(() => ref.destroy());\n this._attachedPortal = portal;\n this._attachedRef = ref;\n this.attached.emit(ref);\n return ref;\n }\n /**\n * Attach the given TemplatePortal to this PortalHost as an embedded View.\n * @param portal Portal to be attached.\n * @returns Reference to the created embedded view.\n */\n attachTemplatePortal(portal) {\n portal.setAttachedHost(this);\n const viewRef = this._viewContainerRef.createEmbeddedView(portal.templateRef, portal.context, {\n injector: portal.injector\n });\n super.setDisposeFn(() => this._viewContainerRef.clear());\n this._attachedPortal = portal;\n this._attachedRef = viewRef;\n this.attached.emit(viewRef);\n return viewRef;\n }\n /** Gets the root node of the portal outlet. */\n _getRootNode() {\n const nativeElement = this._viewContainerRef.element.nativeElement;\n // The directive could be set on a template which will result in a comment\n // node being the root. Use the comment's parent node if that is the case.\n return nativeElement.nodeType === nativeElement.ELEMENT_NODE ? nativeElement : nativeElement.parentNode;\n }\n static {\n this.ɵfac = function CdkPortalOutlet_Factory(t) {\n return new (t || CdkPortalOutlet)(i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(DOCUMENT));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkPortalOutlet,\n selectors: [[\"\", \"cdkPortalOutlet\", \"\"]],\n inputs: {\n portal: [\"cdkPortalOutlet\", \"portal\"]\n },\n outputs: {\n attached: \"attached\"\n },\n exportAs: [\"cdkPortalOutlet\"],\n features: [i0.ɵɵInheritDefinitionFeature]\n });\n }\n }\n return CdkPortalOutlet;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * @deprecated Use `CdkPortalOutlet` instead.\n * @breaking-change 9.0.0\n */\nlet PortalHostDirective = /*#__PURE__*/(() => {\n class PortalHostDirective extends CdkPortalOutlet {\n static {\n this.ɵfac = /* @__PURE__ */(() => {\n let ɵPortalHostDirective_BaseFactory;\n return function PortalHostDirective_Factory(t) {\n return (ɵPortalHostDirective_BaseFactory || (ɵPortalHostDirective_BaseFactory = i0.ɵɵgetInheritedFactory(PortalHostDirective)))(t || PortalHostDirective);\n };\n })();\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: PortalHostDirective,\n selectors: [[\"\", \"cdkPortalHost\", \"\"], [\"\", \"portalHost\", \"\"]],\n inputs: {\n portal: [\"cdkPortalHost\", \"portal\"]\n },\n exportAs: [\"cdkPortalHost\"],\n features: [i0.ɵɵProvidersFeature([{\n provide: CdkPortalOutlet,\n useExisting: PortalHostDirective\n }]), i0.ɵɵInheritDefinitionFeature]\n });\n }\n }\n return PortalHostDirective;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet PortalModule = /*#__PURE__*/(() => {\n class PortalModule {\n static {\n this.ɵfac = function PortalModule_Factory(t) {\n return new (t || PortalModule)();\n };\n }\n static {\n this.ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: PortalModule\n });\n }\n static {\n this.ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({});\n }\n }\n return PortalModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Custom injector to be used when providing custom\n * injection tokens to components inside a portal.\n * @docs-private\n * @deprecated Use `Injector.create` instead.\n * @breaking-change 11.0.0\n */\nclass PortalInjector {\n constructor(_parentInjector, _customTokens) {\n this._parentInjector = _parentInjector;\n this._customTokens = _customTokens;\n }\n get(token, notFoundValue) {\n const value = this._customTokens.get(token);\n if (typeof value !== 'undefined') {\n return value;\n }\n return this._parentInjector.get(token, notFoundValue);\n }\n}\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { BasePortalHost, BasePortalOutlet, CdkPortal, CdkPortalOutlet, ComponentPortal, DomPortal, DomPortalHost, DomPortalOutlet, Portal, PortalHostDirective, PortalInjector, PortalModule, TemplatePortal, TemplatePortalDirective };\n","import * as i1 from '@angular/cdk/a11y';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport * as i1$1 from '@angular/cdk/overlay';\nimport { Overlay, OverlayConfig, OverlayRef, OverlayModule } from '@angular/cdk/overlay';\nimport { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';\nimport * as i3 from '@angular/cdk/portal';\nimport { BasePortalOutlet, CdkPortalOutlet, PortalModule, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';\nimport { DOCUMENT } from '@angular/common';\nimport * as i0 from '@angular/core';\nimport { Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, ViewChild, InjectionToken, inject, Injector, TemplateRef, Injectable, SkipSelf, NgModule } from '@angular/core';\nimport { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';\nimport { Subject, defer, of } from 'rxjs';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { startWith } from 'rxjs/operators';\n\n/** Configuration for opening a modal dialog. */\nfunction CdkDialogContainer_ng_template_0_Template(rf, ctx) {}\nclass DialogConfig {\n constructor() {\n /** The ARIA role of the dialog element. */\n this.role = 'dialog';\n /** Optional CSS class or classes applied to the overlay panel. */\n this.panelClass = '';\n /** Whether the dialog has a backdrop. */\n this.hasBackdrop = true;\n /** Optional CSS class or classes applied to the overlay backdrop. */\n this.backdropClass = '';\n /** Whether the dialog closes with the escape key or pointer events outside the panel element. */\n this.disableClose = false;\n /** Width of the dialog. */\n this.width = '';\n /** Height of the dialog. */\n this.height = '';\n /** Data being injected into the child component. */\n this.data = null;\n /** ID of the element that describes the dialog. */\n this.ariaDescribedBy = null;\n /** ID of the element that labels the dialog. */\n this.ariaLabelledBy = null;\n /** Dialog label applied via `aria-label` */\n this.ariaLabel = null;\n /** Whether this is a modal dialog. Used to set the `aria-modal` attribute. */\n this.ariaModal = true;\n /**\n * Where the dialog should focus on open.\n * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or\n * AutoFocusTarget instead.\n */\n this.autoFocus = 'first-tabbable';\n /**\n * Whether the dialog should restore focus to the previously-focused element upon closing.\n * Has the following behavior based on the type that is passed in:\n * - `boolean` - when true, will return focus to the element that was focused before the dialog\n * was opened, otherwise won't restore focus at all.\n * - `string` - focus will be restored to the first element that matches the CSS selector.\n * - `HTMLElement` - focus will be restored to the specific element.\n */\n this.restoreFocus = true;\n /**\n * Whether the dialog should close when the user navigates backwards or forwards through browser\n * history. This does not apply to navigation via anchor element unless using URL-hash based\n * routing (`HashLocationStrategy` in the Angular router).\n */\n this.closeOnNavigation = true;\n /**\n * Whether the dialog should close when the dialog service is destroyed. This is useful if\n * another service is wrapping the dialog and is managing the destruction instead.\n */\n this.closeOnDestroy = true;\n /**\n * Whether the dialog should close when the underlying overlay is detached. This is useful if\n * another service is wrapping the dialog and is managing the destruction instead. E.g. an\n * external detachment can happen as a result of a scroll strategy triggering it or when the\n * browser location changes.\n */\n this.closeOnOverlayDetachments = true;\n }\n}\nfunction throwDialogContentAlreadyAttachedError() {\n throw Error('Attempting to attach dialog content after content is already attached');\n}\n/**\n * Internal component that wraps user-provided dialog content.\n * @docs-private\n */\nlet CdkDialogContainer = /*#__PURE__*/(() => {\n class CdkDialogContainer extends BasePortalOutlet {\n constructor(_elementRef, _focusTrapFactory, _document, _config, _interactivityChecker, _ngZone, _overlayRef, _focusMonitor) {\n super();\n this._elementRef = _elementRef;\n this._focusTrapFactory = _focusTrapFactory;\n this._config = _config;\n this._interactivityChecker = _interactivityChecker;\n this._ngZone = _ngZone;\n this._overlayRef = _overlayRef;\n this._focusMonitor = _focusMonitor;\n /** Element that was focused before the dialog was opened. Save this to restore upon close. */\n this._elementFocusedBeforeDialogWasOpened = null;\n /**\n * Type of interaction that led to the dialog being closed. This is used to determine\n * whether the focus style will be applied when returning focus to its original location\n * after the dialog is closed.\n */\n this._closeInteractionType = null;\n /**\n * Queue of the IDs of the dialog's label element, based on their definition order. The first\n * ID will be used as the `aria-labelledby` value. We use a queue here to handle the case\n * where there are two or more titles in the DOM at a time and the first one is destroyed while\n * the rest are present.\n */\n this._ariaLabelledByQueue = [];\n /**\n * Attaches a DOM portal to the dialog container.\n * @param portal Portal to be attached.\n * @deprecated To be turned into a method.\n * @breaking-change 10.0.0\n */\n this.attachDomPortal = portal => {\n if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throwDialogContentAlreadyAttachedError();\n }\n const result = this._portalOutlet.attachDomPortal(portal);\n this._contentAttached();\n return result;\n };\n this._document = _document;\n if (this._config.ariaLabelledBy) {\n this._ariaLabelledByQueue.push(this._config.ariaLabelledBy);\n }\n }\n _contentAttached() {\n this._initializeFocusTrap();\n this._handleBackdropClicks();\n this._captureInitialFocus();\n }\n /**\n * Can be used by child classes to customize the initial focus\n * capturing behavior (e.g. if it's tied to an animation).\n */\n _captureInitialFocus() {\n this._trapFocus();\n }\n ngOnDestroy() {\n this._restoreFocus();\n }\n /**\n * Attach a ComponentPortal as content to this dialog container.\n * @param portal Portal to be attached as the dialog content.\n */\n attachComponentPortal(portal) {\n if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throwDialogContentAlreadyAttachedError();\n }\n const result = this._portalOutlet.attachComponentPortal(portal);\n this._contentAttached();\n return result;\n }\n /**\n * Attach a TemplatePortal as content to this dialog container.\n * @param portal Portal to be attached as the dialog content.\n */\n attachTemplatePortal(portal) {\n if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throwDialogContentAlreadyAttachedError();\n }\n const result = this._portalOutlet.attachTemplatePortal(portal);\n this._contentAttached();\n return result;\n }\n // TODO(crisbeto): this shouldn't be exposed, but there are internal references to it.\n /** Captures focus if it isn't already inside the dialog. */\n _recaptureFocus() {\n if (!this._containsFocus()) {\n this._trapFocus();\n }\n }\n /**\n * Focuses the provided element. If the element is not focusable, it will add a tabIndex\n * attribute to forcefully focus it. The attribute is removed after focus is moved.\n * @param element The element to focus.\n */\n _forceFocus(element, options) {\n if (!this._interactivityChecker.isFocusable(element)) {\n element.tabIndex = -1;\n // The tabindex attribute should be removed to avoid navigating to that element again\n this._ngZone.runOutsideAngular(() => {\n const callback = () => {\n element.removeEventListener('blur', callback);\n element.removeEventListener('mousedown', callback);\n element.removeAttribute('tabindex');\n };\n element.addEventListener('blur', callback);\n element.addEventListener('mousedown', callback);\n });\n }\n element.focus(options);\n }\n /**\n * Focuses the first element that matches the given selector within the focus trap.\n * @param selector The CSS selector for the element to set focus to.\n */\n _focusByCssSelector(selector, options) {\n let elementToFocus = this._elementRef.nativeElement.querySelector(selector);\n if (elementToFocus) {\n this._forceFocus(elementToFocus, options);\n }\n }\n /**\n * Moves the focus inside the focus trap. When autoFocus is not set to 'dialog', if focus\n * cannot be moved then focus will go to the dialog container.\n */\n _trapFocus() {\n const element = this._elementRef.nativeElement;\n // If were to attempt to focus immediately, then the content of the dialog would not yet be\n // ready in instances where change detection has to run first. To deal with this, we simply\n // wait for the microtask queue to be empty when setting focus when autoFocus isn't set to\n // dialog. If the element inside the dialog can't be focused, then the container is focused\n // so the user can't tab into other elements behind it.\n switch (this._config.autoFocus) {\n case false:\n case 'dialog':\n // Ensure that focus is on the dialog container. It's possible that a different\n // component tried to move focus while the open animation was running. See:\n // https://github.com/angular/components/issues/16215. Note that we only want to do this\n // if the focus isn't inside the dialog already, because it's possible that the consumer\n // turned off `autoFocus` in order to move focus themselves.\n if (!this._containsFocus()) {\n element.focus();\n }\n break;\n case true:\n case 'first-tabbable':\n this._focusTrap.focusInitialElementWhenReady().then(focusedSuccessfully => {\n // If we weren't able to find a focusable element in the dialog, then focus the dialog\n // container instead.\n if (!focusedSuccessfully) {\n this._focusDialogContainer();\n }\n });\n break;\n case 'first-heading':\n this._focusByCssSelector('h1, h2, h3, h4, h5, h6, [role=\"heading\"]');\n break;\n default:\n this._focusByCssSelector(this._config.autoFocus);\n break;\n }\n }\n /** Restores focus to the element that was focused before the dialog opened. */\n _restoreFocus() {\n const focusConfig = this._config.restoreFocus;\n let focusTargetElement = null;\n if (typeof focusConfig === 'string') {\n focusTargetElement = this._document.querySelector(focusConfig);\n } else if (typeof focusConfig === 'boolean') {\n focusTargetElement = focusConfig ? this._elementFocusedBeforeDialogWasOpened : null;\n } else if (focusConfig) {\n focusTargetElement = focusConfig;\n }\n // We need the extra check, because IE can set the `activeElement` to null in some cases.\n if (this._config.restoreFocus && focusTargetElement && typeof focusTargetElement.focus === 'function') {\n const activeElement = _getFocusedElementPierceShadowDom();\n const element = this._elementRef.nativeElement;\n // Make sure that focus is still inside the dialog or is on the body (usually because a\n // non-focusable element like the backdrop was clicked) before moving it. It's possible that\n // the consumer moved it themselves before the animation was done, in which case we shouldn't\n // do anything.\n if (!activeElement || activeElement === this._document.body || activeElement === element || element.contains(activeElement)) {\n if (this._focusMonitor) {\n this._focusMonitor.focusVia(focusTargetElement, this._closeInteractionType);\n this._closeInteractionType = null;\n } else {\n focusTargetElement.focus();\n }\n }\n }\n if (this._focusTrap) {\n this._focusTrap.destroy();\n }\n }\n /** Focuses the dialog container. */\n _focusDialogContainer() {\n // Note that there is no focus method when rendering on the server.\n if (this._elementRef.nativeElement.focus) {\n this._elementRef.nativeElement.focus();\n }\n }\n /** Returns whether focus is inside the dialog. */\n _containsFocus() {\n const element = this._elementRef.nativeElement;\n const activeElement = _getFocusedElementPierceShadowDom();\n return element === activeElement || element.contains(activeElement);\n }\n /** Sets up the focus trap. */\n _initializeFocusTrap() {\n this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);\n // Save the previously focused element. This element will be re-focused\n // when the dialog closes.\n if (this._document) {\n this._elementFocusedBeforeDialogWasOpened = _getFocusedElementPierceShadowDom();\n }\n }\n /** Sets up the listener that handles clicks on the dialog backdrop. */\n _handleBackdropClicks() {\n // Clicking on the backdrop will move focus out of dialog.\n // Recapture it if closing via the backdrop is disabled.\n this._overlayRef.backdropClick().subscribe(() => {\n if (this._config.disableClose) {\n this._recaptureFocus();\n }\n });\n }\n static {\n this.ɵfac = function CdkDialogContainer_Factory(t) {\n return new (t || CdkDialogContainer)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.FocusTrapFactory), i0.ɵɵdirectiveInject(DOCUMENT, 8), i0.ɵɵdirectiveInject(DialogConfig), i0.ɵɵdirectiveInject(i1.InteractivityChecker), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1$1.OverlayRef), i0.ɵɵdirectiveInject(i1.FocusMonitor));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: CdkDialogContainer,\n selectors: [[\"cdk-dialog-container\"]],\n viewQuery: function CdkDialogContainer_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(CdkPortalOutlet, 7);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._portalOutlet = _t.first);\n }\n },\n hostAttrs: [\"tabindex\", \"-1\", 1, \"cdk-dialog-container\"],\n hostVars: 6,\n hostBindings: function CdkDialogContainer_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵattribute(\"id\", ctx._config.id || null)(\"role\", ctx._config.role)(\"aria-modal\", ctx._config.ariaModal)(\"aria-labelledby\", ctx._config.ariaLabel ? null : ctx._ariaLabelledByQueue[0])(\"aria-label\", ctx._config.ariaLabel)(\"aria-describedby\", ctx._config.ariaDescribedBy || null);\n }\n },\n standalone: true,\n features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature],\n decls: 1,\n vars: 0,\n consts: [[\"cdkPortalOutlet\", \"\"]],\n template: function CdkDialogContainer_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵtemplate(0, CdkDialogContainer_ng_template_0_Template, 0, 0, \"ng-template\", 0);\n }\n },\n dependencies: [PortalModule, i3.CdkPortalOutlet],\n styles: [\".cdk-dialog-container{display:block;width:100%;height:100%;min-height:inherit;max-height:inherit}\"],\n encapsulation: 2\n });\n }\n }\n return CdkDialogContainer;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Reference to a dialog opened via the Dialog service.\n */\nclass DialogRef {\n constructor(overlayRef, config) {\n this.overlayRef = overlayRef;\n this.config = config;\n /** Emits when the dialog has been closed. */\n this.closed = new Subject();\n this.disableClose = config.disableClose;\n this.backdropClick = overlayRef.backdropClick();\n this.keydownEvents = overlayRef.keydownEvents();\n this.outsidePointerEvents = overlayRef.outsidePointerEvents();\n this.id = config.id; // By the time the dialog is created we are guaranteed to have an ID.\n this.keydownEvents.subscribe(event => {\n if (event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)) {\n event.preventDefault();\n this.close(undefined, {\n focusOrigin: 'keyboard'\n });\n }\n });\n this.backdropClick.subscribe(() => {\n if (!this.disableClose) {\n this.close(undefined, {\n focusOrigin: 'mouse'\n });\n }\n });\n this._detachSubscription = overlayRef.detachments().subscribe(() => {\n // Check specifically for `false`, because we want `undefined` to be treated like `true`.\n if (config.closeOnOverlayDetachments !== false) {\n this.close();\n }\n });\n }\n /**\n * Close the dialog.\n * @param result Optional result to return to the dialog opener.\n * @param options Additional options to customize the closing behavior.\n */\n close(result, options) {\n if (this.containerInstance) {\n const closedSubject = this.closed;\n this.containerInstance._closeInteractionType = options?.focusOrigin || 'program';\n // Drop the detach subscription first since it can be triggered by the\n // `dispose` call and override the result of this closing sequence.\n this._detachSubscription.unsubscribe();\n this.overlayRef.dispose();\n closedSubject.next(result);\n closedSubject.complete();\n this.componentInstance = this.containerInstance = null;\n }\n }\n /** Updates the position of the dialog based on the current position strategy. */\n updatePosition() {\n this.overlayRef.updatePosition();\n return this;\n }\n /**\n * Updates the dialog's width and height.\n * @param width New width of the dialog.\n * @param height New height of the dialog.\n */\n updateSize(width = '', height = '') {\n this.overlayRef.updateSize({\n width,\n height\n });\n return this;\n }\n /** Add a CSS class or an array of classes to the overlay pane. */\n addPanelClass(classes) {\n this.overlayRef.addPanelClass(classes);\n return this;\n }\n /** Remove a CSS class or an array of classes from the overlay pane. */\n removePanelClass(classes) {\n this.overlayRef.removePanelClass(classes);\n return this;\n }\n}\n\n/** Injection token for the Dialog's ScrollStrategy. */\nconst DIALOG_SCROLL_STRATEGY = /*#__PURE__*/new InjectionToken('DialogScrollStrategy', {\n providedIn: 'root',\n factory: () => {\n const overlay = inject(Overlay);\n return () => overlay.scrollStrategies.block();\n }\n});\n/** Injection token for the Dialog's Data. */\nconst DIALOG_DATA = /*#__PURE__*/new InjectionToken('DialogData');\n/** Injection token that can be used to provide default options for the dialog module. */\nconst DEFAULT_DIALOG_CONFIG = /*#__PURE__*/new InjectionToken('DefaultDialogConfig');\n/**\n * @docs-private\n * @deprecated No longer used. To be removed.\n * @breaking-change 19.0.0\n */\nfunction DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {\n return () => overlay.scrollStrategies.block();\n}\n/**\n * @docs-private\n * @deprecated No longer used. To be removed.\n * @breaking-change 19.0.0\n */\nconst DIALOG_SCROLL_STRATEGY_PROVIDER = {\n provide: DIALOG_SCROLL_STRATEGY,\n deps: [Overlay],\n useFactory: DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY\n};\n\n/** Unique id for the created dialog. */\nlet uniqueId = 0;\nlet Dialog = /*#__PURE__*/(() => {\n class Dialog {\n /** Keeps track of the currently-open dialogs. */\n get openDialogs() {\n return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;\n }\n /** Stream that emits when a dialog has been opened. */\n get afterOpened() {\n return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpenedAtThisLevel;\n }\n constructor(_overlay, _injector, _defaultOptions, _parentDialog, _overlayContainer, scrollStrategy) {\n this._overlay = _overlay;\n this._injector = _injector;\n this._defaultOptions = _defaultOptions;\n this._parentDialog = _parentDialog;\n this._overlayContainer = _overlayContainer;\n this._openDialogsAtThisLevel = [];\n this._afterAllClosedAtThisLevel = new Subject();\n this._afterOpenedAtThisLevel = new Subject();\n this._ariaHiddenElements = new Map();\n /**\n * Stream that emits when all open dialog have finished closing.\n * Will emit on subscribe if there are no open dialogs to begin with.\n */\n this.afterAllClosed = defer(() => this.openDialogs.length ? this._getAfterAllClosed() : this._getAfterAllClosed().pipe(startWith(undefined)));\n this._scrollStrategy = scrollStrategy;\n }\n open(componentOrTemplateRef, config) {\n const defaults = this._defaultOptions || new DialogConfig();\n config = {\n ...defaults,\n ...config\n };\n config.id = config.id || `cdk-dialog-${uniqueId++}`;\n if (config.id && this.getDialogById(config.id) && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error(`Dialog with id \"${config.id}\" exists already. The dialog id must be unique.`);\n }\n const overlayConfig = this._getOverlayConfig(config);\n const overlayRef = this._overlay.create(overlayConfig);\n const dialogRef = new DialogRef(overlayRef, config);\n const dialogContainer = this._attachContainer(overlayRef, dialogRef, config);\n dialogRef.containerInstance = dialogContainer;\n this._attachDialogContent(componentOrTemplateRef, dialogRef, dialogContainer, config);\n // If this is the first dialog that we're opening, hide all the non-overlay content.\n if (!this.openDialogs.length) {\n this._hideNonDialogContentFromAssistiveTechnology();\n }\n this.openDialogs.push(dialogRef);\n dialogRef.closed.subscribe(() => this._removeOpenDialog(dialogRef, true));\n this.afterOpened.next(dialogRef);\n return dialogRef;\n }\n /**\n * Closes all of the currently-open dialogs.\n */\n closeAll() {\n reverseForEach(this.openDialogs, dialog => dialog.close());\n }\n /**\n * Finds an open dialog by its id.\n * @param id ID to use when looking up the dialog.\n */\n getDialogById(id) {\n return this.openDialogs.find(dialog => dialog.id === id);\n }\n ngOnDestroy() {\n // Make one pass over all the dialogs that need to be untracked, but should not be closed. We\n // want to stop tracking the open dialog even if it hasn't been closed, because the tracking\n // determines when `aria-hidden` is removed from elements outside the dialog.\n reverseForEach(this._openDialogsAtThisLevel, dialog => {\n // Check for `false` specifically since we want `undefined` to be interpreted as `true`.\n if (dialog.config.closeOnDestroy === false) {\n this._removeOpenDialog(dialog, false);\n }\n });\n // Make a second pass and close the remaining dialogs. We do this second pass in order to\n // correctly dispatch the `afterAllClosed` event in case we have a mixed array of dialogs\n // that should be closed and dialogs that should not.\n reverseForEach(this._openDialogsAtThisLevel, dialog => dialog.close());\n this._afterAllClosedAtThisLevel.complete();\n this._afterOpenedAtThisLevel.complete();\n this._openDialogsAtThisLevel = [];\n }\n /**\n * Creates an overlay config from a dialog config.\n * @param config The dialog configuration.\n * @returns The overlay configuration.\n */\n _getOverlayConfig(config) {\n const state = new OverlayConfig({\n positionStrategy: config.positionStrategy || this._overlay.position().global().centerHorizontally().centerVertically(),\n scrollStrategy: config.scrollStrategy || this._scrollStrategy(),\n panelClass: config.panelClass,\n hasBackdrop: config.hasBackdrop,\n direction: config.direction,\n minWidth: config.minWidth,\n minHeight: config.minHeight,\n maxWidth: config.maxWidth,\n maxHeight: config.maxHeight,\n width: config.width,\n height: config.height,\n disposeOnNavigation: config.closeOnNavigation\n });\n if (config.backdropClass) {\n state.backdropClass = config.backdropClass;\n }\n return state;\n }\n /**\n * Attaches a dialog container to a dialog's already-created overlay.\n * @param overlay Reference to the dialog's underlying overlay.\n * @param config The dialog configuration.\n * @returns A promise resolving to a ComponentRef for the attached container.\n */\n _attachContainer(overlay, dialogRef, config) {\n const userInjector = config.injector || config.viewContainerRef?.injector;\n const providers = [{\n provide: DialogConfig,\n useValue: config\n }, {\n provide: DialogRef,\n useValue: dialogRef\n }, {\n provide: OverlayRef,\n useValue: overlay\n }];\n let containerType;\n if (config.container) {\n if (typeof config.container === 'function') {\n containerType = config.container;\n } else {\n containerType = config.container.type;\n providers.push(...config.container.providers(config));\n }\n } else {\n containerType = CdkDialogContainer;\n }\n const containerPortal = new ComponentPortal(containerType, config.viewContainerRef, Injector.create({\n parent: userInjector || this._injector,\n providers\n }), config.componentFactoryResolver);\n const containerRef = overlay.attach(containerPortal);\n return containerRef.instance;\n }\n /**\n * Attaches the user-provided component to the already-created dialog container.\n * @param componentOrTemplateRef The type of component being loaded into the dialog,\n * or a TemplateRef to instantiate as the content.\n * @param dialogRef Reference to the dialog being opened.\n * @param dialogContainer Component that is going to wrap the dialog content.\n * @param config Configuration used to open the dialog.\n */\n _attachDialogContent(componentOrTemplateRef, dialogRef, dialogContainer, config) {\n if (componentOrTemplateRef instanceof TemplateRef) {\n const injector = this._createInjector(config, dialogRef, dialogContainer, undefined);\n let context = {\n $implicit: config.data,\n dialogRef\n };\n if (config.templateContext) {\n context = {\n ...context,\n ...(typeof config.templateContext === 'function' ? config.templateContext() : config.templateContext)\n };\n }\n dialogContainer.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, context, injector));\n } else {\n const injector = this._createInjector(config, dialogRef, dialogContainer, this._injector);\n const contentRef = dialogContainer.attachComponentPortal(new ComponentPortal(componentOrTemplateRef, config.viewContainerRef, injector, config.componentFactoryResolver));\n dialogRef.componentRef = contentRef;\n dialogRef.componentInstance = contentRef.instance;\n }\n }\n /**\n * Creates a custom injector to be used inside the dialog. This allows a component loaded inside\n * of a dialog to close itself and, optionally, to return a value.\n * @param config Config object that is used to construct the dialog.\n * @param dialogRef Reference to the dialog being opened.\n * @param dialogContainer Component that is going to wrap the dialog content.\n * @param fallbackInjector Injector to use as a fallback when a lookup fails in the custom\n * dialog injector, if the user didn't provide a custom one.\n * @returns The custom injector that can be used inside the dialog.\n */\n _createInjector(config, dialogRef, dialogContainer, fallbackInjector) {\n const userInjector = config.injector || config.viewContainerRef?.injector;\n const providers = [{\n provide: DIALOG_DATA,\n useValue: config.data\n }, {\n provide: DialogRef,\n useValue: dialogRef\n }];\n if (config.providers) {\n if (typeof config.providers === 'function') {\n providers.push(...config.providers(dialogRef, config, dialogContainer));\n } else {\n providers.push(...config.providers);\n }\n }\n if (config.direction && (!userInjector || !userInjector.get(Directionality, null, {\n optional: true\n }))) {\n providers.push({\n provide: Directionality,\n useValue: {\n value: config.direction,\n change: of()\n }\n });\n }\n return Injector.create({\n parent: userInjector || fallbackInjector,\n providers\n });\n }\n /**\n * Removes a dialog from the array of open dialogs.\n * @param dialogRef Dialog to be removed.\n * @param emitEvent Whether to emit an event if this is the last dialog.\n */\n _removeOpenDialog(dialogRef, emitEvent) {\n const index = this.openDialogs.indexOf(dialogRef);\n if (index > -1) {\n this.openDialogs.splice(index, 1);\n // If all the dialogs were closed, remove/restore the `aria-hidden`\n // to a the siblings and emit to the `afterAllClosed` stream.\n if (!this.openDialogs.length) {\n this._ariaHiddenElements.forEach((previousValue, element) => {\n if (previousValue) {\n element.setAttribute('aria-hidden', previousValue);\n } else {\n element.removeAttribute('aria-hidden');\n }\n });\n this._ariaHiddenElements.clear();\n if (emitEvent) {\n this._getAfterAllClosed().next();\n }\n }\n }\n }\n /** Hides all of the content that isn't an overlay from assistive technology. */\n _hideNonDialogContentFromAssistiveTechnology() {\n const overlayContainer = this._overlayContainer.getContainerElement();\n // Ensure that the overlay container is attached to the DOM.\n if (overlayContainer.parentElement) {\n const siblings = overlayContainer.parentElement.children;\n for (let i = siblings.length - 1; i > -1; i--) {\n const sibling = siblings[i];\n if (sibling !== overlayContainer && sibling.nodeName !== 'SCRIPT' && sibling.nodeName !== 'STYLE' && !sibling.hasAttribute('aria-live')) {\n this._ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));\n sibling.setAttribute('aria-hidden', 'true');\n }\n }\n }\n }\n _getAfterAllClosed() {\n const parent = this._parentDialog;\n return parent ? parent._getAfterAllClosed() : this._afterAllClosedAtThisLevel;\n }\n static {\n this.ɵfac = function Dialog_Factory(t) {\n return new (t || Dialog)(i0.ɵɵinject(i1$1.Overlay), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(DEFAULT_DIALOG_CONFIG, 8), i0.ɵɵinject(Dialog, 12), i0.ɵɵinject(i1$1.OverlayContainer), i0.ɵɵinject(DIALOG_SCROLL_STRATEGY));\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: Dialog,\n factory: Dialog.ɵfac,\n providedIn: 'root'\n });\n }\n }\n return Dialog;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Executes a callback against all elements in an array while iterating in reverse.\n * Useful if the array is being modified as it is being iterated.\n */\nfunction reverseForEach(items, callback) {\n let i = items.length;\n while (i--) {\n callback(items[i]);\n }\n}\nlet DialogModule = /*#__PURE__*/(() => {\n class DialogModule {\n static {\n this.ɵfac = function DialogModule_Factory(t) {\n return new (t || DialogModule)();\n };\n }\n static {\n this.ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: DialogModule\n });\n }\n static {\n this.ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n providers: [Dialog],\n imports: [OverlayModule, PortalModule, A11yModule, CdkDialogContainer,\n // Re-export the PortalModule so that people extending the `CdkDialogContainer`\n // don't have to remember to import it or be faced with an unhelpful error.\n PortalModule]\n });\n }\n }\n return DialogModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { CdkDialogContainer, DEFAULT_DIALOG_CONFIG, DIALOG_DATA, DIALOG_SCROLL_STRATEGY, DIALOG_SCROLL_STRATEGY_PROVIDER, DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, Dialog, DialogConfig, DialogModule, DialogRef, throwDialogContentAlreadyAttachedError };\n","import * as i1$1 from '@angular/cdk/overlay';\nimport { Overlay, OverlayModule } from '@angular/cdk/overlay';\nimport * as i2 from '@angular/common';\nimport { DOCUMENT } from '@angular/common';\nimport * as i0 from '@angular/core';\nimport { EventEmitter, Component, Optional, Inject, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Injectable, ANIMATION_MODULE_TYPE as ANIMATION_MODULE_TYPE$1, SkipSelf, Directive, Input, NgModule } from '@angular/core';\nimport * as i1 from '@angular/cdk/a11y';\nimport { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';\nimport { CdkDialogContainer, Dialog, DialogConfig, DialogModule } from '@angular/cdk/dialog';\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport * as i4 from '@angular/cdk/portal';\nimport { PortalModule } from '@angular/cdk/portal';\nimport { Subject, merge, defer } from 'rxjs';\nimport { filter, take, startWith } from 'rxjs/operators';\nimport { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';\nimport { MatCommonModule } from '@angular/material/core';\nimport { trigger, state, style, transition, group, animate, query, animateChild } from '@angular/animations';\n\n/**\n * Configuration for opening a modal dialog with the MatDialog service.\n */\nfunction MatDialogContainer_ng_template_2_Template(rf, ctx) {}\nclass MatDialogConfig {\n constructor() {\n /** The ARIA role of the dialog element. */\n this.role = 'dialog';\n /** Custom class for the overlay pane. */\n this.panelClass = '';\n /** Whether the dialog has a backdrop. */\n this.hasBackdrop = true;\n /** Custom class for the backdrop. */\n this.backdropClass = '';\n /** Whether the user can use escape or clicking on the backdrop to close the modal. */\n this.disableClose = false;\n /** Width of the dialog. */\n this.width = '';\n /** Height of the dialog. */\n this.height = '';\n /** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */\n this.maxWidth = '80vw';\n /** Data being injected into the child component. */\n this.data = null;\n /** ID of the element that describes the dialog. */\n this.ariaDescribedBy = null;\n /** ID of the element that labels the dialog. */\n this.ariaLabelledBy = null;\n /** Aria label to assign to the dialog element. */\n this.ariaLabel = null;\n /** Whether this is a modal dialog. Used to set the `aria-modal` attribute. */\n this.ariaModal = true;\n /**\n * Where the dialog should focus on open.\n * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or\n * AutoFocusTarget instead.\n */\n this.autoFocus = 'first-tabbable';\n /**\n * Whether the dialog should restore focus to the\n * previously-focused element, after it's closed.\n */\n this.restoreFocus = true;\n /** Whether to wait for the opening animation to finish before trapping focus. */\n this.delayFocusTrap = true;\n /**\n * Whether the dialog should close when the user goes backwards/forwards in history.\n * Note that this usually doesn't include clicking on links (unless the user is using\n * the `HashLocationStrategy`).\n */\n this.closeOnNavigation = true;\n // TODO(jelbourn): add configuration for lifecycle hooks, ARIA labelling.\n }\n}\n\n/** Class added when the dialog is open. */\nconst OPEN_CLASS = 'mdc-dialog--open';\n/** Class added while the dialog is opening. */\nconst OPENING_CLASS = 'mdc-dialog--opening';\n/** Class added while the dialog is closing. */\nconst CLOSING_CLASS = 'mdc-dialog--closing';\n/** Duration of the opening animation in milliseconds. */\nconst OPEN_ANIMATION_DURATION = 150;\n/** Duration of the closing animation in milliseconds. */\nconst CLOSE_ANIMATION_DURATION = 75;\n/**\n * Base class for the `MatDialogContainer`. The base class does not implement\n * animations as these are left to implementers of the dialog container.\n */\n// tslint:disable-next-line:validate-decorators\nlet _MatDialogContainerBase = /*#__PURE__*/(() => {\n class _MatDialogContainerBase extends CdkDialogContainer {\n constructor(elementRef, focusTrapFactory, _document, dialogConfig, interactivityChecker, ngZone, overlayRef, focusMonitor) {\n super(elementRef, focusTrapFactory, _document, dialogConfig, interactivityChecker, ngZone, overlayRef, focusMonitor);\n /** Emits when an animation state changes. */\n this._animationStateChanged = new EventEmitter();\n }\n _captureInitialFocus() {\n if (!this._config.delayFocusTrap) {\n this._trapFocus();\n }\n }\n /**\n * Callback for when the open dialog animation has finished. Intended to\n * be called by sub-classes that use different animation implementations.\n */\n _openAnimationDone(totalTime) {\n if (this._config.delayFocusTrap) {\n this._trapFocus();\n }\n this._animationStateChanged.next({\n state: 'opened',\n totalTime\n });\n }\n static {\n this.ɵfac = function _MatDialogContainerBase_Factory(t) {\n return new (t || _MatDialogContainerBase)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.FocusTrapFactory), i0.ɵɵdirectiveInject(DOCUMENT, 8), i0.ɵɵdirectiveInject(MatDialogConfig), i0.ɵɵdirectiveInject(i1.InteractivityChecker), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1$1.OverlayRef), i0.ɵɵdirectiveInject(i1.FocusMonitor));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: _MatDialogContainerBase,\n selectors: [[\"ng-component\"]],\n features: [i0.ɵɵInheritDefinitionFeature],\n decls: 0,\n vars: 0,\n template: function _MatDialogContainerBase_Template(rf, ctx) {},\n encapsulation: 2\n });\n }\n }\n return _MatDialogContainerBase;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nconst TRANSITION_DURATION_PROPERTY = '--mat-dialog-transition-duration';\n// TODO(mmalerba): Remove this function after animation durations are required\n// to be numbers.\n/**\n * Converts a CSS time string to a number in ms. If the given time is already a\n * number, it is assumed to be in ms.\n */\nfunction parseCssTime(time) {\n if (time == null) {\n return null;\n }\n if (typeof time === 'number') {\n return time;\n }\n if (time.endsWith('ms')) {\n return coerceNumberProperty(time.substring(0, time.length - 2));\n }\n if (time.endsWith('s')) {\n return coerceNumberProperty(time.substring(0, time.length - 1)) * 1000;\n }\n if (time === '0') {\n return 0;\n }\n return null; // anything else is invalid.\n}\n/**\n * Internal component that wraps user-provided dialog content in a MDC dialog.\n * @docs-private\n */\nlet MatDialogContainer = /*#__PURE__*/(() => {\n class MatDialogContainer extends _MatDialogContainerBase {\n constructor(elementRef, focusTrapFactory, document, dialogConfig, checker, ngZone, overlayRef, _animationMode, focusMonitor) {\n super(elementRef, focusTrapFactory, document, dialogConfig, checker, ngZone, overlayRef, focusMonitor);\n this._animationMode = _animationMode;\n /** Whether animations are enabled. */\n this._animationsEnabled = this._animationMode !== 'NoopAnimations';\n /** Host element of the dialog container component. */\n this._hostElement = this._elementRef.nativeElement;\n /** Duration of the dialog open animation. */\n this._openAnimationDuration = this._animationsEnabled ? parseCssTime(this._config.enterAnimationDuration) ?? OPEN_ANIMATION_DURATION : 0;\n /** Duration of the dialog close animation. */\n this._closeAnimationDuration = this._animationsEnabled ? parseCssTime(this._config.exitAnimationDuration) ?? CLOSE_ANIMATION_DURATION : 0;\n /** Current timer for dialog animations. */\n this._animationTimer = null;\n /**\n * Completes the dialog open by clearing potential animation classes, trapping\n * focus and emitting an opened event.\n */\n this._finishDialogOpen = () => {\n this._clearAnimationClasses();\n this._openAnimationDone(this._openAnimationDuration);\n };\n /**\n * Completes the dialog close by clearing potential animation classes, restoring\n * focus and emitting a closed event.\n */\n this._finishDialogClose = () => {\n this._clearAnimationClasses();\n this._animationStateChanged.emit({\n state: 'closed',\n totalTime: this._closeAnimationDuration\n });\n };\n }\n _contentAttached() {\n // Delegate to the original dialog-container initialization (i.e. saving the\n // previous element, setting up the focus trap and moving focus to the container).\n super._contentAttached();\n // Note: Usually we would be able to use the MDC dialog foundation here to handle\n // the dialog animation for us, but there are a few reasons why we just leverage\n // their styles and not use the runtime foundation code:\n // 1. Foundation does not allow us to disable animations.\n // 2. Foundation contains unnecessary features we don't need and aren't\n // tree-shakeable. e.g. background scrim, keyboard event handlers for ESC button.\n // 3. Foundation uses unnecessary timers for animations to work around limitations\n // in React's `setState` mechanism.\n // https://github.com/material-components/material-components-web/pull/3682.\n this._startOpenAnimation();\n }\n ngOnDestroy() {\n super.ngOnDestroy();\n if (this._animationTimer !== null) {\n clearTimeout(this._animationTimer);\n }\n }\n /** Starts the dialog open animation if enabled. */\n _startOpenAnimation() {\n this._animationStateChanged.emit({\n state: 'opening',\n totalTime: this._openAnimationDuration\n });\n if (this._animationsEnabled) {\n this._hostElement.style.setProperty(TRANSITION_DURATION_PROPERTY, `${this._openAnimationDuration}ms`);\n // We need to give the `setProperty` call from above some time to be applied.\n // One would expect that the open class is added once the animation finished, but MDC\n // uses the open class in combination with the opening class to start the animation.\n this._requestAnimationFrame(() => this._hostElement.classList.add(OPENING_CLASS, OPEN_CLASS));\n this._waitForAnimationToComplete(this._openAnimationDuration, this._finishDialogOpen);\n } else {\n this._hostElement.classList.add(OPEN_CLASS);\n // Note: We could immediately finish the dialog opening here with noop animations,\n // but we defer until next tick so that consumers can subscribe to `afterOpened`.\n // Executing this immediately would mean that `afterOpened` emits synchronously\n // on `dialog.open` before the consumer had a change to subscribe to `afterOpened`.\n Promise.resolve().then(() => this._finishDialogOpen());\n }\n }\n /**\n * Starts the exit animation of the dialog if enabled. This method is\n * called by the dialog ref.\n */\n _startExitAnimation() {\n this._animationStateChanged.emit({\n state: 'closing',\n totalTime: this._closeAnimationDuration\n });\n this._hostElement.classList.remove(OPEN_CLASS);\n if (this._animationsEnabled) {\n this._hostElement.style.setProperty(TRANSITION_DURATION_PROPERTY, `${this._openAnimationDuration}ms`);\n // We need to give the `setProperty` call from above some time to be applied.\n this._requestAnimationFrame(() => this._hostElement.classList.add(CLOSING_CLASS));\n this._waitForAnimationToComplete(this._closeAnimationDuration, this._finishDialogClose);\n } else {\n // This subscription to the `OverlayRef#backdropClick` observable in the `DialogRef` is\n // set up before any user can subscribe to the backdrop click. The subscription triggers\n // the dialog close and this method synchronously. If we'd synchronously emit the `CLOSED`\n // animation state event if animations are disabled, the overlay would be disposed\n // immediately and all other subscriptions to `DialogRef#backdropClick` would be silently\n // skipped. We work around this by waiting with the dialog close until the next tick when\n // all subscriptions have been fired as expected. This is not an ideal solution, but\n // there doesn't seem to be any other good way. Alternatives that have been considered:\n // 1. Deferring `DialogRef.close`. This could be a breaking change due to a new microtask.\n // Also this issue is specific to the MDC implementation where the dialog could\n // technically be closed synchronously. In the non-MDC one, Angular animations are used\n // and closing always takes at least a tick.\n // 2. Ensuring that user subscriptions to `backdropClick`, `keydownEvents` in the dialog\n // ref are first. This would solve the issue, but has the risk of memory leaks and also\n // doesn't solve the case where consumers call `DialogRef.close` in their subscriptions.\n // Based on the fact that this is specific to the MDC-based implementation of the dialog\n // animations, the defer is applied here.\n Promise.resolve().then(() => this._finishDialogClose());\n }\n }\n /** Clears all dialog animation classes. */\n _clearAnimationClasses() {\n this._hostElement.classList.remove(OPENING_CLASS, CLOSING_CLASS);\n }\n _waitForAnimationToComplete(duration, callback) {\n if (this._animationTimer !== null) {\n clearTimeout(this._animationTimer);\n }\n // Note that we want this timer to run inside the NgZone, because we want\n // the related events like `afterClosed` to be inside the zone as well.\n this._animationTimer = setTimeout(callback, duration);\n }\n /** Runs a callback in `requestAnimationFrame`, if available. */\n _requestAnimationFrame(callback) {\n this._ngZone.runOutsideAngular(() => {\n if (typeof requestAnimationFrame === 'function') {\n requestAnimationFrame(callback);\n } else {\n callback();\n }\n });\n }\n static {\n this.ɵfac = function MatDialogContainer_Factory(t) {\n return new (t || MatDialogContainer)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.FocusTrapFactory), i0.ɵɵdirectiveInject(DOCUMENT, 8), i0.ɵɵdirectiveInject(MatDialogConfig), i0.ɵɵdirectiveInject(i1.InteractivityChecker), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1$1.OverlayRef), i0.ɵɵdirectiveInject(ANIMATION_MODULE_TYPE, 8), i0.ɵɵdirectiveInject(i1.FocusMonitor));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatDialogContainer,\n selectors: [[\"mat-dialog-container\"]],\n hostAttrs: [\"tabindex\", \"-1\", 1, \"mat-mdc-dialog-container\", \"mdc-dialog\"],\n hostVars: 8,\n hostBindings: function MatDialogContainer_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵhostProperty(\"id\", ctx._config.id);\n i0.ɵɵattribute(\"aria-modal\", ctx._config.ariaModal)(\"role\", ctx._config.role)(\"aria-labelledby\", ctx._config.ariaLabel ? null : ctx._ariaLabelledBy)(\"aria-label\", ctx._config.ariaLabel)(\"aria-describedby\", ctx._config.ariaDescribedBy || null);\n i0.ɵɵclassProp(\"_mat-animation-noopable\", !ctx._animationsEnabled);\n }\n },\n features: [i0.ɵɵInheritDefinitionFeature],\n decls: 3,\n vars: 0,\n consts: [[1, \"mdc-dialog__container\"], [1, \"mat-mdc-dialog-surface\", \"mdc-dialog__surface\"], [\"cdkPortalOutlet\", \"\"]],\n template: function MatDialogContainer_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"div\", 0)(1, \"div\", 1);\n i0.ɵɵtemplate(2, MatDialogContainer_ng_template_2_Template, 0, 0, \"ng-template\", 2);\n i0.ɵɵelementEnd()();\n }\n },\n dependencies: [i4.CdkPortalOutlet],\n styles: [\".mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-dialog,.mdc-dialog__scrim{position:fixed;top:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%}.mdc-dialog{display:none;z-index:var(--mdc-dialog-z-index, 7)}.mdc-dialog .mdc-dialog__content{padding:20px 24px 20px 24px}.mdc-dialog .mdc-dialog__surface{min-width:280px}@media(max-width: 592px){.mdc-dialog .mdc-dialog__surface{max-width:calc(100vw - 32px)}}@media(min-width: 592px){.mdc-dialog .mdc-dialog__surface{max-width:560px}}.mdc-dialog .mdc-dialog__surface{max-height:calc(100% - 32px)}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-width:none}@media(max-width: 960px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:560px;width:560px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}@media(max-width: 720px)and (max-width: 672px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{width:calc(100vw - 112px)}}@media(max-width: 720px)and (min-width: 672px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{width:560px}}@media(max-width: 720px)and (max-height: 720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:calc(100vh - 160px)}}@media(max-width: 720px)and (min-height: 720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:560px}}@media(max-width: 720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}@media(max-width: 720px)and (max-height: 400px),(max-width: 600px),(min-width: 720px)and (max-height: 400px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{height:100%;max-height:100vh;max-width:100vw;width:100vw;border-radius:0}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{order:-1;left:-12px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header{padding:0 16px 9px;justify-content:flex-start}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title{margin-left:calc(16px - 2 * 12px)}}@media(min-width: 960px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{width:calc(100vw - 400px)}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}.mdc-dialog.mdc-dialog__scrim--hidden .mdc-dialog__scrim{opacity:0}.mdc-dialog__scrim{opacity:0;z-index:-1}.mdc-dialog__container{display:flex;flex-direction:row;align-items:center;justify-content:space-around;box-sizing:border-box;height:100%;transform:scale(0.8);opacity:0;pointer-events:none}.mdc-dialog__surface{position:relative;display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;box-sizing:border-box;max-width:100%;max-height:100%;pointer-events:auto;overflow-y:auto}.mdc-dialog__surface .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}[dir=rtl] .mdc-dialog__surface,.mdc-dialog__surface[dir=rtl]{text-align:right}@media screen and (forced-colors: active),(-ms-high-contrast: active){.mdc-dialog__surface{outline:2px solid windowText}}.mdc-dialog__surface::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:2px solid rgba(0,0,0,0);border-radius:inherit;content:\\\"\\\";pointer-events:none}@media screen and (forced-colors: active){.mdc-dialog__surface::before{border-color:CanvasText}}@media screen and (-ms-high-contrast: active),screen and (-ms-high-contrast: none){.mdc-dialog__surface::before{content:none}}.mdc-dialog__title{display:block;margin-top:0;position:relative;flex-shrink:0;box-sizing:border-box;margin:0 0 1px;padding:0 24px 9px}.mdc-dialog__title::before{display:inline-block;width:0;height:40px;content:\\\"\\\";vertical-align:0}[dir=rtl] .mdc-dialog__title,.mdc-dialog__title[dir=rtl]{text-align:right}.mdc-dialog--scrollable .mdc-dialog__title{margin-bottom:1px;padding-bottom:15px}.mdc-dialog--fullscreen .mdc-dialog__header{align-items:baseline;border-bottom:1px solid rgba(0,0,0,0);display:inline-flex;justify-content:space-between;padding:0 24px 9px;z-index:1}@media screen and (forced-colors: active){.mdc-dialog--fullscreen .mdc-dialog__header{border-bottom-color:CanvasText}}.mdc-dialog--fullscreen .mdc-dialog__header .mdc-dialog__close{right:-12px}.mdc-dialog--fullscreen .mdc-dialog__title{margin-bottom:0;padding:0;border-bottom:0}.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__title{border-bottom:0;margin-bottom:0}.mdc-dialog--fullscreen .mdc-dialog__close{top:5px}.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__actions{border-top:1px solid rgba(0,0,0,0)}@media screen and (forced-colors: active){.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__actions{border-top-color:CanvasText}}.mdc-dialog--fullscreen--titleless .mdc-dialog__close{margin-top:4px}.mdc-dialog--fullscreen--titleless.mdc-dialog--scrollable .mdc-dialog__close{margin-top:0}.mdc-dialog__content{flex-grow:1;box-sizing:border-box;margin:0;overflow:auto}.mdc-dialog__content>:first-child{margin-top:0}.mdc-dialog__content>:last-child{margin-bottom:0}.mdc-dialog__title+.mdc-dialog__content,.mdc-dialog__header+.mdc-dialog__content{padding-top:0}.mdc-dialog--scrollable .mdc-dialog__title+.mdc-dialog__content{padding-top:8px;padding-bottom:8px}.mdc-dialog__content .mdc-deprecated-list:first-child:last-child{padding:6px 0 0}.mdc-dialog--scrollable .mdc-dialog__content .mdc-deprecated-list:first-child:last-child{padding:0}.mdc-dialog__actions{display:flex;position:relative;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;box-sizing:border-box;min-height:52px;margin:0;padding:8px;border-top:1px solid rgba(0,0,0,0)}@media screen and (forced-colors: active){.mdc-dialog__actions{border-top-color:CanvasText}}.mdc-dialog--stacked .mdc-dialog__actions{flex-direction:column;align-items:flex-end}.mdc-dialog__button{margin-left:8px;margin-right:0;max-width:100%;text-align:right}[dir=rtl] .mdc-dialog__button,.mdc-dialog__button[dir=rtl]{margin-left:0;margin-right:8px}.mdc-dialog__button:first-child{margin-left:0;margin-right:0}[dir=rtl] .mdc-dialog__button:first-child,.mdc-dialog__button:first-child[dir=rtl]{margin-left:0;margin-right:0}[dir=rtl] .mdc-dialog__button,.mdc-dialog__button[dir=rtl]{text-align:left}.mdc-dialog--stacked .mdc-dialog__button:not(:first-child){margin-top:12px}.mdc-dialog--open,.mdc-dialog--opening,.mdc-dialog--closing{display:flex}.mdc-dialog--opening .mdc-dialog__scrim{transition:opacity 150ms linear}.mdc-dialog--opening .mdc-dialog__container{transition:opacity 75ms linear,transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-dialog--closing .mdc-dialog__scrim,.mdc-dialog--closing .mdc-dialog__container{transition:opacity 75ms linear}.mdc-dialog--closing .mdc-dialog__container{transform:none}.mdc-dialog--open .mdc-dialog__scrim{opacity:1}.mdc-dialog--open .mdc-dialog__container{transform:none;opacity:1}.mdc-dialog--open.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim{opacity:1}.mdc-dialog--open.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim{transition:opacity 75ms linear}.mdc-dialog--open.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim{transition:opacity 150ms linear}.mdc-dialog__surface-scrim{display:none;opacity:0;position:absolute;width:100%;height:100%;z-index:1}.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim,.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim,.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim{display:block}.mdc-dialog-scroll-lock{overflow:hidden}.mdc-dialog--no-content-padding .mdc-dialog__content{padding:0}.mdc-dialog--sheet .mdc-dialog__container .mdc-dialog__close{right:12px;top:9px;position:absolute;z-index:1}.mdc-dialog__scrim--removed{pointer-events:none}.mdc-dialog__scrim--removed .mdc-dialog__scrim,.mdc-dialog__scrim--removed .mdc-dialog__surface-scrim{display:none}.mat-mdc-dialog-content{max-height:65vh}.mat-mdc-dialog-container{position:static;display:block}.mat-mdc-dialog-container,.mat-mdc-dialog-container .mdc-dialog__container,.mat-mdc-dialog-container .mdc-dialog__surface{max-height:inherit;min-height:inherit;min-width:inherit;max-width:inherit}.mat-mdc-dialog-container .mdc-dialog__surface{display:block;width:100%;height:100%}.mat-mdc-dialog-container{--mdc-dialog-container-elevation-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);--mdc-dialog-container-shadow-color:#000;--mdc-dialog-container-shape:4px;--mdc-dialog-container-elevation: var(--mdc-dialog-container-elevation-shadow);outline:0}.mat-mdc-dialog-container .mdc-dialog__surface{background-color:var(--mdc-dialog-container-color, white)}.mat-mdc-dialog-container .mdc-dialog__surface{box-shadow:var(--mdc-dialog-container-elevation, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12))}.mat-mdc-dialog-container .mdc-dialog__surface{border-radius:var(--mdc-dialog-container-shape, 4px)}.mat-mdc-dialog-container .mdc-dialog__title{font-family:var(--mdc-dialog-subhead-font, Roboto, sans-serif);line-height:var(--mdc-dialog-subhead-line-height, 1.5rem);font-size:var(--mdc-dialog-subhead-size, 1rem);font-weight:var(--mdc-dialog-subhead-weight, 400);letter-spacing:var(--mdc-dialog-subhead-tracking, 0.03125em)}.mat-mdc-dialog-container .mdc-dialog__title{color:var(--mdc-dialog-subhead-color, rgba(0, 0, 0, 0.87))}.mat-mdc-dialog-container .mdc-dialog__content{font-family:var(--mdc-dialog-supporting-text-font, Roboto, sans-serif);line-height:var(--mdc-dialog-supporting-text-line-height, 1.5rem);font-size:var(--mdc-dialog-supporting-text-size, 1rem);font-weight:var(--mdc-dialog-supporting-text-weight, 400);letter-spacing:var(--mdc-dialog-supporting-text-tracking, 0.03125em)}.mat-mdc-dialog-container .mdc-dialog__content{color:var(--mdc-dialog-supporting-text-color, rgba(0, 0, 0, 0.6))}.mat-mdc-dialog-container .mdc-dialog__container{transition-duration:var(--mat-dialog-transition-duration, 0ms)}.mat-mdc-dialog-container._mat-animation-noopable .mdc-dialog__container{transition:none}.mat-mdc-dialog-content{display:block}.mat-mdc-dialog-actions{justify-content:start}.mat-mdc-dialog-actions.mat-mdc-dialog-actions-align-center,.mat-mdc-dialog-actions[align=center]{justify-content:center}.mat-mdc-dialog-actions.mat-mdc-dialog-actions-align-end,.mat-mdc-dialog-actions[align=end]{justify-content:flex-end}.mat-mdc-dialog-actions .mat-button-base+.mat-button-base,.mat-mdc-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mat-mdc-dialog-actions .mat-button-base+.mat-button-base,[dir=rtl] .mat-mdc-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\"],\n encapsulation: 2\n });\n }\n }\n return MatDialogContainer;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Reference to a dialog opened via the MatDialog service.\n */\nclass MatDialogRef {\n constructor(_ref, config, _containerInstance) {\n this._ref = _ref;\n this._containerInstance = _containerInstance;\n /** Subject for notifying the user that the dialog has finished opening. */\n this._afterOpened = new Subject();\n /** Subject for notifying the user that the dialog has started closing. */\n this._beforeClosed = new Subject();\n /** Current state of the dialog. */\n this._state = 0 /* MatDialogState.OPEN */;\n this.disableClose = config.disableClose;\n this.id = _ref.id;\n // Emit when opening animation completes\n _containerInstance._animationStateChanged.pipe(filter(event => event.state === 'opened'), take(1)).subscribe(() => {\n this._afterOpened.next();\n this._afterOpened.complete();\n });\n // Dispose overlay when closing animation is complete\n _containerInstance._animationStateChanged.pipe(filter(event => event.state === 'closed'), take(1)).subscribe(() => {\n clearTimeout(this._closeFallbackTimeout);\n this._finishDialogClose();\n });\n _ref.overlayRef.detachments().subscribe(() => {\n this._beforeClosed.next(this._result);\n this._beforeClosed.complete();\n this._finishDialogClose();\n });\n merge(this.backdropClick(), this.keydownEvents().pipe(filter(event => event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)))).subscribe(event => {\n if (!this.disableClose) {\n event.preventDefault();\n _closeDialogVia(this, event.type === 'keydown' ? 'keyboard' : 'mouse');\n }\n });\n }\n /**\n * Close the dialog.\n * @param dialogResult Optional result to return to the dialog opener.\n */\n close(dialogResult) {\n this._result = dialogResult;\n // Transition the backdrop in parallel to the dialog.\n this._containerInstance._animationStateChanged.pipe(filter(event => event.state === 'closing'), take(1)).subscribe(event => {\n this._beforeClosed.next(dialogResult);\n this._beforeClosed.complete();\n this._ref.overlayRef.detachBackdrop();\n // The logic that disposes of the overlay depends on the exit animation completing, however\n // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback\n // timeout which will clean everything up if the animation hasn't fired within the specified\n // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the\n // vast majority of cases the timeout will have been cleared before it has the chance to fire.\n this._closeFallbackTimeout = setTimeout(() => this._finishDialogClose(), event.totalTime + 100);\n });\n this._state = 1 /* MatDialogState.CLOSING */;\n this._containerInstance._startExitAnimation();\n }\n /**\n * Gets an observable that is notified when the dialog is finished opening.\n */\n afterOpened() {\n return this._afterOpened;\n }\n /**\n * Gets an observable that is notified when the dialog is finished closing.\n */\n afterClosed() {\n return this._ref.closed;\n }\n /**\n * Gets an observable that is notified when the dialog has started closing.\n */\n beforeClosed() {\n return this._beforeClosed;\n }\n /**\n * Gets an observable that emits when the overlay's backdrop has been clicked.\n */\n backdropClick() {\n return this._ref.backdropClick;\n }\n /**\n * Gets an observable that emits when keydown events are targeted on the overlay.\n */\n keydownEvents() {\n return this._ref.keydownEvents;\n }\n /**\n * Updates the dialog's position.\n * @param position New dialog position.\n */\n updatePosition(position) {\n let strategy = this._ref.config.positionStrategy;\n if (position && (position.left || position.right)) {\n position.left ? strategy.left(position.left) : strategy.right(position.right);\n } else {\n strategy.centerHorizontally();\n }\n if (position && (position.top || position.bottom)) {\n position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);\n } else {\n strategy.centerVertically();\n }\n this._ref.updatePosition();\n return this;\n }\n /**\n * Updates the dialog's width and height.\n * @param width New width of the dialog.\n * @param height New height of the dialog.\n */\n updateSize(width = '', height = '') {\n this._ref.updateSize(width, height);\n return this;\n }\n /** Add a CSS class or an array of classes to the overlay pane. */\n addPanelClass(classes) {\n this._ref.addPanelClass(classes);\n return this;\n }\n /** Remove a CSS class or an array of classes from the overlay pane. */\n removePanelClass(classes) {\n this._ref.removePanelClass(classes);\n return this;\n }\n /** Gets the current state of the dialog's lifecycle. */\n getState() {\n return this._state;\n }\n /**\n * Finishes the dialog close by updating the state of the dialog\n * and disposing the overlay.\n */\n _finishDialogClose() {\n this._state = 2 /* MatDialogState.CLOSED */;\n this._ref.close(this._result, {\n focusOrigin: this._closeInteractionType\n });\n this.componentInstance = null;\n }\n}\n/**\n * Closes the dialog with the specified interaction type. This is currently not part of\n * `MatDialogRef` as that would conflict with custom dialog ref mocks provided in tests.\n * More details. See: https://github.com/angular/components/pull/9257#issuecomment-651342226.\n */\n// TODO: Move this back into `MatDialogRef` when we provide an official mock dialog ref.\nfunction _closeDialogVia(ref, interactionType, result) {\n ref._closeInteractionType = interactionType;\n return ref.close(result);\n}\n\n/** Injection token that can be used to access the data that was passed in to a dialog. */\nconst MAT_DIALOG_DATA = /*#__PURE__*/new InjectionToken('MatMdcDialogData');\n/** Injection token that can be used to specify default dialog options. */\nconst MAT_DIALOG_DEFAULT_OPTIONS = /*#__PURE__*/new InjectionToken('mat-mdc-dialog-default-options');\n/** Injection token that determines the scroll handling while the dialog is open. */\nconst MAT_DIALOG_SCROLL_STRATEGY = /*#__PURE__*/new InjectionToken('mat-mdc-dialog-scroll-strategy');\n/** @docs-private */\nfunction MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {\n return () => overlay.scrollStrategies.block();\n}\n/** @docs-private */\nconst MAT_DIALOG_SCROLL_STRATEGY_PROVIDER = {\n provide: MAT_DIALOG_SCROLL_STRATEGY,\n deps: [Overlay],\n useFactory: MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY\n};\n/** @docs-private */\nfunction MAT_DIALOG_SCROLL_STRATEGY_FACTORY(overlay) {\n return () => overlay.scrollStrategies.block();\n}\n// Counter for unique dialog ids.\nlet uniqueId = 0;\n/**\n * Base class for dialog services. The base dialog service allows\n * for arbitrary dialog refs and dialog container components.\n */\nlet _MatDialogBase = /*#__PURE__*/(() => {\n class _MatDialogBase {\n /** Keeps track of the currently-open dialogs. */\n get openDialogs() {\n return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;\n }\n /** Stream that emits when a dialog has been opened. */\n get afterOpened() {\n return this._parentDialog ? this._parentDialog.afterOpened : this._afterOpenedAtThisLevel;\n }\n _getAfterAllClosed() {\n const parent = this._parentDialog;\n return parent ? parent._getAfterAllClosed() : this._afterAllClosedAtThisLevel;\n }\n constructor(_overlay, injector, _defaultOptions, _parentDialog,\n /**\n * @deprecated No longer used. To be removed.\n * @breaking-change 15.0.0\n */\n _overlayContainer, scrollStrategy, _dialogRefConstructor, _dialogContainerType, _dialogDataToken,\n /**\n * @deprecated No longer used. To be removed.\n * @breaking-change 14.0.0\n */\n _animationMode) {\n this._overlay = _overlay;\n this._defaultOptions = _defaultOptions;\n this._parentDialog = _parentDialog;\n this._dialogRefConstructor = _dialogRefConstructor;\n this._dialogContainerType = _dialogContainerType;\n this._dialogDataToken = _dialogDataToken;\n this._openDialogsAtThisLevel = [];\n this._afterAllClosedAtThisLevel = new Subject();\n this._afterOpenedAtThisLevel = new Subject();\n this._idPrefix = 'mat-dialog-';\n this.dialogConfigClass = MatDialogConfig;\n /**\n * Stream that emits when all open dialog have finished closing.\n * Will emit on subscribe if there are no open dialogs to begin with.\n */\n this.afterAllClosed = defer(() => this.openDialogs.length ? this._getAfterAllClosed() : this._getAfterAllClosed().pipe(startWith(undefined)));\n this._scrollStrategy = scrollStrategy;\n this._dialog = injector.get(Dialog);\n }\n open(componentOrTemplateRef, config) {\n let dialogRef;\n config = {\n ...(this._defaultOptions || new MatDialogConfig()),\n ...config\n };\n config.id = config.id || `${this._idPrefix}${uniqueId++}`;\n config.scrollStrategy = config.scrollStrategy || this._scrollStrategy();\n const cdkRef = this._dialog.open(componentOrTemplateRef, {\n ...config,\n positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),\n // Disable closing since we need to sync it up to the animation ourselves.\n disableClose: true,\n // Disable closing on destroy, because this service cleans up its open dialogs as well.\n // We want to do the cleanup here, rather than the CDK service, because the CDK destroys\n // the dialogs immediately whereas we want it to wait for the animations to finish.\n closeOnDestroy: false,\n // Disable closing on detachments so that we can sync up the animation.\n // The Material dialog ref handles this manually.\n closeOnOverlayDetachments: false,\n container: {\n type: this._dialogContainerType,\n providers: () => [\n // Provide our config as the CDK config as well since it has the same interface as the\n // CDK one, but it contains the actual values passed in by the user for things like\n // `disableClose` which we disable for the CDK dialog since we handle it ourselves.\n {\n provide: this.dialogConfigClass,\n useValue: config\n }, {\n provide: DialogConfig,\n useValue: config\n }]\n },\n templateContext: () => ({\n dialogRef\n }),\n providers: (ref, cdkConfig, dialogContainer) => {\n dialogRef = new this._dialogRefConstructor(ref, config, dialogContainer);\n dialogRef.updatePosition(config?.position);\n return [{\n provide: this._dialogContainerType,\n useValue: dialogContainer\n }, {\n provide: this._dialogDataToken,\n useValue: cdkConfig.data\n }, {\n provide: this._dialogRefConstructor,\n useValue: dialogRef\n }];\n }\n });\n // This can't be assigned in the `providers` callback, because\n // the instance hasn't been assigned to the CDK ref yet.\n dialogRef.componentInstance = cdkRef.componentInstance;\n this.openDialogs.push(dialogRef);\n this.afterOpened.next(dialogRef);\n dialogRef.afterClosed().subscribe(() => {\n const index = this.openDialogs.indexOf(dialogRef);\n if (index > -1) {\n this.openDialogs.splice(index, 1);\n if (!this.openDialogs.length) {\n this._getAfterAllClosed().next();\n }\n }\n });\n return dialogRef;\n }\n /**\n * Closes all of the currently-open dialogs.\n */\n closeAll() {\n this._closeDialogs(this.openDialogs);\n }\n /**\n * Finds an open dialog by its id.\n * @param id ID to use when looking up the dialog.\n */\n getDialogById(id) {\n return this.openDialogs.find(dialog => dialog.id === id);\n }\n ngOnDestroy() {\n // Only close the dialogs at this level on destroy\n // since the parent service may still be active.\n this._closeDialogs(this._openDialogsAtThisLevel);\n this._afterAllClosedAtThisLevel.complete();\n this._afterOpenedAtThisLevel.complete();\n }\n _closeDialogs(dialogs) {\n let i = dialogs.length;\n while (i--) {\n dialogs[i].close();\n }\n }\n static {\n this.ɵfac = function _MatDialogBase_Factory(t) {\n i0.ɵɵinvalidFactory();\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: _MatDialogBase,\n factory: _MatDialogBase.ɵfac\n });\n }\n }\n return _MatDialogBase;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Service to open Material Design modal dialogs.\n */\nlet MatDialog = /*#__PURE__*/(() => {\n class MatDialog extends _MatDialogBase {\n constructor(overlay, injector,\n /**\n * @deprecated `_location` parameter to be removed.\n * @breaking-change 10.0.0\n */\n location, defaultOptions, scrollStrategy, parentDialog,\n /**\n * @deprecated No longer used. To be removed.\n * @breaking-change 15.0.0\n */\n overlayContainer,\n /**\n * @deprecated No longer used. To be removed.\n * @breaking-change 14.0.0\n */\n animationMode) {\n super(overlay, injector, defaultOptions, parentDialog, overlayContainer, scrollStrategy, MatDialogRef, MatDialogContainer, MAT_DIALOG_DATA, animationMode);\n this._idPrefix = 'mat-mdc-dialog-';\n }\n static {\n this.ɵfac = function MatDialog_Factory(t) {\n return new (t || MatDialog)(i0.ɵɵinject(i1$1.Overlay), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(i2.Location, 8), i0.ɵɵinject(MAT_DIALOG_DEFAULT_OPTIONS, 8), i0.ɵɵinject(MAT_DIALOG_SCROLL_STRATEGY), i0.ɵɵinject(MatDialog, 12), i0.ɵɵinject(i1$1.OverlayContainer), i0.ɵɵinject(ANIMATION_MODULE_TYPE$1, 8));\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: MatDialog,\n factory: MatDialog.ɵfac\n });\n }\n }\n return MatDialog;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Counter used to generate unique IDs for dialog elements. */\nlet dialogElementUid = 0;\n/**\n * Button that will close the current dialog.\n */\nlet MatDialogClose = /*#__PURE__*/(() => {\n class MatDialogClose {\n constructor(\n // The dialog title directive is always used in combination with a `MatDialogRef`.\n // tslint:disable-next-line: lightweight-tokens\n dialogRef, _elementRef, _dialog) {\n this.dialogRef = dialogRef;\n this._elementRef = _elementRef;\n this._dialog = _dialog;\n /** Default to \"button\" to prevents accidental form submits. */\n this.type = 'button';\n }\n ngOnInit() {\n if (!this.dialogRef) {\n // When this directive is included in a dialog via TemplateRef (rather than being\n // in a Component), the DialogRef isn't available via injection because embedded\n // views cannot be given a custom injector. Instead, we look up the DialogRef by\n // ID. This must occur in `onInit`, as the ID binding for the dialog container won't\n // be resolved at constructor time.\n this.dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs);\n }\n }\n ngOnChanges(changes) {\n const proxiedChange = changes['_matDialogClose'] || changes['_matDialogCloseResult'];\n if (proxiedChange) {\n this.dialogResult = proxiedChange.currentValue;\n }\n }\n _onButtonClick(event) {\n // Determinate the focus origin using the click event, because using the FocusMonitor will\n // result in incorrect origins. Most of the time, close buttons will be auto focused in the\n // dialog, and therefore clicking the button won't result in a focus change. This means that\n // the FocusMonitor won't detect any origin change, and will always output `program`.\n _closeDialogVia(this.dialogRef, event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);\n }\n static {\n this.ɵfac = function MatDialogClose_Factory(t) {\n return new (t || MatDialogClose)(i0.ɵɵdirectiveInject(MatDialogRef, 8), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(MatDialog));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatDialogClose,\n selectors: [[\"\", \"mat-dialog-close\", \"\"], [\"\", \"matDialogClose\", \"\"]],\n hostVars: 2,\n hostBindings: function MatDialogClose_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵlistener(\"click\", function MatDialogClose_click_HostBindingHandler($event) {\n return ctx._onButtonClick($event);\n });\n }\n if (rf & 2) {\n i0.ɵɵattribute(\"aria-label\", ctx.ariaLabel || null)(\"type\", ctx.type);\n }\n },\n inputs: {\n ariaLabel: [\"aria-label\", \"ariaLabel\"],\n type: \"type\",\n dialogResult: [\"mat-dialog-close\", \"dialogResult\"],\n _matDialogClose: [\"matDialogClose\", \"_matDialogClose\"]\n },\n exportAs: [\"matDialogClose\"],\n features: [i0.ɵɵNgOnChangesFeature]\n });\n }\n }\n return MatDialogClose;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.\n */\nlet MatDialogTitle = /*#__PURE__*/(() => {\n class MatDialogTitle {\n constructor(\n // The dialog title directive is always used in combination with a `MatDialogRef`.\n // tslint:disable-next-line: lightweight-tokens\n _dialogRef, _elementRef, _dialog) {\n this._dialogRef = _dialogRef;\n this._elementRef = _elementRef;\n this._dialog = _dialog;\n this.id = `mat-mdc-dialog-title-${dialogElementUid++}`;\n }\n ngOnInit() {\n if (!this._dialogRef) {\n this._dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs);\n }\n if (this._dialogRef) {\n Promise.resolve().then(() => {\n const container = this._dialogRef._containerInstance;\n if (container && !container._ariaLabelledBy) {\n container._ariaLabelledBy = this.id;\n }\n });\n }\n }\n static {\n this.ɵfac = function MatDialogTitle_Factory(t) {\n return new (t || MatDialogTitle)(i0.ɵɵdirectiveInject(MatDialogRef, 8), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(MatDialog));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatDialogTitle,\n selectors: [[\"\", \"mat-dialog-title\", \"\"], [\"\", \"matDialogTitle\", \"\"]],\n hostAttrs: [1, \"mat-mdc-dialog-title\", \"mdc-dialog__title\"],\n hostVars: 1,\n hostBindings: function MatDialogTitle_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵhostProperty(\"id\", ctx.id);\n }\n },\n inputs: {\n id: \"id\"\n },\n exportAs: [\"matDialogTitle\"]\n });\n }\n }\n return MatDialogTitle;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Scrollable content container of a dialog.\n */\nlet MatDialogContent = /*#__PURE__*/(() => {\n class MatDialogContent {\n static {\n this.ɵfac = function MatDialogContent_Factory(t) {\n return new (t || MatDialogContent)();\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatDialogContent,\n selectors: [[\"\", \"mat-dialog-content\", \"\"], [\"mat-dialog-content\"], [\"\", \"matDialogContent\", \"\"]],\n hostAttrs: [1, \"mat-mdc-dialog-content\", \"mdc-dialog__content\"]\n });\n }\n }\n return MatDialogContent;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Container for the bottom action buttons in a dialog.\n * Stays fixed to the bottom when scrolling.\n */\nlet MatDialogActions = /*#__PURE__*/(() => {\n class MatDialogActions {\n constructor() {\n /**\n * Horizontal alignment of action buttons.\n */\n this.align = 'start';\n }\n static {\n this.ɵfac = function MatDialogActions_Factory(t) {\n return new (t || MatDialogActions)();\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatDialogActions,\n selectors: [[\"\", \"mat-dialog-actions\", \"\"], [\"mat-dialog-actions\"], [\"\", \"matDialogActions\", \"\"]],\n hostAttrs: [1, \"mat-mdc-dialog-actions\", \"mdc-dialog__actions\"],\n hostVars: 4,\n hostBindings: function MatDialogActions_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵclassProp(\"mat-mdc-dialog-actions-align-center\", ctx.align === \"center\")(\"mat-mdc-dialog-actions-align-end\", ctx.align === \"end\");\n }\n },\n inputs: {\n align: \"align\"\n }\n });\n }\n }\n return MatDialogActions;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Finds the closest MatDialogRef to an element by looking at the DOM.\n * @param element Element relative to which to look for a dialog.\n * @param openDialogs References to the currently-open dialogs.\n */\nfunction getClosestDialog(element, openDialogs) {\n let parent = element.nativeElement.parentElement;\n while (parent && !parent.classList.contains('mat-mdc-dialog-container')) {\n parent = parent.parentElement;\n }\n return parent ? openDialogs.find(dialog => dialog.id === parent.id) : null;\n}\nlet MatDialogModule = /*#__PURE__*/(() => {\n class MatDialogModule {\n static {\n this.ɵfac = function MatDialogModule_Factory(t) {\n return new (t || MatDialogModule)();\n };\n }\n static {\n this.ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: MatDialogModule\n });\n }\n static {\n this.ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n providers: [MatDialog, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER],\n imports: [DialogModule, OverlayModule, PortalModule, MatCommonModule, MatCommonModule]\n });\n }\n }\n return MatDialogModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Default parameters for the animation for backwards compatibility.\n * @docs-private\n */\nconst _defaultParams = {\n params: {\n enterAnimationDuration: '150ms',\n exitAnimationDuration: '75ms'\n }\n};\n/**\n * Animations used by MatDialog.\n * @docs-private\n */\nconst matDialogAnimations = {\n /** Animation that is applied on the dialog container by default. */\n dialogContainer: /*#__PURE__*/trigger('dialogContainer', [\n /*#__PURE__*/\n // Note: The `enter` animation transitions to `transform: none`, because for some reason\n // specifying the transform explicitly, causes IE both to blur the dialog content and\n // decimate the animation performance. Leaving it as `none` solves both issues.\n state('void, exit', /*#__PURE__*/style({\n opacity: 0,\n transform: 'scale(0.7)'\n })), /*#__PURE__*/state('enter', /*#__PURE__*/style({\n transform: 'none'\n })), /*#__PURE__*/transition('* => enter', /*#__PURE__*/group([/*#__PURE__*/animate('{{enterAnimationDuration}} cubic-bezier(0, 0, 0.2, 1)', /*#__PURE__*/style({\n transform: 'none',\n opacity: 1\n })), /*#__PURE__*/query('@*', /*#__PURE__*/animateChild(), {\n optional: true\n })]), _defaultParams), /*#__PURE__*/transition('* => void, * => exit', /*#__PURE__*/group([/*#__PURE__*/animate('{{exitAnimationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)', /*#__PURE__*/style({\n opacity: 0\n })), /*#__PURE__*/query('@*', /*#__PURE__*/animateChild(), {\n optional: true\n })]), _defaultParams)])\n};\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { MAT_DIALOG_DATA, MAT_DIALOG_DEFAULT_OPTIONS, MAT_DIALOG_SCROLL_STRATEGY, MAT_DIALOG_SCROLL_STRATEGY_FACTORY, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, MatDialog, MatDialogActions, MatDialogClose, MatDialogConfig, MatDialogContainer, MatDialogContent, MatDialogModule, MatDialogRef, MatDialogTitle, _MatDialogBase, _MatDialogContainerBase, _closeDialogVia, _defaultParams, matDialogAnimations };\n","import { DialogModule } from '@angular/cdk/dialog';\nimport * as i1$1 from '@angular/cdk/overlay';\nimport { Overlay, OverlayModule } from '@angular/cdk/overlay';\nimport * as i4 from '@angular/cdk/portal';\nimport { PortalModule } from '@angular/cdk/portal';\nimport * as i0 from '@angular/core';\nimport { Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, InjectionToken, Injectable, SkipSelf, Directive, Input, NgModule } from '@angular/core';\nimport { MatCommonModule } from '@angular/material/core';\nimport * as i2 from '@angular/common';\nimport { DOCUMENT } from '@angular/common';\nimport * as i1 from '@angular/cdk/a11y';\nimport { MatDialogConfig, _defaultParams, _MatDialogContainerBase, matDialogAnimations, MatDialogRef, _MatDialogBase, _closeDialogVia } from '@angular/material/dialog';\nexport { MAT_DIALOG_SCROLL_STRATEGY_FACTORY as MAT_LEGACY_DIALOG_SCROLL_STRATEGY_FACTORY, _MatDialogBase as _MatLegacyDialogBase, _MatDialogContainerBase as _MatLegacyDialogContainerBase, _closeDialogVia as _closeLegacyDialogVia, matDialogAnimations as matLegacyDialogAnimations } from '@angular/material/dialog';\nimport { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';\n\n/**\n * Default parameters for the animation for backwards compatibility.\n * @docs-private\n * @deprecated Use `defaultParams` from `@angular/material/dialog` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nfunction MatLegacyDialogContainer_ng_template_0_Template(rf, ctx) {}\nconst defaultParams = {\n params: {\n enterAnimationDuration: '150ms',\n exitAnimationDuration: '75ms'\n }\n};\n\n/**\n * @deprecated Use `MatDialogConfig` from `@angular/material/dialog` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nclass MatLegacyDialogConfig extends MatDialogConfig {\n constructor() {\n super(...arguments);\n /** Duration of the enter animation. Has to be a valid CSS value (e.g. 100ms). */\n this.enterAnimationDuration = _defaultParams.params.enterAnimationDuration;\n /** Duration of the exit animation. Has to be a valid CSS value (e.g. 50ms). */\n this.exitAnimationDuration = _defaultParams.params.exitAnimationDuration;\n }\n}\n\n/**\n * Internal component that wraps user-provided dialog content.\n * Animation is based on https://material.io/guidelines/motion/choreography.html.\n * @docs-private\n * @deprecated Use `MatDialogContainer` from `@angular/material/dialog` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nlet MatLegacyDialogContainer = /*#__PURE__*/(() => {\n class MatLegacyDialogContainer extends _MatDialogContainerBase {\n /** Callback, invoked whenever an animation on the host completes. */\n _onAnimationDone({\n toState,\n totalTime\n }) {\n if (toState === 'enter') {\n this._openAnimationDone(totalTime);\n } else if (toState === 'exit') {\n this._animationStateChanged.next({\n state: 'closed',\n totalTime\n });\n }\n }\n /** Callback, invoked when an animation on the host starts. */\n _onAnimationStart({\n toState,\n totalTime\n }) {\n if (toState === 'enter') {\n this._animationStateChanged.next({\n state: 'opening',\n totalTime\n });\n } else if (toState === 'exit' || toState === 'void') {\n this._animationStateChanged.next({\n state: 'closing',\n totalTime\n });\n }\n }\n /** Starts the dialog exit animation. */\n _startExitAnimation() {\n this._state = 'exit';\n // Mark the container for check so it can react if the\n // view container is using OnPush change detection.\n this._changeDetectorRef.markForCheck();\n }\n constructor(elementRef, focusTrapFactory, document, dialogConfig, checker, ngZone, overlayRef, _changeDetectorRef, focusMonitor) {\n super(elementRef, focusTrapFactory, document, dialogConfig, checker, ngZone, overlayRef, focusMonitor);\n this._changeDetectorRef = _changeDetectorRef;\n /** State of the dialog animation. */\n this._state = 'enter';\n }\n _getAnimationState() {\n return {\n value: this._state,\n params: {\n 'enterAnimationDuration': this._config.enterAnimationDuration || defaultParams.params.enterAnimationDuration,\n 'exitAnimationDuration': this._config.exitAnimationDuration || defaultParams.params.exitAnimationDuration\n }\n };\n }\n static {\n this.ɵfac = function MatLegacyDialogContainer_Factory(t) {\n return new (t || MatLegacyDialogContainer)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.FocusTrapFactory), i0.ɵɵdirectiveInject(DOCUMENT, 8), i0.ɵɵdirectiveInject(MatLegacyDialogConfig), i0.ɵɵdirectiveInject(i1.InteractivityChecker), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1$1.OverlayRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.FocusMonitor));\n };\n }\n static {\n this.ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatLegacyDialogContainer,\n selectors: [[\"mat-dialog-container\"]],\n hostAttrs: [\"tabindex\", \"-1\", 1, \"mat-dialog-container\"],\n hostVars: 7,\n hostBindings: function MatLegacyDialogContainer_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵsyntheticHostListener(\"@dialogContainer.start\", function MatLegacyDialogContainer_animation_dialogContainer_start_HostBindingHandler($event) {\n return ctx._onAnimationStart($event);\n })(\"@dialogContainer.done\", function MatLegacyDialogContainer_animation_dialogContainer_done_HostBindingHandler($event) {\n return ctx._onAnimationDone($event);\n });\n }\n if (rf & 2) {\n i0.ɵɵhostProperty(\"id\", ctx._config.id);\n i0.ɵɵattribute(\"aria-modal\", ctx._config.ariaModal)(\"role\", ctx._config.role)(\"aria-labelledby\", ctx._config.ariaLabel ? null : ctx._ariaLabelledBy)(\"aria-label\", ctx._config.ariaLabel)(\"aria-describedby\", ctx._config.ariaDescribedBy || null);\n i0.ɵɵsyntheticHostProperty(\"@dialogContainer\", ctx._getAnimationState());\n }\n },\n features: [i0.ɵɵInheritDefinitionFeature],\n decls: 1,\n vars: 0,\n consts: [[\"cdkPortalOutlet\", \"\"]],\n template: function MatLegacyDialogContainer_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵtemplate(0, MatLegacyDialogContainer_ng_template_0_Template, 0, 0, \"ng-template\", 0);\n }\n },\n dependencies: [i4.CdkPortalOutlet],\n styles: [\".mat-dialog-container{display:block;padding:24px;border-radius:4px;box-sizing:border-box;overflow:auto;outline:0;width:100%;height:100%;min-height:inherit;max-height:inherit}.cdk-high-contrast-active .mat-dialog-container{outline:solid 1px}.mat-dialog-content{display:block;margin:0 -24px;padding:0 24px;max-height:65vh;overflow:auto;-webkit-overflow-scrolling:touch}.mat-dialog-title{margin:0 0 20px;display:block}.mat-dialog-actions{padding:8px 0;display:flex;flex-wrap:wrap;min-height:52px;align-items:center;box-sizing:content-box;margin-bottom:-24px}.mat-dialog-actions.mat-dialog-actions-align-center,.mat-dialog-actions[align=center]{justify-content:center}.mat-dialog-actions.mat-dialog-actions-align-end,.mat-dialog-actions[align=end]{justify-content:flex-end}.mat-dialog-actions .mat-button-base+.mat-button-base,.mat-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mat-dialog-actions .mat-button-base+.mat-button-base,[dir=rtl] .mat-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\"],\n encapsulation: 2,\n data: {\n animation: [matDialogAnimations.dialogContainer]\n }\n });\n }\n }\n return MatLegacyDialogContainer;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Reference to a dialog opened via the MatDialog service.\n * @deprecated Use `MatDialogRef` from `@angular/material/dialog` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nclass MatLegacyDialogRef extends MatDialogRef {}\n\n/**\n * Injection token that can be used to access the data that was passed in to a dialog.\n * @deprecated Use `MAT_DIALOG_DATA` from `@angular/material/dialog` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nconst MAT_LEGACY_DIALOG_DATA = /*#__PURE__*/new InjectionToken('MatDialogData');\n/**\n * Injection token that can be used to specify default dialog options.\n * @deprecated Use `MAT_DIALOG_DEFAULT_OPTIONS` from `@angular/material/dialog` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nconst MAT_LEGACY_DIALOG_DEFAULT_OPTIONS = /*#__PURE__*/new InjectionToken('mat-dialog-default-options');\n/**\n * Injection token that determines the scroll handling while the dialog is open.\n * @deprecated Use `MAT_DIALOG_SCROLL_STRATEGY` from `@angular/material/dialog` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nconst MAT_LEGACY_DIALOG_SCROLL_STRATEGY = /*#__PURE__*/new InjectionToken('mat-dialog-scroll-strategy');\n/**\n * @docs-private\n * @deprecated Use `MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY` from `@angular/material/dialog` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nfunction MAT_LEGACY_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {\n return () => overlay.scrollStrategies.block();\n}\n/**\n * @docs-private\n * @deprecated Use `MAT_DIALOG_SCROLL_STRATEGY_PROVIDER` from `@angular/material/dialog` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nconst MAT_LEGACY_DIALOG_SCROLL_STRATEGY_PROVIDER = {\n provide: MAT_LEGACY_DIALOG_SCROLL_STRATEGY,\n deps: [Overlay],\n useFactory: MAT_LEGACY_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY\n};\n/**\n * Service to open Material Design modal dialogs.\n * @deprecated Use `MatDialog` from `@angular/material/dialog` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nlet MatLegacyDialog = /*#__PURE__*/(() => {\n class MatLegacyDialog extends _MatDialogBase {\n constructor(overlay, injector,\n /**\n * @deprecated `_location` parameter to be removed.\n * @breaking-change 10.0.0\n */\n _location, defaultOptions, scrollStrategy, parentDialog,\n /**\n * @deprecated No longer used. To be removed.\n * @breaking-change 15.0.0\n */\n overlayContainer,\n /**\n * @deprecated No longer used. To be removed.\n * @breaking-change 14.0.0\n */\n animationMode) {\n super(overlay, injector, defaultOptions, parentDialog, overlayContainer, scrollStrategy, MatLegacyDialogRef, MatLegacyDialogContainer, MAT_LEGACY_DIALOG_DATA, animationMode);\n this.dialogConfigClass = MatLegacyDialogConfig;\n }\n static {\n this.ɵfac = function MatLegacyDialog_Factory(t) {\n return new (t || MatLegacyDialog)(i0.ɵɵinject(i1$1.Overlay), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(i2.Location, 8), i0.ɵɵinject(MAT_LEGACY_DIALOG_DEFAULT_OPTIONS, 8), i0.ɵɵinject(MAT_LEGACY_DIALOG_SCROLL_STRATEGY), i0.ɵɵinject(MatLegacyDialog, 12), i0.ɵɵinject(i1$1.OverlayContainer), i0.ɵɵinject(ANIMATION_MODULE_TYPE, 8));\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: MatLegacyDialog,\n factory: MatLegacyDialog.ɵfac\n });\n }\n }\n return MatLegacyDialog;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Counter used to generate unique IDs for dialog elements. */\nlet dialogElementUid = 0;\n/**\n * Button that will close the current dialog.\n * @deprecated Use `MatDialogClose` from `@angular/material/dialog` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nlet MatLegacyDialogClose = /*#__PURE__*/(() => {\n class MatLegacyDialogClose {\n constructor(\n /**\n * Reference to the containing dialog.\n * @deprecated `dialogRef` property to become private.\n * @breaking-change 13.0.0\n */\n // The dialog title directive is always used in combination with a `MatDialogRef`.\n // tslint:disable-next-line: lightweight-tokens\n dialogRef, _elementRef, _dialog) {\n this.dialogRef = dialogRef;\n this._elementRef = _elementRef;\n this._dialog = _dialog;\n /** Default to \"button\" to prevents accidental form submits. */\n this.type = 'button';\n }\n ngOnInit() {\n if (!this.dialogRef) {\n // When this directive is included in a dialog via TemplateRef (rather than being\n // in a Component), the DialogRef isn't available via injection because embedded\n // views cannot be given a custom injector. Instead, we look up the DialogRef by\n // ID. This must occur in `onInit`, as the ID binding for the dialog container won't\n // be resolved at constructor time.\n this.dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs);\n }\n }\n ngOnChanges(changes) {\n const proxiedChange = changes['_matDialogClose'] || changes['_matDialogCloseResult'];\n if (proxiedChange) {\n this.dialogResult = proxiedChange.currentValue;\n }\n }\n _onButtonClick(event) {\n // Determinate the focus origin using the click event, because using the FocusMonitor will\n // result in incorrect origins. Most of the time, close buttons will be auto focused in the\n // dialog, and therefore clicking the button won't result in a focus change. This means that\n // the FocusMonitor won't detect any origin change, and will always output `program`.\n _closeDialogVia(this.dialogRef, event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse', this.dialogResult);\n }\n static {\n this.ɵfac = function MatLegacyDialogClose_Factory(t) {\n return new (t || MatLegacyDialogClose)(i0.ɵɵdirectiveInject(MatLegacyDialogRef, 8), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(MatLegacyDialog));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatLegacyDialogClose,\n selectors: [[\"\", \"mat-dialog-close\", \"\"], [\"\", \"matDialogClose\", \"\"]],\n hostVars: 2,\n hostBindings: function MatLegacyDialogClose_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵlistener(\"click\", function MatLegacyDialogClose_click_HostBindingHandler($event) {\n return ctx._onButtonClick($event);\n });\n }\n if (rf & 2) {\n i0.ɵɵattribute(\"aria-label\", ctx.ariaLabel || null)(\"type\", ctx.type);\n }\n },\n inputs: {\n ariaLabel: [\"aria-label\", \"ariaLabel\"],\n type: \"type\",\n dialogResult: [\"mat-dialog-close\", \"dialogResult\"],\n _matDialogClose: [\"matDialogClose\", \"_matDialogClose\"]\n },\n exportAs: [\"matDialogClose\"],\n features: [i0.ɵɵNgOnChangesFeature]\n });\n }\n }\n return MatLegacyDialogClose;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.\n * @deprecated Use `MatDialogTitle` from `@angular/material/dialog` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nlet MatLegacyDialogTitle = /*#__PURE__*/(() => {\n class MatLegacyDialogTitle {\n constructor(\n // The dialog title directive is always used in combination with a `MatDialogRef`.\n // tslint:disable-next-line: lightweight-tokens\n _dialogRef, _elementRef, _dialog) {\n this._dialogRef = _dialogRef;\n this._elementRef = _elementRef;\n this._dialog = _dialog;\n /** Unique id for the dialog title. If none is supplied, it will be auto-generated. */\n this.id = `mat-dialog-title-${dialogElementUid++}`;\n }\n ngOnInit() {\n if (!this._dialogRef) {\n this._dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs);\n }\n if (this._dialogRef) {\n Promise.resolve().then(() => {\n const container = this._dialogRef._containerInstance;\n if (container && !container._ariaLabelledBy) {\n container._ariaLabelledBy = this.id;\n }\n });\n }\n }\n static {\n this.ɵfac = function MatLegacyDialogTitle_Factory(t) {\n return new (t || MatLegacyDialogTitle)(i0.ɵɵdirectiveInject(MatLegacyDialogRef, 8), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(MatLegacyDialog));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatLegacyDialogTitle,\n selectors: [[\"\", \"mat-dialog-title\", \"\"], [\"\", \"matDialogTitle\", \"\"]],\n hostAttrs: [1, \"mat-dialog-title\"],\n hostVars: 1,\n hostBindings: function MatLegacyDialogTitle_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵhostProperty(\"id\", ctx.id);\n }\n },\n inputs: {\n id: \"id\"\n },\n exportAs: [\"matDialogTitle\"]\n });\n }\n }\n return MatLegacyDialogTitle;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Scrollable content container of a dialog.\n * @deprecated Use `MatDialogContent` from `@angular/material/dialog` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nlet MatLegacyDialogContent = /*#__PURE__*/(() => {\n class MatLegacyDialogContent {\n static {\n this.ɵfac = function MatLegacyDialogContent_Factory(t) {\n return new (t || MatLegacyDialogContent)();\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatLegacyDialogContent,\n selectors: [[\"\", \"mat-dialog-content\", \"\"], [\"mat-dialog-content\"], [\"\", \"matDialogContent\", \"\"]],\n hostAttrs: [1, \"mat-dialog-content\"]\n });\n }\n }\n return MatLegacyDialogContent;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Container for the bottom action buttons in a dialog.\n * Stays fixed to the bottom when scrolling.\n * @deprecated Use `MatDialogActions` from `@angular/material/dialog` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nlet MatLegacyDialogActions = /*#__PURE__*/(() => {\n class MatLegacyDialogActions {\n constructor() {\n /**\n * Horizontal alignment of action buttons.\n */\n this.align = 'start';\n }\n static {\n this.ɵfac = function MatLegacyDialogActions_Factory(t) {\n return new (t || MatLegacyDialogActions)();\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatLegacyDialogActions,\n selectors: [[\"\", \"mat-dialog-actions\", \"\"], [\"mat-dialog-actions\"], [\"\", \"matDialogActions\", \"\"]],\n hostAttrs: [1, \"mat-dialog-actions\"],\n hostVars: 4,\n hostBindings: function MatLegacyDialogActions_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵclassProp(\"mat-dialog-actions-align-center\", ctx.align === \"center\")(\"mat-dialog-actions-align-end\", ctx.align === \"end\");\n }\n },\n inputs: {\n align: \"align\"\n }\n });\n }\n }\n return MatLegacyDialogActions;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n// TODO(crisbeto): this utility shouldn't be necessary anymore, because the dialog ref is provided\n// both to component and template dialogs through DI. We need to keep it around, because there are\n// some internal wrappers around `MatDialog` that happened to work by accident, because we had this\n// fallback logic in place.\n/**\n * Finds the closest MatDialogRef to an element by looking at the DOM.\n * @param element Element relative to which to look for a dialog.\n * @param openDialogs References to the currently-open dialogs.\n */\nfunction getClosestDialog(element, openDialogs) {\n let parent = element.nativeElement.parentElement;\n while (parent && !parent.classList.contains('mat-dialog-container')) {\n parent = parent.parentElement;\n }\n return parent ? openDialogs.find(dialog => dialog.id === parent.id) : null;\n}\n\n/**\n * @deprecated Use `MatDialogModule` from `@angular/material/dialog` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.\n * @breaking-change 17.0.0\n */\nlet MatLegacyDialogModule = /*#__PURE__*/(() => {\n class MatLegacyDialogModule {\n static {\n this.ɵfac = function MatLegacyDialogModule_Factory(t) {\n return new (t || MatLegacyDialogModule)();\n };\n }\n static {\n this.ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: MatLegacyDialogModule\n });\n }\n static {\n this.ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n providers: [MatLegacyDialog, MAT_LEGACY_DIALOG_SCROLL_STRATEGY_PROVIDER],\n imports: [DialogModule, OverlayModule, PortalModule, MatCommonModule, MatCommonModule]\n });\n }\n }\n return MatLegacyDialogModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { MAT_LEGACY_DIALOG_DATA, MAT_LEGACY_DIALOG_DEFAULT_OPTIONS, MAT_LEGACY_DIALOG_SCROLL_STRATEGY, MAT_LEGACY_DIALOG_SCROLL_STRATEGY_PROVIDER, MAT_LEGACY_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, MatLegacyDialog, MatLegacyDialogActions, MatLegacyDialogClose, MatLegacyDialogConfig, MatLegacyDialogContainer, MatLegacyDialogContent, MatLegacyDialogModule, MatLegacyDialogRef, MatLegacyDialogTitle };\n","import { Directive, ElementRef, Input, OnInit } from '@angular/core';\n\n@Directive({\n selector: '[proImageError]',\n standalone: true,\n})\n\nexport class ImageErrorDirective implements OnInit {\n @Input('proImageError') placeholder: string = '';\n\n constructor(\n private el: ElementRef,\n ) {\n\n }\n\n ngOnInit() {\n const placeholder = this.placeholder || 'assets/images/placeholder.png';\n const image: HTMLImageElement = this.el.nativeElement;\n\n const setPlaceholderCallback = () => {\n image.removeEventListener('error', setPlaceholderCallback);\n image.src = placeholder;\n };\n\n image.addEventListener('error', setPlaceholderCallback);\n }\n\n}\n","import {\n Directive,\n Input,\n ViewContainerRef,\n TemplateRef,\n OnInit,\n ChangeDetectorRef,\n OnChanges,\n SimpleChanges,\n} from '@angular/core';\nimport { isArray, isDefinedNotNull, isEquivalent } from '../../utils';\n\n// example\n// *proFor=\"let item of items; offset: 5;renderInterval: 200; renderIterator: 5;\"\n\n@Directive(\n {\n selector: '[proFor][proForOf]',\n standalone: true,\n })\nexport class For2Directive implements OnInit, OnChanges {\n @Input() set proForOf(collection: unknown[]) {\n\n if (!isArray(collection)) {\n console.warn('proFor Error: value ', collection , ' should be of array!');\n this.collection = [];\n }\n\n const defautlSet = () => {\n this.collection = collection;\n this.incrementalRender = false;\n this.view.clear();\n this.viewClearIter = this.viewIter;\n this.renderMap = {};\n };\n\n if (this.collection?.length && collection?.length && this.collection.length <= collection.length) {\n if (\n this.collection.every((item, i) => {\n return isEquivalent(item, collection[i]);\n })\n ) {\n this.collection = this.collection.concat(collection.filter((c, i) => i >= this.collection.length));\n this.incrementalRender = true;\n this.incrementalRenderIndex = this.collection.length;\n } else {\n defautlSet();\n }\n } else {\n defautlSet();\n\n }\n\n this.viewIter++;\n\n\n this.getRenderTimeoutMap();\n }\n\n @Input('proForOffset') offset: number = 0;\n @Input('proForRenderInterval') interval: number = 0;\n @Input('proForRenderIterator') iterator: number = 1;\n\n collection: unknown[];\n inited: true;\n incrementalRender: boolean;\n incrementalRenderIndex: number = 0;\n\n viewIter: number = 0;\n viewClearIter: number = 0;\n\n renderTimeoutMap: { [key: number]: number } = {};\n renderMap: { [key: number]: boolean } = {};\n\n constructor(private view: ViewContainerRef, private template: TemplateRef, private cd: ChangeDetectorRef) { }\n\n ngOnInit() {\n }\n\n getRenderTimeout(index: number) {\n let result;\n if (index < this.offset) {\n result = 0\n } else {\n result = Math.ceil((index - this.offset) / this.iterator) * this.interval;\n }\n return result;\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (changes['proForOf']) {\n this.renderView();\n }\n }\n\n renderView() {\n const viewIter = this.viewIter;\n this.collection?.forEach((item, index) =>\n {\n const first = index === 0;\n const last = this.collection.length === index + 1;\n\n const renderCallback = () => {\n if (this.viewClearIter <= viewIter) {\n if (!this.renderMap[index]) {\n this.renderMap[index] = true;\n this.view.createEmbeddedView( this.template, { $implicit: item, index, first, last });\n const shouldMark = !last && this.renderTimeoutMap[index] !== this.renderTimeoutMap[index+1] || last;\n if (shouldMark) this.cd.markForCheck();\n }\n\n }\n\n };\n\n if (!this.incrementalRender || this.incrementalRenderIndex >= index) {\n if (!this.renderTimeoutMap[index]) {\n renderCallback();\n } else {\n setTimeout(renderCallback, this.renderTimeoutMap[index]);\n }\n }\n\n });\n }\n\n getRenderTimeoutMap() {\n this.renderTimeoutMap = isDefinedNotNull(this.collection) ? this.collection.reduce((a, b, i) => { a[i] = this.getRenderTimeout(i); return a; }, {}) as { [key: number]: number } : this.collection as any;\n }\n\n}\n","import { Directive, ElementRef, Input, OnChanges, OnInit } from '@angular/core';\nimport { FilterService } from '../../services/filter.service';\n\n@Directive({\n selector: '[proContrastingColor]',\n standalone: true,\n})\n\nexport class PromanContrastingColorDirective implements OnInit, OnChanges {\n @Input('proContrastingColor') color: string;\n\n constructor(\n private el: ElementRef,\n private Filter: FilterService,\n ) {\n\n }\n\n ngOnInit() {\n this.el.nativeElement.style.color = this.Filter.contrastingColor(this.getValue(this.color));\n }\n\n ngOnChanges() {\n this.el.nativeElement.style.color = this.Filter.contrastingColor(this.getValue(this.color));\n }\n\n getValue(value: string) {\n return value && value.startsWith('#') ? value.substr(1) : value;\n }\n\n}\n","import { Directive, HostListener } from '@angular/core';\n\n@Directive({\n selector: '[proClickStopPropagation]'\n})\nexport class ClickStopPropagationDirective {\n\n @HostListener('click', ['$event'])\n public onClick(event: any) {\n event.stopPropagation();\n }\n}\n","import { Directive, Input, Output, EventEmitter, OnInit, AfterViewInit } from '@angular/core';\n\n@Directive({\n selector: '[proOnInit]'\n})\nexport class InitDirective implements OnInit, AfterViewInit {\n\n @Input() isLast: boolean;\n\n @Output('proOnInit') initEvent: EventEmitter = new EventEmitter();\n @Output('proAfterViewInit') afterViewInit: EventEmitter = new EventEmitter();\n\n ngOnInit() {\n this.initEvent.emit();\n }\n\n ngAfterViewInit() {\n this.afterViewInit.emit();\n }\n\n}\n","import {\n AfterViewInit,\n ChangeDetectorRef,\n Directive,\n EventEmitter,\n Input, OnDestroy,\n Output,\n ViewContainerRef,\n} from '@angular/core';\nimport { findScrollElement } from '../../utils';\nimport { fromEvent, Subject, distinctUntilChanged, takeUntil, merge } from '@proman/rxjs-common';\n\n@Directive({\n selector: '[proScrollLimit]'\n})\n\nexport class ScrollLimitDirective implements AfterViewInit, OnDestroy {\n @Input() scrollLimit: number = 50;\n @Input() scrollLimitIncrement: number = 5;\n @Output() scrollLimitChange: EventEmitter = new EventEmitter();\n ignoreWheel: boolean;\n destroyed$: Subject = new Subject();\n lastHeight: number = 0;\n\n constructor(\n private cd: ChangeDetectorRef,\n private viewContainerRef: ViewContainerRef,\n ) {\n\n }\n\n ngAfterViewInit() {\n const el = this.viewContainerRef.element.nativeElement;\n\n merge(\n fromEvent(el, 'wheel'),\n fromEvent(el, 'touchmove')\n )\n .pipe(\n distinctUntilChanged(),\n takeUntil(this.destroyed$),\n )\n .subscribe(() => this.handleScroll());\n }\n\n handleScroll = () => {\n const foo: HTMLElement = this.viewContainerRef.element.nativeElement;\n if (!foo || this.ignoreWheel) {\n return;\n }\n\n const scrollElement = findScrollElement(foo);\n\n if (!scrollElement) {\n return;\n }\n\n this.ignoreWheel = true;\n\n setTimeout(() => this.ignoreWheel = false, 50);\n\n const rect = foo.getBoundingClientRect();\n\n if (rect.height != this.lastHeight && (rect.height + rect.top < scrollElement.clientHeight + 250)) {\n this.scrollLimit += this.scrollLimitIncrement;\n this.scrollLimitChange.emit(this.scrollLimit);\n this.lastHeight = rect.height;\n this.cd.markForCheck();\n\n setTimeout(this.handleScroll, 50);\n\n }\n\n };\n\n ngOnDestroy() {\n this.destroyed$.next();\n }\n\n}\n","import {\n AfterViewInit,\n Directive,\n ElementRef, Input,\n} from '@angular/core';\n\n@Directive({\n selector: '[proScrollInto]'\n})\nexport class ScrollIntoViewDirective implements AfterViewInit {\n @Input('proScrollInto') timeout: number = 50;\n constructor(private el: ElementRef) {\n\n }\n\n ngAfterViewInit() {\n setTimeout(() => this.el.nativeElement.scrollIntoView({ behavior: 'smooth' }), this.timeout); // timeout to allow render components\n }\n\n}\n","import { Directive, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';\n\n@Directive({\n selector: '[proShiftScroll]'\n})\n\nexport class ShiftScrollHorizontalDirective implements OnInit, OnDestroy {\n private element: Element;\n\n constructor(el: ElementRef) {\n this.element = el.nativeElement;\n }\n\n ngOnInit() {\n window.addEventListener('keydown', this.handleHorizontalMovement);\n }\n\n ngOnDestroy() {\n window.removeEventListener('keydown', this.handleHorizontalMovement);\n }\n\n scrollLeft() {\n if (this.element.scrollTo) this.element.scrollTo(this.element.scrollLeft - 50, this.element.scrollTop);\n }\n\n scrollRight() {\n if (this.element.scrollTo) this.element.scrollTo((this.element.scrollLeft + 50), this.element.scrollTop);\n }\n\n @HostListener('mousedown', ['$event'])\n handleHorizontalMovement = (event: KeyboardEvent) => {\n const keyCode = event.keyCode;\n\n if ([37, 39].indexOf(keyCode) > -1 && !document.querySelector('input:focus')) { // leftArrow, rightArrow && input not focused\n if (keyCode === 37) this.scrollLeft();\n if (keyCode === 39) this.scrollRight();\n\n }\n\n };\n\n @HostListener('wheel', ['$event'])\n handleScroll = (event: WheelEvent) => {\n\n if (event.shiftKey) {\n event.preventDefault();\n\n if (event.deltaY < 0) this.scrollLeft();\n if (event.deltaY > 0) this.scrollRight();\n\n }\n\n };\n\n}\n","import { Directive, EventEmitter, HostListener, Output } from '@angular/core';\n\n@Directive({\n selector: '[proOnResize]'\n})\nexport class OnResizeDirective {\n @Output('proOnResize') onResize: EventEmitter = new EventEmitter();\n\n constructor() {\n\n }\n\n @HostListener('window:resize')\n public onResizeEvent() {\n this.onResize.emit();\n }\n\n}\n","import { AfterViewInit, Directive, EventEmitter, Input, Output } from '@angular/core';\n\n@Directive({\n selector: '[proOnLoad]',\n})\n\nexport class ElementOnLoadDirective implements AfterViewInit {\n @Input() proOnLoadDisabled: boolean = false;\n @Output() proOnLoad: EventEmitter = new EventEmitter();\n\n ngAfterViewInit() {\n if (!this.proOnLoadDisabled) this.proOnLoad.emit();\n }\n\n}\n","import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';\n\n@Directive({\n selector: '[proDelayedIf]'\n})\nexport class DelayedIfDirective {\n @Input() set proDelayedIf(config: { render: boolean, in: number, out?: number, }) {\n if (config.render) {\n setTimeout(() => this.viewContainer.createEmbeddedView(this.templateRef), config.in);\n } else {\n setTimeout(() => this.viewContainer.clear(), config.out || 0);\n }\n }\n constructor (\n private templateRef: TemplateRef,\n private viewContainer: ViewContainerRef\n ) {}\n}\n","import { NgModule } from '@angular/core';\nimport { ImageErrorDirective } from './image-error.directive';\nimport { PromanContrastingColorDirective } from './proman-contrasting-color.directive';\nimport { ClickStopPropagationDirective } from './click-stop-propagation.directive';\nimport { InitDirective } from './init.directive';\nimport { ScrollLimitDirective } from './scroll-limit.directive';\nimport { ScrollIntoViewDirective } from './scroll-into-view.directive';\nimport { ShiftScrollHorizontalDirective } from './shift-scroll-horizontal.directive';\nimport { OnResizeDirective } from './on-resize.directive';\nimport { GlobalOverlayModule } from '../../overlay/global-overlay.module';\nimport { TooltipDirectiveModule } from '../../tooltip/tooltip-directive.module';\nimport { For2Directive } from './for-2.directive';\nimport { ElementOnLoadDirective } from './element-on-load.directive';\nimport { DelayedIfDirective } from '@proman/shared/directives/delay-render.directive';\n\nconst DIRECTIVES = [\n ClickStopPropagationDirective,\n InitDirective,\n ScrollLimitDirective,\n ScrollIntoViewDirective,\n ShiftScrollHorizontalDirective,\n OnResizeDirective,\n // ForTimeoutDirective,\n ElementOnLoadDirective,\n DelayedIfDirective,\n];\n\n@NgModule({\n imports: [\n GlobalOverlayModule,\n TooltipDirectiveModule,\n PromanContrastingColorDirective,\n ImageErrorDirective,\n For2Directive,\n\n ],\n declarations: DIRECTIVES,\n providers: DIRECTIVES,\n exports: [\n DIRECTIVES,\n TooltipDirectiveModule,\n ImageErrorDirective,\n For2Directive,\n\n ],\n})\n\nexport class SharedDirectivesModule {\n\n}\n","/**\n * @license Angular v17.0.2\n * (c) 2010-2022 Google LLC. https://angular.io/\n * License: MIT\n */\n\nimport * as i0 from '@angular/core';\nimport { Directive, InjectionToken, forwardRef, Optional, Inject, ɵisPromise, ɵisSubscribable, ɵRuntimeError, Self, EventEmitter, Input, Host, SkipSelf, booleanAttribute, ChangeDetectorRef, Output, NgModule, Injectable, inject, Version } from '@angular/core';\nimport { ɵgetDOM } from '@angular/common';\nimport { from, forkJoin } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\n/**\n * Base class for all ControlValueAccessor classes defined in Forms package.\n * Contains common logic and utility functions.\n *\n * Note: this is an *internal-only* class and should not be extended or used directly in\n * applications code.\n */\nlet BaseControlValueAccessor = /*#__PURE__*/(() => {\n class BaseControlValueAccessor {\n constructor(_renderer, _elementRef) {\n this._renderer = _renderer;\n this._elementRef = _elementRef;\n /**\n * The registered callback function called when a change or input event occurs on the input\n * element.\n * @nodoc\n */\n this.onChange = _ => {};\n /**\n * The registered callback function called when a blur event occurs on the input element.\n * @nodoc\n */\n this.onTouched = () => {};\n }\n /**\n * Helper method that sets a property on a target element using the current Renderer\n * implementation.\n * @nodoc\n */\n setProperty(key, value) {\n this._renderer.setProperty(this._elementRef.nativeElement, key, value);\n }\n /**\n * Registers a function called when the control is touched.\n * @nodoc\n */\n registerOnTouched(fn) {\n this.onTouched = fn;\n }\n /**\n * Registers a function called when the control value changes.\n * @nodoc\n */\n registerOnChange(fn) {\n this.onChange = fn;\n }\n /**\n * Sets the \"disabled\" property on the range input element.\n * @nodoc\n */\n setDisabledState(isDisabled) {\n this.setProperty('disabled', isDisabled);\n }\n static {\n this.ɵfac = function BaseControlValueAccessor_Factory(t) {\n return new (t || BaseControlValueAccessor)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: BaseControlValueAccessor\n });\n }\n }\n return BaseControlValueAccessor;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Base class for all built-in ControlValueAccessor classes (except DefaultValueAccessor, which is\n * used in case no other CVAs can be found). We use this class to distinguish between default CVA,\n * built-in CVAs and custom CVAs, so that Forms logic can recognize built-in CVAs and treat custom\n * ones with higher priority (when both built-in and custom CVAs are present).\n *\n * Note: this is an *internal-only* class and should not be extended or used directly in\n * applications code.\n */\nlet BuiltInControlValueAccessor = /*#__PURE__*/(() => {\n class BuiltInControlValueAccessor extends BaseControlValueAccessor {\n static {\n this.ɵfac = /* @__PURE__ */(() => {\n let ɵBuiltInControlValueAccessor_BaseFactory;\n return function BuiltInControlValueAccessor_Factory(t) {\n return (ɵBuiltInControlValueAccessor_BaseFactory || (ɵBuiltInControlValueAccessor_BaseFactory = i0.ɵɵgetInheritedFactory(BuiltInControlValueAccessor)))(t || BuiltInControlValueAccessor);\n };\n })();\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: BuiltInControlValueAccessor,\n features: [i0.ɵɵInheritDefinitionFeature]\n });\n }\n }\n return BuiltInControlValueAccessor;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Used to provide a `ControlValueAccessor` for form controls.\n *\n * See `DefaultValueAccessor` for how to implement one.\n *\n * @publicApi\n */\nconst NG_VALUE_ACCESSOR = /*#__PURE__*/new InjectionToken('NgValueAccessor');\nconst CHECKBOX_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: /*#__PURE__*/forwardRef(() => CheckboxControlValueAccessor),\n multi: true\n};\n/**\n * @description\n * A `ControlValueAccessor` for writing a value and listening to changes on a checkbox input\n * element.\n *\n * @usageNotes\n *\n * ### Using a checkbox with a reactive form.\n *\n * The following example shows how to use a checkbox with a reactive form.\n *\n * ```ts\n * const rememberLoginControl = new FormControl();\n * ```\n *\n * ```\n * \n * ```\n *\n * @ngModule ReactiveFormsModule\n * @ngModule FormsModule\n * @publicApi\n */\nlet CheckboxControlValueAccessor = /*#__PURE__*/(() => {\n class CheckboxControlValueAccessor extends BuiltInControlValueAccessor {\n /**\n * Sets the \"checked\" property on the input element.\n * @nodoc\n */\n writeValue(value) {\n this.setProperty('checked', value);\n }\n static {\n this.ɵfac = /* @__PURE__ */(() => {\n let ɵCheckboxControlValueAccessor_BaseFactory;\n return function CheckboxControlValueAccessor_Factory(t) {\n return (ɵCheckboxControlValueAccessor_BaseFactory || (ɵCheckboxControlValueAccessor_BaseFactory = i0.ɵɵgetInheritedFactory(CheckboxControlValueAccessor)))(t || CheckboxControlValueAccessor);\n };\n })();\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CheckboxControlValueAccessor,\n selectors: [[\"input\", \"type\", \"checkbox\", \"formControlName\", \"\"], [\"input\", \"type\", \"checkbox\", \"formControl\", \"\"], [\"input\", \"type\", \"checkbox\", \"ngModel\", \"\"]],\n hostBindings: function CheckboxControlValueAccessor_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵlistener(\"change\", function CheckboxControlValueAccessor_change_HostBindingHandler($event) {\n return ctx.onChange($event.target.checked);\n })(\"blur\", function CheckboxControlValueAccessor_blur_HostBindingHandler() {\n return ctx.onTouched();\n });\n }\n },\n features: [i0.ɵɵProvidersFeature([CHECKBOX_VALUE_ACCESSOR]), i0.ɵɵInheritDefinitionFeature]\n });\n }\n }\n return CheckboxControlValueAccessor;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nconst DEFAULT_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: /*#__PURE__*/forwardRef(() => DefaultValueAccessor),\n multi: true\n};\n/**\n * We must check whether the agent is Android because composition events\n * behave differently between iOS and Android.\n */\nfunction _isAndroid() {\n const userAgent = ɵgetDOM() ? ɵgetDOM().getUserAgent() : '';\n return /android (\\d+)/.test(userAgent.toLowerCase());\n}\n/**\n * @description\n * Provide this token to control if form directives buffer IME input until\n * the \"compositionend\" event occurs.\n * @publicApi\n */\nconst COMPOSITION_BUFFER_MODE = /*#__PURE__*/new InjectionToken('CompositionEventMode');\n/**\n * The default `ControlValueAccessor` for writing a value and listening to changes on input\n * elements. The accessor is used by the `FormControlDirective`, `FormControlName`, and\n * `NgModel` directives.\n *\n * {@searchKeywords ngDefaultControl}\n *\n * @usageNotes\n *\n * ### Using the default value accessor\n *\n * The following example shows how to use an input element that activates the default value accessor\n * (in this case, a text field).\n *\n * ```ts\n * const firstNameControl = new FormControl();\n * ```\n *\n * ```\n * \n * ```\n *\n * This value accessor is used by default for `` and `