`\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 /** Emits when a portal is attached to the outlet. */\n attached = new EventEmitter();\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.\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 ref = viewContainerRef.createComponent(portal.component, {\n index: viewContainerRef.length,\n injector: portal.injector || viewContainerRef.injector,\n projectableNodes: portal.projectableNodes || undefined,\n ngModuleRef: this._moduleRef || undefined\n });\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 /**\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 attachDomPortal = portal => {\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 /** 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 ɵfac = function CdkPortalOutlet_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkPortalOutlet)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkPortalOutlet,\n selectors: [[\"\", \"cdkPortalOutlet\", \"\"]],\n inputs: {\n portal: [0, \"cdkPortalOutlet\", \"portal\"]\n },\n outputs: {\n attached: \"attached\"\n },\n exportAs: [\"cdkPortalOutlet\"],\n features: [i0.ɵɵInheritDefinitionFeature]\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 ɵfac = /* @__PURE__ */(() => {\n let ɵPortalHostDirective_BaseFactory;\n return function PortalHostDirective_Factory(__ngFactoryType__) {\n return (ɵPortalHostDirective_BaseFactory || (ɵPortalHostDirective_BaseFactory = i0.ɵɵgetInheritedFactory(PortalHostDirective)))(__ngFactoryType__ || PortalHostDirective);\n };\n })();\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: PortalHostDirective,\n selectors: [[\"\", \"cdkPortalHost\", \"\"], [\"\", \"portalHost\", \"\"]],\n inputs: {\n portal: [0, \"cdkPortalHost\", \"portal\"]\n },\n exportAs: [\"cdkPortalHost\"],\n features: [i0.ɵɵProvidersFeature([{\n provide: CdkPortalOutlet,\n useExisting: PortalHostDirective\n }]), i0.ɵɵInheritDefinitionFeature]\n });\n }\n return PortalHostDirective;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet PortalModule = /*#__PURE__*/(() => {\n class PortalModule {\n static ɵfac = function PortalModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || PortalModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: PortalModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({});\n }\n return PortalModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nexport { BasePortalOutlet as B, CdkPortalOutlet as C, DomPortalOutlet as D, PortalModule as P, TemplatePortal as T, ComponentPortal as a, CdkPortal as b, TemplatePortalDirective as c, PortalHostDirective as d, Portal as e, DomPortal as f, BasePortalHost as g, DomPortalHost as h };\n","/** Gets whether an event could be a faked `mousedown` event dispatched by a screen reader. */\nfunction isFakeMousedownFromScreenReader(event) {\n // Some screen readers will dispatch a fake `mousedown` event when pressing enter or space on\n // a clickable element. We can distinguish these events when `event.buttons` is zero, or\n // `event.detail` is zero depending on the browser:\n // - `event.buttons` works on Firefox, but fails on Chrome.\n // - `detail` works on Chrome, but fails on Firefox.\n return event.buttons === 0 || event.detail === 0;\n}\n/** Gets whether an event could be a faked `touchstart` event dispatched by a screen reader. */\nfunction isFakeTouchstartFromScreenReader(event) {\n const touch = event.touches && event.touches[0] || event.changedTouches && event.changedTouches[0];\n // A fake `touchstart` can be distinguished from a real one by looking at the `identifier`\n // which is typically >= 0 on a real device versus -1 from a screen reader. Just to be safe,\n // we can also look at `radiusX` and `radiusY`. This behavior was observed against a Windows 10\n // device with a touch screen running NVDA v2020.4 and Firefox 85 or Chrome 88.\n return !!touch && touch.identifier === -1 && (touch.radiusX == null || touch.radiusX === 1) && (touch.radiusY == null || touch.radiusY === 1);\n}\nexport { isFakeTouchstartFromScreenReader as a, isFakeMousedownFromScreenReader as i };\n","let shadowDomIsSupported;\n/** Checks whether the user's browser support Shadow DOM. */\nfunction _supportsShadowDom() {\n if (shadowDomIsSupported == null) {\n const head = typeof document !== 'undefined' ? document.head : null;\n shadowDomIsSupported = !!(head && (head.createShadowRoot || head.attachShadow));\n }\n return shadowDomIsSupported;\n}\n/** Gets the shadow root of an element, if supported and the element is inside the Shadow DOM. */\nfunction _getShadowRoot(element) {\n if (_supportsShadowDom()) {\n const rootNode = element.getRootNode ? element.getRootNode() : null;\n // Note that this should be caught by `_supportsShadowDom`, but some\n // teams have been able to hit this code path on unsupported browsers.\n if (typeof ShadowRoot !== 'undefined' && ShadowRoot && rootNode instanceof ShadowRoot) {\n return rootNode;\n }\n }\n return null;\n}\n/**\n * Gets the currently-focused element on the page while\n * also piercing through Shadow DOM boundaries.\n */\nfunction _getFocusedElementPierceShadowDom() {\n let activeElement = typeof document !== 'undefined' && document ? document.activeElement : null;\n while (activeElement && activeElement.shadowRoot) {\n const newActiveElement = activeElement.shadowRoot.activeElement;\n if (newActiveElement === activeElement) {\n break;\n } else {\n activeElement = newActiveElement;\n }\n }\n return activeElement;\n}\n/** Gets the target of an event while accounting for Shadow DOM. */\nfunction _getEventTarget(event) {\n // If an event is bound outside the Shadow DOM, the `event.target` will\n // point to the shadow root so we have to use `composedPath` instead.\n return event.composedPath ? event.composedPath()[0] : event.target;\n}\nexport { _getEventTarget as _, _getShadowRoot as a, _getFocusedElementPierceShadowDom as b, _supportsShadowDom as c };\n","import { VERSION } from '@angular/core';\n\n// TODO(crisbeto): remove this function when making breaking changes for v20.\n/**\n * Binds an event listener with specific options in a backwards-compatible way.\n * This function is necessary, because `Renderer2.listen` only supports listener options\n * after 19.1 and during the v19 period we support any 19.x version.\n * @docs-private\n */\nfunction _bindEventWithOptions(renderer, target, eventName, callback, options) {\n const major = parseInt(VERSION.major);\n const minor = parseInt(VERSION.minor);\n // Event options in `listen` are only supported in 19.1 and beyond.\n // We also allow 0.0.x, because that indicates a build at HEAD.\n if (major > 19 || major === 19 && minor > 0 || major === 0 && minor === 0) {\n return renderer.listen(target, eventName, callback, options);\n }\n target.addEventListener(eventName, callback, options);\n return () => {\n target.removeEventListener(eventName, callback, options);\n };\n}\nexport { _bindEventWithOptions as _ };\n","import * as i0 from '@angular/core';\nimport { inject, PLATFORM_ID, Injectable } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\n\n// Whether the current platform supports the V8 Break Iterator. The V8 check\n// is necessary to detect all Blink based browsers.\nlet hasV8BreakIterator;\n// We need a try/catch around the reference to `Intl`, because accessing it in some cases can\n// cause IE to throw. These cases are tied to particular versions of Windows and can happen if\n// the consumer is providing a polyfilled `Map`. See:\n// https://github.com/Microsoft/ChakraCore/issues/3189\n// https://github.com/angular/components/issues/15687\ntry {\n hasV8BreakIterator = typeof Intl !== 'undefined' && Intl.v8BreakIterator;\n} catch {\n hasV8BreakIterator = false;\n}\n/**\n * Service to detect the current platform by comparing the userAgent strings and\n * checking browser-specific global properties.\n */\nlet Platform = /*#__PURE__*/(() => {\n class Platform {\n _platformId = inject(PLATFORM_ID);\n // We want to use the Angular platform check because if the Document is shimmed\n // without the navigator, the following checks will fail. This is preferred because\n // sometimes the Document may be shimmed without the user's knowledge or intention\n /** Whether the Angular application is being rendered in the browser. */\n isBrowser = this._platformId ? isPlatformBrowser(this._platformId) : typeof document === 'object' && !!document;\n /** Whether the current browser is Microsoft Edge. */\n EDGE = this.isBrowser && /(edge)/i.test(navigator.userAgent);\n /** Whether the current rendering engine is Microsoft Trident. */\n TRIDENT = this.isBrowser && /(msie|trident)/i.test(navigator.userAgent);\n // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.\n /** Whether the current rendering engine is Blink. */\n BLINK = this.isBrowser && !!(window.chrome || hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;\n // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to\n // ensure that Webkit runs standalone and is not used as another engine's base.\n /** Whether the current rendering engine is WebKit. */\n WEBKIT = this.isBrowser && /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;\n /** Whether the current platform is Apple iOS. */\n IOS = this.isBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);\n // It's difficult to detect the plain Gecko engine, because most of the browsers identify\n // them self as Gecko-like browsers and modify the userAgent's according to that.\n // Since we only cover one explicit Firefox case, we can simply check for Firefox\n // instead of having an unstable check for Gecko.\n /** Whether the current browser is Firefox. */\n FIREFOX = this.isBrowser && /(firefox|minefield)/i.test(navigator.userAgent);\n /** Whether the current platform is Android. */\n // Trident on mobile adds the android platform to the userAgent to trick detections.\n ANDROID = this.isBrowser && /android/i.test(navigator.userAgent) && !this.TRIDENT;\n // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake\n // this and just place the Safari keyword in the userAgent. To be more safe about Safari every\n // Safari browser should also use Webkit as its layout engine.\n /** Whether the current browser is Safari. */\n SAFARI = this.isBrowser && /safari/i.test(navigator.userAgent) && this.WEBKIT;\n constructor() {}\n static ɵfac = function Platform_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || Platform)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: Platform,\n factory: Platform.ɵfac,\n providedIn: 'root'\n });\n }\n return Platform;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nexport { Platform as P };\n","/** Cached result of whether the user's browser supports passive event listeners. */\nlet supportsPassiveEvents;\n/**\n * Checks whether the user's browser supports passive event listeners.\n * See: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md\n */\nfunction supportsPassiveEventListeners() {\n if (supportsPassiveEvents == null && typeof window !== 'undefined') {\n try {\n window.addEventListener('test', null, Object.defineProperty({}, 'passive', {\n get: () => supportsPassiveEvents = true\n }));\n } finally {\n supportsPassiveEvents = supportsPassiveEvents || false;\n }\n }\n return supportsPassiveEvents;\n}\n/**\n * Normalizes an `AddEventListener` object to something that can be passed\n * to `addEventListener` on any browser, no matter whether it supports the\n * `options` parameter.\n * @param options Object to be normalized.\n */\nfunction normalizePassiveListenerOptions(options) {\n return supportsPassiveEventListeners() ? options : !!options.capture;\n}\nexport { normalizePassiveListenerOptions as n, supportsPassiveEventListeners as s };\n","import { ElementRef } from '@angular/core';\nfunction coerceNumberProperty(value, fallbackValue = 0) {\n if (_isNumberValue(value)) {\n return Number(value);\n }\n return arguments.length === 2 ? fallbackValue : 0;\n}\n/**\n * Whether the provided value is considered a number.\n * @docs-private\n */\nfunction _isNumberValue(value) {\n // parseFloat(value) handles most of the cases we're interested in (it treats null, empty string,\n // and other non-number values as NaN, where Number just uses 0) but it considers the string\n // '123hello' to be a valid number. Therefore we also check if Number(value) is NaN.\n return !isNaN(parseFloat(value)) && !isNaN(Number(value));\n}\n\n/**\n * Coerces an ElementRef or an Element into an element.\n * Useful for APIs that can accept either a ref or the native element itself.\n */\nfunction coerceElement(elementOrRef) {\n return elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;\n}\nexport { _isNumberValue as _, coerceNumberProperty as a, coerceElement as c };\n","import * as i0 from '@angular/core';\nimport { InjectionToken, inject, NgZone, RendererFactory2, Injectable, ElementRef, EventEmitter, Directive, Output } from '@angular/core';\nimport { BehaviorSubject, Subject, of } from 'rxjs';\nimport { skip, distinctUntilChanged, takeUntil } from 'rxjs/operators';\nimport { DOCUMENT } from '@angular/common';\nimport { i as isFakeMousedownFromScreenReader, a as isFakeTouchstartFromScreenReader } from './fake-event-detection-7055b1bd.mjs';\nimport { A as ALT, C as CONTROL, M as MAC_META, a as META, S as SHIFT } from './keycodes-107cd3e4.mjs';\nimport { _ as _getEventTarget, a as _getShadowRoot } from './shadow-dom-9f403d00.mjs';\nimport { _ as _bindEventWithOptions } from './backwards-compatibility-bcbe473e.mjs';\nimport { P as Platform } from './platform-610a08ae.mjs';\nimport { n as normalizePassiveListenerOptions } from './passive-listeners-c0bdc49f.mjs';\nimport { c as coerceElement } from './element-08c51fcd.mjs';\n\n/**\n * Injectable options for the InputModalityDetector. These are shallowly merged with the default\n * options.\n */\nconst INPUT_MODALITY_DETECTOR_OPTIONS = /*#__PURE__*/new InjectionToken('cdk-input-modality-detector-options');\n/**\n * Default options for the InputModalityDetector.\n *\n * Modifier keys are ignored by default (i.e. when pressed won't cause the service to detect\n * keyboard input modality) for two reasons:\n *\n * 1. Modifier keys are commonly used with mouse to perform actions such as 'right click' or 'open\n * in new tab', and are thus less representative of actual keyboard interaction.\n * 2. VoiceOver triggers some keyboard events when linearly navigating with Control + Option (but\n * confusingly not with Caps Lock). Thus, to have parity with other screen readers, we ignore\n * these keys so as to not update the input modality.\n *\n * Note that we do not by default ignore the right Meta key on Safari because it has the same key\n * code as the ContextMenu key on other browsers. When we switch to using event.key, we can\n * distinguish between the two.\n */\nconst INPUT_MODALITY_DETECTOR_DEFAULT_OPTIONS = {\n ignoreKeys: [ALT, CONTROL, MAC_META, META, SHIFT]\n};\n/**\n * The amount of time needed to pass after a touchstart event in order for a subsequent mousedown\n * event to be attributed as mouse and not touch.\n *\n * This is the value used by AngularJS Material. Through trial and error (on iPhone 6S) they found\n * that a value of around 650ms seems appropriate.\n */\nconst TOUCH_BUFFER_MS = 650;\n/**\n * Event listener options that enable capturing and also mark the listener as passive if the browser\n * supports it.\n */\nconst modalityEventListenerOptions = {\n passive: true,\n capture: true\n};\n/**\n * Service that detects the user's input modality.\n *\n * This service does not update the input modality when a user navigates with a screen reader\n * (e.g. linear navigation with VoiceOver, object navigation / browse mode with NVDA, virtual PC\n * cursor mode with JAWS). This is in part due to technical limitations (i.e. keyboard events do not\n * fire as expected in these modes) but is also arguably the correct behavior. Navigating with a\n * screen reader is akin to visually scanning a page, and should not be interpreted as actual user\n * input interaction.\n *\n * When a user is not navigating but *interacting* with a screen reader, this service attempts to\n * update the input modality to keyboard, but in general this service's behavior is largely\n * undefined.\n */\nlet InputModalityDetector = /*#__PURE__*/(() => {\n class InputModalityDetector {\n _platform = inject(Platform);\n _listenerCleanups;\n /** Emits whenever an input modality is detected. */\n modalityDetected;\n /** Emits when the input modality changes. */\n modalityChanged;\n /** The most recently detected input modality. */\n get mostRecentModality() {\n return this._modality.value;\n }\n /**\n * The most recently detected input modality event target. Is null if no input modality has been\n * detected or if the associated event target is null for some unknown reason.\n */\n _mostRecentTarget = null;\n /** The underlying BehaviorSubject that emits whenever an input modality is detected. */\n _modality = new BehaviorSubject(null);\n /** Options for this InputModalityDetector. */\n _options;\n /**\n * The timestamp of the last touch input modality. Used to determine whether mousedown events\n * should be attributed to mouse or touch.\n */\n _lastTouchMs = 0;\n /**\n * Handles keydown events. Must be an arrow function in order to preserve the context when it gets\n * bound.\n */\n _onKeydown = event => {\n // If this is one of the keys we should ignore, then ignore it and don't update the input\n // modality to keyboard.\n if (this._options?.ignoreKeys?.some(keyCode => keyCode === event.keyCode)) {\n return;\n }\n this._modality.next('keyboard');\n this._mostRecentTarget = _getEventTarget(event);\n };\n /**\n * Handles mousedown events. Must be an arrow function in order to preserve the context when it\n * gets bound.\n */\n _onMousedown = event => {\n // Touches trigger both touch and mouse events, so we need to distinguish between mouse events\n // that were triggered via mouse vs touch. To do so, check if the mouse event occurs closely\n // after the previous touch event.\n if (Date.now() - this._lastTouchMs < TOUCH_BUFFER_MS) {\n return;\n }\n // Fake mousedown events are fired by some screen readers when controls are activated by the\n // screen reader. Attribute them to keyboard input modality.\n this._modality.next(isFakeMousedownFromScreenReader(event) ? 'keyboard' : 'mouse');\n this._mostRecentTarget = _getEventTarget(event);\n };\n /**\n * Handles touchstart events. Must be an arrow function in order to preserve the context when it\n * gets bound.\n */\n _onTouchstart = event => {\n // Same scenario as mentioned in _onMousedown, but on touch screen devices, fake touchstart\n // events are fired. Again, attribute to keyboard input modality.\n if (isFakeTouchstartFromScreenReader(event)) {\n this._modality.next('keyboard');\n return;\n }\n // Store the timestamp of this touch event, as it's used to distinguish between mouse events\n // triggered via mouse vs touch.\n this._lastTouchMs = Date.now();\n this._modality.next('touch');\n this._mostRecentTarget = _getEventTarget(event);\n };\n constructor() {\n const ngZone = inject(NgZone);\n const document = inject(DOCUMENT);\n const options = inject(INPUT_MODALITY_DETECTOR_OPTIONS, {\n optional: true\n });\n this._options = {\n ...INPUT_MODALITY_DETECTOR_DEFAULT_OPTIONS,\n ...options\n };\n // Skip the first emission as it's null.\n this.modalityDetected = this._modality.pipe(skip(1));\n this.modalityChanged = this.modalityDetected.pipe(distinctUntilChanged());\n // If we're not in a browser, this service should do nothing, as there's no relevant input\n // modality to detect.\n if (this._platform.isBrowser) {\n const renderer = inject(RendererFactory2).createRenderer(null, null);\n this._listenerCleanups = ngZone.runOutsideAngular(() => {\n return [_bindEventWithOptions(renderer, document, 'keydown', this._onKeydown, modalityEventListenerOptions), _bindEventWithOptions(renderer, document, 'mousedown', this._onMousedown, modalityEventListenerOptions), _bindEventWithOptions(renderer, document, 'touchstart', this._onTouchstart, modalityEventListenerOptions)];\n });\n }\n }\n ngOnDestroy() {\n this._modality.complete();\n this._listenerCleanups?.forEach(cleanup => cleanup());\n }\n static ɵfac = function InputModalityDetector_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || InputModalityDetector)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: InputModalityDetector,\n factory: InputModalityDetector.ɵfac,\n providedIn: 'root'\n });\n }\n return InputModalityDetector;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Detection mode used for attributing the origin of a focus event. */\nvar FocusMonitorDetectionMode = /*#__PURE__*/function (FocusMonitorDetectionMode) {\n /**\n * Any mousedown, keydown, or touchstart event that happened in the previous\n * tick or the current tick will be used to assign a focus event's origin (to\n * either mouse, keyboard, or touch). This is the default option.\n */\n FocusMonitorDetectionMode[FocusMonitorDetectionMode[\"IMMEDIATE\"] = 0] = \"IMMEDIATE\";\n /**\n * A focus event's origin is always attributed to the last corresponding\n * mousedown, keydown, or touchstart event, no matter how long ago it occurred.\n */\n FocusMonitorDetectionMode[FocusMonitorDetectionMode[\"EVENTUAL\"] = 1] = \"EVENTUAL\";\n return FocusMonitorDetectionMode;\n}(FocusMonitorDetectionMode || {});\n/** InjectionToken for FocusMonitorOptions. */\nconst FOCUS_MONITOR_DEFAULT_OPTIONS = /*#__PURE__*/new InjectionToken('cdk-focus-monitor-default-options');\n/**\n * Event listener options that enable capturing and also\n * mark the listener as passive if the browser supports it.\n */\nconst captureEventListenerOptions = /*#__PURE__*/normalizePassiveListenerOptions({\n passive: true,\n capture: true\n});\n/** Monitors mouse and keyboard events to determine the cause of focus events. */\nlet FocusMonitor = /*#__PURE__*/(() => {\n class FocusMonitor {\n _ngZone = inject(NgZone);\n _platform = inject(Platform);\n _inputModalityDetector = inject(InputModalityDetector);\n /** The focus origin that the next focus event is a result of. */\n _origin = null;\n /** The FocusOrigin of the last focus event tracked by the FocusMonitor. */\n _lastFocusOrigin;\n /** Whether the window has just been focused. */\n _windowFocused = false;\n /** The timeout id of the window focus timeout. */\n _windowFocusTimeoutId;\n /** The timeout id of the origin clearing timeout. */\n _originTimeoutId;\n /**\n * Whether the origin was determined via a touch interaction. Necessary as properly attributing\n * focus events to touch interactions requires special logic.\n */\n _originFromTouchInteraction = false;\n /** Map of elements being monitored to their info. */\n _elementInfo = new Map();\n /** The number of elements currently being monitored. */\n _monitoredElementCount = 0;\n /**\n * Keeps track of the root nodes to which we've currently bound a focus/blur handler,\n * as well as the number of monitored elements that they contain. We have to treat focus/blur\n * handlers differently from the rest of the events, because the browser won't emit events\n * to the document when focus moves inside of a shadow root.\n */\n _rootNodeFocusListenerCount = new Map();\n /**\n * The specified detection mode, used for attributing the origin of a focus\n * event.\n */\n _detectionMode;\n /**\n * Event listener for `focus` events on the window.\n * Needs to be an arrow function in order to preserve the context when it gets bound.\n */\n _windowFocusListener = () => {\n // Make a note of when the window regains focus, so we can\n // restore the origin info for the focused element.\n this._windowFocused = true;\n this._windowFocusTimeoutId = setTimeout(() => this._windowFocused = false);\n };\n /** Used to reference correct document/window */\n _document = inject(DOCUMENT, {\n optional: true\n });\n /** Subject for stopping our InputModalityDetector subscription. */\n _stopInputModalityDetector = new Subject();\n constructor() {\n const options = inject(FOCUS_MONITOR_DEFAULT_OPTIONS, {\n optional: true\n });\n this._detectionMode = options?.detectionMode || FocusMonitorDetectionMode.IMMEDIATE;\n }\n /**\n * Event listener for `focus` and 'blur' events on the document.\n * Needs to be an arrow function in order to preserve the context when it gets bound.\n */\n _rootNodeFocusAndBlurListener = event => {\n const target = _getEventTarget(event);\n // We need to walk up the ancestor chain in order to support `checkChildren`.\n for (let element = target; element; element = element.parentElement) {\n if (event.type === 'focus') {\n this._onFocus(event, element);\n } else {\n this._onBlur(event, element);\n }\n }\n };\n monitor(element, checkChildren = false) {\n const nativeElement = coerceElement(element);\n // Do nothing if we're not on the browser platform or the passed in node isn't an element.\n if (!this._platform.isBrowser || nativeElement.nodeType !== 1) {\n // Note: we don't want the observable to emit at all so we don't pass any parameters.\n return of();\n }\n // If the element is inside the shadow DOM, we need to bind our focus/blur listeners to\n // the shadow root, rather than the `document`, because the browser won't emit focus events\n // to the `document`, if focus is moving within the same shadow root.\n const rootNode = _getShadowRoot(nativeElement) || this._getDocument();\n const cachedInfo = this._elementInfo.get(nativeElement);\n // Check if we're already monitoring this element.\n if (cachedInfo) {\n if (checkChildren) {\n // TODO(COMP-318): this can be problematic, because it'll turn all non-checkChildren\n // observers into ones that behave as if `checkChildren` was turned on. We need a more\n // robust solution.\n cachedInfo.checkChildren = true;\n }\n return cachedInfo.subject;\n }\n // Create monitored element info.\n const info = {\n checkChildren: checkChildren,\n subject: new Subject(),\n rootNode\n };\n this._elementInfo.set(nativeElement, info);\n this._registerGlobalListeners(info);\n return info.subject;\n }\n stopMonitoring(element) {\n const nativeElement = coerceElement(element);\n const elementInfo = this._elementInfo.get(nativeElement);\n if (elementInfo) {\n elementInfo.subject.complete();\n this._setClasses(nativeElement);\n this._elementInfo.delete(nativeElement);\n this._removeGlobalListeners(elementInfo);\n }\n }\n focusVia(element, origin, options) {\n const nativeElement = coerceElement(element);\n const focusedElement = this._getDocument().activeElement;\n // If the element is focused already, calling `focus` again won't trigger the event listener\n // which means that the focus classes won't be updated. If that's the case, update the classes\n // directly without waiting for an event.\n if (nativeElement === focusedElement) {\n this._getClosestElementsInfo(nativeElement).forEach(([currentElement, info]) => this._originChanged(currentElement, origin, info));\n } else {\n this._setOrigin(origin);\n // `focus` isn't available on the server\n if (typeof nativeElement.focus === 'function') {\n nativeElement.focus(options);\n }\n }\n }\n ngOnDestroy() {\n this._elementInfo.forEach((_info, element) => this.stopMonitoring(element));\n }\n /** Access injected document if available or fallback to global document reference */\n _getDocument() {\n return this._document || document;\n }\n /** Use defaultView of injected document if available or fallback to global window reference */\n _getWindow() {\n const doc = this._getDocument();\n return doc.defaultView || window;\n }\n _getFocusOrigin(focusEventTarget) {\n if (this._origin) {\n // If the origin was realized via a touch interaction, we need to perform additional checks\n // to determine whether the focus origin should be attributed to touch or program.\n if (this._originFromTouchInteraction) {\n return this._shouldBeAttributedToTouch(focusEventTarget) ? 'touch' : 'program';\n } else {\n return this._origin;\n }\n }\n // If the window has just regained focus, we can restore the most recent origin from before the\n // window blurred. Otherwise, we've reached the point where we can't identify the source of the\n // focus. This typically means one of two things happened:\n //\n // 1) The element was programmatically focused, or\n // 2) The element was focused via screen reader navigation (which generally doesn't fire\n // events).\n //\n // Because we can't distinguish between these two cases, we default to setting `program`.\n if (this._windowFocused && this._lastFocusOrigin) {\n return this._lastFocusOrigin;\n }\n // If the interaction is coming from an input label, we consider it a mouse interactions.\n // This is a special case where focus moves on `click`, rather than `mousedown` which breaks\n // our detection, because all our assumptions are for `mousedown`. We need to handle this\n // special case, because it's very common for checkboxes and radio buttons.\n if (focusEventTarget && this._isLastInteractionFromInputLabel(focusEventTarget)) {\n return 'mouse';\n }\n return 'program';\n }\n /**\n * Returns whether the focus event should be attributed to touch. Recall that in IMMEDIATE mode, a\n * touch origin isn't immediately reset at the next tick (see _setOrigin). This means that when we\n * handle a focus event following a touch interaction, we need to determine whether (1) the focus\n * event was directly caused by the touch interaction or (2) the focus event was caused by a\n * subsequent programmatic focus call triggered by the touch interaction.\n * @param focusEventTarget The target of the focus event under examination.\n */\n _shouldBeAttributedToTouch(focusEventTarget) {\n // Please note that this check is not perfect. Consider the following edge case:\n //\n //
\n //\n // Suppose there is a FocusMonitor in IMMEDIATE mode attached to #parent. When the user touches\n // #child, #parent is programmatically focused. This code will attribute the focus to touch\n // instead of program. This is a relatively minor edge-case that can be worked around by using\n // focusVia(parent, 'program') to focus #parent.\n return this._detectionMode === FocusMonitorDetectionMode.EVENTUAL || !!focusEventTarget?.contains(this._inputModalityDetector._mostRecentTarget);\n }\n /**\n * Sets the focus classes on the element based on the given focus origin.\n * @param element The element to update the classes on.\n * @param origin The focus origin.\n */\n _setClasses(element, origin) {\n element.classList.toggle('cdk-focused', !!origin);\n element.classList.toggle('cdk-touch-focused', origin === 'touch');\n element.classList.toggle('cdk-keyboard-focused', origin === 'keyboard');\n element.classList.toggle('cdk-mouse-focused', origin === 'mouse');\n element.classList.toggle('cdk-program-focused', origin === 'program');\n }\n /**\n * Updates the focus origin. If we're using immediate detection mode, we schedule an async\n * function to clear the origin at the end of a timeout. The duration of the timeout depends on\n * the origin being set.\n * @param origin The origin to set.\n * @param isFromInteraction Whether we are setting the origin from an interaction event.\n */\n _setOrigin(origin, isFromInteraction = false) {\n this._ngZone.runOutsideAngular(() => {\n this._origin = origin;\n this._originFromTouchInteraction = origin === 'touch' && isFromInteraction;\n // If we're in IMMEDIATE mode, reset the origin at the next tick (or in `TOUCH_BUFFER_MS` ms\n // for a touch event). We reset the origin at the next tick because Firefox focuses one tick\n // after the interaction event. We wait `TOUCH_BUFFER_MS` ms before resetting the origin for\n // a touch event because when a touch event is fired, the associated focus event isn't yet in\n // the event queue. Before doing so, clear any pending timeouts.\n if (this._detectionMode === FocusMonitorDetectionMode.IMMEDIATE) {\n clearTimeout(this._originTimeoutId);\n const ms = this._originFromTouchInteraction ? TOUCH_BUFFER_MS : 1;\n this._originTimeoutId = setTimeout(() => this._origin = null, ms);\n }\n });\n }\n /**\n * Handles focus events on a registered element.\n * @param event The focus event.\n * @param element The monitored element.\n */\n _onFocus(event, element) {\n // NOTE(mmalerba): We currently set the classes based on the focus origin of the most recent\n // focus event affecting the monitored element. If we want to use the origin of the first event\n // instead we should check for the cdk-focused class here and return if the element already has\n // it. (This only matters for elements that have includesChildren = true).\n // If we are not counting child-element-focus as focused, make sure that the event target is the\n // monitored element itself.\n const elementInfo = this._elementInfo.get(element);\n const focusEventTarget = _getEventTarget(event);\n if (!elementInfo || !elementInfo.checkChildren && element !== focusEventTarget) {\n return;\n }\n this._originChanged(element, this._getFocusOrigin(focusEventTarget), elementInfo);\n }\n /**\n * Handles blur events on a registered element.\n * @param event The blur event.\n * @param element The monitored element.\n */\n _onBlur(event, element) {\n // If we are counting child-element-focus as focused, make sure that we aren't just blurring in\n // order to focus another child of the monitored element.\n const elementInfo = this._elementInfo.get(element);\n if (!elementInfo || elementInfo.checkChildren && event.relatedTarget instanceof Node && element.contains(event.relatedTarget)) {\n return;\n }\n this._setClasses(element);\n this._emitOrigin(elementInfo, null);\n }\n _emitOrigin(info, origin) {\n if (info.subject.observers.length) {\n this._ngZone.run(() => info.subject.next(origin));\n }\n }\n _registerGlobalListeners(elementInfo) {\n if (!this._platform.isBrowser) {\n return;\n }\n const rootNode = elementInfo.rootNode;\n const rootNodeFocusListeners = this._rootNodeFocusListenerCount.get(rootNode) || 0;\n if (!rootNodeFocusListeners) {\n this._ngZone.runOutsideAngular(() => {\n rootNode.addEventListener('focus', this._rootNodeFocusAndBlurListener, captureEventListenerOptions);\n rootNode.addEventListener('blur', this._rootNodeFocusAndBlurListener, captureEventListenerOptions);\n });\n }\n this._rootNodeFocusListenerCount.set(rootNode, rootNodeFocusListeners + 1);\n // Register global listeners when first element is monitored.\n if (++this._monitoredElementCount === 1) {\n // Note: we listen to events in the capture phase so we\n // can detect them even if the user stops propagation.\n this._ngZone.runOutsideAngular(() => {\n const window = this._getWindow();\n window.addEventListener('focus', this._windowFocusListener);\n });\n // The InputModalityDetector is also just a collection of global listeners.\n this._inputModalityDetector.modalityDetected.pipe(takeUntil(this._stopInputModalityDetector)).subscribe(modality => {\n this._setOrigin(modality, true /* isFromInteraction */);\n });\n }\n }\n _removeGlobalListeners(elementInfo) {\n const rootNode = elementInfo.rootNode;\n if (this._rootNodeFocusListenerCount.has(rootNode)) {\n const rootNodeFocusListeners = this._rootNodeFocusListenerCount.get(rootNode);\n if (rootNodeFocusListeners > 1) {\n this._rootNodeFocusListenerCount.set(rootNode, rootNodeFocusListeners - 1);\n } else {\n rootNode.removeEventListener('focus', this._rootNodeFocusAndBlurListener, captureEventListenerOptions);\n rootNode.removeEventListener('blur', this._rootNodeFocusAndBlurListener, captureEventListenerOptions);\n this._rootNodeFocusListenerCount.delete(rootNode);\n }\n }\n // Unregister global listeners when last element is unmonitored.\n if (! --this._monitoredElementCount) {\n const window = this._getWindow();\n window.removeEventListener('focus', this._windowFocusListener);\n // Equivalently, stop our InputModalityDetector subscription.\n this._stopInputModalityDetector.next();\n // Clear timeouts for all potentially pending timeouts to prevent the leaks.\n clearTimeout(this._windowFocusTimeoutId);\n clearTimeout(this._originTimeoutId);\n }\n }\n /** Updates all the state on an element once its focus origin has changed. */\n _originChanged(element, origin, elementInfo) {\n this._setClasses(element, origin);\n this._emitOrigin(elementInfo, origin);\n this._lastFocusOrigin = origin;\n }\n /**\n * Collects the `MonitoredElementInfo` of a particular element and\n * all of its ancestors that have enabled `checkChildren`.\n * @param element Element from which to start the search.\n */\n _getClosestElementsInfo(element) {\n const results = [];\n this._elementInfo.forEach((info, currentElement) => {\n if (currentElement === element || info.checkChildren && currentElement.contains(element)) {\n results.push([currentElement, info]);\n }\n });\n return results;\n }\n /**\n * Returns whether an interaction is likely to have come from the user clicking the `label` of\n * an `input` or `textarea` in order to focus it.\n * @param focusEventTarget Target currently receiving focus.\n */\n _isLastInteractionFromInputLabel(focusEventTarget) {\n const {\n _mostRecentTarget: mostRecentTarget,\n mostRecentModality\n } = this._inputModalityDetector;\n // If the last interaction used the mouse on an element contained by one of the labels\n // of an `input`/`textarea` that is currently focused, it is very likely that the\n // user redirected focus using the label.\n if (mostRecentModality !== 'mouse' || !mostRecentTarget || mostRecentTarget === focusEventTarget || focusEventTarget.nodeName !== 'INPUT' && focusEventTarget.nodeName !== 'TEXTAREA' || focusEventTarget.disabled) {\n return false;\n }\n const labels = focusEventTarget.labels;\n if (labels) {\n for (let i = 0; i < labels.length; i++) {\n if (labels[i].contains(mostRecentTarget)) {\n return true;\n }\n }\n }\n return false;\n }\n static ɵfac = function FocusMonitor_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || FocusMonitor)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: FocusMonitor,\n factory: FocusMonitor.ɵfac,\n providedIn: 'root'\n });\n }\n return FocusMonitor;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Directive that determines how a particular element was focused (via keyboard, mouse, touch, or\n * programmatically) and adds corresponding classes to the element.\n *\n * There are two variants of this directive:\n * 1) cdkMonitorElementFocus: does not consider an element to be focused if one of its children is\n * focused.\n * 2) cdkMonitorSubtreeFocus: considers an element focused if it or any of its children are focused.\n */\nlet CdkMonitorFocus = /*#__PURE__*/(() => {\n class CdkMonitorFocus {\n _elementRef = inject(ElementRef);\n _focusMonitor = inject(FocusMonitor);\n _monitorSubscription;\n _focusOrigin = null;\n cdkFocusChange = new EventEmitter();\n constructor() {}\n get focusOrigin() {\n return this._focusOrigin;\n }\n ngAfterViewInit() {\n const element = this._elementRef.nativeElement;\n this._monitorSubscription = this._focusMonitor.monitor(element, element.nodeType === 1 && element.hasAttribute('cdkMonitorSubtreeFocus')).subscribe(origin => {\n this._focusOrigin = origin;\n this.cdkFocusChange.emit(origin);\n });\n }\n ngOnDestroy() {\n this._focusMonitor.stopMonitoring(this._elementRef);\n if (this._monitorSubscription) {\n this._monitorSubscription.unsubscribe();\n }\n }\n static ɵfac = function CdkMonitorFocus_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkMonitorFocus)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkMonitorFocus,\n selectors: [[\"\", \"cdkMonitorElementFocus\", \"\"], [\"\", \"cdkMonitorSubtreeFocus\", \"\"]],\n outputs: {\n cdkFocusChange: \"cdkFocusChange\"\n },\n exportAs: [\"cdkMonitorFocus\"]\n });\n }\n return CdkMonitorFocus;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nexport { CdkMonitorFocus as C, FocusMonitorDetectionMode as F, InputModalityDetector as I, INPUT_MODALITY_DETECTOR_DEFAULT_OPTIONS as a, INPUT_MODALITY_DETECTOR_OPTIONS as b, FOCUS_MONITOR_DEFAULT_OPTIONS as c, FocusMonitor as d };\n","import * as i0 from '@angular/core';\nimport { inject, Injector, EnvironmentInjector, ApplicationRef, createComponent, Injectable } from '@angular/core';\n\n/** Apps in which we've loaded styles. */\nconst appsWithLoaders = /*#__PURE__*/new WeakMap();\n/**\n * Service that loads structural styles dynamically\n * and ensures that they're only loaded once per app.\n */\nlet _CdkPrivateStyleLoader = /*#__PURE__*/(() => {\n class _CdkPrivateStyleLoader {\n _appRef;\n _injector = inject(Injector);\n _environmentInjector = inject(EnvironmentInjector);\n /**\n * Loads a set of styles.\n * @param loader Component which will be instantiated to load the styles.\n */\n load(loader) {\n // Resolve the app ref lazily to avoid circular dependency errors if this is called too early.\n const appRef = this._appRef = this._appRef || this._injector.get(ApplicationRef);\n let data = appsWithLoaders.get(appRef);\n // If we haven't loaded for this app before, we have to initialize it.\n if (!data) {\n data = {\n loaders: new Set(),\n refs: []\n };\n appsWithLoaders.set(appRef, data);\n // When the app is destroyed, we need to clean up all the related loaders.\n appRef.onDestroy(() => {\n appsWithLoaders.get(appRef)?.refs.forEach(ref => ref.destroy());\n appsWithLoaders.delete(appRef);\n });\n }\n // If the loader hasn't been loaded before, we need to instatiate it.\n if (!data.loaders.has(loader)) {\n data.loaders.add(loader);\n data.refs.push(createComponent(loader, {\n environmentInjector: this._environmentInjector\n }));\n }\n }\n static ɵfac = function _CdkPrivateStyleLoader_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || _CdkPrivateStyleLoader)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: _CdkPrivateStyleLoader,\n factory: _CdkPrivateStyleLoader.ɵfac,\n providedIn: 'root'\n });\n }\n return _CdkPrivateStyleLoader;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nexport { _CdkPrivateStyleLoader as _ };\n","import * as i0 from '@angular/core';\nimport { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';\n\n/**\n * Component used to load the .cdk-visually-hidden styles.\n * @docs-private\n */\nlet _VisuallyHiddenLoader = /*#__PURE__*/(() => {\n class _VisuallyHiddenLoader {\n static ɵfac = function _VisuallyHiddenLoader_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || _VisuallyHiddenLoader)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: _VisuallyHiddenLoader,\n selectors: [[\"ng-component\"]],\n exportAs: [\"cdkVisuallyHidden\"],\n decls: 0,\n vars: 0,\n template: function _VisuallyHiddenLoader_Template(rf, ctx) {},\n styles: [\".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}\"],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return _VisuallyHiddenLoader;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nexport { _VisuallyHiddenLoader as _ };\n","function coerceArray(value) {\n return Array.isArray(value) ? value : [value];\n}\nexport { coerceArray as c };\n","import * as i0 from '@angular/core';\nimport { inject, CSP_NONCE, Injectable, NgZone } from '@angular/core';\nimport { Subject, combineLatest, concat, Observable } from 'rxjs';\nimport { take, skip, debounceTime, map, startWith, takeUntil } from 'rxjs/operators';\nimport { P as Platform } from './platform-610a08ae.mjs';\nimport { c as coerceArray } from './array-88e1bec3.mjs';\n\n/** Global registry for all dynamically-created, injected media queries. */\nconst mediaQueriesForWebkitCompatibility = /*#__PURE__*/new Set();\n/** Style tag that holds all of the dynamically-created media queries. */\nlet mediaQueryStyleNode;\n/** A utility for calling matchMedia queries. */\nlet MediaMatcher = /*#__PURE__*/(() => {\n class MediaMatcher {\n _platform = inject(Platform);\n _nonce = inject(CSP_NONCE, {\n optional: true\n });\n /** The internal matchMedia method to return back a MediaQueryList like object. */\n _matchMedia;\n constructor() {\n this._matchMedia = this._platform.isBrowser && window.matchMedia ?\n // matchMedia is bound to the window scope intentionally as it is an illegal invocation to\n // call it from a different scope.\n window.matchMedia.bind(window) : noopMatchMedia;\n }\n /**\n * Evaluates the given media query and returns the native MediaQueryList from which results\n * can be retrieved.\n * Confirms the layout engine will trigger for the selector query provided and returns the\n * MediaQueryList for the query provided.\n */\n matchMedia(query) {\n if (this._platform.WEBKIT || this._platform.BLINK) {\n createEmptyStyleRule(query, this._nonce);\n }\n return this._matchMedia(query);\n }\n static ɵfac = function MediaMatcher_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MediaMatcher)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: MediaMatcher,\n factory: MediaMatcher.ɵfac,\n providedIn: 'root'\n });\n }\n return MediaMatcher;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Creates an empty stylesheet that is used to work around browser inconsistencies related to\n * `matchMedia`. At the time of writing, it handles the following cases:\n * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`\n * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.\n * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules\n * inside the `@media` match existing elements on the page. We work around it by having one rule\n * targeting the `body`. See https://github.com/angular/components/issues/23546.\n */\nfunction createEmptyStyleRule(query, nonce) {\n if (mediaQueriesForWebkitCompatibility.has(query)) {\n return;\n }\n try {\n if (!mediaQueryStyleNode) {\n mediaQueryStyleNode = document.createElement('style');\n if (nonce) {\n mediaQueryStyleNode.setAttribute('nonce', nonce);\n }\n mediaQueryStyleNode.setAttribute('type', 'text/css');\n document.head.appendChild(mediaQueryStyleNode);\n }\n if (mediaQueryStyleNode.sheet) {\n mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);\n mediaQueriesForWebkitCompatibility.add(query);\n }\n } catch (e) {\n console.error(e);\n }\n}\n/** No-op matchMedia replacement for non-browser platforms. */\nfunction noopMatchMedia(query) {\n // Use `as any` here to avoid adding additional necessary properties for\n // the noop matcher.\n return {\n matches: query === 'all' || query === '',\n media: query,\n addListener: () => {},\n removeListener: () => {}\n };\n}\n\n/** Utility for checking the matching state of `@media` queries. */\nlet BreakpointObserver = /*#__PURE__*/(() => {\n class BreakpointObserver {\n _mediaMatcher = inject(MediaMatcher);\n _zone = inject(NgZone);\n /** A map of all media queries currently being listened for. */\n _queries = new Map();\n /** A subject for all other observables to takeUntil based on. */\n _destroySubject = new Subject();\n constructor() {}\n /** Completes the active subject, signalling to all other observables to complete. */\n ngOnDestroy() {\n this._destroySubject.next();\n this._destroySubject.complete();\n }\n /**\n * Whether one or more media queries match the current viewport size.\n * @param value One or more media queries to check.\n * @returns Whether any of the media queries match.\n */\n isMatched(value) {\n const queries = splitQueries(coerceArray(value));\n return queries.some(mediaQuery => this._registerQuery(mediaQuery).mql.matches);\n }\n /**\n * Gets an observable of results for the given queries that will emit new results for any changes\n * in matching of the given queries.\n * @param value One or more media queries to check.\n * @returns A stream of matches for the given queries.\n */\n observe(value) {\n const queries = splitQueries(coerceArray(value));\n const observables = queries.map(query => this._registerQuery(query).observable);\n let stateObservable = combineLatest(observables);\n // Emit the first state immediately, and then debounce the subsequent emissions.\n stateObservable = concat(stateObservable.pipe(take(1)), stateObservable.pipe(skip(1), debounceTime(0)));\n return stateObservable.pipe(map(breakpointStates => {\n const response = {\n matches: false,\n breakpoints: {}\n };\n breakpointStates.forEach(({\n matches,\n query\n }) => {\n response.matches = response.matches || matches;\n response.breakpoints[query] = matches;\n });\n return response;\n }));\n }\n /** Registers a specific query to be listened for. */\n _registerQuery(query) {\n // Only set up a new MediaQueryList if it is not already being listened for.\n if (this._queries.has(query)) {\n return this._queries.get(query);\n }\n const mql = this._mediaMatcher.matchMedia(query);\n // Create callback for match changes and add it is as a listener.\n const queryObservable = new Observable(observer => {\n // Listener callback methods are wrapped to be placed back in ngZone. Callbacks must be placed\n // back into the zone because matchMedia is only included in Zone.js by loading the\n // webapis-media-query.js file alongside the zone.js file. Additionally, some browsers do not\n // have MediaQueryList inherit from EventTarget, which causes inconsistencies in how Zone.js\n // patches it.\n const handler = e => this._zone.run(() => observer.next(e));\n mql.addListener(handler);\n return () => {\n mql.removeListener(handler);\n };\n }).pipe(startWith(mql), map(({\n matches\n }) => ({\n query,\n matches\n })), takeUntil(this._destroySubject));\n // Add the MediaQueryList to the set of queries.\n const output = {\n observable: queryObservable,\n mql\n };\n this._queries.set(query, output);\n return output;\n }\n static ɵfac = function BreakpointObserver_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || BreakpointObserver)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: BreakpointObserver,\n factory: BreakpointObserver.ɵfac,\n providedIn: 'root'\n });\n }\n return BreakpointObserver;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Split each query string into separate query strings if two queries are provided as comma\n * separated.\n */\nfunction splitQueries(queries) {\n return queries.map(query => query.split(',')).reduce((a1, a2) => a1.concat(a2)).map(query => query.trim());\n}\nexport { BreakpointObserver as B, MediaMatcher as M };\n","import * as i0 from '@angular/core';\nimport { Injectable, inject, NgZone, ElementRef, EventEmitter, booleanAttribute, Directive, Output, Input, NgModule } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\nimport { map, filter, debounceTime } from 'rxjs/operators';\nimport { a as coerceNumberProperty, c as coerceElement } from './element-08c51fcd.mjs';\n\n// Angular may add, remove, or edit comment nodes during change detection. We don't care about\n// these changes because they don't affect the user-preceived content, and worse it can cause\n// infinite change detection cycles where the change detection updates a comment, triggering the\n// MutationObserver, triggering another change detection and kicking the cycle off again.\nfunction shouldIgnoreRecord(record) {\n // Ignore changes to comment text.\n if (record.type === 'characterData' && record.target instanceof Comment) {\n return true;\n }\n // Ignore addition / removal of comments.\n if (record.type === 'childList') {\n for (let i = 0; i < record.addedNodes.length; i++) {\n if (!(record.addedNodes[i] instanceof Comment)) {\n return false;\n }\n }\n for (let i = 0; i < record.removedNodes.length; i++) {\n if (!(record.removedNodes[i] instanceof Comment)) {\n return false;\n }\n }\n return true;\n }\n // Observe everything else.\n return false;\n}\n/**\n * Factory that creates a new MutationObserver and allows us to stub it out in unit tests.\n * @docs-private\n */\nlet MutationObserverFactory = /*#__PURE__*/(() => {\n class MutationObserverFactory {\n create(callback) {\n return typeof MutationObserver === 'undefined' ? null : new MutationObserver(callback);\n }\n static ɵfac = function MutationObserverFactory_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MutationObserverFactory)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: MutationObserverFactory,\n factory: MutationObserverFactory.ɵfac,\n providedIn: 'root'\n });\n }\n return MutationObserverFactory;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** An injectable service that allows watching elements for changes to their content. */\nlet ContentObserver = /*#__PURE__*/(() => {\n class ContentObserver {\n _mutationObserverFactory = inject(MutationObserverFactory);\n /** Keeps track of the existing MutationObservers so they can be reused. */\n _observedElements = new Map();\n _ngZone = inject(NgZone);\n constructor() {}\n ngOnDestroy() {\n this._observedElements.forEach((_, element) => this._cleanupObserver(element));\n }\n observe(elementOrRef) {\n const element = coerceElement(elementOrRef);\n return new Observable(observer => {\n const stream = this._observeElement(element);\n const subscription = stream.pipe(map(records => records.filter(record => !shouldIgnoreRecord(record))), filter(records => !!records.length)).subscribe(records => {\n this._ngZone.run(() => {\n observer.next(records);\n });\n });\n return () => {\n subscription.unsubscribe();\n this._unobserveElement(element);\n };\n });\n }\n /**\n * Observes the given element by using the existing MutationObserver if available, or creating a\n * new one if not.\n */\n _observeElement(element) {\n return this._ngZone.runOutsideAngular(() => {\n if (!this._observedElements.has(element)) {\n const stream = new Subject();\n const observer = this._mutationObserverFactory.create(mutations => stream.next(mutations));\n if (observer) {\n observer.observe(element, {\n characterData: true,\n childList: true,\n subtree: true\n });\n }\n this._observedElements.set(element, {\n observer,\n stream,\n count: 1\n });\n } else {\n this._observedElements.get(element).count++;\n }\n return this._observedElements.get(element).stream;\n });\n }\n /**\n * Un-observes the given element and cleans up the underlying MutationObserver if nobody else is\n * observing this element.\n */\n _unobserveElement(element) {\n if (this._observedElements.has(element)) {\n this._observedElements.get(element).count--;\n if (!this._observedElements.get(element).count) {\n this._cleanupObserver(element);\n }\n }\n }\n /** Clean up the underlying MutationObserver for the specified element. */\n _cleanupObserver(element) {\n if (this._observedElements.has(element)) {\n const {\n observer,\n stream\n } = this._observedElements.get(element);\n if (observer) {\n observer.disconnect();\n }\n stream.complete();\n this._observedElements.delete(element);\n }\n }\n static ɵfac = function ContentObserver_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || ContentObserver)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: ContentObserver,\n factory: ContentObserver.ɵfac,\n providedIn: 'root'\n });\n }\n return ContentObserver;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Directive that triggers a callback whenever the content of\n * its associated element has changed.\n */\nlet CdkObserveContent = /*#__PURE__*/(() => {\n class CdkObserveContent {\n _contentObserver = inject(ContentObserver);\n _elementRef = inject(ElementRef);\n /** Event emitted for each change in the element's content. */\n event = new EventEmitter();\n /**\n * Whether observing content is disabled. This option can be used\n * to disconnect the underlying MutationObserver until it is needed.\n */\n get disabled() {\n return this._disabled;\n }\n set disabled(value) {\n this._disabled = value;\n this._disabled ? this._unsubscribe() : this._subscribe();\n }\n _disabled = false;\n /** Debounce interval for emitting the changes. */\n get debounce() {\n return this._debounce;\n }\n set debounce(value) {\n this._debounce = coerceNumberProperty(value);\n this._subscribe();\n }\n _debounce;\n _currentSubscription = null;\n constructor() {}\n ngAfterContentInit() {\n if (!this._currentSubscription && !this.disabled) {\n this._subscribe();\n }\n }\n ngOnDestroy() {\n this._unsubscribe();\n }\n _subscribe() {\n this._unsubscribe();\n const stream = this._contentObserver.observe(this._elementRef);\n this._currentSubscription = (this.debounce ? stream.pipe(debounceTime(this.debounce)) : stream).subscribe(this.event);\n }\n _unsubscribe() {\n this._currentSubscription?.unsubscribe();\n }\n static ɵfac = function CdkObserveContent_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkObserveContent)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkObserveContent,\n selectors: [[\"\", \"cdkObserveContent\", \"\"]],\n inputs: {\n disabled: [2, \"cdkObserveContentDisabled\", \"disabled\", booleanAttribute],\n debounce: \"debounce\"\n },\n outputs: {\n event: \"cdkObserveContent\"\n },\n exportAs: [\"cdkObserveContent\"]\n });\n }\n return CdkObserveContent;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet ObserversModule = /*#__PURE__*/(() => {\n class ObserversModule {\n static ɵfac = function ObserversModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || ObserversModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: ObserversModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n providers: [MutationObserverFactory]\n });\n }\n return ObserversModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nexport { ContentObserver as C, MutationObserverFactory as M, ObserversModule as O, CdkObserveContent as a };\n","import * as i0 from '@angular/core';\nimport { inject, Injectable, afterNextRender, NgZone, Injector, ElementRef, booleanAttribute, Directive, Input, InjectionToken, NgModule } from '@angular/core';\nimport { C as CdkMonitorFocus } from './focus-monitor-fc0bdee7.mjs';\nimport { DOCUMENT } from '@angular/common';\nimport { P as Platform } from './platform-610a08ae.mjs';\nimport { b as _getFocusedElementPierceShadowDom } from './shadow-dom-9f403d00.mjs';\nimport { _ as _CdkPrivateStyleLoader } from './style-loader-51b80670.mjs';\nimport { _ as _VisuallyHiddenLoader } from './visually-hidden-7e8689f8.mjs';\nimport { B as BreakpointObserver } from './breakpoints-observer-75147d6a.mjs';\nimport { C as ContentObserver, O as ObserversModule } from './observe-content-a5002af1.mjs';\n\n/**\n * Configuration for the isFocusable method.\n */\nclass IsFocusableConfig {\n /**\n * Whether to count an element as focusable even if it is not currently visible.\n */\n ignoreVisibility = false;\n}\n// The InteractivityChecker leans heavily on the ally.js accessibility utilities.\n// Methods like `isTabbable` are only covering specific edge-cases for the browsers which are\n// supported.\n/**\n * Utility for checking the interactivity of an element, such as whether it is focusable or\n * tabbable.\n */\nlet InteractivityChecker = /*#__PURE__*/(() => {\n class InteractivityChecker {\n _platform = inject(Platform);\n constructor() {}\n /**\n * Gets whether an element is disabled.\n *\n * @param element Element to be checked.\n * @returns Whether the element is disabled.\n */\n isDisabled(element) {\n // This does not capture some cases, such as a non-form control with a disabled attribute or\n // a form control inside of a disabled form, but should capture the most common cases.\n return element.hasAttribute('disabled');\n }\n /**\n * Gets whether an element is visible for the purposes of interactivity.\n *\n * This will capture states like `display: none` and `visibility: hidden`, but not things like\n * being clipped by an `overflow: hidden` parent or being outside the viewport.\n *\n * @returns Whether the element is visible.\n */\n isVisible(element) {\n return hasGeometry(element) && getComputedStyle(element).visibility === 'visible';\n }\n /**\n * Gets whether an element can be reached via Tab key.\n * Assumes that the element has already been checked with isFocusable.\n *\n * @param element Element to be checked.\n * @returns Whether the element is tabbable.\n */\n isTabbable(element) {\n // Nothing is tabbable on the server 😎\n if (!this._platform.isBrowser) {\n return false;\n }\n const frameElement = getFrameElement(getWindow(element));\n if (frameElement) {\n // Frame elements inherit their tabindex onto all child elements.\n if (getTabIndexValue(frameElement) === -1) {\n return false;\n }\n // Browsers disable tabbing to an element inside of an invisible frame.\n if (!this.isVisible(frameElement)) {\n return false;\n }\n }\n let nodeName = element.nodeName.toLowerCase();\n let tabIndexValue = getTabIndexValue(element);\n if (element.hasAttribute('contenteditable')) {\n return tabIndexValue !== -1;\n }\n if (nodeName === 'iframe' || nodeName === 'object') {\n // The frame or object's content may be tabbable depending on the content, but it's\n // not possibly to reliably detect the content of the frames. We always consider such\n // elements as non-tabbable.\n return false;\n }\n // In iOS, the browser only considers some specific elements as tabbable.\n if (this._platform.WEBKIT && this._platform.IOS && !isPotentiallyTabbableIOS(element)) {\n return false;\n }\n if (nodeName === 'audio') {\n // Audio elements without controls enabled are never tabbable, regardless\n // of the tabindex attribute explicitly being set.\n if (!element.hasAttribute('controls')) {\n return false;\n }\n // Audio elements with controls are by default tabbable unless the\n // tabindex attribute is set to `-1` explicitly.\n return tabIndexValue !== -1;\n }\n if (nodeName === 'video') {\n // For all video elements, if the tabindex attribute is set to `-1`, the video\n // is not tabbable. Note: We cannot rely on the default `HTMLElement.tabIndex`\n // property as that one is set to `-1` in Chrome, Edge and Safari v13.1. The\n // tabindex attribute is the source of truth here.\n if (tabIndexValue === -1) {\n return false;\n }\n // If the tabindex is explicitly set, and not `-1` (as per check before), the\n // video element is always tabbable (regardless of whether it has controls or not).\n if (tabIndexValue !== null) {\n return true;\n }\n // Otherwise (when no explicit tabindex is set), a video is only tabbable if it\n // has controls enabled. Firefox is special as videos are always tabbable regardless\n // of whether there are controls or not.\n return this._platform.FIREFOX || element.hasAttribute('controls');\n }\n return element.tabIndex >= 0;\n }\n /**\n * Gets whether an element can be focused by the user.\n *\n * @param element Element to be checked.\n * @param config The config object with options to customize this method's behavior\n * @returns Whether the element is focusable.\n */\n isFocusable(element, config) {\n // Perform checks in order of left to most expensive.\n // Again, naive approach that does not capture many edge cases and browser quirks.\n return isPotentiallyFocusable(element) && !this.isDisabled(element) && (config?.ignoreVisibility || this.isVisible(element));\n }\n static ɵfac = function InteractivityChecker_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || InteractivityChecker)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: InteractivityChecker,\n factory: InteractivityChecker.ɵfac,\n providedIn: 'root'\n });\n }\n return InteractivityChecker;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Returns the frame element from a window object. Since browsers like MS Edge throw errors if\n * the frameElement property is being accessed from a different host address, this property\n * should be accessed carefully.\n */\nfunction getFrameElement(window) {\n try {\n return window.frameElement;\n } catch {\n return null;\n }\n}\n/** Checks whether the specified element has any geometry / rectangles. */\nfunction hasGeometry(element) {\n // Use logic from jQuery to check for an invisible element.\n // See https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js#L12\n return !!(element.offsetWidth || element.offsetHeight || typeof element.getClientRects === 'function' && element.getClientRects().length);\n}\n/** Gets whether an element's */\nfunction isNativeFormElement(element) {\n let nodeName = element.nodeName.toLowerCase();\n return nodeName === 'input' || nodeName === 'select' || nodeName === 'button' || nodeName === 'textarea';\n}\n/** Gets whether an element is an `
`. */\nfunction isHiddenInput(element) {\n return isInputElement(element) && element.type == 'hidden';\n}\n/** Gets whether an element is an anchor that has an href attribute. */\nfunction isAnchorWithHref(element) {\n return isAnchorElement(element) && element.hasAttribute('href');\n}\n/** Gets whether an element is an input element. */\nfunction isInputElement(element) {\n return element.nodeName.toLowerCase() == 'input';\n}\n/** Gets whether an element is an anchor element. */\nfunction isAnchorElement(element) {\n return element.nodeName.toLowerCase() == 'a';\n}\n/** Gets whether an element has a valid tabindex. */\nfunction hasValidTabIndex(element) {\n if (!element.hasAttribute('tabindex') || element.tabIndex === undefined) {\n return false;\n }\n let tabIndex = element.getAttribute('tabindex');\n return !!(tabIndex && !isNaN(parseInt(tabIndex, 10)));\n}\n/**\n * Returns the parsed tabindex from the element attributes instead of returning the\n * evaluated tabindex from the browsers defaults.\n */\nfunction getTabIndexValue(element) {\n if (!hasValidTabIndex(element)) {\n return null;\n }\n // See browser issue in Gecko https://bugzilla.mozilla.org/show_bug.cgi?id=1128054\n const tabIndex = parseInt(element.getAttribute('tabindex') || '', 10);\n return isNaN(tabIndex) ? -1 : tabIndex;\n}\n/** Checks whether the specified element is potentially tabbable on iOS */\nfunction isPotentiallyTabbableIOS(element) {\n let nodeName = element.nodeName.toLowerCase();\n let inputType = nodeName === 'input' && element.type;\n return inputType === 'text' || inputType === 'password' || nodeName === 'select' || nodeName === 'textarea';\n}\n/**\n * Gets whether an element is potentially focusable without taking current visible/disabled state\n * into account.\n */\nfunction isPotentiallyFocusable(element) {\n // Inputs are potentially focusable *unless* they're type=\"hidden\".\n if (isHiddenInput(element)) {\n return false;\n }\n return isNativeFormElement(element) || isAnchorWithHref(element) || element.hasAttribute('contenteditable') || hasValidTabIndex(element);\n}\n/** Gets the parent window of a DOM node with regards of being inside of an iframe. */\nfunction getWindow(node) {\n // ownerDocument is null if `node` itself *is* a document.\n return node.ownerDocument && node.ownerDocument.defaultView || window;\n}\n\n/**\n * Class that allows for trapping focus within a DOM element.\n *\n * This class currently uses a relatively simple approach to focus trapping.\n * It assumes that the tab order is the same as DOM order, which is not necessarily true.\n * Things like `tabIndex > 0`, flex `order`, and shadow roots can cause the two to be misaligned.\n */\nclass FocusTrap {\n _element;\n _checker;\n _ngZone;\n _document;\n _injector;\n _startAnchor;\n _endAnchor;\n _hasAttached = false;\n // Event listeners for the anchors. Need to be regular functions so that we can unbind them later.\n startAnchorListener = () => this.focusLastTabbableElement();\n endAnchorListener = () => this.focusFirstTabbableElement();\n /** Whether the focus trap is active. */\n get enabled() {\n return this._enabled;\n }\n set enabled(value) {\n this._enabled = value;\n if (this._startAnchor && this._endAnchor) {\n this._toggleAnchorTabIndex(value, this._startAnchor);\n this._toggleAnchorTabIndex(value, this._endAnchor);\n }\n }\n _enabled = true;\n constructor(_element, _checker, _ngZone, _document, deferAnchors = false, /** @breaking-change 20.0.0 param to become required */\n _injector) {\n this._element = _element;\n this._checker = _checker;\n this._ngZone = _ngZone;\n this._document = _document;\n this._injector = _injector;\n if (!deferAnchors) {\n this.attachAnchors();\n }\n }\n /** Destroys the focus trap by cleaning up the anchors. */\n destroy() {\n const startAnchor = this._startAnchor;\n const endAnchor = this._endAnchor;\n if (startAnchor) {\n startAnchor.removeEventListener('focus', this.startAnchorListener);\n startAnchor.remove();\n }\n if (endAnchor) {\n endAnchor.removeEventListener('focus', this.endAnchorListener);\n endAnchor.remove();\n }\n this._startAnchor = this._endAnchor = null;\n this._hasAttached = false;\n }\n /**\n * Inserts the anchors into the DOM. This is usually done automatically\n * in the constructor, but can be deferred for cases like directives with `*ngIf`.\n * @returns Whether the focus trap managed to attach successfully. This may not be the case\n * if the target element isn't currently in the DOM.\n */\n attachAnchors() {\n // If we're not on the browser, there can be no focus to trap.\n if (this._hasAttached) {\n return true;\n }\n this._ngZone.runOutsideAngular(() => {\n if (!this._startAnchor) {\n this._startAnchor = this._createAnchor();\n this._startAnchor.addEventListener('focus', this.startAnchorListener);\n }\n if (!this._endAnchor) {\n this._endAnchor = this._createAnchor();\n this._endAnchor.addEventListener('focus', this.endAnchorListener);\n }\n });\n if (this._element.parentNode) {\n this._element.parentNode.insertBefore(this._startAnchor, this._element);\n this._element.parentNode.insertBefore(this._endAnchor, this._element.nextSibling);\n this._hasAttached = true;\n }\n return this._hasAttached;\n }\n /**\n * Waits for the zone to stabilize, then focuses the first tabbable element.\n * @returns Returns a promise that resolves with a boolean, depending\n * on whether focus was moved successfully.\n */\n focusInitialElementWhenReady(options) {\n return new Promise(resolve => {\n this._executeOnStable(() => resolve(this.focusInitialElement(options)));\n });\n }\n /**\n * Waits for the zone to stabilize, then focuses\n * the first tabbable element within the focus trap region.\n * @returns Returns a promise that resolves with a boolean, depending\n * on whether focus was moved successfully.\n */\n focusFirstTabbableElementWhenReady(options) {\n return new Promise(resolve => {\n this._executeOnStable(() => resolve(this.focusFirstTabbableElement(options)));\n });\n }\n /**\n * Waits for the zone to stabilize, then focuses\n * the last tabbable element within the focus trap region.\n * @returns Returns a promise that resolves with a boolean, depending\n * on whether focus was moved successfully.\n */\n focusLastTabbableElementWhenReady(options) {\n return new Promise(resolve => {\n this._executeOnStable(() => resolve(this.focusLastTabbableElement(options)));\n });\n }\n /**\n * Get the specified boundary element of the trapped region.\n * @param bound The boundary to get (start or end of trapped region).\n * @returns The boundary element.\n */\n _getRegionBoundary(bound) {\n // Contains the deprecated version of selector, for temporary backwards comparability.\n const markers = this._element.querySelectorAll(`[cdk-focus-region-${bound}], ` + `[cdkFocusRegion${bound}], ` + `[cdk-focus-${bound}]`);\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n for (let i = 0; i < markers.length; i++) {\n // @breaking-change 8.0.0\n if (markers[i].hasAttribute(`cdk-focus-${bound}`)) {\n console.warn(`Found use of deprecated attribute 'cdk-focus-${bound}', ` + `use 'cdkFocusRegion${bound}' instead. The deprecated ` + `attribute will be removed in 8.0.0.`, markers[i]);\n } else if (markers[i].hasAttribute(`cdk-focus-region-${bound}`)) {\n console.warn(`Found use of deprecated attribute 'cdk-focus-region-${bound}', ` + `use 'cdkFocusRegion${bound}' instead. The deprecated attribute ` + `will be removed in 8.0.0.`, markers[i]);\n }\n }\n }\n if (bound == 'start') {\n return markers.length ? markers[0] : this._getFirstTabbableElement(this._element);\n }\n return markers.length ? markers[markers.length - 1] : this._getLastTabbableElement(this._element);\n }\n /**\n * Focuses the element that should be focused when the focus trap is initialized.\n * @returns Whether focus was moved successfully.\n */\n focusInitialElement(options) {\n // Contains the deprecated version of selector, for temporary backwards comparability.\n const redirectToElement = this._element.querySelector(`[cdk-focus-initial], ` + `[cdkFocusInitial]`);\n if (redirectToElement) {\n // @breaking-change 8.0.0\n if ((typeof ngDevMode === 'undefined' || ngDevMode) && redirectToElement.hasAttribute(`cdk-focus-initial`)) {\n console.warn(`Found use of deprecated attribute 'cdk-focus-initial', ` + `use 'cdkFocusInitial' instead. The deprecated attribute ` + `will be removed in 8.0.0`, redirectToElement);\n }\n // Warn the consumer if the element they've pointed to\n // isn't focusable, when not in production mode.\n if ((typeof ngDevMode === 'undefined' || ngDevMode) && !this._checker.isFocusable(redirectToElement)) {\n console.warn(`Element matching '[cdkFocusInitial]' is not focusable.`, redirectToElement);\n }\n if (!this._checker.isFocusable(redirectToElement)) {\n const focusableChild = this._getFirstTabbableElement(redirectToElement);\n focusableChild?.focus(options);\n return !!focusableChild;\n }\n redirectToElement.focus(options);\n return true;\n }\n return this.focusFirstTabbableElement(options);\n }\n /**\n * Focuses the first tabbable element within the focus trap region.\n * @returns Whether focus was moved successfully.\n */\n focusFirstTabbableElement(options) {\n const redirectToElement = this._getRegionBoundary('start');\n if (redirectToElement) {\n redirectToElement.focus(options);\n }\n return !!redirectToElement;\n }\n /**\n * Focuses the last tabbable element within the focus trap region.\n * @returns Whether focus was moved successfully.\n */\n focusLastTabbableElement(options) {\n const redirectToElement = this._getRegionBoundary('end');\n if (redirectToElement) {\n redirectToElement.focus(options);\n }\n return !!redirectToElement;\n }\n /**\n * Checks whether the focus trap has successfully been attached.\n */\n hasAttached() {\n return this._hasAttached;\n }\n /** Get the first tabbable element from a DOM subtree (inclusive). */\n _getFirstTabbableElement(root) {\n if (this._checker.isFocusable(root) && this._checker.isTabbable(root)) {\n return root;\n }\n const children = root.children;\n for (let i = 0; i < children.length; i++) {\n const tabbableChild = children[i].nodeType === this._document.ELEMENT_NODE ? this._getFirstTabbableElement(children[i]) : null;\n if (tabbableChild) {\n return tabbableChild;\n }\n }\n return null;\n }\n /** Get the last tabbable element from a DOM subtree (inclusive). */\n _getLastTabbableElement(root) {\n if (this._checker.isFocusable(root) && this._checker.isTabbable(root)) {\n return root;\n }\n // Iterate in reverse DOM order.\n const children = root.children;\n for (let i = children.length - 1; i >= 0; i--) {\n const tabbableChild = children[i].nodeType === this._document.ELEMENT_NODE ? this._getLastTabbableElement(children[i]) : null;\n if (tabbableChild) {\n return tabbableChild;\n }\n }\n return null;\n }\n /** Creates an anchor element. */\n _createAnchor() {\n const anchor = this._document.createElement('div');\n this._toggleAnchorTabIndex(this._enabled, anchor);\n anchor.classList.add('cdk-visually-hidden');\n anchor.classList.add('cdk-focus-trap-anchor');\n anchor.setAttribute('aria-hidden', 'true');\n return anchor;\n }\n /**\n * Toggles the `tabindex` of an anchor, based on the enabled state of the focus trap.\n * @param isEnabled Whether the focus trap is enabled.\n * @param anchor Anchor on which to toggle the tabindex.\n */\n _toggleAnchorTabIndex(isEnabled, anchor) {\n // Remove the tabindex completely, rather than setting it to -1, because if the\n // element has a tabindex, the user might still hit it when navigating with the arrow keys.\n isEnabled ? anchor.setAttribute('tabindex', '0') : anchor.removeAttribute('tabindex');\n }\n /**\n * Toggles the`tabindex` of both anchors to either trap Tab focus or allow it to escape.\n * @param enabled: Whether the anchors should trap Tab.\n */\n toggleAnchors(enabled) {\n if (this._startAnchor && this._endAnchor) {\n this._toggleAnchorTabIndex(enabled, this._startAnchor);\n this._toggleAnchorTabIndex(enabled, this._endAnchor);\n }\n }\n /** Executes a function when the zone is stable. */\n _executeOnStable(fn) {\n // TODO: remove this conditional when injector is required in the constructor.\n if (this._injector) {\n afterNextRender(fn, {\n injector: this._injector\n });\n } else {\n setTimeout(fn);\n }\n }\n}\n/**\n * Factory that allows easy instantiation of focus traps.\n */\nlet FocusTrapFactory = /*#__PURE__*/(() => {\n class FocusTrapFactory {\n _checker = inject(InteractivityChecker);\n _ngZone = inject(NgZone);\n _document = inject(DOCUMENT);\n _injector = inject(Injector);\n constructor() {\n inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);\n }\n /**\n * Creates a focus-trapped region around the given element.\n * @param element The element around which focus will be trapped.\n * @param deferCaptureElements Defers the creation of focus-capturing elements to be done\n * manually by the user.\n * @returns The created focus trap instance.\n */\n create(element, deferCaptureElements = false) {\n return new FocusTrap(element, this._checker, this._ngZone, this._document, deferCaptureElements, this._injector);\n }\n static ɵfac = function FocusTrapFactory_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || FocusTrapFactory)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: FocusTrapFactory,\n factory: FocusTrapFactory.ɵfac,\n providedIn: 'root'\n });\n }\n return FocusTrapFactory;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** Directive for trapping focus within a region. */\nlet CdkTrapFocus = /*#__PURE__*/(() => {\n class CdkTrapFocus {\n _elementRef = inject(ElementRef);\n _focusTrapFactory = inject(FocusTrapFactory);\n /** Underlying FocusTrap instance. */\n focusTrap;\n /** Previously focused element to restore focus to upon destroy when using autoCapture. */\n _previouslyFocusedElement = null;\n /** Whether the focus trap is active. */\n get enabled() {\n return this.focusTrap?.enabled || false;\n }\n set enabled(value) {\n if (this.focusTrap) {\n this.focusTrap.enabled = value;\n }\n }\n /**\n * Whether the directive should automatically move focus into the trapped region upon\n * initialization and return focus to the previous activeElement upon destruction.\n */\n autoCapture;\n constructor() {\n const platform = inject(Platform);\n if (platform.isBrowser) {\n this.focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement, true);\n }\n }\n ngOnDestroy() {\n this.focusTrap?.destroy();\n // If we stored a previously focused element when using autoCapture, return focus to that\n // element now that the trapped region is being destroyed.\n if (this._previouslyFocusedElement) {\n this._previouslyFocusedElement.focus();\n this._previouslyFocusedElement = null;\n }\n }\n ngAfterContentInit() {\n this.focusTrap?.attachAnchors();\n if (this.autoCapture) {\n this._captureFocus();\n }\n }\n ngDoCheck() {\n if (this.focusTrap && !this.focusTrap.hasAttached()) {\n this.focusTrap.attachAnchors();\n }\n }\n ngOnChanges(changes) {\n const autoCaptureChange = changes['autoCapture'];\n if (autoCaptureChange && !autoCaptureChange.firstChange && this.autoCapture && this.focusTrap?.hasAttached()) {\n this._captureFocus();\n }\n }\n _captureFocus() {\n this._previouslyFocusedElement = _getFocusedElementPierceShadowDom();\n this.focusTrap?.focusInitialElementWhenReady();\n }\n static ɵfac = function CdkTrapFocus_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkTrapFocus)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkTrapFocus,\n selectors: [[\"\", \"cdkTrapFocus\", \"\"]],\n inputs: {\n enabled: [2, \"cdkTrapFocus\", \"enabled\", booleanAttribute],\n autoCapture: [2, \"cdkTrapFocusAutoCapture\", \"autoCapture\", booleanAttribute]\n },\n exportAs: [\"cdkTrapFocus\"],\n features: [i0.ɵɵNgOnChangesFeature]\n });\n }\n return CdkTrapFocus;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nconst LIVE_ANNOUNCER_ELEMENT_TOKEN = /*#__PURE__*/new InjectionToken('liveAnnouncerElement', {\n providedIn: 'root',\n factory: LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY\n});\n/**\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\nfunction LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY() {\n return null;\n}\n/** Injection token that can be used to configure the default options for the LiveAnnouncer. */\nconst LIVE_ANNOUNCER_DEFAULT_OPTIONS = /*#__PURE__*/new InjectionToken('LIVE_ANNOUNCER_DEFAULT_OPTIONS');\nlet uniqueIds = 0;\nlet LiveAnnouncer = /*#__PURE__*/(() => {\n class LiveAnnouncer {\n _ngZone = inject(NgZone);\n _defaultOptions = inject(LIVE_ANNOUNCER_DEFAULT_OPTIONS, {\n optional: true\n });\n _liveElement;\n _document = inject(DOCUMENT);\n _previousTimeout;\n _currentPromise;\n _currentResolve;\n constructor() {\n const elementToken = inject(LIVE_ANNOUNCER_ELEMENT_TOKEN, {\n optional: true\n });\n this._liveElement = elementToken || this._createLiveElement();\n }\n announce(message, ...args) {\n const defaultOptions = this._defaultOptions;\n let politeness;\n let duration;\n if (args.length === 1 && typeof args[0] === 'number') {\n duration = args[0];\n } else {\n [politeness, duration] = args;\n }\n this.clear();\n clearTimeout(this._previousTimeout);\n if (!politeness) {\n politeness = defaultOptions && defaultOptions.politeness ? defaultOptions.politeness : 'polite';\n }\n if (duration == null && defaultOptions) {\n duration = defaultOptions.duration;\n }\n // TODO: ensure changing the politeness works on all environments we support.\n this._liveElement.setAttribute('aria-live', politeness);\n if (this._liveElement.id) {\n this._exposeAnnouncerToModals(this._liveElement.id);\n }\n // This 100ms timeout is necessary for some browser + screen-reader combinations:\n // - Both JAWS and NVDA over IE11 will not announce anything without a non-zero timeout.\n // - With Chrome and IE11 with NVDA or JAWS, a repeated (identical) message won't be read a\n // second time without clearing and then using a non-zero delay.\n // (using JAWS 17 at time of this writing).\n return this._ngZone.runOutsideAngular(() => {\n if (!this._currentPromise) {\n this._currentPromise = new Promise(resolve => this._currentResolve = resolve);\n }\n clearTimeout(this._previousTimeout);\n this._previousTimeout = setTimeout(() => {\n this._liveElement.textContent = message;\n if (typeof duration === 'number') {\n this._previousTimeout = setTimeout(() => this.clear(), duration);\n }\n // For some reason in tests this can be undefined\n // Probably related to ZoneJS and every other thing that patches browser APIs in tests\n this._currentResolve?.();\n this._currentPromise = this._currentResolve = undefined;\n }, 100);\n return this._currentPromise;\n });\n }\n /**\n * Clears the current text from the announcer element. Can be used to prevent\n * screen readers from reading the text out again while the user is going\n * through the page landmarks.\n */\n clear() {\n if (this._liveElement) {\n this._liveElement.textContent = '';\n }\n }\n ngOnDestroy() {\n clearTimeout(this._previousTimeout);\n this._liveElement?.remove();\n this._liveElement = null;\n this._currentResolve?.();\n this._currentPromise = this._currentResolve = undefined;\n }\n _createLiveElement() {\n const elementClass = 'cdk-live-announcer-element';\n const previousElements = this._document.getElementsByClassName(elementClass);\n const liveEl = this._document.createElement('div');\n // Remove any old containers. This can happen when coming in from a server-side-rendered page.\n for (let i = 0; i < previousElements.length; i++) {\n previousElements[i].remove();\n }\n liveEl.classList.add(elementClass);\n liveEl.classList.add('cdk-visually-hidden');\n liveEl.setAttribute('aria-atomic', 'true');\n liveEl.setAttribute('aria-live', 'polite');\n liveEl.id = `cdk-live-announcer-${uniqueIds++}`;\n this._document.body.appendChild(liveEl);\n return liveEl;\n }\n /**\n * Some browsers won't expose the accessibility node of the live announcer element if there is an\n * `aria-modal` and the live announcer is outside of it. This method works around the issue by\n * pointing the `aria-owns` of all modals to the live announcer element.\n */\n _exposeAnnouncerToModals(id) {\n // TODO(http://github.com/angular/components/issues/26853): consider de-duplicating this with\n // the `SnakBarContainer` and other usages.\n //\n // Note that the selector here is limited to CDK overlays at the moment in order to reduce the\n // section of the DOM we need to look through. This should cover all the cases we support, but\n // the selector can be expanded if it turns out to be too narrow.\n const modals = this._document.querySelectorAll('body > .cdk-overlay-container [aria-modal=\"true\"]');\n for (let i = 0; i < modals.length; i++) {\n const modal = modals[i];\n const ariaOwns = modal.getAttribute('aria-owns');\n if (!ariaOwns) {\n modal.setAttribute('aria-owns', id);\n } else if (ariaOwns.indexOf(id) === -1) {\n modal.setAttribute('aria-owns', ariaOwns + ' ' + id);\n }\n }\n }\n static ɵfac = function LiveAnnouncer_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || LiveAnnouncer)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: LiveAnnouncer,\n factory: LiveAnnouncer.ɵfac,\n providedIn: 'root'\n });\n }\n return LiveAnnouncer;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * A directive that works similarly to aria-live, but uses the LiveAnnouncer to ensure compatibility\n * with a wider range of browsers and screen readers.\n */\nlet CdkAriaLive = /*#__PURE__*/(() => {\n class CdkAriaLive {\n _elementRef = inject(ElementRef);\n _liveAnnouncer = inject(LiveAnnouncer);\n _contentObserver = inject(ContentObserver);\n _ngZone = inject(NgZone);\n /** The aria-live politeness level to use when announcing messages. */\n get politeness() {\n return this._politeness;\n }\n set politeness(value) {\n this._politeness = value === 'off' || value === 'assertive' ? value : 'polite';\n if (this._politeness === 'off') {\n if (this._subscription) {\n this._subscription.unsubscribe();\n this._subscription = null;\n }\n } else if (!this._subscription) {\n this._subscription = this._ngZone.runOutsideAngular(() => {\n return this._contentObserver.observe(this._elementRef).subscribe(() => {\n // Note that we use textContent here, rather than innerText, in order to avoid a reflow.\n const elementText = this._elementRef.nativeElement.textContent;\n // The `MutationObserver` fires also for attribute\n // changes which we don't want to announce.\n if (elementText !== this._previousAnnouncedText) {\n this._liveAnnouncer.announce(elementText, this._politeness, this.duration);\n this._previousAnnouncedText = elementText;\n }\n });\n });\n }\n }\n _politeness = 'polite';\n /** Time in milliseconds after which to clear out the announcer element. */\n duration;\n _previousAnnouncedText;\n _subscription;\n constructor() {\n inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);\n }\n ngOnDestroy() {\n if (this._subscription) {\n this._subscription.unsubscribe();\n }\n }\n static ɵfac = function CdkAriaLive_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkAriaLive)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkAriaLive,\n selectors: [[\"\", \"cdkAriaLive\", \"\"]],\n inputs: {\n politeness: [0, \"cdkAriaLive\", \"politeness\"],\n duration: [0, \"cdkAriaLiveDuration\", \"duration\"]\n },\n exportAs: [\"cdkAriaLive\"]\n });\n }\n return CdkAriaLive;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Set of possible high-contrast mode backgrounds. */\nvar HighContrastMode = /*#__PURE__*/function (HighContrastMode) {\n HighContrastMode[HighContrastMode[\"NONE\"] = 0] = \"NONE\";\n HighContrastMode[HighContrastMode[\"BLACK_ON_WHITE\"] = 1] = \"BLACK_ON_WHITE\";\n HighContrastMode[HighContrastMode[\"WHITE_ON_BLACK\"] = 2] = \"WHITE_ON_BLACK\";\n return HighContrastMode;\n}(HighContrastMode || {});\n/** CSS class applied to the document body when in black-on-white high-contrast mode. */\nconst BLACK_ON_WHITE_CSS_CLASS = 'cdk-high-contrast-black-on-white';\n/** CSS class applied to the document body when in white-on-black high-contrast mode. */\nconst WHITE_ON_BLACK_CSS_CLASS = 'cdk-high-contrast-white-on-black';\n/** CSS class applied to the document body when in high-contrast mode. */\nconst HIGH_CONTRAST_MODE_ACTIVE_CSS_CLASS = 'cdk-high-contrast-active';\n/**\n * Service to determine whether the browser is currently in a high-contrast-mode environment.\n *\n * Microsoft Windows supports an accessibility feature called \"High Contrast Mode\". This mode\n * changes the appearance of all applications, including web applications, to dramatically increase\n * contrast.\n *\n * IE, Edge, and Firefox currently support this mode. Chrome does not support Windows High Contrast\n * Mode. This service does not detect high-contrast mode as added by the Chrome \"High Contrast\"\n * browser extension.\n */\nlet HighContrastModeDetector = /*#__PURE__*/(() => {\n class HighContrastModeDetector {\n _platform = inject(Platform);\n /**\n * Figuring out the high contrast mode and adding the body classes can cause\n * some expensive layouts. This flag is used to ensure that we only do it once.\n */\n _hasCheckedHighContrastMode;\n _document = inject(DOCUMENT);\n _breakpointSubscription;\n constructor() {\n this._breakpointSubscription = inject(BreakpointObserver).observe('(forced-colors: active)').subscribe(() => {\n if (this._hasCheckedHighContrastMode) {\n this._hasCheckedHighContrastMode = false;\n this._applyBodyHighContrastModeCssClasses();\n }\n });\n }\n /** Gets the current high-contrast-mode for the page. */\n getHighContrastMode() {\n if (!this._platform.isBrowser) {\n return HighContrastMode.NONE;\n }\n // Create a test element with an arbitrary background-color that is neither black nor\n // white; high-contrast mode will coerce the color to either black or white. Also ensure that\n // appending the test element to the DOM does not affect layout by absolutely positioning it\n const testElement = this._document.createElement('div');\n testElement.style.backgroundColor = 'rgb(1,2,3)';\n testElement.style.position = 'absolute';\n this._document.body.appendChild(testElement);\n // Get the computed style for the background color, collapsing spaces to normalize between\n // browsers. Once we get this color, we no longer need the test element. Access the `window`\n // via the document so we can fake it in tests. Note that we have extra null checks, because\n // this logic will likely run during app bootstrap and throwing can break the entire app.\n const documentWindow = this._document.defaultView || window;\n const computedStyle = documentWindow && documentWindow.getComputedStyle ? documentWindow.getComputedStyle(testElement) : null;\n const computedColor = (computedStyle && computedStyle.backgroundColor || '').replace(/ /g, '');\n testElement.remove();\n switch (computedColor) {\n // Pre Windows 11 dark theme.\n case 'rgb(0,0,0)':\n // Windows 11 dark themes.\n case 'rgb(45,50,54)':\n case 'rgb(32,32,32)':\n return HighContrastMode.WHITE_ON_BLACK;\n // Pre Windows 11 light theme.\n case 'rgb(255,255,255)':\n // Windows 11 light theme.\n case 'rgb(255,250,239)':\n return HighContrastMode.BLACK_ON_WHITE;\n }\n return HighContrastMode.NONE;\n }\n ngOnDestroy() {\n this._breakpointSubscription.unsubscribe();\n }\n /** Applies CSS classes indicating high-contrast mode to document body (browser-only). */\n _applyBodyHighContrastModeCssClasses() {\n if (!this._hasCheckedHighContrastMode && this._platform.isBrowser && this._document.body) {\n const bodyClasses = this._document.body.classList;\n bodyClasses.remove(HIGH_CONTRAST_MODE_ACTIVE_CSS_CLASS, BLACK_ON_WHITE_CSS_CLASS, WHITE_ON_BLACK_CSS_CLASS);\n this._hasCheckedHighContrastMode = true;\n const mode = this.getHighContrastMode();\n if (mode === HighContrastMode.BLACK_ON_WHITE) {\n bodyClasses.add(HIGH_CONTRAST_MODE_ACTIVE_CSS_CLASS, BLACK_ON_WHITE_CSS_CLASS);\n } else if (mode === HighContrastMode.WHITE_ON_BLACK) {\n bodyClasses.add(HIGH_CONTRAST_MODE_ACTIVE_CSS_CLASS, WHITE_ON_BLACK_CSS_CLASS);\n }\n }\n }\n static ɵfac = function HighContrastModeDetector_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || HighContrastModeDetector)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: HighContrastModeDetector,\n factory: HighContrastModeDetector.ɵfac,\n providedIn: 'root'\n });\n }\n return HighContrastModeDetector;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet A11yModule = /*#__PURE__*/(() => {\n class A11yModule {\n constructor() {\n inject(HighContrastModeDetector)._applyBodyHighContrastModeCssClasses();\n }\n static ɵfac = function A11yModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || A11yModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: A11yModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n imports: [ObserversModule]\n });\n }\n return A11yModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nexport { A11yModule as A, CdkTrapFocus as C, FocusTrap as F, HighContrastModeDetector as H, InteractivityChecker as I, LiveAnnouncer as L, HighContrastMode as a, FocusTrapFactory as b, IsFocusableConfig as c, CdkAriaLive as d, LIVE_ANNOUNCER_ELEMENT_TOKEN as e, LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY as f, LIVE_ANNOUNCER_DEFAULT_OPTIONS as g };\n","/** Gets whether the code is currently running in a test environment. */\nfunction _isTestEnvironment() {\n // We can't use `declare const` because it causes conflicts inside Google with the real typings\n // for these symbols and we can't read them off the global object, because they don't appear to\n // be attached there for some runners like Jest.\n // (see: https://github.com/angular/components/issues/23365#issuecomment-938146643)\n return (\n // @ts-ignore\n typeof __karma__ !== 'undefined' && !!__karma__ ||\n // @ts-ignore\n typeof jasmine !== 'undefined' && !!jasmine ||\n // @ts-ignore\n typeof jest !== 'undefined' && !!jest ||\n // @ts-ignore\n typeof Mocha !== 'undefined' && !!Mocha\n );\n}\nexport { _isTestEnvironment as _ };\n","/** Coerces a value to a CSS pixel value. */\nfunction coerceCssPixelValue(value) {\n if (value == null) {\n return '';\n }\n return typeof value === 'string' ? value : `${value}px`;\n}\nexport { coerceCssPixelValue as c };\n","import * as i0 from '@angular/core';\nimport { InjectionToken, inject, EventEmitter, Injectable } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\n\n/**\n * Injection token used to inject the document into Directionality.\n * This is used so that the value can be faked in tests.\n *\n * We can't use the real document in tests because changing the real `dir` causes geometry-based\n * tests in Safari to fail.\n *\n * We also can't re-provide the DOCUMENT token from platform-browser because the unit tests\n * themselves use things like `querySelector` in test code.\n *\n * This token is defined in a separate file from Directionality as a workaround for\n * https://github.com/angular/angular/issues/22559\n *\n * @docs-private\n */\nconst DIR_DOCUMENT = /*#__PURE__*/new InjectionToken('cdk-dir-doc', {\n providedIn: 'root',\n factory: DIR_DOCUMENT_FACTORY\n});\n/**\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\nfunction DIR_DOCUMENT_FACTORY() {\n return inject(DOCUMENT);\n}\n\n/** Regex that matches locales with an RTL script. Taken from `goog.i18n.bidi.isRtlLanguage`. */\nconst RTL_LOCALE_PATTERN = /^(ar|ckb|dv|he|iw|fa|nqo|ps|sd|ug|ur|yi|.*[-_](Adlm|Arab|Hebr|Nkoo|Rohg|Thaa))(?!.*[-_](Latn|Cyrl)($|-|_))($|-|_)/i;\n/** Resolves a string value to a specific direction. */\nfunction _resolveDirectionality(rawValue) {\n const value = rawValue?.toLowerCase() || '';\n if (value === 'auto' && typeof navigator !== 'undefined' && navigator?.language) {\n return RTL_LOCALE_PATTERN.test(navigator.language) ? 'rtl' : 'ltr';\n }\n return value === 'rtl' ? 'rtl' : 'ltr';\n}\n/**\n * The directionality (LTR / RTL) context for the application (or a subtree of it).\n * Exposes the current direction and a stream of direction changes.\n */\nlet Directionality = /*#__PURE__*/(() => {\n class Directionality {\n /** The current 'ltr' or 'rtl' value. */\n value = 'ltr';\n /** Stream that emits whenever the 'ltr' / 'rtl' state changes. */\n change = new EventEmitter();\n constructor() {\n const _document = inject(DIR_DOCUMENT, {\n optional: true\n });\n if (_document) {\n const bodyDir = _document.body ? _document.body.dir : null;\n const htmlDir = _document.documentElement ? _document.documentElement.dir : null;\n this.value = _resolveDirectionality(bodyDir || htmlDir || 'ltr');\n }\n }\n ngOnDestroy() {\n this.change.complete();\n }\n static ɵfac = function Directionality_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || Directionality)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: Directionality,\n factory: Directionality.ɵfac,\n providedIn: 'root'\n });\n }\n return Directionality;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nexport { Directionality as D, _resolveDirectionality as _, DIR_DOCUMENT as a };\n","/** The possible ways the browser may handle the horizontal scroll axis in RTL languages. */\nvar RtlScrollAxisType = /*#__PURE__*/function (RtlScrollAxisType) {\n /**\n * scrollLeft is 0 when scrolled all the way left and (scrollWidth - clientWidth) when scrolled\n * all the way right.\n */\n RtlScrollAxisType[RtlScrollAxisType[\"NORMAL\"] = 0] = \"NORMAL\";\n /**\n * scrollLeft is -(scrollWidth - clientWidth) when scrolled all the way left and 0 when scrolled\n * all the way right.\n */\n RtlScrollAxisType[RtlScrollAxisType[\"NEGATED\"] = 1] = \"NEGATED\";\n /**\n * scrollLeft is (scrollWidth - clientWidth) when scrolled all the way left and 0 when scrolled\n * all the way right.\n */\n RtlScrollAxisType[RtlScrollAxisType[\"INVERTED\"] = 2] = \"INVERTED\";\n return RtlScrollAxisType;\n}(RtlScrollAxisType || {});\n/** Cached result of the way the browser handles the horizontal scroll axis in RTL mode. */\nlet rtlScrollAxisType;\n/** Cached result of the check that indicates whether the browser supports scroll behaviors. */\nlet scrollBehaviorSupported;\n/** Check whether the browser supports scroll behaviors. */\nfunction supportsScrollBehavior() {\n if (scrollBehaviorSupported == null) {\n // If we're not in the browser, it can't be supported. Also check for `Element`, because\n // some projects stub out the global `document` during SSR which can throw us off.\n if (typeof document !== 'object' || !document || typeof Element !== 'function' || !Element) {\n scrollBehaviorSupported = false;\n return scrollBehaviorSupported;\n }\n // If the element can have a `scrollBehavior` style, we can be sure that it's supported.\n if ('scrollBehavior' in document.documentElement.style) {\n scrollBehaviorSupported = true;\n } else {\n // At this point we have 3 possibilities: `scrollTo` isn't supported at all, it's\n // supported but it doesn't handle scroll behavior, or it has been polyfilled.\n const scrollToFunction = Element.prototype.scrollTo;\n if (scrollToFunction) {\n // We can detect if the function has been polyfilled by calling `toString` on it. Native\n // functions are obfuscated using `[native code]`, whereas if it was overwritten we'd get\n // the actual function source. Via https://davidwalsh.name/detect-native-function. Consider\n // polyfilled functions as supporting scroll behavior.\n scrollBehaviorSupported = !/\\{\\s*\\[native code\\]\\s*\\}/.test(scrollToFunction.toString());\n } else {\n scrollBehaviorSupported = false;\n }\n }\n }\n return scrollBehaviorSupported;\n}\n/**\n * Checks the type of RTL scroll axis used by this browser. As of time of writing, Chrome is NORMAL,\n * Firefox & Safari are NEGATED, and IE & Edge are INVERTED.\n */\nfunction getRtlScrollAxisType() {\n // We can't check unless we're on the browser. Just assume 'normal' if we're not.\n if (typeof document !== 'object' || !document) {\n return RtlScrollAxisType.NORMAL;\n }\n if (rtlScrollAxisType == null) {\n // Create a 1px wide scrolling container and a 2px wide content element.\n const scrollContainer = document.createElement('div');\n const containerStyle = scrollContainer.style;\n scrollContainer.dir = 'rtl';\n containerStyle.width = '1px';\n containerStyle.overflow = 'auto';\n containerStyle.visibility = 'hidden';\n containerStyle.pointerEvents = 'none';\n containerStyle.position = 'absolute';\n const content = document.createElement('div');\n const contentStyle = content.style;\n contentStyle.width = '2px';\n contentStyle.height = '1px';\n scrollContainer.appendChild(content);\n document.body.appendChild(scrollContainer);\n rtlScrollAxisType = RtlScrollAxisType.NORMAL;\n // The viewport starts scrolled all the way to the right in RTL mode. If we are in a NORMAL\n // browser this would mean that the scrollLeft should be 1. If it's zero instead we know we're\n // dealing with one of the other two types of browsers.\n if (scrollContainer.scrollLeft === 0) {\n // In a NEGATED browser the scrollLeft is always somewhere in [-maxScrollAmount, 0]. For an\n // INVERTED browser it is always somewhere in [0, maxScrollAmount]. We can determine which by\n // setting to the scrollLeft to 1. This is past the max for a NEGATED browser, so it will\n // return 0 when we read it again.\n scrollContainer.scrollLeft = 1;\n rtlScrollAxisType = scrollContainer.scrollLeft === 0 ? RtlScrollAxisType.NEGATED : RtlScrollAxisType.INVERTED;\n }\n scrollContainer.remove();\n }\n return rtlScrollAxisType;\n}\nexport { RtlScrollAxisType as R, getRtlScrollAxisType as g, supportsScrollBehavior as s };\n","import * as i0 from '@angular/core';\nimport { EventEmitter, Directive, Output, Input, NgModule } from '@angular/core';\nimport { _ as _resolveDirectionality, D as Directionality } from './directionality-0a678adc.mjs';\n\n/**\n * Directive to listen for changes of direction of part of the DOM.\n *\n * Provides itself as Directionality such that descendant directives only need to ever inject\n * Directionality to get the closest direction.\n */\nlet Dir = /*#__PURE__*/(() => {\n class Dir {\n /** Normalized direction that accounts for invalid/unsupported values. */\n _dir = 'ltr';\n /** Whether the `value` has been set to its initial value. */\n _isInitialized = false;\n /** Direction as passed in by the consumer. */\n _rawDir;\n /** Event emitted when the direction changes. */\n change = new EventEmitter();\n /** @docs-private */\n get dir() {\n return this._dir;\n }\n set dir(value) {\n const previousValue = this._dir;\n // Note: `_resolveDirectionality` resolves the language based on the browser's language,\n // whereas the browser does it based on the content of the element. Since doing so based\n // on the content can be expensive, for now we're doing the simpler matching.\n this._dir = _resolveDirectionality(value);\n this._rawDir = value;\n if (previousValue !== this._dir && this._isInitialized) {\n this.change.emit(this._dir);\n }\n }\n /** Current layout direction of the element. */\n get value() {\n return this.dir;\n }\n /** Initialize once default value has been set. */\n ngAfterContentInit() {\n this._isInitialized = true;\n }\n ngOnDestroy() {\n this.change.complete();\n }\n static ɵfac = function Dir_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || Dir)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: Dir,\n selectors: [[\"\", \"dir\", \"\"]],\n hostVars: 1,\n hostBindings: function Dir_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵattribute(\"dir\", ctx._rawDir);\n }\n },\n inputs: {\n dir: \"dir\"\n },\n outputs: {\n change: \"dirChange\"\n },\n exportAs: [\"dir\"],\n features: [i0.ɵɵProvidersFeature([{\n provide: Directionality,\n useExisting: Dir\n }])]\n });\n }\n return Dir;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet BidiModule = /*#__PURE__*/(() => {\n class BidiModule {\n static ɵfac = function BidiModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || BidiModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: BidiModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({});\n }\n return BidiModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nexport { BidiModule as B, Dir as D };\n","import * as i0 from '@angular/core';\nimport { InjectionToken, forwardRef, Directive, Input, inject, NgZone, RendererFactory2, Injectable, ElementRef, Renderer2, ChangeDetectorRef, Injector, afterNextRender, booleanAttribute, Optional, Inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Output, ViewChild, ViewContainerRef, TemplateRef, IterableDiffers, NgModule } from '@angular/core';\nimport { Subject, of, Observable, Subscription, animationFrameScheduler, asapScheduler, isObservable } from 'rxjs';\nimport { distinctUntilChanged, auditTime, filter, startWith, takeUntil, pairwise, switchMap, shareReplay } from 'rxjs/operators';\nimport { a as coerceNumberProperty, c as coerceElement } from './element-08c51fcd.mjs';\nimport { P as Platform } from './platform-610a08ae.mjs';\nimport { D as Directionality } from './directionality-0a678adc.mjs';\nimport { g as getRtlScrollAxisType, R as RtlScrollAxisType, s as supportsScrollBehavior } from './scrolling-61955dd1.mjs';\nimport { DOCUMENT } from '@angular/common';\nimport { b as _VIEW_REPEATER_STRATEGY, A as ArrayDataSource, _ as _RecycleViewRepeaterStrategy } from './recycle-view-repeater-strategy-c1712813.mjs';\nimport { i as isDataSource } from './data-source-5320b6fd.mjs';\nimport { B as BidiModule } from './bidi-module-56dd006c.mjs';\n\n/** The injection token used to specify the virtual scrolling strategy. */\nconst _c0 = [\"contentWrapper\"];\nconst _c1 = [\"*\"];\nconst VIRTUAL_SCROLL_STRATEGY = /*#__PURE__*/new InjectionToken('VIRTUAL_SCROLL_STRATEGY');\n\n/** Virtual scrolling strategy for lists with items of known fixed size. */\nclass FixedSizeVirtualScrollStrategy {\n _scrolledIndexChange = /*#__PURE__*/new Subject();\n /** @docs-private Implemented as part of VirtualScrollStrategy. */\n scrolledIndexChange = /*#__PURE__*/this._scrolledIndexChange.pipe(/*#__PURE__*/distinctUntilChanged());\n /** The attached viewport. */\n _viewport = null;\n /** The size of the items in the virtually scrolling list. */\n _itemSize;\n /** The minimum amount of buffer rendered beyond the viewport (in pixels). */\n _minBufferPx;\n /** The number of buffer items to render beyond the edge of the viewport (in pixels). */\n _maxBufferPx;\n /**\n * @param itemSize The size of the items in the virtually scrolling list.\n * @param minBufferPx The minimum amount of buffer (in pixels) before needing to render more\n * @param maxBufferPx The amount of buffer (in pixels) to render when rendering more.\n */\n constructor(itemSize, minBufferPx, maxBufferPx) {\n this._itemSize = itemSize;\n this._minBufferPx = minBufferPx;\n this._maxBufferPx = maxBufferPx;\n }\n /**\n * Attaches this scroll strategy to a viewport.\n * @param viewport The viewport to attach this strategy to.\n */\n attach(viewport) {\n this._viewport = viewport;\n this._updateTotalContentSize();\n this._updateRenderedRange();\n }\n /** Detaches this scroll strategy from the currently attached viewport. */\n detach() {\n this._scrolledIndexChange.complete();\n this._viewport = null;\n }\n /**\n * Update the item size and buffer size.\n * @param itemSize The size of the items in the virtually scrolling list.\n * @param minBufferPx The minimum amount of buffer (in pixels) before needing to render more\n * @param maxBufferPx The amount of buffer (in pixels) to render when rendering more.\n */\n updateItemAndBufferSize(itemSize, minBufferPx, maxBufferPx) {\n if (maxBufferPx < minBufferPx && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('CDK virtual scroll: maxBufferPx must be greater than or equal to minBufferPx');\n }\n this._itemSize = itemSize;\n this._minBufferPx = minBufferPx;\n this._maxBufferPx = maxBufferPx;\n this._updateTotalContentSize();\n this._updateRenderedRange();\n }\n /** @docs-private Implemented as part of VirtualScrollStrategy. */\n onContentScrolled() {\n this._updateRenderedRange();\n }\n /** @docs-private Implemented as part of VirtualScrollStrategy. */\n onDataLengthChanged() {\n this._updateTotalContentSize();\n this._updateRenderedRange();\n }\n /** @docs-private Implemented as part of VirtualScrollStrategy. */\n onContentRendered() {\n /* no-op */\n }\n /** @docs-private Implemented as part of VirtualScrollStrategy. */\n onRenderedOffsetChanged() {\n /* no-op */\n }\n /**\n * Scroll to the offset for the given index.\n * @param index The index of the element to scroll to.\n * @param behavior The ScrollBehavior to use when scrolling.\n */\n scrollToIndex(index, behavior) {\n if (this._viewport) {\n this._viewport.scrollToOffset(index * this._itemSize, behavior);\n }\n }\n /** Update the viewport's total content size. */\n _updateTotalContentSize() {\n if (!this._viewport) {\n return;\n }\n this._viewport.setTotalContentSize(this._viewport.getDataLength() * this._itemSize);\n }\n /** Update the viewport's rendered range. */\n _updateRenderedRange() {\n if (!this._viewport) {\n return;\n }\n const renderedRange = this._viewport.getRenderedRange();\n const newRange = {\n start: renderedRange.start,\n end: renderedRange.end\n };\n const viewportSize = this._viewport.getViewportSize();\n const dataLength = this._viewport.getDataLength();\n let scrollOffset = this._viewport.measureScrollOffset();\n // Prevent NaN as result when dividing by zero.\n let firstVisibleIndex = this._itemSize > 0 ? scrollOffset / this._itemSize : 0;\n // If user scrolls to the bottom of the list and data changes to a smaller list\n if (newRange.end > dataLength) {\n // We have to recalculate the first visible index based on new data length and viewport size.\n const maxVisibleItems = Math.ceil(viewportSize / this._itemSize);\n const newVisibleIndex = Math.max(0, Math.min(firstVisibleIndex, dataLength - maxVisibleItems));\n // If first visible index changed we must update scroll offset to handle start/end buffers\n // Current range must also be adjusted to cover the new position (bottom of new list).\n if (firstVisibleIndex != newVisibleIndex) {\n firstVisibleIndex = newVisibleIndex;\n scrollOffset = newVisibleIndex * this._itemSize;\n newRange.start = Math.floor(firstVisibleIndex);\n }\n newRange.end = Math.max(0, Math.min(dataLength, newRange.start + maxVisibleItems));\n }\n const startBuffer = scrollOffset - newRange.start * this._itemSize;\n if (startBuffer < this._minBufferPx && newRange.start != 0) {\n const expandStart = Math.ceil((this._maxBufferPx - startBuffer) / this._itemSize);\n newRange.start = Math.max(0, newRange.start - expandStart);\n newRange.end = Math.min(dataLength, Math.ceil(firstVisibleIndex + (viewportSize + this._minBufferPx) / this._itemSize));\n } else {\n const endBuffer = newRange.end * this._itemSize - (scrollOffset + viewportSize);\n if (endBuffer < this._minBufferPx && newRange.end != dataLength) {\n const expandEnd = Math.ceil((this._maxBufferPx - endBuffer) / this._itemSize);\n if (expandEnd > 0) {\n newRange.end = Math.min(dataLength, newRange.end + expandEnd);\n newRange.start = Math.max(0, Math.floor(firstVisibleIndex - this._minBufferPx / this._itemSize));\n }\n }\n }\n this._viewport.setRenderedRange(newRange);\n this._viewport.setRenderedContentOffset(this._itemSize * newRange.start);\n this._scrolledIndexChange.next(Math.floor(firstVisibleIndex));\n }\n}\n/**\n * Provider factory for `FixedSizeVirtualScrollStrategy` that simply extracts the already created\n * `FixedSizeVirtualScrollStrategy` from the given directive.\n * @param fixedSizeDir The instance of `CdkFixedSizeVirtualScroll` to extract the\n * `FixedSizeVirtualScrollStrategy` from.\n */\nfunction _fixedSizeVirtualScrollStrategyFactory(fixedSizeDir) {\n return fixedSizeDir._scrollStrategy;\n}\n/** A virtual scroll strategy that supports fixed-size items. */\nlet CdkFixedSizeVirtualScroll = /*#__PURE__*/(() => {\n class CdkFixedSizeVirtualScroll {\n /** The size of the items in the list (in pixels). */\n get itemSize() {\n return this._itemSize;\n }\n set itemSize(value) {\n this._itemSize = coerceNumberProperty(value);\n }\n _itemSize = 20;\n /**\n * The minimum amount of buffer rendered beyond the viewport (in pixels).\n * If the amount of buffer dips below this number, more items will be rendered. Defaults to 100px.\n */\n get minBufferPx() {\n return this._minBufferPx;\n }\n set minBufferPx(value) {\n this._minBufferPx = coerceNumberProperty(value);\n }\n _minBufferPx = 100;\n /**\n * The number of pixels worth of buffer to render for when rendering new items. Defaults to 200px.\n */\n get maxBufferPx() {\n return this._maxBufferPx;\n }\n set maxBufferPx(value) {\n this._maxBufferPx = coerceNumberProperty(value);\n }\n _maxBufferPx = 200;\n /** The scroll strategy used by this directive. */\n _scrollStrategy = new FixedSizeVirtualScrollStrategy(this.itemSize, this.minBufferPx, this.maxBufferPx);\n ngOnChanges() {\n this._scrollStrategy.updateItemAndBufferSize(this.itemSize, this.minBufferPx, this.maxBufferPx);\n }\n static ɵfac = function CdkFixedSizeVirtualScroll_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkFixedSizeVirtualScroll)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkFixedSizeVirtualScroll,\n selectors: [[\"cdk-virtual-scroll-viewport\", \"itemSize\", \"\"]],\n inputs: {\n itemSize: \"itemSize\",\n minBufferPx: \"minBufferPx\",\n maxBufferPx: \"maxBufferPx\"\n },\n features: [i0.ɵɵProvidersFeature([{\n provide: VIRTUAL_SCROLL_STRATEGY,\n useFactory: _fixedSizeVirtualScrollStrategyFactory,\n deps: [forwardRef(() => CdkFixedSizeVirtualScroll)]\n }]), i0.ɵɵNgOnChangesFeature]\n });\n }\n return CdkFixedSizeVirtualScroll;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Time in ms to throttle the scrolling events by default. */\nconst DEFAULT_SCROLL_TIME = 20;\n/**\n * Service contained all registered Scrollable references and emits an event when any one of the\n * Scrollable references emit a scrolled event.\n */\nlet ScrollDispatcher = /*#__PURE__*/(() => {\n class ScrollDispatcher {\n _ngZone = inject(NgZone);\n _platform = inject(Platform);\n _renderer = inject(RendererFactory2).createRenderer(null, null);\n _cleanupGlobalListener;\n constructor() {}\n /** Subject for notifying that a registered scrollable reference element has been scrolled. */\n _scrolled = new Subject();\n /** Keeps track of the amount of subscriptions to `scrolled`. Used for cleaning up afterwards. */\n _scrolledCount = 0;\n /**\n * Map of all the scrollable references that are registered with the service and their\n * scroll event subscriptions.\n */\n scrollContainers = new Map();\n /**\n * Registers a scrollable instance with the service and listens for its scrolled events. When the\n * scrollable is scrolled, the service emits the event to its scrolled observable.\n * @param scrollable Scrollable instance to be registered.\n */\n register(scrollable) {\n if (!this.scrollContainers.has(scrollable)) {\n this.scrollContainers.set(scrollable, scrollable.elementScrolled().subscribe(() => this._scrolled.next(scrollable)));\n }\n }\n /**\n * De-registers a Scrollable reference and unsubscribes from its scroll event observable.\n * @param scrollable Scrollable instance to be deregistered.\n */\n deregister(scrollable) {\n const scrollableReference = this.scrollContainers.get(scrollable);\n if (scrollableReference) {\n scrollableReference.unsubscribe();\n this.scrollContainers.delete(scrollable);\n }\n }\n /**\n * Returns an observable that emits an event whenever any of the registered Scrollable\n * references (or window, document, or body) fire a scrolled event. Can provide a time in ms\n * to override the default \"throttle\" time.\n *\n * **Note:** in order to avoid hitting change detection for every scroll event,\n * all of the events emitted from this stream will be run outside the Angular zone.\n * If you need to update any data bindings as a result of a scroll event, you have\n * to run the callback using `NgZone.run`.\n */\n scrolled(auditTimeInMs = DEFAULT_SCROLL_TIME) {\n if (!this._platform.isBrowser) {\n return of();\n }\n return new Observable(observer => {\n if (!this._cleanupGlobalListener) {\n this._cleanupGlobalListener = this._ngZone.runOutsideAngular(() => this._renderer.listen('document', 'scroll', () => this._scrolled.next()));\n }\n // In the case of a 0ms delay, use an observable without auditTime\n // since it does add a perceptible delay in processing overhead.\n const subscription = auditTimeInMs > 0 ? this._scrolled.pipe(auditTime(auditTimeInMs)).subscribe(observer) : this._scrolled.subscribe(observer);\n this._scrolledCount++;\n return () => {\n subscription.unsubscribe();\n this._scrolledCount--;\n if (!this._scrolledCount) {\n this._cleanupGlobalListener?.();\n this._cleanupGlobalListener = undefined;\n }\n };\n });\n }\n ngOnDestroy() {\n this._cleanupGlobalListener?.();\n this._cleanupGlobalListener = undefined;\n this.scrollContainers.forEach((_, container) => this.deregister(container));\n this._scrolled.complete();\n }\n /**\n * Returns an observable that emits whenever any of the\n * scrollable ancestors of an element are scrolled.\n * @param elementOrElementRef Element whose ancestors to listen for.\n * @param auditTimeInMs Time to throttle the scroll events.\n */\n ancestorScrolled(elementOrElementRef, auditTimeInMs) {\n const ancestors = this.getAncestorScrollContainers(elementOrElementRef);\n return this.scrolled(auditTimeInMs).pipe(filter(target => !target || ancestors.indexOf(target) > -1));\n }\n /** Returns all registered Scrollables that contain the provided element. */\n getAncestorScrollContainers(elementOrElementRef) {\n const scrollingContainers = [];\n this.scrollContainers.forEach((_subscription, scrollable) => {\n if (this._scrollableContainsElement(scrollable, elementOrElementRef)) {\n scrollingContainers.push(scrollable);\n }\n });\n return scrollingContainers;\n }\n /** Returns true if the element is contained within the provided Scrollable. */\n _scrollableContainsElement(scrollable, elementOrElementRef) {\n let element = coerceElement(elementOrElementRef);\n let scrollableElement = scrollable.getElementRef().nativeElement;\n // Traverse through the element parents until we reach null, checking if any of the elements\n // are the scrollable's element.\n do {\n if (element == scrollableElement) {\n return true;\n }\n } while (element = element.parentElement);\n return false;\n }\n static ɵfac = function ScrollDispatcher_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || ScrollDispatcher)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: ScrollDispatcher,\n factory: ScrollDispatcher.ɵfac,\n providedIn: 'root'\n });\n }\n return ScrollDispatcher;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Sends an event when the directive's element is scrolled. Registers itself with the\n * ScrollDispatcher service to include itself as part of its collection of scrolling events that it\n * can be listened to through the service.\n */\nlet CdkScrollable = /*#__PURE__*/(() => {\n class CdkScrollable {\n elementRef = inject(ElementRef);\n scrollDispatcher = inject(ScrollDispatcher);\n ngZone = inject(NgZone);\n dir = inject(Directionality, {\n optional: true\n });\n _scrollElement = this.elementRef.nativeElement;\n _destroyed = new Subject();\n _renderer = inject(Renderer2);\n _cleanupScroll;\n _elementScrolled = new Subject();\n constructor() {}\n ngOnInit() {\n this._cleanupScroll = this.ngZone.runOutsideAngular(() => this._renderer.listen(this._scrollElement, 'scroll', event => this._elementScrolled.next(event)));\n this.scrollDispatcher.register(this);\n }\n ngOnDestroy() {\n this._cleanupScroll?.();\n this._elementScrolled.complete();\n this.scrollDispatcher.deregister(this);\n this._destroyed.next();\n this._destroyed.complete();\n }\n /** Returns observable that emits when a scroll event is fired on the host element. */\n elementScrolled() {\n return this._elementScrolled;\n }\n /** Gets the ElementRef for the viewport. */\n getElementRef() {\n return this.elementRef;\n }\n /**\n * Scrolls to the specified offsets. This is a normalized version of the browser's native scrollTo\n * method, since browsers are not consistent about what scrollLeft means in RTL. For this method\n * left and right always refer to the left and right side of the scrolling container irrespective\n * of the layout direction. start and end refer to left and right in an LTR context and vice-versa\n * in an RTL context.\n * @param options specified the offsets to scroll to.\n */\n scrollTo(options) {\n const el = this.elementRef.nativeElement;\n const isRtl = this.dir && this.dir.value == 'rtl';\n // Rewrite start & end offsets as right or left offsets.\n if (options.left == null) {\n options.left = isRtl ? options.end : options.start;\n }\n if (options.right == null) {\n options.right = isRtl ? options.start : options.end;\n }\n // Rewrite the bottom offset as a top offset.\n if (options.bottom != null) {\n options.top = el.scrollHeight - el.clientHeight - options.bottom;\n }\n // Rewrite the right offset as a left offset.\n if (isRtl && getRtlScrollAxisType() != RtlScrollAxisType.NORMAL) {\n if (options.left != null) {\n options.right = el.scrollWidth - el.clientWidth - options.left;\n }\n if (getRtlScrollAxisType() == RtlScrollAxisType.INVERTED) {\n options.left = options.right;\n } else if (getRtlScrollAxisType() == RtlScrollAxisType.NEGATED) {\n options.left = options.right ? -options.right : options.right;\n }\n } else {\n if (options.right != null) {\n options.left = el.scrollWidth - el.clientWidth - options.right;\n }\n }\n this._applyScrollToOptions(options);\n }\n _applyScrollToOptions(options) {\n const el = this.elementRef.nativeElement;\n if (supportsScrollBehavior()) {\n el.scrollTo(options);\n } else {\n if (options.top != null) {\n el.scrollTop = options.top;\n }\n if (options.left != null) {\n el.scrollLeft = options.left;\n }\n }\n }\n /**\n * Measures the scroll offset relative to the specified edge of the viewport. This method can be\n * used instead of directly checking scrollLeft or scrollTop, since browsers are not consistent\n * about what scrollLeft means in RTL. The values returned by this method are normalized such that\n * left and right always refer to the left and right side of the scrolling container irrespective\n * of the layout direction. start and end refer to left and right in an LTR context and vice-versa\n * in an RTL context.\n * @param from The edge to measure from.\n */\n measureScrollOffset(from) {\n const LEFT = 'left';\n const RIGHT = 'right';\n const el = this.elementRef.nativeElement;\n if (from == 'top') {\n return el.scrollTop;\n }\n if (from == 'bottom') {\n return el.scrollHeight - el.clientHeight - el.scrollTop;\n }\n // Rewrite start & end as left or right offsets.\n const isRtl = this.dir && this.dir.value == 'rtl';\n if (from == 'start') {\n from = isRtl ? RIGHT : LEFT;\n } else if (from == 'end') {\n from = isRtl ? LEFT : RIGHT;\n }\n if (isRtl && getRtlScrollAxisType() == RtlScrollAxisType.INVERTED) {\n // For INVERTED, scrollLeft is (scrollWidth - clientWidth) when scrolled all the way left and\n // 0 when scrolled all the way right.\n if (from == LEFT) {\n return el.scrollWidth - el.clientWidth - el.scrollLeft;\n } else {\n return el.scrollLeft;\n }\n } else if (isRtl && getRtlScrollAxisType() == RtlScrollAxisType.NEGATED) {\n // For NEGATED, scrollLeft is -(scrollWidth - clientWidth) when scrolled all the way left and\n // 0 when scrolled all the way right.\n if (from == LEFT) {\n return el.scrollLeft + el.scrollWidth - el.clientWidth;\n } else {\n return -el.scrollLeft;\n }\n } else {\n // For NORMAL, as well as non-RTL contexts, scrollLeft is 0 when scrolled all the way left and\n // (scrollWidth - clientWidth) when scrolled all the way right.\n if (from == LEFT) {\n return el.scrollLeft;\n } else {\n return el.scrollWidth - el.clientWidth - el.scrollLeft;\n }\n }\n }\n static ɵfac = function CdkScrollable_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkScrollable)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkScrollable,\n selectors: [[\"\", \"cdk-scrollable\", \"\"], [\"\", \"cdkScrollable\", \"\"]]\n });\n }\n return CdkScrollable;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Time in ms to throttle the resize events by default. */\nconst DEFAULT_RESIZE_TIME = 20;\n/**\n * Simple utility for getting the bounds of the browser viewport.\n * @docs-private\n */\nlet ViewportRuler = /*#__PURE__*/(() => {\n class ViewportRuler {\n _platform = inject(Platform);\n _listeners;\n /** Cached viewport dimensions. */\n _viewportSize;\n /** Stream of viewport change events. */\n _change = new Subject();\n /** Used to reference correct document/window */\n _document = inject(DOCUMENT, {\n optional: true\n });\n constructor() {\n const ngZone = inject(NgZone);\n const renderer = inject(RendererFactory2).createRenderer(null, null);\n ngZone.runOutsideAngular(() => {\n if (this._platform.isBrowser) {\n const changeListener = event => this._change.next(event);\n this._listeners = [renderer.listen('window', 'resize', changeListener), renderer.listen('window', 'orientationchange', changeListener)];\n }\n // Clear the cached position so that the viewport is re-measured next time it is required.\n // We don't need to keep track of the subscription, because it is completed on destroy.\n this.change().subscribe(() => this._viewportSize = null);\n });\n }\n ngOnDestroy() {\n this._listeners?.forEach(cleanup => cleanup());\n this._change.complete();\n }\n /** Returns the viewport's width and height. */\n getViewportSize() {\n if (!this._viewportSize) {\n this._updateViewportSize();\n }\n const output = {\n width: this._viewportSize.width,\n height: this._viewportSize.height\n };\n // If we're not on a browser, don't cache the size since it'll be mocked out anyway.\n if (!this._platform.isBrowser) {\n this._viewportSize = null;\n }\n return output;\n }\n /** Gets a DOMRect for the viewport's bounds. */\n getViewportRect() {\n // Use the document element's bounding rect rather than the window scroll properties\n // (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE where window scroll\n // properties and client coordinates (boundingClientRect, clientX/Y, etc.) are in different\n // conceptual viewports. Under most circumstances these viewports are equivalent, but they\n // can disagree when the page is pinch-zoomed (on devices that support touch).\n // See https://bugs.chromium.org/p/chromium/issues/detail?id=489206#c4\n // We use the documentElement instead of the body because, by default (without a css reset)\n // browsers typically give the document body an 8px margin, which is not included in\n // getBoundingClientRect().\n const scrollPosition = this.getViewportScrollPosition();\n const {\n width,\n height\n } = this.getViewportSize();\n return {\n top: scrollPosition.top,\n left: scrollPosition.left,\n bottom: scrollPosition.top + height,\n right: scrollPosition.left + width,\n height,\n width\n };\n }\n /** Gets the (top, left) scroll position of the viewport. */\n getViewportScrollPosition() {\n // While we can get a reference to the fake document\n // during SSR, it doesn't have getBoundingClientRect.\n if (!this._platform.isBrowser) {\n return {\n top: 0,\n left: 0\n };\n }\n // The top-left-corner of the viewport is determined by the scroll position of the document\n // body, normally just (scrollLeft, scrollTop). However, Chrome and Firefox disagree about\n // whether `document.body` or `document.documentElement` is the scrolled element, so reading\n // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of\n // `document.documentElement` works consistently, where the `top` and `left` values will\n // equal negative the scroll position.\n const document = this._document;\n const window = this._getWindow();\n const documentElement = document.documentElement;\n const documentRect = documentElement.getBoundingClientRect();\n const top = -documentRect.top || document.body.scrollTop || window.scrollY || documentElement.scrollTop || 0;\n const left = -documentRect.left || document.body.scrollLeft || window.scrollX || documentElement.scrollLeft || 0;\n return {\n top,\n left\n };\n }\n /**\n * Returns a stream that emits whenever the size of the viewport changes.\n * This stream emits outside of the Angular zone.\n * @param throttleTime Time in milliseconds to throttle the stream.\n */\n change(throttleTime = DEFAULT_RESIZE_TIME) {\n return throttleTime > 0 ? this._change.pipe(auditTime(throttleTime)) : this._change;\n }\n /** Use defaultView of injected document if available or fallback to global window reference */\n _getWindow() {\n return this._document.defaultView || window;\n }\n /** Updates the cached viewport size. */\n _updateViewportSize() {\n const window = this._getWindow();\n this._viewportSize = this._platform.isBrowser ? {\n width: window.innerWidth,\n height: window.innerHeight\n } : {\n width: 0,\n height: 0\n };\n }\n static ɵfac = function ViewportRuler_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || ViewportRuler)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: ViewportRuler,\n factory: ViewportRuler.ɵfac,\n providedIn: 'root'\n });\n }\n return ViewportRuler;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nconst VIRTUAL_SCROLLABLE = /*#__PURE__*/new InjectionToken('VIRTUAL_SCROLLABLE');\n/**\n * Extending the {@link CdkScrollable} to be used as scrolling container for virtual scrolling.\n */\nlet CdkVirtualScrollable = /*#__PURE__*/(() => {\n class CdkVirtualScrollable extends CdkScrollable {\n constructor() {\n super();\n }\n /**\n * Measure the viewport size for the provided orientation.\n *\n * @param orientation The orientation to measure the size from.\n */\n measureViewportSize(orientation) {\n const viewportEl = this.elementRef.nativeElement;\n return orientation === 'horizontal' ? viewportEl.clientWidth : viewportEl.clientHeight;\n }\n static ɵfac = function CdkVirtualScrollable_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkVirtualScrollable)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkVirtualScrollable,\n features: [i0.ɵɵInheritDefinitionFeature]\n });\n }\n return CdkVirtualScrollable;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Checks if the given ranges are equal. */\nfunction rangesEqual(r1, r2) {\n return r1.start == r2.start && r1.end == r2.end;\n}\n/**\n * Scheduler to be used for scroll events. Needs to fall back to\n * something that doesn't rely on requestAnimationFrame on environments\n * that don't support it (e.g. server-side rendering).\n */\nconst SCROLL_SCHEDULER = typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;\n/** A viewport that virtualizes its scrolling with the help of `CdkVirtualForOf`. */\nlet CdkVirtualScrollViewport = /*#__PURE__*/(() => {\n class CdkVirtualScrollViewport extends CdkVirtualScrollable {\n elementRef = inject(ElementRef);\n _changeDetectorRef = inject(ChangeDetectorRef);\n _scrollStrategy = inject(VIRTUAL_SCROLL_STRATEGY, {\n optional: true\n });\n scrollable = inject(VIRTUAL_SCROLLABLE, {\n optional: true\n });\n _platform = inject(Platform);\n /** Emits when the viewport is detached from a CdkVirtualForOf. */\n _detachedSubject = new Subject();\n /** Emits when the rendered range changes. */\n _renderedRangeSubject = new Subject();\n /** The direction the viewport scrolls. */\n get orientation() {\n return this._orientation;\n }\n set orientation(orientation) {\n if (this._orientation !== orientation) {\n this._orientation = orientation;\n this._calculateSpacerSize();\n }\n }\n _orientation = 'vertical';\n /**\n * Whether rendered items should persist in the DOM after scrolling out of view. By default, items\n * will be removed.\n */\n appendOnly = false;\n // Note: we don't use the typical EventEmitter here because we need to subscribe to the scroll\n // strategy lazily (i.e. only if the user is actually listening to the events). We do this because\n // depending on how the strategy calculates the scrolled index, it may come at a cost to\n // performance.\n /** Emits when the index of the first element visible in the viewport changes. */\n scrolledIndexChange = new Observable(observer => this._scrollStrategy.scrolledIndexChange.subscribe(index => Promise.resolve().then(() => this.ngZone.run(() => observer.next(index)))));\n /** The element that wraps the rendered content. */\n _contentWrapper;\n /** A stream that emits whenever the rendered range changes. */\n renderedRangeStream = this._renderedRangeSubject;\n /**\n * The total size of all content (in pixels), including content that is not currently rendered.\n */\n _totalContentSize = 0;\n /** A string representing the `style.width` property value to be used for the spacer element. */\n _totalContentWidth = '';\n /** A string representing the `style.height` property value to be used for the spacer element. */\n _totalContentHeight = '';\n /**\n * The CSS transform applied to the rendered subset of items so that they appear within the bounds\n * of the visible viewport.\n */\n _renderedContentTransform;\n /** The currently rendered range of indices. */\n _renderedRange = {\n start: 0,\n end: 0\n };\n /** The length of the data bound to this viewport (in number of items). */\n _dataLength = 0;\n /** The size of the viewport (in pixels). */\n _viewportSize = 0;\n /** the currently attached CdkVirtualScrollRepeater. */\n _forOf;\n /** The last rendered content offset that was set. */\n _renderedContentOffset = 0;\n /**\n * Whether the last rendered content offset was to the end of the content (and therefore needs to\n * be rewritten as an offset to the start of the content).\n */\n _renderedContentOffsetNeedsRewrite = false;\n /** Whether there is a pending change detection cycle. */\n _isChangeDetectionPending = false;\n /** A list of functions to run after the next change detection cycle. */\n _runAfterChangeDetection = [];\n /** Subscription to changes in the viewport size. */\n _viewportChanges = Subscription.EMPTY;\n _injector = inject(Injector);\n _isDestroyed = false;\n constructor() {\n super();\n const viewportRuler = inject(ViewportRuler);\n if (!this._scrollStrategy && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('Error: cdk-virtual-scroll-viewport requires the \"itemSize\" property to be set.');\n }\n this._viewportChanges = viewportRuler.change().subscribe(() => {\n this.checkViewportSize();\n });\n if (!this.scrollable) {\n // No scrollable is provided, so the virtual-scroll-viewport needs to become a scrollable\n this.elementRef.nativeElement.classList.add('cdk-virtual-scrollable');\n this.scrollable = this;\n }\n }\n ngOnInit() {\n // Scrolling depends on the element dimensions which we can't get during SSR.\n if (!this._platform.isBrowser) {\n return;\n }\n if (this.scrollable === this) {\n super.ngOnInit();\n }\n // It's still too early to measure the viewport at this point. Deferring with a promise allows\n // the Viewport to be rendered with the correct size before we measure. We run this outside the\n // zone to avoid causing more change detection cycles. We handle the change detection loop\n // ourselves instead.\n this.ngZone.runOutsideAngular(() => Promise.resolve().then(() => {\n this._measureViewportSize();\n this._scrollStrategy.attach(this);\n this.scrollable.elementScrolled().pipe(\n // Start off with a fake scroll event so we properly detect our initial position.\n startWith(null),\n // Collect multiple events into one until the next animation frame. This way if\n // there are multiple scroll events in the same frame we only need to recheck\n // our layout once.\n auditTime(0, SCROLL_SCHEDULER),\n // Usually `elementScrolled` is completed when the scrollable is destroyed, but\n // that may not be the case if a `CdkVirtualScrollableElement` is used so we have\n // to unsubscribe here just in case.\n takeUntil(this._destroyed)).subscribe(() => this._scrollStrategy.onContentScrolled());\n this._markChangeDetectionNeeded();\n }));\n }\n ngOnDestroy() {\n this.detach();\n this._scrollStrategy.detach();\n // Complete all subjects\n this._renderedRangeSubject.complete();\n this._detachedSubject.complete();\n this._viewportChanges.unsubscribe();\n this._isDestroyed = true;\n super.ngOnDestroy();\n }\n /** Attaches a `CdkVirtualScrollRepeater` to this viewport. */\n attach(forOf) {\n if (this._forOf && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('CdkVirtualScrollViewport is already attached.');\n }\n // Subscribe to the data stream of the CdkVirtualForOf to keep track of when the data length\n // changes. Run outside the zone to avoid triggering change detection, since we're managing the\n // change detection loop ourselves.\n this.ngZone.runOutsideAngular(() => {\n this._forOf = forOf;\n this._forOf.dataStream.pipe(takeUntil(this._detachedSubject)).subscribe(data => {\n const newLength = data.length;\n if (newLength !== this._dataLength) {\n this._dataLength = newLength;\n this._scrollStrategy.onDataLengthChanged();\n }\n this._doChangeDetection();\n });\n });\n }\n /** Detaches the current `CdkVirtualForOf`. */\n detach() {\n this._forOf = null;\n this._detachedSubject.next();\n }\n /** Gets the length of the data bound to this viewport (in number of items). */\n getDataLength() {\n return this._dataLength;\n }\n /** Gets the size of the viewport (in pixels). */\n getViewportSize() {\n return this._viewportSize;\n }\n // TODO(mmalerba): This is technically out of sync with what's really rendered until a render\n // cycle happens. I'm being careful to only call it after the render cycle is complete and before\n // setting it to something else, but its error prone and should probably be split into\n // `pendingRange` and `renderedRange`, the latter reflecting whats actually in the DOM.\n /** Get the current rendered range of items. */\n getRenderedRange() {\n return this._renderedRange;\n }\n measureBoundingClientRectWithScrollOffset(from) {\n return this.getElementRef().nativeElement.getBoundingClientRect()[from];\n }\n /**\n * Sets the total size of all content (in pixels), including content that is not currently\n * rendered.\n */\n setTotalContentSize(size) {\n if (this._totalContentSize !== size) {\n this._totalContentSize = size;\n this._calculateSpacerSize();\n this._markChangeDetectionNeeded();\n }\n }\n /** Sets the currently rendered range of indices. */\n setRenderedRange(range) {\n if (!rangesEqual(this._renderedRange, range)) {\n if (this.appendOnly) {\n range = {\n start: 0,\n end: Math.max(this._renderedRange.end, range.end)\n };\n }\n this._renderedRangeSubject.next(this._renderedRange = range);\n this._markChangeDetectionNeeded(() => this._scrollStrategy.onContentRendered());\n }\n }\n /**\n * Gets the offset from the start of the viewport to the start of the rendered data (in pixels).\n */\n getOffsetToRenderedContentStart() {\n return this._renderedContentOffsetNeedsRewrite ? null : this._renderedContentOffset;\n }\n /**\n * Sets the offset from the start of the viewport to either the start or end of the rendered data\n * (in pixels).\n */\n setRenderedContentOffset(offset, to = 'to-start') {\n // In appendOnly, we always start from the top\n offset = this.appendOnly && to === 'to-start' ? 0 : offset;\n // For a horizontal viewport in a right-to-left language we need to translate along the x-axis\n // in the negative direction.\n const isRtl = this.dir && this.dir.value == 'rtl';\n const isHorizontal = this.orientation == 'horizontal';\n const axis = isHorizontal ? 'X' : 'Y';\n const axisDirection = isHorizontal && isRtl ? -1 : 1;\n let transform = `translate${axis}(${Number(axisDirection * offset)}px)`;\n this._renderedContentOffset = offset;\n if (to === 'to-end') {\n transform += ` translate${axis}(-100%)`;\n // The viewport should rewrite this as a `to-start` offset on the next render cycle. Otherwise\n // elements will appear to expand in the wrong direction (e.g. `mat-expansion-panel` would\n // expand upward).\n this._renderedContentOffsetNeedsRewrite = true;\n }\n if (this._renderedContentTransform != transform) {\n // We know this value is safe because we parse `offset` with `Number()` before passing it\n // into the string.\n this._renderedContentTransform = transform;\n this._markChangeDetectionNeeded(() => {\n if (this._renderedContentOffsetNeedsRewrite) {\n this._renderedContentOffset -= this.measureRenderedContentSize();\n this._renderedContentOffsetNeedsRewrite = false;\n this.setRenderedContentOffset(this._renderedContentOffset);\n } else {\n this._scrollStrategy.onRenderedOffsetChanged();\n }\n });\n }\n }\n /**\n * Scrolls to the given offset from the start of the viewport. Please note that this is not always\n * the same as setting `scrollTop` or `scrollLeft`. In a horizontal viewport with right-to-left\n * direction, this would be the equivalent of setting a fictional `scrollRight` property.\n * @param offset The offset to scroll to.\n * @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.\n */\n scrollToOffset(offset, behavior = 'auto') {\n const options = {\n behavior\n };\n if (this.orientation === 'horizontal') {\n options.start = offset;\n } else {\n options.top = offset;\n }\n this.scrollable.scrollTo(options);\n }\n /**\n * Scrolls to the offset for the given index.\n * @param index The index of the element to scroll to.\n * @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.\n */\n scrollToIndex(index, behavior = 'auto') {\n this._scrollStrategy.scrollToIndex(index, behavior);\n }\n /**\n * Gets the current scroll offset from the start of the scrollable (in pixels).\n * @param from The edge to measure the offset from. Defaults to 'top' in vertical mode and 'start'\n * in horizontal mode.\n */\n measureScrollOffset(from) {\n // This is to break the call cycle\n let measureScrollOffset;\n if (this.scrollable == this) {\n measureScrollOffset = _from => super.measureScrollOffset(_from);\n } else {\n measureScrollOffset = _from => this.scrollable.measureScrollOffset(_from);\n }\n return Math.max(0, measureScrollOffset(from ?? (this.orientation === 'horizontal' ? 'start' : 'top')) - this.measureViewportOffset());\n }\n /**\n * Measures the offset of the viewport from the scrolling container\n * @param from The edge to measure from.\n */\n measureViewportOffset(from) {\n let fromRect;\n const LEFT = 'left';\n const RIGHT = 'right';\n const isRtl = this.dir?.value == 'rtl';\n if (from == 'start') {\n fromRect = isRtl ? RIGHT : LEFT;\n } else if (from == 'end') {\n fromRect = isRtl ? LEFT : RIGHT;\n } else if (from) {\n fromRect = from;\n } else {\n fromRect = this.orientation === 'horizontal' ? 'left' : 'top';\n }\n const scrollerClientRect = this.scrollable.measureBoundingClientRectWithScrollOffset(fromRect);\n const viewportClientRect = this.elementRef.nativeElement.getBoundingClientRect()[fromRect];\n return viewportClientRect - scrollerClientRect;\n }\n /** Measure the combined size of all of the rendered items. */\n measureRenderedContentSize() {\n const contentEl = this._contentWrapper.nativeElement;\n return this.orientation === 'horizontal' ? contentEl.offsetWidth : contentEl.offsetHeight;\n }\n /**\n * Measure the total combined size of the given range. Throws if the range includes items that are\n * not rendered.\n */\n measureRangeSize(range) {\n if (!this._forOf) {\n return 0;\n }\n return this._forOf.measureRangeSize(range, this.orientation);\n }\n /** Update the viewport dimensions and re-render. */\n checkViewportSize() {\n // TODO: Cleanup later when add logic for handling content resize\n this._measureViewportSize();\n this._scrollStrategy.onDataLengthChanged();\n }\n /** Measure the viewport size. */\n _measureViewportSize() {\n this._viewportSize = this.scrollable.measureViewportSize(this.orientation);\n }\n /** Queue up change detection to run. */\n _markChangeDetectionNeeded(runAfter) {\n if (runAfter) {\n this._runAfterChangeDetection.push(runAfter);\n }\n // Use a Promise to batch together calls to `_doChangeDetection`. This way if we set a bunch of\n // properties sequentially we only have to run `_doChangeDetection` once at the end.\n if (!this._isChangeDetectionPending) {\n this._isChangeDetectionPending = true;\n this.ngZone.runOutsideAngular(() => Promise.resolve().then(() => {\n this._doChangeDetection();\n }));\n }\n }\n /** Run change detection. */\n _doChangeDetection() {\n if (this._isDestroyed) {\n return;\n }\n this.ngZone.run(() => {\n // Apply changes to Angular bindings. Note: We must call `markForCheck` to run change detection\n // from the root, since the repeated items are content projected in. Calling `detectChanges`\n // instead does not properly check the projected content.\n this._changeDetectorRef.markForCheck();\n // Apply the content transform. The transform can't be set via an Angular binding because\n // bypassSecurityTrustStyle is banned in Google. However the value is safe, it's composed of\n // string literals, a variable that can only be 'X' or 'Y', and user input that is run through\n // the `Number` function first to coerce it to a numeric value.\n this._contentWrapper.nativeElement.style.transform = this._renderedContentTransform;\n afterNextRender(() => {\n this._isChangeDetectionPending = false;\n const runAfterChangeDetection = this._runAfterChangeDetection;\n this._runAfterChangeDetection = [];\n for (const fn of runAfterChangeDetection) {\n fn();\n }\n }, {\n injector: this._injector\n });\n });\n }\n /** Calculates the `style.width` and `style.height` for the spacer element. */\n _calculateSpacerSize() {\n this._totalContentHeight = this.orientation === 'horizontal' ? '' : `${this._totalContentSize}px`;\n this._totalContentWidth = this.orientation === 'horizontal' ? `${this._totalContentSize}px` : '';\n }\n static ɵfac = function CdkVirtualScrollViewport_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkVirtualScrollViewport)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: CdkVirtualScrollViewport,\n selectors: [[\"cdk-virtual-scroll-viewport\"]],\n viewQuery: function CdkVirtualScrollViewport_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(_c0, 7);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._contentWrapper = _t.first);\n }\n },\n hostAttrs: [1, \"cdk-virtual-scroll-viewport\"],\n hostVars: 4,\n hostBindings: function CdkVirtualScrollViewport_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵclassProp(\"cdk-virtual-scroll-orientation-horizontal\", ctx.orientation === \"horizontal\")(\"cdk-virtual-scroll-orientation-vertical\", ctx.orientation !== \"horizontal\");\n }\n },\n inputs: {\n orientation: \"orientation\",\n appendOnly: [2, \"appendOnly\", \"appendOnly\", booleanAttribute]\n },\n outputs: {\n scrolledIndexChange: \"scrolledIndexChange\"\n },\n features: [i0.ɵɵProvidersFeature([{\n provide: CdkScrollable,\n useFactory: (virtualScrollable, viewport) => virtualScrollable || viewport,\n deps: [[new Optional(), new Inject(VIRTUAL_SCROLLABLE)], CdkVirtualScrollViewport]\n }]), i0.ɵɵInheritDefinitionFeature],\n ngContentSelectors: _c1,\n decls: 4,\n vars: 4,\n consts: [[\"contentWrapper\", \"\"], [1, \"cdk-virtual-scroll-content-wrapper\"], [1, \"cdk-virtual-scroll-spacer\"]],\n template: function CdkVirtualScrollViewport_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef();\n i0.ɵɵelementStart(0, \"div\", 1, 0);\n i0.ɵɵprojection(2);\n i0.ɵɵelementEnd();\n i0.ɵɵelement(3, \"div\", 2);\n }\n if (rf & 2) {\n i0.ɵɵadvance(3);\n i0.ɵɵstyleProp(\"width\", ctx._totalContentWidth)(\"height\", ctx._totalContentHeight);\n }\n },\n styles: [\"cdk-virtual-scroll-viewport{display:block;position:relative;transform:translateZ(0)}.cdk-virtual-scrollable{overflow:auto;will-change:scroll-position;contain:strict}.cdk-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;contain:content}[dir=rtl] .cdk-virtual-scroll-content-wrapper{right:0;left:auto}.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper{min-height:100%}.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-left:0;padding-right:0;margin-left:0;margin-right:0;border-left-width:0;border-right-width:0;outline:none}.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{min-width:100%}.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-top-width:0;border-bottom-width:0;outline:none}.cdk-virtual-scroll-spacer{height:1px;transform-origin:0 0;flex:0 0 auto}[dir=rtl] .cdk-virtual-scroll-spacer{transform-origin:100% 0}\"],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return CdkVirtualScrollViewport;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Helper to extract the offset of a DOM Node in a certain direction. */\nfunction getOffset(orientation, direction, node) {\n const el = node;\n if (!el.getBoundingClientRect) {\n return 0;\n }\n const rect = el.getBoundingClientRect();\n if (orientation === 'horizontal') {\n return direction === 'start' ? rect.left : rect.right;\n }\n return direction === 'start' ? rect.top : rect.bottom;\n}\n/**\n * A directive similar to `ngForOf` to be used for rendering data inside a virtual scrolling\n * container.\n */\nlet CdkVirtualForOf = /*#__PURE__*/(() => {\n class CdkVirtualForOf {\n _viewContainerRef = inject(ViewContainerRef);\n _template = inject(TemplateRef);\n _differs = inject(IterableDiffers);\n _viewRepeater = inject(_VIEW_REPEATER_STRATEGY);\n _viewport = inject(CdkVirtualScrollViewport, {\n skipSelf: true\n });\n /** Emits when the rendered view of the data changes. */\n viewChange = new Subject();\n /** Subject that emits when a new DataSource instance is given. */\n _dataSourceChanges = new Subject();\n /** The DataSource to display. */\n get cdkVirtualForOf() {\n return this._cdkVirtualForOf;\n }\n set cdkVirtualForOf(value) {\n this._cdkVirtualForOf = value;\n if (isDataSource(value)) {\n this._dataSourceChanges.next(value);\n } else {\n // If value is an an NgIterable, convert it to an array.\n this._dataSourceChanges.next(new ArrayDataSource(isObservable(value) ? value : Array.from(value || [])));\n }\n }\n _cdkVirtualForOf;\n /**\n * The `TrackByFunction` to use for tracking changes. The `TrackByFunction` takes the index and\n * the item and produces a value to be used as the item's identity when tracking changes.\n */\n get cdkVirtualForTrackBy() {\n return this._cdkVirtualForTrackBy;\n }\n set cdkVirtualForTrackBy(fn) {\n this._needsUpdate = true;\n this._cdkVirtualForTrackBy = fn ? (index, item) => fn(index + (this._renderedRange ? this._renderedRange.start : 0), item) : undefined;\n }\n _cdkVirtualForTrackBy;\n /** The template used to stamp out new elements. */\n set cdkVirtualForTemplate(value) {\n if (value) {\n this._needsUpdate = true;\n this._template = value;\n }\n }\n /**\n * The size of the cache used to store templates that are not being used for re-use later.\n * Setting the cache size to `0` will disable caching. Defaults to 20 templates.\n */\n get cdkVirtualForTemplateCacheSize() {\n return this._viewRepeater.viewCacheSize;\n }\n set cdkVirtualForTemplateCacheSize(size) {\n this._viewRepeater.viewCacheSize = coerceNumberProperty(size);\n }\n /** Emits whenever the data in the current DataSource changes. */\n dataStream = this._dataSourceChanges.pipe(\n // Start off with null `DataSource`.\n startWith(null),\n // Bundle up the previous and current data sources so we can work with both.\n pairwise(),\n // Use `_changeDataSource` to disconnect from the previous data source and connect to the\n // new one, passing back a stream of data changes which we run through `switchMap` to give\n // us a data stream that emits the latest data from whatever the current `DataSource` is.\n switchMap(([prev, cur]) => this._changeDataSource(prev, cur)),\n // Replay the last emitted data when someone subscribes.\n shareReplay(1));\n /** The differ used to calculate changes to the data. */\n _differ = null;\n /** The most recent data emitted from the DataSource. */\n _data;\n /** The currently rendered items. */\n _renderedItems;\n /** The currently rendered range of indices. */\n _renderedRange;\n /** Whether the rendered data should be updated during the next ngDoCheck cycle. */\n _needsUpdate = false;\n _destroyed = new Subject();\n constructor() {\n const ngZone = inject(NgZone);\n this.dataStream.subscribe(data => {\n this._data = data;\n this._onRenderedDataChange();\n });\n this._viewport.renderedRangeStream.pipe(takeUntil(this._destroyed)).subscribe(range => {\n this._renderedRange = range;\n if (this.viewChange.observers.length) {\n ngZone.run(() => this.viewChange.next(this._renderedRange));\n }\n this._onRenderedDataChange();\n });\n this._viewport.attach(this);\n }\n /**\n * Measures the combined size (width for horizontal orientation, height for vertical) of all items\n * in the specified range. Throws an error if the range includes items that are not currently\n * rendered.\n */\n measureRangeSize(range, orientation) {\n if (range.start >= range.end) {\n return 0;\n }\n if ((range.start < this._renderedRange.start || range.end > this._renderedRange.end) && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error(`Error: attempted to measure an item that isn't rendered.`);\n }\n // The index into the list of rendered views for the first item in the range.\n const renderedStartIndex = range.start - this._renderedRange.start;\n // The length of the range we're measuring.\n const rangeLen = range.end - range.start;\n // Loop over all the views, find the first and land node and compute the size by subtracting\n // the top of the first node from the bottom of the last one.\n let firstNode;\n let lastNode;\n // Find the first node by starting from the beginning and going forwards.\n for (let i = 0; i < rangeLen; i++) {\n const view = this._viewContainerRef.get(i + renderedStartIndex);\n if (view && view.rootNodes.length) {\n firstNode = lastNode = view.rootNodes[0];\n break;\n }\n }\n // Find the last node by starting from the end and going backwards.\n for (let i = rangeLen - 1; i > -1; i--) {\n const view = this._viewContainerRef.get(i + renderedStartIndex);\n if (view && view.rootNodes.length) {\n lastNode = view.rootNodes[view.rootNodes.length - 1];\n break;\n }\n }\n return firstNode && lastNode ? getOffset(orientation, 'end', lastNode) - getOffset(orientation, 'start', firstNode) : 0;\n }\n ngDoCheck() {\n if (this._differ && this._needsUpdate) {\n // TODO(mmalerba): We should differentiate needs update due to scrolling and a new portion of\n // this list being rendered (can use simpler algorithm) vs needs update due to data actually\n // changing (need to do this diff).\n const changes = this._differ.diff(this._renderedItems);\n if (!changes) {\n this._updateContext();\n } else {\n this._applyChanges(changes);\n }\n this._needsUpdate = false;\n }\n }\n ngOnDestroy() {\n this._viewport.detach();\n this._dataSourceChanges.next(undefined);\n this._dataSourceChanges.complete();\n this.viewChange.complete();\n this._destroyed.next();\n this._destroyed.complete();\n this._viewRepeater.detach();\n }\n /** React to scroll state changes in the viewport. */\n _onRenderedDataChange() {\n if (!this._renderedRange) {\n return;\n }\n this._renderedItems = this._data.slice(this._renderedRange.start, this._renderedRange.end);\n if (!this._differ) {\n // Use a wrapper function for the `trackBy` so any new values are\n // picked up automatically without having to recreate the differ.\n this._differ = this._differs.find(this._renderedItems).create((index, item) => {\n return this.cdkVirtualForTrackBy ? this.cdkVirtualForTrackBy(index, item) : item;\n });\n }\n this._needsUpdate = true;\n }\n /** Swap out one `DataSource` for another. */\n _changeDataSource(oldDs, newDs) {\n if (oldDs) {\n oldDs.disconnect(this);\n }\n this._needsUpdate = true;\n return newDs ? newDs.connect(this) : of();\n }\n /** Update the `CdkVirtualForOfContext` for all views. */\n _updateContext() {\n const count = this._data.length;\n let i = this._viewContainerRef.length;\n while (i--) {\n const view = this._viewContainerRef.get(i);\n view.context.index = this._renderedRange.start + i;\n view.context.count = count;\n this._updateComputedContextProperties(view.context);\n view.detectChanges();\n }\n }\n /** Apply changes to the DOM. */\n _applyChanges(changes) {\n this._viewRepeater.applyChanges(changes, this._viewContainerRef, (record, _adjustedPreviousIndex, currentIndex) => this._getEmbeddedViewArgs(record, currentIndex), record => record.item);\n // Update $implicit for any items that had an identity change.\n changes.forEachIdentityChange(record => {\n const view = this._viewContainerRef.get(record.currentIndex);\n view.context.$implicit = record.item;\n });\n // Update the context variables on all items.\n const count = this._data.length;\n let i = this._viewContainerRef.length;\n while (i--) {\n const view = this._viewContainerRef.get(i);\n view.context.index = this._renderedRange.start + i;\n view.context.count = count;\n this._updateComputedContextProperties(view.context);\n }\n }\n /** Update the computed properties on the `CdkVirtualForOfContext`. */\n _updateComputedContextProperties(context) {\n context.first = context.index === 0;\n context.last = context.index === context.count - 1;\n context.even = context.index % 2 === 0;\n context.odd = !context.even;\n }\n _getEmbeddedViewArgs(record, index) {\n // Note that it's important that we insert the item directly at the proper index,\n // rather than inserting it and the moving it in place, because if there's a directive\n // on the same node that injects the `ViewContainerRef`, Angular will insert another\n // comment node which can throw off the move when it's being repeated for all items.\n return {\n templateRef: this._template,\n context: {\n $implicit: record.item,\n // It's guaranteed that the iterable is not \"undefined\" or \"null\" because we only\n // generate views for elements if the \"cdkVirtualForOf\" iterable has elements.\n cdkVirtualForOf: this._cdkVirtualForOf,\n index: -1,\n count: -1,\n first: false,\n last: false,\n odd: false,\n even: false\n },\n index\n };\n }\n static ngTemplateContextGuard(directive, context) {\n return true;\n }\n static ɵfac = function CdkVirtualForOf_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkVirtualForOf)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkVirtualForOf,\n selectors: [[\"\", \"cdkVirtualFor\", \"\", \"cdkVirtualForOf\", \"\"]],\n inputs: {\n cdkVirtualForOf: \"cdkVirtualForOf\",\n cdkVirtualForTrackBy: \"cdkVirtualForTrackBy\",\n cdkVirtualForTemplate: \"cdkVirtualForTemplate\",\n cdkVirtualForTemplateCacheSize: \"cdkVirtualForTemplateCacheSize\"\n },\n features: [i0.ɵɵProvidersFeature([{\n provide: _VIEW_REPEATER_STRATEGY,\n useClass: _RecycleViewRepeaterStrategy\n }])]\n });\n }\n return CdkVirtualForOf;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Provides a virtual scrollable for the element it is attached to.\n */\nlet CdkVirtualScrollableElement = /*#__PURE__*/(() => {\n class CdkVirtualScrollableElement extends CdkVirtualScrollable {\n constructor() {\n super();\n }\n measureBoundingClientRectWithScrollOffset(from) {\n return this.getElementRef().nativeElement.getBoundingClientRect()[from] - this.measureScrollOffset(from);\n }\n static ɵfac = function CdkVirtualScrollableElement_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkVirtualScrollableElement)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkVirtualScrollableElement,\n selectors: [[\"\", \"cdkVirtualScrollingElement\", \"\"]],\n hostAttrs: [1, \"cdk-virtual-scrollable\"],\n features: [i0.ɵɵProvidersFeature([{\n provide: VIRTUAL_SCROLLABLE,\n useExisting: CdkVirtualScrollableElement\n }]), i0.ɵɵInheritDefinitionFeature]\n });\n }\n return CdkVirtualScrollableElement;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Provides as virtual scrollable for the global / window scrollbar.\n */\nlet CdkVirtualScrollableWindow = /*#__PURE__*/(() => {\n class CdkVirtualScrollableWindow extends CdkVirtualScrollable {\n constructor() {\n super();\n const document = inject(DOCUMENT);\n this.elementRef = new ElementRef(document.documentElement);\n this._scrollElement = document;\n }\n measureBoundingClientRectWithScrollOffset(from) {\n return this.getElementRef().nativeElement.getBoundingClientRect()[from];\n }\n static ɵfac = function CdkVirtualScrollableWindow_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkVirtualScrollableWindow)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkVirtualScrollableWindow,\n selectors: [[\"cdk-virtual-scroll-viewport\", \"scrollWindow\", \"\"]],\n features: [i0.ɵɵProvidersFeature([{\n provide: VIRTUAL_SCROLLABLE,\n useExisting: CdkVirtualScrollableWindow\n }]), i0.ɵɵInheritDefinitionFeature]\n });\n }\n return CdkVirtualScrollableWindow;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet CdkScrollableModule = /*#__PURE__*/(() => {\n class CdkScrollableModule {\n static ɵfac = function CdkScrollableModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkScrollableModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: CdkScrollableModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({});\n }\n return CdkScrollableModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * @docs-primary-export\n */\nlet ScrollingModule = /*#__PURE__*/(() => {\n class ScrollingModule {\n static ɵfac = function ScrollingModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || ScrollingModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: ScrollingModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n imports: [BidiModule, CdkScrollableModule, BidiModule, CdkScrollableModule]\n });\n }\n return ScrollingModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nexport { CdkScrollableModule as C, DEFAULT_SCROLL_TIME as D, FixedSizeVirtualScrollStrategy as F, ScrollDispatcher as S, ViewportRuler as V, _fixedSizeVirtualScrollStrategyFactory as _, ScrollingModule as a, CdkScrollable as b, CdkFixedSizeVirtualScroll as c, CdkVirtualForOf as d, CdkVirtualScrollViewport as e, CdkVirtualScrollableWindow as f, CdkVirtualScrollableElement as g, DEFAULT_RESIZE_TIME as h, VIRTUAL_SCROLL_STRATEGY as i, VIRTUAL_SCROLLABLE as j, CdkVirtualScrollable as k };\n","import * as i0 from '@angular/core';\nimport { inject, APP_ID, Injectable } from '@angular/core';\n\n/**\n * Keeps track of the ID count per prefix. This helps us make the IDs a bit more deterministic\n * like they were before the service was introduced. Note that ideally we wouldn't have to do\n * this, but there are some internal tests that rely on the IDs.\n */\nconst counters = {};\n/** Service that generates unique IDs for DOM nodes. */\nlet _IdGenerator = /*#__PURE__*/(() => {\n class _IdGenerator {\n _appId = inject(APP_ID);\n /**\n * Generates a unique ID with a specific prefix.\n * @param prefix Prefix to add to the ID.\n */\n getId(prefix) {\n // Omit the app ID if it's the default `ng`. Since the vast majority of pages have one\n // Angular app on them, we can reduce the amount of breakages by not adding it.\n if (this._appId !== 'ng') {\n prefix += this._appId;\n }\n if (!counters.hasOwnProperty(prefix)) {\n counters[prefix] = 0;\n }\n return `${prefix}${counters[prefix]++}`;\n }\n static ɵfac = function _IdGenerator_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || _IdGenerator)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: _IdGenerator,\n factory: _IdGenerator.ɵfac,\n providedIn: 'root'\n });\n }\n return _IdGenerator;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nexport { _IdGenerator as _ };\n","/**\n * Checks whether a modifier key is pressed.\n * @param event Event to be checked.\n */\nfunction hasModifierKey(event, ...modifiers) {\n if (modifiers.length) {\n return modifiers.some(modifier => event[modifier]);\n }\n return event.altKey || event.shiftKey || event.ctrlKey || event.metaKey;\n}\nexport { hasModifierKey as h };\n","import * as i0 from '@angular/core';\nimport { inject, NgZone, Injectable, RendererFactory2, Component, ChangeDetectionStrategy, ViewEncapsulation, untracked, afterRender, afterNextRender, ElementRef, Injector, ANIMATION_MODULE_TYPE, EnvironmentInjector, ApplicationRef, InjectionToken, Directive, EventEmitter, TemplateRef, ViewContainerRef, booleanAttribute, Input, Output, NgModule } from '@angular/core';\nimport { DOCUMENT, Location } from '@angular/common';\nimport { P as Platform } from './platform-610a08ae.mjs';\nimport { _ as _bindEventWithOptions } from './backwards-compatibility-bcbe473e.mjs';\nimport { _ as _getEventTarget } from './shadow-dom-9f403d00.mjs';\nimport { _ as _isTestEnvironment } from './test-environment-34eef1ee.mjs';\nimport { _ as _CdkPrivateStyleLoader } from './style-loader-51b80670.mjs';\nimport { Subject, Subscription, merge } from 'rxjs';\nimport { filter, takeUntil, takeWhile } from 'rxjs/operators';\nimport { c as coerceCssPixelValue } from './css-pixel-value-447bbfe8.mjs';\nimport { c as coerceArray } from './array-88e1bec3.mjs';\nimport { S as ScrollDispatcher, V as ViewportRuler, a as ScrollingModule } from './scrolling-module-aa1faac1.mjs';\nimport { s as supportsScrollBehavior } from './scrolling-61955dd1.mjs';\nimport { D as DomPortalOutlet, T as TemplatePortal, P as PortalModule } from './portal-directives-6dd242f4.mjs';\nimport { D as Directionality } from './directionality-0a678adc.mjs';\nimport { _ as _IdGenerator } from './id-generator-1959b006.mjs';\nimport { e as ESCAPE } from './keycodes-107cd3e4.mjs';\nimport { h as hasModifierKey } from './modifiers-33a5859e.mjs';\nimport { B as BidiModule } from './bidi-module-56dd006c.mjs';\nconst scrollBehaviorSupported = /*#__PURE__*/supportsScrollBehavior();\n/**\n * Strategy that will prevent the user from scrolling while the overlay is visible.\n */\nclass BlockScrollStrategy {\n _viewportRuler;\n _previousHTMLStyles = {\n top: '',\n left: ''\n };\n _previousScrollPosition;\n _isEnabled = false;\n _document;\n constructor(_viewportRuler, document) {\n this._viewportRuler = _viewportRuler;\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 _scrollDispatcher;\n _ngZone;\n _viewportRuler;\n _config;\n _scrollSubscription = null;\n _overlayRef;\n _initialScrollPosition;\n constructor(_scrollDispatcher, _ngZone, _viewportRuler, _config) {\n this._scrollDispatcher = _scrollDispatcher;\n this._ngZone = _ngZone;\n this._viewportRuler = _viewportRuler;\n this._config = _config;\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 /** Detaches the overlay ref and disables the scroll strategy. */\n _detach = () => {\n this.disable();\n if (this._overlayRef.hasAttached()) {\n this._ngZone.run(() => this._overlayRef.detach());\n }\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 _scrollDispatcher;\n _viewportRuler;\n _ngZone;\n _config;\n _scrollSubscription = null;\n _overlayRef;\n constructor(_scrollDispatcher, _viewportRuler, _ngZone, _config) {\n this._scrollDispatcher = _scrollDispatcher;\n this._viewportRuler = _viewportRuler;\n this._ngZone = _ngZone;\n this._config = _config;\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 _scrollDispatcher = inject(ScrollDispatcher);\n _viewportRuler = inject(ViewportRuler);\n _ngZone = inject(NgZone);\n _document = inject(DOCUMENT);\n constructor() {}\n /** Do nothing on scroll. */\n 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 close = config => new CloseScrollStrategy(this._scrollDispatcher, this._ngZone, this._viewportRuler, config);\n /** Block scrolling. */\n 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 reposition = config => new RepositionScrollStrategy(this._scrollDispatcher, this._viewportRuler, this._ngZone, config);\n static ɵfac = function ScrollStrategyOptions_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || ScrollStrategyOptions)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: ScrollStrategyOptions,\n factory: ScrollStrategyOptions.ɵfac,\n providedIn: 'root'\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 /** Strategy with which to position the overlay. */\n positionStrategy;\n /** Strategy to be used when handling scroll events while the overlay is open. */\n scrollStrategy = /*#__PURE__*/new NoopScrollStrategy();\n /** Custom class to add to the overlay pane. */\n panelClass = '';\n /** Whether the overlay has a backdrop. */\n hasBackdrop = false;\n /** Custom class to add to the backdrop */\n backdropClass = 'cdk-overlay-dark-backdrop';\n /** The width of the overlay panel. If a number is provided, pixel units are assumed. */\n width;\n /** The height of the overlay panel. If a number is provided, pixel units are assumed. */\n height;\n /** The min-width of the overlay panel. If a number is provided, pixel units are assumed. */\n minWidth;\n /** The min-height of the overlay panel. If a number is provided, pixel units are assumed. */\n minHeight;\n /** The max-width of the overlay panel. If a number is provided, pixel units are assumed. */\n maxWidth;\n /** The max-height of the overlay panel. If a number is provided, pixel units are assumed. */\n maxHeight;\n /**\n * Direction of the text in the overlay panel. If a `Directionality` instance\n * is passed in, the overlay will handle changes to its value automatically.\n */\n direction;\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 disposeOnNavigation = false;\n constructor(config) {\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 offsetX;\n offsetY;\n panelClass;\n /** X-axis attachment point for connected overlay origin. Can be 'start', 'end', or 'center'. */\n originX;\n /** Y-axis attachment point for connected overlay origin. Can be 'top', 'bottom', or 'center'. */\n originY;\n /** X-axis attachment point for connected overlay. Can be 'start', 'end', or 'center'. */\n overlayX;\n /** Y-axis attachment point for connected overlay. Can be 'top', 'bottom', or 'center'. */\n overlayY;\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 isOriginClipped;\n isOriginOutsideView;\n isOverlayClipped;\n isOverlayOutsideView;\n}\n/** The change event emitted by the strategy when a fallback position is used. */\nclass ConnectedOverlayPositionChange {\n connectionPair;\n scrollableViewProperties;\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 /** Currently attached overlays in the order they were attached. */\n _attachedOverlays = [];\n _document = inject(DOCUMENT);\n _isAttached;\n constructor() {}\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 ɵfac = function BaseOverlayDispatcher_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || BaseOverlayDispatcher)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: BaseOverlayDispatcher,\n factory: BaseOverlayDispatcher.ɵfac,\n providedIn: 'root'\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 _ngZone = inject(NgZone);\n _renderer = inject(RendererFactory2).createRenderer(null, null);\n _cleanupKeydown;\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 this._ngZone.runOutsideAngular(() => {\n this._cleanupKeydown = this._renderer.listen('body', '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._cleanupKeydown?.();\n this._isAttached = false;\n }\n }\n /** Keyboard event listener that will be attached to the body. */\n _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 this._ngZone.run(() => overlays[i]._keydownEvents.next(event));\n break;\n }\n }\n };\n static ɵfac = /* @__PURE__ */(() => {\n let ɵOverlayKeyboardDispatcher_BaseFactory;\n return function OverlayKeyboardDispatcher_Factory(__ngFactoryType__) {\n return (ɵOverlayKeyboardDispatcher_BaseFactory || (ɵOverlayKeyboardDispatcher_BaseFactory = i0.ɵɵgetInheritedFactory(OverlayKeyboardDispatcher)))(__ngFactoryType__ || OverlayKeyboardDispatcher);\n };\n })();\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: OverlayKeyboardDispatcher,\n factory: OverlayKeyboardDispatcher.ɵfac,\n providedIn: 'root'\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 _platform = inject(Platform);\n _ngZone = inject(NgZone);\n _renderer = inject(RendererFactory2).createRenderer(null, null);\n _cursorOriginalValue;\n _cursorStyleIsSet = false;\n _pointerDownEventTarget;\n _cleanups;\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 const eventOptions = {\n capture: true\n };\n this._cleanups = this._ngZone.runOutsideAngular(() => [_bindEventWithOptions(this._renderer, body, 'pointerdown', this._pointerDownListener, eventOptions), _bindEventWithOptions(this._renderer, body, 'click', this._clickListener, eventOptions), _bindEventWithOptions(this._renderer, body, 'auxclick', this._clickListener, eventOptions), _bindEventWithOptions(this._renderer, body, 'contextmenu', this._clickListener, eventOptions)]);\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 this._cleanups?.forEach(cleanup => cleanup());\n this._cleanups = undefined;\n if (this._platform.IOS && this._cursorStyleIsSet) {\n this._document.body.style.cursor = this._cursorOriginalValue;\n this._cursorStyleIsSet = false;\n }\n this._isAttached = false;\n }\n }\n /** Store pointerdown event target to track origin of click. */\n _pointerDownListener = event => {\n this._pointerDownEventTarget = _getEventTarget(event);\n };\n /** Click event listener that will be attached to the body propagate phase. */\n _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 (containsPierceShadowDom(overlayRef.overlayElement, target) || containsPierceShadowDom(overlayRef.overlayElement, 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 static ɵfac = /* @__PURE__ */(() => {\n let ɵOverlayOutsideClickDispatcher_BaseFactory;\n return function OverlayOutsideClickDispatcher_Factory(__ngFactoryType__) {\n return (ɵOverlayOutsideClickDispatcher_BaseFactory || (ɵOverlayOutsideClickDispatcher_BaseFactory = i0.ɵɵgetInheritedFactory(OverlayOutsideClickDispatcher)))(__ngFactoryType__ || OverlayOutsideClickDispatcher);\n };\n })();\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: OverlayOutsideClickDispatcher,\n factory: OverlayOutsideClickDispatcher.ɵfac,\n providedIn: 'root'\n });\n }\n return OverlayOutsideClickDispatcher;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** Version of `Element.contains` that transcends shadow DOM boundaries. */\nfunction containsPierceShadowDom(parent, child) {\n const supportsShadowRoot = typeof ShadowRoot !== 'undefined' && ShadowRoot;\n let current = child;\n while (current) {\n if (current === parent) {\n return true;\n }\n current = supportsShadowRoot && current instanceof ShadowRoot ? current.host : current.parentNode;\n }\n return false;\n}\nlet _CdkOverlayStyleLoader = /*#__PURE__*/(() => {\n class _CdkOverlayStyleLoader {\n static ɵfac = function _CdkOverlayStyleLoader_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || _CdkOverlayStyleLoader)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: _CdkOverlayStyleLoader,\n selectors: [[\"ng-component\"]],\n hostAttrs: [\"cdk-overlay-style-loader\", \"\"],\n decls: 0,\n vars: 0,\n template: function _CdkOverlayStyleLoader_Template(rf, ctx) {},\n styles: [\".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed}@layer cdk-overlay{.cdk-overlay-container{z-index:1000}}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute}@layer cdk-overlay{.cdk-global-overlay-wrapper{z-index:1000}}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%}@layer cdk-overlay{.cdk-overlay-pane{z-index:1000}}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0}@layer cdk-overlay{.cdk-overlay-backdrop{z-index:1000;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}@layer cdk-overlay{.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px}@layer cdk-overlay{.cdk-overlay-connected-position-bounding-box{z-index:1000}}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}\"],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return _CdkOverlayStyleLoader;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** Container inside which all overlays will render. */\nlet OverlayContainer = /*#__PURE__*/(() => {\n class OverlayContainer {\n _platform = inject(Platform);\n _containerElement;\n _document = inject(DOCUMENT);\n _styleLoader = inject(_CdkPrivateStyleLoader);\n constructor() {}\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 this._loadStyles();\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 /** Loads the structural styles necessary for the overlay to work. */\n _loadStyles() {\n this._styleLoader.load(_CdkOverlayStyleLoader);\n }\n static ɵfac = function OverlayContainer_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || OverlayContainer)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: OverlayContainer,\n factory: OverlayContainer.ɵfac,\n providedIn: 'root'\n });\n }\n return OverlayContainer;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Encapsulates the logic for attaching and detaching a backdrop. */\nclass BackdropRef {\n _renderer;\n _ngZone;\n element;\n _cleanupClick;\n _cleanupTransitionEnd;\n _fallbackTimeout;\n constructor(document, _renderer, _ngZone, onClick) {\n this._renderer = _renderer;\n this._ngZone = _ngZone;\n this.element = document.createElement('div');\n this.element.classList.add('cdk-overlay-backdrop');\n this._cleanupClick = _renderer.listen(this.element, 'click', onClick);\n }\n detach() {\n this._ngZone.runOutsideAngular(() => {\n const element = this.element;\n clearTimeout(this._fallbackTimeout);\n this._cleanupTransitionEnd?.();\n this._cleanupTransitionEnd = this._renderer.listen(element, 'transitionend', this.dispose);\n this._fallbackTimeout = setTimeout(this.dispose, 500);\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 element.style.pointerEvents = 'none';\n element.classList.remove('cdk-overlay-backdrop-showing');\n });\n }\n dispose = () => {\n clearTimeout(this._fallbackTimeout);\n this._cleanupClick?.();\n this._cleanupTransitionEnd?.();\n this._cleanupClick = this._cleanupTransitionEnd = this._fallbackTimeout = undefined;\n this.element.remove();\n };\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 _portalOutlet;\n _host;\n _pane;\n _config;\n _ngZone;\n _keyboardDispatcher;\n _document;\n _location;\n _outsideClickDispatcher;\n _animationsDisabled;\n _injector;\n _renderer;\n _backdropClick = /*#__PURE__*/new Subject();\n _attachments = /*#__PURE__*/new Subject();\n _detachments = /*#__PURE__*/new Subject();\n _positionStrategy;\n _scrollStrategy;\n _locationChanges = Subscription.EMPTY;\n _backdropRef = null;\n /**\n * Reference to the parent of the `_host` at the time it was detached. Used to restore\n * the `_host` to its original position in the DOM when it gets re-attached.\n */\n _previousHostParent;\n /** Stream of keydown events dispatched to this overlay. */\n _keydownEvents = /*#__PURE__*/new Subject();\n /** Stream of mouse outside events dispatched to this overlay. */\n _outsidePointerEvents = /*#__PURE__*/new Subject();\n _renders = /*#__PURE__*/new Subject();\n _afterRenderRef;\n /** Reference to the currently-running `afterNextRender` call. */\n _afterNextRenderRef;\n constructor(_portalOutlet, _host, _pane, _config, _ngZone, _keyboardDispatcher, _document, _location, _outsideClickDispatcher, _animationsDisabled = false, _injector, _renderer) {\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._injector = _injector;\n this._renderer = _renderer;\n if (_config.scrollStrategy) {\n this._scrollStrategy = _config.scrollStrategy;\n this._scrollStrategy.attach(this);\n }\n this._positionStrategy = _config.positionStrategy;\n // Users could open the overlay from an `effect`, in which case we need to\n // run the `afterRender` as `untracked`. We don't recommend that users do\n // this, but we also don't want to break users who are doing it.\n this._afterRenderRef = untracked(() => afterRender(() => {\n this._renders.next();\n }, {\n injector: this._injector\n }));\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._backdropRef?.element || null;\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 // We need to clean this up ourselves, because we're passing in an\n // `EnvironmentInjector` below which won't ever be destroyed.\n // Otherwise it causes some callbacks to be retained (see #29696).\n this._afterNextRenderRef?.destroy();\n // Update the position once the overlay is fully rendered before attempting to position it,\n // as the position may depend on the size of the rendered content.\n this._afterNextRenderRef = afterNextRender(() => {\n // The overlay could've been detached before the callback executed.\n if (this.hasAttached()) {\n this.updatePosition();\n }\n }, {\n injector: this._injector\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._detachContentWhenEmpty();\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._backdropRef?.dispose();\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._afterNextRenderRef?.destroy();\n this._previousHostParent = this._pane = this._host = this._backdropRef = null;\n if (isAttached) {\n this._detachments.next();\n }\n this._detachments.complete();\n this._afterRenderRef.destroy();\n this._renders.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._backdropRef?.dispose();\n this._backdropRef = new BackdropRef(this._document, this._renderer, this._ngZone, event => {\n this._backdropClick.next(event);\n });\n if (this._animationsDisabled) {\n this._backdropRef.element.classList.add('cdk-overlay-backdrop-noop-animation');\n }\n if (this._config.backdropClass) {\n this._toggleClasses(this._backdropRef.element, 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._backdropRef.element, this._host);\n // Add class to fade-in the backdrop after one frame.\n if (!this._animationsDisabled && typeof requestAnimationFrame !== 'undefined') {\n this._ngZone.runOutsideAngular(() => {\n requestAnimationFrame(() => this._backdropRef?.element.classList.add(showingClass));\n });\n } else {\n this._backdropRef.element.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 if (this._animationsDisabled) {\n this._backdropRef?.dispose();\n this._backdropRef = null;\n } else {\n this._backdropRef?.detach();\n }\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 _detachContentWhenEmpty() {\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._renders.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 scrollStrategy?.disable();\n scrollStrategy?.detach?.();\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 _viewportRuler;\n _document;\n _platform;\n _overlayContainer;\n /** The overlay to which this strategy is attached. */\n _overlayRef;\n /** Whether we're performing the very first positioning of the overlay. */\n _isInitialRender;\n /** Last size used for the bounding box. Used to avoid resizing the overlay after open. */\n _lastBoundingBoxSize = {\n width: 0,\n height: 0\n };\n /** Whether the overlay was pushed in a previous positioning. */\n _isPushed = false;\n /** Whether the overlay can be pushed on-screen on the initial open. */\n _canPush = true;\n /** Whether the overlay can grow via flexible width/height after the initial open. */\n _growAfterOpen = false;\n /** Whether the overlay's width and height can be constrained to fit within the viewport. */\n _hasFlexibleDimensions = true;\n /** Whether the overlay position is locked. */\n _positionLocked = false;\n /** Cached origin dimensions */\n _originRect;\n /** Cached overlay dimensions */\n _overlayRect;\n /** Cached viewport dimensions */\n _viewportRect;\n /** Cached container dimensions */\n _containerRect;\n /** Amount of space that must be maintained between the overlay and the edge of the viewport. */\n _viewportMargin = 0;\n /** The Scrollable containers used to check scrollable view properties on position change. */\n _scrollables = [];\n /** Ordered list of preferred positions, from most to least desirable. */\n _preferredPositions = [];\n /** The origin element against which the overlay will be positioned. */\n _origin;\n /** The overlay pane element. */\n _pane;\n /** Whether the strategy has been disposed of already. */\n _isDisposed;\n /**\n * Parent element for the overlay panel used to constrain the overlay panel's size to fit\n * within the viewport.\n */\n _boundingBox;\n /** The last position to have been calculated as the best fit position. */\n _lastPosition;\n /** The last calculated scroll visibility. Only tracked */\n _lastScrollVisibility;\n /** Subject that emits whenever the position changes. */\n _positionChanges = /*#__PURE__*/new Subject();\n /** Subscription to viewport size changes. */\n _resizeSubscription = Subscription.EMPTY;\n /** Default offset for the overlay along the x axis. */\n _offsetX = 0;\n /** Default offset for the overlay along the y axis. */\n _offsetY = 0;\n /** Selector to be used when finding the elements on which to set the transform origin. */\n _transformOriginSelector;\n /** Keeps track of the CSS classes that the position strategy has applied on the overlay panel. */\n _appliedPanelClasses = [];\n /** Amount by which the overlay was pushed in each axis during the last time it was positioned. */\n _previousPushAmount;\n /** Observable sequence of position changes. */\n positionChanges = this._positionChanges;\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 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 // 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 scrollVisibility = this._getScrollVisibility();\n // We're recalculating on scroll, but we only want to emit if anything\n // changed since downstream code might be hitting the `NgZone`.\n if (position !== this._lastPosition || !this._lastScrollVisibility || !compareScrollVisibility(this._lastScrollVisibility, scrollVisibility)) {\n const changeEvent = new ConnectedOverlayPositionChange(position, scrollVisibility);\n this._positionChanges.next(changeEvent);\n }\n this._lastScrollVisibility = scrollVisibility;\n }\n // Save the last connected position in case the position needs to be re-calculated.\n this._lastPosition = position;\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 `DOMRect`.\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 * 2;\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 DOMRect 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 `DOMRect` 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 `DOMRect` 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}\n/** Returns whether two `ScrollingVisibility` objects are identical. */\nfunction compareScrollVisibility(a, b) {\n if (a === b) {\n return true;\n }\n return a.isOriginClipped === b.isOriginClipped && a.isOriginOutsideView === b.isOriginOutsideView && a.isOverlayClipped === b.isOverlayClipped && a.isOverlayOutsideView === b.isOverlayOutsideView;\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 /** The overlay to which this strategy is attached. */\n _overlayRef;\n _cssPosition = 'static';\n _topOffset = '';\n _bottomOffset = '';\n _alignItems = '';\n _xPosition = '';\n _xOffset = '';\n _width = '';\n _height = '';\n _isDisposed = false;\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 _viewportRuler = inject(ViewportRuler);\n _document = inject(DOCUMENT);\n _platform = inject(Platform);\n _overlayContainer = inject(OverlayContainer);\n constructor() {}\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 ɵfac = function OverlayPositionBuilder_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || OverlayPositionBuilder)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: OverlayPositionBuilder,\n factory: OverlayPositionBuilder.ɵfac,\n providedIn: 'root'\n });\n }\n return OverlayPositionBuilder;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\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 scrollStrategies = inject(ScrollStrategyOptions);\n _overlayContainer = inject(OverlayContainer);\n _positionBuilder = inject(OverlayPositionBuilder);\n _keyboardDispatcher = inject(OverlayKeyboardDispatcher);\n _injector = inject(Injector);\n _ngZone = inject(NgZone);\n _document = inject(DOCUMENT);\n _directionality = inject(Directionality);\n _location = inject(Location);\n _outsideClickDispatcher = inject(OverlayOutsideClickDispatcher);\n _animationsModuleType = inject(ANIMATION_MODULE_TYPE, {\n optional: true\n });\n _idGenerator = inject(_IdGenerator);\n _renderer = inject(RendererFactory2).createRenderer(null, null);\n _appRef;\n _styleLoader = inject(_CdkPrivateStyleLoader);\n constructor() {}\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 // This is done in the overlay container as well, but we have it here\n // since it's common to mock out the overlay container in tests.\n this._styleLoader.load(_CdkOverlayStyleLoader);\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', this._injector.get(EnvironmentInjector), this._renderer);\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 = this._idGenerator.getId('cdk-overlay-');\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, null, this._appRef, this._injector, this._document);\n }\n static ɵfac = function Overlay_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || Overlay)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: Overlay,\n factory: Overlay.ɵfac,\n providedIn: 'root'\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 providedIn: 'root',\n factory: () => {\n const overlay = inject(Overlay);\n return () => overlay.scrollStrategies.reposition();\n }\n});\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 elementRef = inject(ElementRef);\n constructor() {}\n static ɵfac = function CdkOverlayOrigin_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkOverlayOrigin)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkOverlayOrigin,\n selectors: [[\"\", \"cdk-overlay-origin\", \"\"], [\"\", \"overlay-origin\", \"\"], [\"\", \"cdkOverlayOrigin\", \"\"]],\n exportAs: [\"cdkOverlayOrigin\"]\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 _overlay = inject(Overlay);\n _dir = inject(Directionality, {\n optional: true\n });\n _overlayRef;\n _templatePortal;\n _backdropSubscription = Subscription.EMPTY;\n _attachSubscription = Subscription.EMPTY;\n _detachSubscription = Subscription.EMPTY;\n _positionSubscription = Subscription.EMPTY;\n _offsetX;\n _offsetY;\n _position;\n _scrollStrategyFactory = inject(CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY);\n _disposeOnNavigation = false;\n _ngZone = inject(NgZone);\n /** Origin for the connected overlay. */\n origin;\n /** Registered connected position pairs. */\n positions;\n /**\n * This input overrides the positions input if specified. It lets users pass\n * in arbitrary positioning strategies.\n */\n positionStrategy;\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 /** The width of the overlay panel. */\n width;\n /** The height of the overlay panel. */\n height;\n /** The min width of the overlay panel. */\n minWidth;\n /** The min height of the overlay panel. */\n minHeight;\n /** The custom class to be set on the backdrop element. */\n backdropClass;\n /** The custom class to add to the overlay pane element. */\n panelClass;\n /** Margin between the overlay and the viewport edges. */\n viewportMargin = 0;\n /** Strategy to be used when handling scroll events while the overlay is open. */\n scrollStrategy;\n /** Whether the overlay is open. */\n open = false;\n /** Whether the overlay can be closed by user interaction. */\n disableClose = false;\n /** CSS selector which to set the transform origin. */\n transformOriginSelector;\n /** Whether or not the overlay should attach a backdrop. */\n hasBackdrop = false;\n /** Whether or not the overlay should be locked when scrolling. */\n lockPosition = false;\n /** Whether the overlay's width and height can be constrained to fit within the viewport. */\n flexibleDimensions = false;\n /** Whether the overlay can grow after the initial open when flexible positioning is turned on. */\n growAfterOpen = false;\n /** Whether the overlay can be pushed on-screen if none of the provided positions fit. */\n push = false;\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 /** Event emitted when the backdrop is clicked. */\n backdropClick = new EventEmitter();\n /** Event emitted when the position has changed. */\n positionChange = new EventEmitter();\n /** Event emitted when the overlay has been attached. */\n attach = new EventEmitter();\n /** Event emitted when the overlay has been detached. */\n detach = new EventEmitter();\n /** Emits when there are keyboard events that are targeted at the overlay. */\n overlayKeydown = new EventEmitter();\n /** Emits when there are mouse outside click events that are targeted at the overlay. */\n overlayOutsideClick = new EventEmitter();\n // TODO(jelbourn): inputs for size, scroll behavior, animation, etc.\n constructor() {\n const templateRef = inject(TemplateRef);\n const viewContainerRef = inject(ViewContainerRef);\n this._templatePortal = new TemplatePortal(templateRef, viewContainerRef);\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 this._overlayRef?.dispose();\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 const origin = this._getOriginElement();\n const target = _getEventTarget(event);\n if (!origin || origin !== target && !origin.contains(target)) {\n this.overlayOutsideClick.next(event);\n }\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 || 'ltr',\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._getOrigin()).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._getOrigin());\n this._updatePositionStrategy(strategy);\n return strategy;\n }\n _getOrigin() {\n if (this.origin instanceof CdkOverlayOrigin) {\n return this.origin.elementRef;\n } else {\n return this.origin;\n }\n }\n _getOriginElement() {\n if (this.origin instanceof CdkOverlayOrigin) {\n return this.origin.elementRef.nativeElement;\n }\n if (this.origin instanceof ElementRef) {\n return this.origin.nativeElement;\n }\n if (typeof Element !== 'undefined' && this.origin instanceof Element) {\n return this.origin;\n }\n return null;\n }\n /** Attaches the overlay. */\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._ngZone.run(() => this.positionChange.emit(position));\n if (this.positionChange.observers.length === 0) {\n this._positionSubscription.unsubscribe();\n }\n });\n }\n this.open = true;\n }\n /** Detaches the overlay. */\n detachOverlay() {\n this._overlayRef?.detach();\n this._backdropSubscription.unsubscribe();\n this._positionSubscription.unsubscribe();\n this.open = false;\n }\n static ɵfac = function CdkConnectedOverlay_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkConnectedOverlay)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkConnectedOverlay,\n selectors: [[\"\", \"cdk-connected-overlay\", \"\"], [\"\", \"connected-overlay\", \"\"], [\"\", \"cdkConnectedOverlay\", \"\"]],\n inputs: {\n origin: [0, \"cdkConnectedOverlayOrigin\", \"origin\"],\n positions: [0, \"cdkConnectedOverlayPositions\", \"positions\"],\n positionStrategy: [0, \"cdkConnectedOverlayPositionStrategy\", \"positionStrategy\"],\n offsetX: [0, \"cdkConnectedOverlayOffsetX\", \"offsetX\"],\n offsetY: [0, \"cdkConnectedOverlayOffsetY\", \"offsetY\"],\n width: [0, \"cdkConnectedOverlayWidth\", \"width\"],\n height: [0, \"cdkConnectedOverlayHeight\", \"height\"],\n minWidth: [0, \"cdkConnectedOverlayMinWidth\", \"minWidth\"],\n minHeight: [0, \"cdkConnectedOverlayMinHeight\", \"minHeight\"],\n backdropClass: [0, \"cdkConnectedOverlayBackdropClass\", \"backdropClass\"],\n panelClass: [0, \"cdkConnectedOverlayPanelClass\", \"panelClass\"],\n viewportMargin: [0, \"cdkConnectedOverlayViewportMargin\", \"viewportMargin\"],\n scrollStrategy: [0, \"cdkConnectedOverlayScrollStrategy\", \"scrollStrategy\"],\n open: [0, \"cdkConnectedOverlayOpen\", \"open\"],\n disableClose: [0, \"cdkConnectedOverlayDisableClose\", \"disableClose\"],\n transformOriginSelector: [0, \"cdkConnectedOverlayTransformOriginOn\", \"transformOriginSelector\"],\n hasBackdrop: [2, \"cdkConnectedOverlayHasBackdrop\", \"hasBackdrop\", booleanAttribute],\n lockPosition: [2, \"cdkConnectedOverlayLockPosition\", \"lockPosition\", booleanAttribute],\n flexibleDimensions: [2, \"cdkConnectedOverlayFlexibleDimensions\", \"flexibleDimensions\", booleanAttribute],\n growAfterOpen: [2, \"cdkConnectedOverlayGrowAfterOpen\", \"growAfterOpen\", booleanAttribute],\n push: [2, \"cdkConnectedOverlayPush\", \"push\", booleanAttribute],\n disposeOnNavigation: [2, \"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 features: [i0.ɵɵNgOnChangesFeature]\n });\n }\n return CdkConnectedOverlay;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\nfunction CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {\n return () => overlay.scrollStrategies.reposition();\n}\n/**\n * @docs-private\n * @deprecated No longer used, will be removed.\n * @breaking-change 21.0.0\n */\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 ɵfac = function OverlayModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || OverlayModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: OverlayModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n providers: [Overlay, CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER],\n imports: [BidiModule, PortalModule, ScrollingModule, ScrollingModule]\n });\n }\n return OverlayModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nexport { BlockScrollStrategy as B, CdkOverlayOrigin as C, FlexibleConnectedPositionStrategy as F, GlobalPositionStrategy as G, NoopScrollStrategy as N, OverlayRef as O, RepositionScrollStrategy as R, STANDARD_DROPDOWN_BELOW_POSITIONS as S, Overlay as a, OverlayContainer as b, OverlayConfig as c, OverlayModule as d, STANDARD_DROPDOWN_ADJACENT_POSITIONS as e, CdkConnectedOverlay as f, OverlayPositionBuilder as g, ConnectionPositionPair as h, ScrollingVisibility as i, ConnectedOverlayPositionChange as j, validateHorizontalPosition as k, ScrollStrategyOptions as l, CloseScrollStrategy as m, OverlayOutsideClickDispatcher as n, OverlayKeyboardDispatcher as o, validateVerticalPosition as v };\n","import { DOCUMENT } from '@angular/common';\nimport * as i0 from '@angular/core';\nimport { inject, ElementRef, NgZone, Renderer2, ChangeDetectorRef, Injector, afterNextRender, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, InjectionToken, TemplateRef, Injectable, NgModule } from '@angular/core';\nimport { B as BasePortalOutlet, C as CdkPortalOutlet, a as ComponentPortal, T as TemplatePortal, P as PortalModule } from './portal-directives-6dd242f4.mjs';\nfunction CdkDialogContainer_ng_template_0_Template(rf, ctx) {}\nexport { b as ɵɵCdkPortal, C as ɵɵCdkPortalOutlet, d as ɵɵPortalHostDirective, c as ɵɵTemplatePortalDirective } from './portal-directives-6dd242f4.mjs';\nimport { b as FocusTrapFactory, I as InteractivityChecker, A as A11yModule } from './a11y-module-1746e350.mjs';\nimport { O as OverlayRef, a as Overlay, b as OverlayContainer, c as OverlayConfig, d as OverlayModule } from './overlay-module-6629f4c6.mjs';\nimport { d as FocusMonitor } from './focus-monitor-fc0bdee7.mjs';\nimport { P as Platform } from './platform-610a08ae.mjs';\nimport { b as _getFocusedElementPierceShadowDom } from './shadow-dom-9f403d00.mjs';\nimport { Subject, defer, of } from 'rxjs';\nimport { e as ESCAPE } from './keycodes-107cd3e4.mjs';\nimport { h as hasModifierKey } from './modifiers-33a5859e.mjs';\nimport { startWith } from 'rxjs/operators';\nimport { _ as _IdGenerator } from './id-generator-1959b006.mjs';\nimport { D as Directionality } from './directionality-0a678adc.mjs';\nimport './style-loader-51b80670.mjs';\nimport './visually-hidden-7e8689f8.mjs';\nimport './breakpoints-observer-75147d6a.mjs';\nimport './array-88e1bec3.mjs';\nimport './observe-content-a5002af1.mjs';\nimport './element-08c51fcd.mjs';\nimport './backwards-compatibility-bcbe473e.mjs';\nimport './test-environment-34eef1ee.mjs';\nimport './css-pixel-value-447bbfe8.mjs';\nimport './scrolling-module-aa1faac1.mjs';\nimport './scrolling-61955dd1.mjs';\nimport './recycle-view-repeater-strategy-c1712813.mjs';\nimport './data-source-5320b6fd.mjs';\nimport './bidi-module-56dd006c.mjs';\nimport './fake-event-detection-7055b1bd.mjs';\nimport './passive-listeners-c0bdc49f.mjs';\n\n/** Configuration for opening a modal dialog. */\nclass DialogConfig {\n /**\n * Where the attached component should live in Angular's *logical* component tree.\n * This affects what is available for injection and the change detection order for the\n * component instantiated inside of the dialog. This does not affect where the dialog\n * content will be rendered.\n */\n viewContainerRef;\n /**\n * Injector used for the instantiation of the component to be attached. If provided,\n * takes precedence over the injector indirectly provided by `ViewContainerRef`.\n */\n injector;\n /** ID for the dialog. If omitted, a unique one will be generated. */\n id;\n /** The ARIA role of the dialog element. */\n role = 'dialog';\n /** Optional CSS class or classes applied to the overlay panel. */\n panelClass = '';\n /** Whether the dialog has a backdrop. */\n hasBackdrop = true;\n /** Optional CSS class or classes applied to the overlay backdrop. */\n backdropClass = '';\n /** Whether the dialog closes with the escape key or pointer events outside the panel element. */\n disableClose = false;\n /** Width of the dialog. */\n width = '';\n /** Height of the dialog. */\n height = '';\n /** Min-width of the dialog. If a number is provided, assumes pixel units. */\n minWidth;\n /** Min-height of the dialog. If a number is provided, assumes pixel units. */\n minHeight;\n /** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */\n maxWidth;\n /** Max-height of the dialog. If a number is provided, assumes pixel units. */\n maxHeight;\n /** Strategy to use when positioning the dialog. Defaults to centering it on the page. */\n positionStrategy;\n /** Data being injected into the child component. */\n data = null;\n /** Layout direction for the dialog's content. */\n direction;\n /** ID of the element that describes the dialog. */\n ariaDescribedBy = null;\n /** ID of the element that labels the dialog. */\n ariaLabelledBy = null;\n /** Dialog label applied via `aria-label` */\n ariaLabel = null;\n /**\n * Whether this is a modal dialog. Used to set the `aria-modal` attribute. Off by default,\n * because it can interfere with other overlay-based components (e.g. `mat-select`) and because\n * it is redundant since the dialog marks all outside content as `aria-hidden` anyway.\n */\n ariaModal = false;\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 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 restoreFocus = true;\n /**\n * Scroll strategy to be used for the dialog. This determines how\n * the dialog responds to scrolling underneath the panel element.\n */\n scrollStrategy;\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 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 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 closeOnOverlayDetachments = true;\n /**\n * Alternate `ComponentFactoryResolver` to use when resolving the associated component.\n * @deprecated No longer used. Will be removed.\n * @breaking-change 20.0.0\n */\n componentFactoryResolver;\n /**\n * Providers that will be exposed to the contents of the dialog. Can also\n * be provided as a function in order to generate the providers lazily.\n */\n providers;\n /**\n * Component into which the dialog content will be rendered. Defaults to `CdkDialogContainer`.\n * A configuration object can be passed in to customize the providers that will be exposed\n * to the dialog container.\n */\n container;\n /**\n * Context that will be passed to template-based dialogs.\n * A function can be passed in to resolve the context lazily.\n */\n templateContext;\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 _elementRef = inject(ElementRef);\n _focusTrapFactory = inject(FocusTrapFactory);\n _config;\n _interactivityChecker = inject(InteractivityChecker);\n _ngZone = inject(NgZone);\n _overlayRef = inject(OverlayRef);\n _focusMonitor = inject(FocusMonitor);\n _renderer = inject(Renderer2);\n _platform = inject(Platform);\n _document = inject(DOCUMENT, {\n optional: true\n });\n /** The portal outlet inside of this container into which the dialog content will be loaded. */\n _portalOutlet;\n /** The class that traps and manages focus within the dialog. */\n _focusTrap = null;\n /** Element that was focused before the dialog was opened. Save this to restore upon close. */\n _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 _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 _ariaLabelledByQueue = [];\n _changeDetectorRef = inject(ChangeDetectorRef);\n _injector = inject(Injector);\n _isDestroyed = false;\n constructor() {\n super();\n // Callback is primarily for some internal tests\n // that were instantiating the dialog container manually.\n this._config = inject(DialogConfig, {\n optional: true\n }) || new DialogConfig();\n if (this._config.ariaLabelledBy) {\n this._ariaLabelledByQueue.push(this._config.ariaLabelledBy);\n }\n }\n _addAriaLabelledBy(id) {\n this._ariaLabelledByQueue.push(id);\n this._changeDetectorRef.markForCheck();\n }\n _removeAriaLabelledBy(id) {\n const index = this._ariaLabelledByQueue.indexOf(id);\n if (index > -1) {\n this._ariaLabelledByQueue.splice(index, 1);\n this._changeDetectorRef.markForCheck();\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._isDestroyed = true;\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 /**\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 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 // 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 deregisterBlur();\n deregisterMousedown();\n element.removeAttribute('tabindex');\n };\n const deregisterBlur = this._renderer.listen(element, 'blur', callback);\n const deregisterMousedown = this._renderer.listen(element, '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 if (this._isDestroyed) {\n return;\n }\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 until after the next render.\n afterNextRender(() => {\n const element = this._elementRef.nativeElement;\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 const focusedSuccessfully = this._focusTrap?.focusInitialElement();\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 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 injector: this._injector\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 if (this._platform.isBrowser) {\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 }\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 ɵfac = function CdkDialogContainer_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkDialogContainer)();\n };\n static ɵ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 features: [i0.ɵɵInheritDefinitionFeature],\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: [CdkPortalOutlet],\n styles: [\".cdk-dialog-container{display:block;width:100%;height:100%;min-height:inherit;max-height:inherit}\"],\n encapsulation: 2\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 overlayRef;\n config;\n /**\n * Instance of component opened into the dialog. Will be\n * null when the dialog is opened using a `TemplateRef`.\n */\n componentInstance;\n /**\n * `ComponentRef` of the component opened into the dialog. Will be\n * null when the dialog is opened using a `TemplateRef`.\n */\n componentRef;\n /** Instance of the container that is rendering out the dialog content. */\n containerInstance;\n /** Whether the user is allowed to close the dialog. */\n disableClose;\n /** Emits when the dialog has been closed. */\n closed = /*#__PURE__*/new Subject();\n /** Emits when the backdrop of the dialog is clicked. */\n backdropClick;\n /** Emits when on keyboard events within the dialog. */\n keydownEvents;\n /** Emits on pointer events that happen outside of the dialog. */\n outsidePointerEvents;\n /** Unique ID for the dialog. */\n id;\n /** Subscription to external detachments of the dialog. */\n _detachSubscription;\n constructor(overlayRef, config) {\n this.overlayRef = overlayRef;\n this.config = config;\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};\nlet Dialog = /*#__PURE__*/(() => {\n class Dialog {\n _overlay = inject(Overlay);\n _injector = inject(Injector);\n _defaultOptions = inject(DEFAULT_DIALOG_CONFIG, {\n optional: true\n });\n _parentDialog = inject(Dialog, {\n optional: true,\n skipSelf: true\n });\n _overlayContainer = inject(OverlayContainer);\n _idGenerator = inject(_IdGenerator);\n _openDialogsAtThisLevel = [];\n _afterAllClosedAtThisLevel = new Subject();\n _afterOpenedAtThisLevel = new Subject();\n _ariaHiddenElements = new Map();\n _scrollStrategy = inject(DIALOG_SCROLL_STRATEGY);\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 /**\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 afterAllClosed = defer(() => this.openDialogs.length ? this._getAfterAllClosed() : this._getAfterAllClosed().pipe(startWith(undefined)));\n constructor() {}\n open(componentOrTemplateRef, config) {\n const defaults = this._defaultOptions || new DialogConfig();\n config = {\n ...defaults,\n ...config\n };\n config.id = config.id || this._idGenerator.getId('cdk-dialog-');\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 }));\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));\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 ɵfac = function Dialog_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || Dialog)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: Dialog,\n factory: Dialog.ɵfac,\n providedIn: 'root'\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 ɵfac = function DialogModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || DialogModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: DialogModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n providers: [Dialog],\n imports: [OverlayModule, PortalModule, A11yModule,\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 return DialogModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\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","export { _ as _isNumberValue, c as coerceElement, a as coerceNumberProperty } from './element-08c51fcd.mjs';\nexport { c as coerceArray } from './array-88e1bec3.mjs';\nexport { c as coerceCssPixelValue } from './css-pixel-value-447bbfe8.mjs';\nimport '@angular/core';\n\n/** Coerces a data-bound value (typically a string) to a boolean. */\nfunction coerceBooleanProperty(value) {\n return value != null && `${value}` !== 'false';\n}\n\n/**\n * Coerces a value to an array of trimmed non-empty strings.\n * Any input that is not an array, `null` or `undefined` will be turned into a string\n * via `toString()` and subsequently split with the given separator.\n * `null` and `undefined` will result in an empty array.\n * This results in the following outcomes:\n * - `null` -> `[]`\n * - `[null]` -> `[\"null\"]`\n * - `[\"a\", \"b \", \" \"]` -> `[\"a\", \"b\"]`\n * - `[1, [2, 3]]` -> `[\"1\", \"2,3\"]`\n * - `[{ a: 0 }]` -> `[\"[object Object]\"]`\n * - `{ a: 0 }` -> `[\"[object\", \"Object]\"]`\n *\n * Useful for defining CSS classes or table columns.\n * @param value the value to coerce into an array of strings\n * @param separator split-separator if value isn't an array\n */\nfunction coerceStringArray(value, separator = /\\s+/) {\n const result = [];\n if (value != null) {\n const sourceValues = Array.isArray(value) ? value : `${value}`.split(separator);\n for (const sourceValue of sourceValues) {\n const trimmedString = `${sourceValue}`.trim();\n if (trimmedString) {\n result.push(trimmedString);\n }\n }\n }\n return result;\n}\nexport { coerceBooleanProperty, coerceStringArray };\n","import { Subject } from 'rxjs';\nimport { tap, debounceTime, filter, map } from 'rxjs/operators';\nimport { c as A, Z, d as ZERO, N as NINE } from './keycodes-107cd3e4.mjs';\nconst DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL_MS = 200;\n/**\n * Selects items based on keyboard inputs. Implements the typeahead functionality of\n * `role=\"listbox\"` or `role=\"tree\"` and other related roles.\n */\nclass Typeahead {\n _letterKeyStream = /*#__PURE__*/new Subject();\n _items = [];\n _selectedItemIndex = -1;\n /** Buffer for the letters that the user has pressed */\n _pressedLetters = [];\n _skipPredicateFn;\n _selectedItem = /*#__PURE__*/new Subject();\n selectedItem = this._selectedItem;\n constructor(initialItems, config) {\n const typeAheadInterval = typeof config?.debounceInterval === 'number' ? config.debounceInterval : DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL_MS;\n if (config?.skipPredicate) {\n this._skipPredicateFn = config.skipPredicate;\n }\n if ((typeof ngDevMode === 'undefined' || ngDevMode) && initialItems.length && initialItems.some(item => typeof item.getLabel !== 'function')) {\n throw new Error('KeyManager items in typeahead mode must implement the `getLabel` method.');\n }\n this.setItems(initialItems);\n this._setupKeyHandler(typeAheadInterval);\n }\n destroy() {\n this._pressedLetters = [];\n this._letterKeyStream.complete();\n this._selectedItem.complete();\n }\n setCurrentSelectedItemIndex(index) {\n this._selectedItemIndex = index;\n }\n setItems(items) {\n this._items = items;\n }\n handleKey(event) {\n const keyCode = event.keyCode;\n // Attempt to use the `event.key` which also maps it to the user's keyboard language,\n // otherwise fall back to resolving alphanumeric characters via the keyCode.\n if (event.key && event.key.length === 1) {\n this._letterKeyStream.next(event.key.toLocaleUpperCase());\n } else if (keyCode >= A && keyCode <= Z || keyCode >= ZERO && keyCode <= NINE) {\n this._letterKeyStream.next(String.fromCharCode(keyCode));\n }\n }\n /** Gets whether the user is currently typing into the manager using the typeahead feature. */\n isTyping() {\n return this._pressedLetters.length > 0;\n }\n /** Resets the currently stored sequence of typed letters. */\n reset() {\n this._pressedLetters = [];\n }\n _setupKeyHandler(typeAheadInterval) {\n // Debounce the presses of non-navigational keys, collect the ones that correspond to letters\n // and convert those letters back into a string. Afterwards find the first item that starts\n // with that string and select it.\n this._letterKeyStream.pipe(tap(letter => this._pressedLetters.push(letter)), debounceTime(typeAheadInterval), filter(() => this._pressedLetters.length > 0), map(() => this._pressedLetters.join('').toLocaleUpperCase())).subscribe(inputString => {\n // Start at 1 because we want to start searching at the item immediately\n // following the current active item.\n for (let i = 1; i < this._items.length + 1; i++) {\n const index = (this._selectedItemIndex + i) % this._items.length;\n const item = this._items[index];\n if (!this._skipPredicateFn?.(item) && item.getLabel?.().toLocaleUpperCase().trim().indexOf(inputString) === 0) {\n this._selectedItem.next(item);\n break;\n }\n }\n this._pressedLetters = [];\n });\n }\n}\nexport { Typeahead as T };\n","import { signal, QueryList, isSignal, effect } from '@angular/core';\nimport { Subscription, Subject } from 'rxjs';\nimport { T as Typeahead } from './typeahead-11ae39bd.mjs';\nimport { h as hasModifierKey } from './modifiers-33a5859e.mjs';\nimport { P as PAGE_DOWN, b as PAGE_UP, E as END, H as HOME, L as LEFT_ARROW, R as RIGHT_ARROW, U as UP_ARROW, D as DOWN_ARROW, T as TAB } from './keycodes-107cd3e4.mjs';\n\n/**\n * This class manages keyboard events for selectable lists. If you pass it a query list\n * of items, it will set the active item correctly when arrow events occur.\n */\nclass ListKeyManager {\n _items;\n _activeItemIndex = -1;\n _activeItem = /*#__PURE__*/signal(null);\n _wrap = false;\n _typeaheadSubscription = Subscription.EMPTY;\n _itemChangesSubscription;\n _vertical = true;\n _horizontal;\n _allowedModifierKeys = [];\n _homeAndEnd = false;\n _pageUpAndDown = {\n enabled: false,\n delta: 10\n };\n _effectRef;\n _typeahead;\n /**\n * Predicate function that can be used to check whether an item should be skipped\n * by the key manager. By default, disabled items are skipped.\n */\n _skipPredicateFn = item => item.disabled;\n constructor(_items, injector) {\n this._items = _items;\n // We allow for the items to be an array because, in some cases, the consumer may\n // not have access to a QueryList of the items they want to manage (e.g. when the\n // items aren't being collected via `ViewChildren` or `ContentChildren`).\n if (_items instanceof QueryList) {\n this._itemChangesSubscription = _items.changes.subscribe(newItems => this._itemsChanged(newItems.toArray()));\n } else if (isSignal(_items)) {\n if (!injector && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw new Error('ListKeyManager constructed with a signal must receive an injector');\n }\n this._effectRef = effect(() => this._itemsChanged(_items()), {\n injector\n });\n }\n }\n /**\n * Stream that emits any time the TAB key is pressed, so components can react\n * when focus is shifted off of the list.\n */\n tabOut = /*#__PURE__*/new Subject();\n /** Stream that emits whenever the active item of the list manager changes. */\n change = /*#__PURE__*/new Subject();\n /**\n * Sets the predicate function that determines which items should be skipped by the\n * list key manager.\n * @param predicate Function that determines whether the given item should be skipped.\n */\n skipPredicate(predicate) {\n this._skipPredicateFn = predicate;\n return this;\n }\n /**\n * Configures wrapping mode, which determines whether the active item will wrap to\n * the other end of list when there are no more items in the given direction.\n * @param shouldWrap Whether the list should wrap when reaching the end.\n */\n withWrap(shouldWrap = true) {\n this._wrap = shouldWrap;\n return this;\n }\n /**\n * Configures whether the key manager should be able to move the selection vertically.\n * @param enabled Whether vertical selection should be enabled.\n */\n withVerticalOrientation(enabled = true) {\n this._vertical = enabled;\n return this;\n }\n /**\n * Configures the key manager to move the selection horizontally.\n * Passing in `null` will disable horizontal movement.\n * @param direction Direction in which the selection can be moved.\n */\n withHorizontalOrientation(direction) {\n this._horizontal = direction;\n return this;\n }\n /**\n * Modifier keys which are allowed to be held down and whose default actions will be prevented\n * as the user is pressing the arrow keys. Defaults to not allowing any modifier keys.\n */\n withAllowedModifierKeys(keys) {\n this._allowedModifierKeys = keys;\n return this;\n }\n /**\n * Turns on typeahead mode which allows users to set the active item by typing.\n * @param debounceInterval Time to wait after the last keystroke before setting the active item.\n */\n withTypeAhead(debounceInterval = 200) {\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n const items = this._getItemsArray();\n if (items.length > 0 && items.some(item => typeof item.getLabel !== 'function')) {\n throw Error('ListKeyManager items in typeahead mode must implement the `getLabel` method.');\n }\n }\n this._typeaheadSubscription.unsubscribe();\n const items = this._getItemsArray();\n this._typeahead = new Typeahead(items, {\n debounceInterval: typeof debounceInterval === 'number' ? debounceInterval : undefined,\n skipPredicate: item => this._skipPredicateFn(item)\n });\n this._typeaheadSubscription = this._typeahead.selectedItem.subscribe(item => {\n this.setActiveItem(item);\n });\n return this;\n }\n /** Cancels the current typeahead sequence. */\n cancelTypeahead() {\n this._typeahead?.reset();\n return this;\n }\n /**\n * Configures the key manager to activate the first and last items\n * respectively when the Home or End key is pressed.\n * @param enabled Whether pressing the Home or End key activates the first/last item.\n */\n withHomeAndEnd(enabled = true) {\n this._homeAndEnd = enabled;\n return this;\n }\n /**\n * Configures the key manager to activate every 10th, configured or first/last element in up/down direction\n * respectively when the Page-Up or Page-Down key is pressed.\n * @param enabled Whether pressing the Page-Up or Page-Down key activates the first/last item.\n * @param delta Whether pressing the Home or End key activates the first/last item.\n */\n withPageUpDown(enabled = true, delta = 10) {\n this._pageUpAndDown = {\n enabled,\n delta\n };\n return this;\n }\n setActiveItem(item) {\n const previousActiveItem = this._activeItem();\n this.updateActiveItem(item);\n if (this._activeItem() !== previousActiveItem) {\n this.change.next(this._activeItemIndex);\n }\n }\n /**\n * Sets the active item depending on the key event passed in.\n * @param event Keyboard event to be used for determining which element should be active.\n */\n onKeydown(event) {\n const keyCode = event.keyCode;\n const modifiers = ['altKey', 'ctrlKey', 'metaKey', 'shiftKey'];\n const isModifierAllowed = modifiers.every(modifier => {\n return !event[modifier] || this._allowedModifierKeys.indexOf(modifier) > -1;\n });\n switch (keyCode) {\n case TAB:\n this.tabOut.next();\n return;\n case DOWN_ARROW:\n if (this._vertical && isModifierAllowed) {\n this.setNextItemActive();\n break;\n } else {\n return;\n }\n case UP_ARROW:\n if (this._vertical && isModifierAllowed) {\n this.setPreviousItemActive();\n break;\n } else {\n return;\n }\n case RIGHT_ARROW:\n if (this._horizontal && isModifierAllowed) {\n this._horizontal === 'rtl' ? this.setPreviousItemActive() : this.setNextItemActive();\n break;\n } else {\n return;\n }\n case LEFT_ARROW:\n if (this._horizontal && isModifierAllowed) {\n this._horizontal === 'rtl' ? this.setNextItemActive() : this.setPreviousItemActive();\n break;\n } else {\n return;\n }\n case HOME:\n if (this._homeAndEnd && isModifierAllowed) {\n this.setFirstItemActive();\n break;\n } else {\n return;\n }\n case END:\n if (this._homeAndEnd && isModifierAllowed) {\n this.setLastItemActive();\n break;\n } else {\n return;\n }\n case PAGE_UP:\n if (this._pageUpAndDown.enabled && isModifierAllowed) {\n const targetIndex = this._activeItemIndex - this._pageUpAndDown.delta;\n this._setActiveItemByIndex(targetIndex > 0 ? targetIndex : 0, 1);\n break;\n } else {\n return;\n }\n case PAGE_DOWN:\n if (this._pageUpAndDown.enabled && isModifierAllowed) {\n const targetIndex = this._activeItemIndex + this._pageUpAndDown.delta;\n const itemsLength = this._getItemsArray().length;\n this._setActiveItemByIndex(targetIndex < itemsLength ? targetIndex : itemsLength - 1, -1);\n break;\n } else {\n return;\n }\n default:\n if (isModifierAllowed || hasModifierKey(event, 'shiftKey')) {\n this._typeahead?.handleKey(event);\n }\n // Note that we return here, in order to avoid preventing\n // the default action of non-navigational keys.\n return;\n }\n this._typeahead?.reset();\n event.preventDefault();\n }\n /** Index of the currently active item. */\n get activeItemIndex() {\n return this._activeItemIndex;\n }\n /** The active item. */\n get activeItem() {\n return this._activeItem();\n }\n /** Gets whether the user is currently typing into the manager using the typeahead feature. */\n isTyping() {\n return !!this._typeahead && this._typeahead.isTyping();\n }\n /** Sets the active item to the first enabled item in the list. */\n setFirstItemActive() {\n this._setActiveItemByIndex(0, 1);\n }\n /** Sets the active item to the last enabled item in the list. */\n setLastItemActive() {\n this._setActiveItemByIndex(this._getItemsArray().length - 1, -1);\n }\n /** Sets the active item to the next enabled item in the list. */\n setNextItemActive() {\n this._activeItemIndex < 0 ? this.setFirstItemActive() : this._setActiveItemByDelta(1);\n }\n /** Sets the active item to a previous enabled item in the list. */\n setPreviousItemActive() {\n this._activeItemIndex < 0 && this._wrap ? this.setLastItemActive() : this._setActiveItemByDelta(-1);\n }\n updateActiveItem(item) {\n const itemArray = this._getItemsArray();\n const index = typeof item === 'number' ? item : itemArray.indexOf(item);\n const activeItem = itemArray[index];\n // Explicitly check for `null` and `undefined` because other falsy values are valid.\n this._activeItem.set(activeItem == null ? null : activeItem);\n this._activeItemIndex = index;\n this._typeahead?.setCurrentSelectedItemIndex(index);\n }\n /** Cleans up the key manager. */\n destroy() {\n this._typeaheadSubscription.unsubscribe();\n this._itemChangesSubscription?.unsubscribe();\n this._effectRef?.destroy();\n this._typeahead?.destroy();\n this.tabOut.complete();\n this.change.complete();\n }\n /**\n * This method sets the active item, given a list of items and the delta between the\n * currently active item and the new active item. It will calculate differently\n * depending on whether wrap mode is turned on.\n */\n _setActiveItemByDelta(delta) {\n this._wrap ? this._setActiveInWrapMode(delta) : this._setActiveInDefaultMode(delta);\n }\n /**\n * Sets the active item properly given \"wrap\" mode. In other words, it will continue to move\n * down the list until it finds an item that is not disabled, and it will wrap if it\n * encounters either end of the list.\n */\n _setActiveInWrapMode(delta) {\n const items = this._getItemsArray();\n for (let i = 1; i <= items.length; i++) {\n const index = (this._activeItemIndex + delta * i + items.length) % items.length;\n const item = items[index];\n if (!this._skipPredicateFn(item)) {\n this.setActiveItem(index);\n return;\n }\n }\n }\n /**\n * Sets the active item properly given the default mode. In other words, it will\n * continue to move down the list until it finds an item that is not disabled. If\n * it encounters either end of the list, it will stop and not wrap.\n */\n _setActiveInDefaultMode(delta) {\n this._setActiveItemByIndex(this._activeItemIndex + delta, delta);\n }\n /**\n * Sets the active item to the first enabled item starting at the index specified. If the\n * item is disabled, it will move in the fallbackDelta direction until it either\n * finds an enabled item or encounters the end of the list.\n */\n _setActiveItemByIndex(index, fallbackDelta) {\n const items = this._getItemsArray();\n if (!items[index]) {\n return;\n }\n while (this._skipPredicateFn(items[index])) {\n index += fallbackDelta;\n if (!items[index]) {\n return;\n }\n }\n this.setActiveItem(index);\n }\n /** Returns the items as an array. */\n _getItemsArray() {\n if (isSignal(this._items)) {\n return this._items();\n }\n return this._items instanceof QueryList ? this._items.toArray() : this._items;\n }\n /** Callback for when the items have changed. */\n _itemsChanged(newItems) {\n this._typeahead?.setItems(newItems);\n const activeItem = this._activeItem();\n if (activeItem) {\n const newIndex = newItems.indexOf(activeItem);\n if (newIndex > -1 && newIndex !== this._activeItemIndex) {\n this._activeItemIndex = newIndex;\n this._typeahead?.setCurrentSelectedItemIndex(newIndex);\n }\n }\n }\n}\nexport { ListKeyManager as L };\n","import { L as ListKeyManager } from './list-key-manager-c7b5cefb.mjs';\nclass ActiveDescendantKeyManager extends ListKeyManager {\n setActiveItem(index) {\n if (this.activeItem) {\n this.activeItem.setInactiveStyles();\n }\n super.setActiveItem(index);\n if (this.activeItem) {\n this.activeItem.setActiveStyles();\n }\n }\n}\nexport { ActiveDescendantKeyManager as A };\n","import { L as ListKeyManager } from './list-key-manager-c7b5cefb.mjs';\nclass FocusKeyManager extends ListKeyManager {\n _origin = 'program';\n /**\n * Sets the focus origin that will be passed in to the items for any subsequent `focus` calls.\n * @param origin Focus origin to be used when focusing items.\n */\n setFocusOrigin(origin) {\n this._origin = origin;\n return this;\n }\n setActiveItem(item) {\n super.setActiveItem(item);\n if (this.activeItem) {\n this.activeItem.focus(this._origin);\n }\n }\n}\nexport { FocusKeyManager as F };\n","export { C as CdkMonitorFocus, c as FOCUS_MONITOR_DEFAULT_OPTIONS, d as FocusMonitor, F as FocusMonitorDetectionMode, a as INPUT_MODALITY_DETECTOR_DEFAULT_OPTIONS, b as INPUT_MODALITY_DETECTOR_OPTIONS, I as InputModalityDetector } from './focus-monitor-fc0bdee7.mjs';\nimport { F as FocusTrap, I as InteractivityChecker } from './a11y-module-1746e350.mjs';\nexport { A as A11yModule, d as CdkAriaLive, C as CdkTrapFocus, F as FocusTrap, b as FocusTrapFactory, a as HighContrastMode, H as HighContrastModeDetector, I as InteractivityChecker, c as IsFocusableConfig, g as LIVE_ANNOUNCER_DEFAULT_OPTIONS, e as LIVE_ANNOUNCER_ELEMENT_TOKEN, f as LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY, L as LiveAnnouncer } from './a11y-module-1746e350.mjs';\nexport { _ as _IdGenerator } from './id-generator-1959b006.mjs';\nimport { DOCUMENT } from '@angular/common';\nimport * as i0 from '@angular/core';\nimport { inject, APP_ID, Injectable, InjectionToken, NgZone, Injector } from '@angular/core';\nimport { P as Platform } from './platform-610a08ae.mjs';\nimport { _ as _CdkPrivateStyleLoader } from './style-loader-51b80670.mjs';\nimport { _ as _VisuallyHiddenLoader } from './visually-hidden-7e8689f8.mjs';\nexport { A as ActiveDescendantKeyManager } from './activedescendant-key-manager-1351a9d3.mjs';\nexport { F as FocusKeyManager } from './focus-key-manager-58d29acd.mjs';\nexport { L as ListKeyManager } from './list-key-manager-c7b5cefb.mjs';\nimport { Subject } from 'rxjs';\nimport { T as TREE_KEY_MANAGER } from './tree-key-manager-2f20c79c.mjs';\nexport { T as TREE_KEY_MANAGER, b as TREE_KEY_MANAGER_FACTORY, c as TREE_KEY_MANAGER_FACTORY_PROVIDER, a as TreeKeyManager } from './tree-key-manager-2f20c79c.mjs';\nexport { i as isFakeMousedownFromScreenReader, a as isFakeTouchstartFromScreenReader } from './fake-event-detection-7055b1bd.mjs';\nimport 'rxjs/operators';\nimport './keycodes-107cd3e4.mjs';\nimport './shadow-dom-9f403d00.mjs';\nimport './backwards-compatibility-bcbe473e.mjs';\nimport './passive-listeners-c0bdc49f.mjs';\nimport './element-08c51fcd.mjs';\nimport './breakpoints-observer-75147d6a.mjs';\nimport './array-88e1bec3.mjs';\nimport './observe-content-a5002af1.mjs';\nimport './typeahead-11ae39bd.mjs';\nimport './modifiers-33a5859e.mjs';\nimport './observable-97c0792c.mjs';\n\n/** IDs are delimited by an empty space, as per the spec. */\nconst ID_DELIMITER = ' ';\n/**\n * Adds the given ID to the specified ARIA attribute on an element.\n * Used for attributes such as aria-labelledby, aria-owns, etc.\n */\nfunction addAriaReferencedId(el, attr, id) {\n const ids = getAriaReferenceIds(el, attr);\n id = id.trim();\n if (ids.some(existingId => existingId.trim() === id)) {\n return;\n }\n ids.push(id);\n el.setAttribute(attr, ids.join(ID_DELIMITER));\n}\n/**\n * Removes the given ID from the specified ARIA attribute on an element.\n * Used for attributes such as aria-labelledby, aria-owns, etc.\n */\nfunction removeAriaReferencedId(el, attr, id) {\n const ids = getAriaReferenceIds(el, attr);\n id = id.trim();\n const filteredIds = ids.filter(val => val !== id);\n if (filteredIds.length) {\n el.setAttribute(attr, filteredIds.join(ID_DELIMITER));\n } else {\n el.removeAttribute(attr);\n }\n}\n/**\n * Gets the list of IDs referenced by the given ARIA attribute on an element.\n * Used for attributes such as aria-labelledby, aria-owns, etc.\n */\nfunction getAriaReferenceIds(el, attr) {\n // Get string array of all individual ids (whitespace delimited) in the attribute value\n const attrValue = el.getAttribute(attr);\n return attrValue?.match(/\\S+/g) ?? [];\n}\n\n/**\n * ID used for the body container where all messages are appended.\n * @deprecated No longer being used. To be removed.\n * @breaking-change 14.0.0\n */\nconst MESSAGES_CONTAINER_ID = 'cdk-describedby-message-container';\n/**\n * ID prefix used for each created message element.\n * @deprecated To be turned into a private variable.\n * @breaking-change 14.0.0\n */\nconst CDK_DESCRIBEDBY_ID_PREFIX = 'cdk-describedby-message';\n/**\n * Attribute given to each host element that is described by a message element.\n * @deprecated To be turned into a private variable.\n * @breaking-change 14.0.0\n */\nconst CDK_DESCRIBEDBY_HOST_ATTRIBUTE = 'cdk-describedby-host';\n/** Global incremental identifier for each registered message element. */\nlet nextId = 0;\n/**\n * Utility that creates visually hidden elements with a message content. Useful for elements that\n * want to use aria-describedby to further describe themselves without adding additional visual\n * content.\n */\nlet AriaDescriber = /*#__PURE__*/(() => {\n class AriaDescriber {\n _platform = inject(Platform);\n _document = inject(DOCUMENT);\n /** Map of all registered message elements that have been placed into the document. */\n _messageRegistry = new Map();\n /** Container for all registered messages. */\n _messagesContainer = null;\n /** Unique ID for the service. */\n _id = `${nextId++}`;\n constructor() {\n inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);\n this._id = inject(APP_ID) + '-' + nextId++;\n }\n describe(hostElement, message, role) {\n if (!this._canBeDescribed(hostElement, message)) {\n return;\n }\n const key = getKey(message, role);\n if (typeof message !== 'string') {\n // We need to ensure that the element has an ID.\n setMessageId(message, this._id);\n this._messageRegistry.set(key, {\n messageElement: message,\n referenceCount: 0\n });\n } else if (!this._messageRegistry.has(key)) {\n this._createMessageElement(message, role);\n }\n if (!this._isElementDescribedByMessage(hostElement, key)) {\n this._addMessageReference(hostElement, key);\n }\n }\n removeDescription(hostElement, message, role) {\n if (!message || !this._isElementNode(hostElement)) {\n return;\n }\n const key = getKey(message, role);\n if (this._isElementDescribedByMessage(hostElement, key)) {\n this._removeMessageReference(hostElement, key);\n }\n // If the message is a string, it means that it's one that we created for the\n // consumer so we can remove it safely, otherwise we should leave it in place.\n if (typeof message === 'string') {\n const registeredMessage = this._messageRegistry.get(key);\n if (registeredMessage && registeredMessage.referenceCount === 0) {\n this._deleteMessageElement(key);\n }\n }\n if (this._messagesContainer?.childNodes.length === 0) {\n this._messagesContainer.remove();\n this._messagesContainer = null;\n }\n }\n /** Unregisters all created message elements and removes the message container. */\n ngOnDestroy() {\n const describedElements = this._document.querySelectorAll(`[${CDK_DESCRIBEDBY_HOST_ATTRIBUTE}=\"${this._id}\"]`);\n for (let i = 0; i < describedElements.length; i++) {\n this._removeCdkDescribedByReferenceIds(describedElements[i]);\n describedElements[i].removeAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE);\n }\n this._messagesContainer?.remove();\n this._messagesContainer = null;\n this._messageRegistry.clear();\n }\n /**\n * Creates a new element in the visually hidden message container element with the message\n * as its content and adds it to the message registry.\n */\n _createMessageElement(message, role) {\n const messageElement = this._document.createElement('div');\n setMessageId(messageElement, this._id);\n messageElement.textContent = message;\n if (role) {\n messageElement.setAttribute('role', role);\n }\n this._createMessagesContainer();\n this._messagesContainer.appendChild(messageElement);\n this._messageRegistry.set(getKey(message, role), {\n messageElement,\n referenceCount: 0\n });\n }\n /** Deletes the message element from the global messages container. */\n _deleteMessageElement(key) {\n this._messageRegistry.get(key)?.messageElement?.remove();\n this._messageRegistry.delete(key);\n }\n /** Creates the global container for all aria-describedby messages. */\n _createMessagesContainer() {\n if (this._messagesContainer) {\n return;\n }\n const containerClassName = 'cdk-describedby-message-container';\n const serverContainers = this._document.querySelectorAll(`.${containerClassName}[platform=\"server\"]`);\n for (let i = 0; i < serverContainers.length; i++) {\n // When going from the server to the client, we may end up in a situation where there's\n // already a container on the page, but we don't have a reference to it. Clear the\n // old container so we don't get duplicates. Doing this, instead of emptying the previous\n // container, should be slightly faster.\n serverContainers[i].remove();\n }\n const messagesContainer = this._document.createElement('div');\n // We add `visibility: hidden` in order to prevent text in this container from\n // being searchable by the browser's Ctrl + F functionality.\n // Screen-readers will still read the description for elements with aria-describedby even\n // when the description element is not visible.\n messagesContainer.style.visibility = 'hidden';\n // Even though we use `visibility: hidden`, we still apply `cdk-visually-hidden` so that\n // the description element doesn't impact page layout.\n messagesContainer.classList.add(containerClassName);\n messagesContainer.classList.add('cdk-visually-hidden');\n if (!this._platform.isBrowser) {\n messagesContainer.setAttribute('platform', 'server');\n }\n this._document.body.appendChild(messagesContainer);\n this._messagesContainer = messagesContainer;\n }\n /** Removes all cdk-describedby messages that are hosted through the element. */\n _removeCdkDescribedByReferenceIds(element) {\n // Remove all aria-describedby reference IDs that are prefixed by CDK_DESCRIBEDBY_ID_PREFIX\n const originalReferenceIds = getAriaReferenceIds(element, 'aria-describedby').filter(id => id.indexOf(CDK_DESCRIBEDBY_ID_PREFIX) != 0);\n element.setAttribute('aria-describedby', originalReferenceIds.join(' '));\n }\n /**\n * Adds a message reference to the element using aria-describedby and increments the registered\n * message's reference count.\n */\n _addMessageReference(element, key) {\n const registeredMessage = this._messageRegistry.get(key);\n // Add the aria-describedby reference and set the\n // describedby_host attribute to mark the element.\n addAriaReferencedId(element, 'aria-describedby', registeredMessage.messageElement.id);\n element.setAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE, this._id);\n registeredMessage.referenceCount++;\n }\n /**\n * Removes a message reference from the element using aria-describedby\n * and decrements the registered message's reference count.\n */\n _removeMessageReference(element, key) {\n const registeredMessage = this._messageRegistry.get(key);\n registeredMessage.referenceCount--;\n removeAriaReferencedId(element, 'aria-describedby', registeredMessage.messageElement.id);\n element.removeAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE);\n }\n /** Returns true if the element has been described by the provided message ID. */\n _isElementDescribedByMessage(element, key) {\n const referenceIds = getAriaReferenceIds(element, 'aria-describedby');\n const registeredMessage = this._messageRegistry.get(key);\n const messageId = registeredMessage && registeredMessage.messageElement.id;\n return !!messageId && referenceIds.indexOf(messageId) != -1;\n }\n /** Determines whether a message can be described on a particular element. */\n _canBeDescribed(element, message) {\n if (!this._isElementNode(element)) {\n return false;\n }\n if (message && typeof message === 'object') {\n // We'd have to make some assumptions about the description element's text, if the consumer\n // passed in an element. Assume that if an element is passed in, the consumer has verified\n // that it can be used as a description.\n return true;\n }\n const trimmedMessage = message == null ? '' : `${message}`.trim();\n const ariaLabel = element.getAttribute('aria-label');\n // We shouldn't set descriptions if they're exactly the same as the `aria-label` of the\n // element, because screen readers will end up reading out the same text twice in a row.\n return trimmedMessage ? !ariaLabel || ariaLabel.trim() !== trimmedMessage : false;\n }\n /** Checks whether a node is an Element node. */\n _isElementNode(element) {\n return element.nodeType === this._document.ELEMENT_NODE;\n }\n static ɵfac = function AriaDescriber_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || AriaDescriber)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: AriaDescriber,\n factory: AriaDescriber.ɵfac,\n providedIn: 'root'\n });\n }\n return AriaDescriber;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** Gets a key that can be used to look messages up in the registry. */\nfunction getKey(message, role) {\n return typeof message === 'string' ? `${role || ''}/${message}` : message;\n}\n/** Assigns a unique ID to an element, if it doesn't have one already. */\nfunction setMessageId(element, serviceId) {\n if (!element.id) {\n element.id = `${CDK_DESCRIBEDBY_ID_PREFIX}-${serviceId}-${nextId++}`;\n }\n}\n\n// NoopTreeKeyManager is a \"noop\" implementation of TreeKeyMangerStrategy. Methods are noops. Does\n// not emit to streams.\n//\n// Used for applications built before TreeKeyManager to opt-out of TreeKeyManager and revert to\n// legacy behavior.\n/**\n * @docs-private\n *\n * Opt-out of Tree of key manager behavior.\n *\n * When provided, Tree has same focus management behavior as before TreeKeyManager was introduced.\n * - Tree does not respond to keyboard interaction\n * - Tree node allows tabindex to be set by Input binding\n * - Tree node allows tabindex to be set by attribute binding\n *\n * @deprecated NoopTreeKeyManager deprecated. Use TreeKeyManager or inject a\n * TreeKeyManagerStrategy instead. To be removed in a future version.\n *\n * @breaking-change 21.0.0\n */\nclass NoopTreeKeyManager {\n _isNoopTreeKeyManager = true;\n // Provide change as required by TreeKeyManagerStrategy. NoopTreeKeyManager is a \"noop\"\n // implementation that does not emit to streams.\n change = /*#__PURE__*/new Subject();\n destroy() {\n this.change.complete();\n }\n onKeydown() {\n // noop\n }\n getActiveItemIndex() {\n // Always return null. NoopTreeKeyManager is a \"noop\" implementation that does not maintain\n // the active item.\n return null;\n }\n getActiveItem() {\n // Always return null. NoopTreeKeyManager is a \"noop\" implementation that does not maintain\n // the active item.\n return null;\n }\n focusItem() {\n // noop\n }\n}\n/**\n * @docs-private\n *\n * Opt-out of Tree of key manager behavior.\n *\n * When provided, Tree has same focus management behavior as before TreeKeyManager was introduced.\n * - Tree does not respond to keyboard interaction\n * - Tree node allows tabindex to be set by Input binding\n * - Tree node allows tabindex to be set by attribute binding\n *\n * @deprecated NoopTreeKeyManager deprecated. Use TreeKeyManager or inject a\n * TreeKeyManagerStrategy instead. To be removed in a future version.\n *\n * @breaking-change 21.0.0\n */\nfunction NOOP_TREE_KEY_MANAGER_FACTORY() {\n return () => new NoopTreeKeyManager();\n}\n/**\n * @docs-private\n *\n * Opt-out of Tree of key manager behavior.\n *\n * When provided, Tree has same focus management behavior as before TreeKeyManager was introduced.\n * - Tree does not respond to keyboard interaction\n * - Tree node allows tabindex to be set by Input binding\n * - Tree node allows tabindex to be set by attribute binding\n *\n * @deprecated NoopTreeKeyManager deprecated. Use TreeKeyManager or inject a\n * TreeKeyManagerStrategy instead. To be removed in a future version.\n *\n * @breaking-change 21.0.0\n */\nconst NOOP_TREE_KEY_MANAGER_FACTORY_PROVIDER = {\n provide: TREE_KEY_MANAGER,\n useFactory: NOOP_TREE_KEY_MANAGER_FACTORY\n};\n\n/**\n * Class that allows for trapping focus within a DOM element.\n *\n * This class uses a strategy pattern that determines how it traps focus.\n * See FocusTrapInertStrategy.\n */\nclass ConfigurableFocusTrap extends FocusTrap {\n _focusTrapManager;\n _inertStrategy;\n /** Whether the FocusTrap is enabled. */\n get enabled() {\n return this._enabled;\n }\n set enabled(value) {\n this._enabled = value;\n if (this._enabled) {\n this._focusTrapManager.register(this);\n } else {\n this._focusTrapManager.deregister(this);\n }\n }\n constructor(_element, _checker, _ngZone, _document, _focusTrapManager, _inertStrategy, config, injector) {\n super(_element, _checker, _ngZone, _document, config.defer, injector);\n this._focusTrapManager = _focusTrapManager;\n this._inertStrategy = _inertStrategy;\n this._focusTrapManager.register(this);\n }\n /** Notifies the FocusTrapManager that this FocusTrap will be destroyed. */\n destroy() {\n this._focusTrapManager.deregister(this);\n super.destroy();\n }\n /** @docs-private Implemented as part of ManagedFocusTrap. */\n _enable() {\n this._inertStrategy.preventFocus(this);\n this.toggleAnchors(true);\n }\n /** @docs-private Implemented as part of ManagedFocusTrap. */\n _disable() {\n this._inertStrategy.allowFocus(this);\n this.toggleAnchors(false);\n }\n}\n\n/**\n * Lightweight FocusTrapInertStrategy that adds a document focus event\n * listener to redirect focus back inside the FocusTrap.\n */\nclass EventListenerFocusTrapInertStrategy {\n /** Focus event handler. */\n _listener = null;\n /** Adds a document event listener that keeps focus inside the FocusTrap. */\n preventFocus(focusTrap) {\n // Ensure there's only one listener per document\n if (this._listener) {\n focusTrap._document.removeEventListener('focus', this._listener, true);\n }\n this._listener = e => this._trapFocus(focusTrap, e);\n focusTrap._ngZone.runOutsideAngular(() => {\n focusTrap._document.addEventListener('focus', this._listener, true);\n });\n }\n /** Removes the event listener added in preventFocus. */\n allowFocus(focusTrap) {\n if (!this._listener) {\n return;\n }\n focusTrap._document.removeEventListener('focus', this._listener, true);\n this._listener = null;\n }\n /**\n * Refocuses the first element in the FocusTrap if the focus event target was outside\n * the FocusTrap.\n *\n * This is an event listener callback. The event listener is added in runOutsideAngular,\n * so all this code runs outside Angular as well.\n */\n _trapFocus(focusTrap, event) {\n const target = event.target;\n const focusTrapRoot = focusTrap._element;\n // Don't refocus if target was in an overlay, because the overlay might be associated\n // with an element inside the FocusTrap, ex. mat-select.\n if (target && !focusTrapRoot.contains(target) && !target.closest?.('div.cdk-overlay-pane')) {\n // Some legacy FocusTrap usages have logic that focuses some element on the page\n // just before FocusTrap is destroyed. For backwards compatibility, wait\n // to be sure FocusTrap is still enabled before refocusing.\n setTimeout(() => {\n // Check whether focus wasn't put back into the focus trap while the timeout was pending.\n if (focusTrap.enabled && !focusTrapRoot.contains(focusTrap._document.activeElement)) {\n focusTrap.focusFirstTabbableElement();\n }\n });\n }\n }\n}\n\n/** The injection token used to specify the inert strategy. */\nconst FOCUS_TRAP_INERT_STRATEGY = /*#__PURE__*/new InjectionToken('FOCUS_TRAP_INERT_STRATEGY');\n\n/** Injectable that ensures only the most recently enabled FocusTrap is active. */\nlet FocusTrapManager = /*#__PURE__*/(() => {\n class FocusTrapManager {\n // A stack of the FocusTraps on the page. Only the FocusTrap at the\n // top of the stack is active.\n _focusTrapStack = [];\n /**\n * Disables the FocusTrap at the top of the stack, and then pushes\n * the new FocusTrap onto the stack.\n */\n register(focusTrap) {\n // Dedupe focusTraps that register multiple times.\n this._focusTrapStack = this._focusTrapStack.filter(ft => ft !== focusTrap);\n let stack = this._focusTrapStack;\n if (stack.length) {\n stack[stack.length - 1]._disable();\n }\n stack.push(focusTrap);\n focusTrap._enable();\n }\n /**\n * Removes the FocusTrap from the stack, and activates the\n * FocusTrap that is the new top of the stack.\n */\n deregister(focusTrap) {\n focusTrap._disable();\n const stack = this._focusTrapStack;\n const i = stack.indexOf(focusTrap);\n if (i !== -1) {\n stack.splice(i, 1);\n if (stack.length) {\n stack[stack.length - 1]._enable();\n }\n }\n }\n static ɵfac = function FocusTrapManager_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || FocusTrapManager)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: FocusTrapManager,\n factory: FocusTrapManager.ɵfac,\n providedIn: 'root'\n });\n }\n return FocusTrapManager;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Factory that allows easy instantiation of configurable focus traps. */\nlet ConfigurableFocusTrapFactory = /*#__PURE__*/(() => {\n class ConfigurableFocusTrapFactory {\n _checker = inject(InteractivityChecker);\n _ngZone = inject(NgZone);\n _focusTrapManager = inject(FocusTrapManager);\n _document = inject(DOCUMENT);\n _inertStrategy;\n _injector = inject(Injector);\n constructor() {\n const inertStrategy = inject(FOCUS_TRAP_INERT_STRATEGY, {\n optional: true\n });\n // TODO split up the strategies into different modules, similar to DateAdapter.\n this._inertStrategy = inertStrategy || new EventListenerFocusTrapInertStrategy();\n }\n create(element, config = {\n defer: false\n }) {\n let configObject;\n if (typeof config === 'boolean') {\n configObject = {\n defer: config\n };\n } else {\n configObject = config;\n }\n return new ConfigurableFocusTrap(element, this._checker, this._ngZone, this._document, this._focusTrapManager, this._inertStrategy, configObject, this._injector);\n }\n static ɵfac = function ConfigurableFocusTrapFactory_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || ConfigurableFocusTrapFactory)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: ConfigurableFocusTrapFactory,\n factory: ConfigurableFocusTrapFactory.ɵfac,\n providedIn: 'root'\n });\n }\n return ConfigurableFocusTrapFactory;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nexport { AriaDescriber, CDK_DESCRIBEDBY_HOST_ATTRIBUTE, CDK_DESCRIBEDBY_ID_PREFIX, ConfigurableFocusTrap, ConfigurableFocusTrapFactory, EventListenerFocusTrapInertStrategy, FOCUS_TRAP_INERT_STRATEGY, MESSAGES_CONTAINER_ID, NOOP_TREE_KEY_MANAGER_FACTORY, NOOP_TREE_KEY_MANAGER_FACTORY_PROVIDER, NoopTreeKeyManager, addAriaReferencedId, getAriaReferenceIds, removeAriaReferencedId };\n","import { HighContrastModeDetector } from '@angular/cdk/a11y';\nimport { BidiModule } from '@angular/cdk/bidi';\nimport * as i0 from '@angular/core';\nimport { InjectionToken, inject, NgModule } from '@angular/core';\n\n/**\n * Injection token that configures whether the Material sanity checks are enabled.\n * @deprecated No longer used and will be removed.\n * @breaking-change 21.0.0\n */\nconst MATERIAL_SANITY_CHECKS = /*#__PURE__*/new InjectionToken('mat-sanity-checks', {\n providedIn: 'root',\n factory: () => true\n});\n/**\n * Module that captures anything that should be loaded and/or run for *all* Angular Material\n * components. This includes Bidi, etc.\n *\n * This module should be imported to each top-level component module (e.g., MatTabsModule).\n * @deprecated No longer used and will be removed.\n * @breaking-change 21.0.0\n */\nlet MatCommonModule = /*#__PURE__*/(() => {\n class MatCommonModule {\n constructor() {\n // While A11yModule also does this, we repeat it here to avoid importing A11yModule\n // in MatCommonModule.\n inject(HighContrastModeDetector)._applyBodyHighContrastModeCssClasses();\n }\n static ɵfac = function MatCommonModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatCommonModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: MatCommonModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n imports: [BidiModule, BidiModule]\n });\n }\n return MatCommonModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nexport { MatCommonModule as M, MATERIAL_SANITY_CHECKS as a };\n","import { CdkDialogContainer, Dialog, DialogConfig, DialogModule } from '@angular/cdk/dialog';\nimport { Overlay, OverlayModule } from '@angular/cdk/overlay';\nimport { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';\nimport * as i0 from '@angular/core';\nimport { inject, ANIMATION_MODULE_TYPE, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Injectable, ElementRef, Directive, Input, NgModule } from '@angular/core';\nimport { coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Subject, merge, defer } from 'rxjs';\nimport { filter, take, startWith } from 'rxjs/operators';\nimport { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';\nimport { _IdGenerator } from '@angular/cdk/a11y';\nimport * as i1 from '@angular/cdk/scrolling';\nimport { CdkScrollable } from '@angular/cdk/scrolling';\nimport { M as MatCommonModule } from './common-module-a39ee957.mjs';\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 /**\n * Where the attached component should live in Angular's *logical* component tree.\n * This affects what is available for injection and the change detection order for the\n * component instantiated inside of the dialog. This does not affect where the dialog\n * content will be rendered.\n */\n viewContainerRef;\n /**\n * Injector used for the instantiation of the component to be attached. If provided,\n * takes precedence over the injector indirectly provided by `ViewContainerRef`.\n */\n injector;\n /** ID for the dialog. If omitted, a unique one will be generated. */\n id;\n /** The ARIA role of the dialog element. */\n role = 'dialog';\n /** Custom class for the overlay pane. */\n panelClass = '';\n /** Whether the dialog has a backdrop. */\n hasBackdrop = true;\n /** Custom class for the backdrop. */\n backdropClass = '';\n /** Whether the user can use escape or clicking on the backdrop to close the modal. */\n disableClose = false;\n /** Width of the dialog. */\n width = '';\n /** Height of the dialog. */\n height = '';\n /** Min-width of the dialog. If a number is provided, assumes pixel units. */\n minWidth;\n /** Min-height of the dialog. If a number is provided, assumes pixel units. */\n minHeight;\n /** Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. */\n maxWidth;\n /** Max-height of the dialog. If a number is provided, assumes pixel units. */\n maxHeight;\n /** Position overrides. */\n position;\n /** Data being injected into the child component. */\n data = null;\n /** Layout direction for the dialog's content. */\n direction;\n /** ID of the element that describes the dialog. */\n ariaDescribedBy = null;\n /** ID of the element that labels the dialog. */\n ariaLabelledBy = null;\n /** Aria label to assign to the dialog element. */\n ariaLabel = null;\n /**\n * Whether this is a modal dialog. Used to set the `aria-modal` attribute. Off by default,\n * because it can interfere with other overlay-based components (e.g. `mat-select`) and because\n * it is redundant since the dialog marks all outside content as `aria-hidden` anyway.\n */\n ariaModal = false;\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 autoFocus = 'first-tabbable';\n /**\n * Whether the dialog should restore focus to the\n * previously-focused element, after it's closed.\n */\n restoreFocus = true;\n /** Whether to wait for the opening animation to finish before trapping focus. */\n delayFocusTrap = true;\n /** Scroll strategy to be used for the dialog. */\n scrollStrategy;\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 closeOnNavigation = true;\n /**\n * Alternate `ComponentFactoryResolver` to use when resolving the associated component.\n * @deprecated No longer used. Will be removed.\n * @breaking-change 20.0.0\n */\n componentFactoryResolver;\n /**\n * Duration of the enter animation in ms.\n * Should be a number, string type is deprecated.\n * @breaking-change 17.0.0 Remove string signature.\n */\n enterAnimationDuration;\n /**\n * Duration of the exit animation in ms.\n * Should be a number, string type is deprecated.\n * @breaking-change 17.0.0 Remove string signature.\n */\n exitAnimationDuration;\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;\nlet MatDialogContainer = /*#__PURE__*/(() => {\n class MatDialogContainer extends CdkDialogContainer {\n _animationMode = inject(ANIMATION_MODULE_TYPE, {\n optional: true\n });\n /** Emits when an animation state changes. */\n _animationStateChanged = new EventEmitter();\n /** Whether animations are enabled. */\n _animationsEnabled = this._animationMode !== 'NoopAnimations';\n /** Number of actions projected in the dialog. */\n _actionSectionCount = 0;\n /** Host element of the dialog container component. */\n _hostElement = this._elementRef.nativeElement;\n /** Duration of the dialog open animation. */\n _enterAnimationDuration = this._animationsEnabled ? parseCssTime(this._config.enterAnimationDuration) ?? OPEN_ANIMATION_DURATION : 0;\n /** Duration of the dialog close animation. */\n _exitAnimationDuration = this._animationsEnabled ? parseCssTime(this._config.exitAnimationDuration) ?? CLOSE_ANIMATION_DURATION : 0;\n /** Current timer for dialog animations. */\n _animationTimer = null;\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 this._startOpenAnimation();\n }\n /** Starts the dialog open animation if enabled. */\n _startOpenAnimation() {\n this._animationStateChanged.emit({\n state: 'opening',\n totalTime: this._enterAnimationDuration\n });\n if (this._animationsEnabled) {\n this._hostElement.style.setProperty(TRANSITION_DURATION_PROPERTY, `${this._enterAnimationDuration}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._enterAnimationDuration, 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._exitAnimationDuration\n });\n this._hostElement.classList.remove(OPEN_CLASS);\n if (this._animationsEnabled) {\n this._hostElement.style.setProperty(TRANSITION_DURATION_PROPERTY, `${this._exitAnimationDuration}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._exitAnimationDuration, 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 /**\n * Updates the number action sections.\n * @param delta Increase/decrease in the number of sections.\n */\n _updateActionSectionCount(delta) {\n this._actionSectionCount += delta;\n this._changeDetectorRef.markForCheck();\n }\n /**\n * Completes the dialog open by clearing potential animation classes, trapping\n * focus and emitting an opened event.\n */\n _finishDialogOpen = () => {\n this._clearAnimationClasses();\n this._openAnimationDone(this._enterAnimationDuration);\n };\n /**\n * Completes the dialog close by clearing potential animation classes, restoring\n * focus and emitting a closed event.\n */\n _finishDialogClose = () => {\n this._clearAnimationClasses();\n this._animationStateChanged.emit({\n state: 'closed',\n totalTime: this._exitAnimationDuration\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 _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 ngOnDestroy() {\n super.ngOnDestroy();\n if (this._animationTimer !== null) {\n clearTimeout(this._animationTimer);\n }\n }\n attachComponentPortal(portal) {\n // When a component is passed into the dialog, the host element interrupts\n // the `display:flex` from affecting the dialog title, content, and\n // actions. To fix this, we make the component host `display: contents` by\n // marking its host with the `mat-mdc-dialog-component-host` class.\n //\n // Note that this problem does not exist when a template ref is used since\n // the title, contents, and actions are then nested directly under the\n // dialog surface.\n const ref = super.attachComponentPortal(portal);\n ref.location.nativeElement.classList.add('mat-mdc-dialog-component-host');\n return ref;\n }\n static ɵfac = /* @__PURE__ */(() => {\n let ɵMatDialogContainer_BaseFactory;\n return function MatDialogContainer_Factory(__ngFactoryType__) {\n return (ɵMatDialogContainer_BaseFactory || (ɵMatDialogContainer_BaseFactory = i0.ɵɵgetInheritedFactory(MatDialogContainer)))(__ngFactoryType__ || MatDialogContainer);\n };\n })();\n static ɵ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: 10,\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._ariaLabelledByQueue[0])(\"aria-label\", ctx._config.ariaLabel)(\"aria-describedby\", ctx._config.ariaDescribedBy || null);\n i0.ɵɵclassProp(\"_mat-animation-noopable\", !ctx._animationsEnabled)(\"mat-mdc-dialog-container-with-actions\", ctx._actionSectionCount > 0);\n }\n },\n features: [i0.ɵɵInheritDefinitionFeature],\n decls: 3,\n vars: 0,\n consts: [[1, \"mat-mdc-dialog-inner-container\", \"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: [CdkPortalOutlet],\n styles: [\".mat-mdc-dialog-container{width:100%;height:100%;display:block;box-sizing:border-box;max-height:inherit;min-height:inherit;min-width:inherit;max-width:inherit;outline:0}.cdk-overlay-pane.mat-mdc-dialog-panel{max-width:var(--mat-dialog-container-max-width, 560px);min-width:var(--mat-dialog-container-min-width, 280px)}@media(max-width: 599px){.cdk-overlay-pane.mat-mdc-dialog-panel{max-width:var(--mat-dialog-container-small-max-width, calc(100vw - 32px))}}.mat-mdc-dialog-inner-container{display:flex;flex-direction:row;align-items:center;justify-content:space-around;box-sizing:border-box;height:100%;opacity:0;transition:opacity linear var(--mat-dialog-transition-duration, 0ms);max-height:inherit;min-height:inherit;min-width:inherit;max-width:inherit}.mdc-dialog--closing .mat-mdc-dialog-inner-container{transition:opacity 75ms linear;transform:none}.mdc-dialog--open .mat-mdc-dialog-inner-container{opacity:1}._mat-animation-noopable .mat-mdc-dialog-inner-container{transition:none}.mat-mdc-dialog-surface{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;box-sizing:border-box;width:100%;height:100%;position:relative;overflow-y:auto;outline:0;transform:scale(0.8);transition:transform var(--mat-dialog-transition-duration, 0ms) cubic-bezier(0, 0, 0.2, 1);max-height:inherit;min-height:inherit;min-width:inherit;max-width:inherit;box-shadow:var(--mat-dialog-container-elevation-shadow, none);border-radius:var(--mdc-dialog-container-shape, var(--mat-sys-corner-extra-large, 4px));background-color:var(--mdc-dialog-container-color, var(--mat-sys-surface, white))}[dir=rtl] .mat-mdc-dialog-surface{text-align:right}.mdc-dialog--open .mat-mdc-dialog-surface,.mdc-dialog--closing .mat-mdc-dialog-surface{transform:none}._mat-animation-noopable .mat-mdc-dialog-surface{transition:none}.mat-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}.mat-mdc-dialog-title{display:block;position:relative;flex-shrink:0;box-sizing:border-box;margin:0 0 1px;padding:var(--mat-dialog-headline-padding, 6px 24px 13px)}.mat-mdc-dialog-title::before{display:inline-block;width:0;height:40px;content:\\\"\\\";vertical-align:0}[dir=rtl] .mat-mdc-dialog-title{text-align:right}.mat-mdc-dialog-container .mat-mdc-dialog-title{color:var(--mdc-dialog-subhead-color, var(--mat-sys-on-surface, rgba(0, 0, 0, 0.87)));font-family:var(--mdc-dialog-subhead-font, var(--mat-sys-headline-small-font, inherit));line-height:var(--mdc-dialog-subhead-line-height, var(--mat-sys-headline-small-line-height, 1.5rem));font-size:var(--mdc-dialog-subhead-size, var(--mat-sys-headline-small-size, 1rem));font-weight:var(--mdc-dialog-subhead-weight, var(--mat-sys-headline-small-weight, 400));letter-spacing:var(--mdc-dialog-subhead-tracking, var(--mat-sys-headline-small-tracking, 0.03125em))}.mat-mdc-dialog-content{display:block;flex-grow:1;box-sizing:border-box;margin:0;overflow:auto;max-height:65vh}.mat-mdc-dialog-content>:first-child{margin-top:0}.mat-mdc-dialog-content>:last-child{margin-bottom:0}.mat-mdc-dialog-container .mat-mdc-dialog-content{color:var(--mdc-dialog-supporting-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, 0.6)));font-family:var(--mdc-dialog-supporting-text-font, var(--mat-sys-body-medium-font, inherit));line-height:var(--mdc-dialog-supporting-text-line-height, var(--mat-sys-body-medium-line-height, 1.5rem));font-size:var(--mdc-dialog-supporting-text-size, var(--mat-sys-body-medium-size, 1rem));font-weight:var(--mdc-dialog-supporting-text-weight, var(--mat-sys-body-medium-weight, 400));letter-spacing:var(--mdc-dialog-supporting-text-tracking, var(--mat-sys-body-medium-tracking, 0.03125em))}.mat-mdc-dialog-container .mat-mdc-dialog-content{padding:var(--mat-dialog-content-padding, 20px 24px)}.mat-mdc-dialog-container-with-actions .mat-mdc-dialog-content{padding:var(--mat-dialog-with-actions-content-padding, 20px 24px 0)}.mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content{padding-top:0}.mat-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);padding:var(--mat-dialog-actions-padding, 16px 24px);justify-content:var(--mat-dialog-actions-alignment, flex-end)}@media(forced-colors: active){.mat-mdc-dialog-actions{border-top-color:CanvasText}}.mat-mdc-dialog-actions.mat-mdc-dialog-actions-align-start,.mat-mdc-dialog-actions[align=start]{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}.mat-mdc-dialog-component-host{display:contents}\"],\n encapsulation: 2\n });\n }\n return MatDialogContainer;\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}\nvar MatDialogState = /*#__PURE__*/function (MatDialogState) {\n MatDialogState[MatDialogState[\"OPEN\"] = 0] = \"OPEN\";\n MatDialogState[MatDialogState[\"CLOSING\"] = 1] = \"CLOSING\";\n MatDialogState[MatDialogState[\"CLOSED\"] = 2] = \"CLOSED\";\n return MatDialogState;\n}(MatDialogState || {});\n/**\n * Reference to a dialog opened via the MatDialog service.\n */\nclass MatDialogRef {\n _ref;\n _containerInstance;\n /** The instance of component opened into the dialog. */\n componentInstance;\n /**\n * `ComponentRef` of the component opened into the dialog. Will be\n * null when the dialog is opened using a `TemplateRef`.\n */\n componentRef;\n /** Whether the user is allowed to close the dialog. */\n disableClose;\n /** Unique ID for the dialog. */\n id;\n /** Subject for notifying the user that the dialog has finished opening. */\n _afterOpened = /*#__PURE__*/new Subject();\n /** Subject for notifying the user that the dialog has started closing. */\n _beforeClosed = /*#__PURE__*/new Subject();\n /** Result to be passed to afterClosed. */\n _result;\n /** Handle to the timeout that's running as a fallback in case the exit animation doesn't fire. */\n _closeFallbackTimeout;\n /** Current state of the dialog. */\n _state = MatDialogState.OPEN;\n // TODO(crisbeto): we shouldn't have to declare this property, because `DialogRef.close`\n // already has a second `options` parameter that we can use. The problem is that internal tests\n // have assertions like `expect(MatDialogRef.close).toHaveBeenCalledWith(foo)` which will break,\n // because it'll be called with two arguments by things like `MatDialogClose`.\n /** Interaction that caused the dialog to close. */\n _closeInteractionType;\n constructor(_ref, config, _containerInstance) {\n this._ref = _ref;\n this._containerInstance = _containerInstance;\n this.disableClose = config.disableClose;\n this.id = _ref.id;\n // Used to target panels specifically tied to dialogs.\n _ref.addPanelClass('mat-mdc-dialog-panel');\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 = 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 = 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 providedIn: 'root',\n factory: () => {\n const overlay = inject(Overlay);\n return () => overlay.scrollStrategies.block();\n }\n});\n/**\n * @docs-private\n * @deprecated No longer used. To be removed.\n * @breaking-change 19.0.0\n */\nfunction MAT_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 MAT_DIALOG_SCROLL_STRATEGY_PROVIDER = {\n provide: MAT_DIALOG_SCROLL_STRATEGY,\n deps: [Overlay],\n useFactory: MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY\n};\n/**\n * Service to open Material Design modal dialogs.\n */\nlet MatDialog = /*#__PURE__*/(() => {\n class MatDialog {\n _overlay = inject(Overlay);\n _defaultOptions = inject(MAT_DIALOG_DEFAULT_OPTIONS, {\n optional: true\n });\n _scrollStrategy = inject(MAT_DIALOG_SCROLL_STRATEGY);\n _parentDialog = inject(MatDialog, {\n optional: true,\n skipSelf: true\n });\n _idGenerator = inject(_IdGenerator);\n _dialog = inject(Dialog);\n _openDialogsAtThisLevel = [];\n _afterAllClosedAtThisLevel = new Subject();\n _afterOpenedAtThisLevel = new Subject();\n dialogConfigClass = MatDialogConfig;\n _dialogRefConstructor;\n _dialogContainerType;\n _dialogDataToken;\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 /**\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 afterAllClosed = defer(() => this.openDialogs.length ? this._getAfterAllClosed() : this._getAfterAllClosed().pipe(startWith(undefined)));\n constructor() {\n this._dialogRefConstructor = MatDialogRef;\n this._dialogContainerType = MatDialogContainer;\n this._dialogDataToken = MAT_DIALOG_DATA;\n }\n open(componentOrTemplateRef, config) {\n let dialogRef;\n config = {\n ...(this._defaultOptions || new MatDialogConfig()),\n ...config\n };\n config.id = config.id || this._idGenerator.getId('mat-mdc-dialog-');\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.componentRef = cdkRef.componentRef;\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 ɵfac = function MatDialog_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDialog)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: MatDialog,\n factory: MatDialog.ɵfac,\n providedIn: 'root'\n });\n }\n return MatDialog;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Button that will close the current dialog.\n */\nlet MatDialogClose = /*#__PURE__*/(() => {\n class MatDialogClose {\n dialogRef = inject(MatDialogRef, {\n optional: true\n });\n _elementRef = inject(ElementRef);\n _dialog = inject(MatDialog);\n /** Screen-reader label for the button. */\n ariaLabel;\n /** Default to \"button\" to prevents accidental form submits. */\n type = 'button';\n /** Dialog close input. */\n dialogResult;\n _matDialogClose;\n constructor() {}\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 ɵfac = function MatDialogClose_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDialogClose)();\n };\n static ɵ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: [0, \"aria-label\", \"ariaLabel\"],\n type: \"type\",\n dialogResult: [0, \"mat-dialog-close\", \"dialogResult\"],\n _matDialogClose: [0, \"matDialogClose\", \"_matDialogClose\"]\n },\n exportAs: [\"matDialogClose\"],\n features: [i0.ɵɵNgOnChangesFeature]\n });\n }\n return MatDialogClose;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet MatDialogLayoutSection = /*#__PURE__*/(() => {\n class MatDialogLayoutSection {\n _dialogRef = inject(MatDialogRef, {\n optional: true\n });\n _elementRef = inject(ElementRef);\n _dialog = inject(MatDialog);\n constructor() {}\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 this._onAdd();\n });\n }\n }\n ngOnDestroy() {\n // Note: we null check because there are some internal\n // tests that are mocking out `MatDialogRef` incorrectly.\n const instance = this._dialogRef?._containerInstance;\n if (instance) {\n Promise.resolve().then(() => {\n this._onRemove();\n });\n }\n }\n static ɵfac = function MatDialogLayoutSection_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDialogLayoutSection)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatDialogLayoutSection\n });\n }\n return MatDialogLayoutSection;\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 extends MatDialogLayoutSection {\n id = inject(_IdGenerator).getId('mat-mdc-dialog-title-');\n _onAdd() {\n // Note: we null check the queue, because there are some internal\n // tests that are mocking out `MatDialogRef` incorrectly.\n this._dialogRef._containerInstance?._addAriaLabelledBy?.(this.id);\n }\n _onRemove() {\n this._dialogRef?._containerInstance?._removeAriaLabelledBy?.(this.id);\n }\n static ɵfac = /* @__PURE__ */(() => {\n let ɵMatDialogTitle_BaseFactory;\n return function MatDialogTitle_Factory(__ngFactoryType__) {\n return (ɵMatDialogTitle_BaseFactory || (ɵMatDialogTitle_BaseFactory = i0.ɵɵgetInheritedFactory(MatDialogTitle)))(__ngFactoryType__ || MatDialogTitle);\n };\n })();\n static ɵ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 features: [i0.ɵɵInheritDefinitionFeature]\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 ɵfac = function MatDialogContent_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDialogContent)();\n };\n static ɵ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 features: [i0.ɵɵHostDirectivesFeature([i1.CdkScrollable])]\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 extends MatDialogLayoutSection {\n /**\n * Horizontal alignment of action buttons.\n */\n align;\n _onAdd() {\n this._dialogRef._containerInstance?._updateActionSectionCount?.(1);\n }\n _onRemove() {\n this._dialogRef._containerInstance?._updateActionSectionCount?.(-1);\n }\n static ɵfac = /* @__PURE__ */(() => {\n let ɵMatDialogActions_BaseFactory;\n return function MatDialogActions_Factory(__ngFactoryType__) {\n return (ɵMatDialogActions_BaseFactory || (ɵMatDialogActions_BaseFactory = i0.ɵɵgetInheritedFactory(MatDialogActions)))(__ngFactoryType__ || MatDialogActions);\n };\n })();\n static ɵ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: 6,\n hostBindings: function MatDialogActions_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵclassProp(\"mat-mdc-dialog-actions-align-start\", ctx.align === \"start\")(\"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 features: [i0.ɵɵInheritDefinitionFeature]\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}\nconst DIRECTIVES = [MatDialogContainer, MatDialogClose, MatDialogTitle, MatDialogActions, MatDialogContent];\nlet MatDialogModule = /*#__PURE__*/(() => {\n class MatDialogModule {\n static ɵfac = function MatDialogModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDialogModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: MatDialogModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n providers: [MatDialog],\n imports: [DialogModule, OverlayModule, PortalModule, MatCommonModule, MatCommonModule]\n });\n }\n return MatDialogModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nexport { MatDialogActions as M, _closeDialogVia as _, MatDialogClose as a, MatDialogTitle as b, MatDialogContent as c, MatDialogContainer as d, MAT_DIALOG_DATA as e, MAT_DIALOG_DEFAULT_OPTIONS as f, MAT_DIALOG_SCROLL_STRATEGY as g, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY as h, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER as i, MatDialog as j, MatDialogConfig as k, MatDialogState as l, MatDialogRef as m, MatDialogModule as n };\n","import { Injectable } from '@angular/core';\r\nimport { UserInfoService } from '../user/user-info.service';\r\nimport { HttpClient } from '@angular/common/http';\r\nimport * as Rx from 'rxjs';\r\nimport { map } from 'rxjs/operators';\r\n\r\nexport interface ICacheItem {\r\n\turl: string,\r\n\tpersonGuid: string,\r\n\tcache: any\r\n}\r\n\r\n@Injectable({\r\n\tprovidedIn: 'root'\r\n})\r\nexport class CacheService {\r\n\tconstructor(\r\n\t\tprivate userInfo: UserInfoService,\r\n\t\tprivate http: HttpClient\r\n\t) { }\r\n\r\n\tprivate cachedItems: ICacheItem[] = [];\r\n\r\n\tget
(anonymous: boolean, url: string): Rx.Observable {\r\n\t\tlet found = this.cachedItems.find(x => x.url === url);\r\n\t\t// return cache only if the login is same person\r\n\t\tif (found != undefined) {\r\n\t\t\tif (anonymous && found.personGuid === \"\") {\r\n\t\t\t\treturn Rx.of(JSON.parse(JSON.stringify(found.cache)) as T);\r\n\t\t\t}\r\n\t\t\telse if (!anonymous && found.personGuid === this.userInfo.getProfile().PersonGuid) {\r\n\t\t\t\treturn Rx.of(JSON.parse(JSON.stringify(found.cache)) as T);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (anonymous) {\r\n\t\t\treturn this.http.get(url)\r\n\t\t\t\t.pipe(map(\r\n\t\t\t\t\t(item: T) => {\r\n\t\t\t\t\t\tthis.cachedItems.push({\r\n\t\t\t\t\t\t\turl: url,\r\n\t\t\t\t\t\t\tpersonGuid: \"\",\r\n\t\t\t\t\t\t\tcache: item\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t\treturn JSON.parse(JSON.stringify(item));\r\n\t\t\t\t\t}\r\n\t\t\t\t));\r\n\t\t}\r\n\t\telse {\r\n\t\t\treturn this.http.get(\r\n\t\t\t\turl,\r\n\t\t\t\t{\r\n\t\t\t\t\twithCredentials: true,\r\n\t\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t\t}\r\n\t\t\t).pipe(map(\r\n\t\t\t\t(item: T) => {\r\n\t\t\t\t\tthis.cachedItems.push({\r\n\t\t\t\t\t\turl: url,\r\n\t\t\t\t\t\tpersonGuid: this.userInfo.getProfile().PersonGuid,\r\n\t\t\t\t\t\tcache: item\r\n\t\t\t\t\t});\r\n\t\t\t\t\treturn JSON.parse(JSON.stringify(item));\r\n\t\t\t\t}\r\n\t\t\t));\r\n\t\t}\r\n\t}\r\n\r\n\tremove(url: string): void {\r\n\t\tthis.cachedItems = this.cachedItems.filter(x => x.url !== url);\r\n\t}\r\n\r\n\tclear(): void {\r\n\t\tthis.cachedItems = [];\r\n\t}\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { HttpClient } from '@angular/common/http';\r\nimport * as Rx from 'rxjs';\r\nimport { tap, map} from 'rxjs/operators';\r\nimport { AppSettingService } from '../app.service';\r\nimport { CacheService } from '../utility/cache.service';\r\nimport { UserInfoService } from '../user/user-info.service';\r\n\r\n//this should be 1:1 with MAP API's .net SaveMapType\r\ninterface ISaveMapType {\r\n\t\tCareerVersion: string,\r\n\t\tCertificationVersion: string,\r\n\t\tCTEVersion: string,\r\n\t\tMilitaryVersion: string,\r\n\t\tCollegeVersion: string,\r\n\t\tK12Version: string,\r\n\t\tPreKVersion: string\r\n}\r\n\r\nexport interface ISaveUserMapOption {\r\n\tMapOptionId: string,\r\n\tTerritories: any\r\n}\r\n\r\nexport interface ITerritoryIPED {\r\n\tCatalogueLabel: string,\r\n\tIpedsUnitId: string,\r\n\tIsUsed: boolean,\r\n\tName: string,\r\n\tNonIpedsInstitutionId: string,\r\n\tSelectedCollegeBaseName: string,\r\n\tVersion: string,\r\n\tXLoc: number,\r\n\tYLoc: number\r\n}\r\n\r\nexport interface IMapOptionCollege {\r\n\tCollegeId: string,\r\n\tName: string\r\n}\r\n\r\nexport interface IMapOptionIPEDTrritories {\r\n\tCTEVersion: ITerritoryIPED,\r\n\tCTEVersions: ITerritoryIPED[],\r\n\tCareerVersion: ITerritoryIPED,\r\n\tCareerVersions: ITerritoryIPED[]\r\n\tCertificationVersion: ITerritoryIPED,\r\n\tCertificationVersions: ITerritoryIPED[],\r\n\tCollegeVersion: ITerritoryIPED,\r\n\tCollegeVersions: ITerritoryIPED[],\r\n\tK12Version: ITerritoryIPED,\r\n\tK12Versions: ITerritoryIPED[],\r\n\tMilitaryVersion: ITerritoryIPED,\r\n\tMilitaryVersions: ITerritoryIPED[],\r\n\tPreKVersion: ITerritoryIPED,\r\n\tPreKVersions: ITerritoryIPED[]\r\n}\r\n\r\nexport interface IMapOptionIPED {\r\n\tMapOptionId: string,\r\n\tMapOptionName: string,\r\n\tMapShapeId: string,\r\n\tPolygonTotal: number,\r\n\tIsDefault: boolean,\r\n\tHide: boolean,\r\n\tInProcess: boolean,\r\n\tTerritories: IMapOptionIPEDTrritories,\r\n\tCollegeDistinctVersions: IMapOptionCollege[]\r\n}\r\n\r\nexport interface IMapOptionTerritory {\r\n\tTerritoryId: number,\r\n\tName: string, //catalog name\r\n\tVersion: string\r\n\tIsAvailable: boolean,\r\n\tIsDefault: boolean,\r\n\tIsUsed: boolean\r\n\tPolygonPosition: number,\r\n\tMapName: string,\r\n\tK8Name: string,\r\n\tHSName: string,\r\n}\r\n\r\nexport interface IMapOption {\r\n\tMapOptionId: string,\r\n\tMapOptionName: string,\r\n\tMapShapeId: string,\r\n\tUnlockPolygon: boolean,\r\n\tPolygonTotal: number,\r\n\tIsDefault: boolean,\r\n\tIsUsed: boolean,\r\n\tHide: boolean,\r\n\tInProcess: boolean,\r\n\tCareerVersions: IMapOptionTerritory[],\r\n\tCertificationVersions: IMapOptionTerritory[],\r\n\tCTEVersions: IMapOptionTerritory[],\r\n\tMilitaryVersions: IMapOptionTerritory[],\t\r\n\tCollegeVersions: IMapOptionTerritory[],\r\n\tK12Versions: IMapOptionTerritory[],\r\n\tPreKVersions: IMapOptionTerritory[]\r\n}\r\n\r\n@Injectable({\r\n\tprovidedIn: 'root'\r\n})\r\nexport class MapAPIService {\r\n\tconstructor(\r\n\t\tprivate cacheSrv: CacheService,\r\n\t\tprivate http: HttpClient,\r\n\t\tprivate userInfo: UserInfoService\t\t\r\n\t) { }\r\n\r\n\t//used for alternative map demo\r\n\talternativeMapDemoId: any = \"isAlternativeMapDemoId\";\r\n\r\n\t//private url = AppSettingService.appConfig.informAPIUrl + \"MAP\";\r\n\tprivate url = AppSettingService.appConfig.JourneyAPIUrl + \"Map\"; //API2\r\n\r\n\tprivate getBlankSaveMapType(): ISaveMapType {\r\n\t\treturn {\r\n\t\t\tCareerVersion: null,\r\n\t\t\tCertificationVersion: null,\r\n\t\t\tCTEVersion: null,\r\n\t\t\tMilitaryVersion: null,\r\n\t\t\tCollegeVersion: null,\r\n\t\t\tK12Version: null,\r\n\t\t\tPreKVersion: null\r\n\t\t}\r\n\t}\r\n\t\r\n\tcommaDelimitedUserMapVersions: string = \"\";\r\n\t\r\n\tgetFilledInSaveMapType(userMapResponseObject: any): ISaveMapType {\r\n\t\tlet saveMapTypeObj: any = this.getBlankSaveMapType();\r\n\t\tlet saveMapTypeKeys: any = Object.keys(saveMapTypeObj);\r\n\r\n\t\tfor (var i: any = 0; i < saveMapTypeKeys.length; i++) {\r\n\t\t\t//this works because userMapResponse object has same keys as saveMapType\r\n\t\t\t//so we \"fill in\" the value for each saveMapType key with the corresponding userMapResponse object key's value\r\n\t\t\tsaveMapTypeObj[saveMapTypeKeys[i]] = userMapResponseObject[saveMapTypeKeys[i]]['Version'];\r\n\t\t}\r\n\r\n\t\treturn saveMapTypeObj;\r\n\t}\r\n\t\r\n\tgetUserMapSavePostData(getUserMapResponse: any): ISaveUserMapOption {\r\n\t\tlet postData: any = {\r\n\t\t\tMapOptionId: null,\r\n\t\t\tTerritories: {\r\n\t\t\t}\r\n\t\t};\r\n\t\tpostData.MapOptionId = getUserMapResponse.MapOptionId;\r\n\t\tif (getUserMapResponse.PreKVersion) { postData.Territories.PreKVersion = getUserMapResponse.PreKVersion.Version; }\r\n\t\tif (getUserMapResponse.K12Version) { postData.Territories.K12Version = getUserMapResponse.K12Version.Version; }\r\n\t\tif (getUserMapResponse.CollegeVersion) { postData.Territories.CollegeVersion = getUserMapResponse.CollegeVersion.Version; }\r\n\t\tif (getUserMapResponse.CareerVersion) { postData.Territories.CareerVersion = getUserMapResponse.CareerVersion.Version; }\r\n\t\tif (getUserMapResponse.MilitaryVersion) { postData.Territories.MilitaryVersion = getUserMapResponse.MilitaryVersion.Version; }\r\n\t\tif (getUserMapResponse.CTEVersion) { postData.Territories.CTEVersion = getUserMapResponse.CTEVersion.Version; }\r\n\t\tif (getUserMapResponse.CertificationVersion) { postData.Territories.CertificationVersion = getUserMapResponse.CertificationVersion.Version; }\r\n\t\treturn postData;\r\n\t}\r\n\r\n\tviewMap(minX: number, maxX: number, minY: number, maxY: number, zoom: number, versions: string, selectedObjectId: string, mapOptionId: string = 'default', clipMinX: number = null, clipMinY: number = null, clipMaxX: number = null, clipMaxY: number = null): Rx.Observable {\t\t\r\n\t\tif (clipMinX == null || clipMinY == null || clipMaxX == null || clipMaxY == null) {\r\n\t\t\tclipMinX = -1;\r\n\t\t\tclipMinY = -1;\r\n\t\t\tclipMaxX = -1;\r\n\t\t\tclipMaxY = -1;\r\n\t\t}\r\n\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/Option/View/\" + mapOptionId + \"?minX=\" + minX.toFixed(4) + \"&maxX=\" + maxX.toFixed(4) + \"&minY=\" + minY.toFixed(4) + \"&maxY=\" + maxY.toFixed(4) + \"&zoom=\" + zoom.toFixed(4) + \"&mvs=\" + encodeURIComponent(versions) + \"&so=\" + encodeURIComponent(selectedObjectId) + \"&clipMinX=\" + encodeURIComponent(clipMinX) + \"&clipMinY=\" + encodeURIComponent(clipMinY) + \"&clipMaxX=\" + encodeURIComponent(clipMaxX) + \"&clipMaxY=\" + encodeURIComponent(clipMaxY),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tgetMapObject(objectId: string, mapOptionId: string = 'default'): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/Object/\" + encodeURIComponent(objectId) + \"?mapOptionId=\" + mapOptionId,\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tgetMapObjectAncestory(objectId: string): Rx.Observable {\r\n\t\tlet l = this.url + \"/Ancestory/\" + encodeURIComponent(objectId);\r\n\t\treturn this.cacheSrv.get(true, l);\r\n\t}\r\n\t\r\n\tgetSolrMapSearch(mapOptionId: string = 'default', keyword: string, limit: number, offset: number, searchOnlyMapVersion: string, myCareerfilterObject: any): Rx.Observable {\r\n\t\tconst myCareerfilterObjectStringified = Object.keys(myCareerfilterObject).map((key: any) => key + '=' + myCareerfilterObject[key+'']).join('&');\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + '/MapSearch/' + mapOptionId + '?keyword=' + encodeURIComponent(keyword) + '&limit=' + limit + '&offset=' + offset + '&searchOnlyTerritory=' + searchOnlyMapVersion + '&' + myCareerfilterObjectStringified,\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\t\t\r\n\t}\r\n\r\n\tgetMapObjectStatus(id: string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/Search/Status/\" + id,\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tgetClientMap(): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/Client\",\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tgetDemoPermission(userGuid: string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/DemoPermission/\" + encodeURIComponent(userGuid),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t)\r\n\t}\r\n\r\n\r\n\tprivate userMapCache:any = null;\r\n\r\n\tclearMapCache(): void {\r\n\t\tthis.userMapCache = null;\r\n\t}\r\n\r\n\tgetUserMap(reload: boolean = false, mapOptionId: string = 'default'): Rx.Observable {\t\t\r\n\t\t/*\r\n\t\treload = reload == null ? false : reload;\r\n\t\t\r\n\t\tif (reload) {\r\n\t\t\tthis.clearMapCache();\r\n\t\t}\r\n\t\t*/\r\n\t\treload = true; //need to make cache work with get all map versions (when mapOptionId is null)\r\n\t\tif (!reload && this.userMapCache != null) {\r\n\t\t\treturn Rx.of(this.userMapCache);\r\n\t\t}\r\n\t\telse {\r\n\t\t\t//null value for _default returns available map options: \r\n\t\t\t//'default' returns default map for user, \r\n\t\t\t//other values return maps for given value.\r\n\t\t\tlet restOfUrl = \"/Option/User/\" + mapOptionId;\r\n\t\t\tif (mapOptionId === null) {\r\n\t\t\t\trestOfUrl = \"/Option/User\";\r\n\t\t\t}\r\n\r\n\t\t\treturn this.http.get(\r\n\t\t\t\tthis.url + restOfUrl,\r\n\t\t\t\t{\r\n\t\t\t\t\twithCredentials: true,\r\n\t\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t\t}\r\n\t\t\t).pipe(\r\n\t\t\t\ttap(\r\n\t\t\t\t\tresponse => {\r\n\t\t\t\t\t\tthis.userMapCache = response;\r\n\t\t\t\t\t}\r\n\t\t\t\t)\r\n\t\t\t);\r\n\t\t}\r\n\t}\r\n\t\r\n\tconvertToList(getUserMapResponse: any): string {\r\n\t\tlet vls: string[] = [];\r\n\t\tObject.keys(getUserMapResponse).forEach((key) => {\r\n\t\t\t// collect the data in Version not in Versions\r\n\t\t\tif (key.split(\"\").reverse().join(\"\").indexOf(\"s\") > 0) {\r\n\t\t\t\tif (getUserMapResponse[key]) {\r\n\t\t\t\t\tvls.push(getUserMapResponse[key][\"Version\"]);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\t\t// sort and join the version to a list by territory id , such 1-1,2,1,3-1...\r\n\t\tlet retStr = vls.sort().join(\",\");\r\n\r\n\t\t//remove trailing comma if exist\r\n\t\tif (retStr.length > 0 && retStr[retStr.length - 1] === ',') {\r\n\t\t\tretStr = retStr.slice(0, retStr.length - 1)\r\n\t\t}\r\n\r\n\t\treturn retStr;\r\n\t};\r\n\t \r\n\tgetUserMapVersionList(reload: boolean = false, mapOptionId: string='default'): Rx.Observable { // reutn selected map versions in comma list\r\n\t\treload = reload == null ? false : reload;\r\n\t\tif (reload) {\r\n\t\t\tthis.clearMapCache();\r\n\t\t}\r\n\r\n\t\tif (!reload && this.userMapCache != null) {\r\n\t\t\treturn Rx.of(this.convertToList(this.userMapCache));\r\n\t\t}\r\n\t\telse {\r\n\t\t\treturn this.http.get(\r\n\t\t\t\tthis.url + '/Option/User/'+mapOptionId,\r\n\t\t\t\t{\r\n\t\t\t\t\twithCredentials: true,\r\n\t\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t\t}\r\n\t\t\t).pipe(\r\n\t\t\t\tmap(\r\n\t\t\t\t\tresponse => {\r\n\t\t\t\t\t\tthis.userMapCache = response;\r\n\t\t\t\t\t\treturn this.convertToList(response);\r\n\t\t\t\t\t}\r\n\t\t\t\t)\r\n\t\t\t);\r\n\t\t}\r\n\t}\r\n\r\n\tsaveUserMap(mapSelection: ISaveUserMapOption): Rx.Observable { \r\n\t\treturn this.http.post(\r\n\t\t\tthis.url + \"/Option/User\",\r\n\t\t\tmapSelection,\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t).pipe(\r\n\t\t\ttap(\r\n\t\t\t\tresponse => {\r\n\t\t\t\t\tthis.clearMapCache();\r\n\t\t\t\t}\r\n\t\t\t)\r\n\t\t);\r\n\t}\r\n\t\r\n\tgetCorrespondingMapObject(fromOccupationId: string): Rx.Observable { \r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/GetCorrespondingMapObject/\"+ fromOccupationId,\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tgetUserCollegesByCip(cip:string, mappObjectId: string) : Rx.Observable { \r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/GetUserCollegesByCip/\" + encodeURIComponent(cip) + \"/\" + encodeURIComponent(mappObjectId),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tGetUserCollegesByOccupation(mapObjectId:string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/GetUserCollegesByOccupation/\" + encodeURIComponent(mapObjectId),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tsetCommaDelimitedUserMapVersions() {\r\n\t\tthis.getUserMapVersionList().subscribe(\r\n\t\t\t(commaDelimitedUserMapVersions) => {\r\n\t\t\t\tthis.commaDelimitedUserMapVersions = commaDelimitedUserMapVersions;\r\n\t\t\t});\r\n\t}\r\n\r\n\t//#region map option\r\n\tgetUserMapOptions(limit: number, offset: number): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/Option/User?limit=\" + limit.toString() + \"&offset=\" + offset.toString(),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\t// when mapOptionId is not provided, get the default\r\n\tgetUserMapOption(reload: boolean = false, mapOptionId: string = null): Rx.Observable {\r\n\t\treload = reload == null ? false : reload;\r\n\t\tif (reload) {\r\n\t\t\tthis.clearMapCache();\r\n\t\t}\r\n\r\n\t\tif (!reload && this.userMapCache != null) {\r\n\t\t\treturn Rx.of(this.userMapCache);\r\n\t\t}\r\n\t\telse {\r\n\t\t\treturn this.http.get(\r\n\t\t\t\tthis.url + \"/Option/User/\" + encodeURIComponent(mapOptionId==null?\"default\":mapOptionId),\r\n\t\t\t\t{\r\n\t\t\t\t\twithCredentials: true,\r\n\t\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t\t}\r\n\t\t\t).pipe(\r\n\t\t\t\tmap(\r\n\t\t\t\t\tresponse => {\r\n\t\t\t\t\t\tthis.userMapCache = response.Territories;\r\n\t\t\t\t\t\treturn response.Territories;\r\n\t\t\t\t\t}\r\n\t\t\t\t)\r\n\t\t\t);\r\n\t\t}\r\n\t}\r\n\r\n\tgetZoneMapOptions(limit: number, offset: number): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/Option/Zone?limit=\" + limit.toString() + \"&offset=\" + offset.toString(),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tgetZoneMapOption(mapOptionId: string, forNew: boolean, mapShapeId: number): Rx.Observable {\r\n\t\tif (forNew) {\r\n\t\t\treturn this.http.get(\r\n\t\t\t\tthis.url + \"/Option/Zone/New/\" + encodeURIComponent(mapShapeId),\r\n\t\t\t\t{\r\n\t\t\t\t\twithCredentials: true,\r\n\t\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t\t}\r\n\t\t\t);\r\n\t\t}\r\n\t\telse {\r\n\t\t\treturn this.http.get(\r\n\t\t\t\tthis.url + \"/Option/Zone/\" + encodeURIComponent(mapOptionId == null ? \"default\" : mapOptionId),\r\n\t\t\t\t{\r\n\t\t\t\t\twithCredentials: true,\r\n\t\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t\t}\r\n\t\t\t);\r\n\t\t}\r\n\t}\r\n\r\n\r\n\ttoggleMapOptionHidden(mapOptionId: string, hide: boolean): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/Option/Zone/\" + encodeURIComponent(mapOptionId) + \"/Hide/\" + hide.toString(),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\ttoggleMapOptionDefault(mapOptionId: string, isDefault: boolean): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/Option/Zone/\" + encodeURIComponent(mapOptionId) + \"/Default/\" + isDefault.toString(),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tsaveZoneMapOption(option: IMapOption): Rx.Observable {\r\n\t\treturn this.http.post(\r\n\t\t\tthis.url + \"/Option/Zone\",\r\n\t\t\toption,\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tdeleteZoneMapOption(mapOptionId: string): Rx.Observable {\r\n\t\treturn this.http.delete(\r\n\t\t\tthis.url + \"/Option/Zone/\" + encodeURIComponent(mapOptionId),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tgetVersion(version: string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/Version/\" + encodeURIComponent(version),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tupdateVersion(version: string, name: string, hs: string, k8: string): Rx.Observable {\r\n\t\treturn this.http.put(\r\n\t\t\tthis.url + \"/Version/\" + version + \"?mapName=\" + encodeURIComponent(name) + \"&hsName=\" + encodeURIComponent(hs) + \"&k8Name=\" + encodeURIComponent(k8),\r\n\t\t\tnull,\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\t//#endregion map option\r\n\tgetBlankMapTerritoryVersionObj(): {\r\n\t\tCTEVersion: null | string;\r\n\t\tCareerVersion: null | string;\r\n\t\tCertificationVersion: null | string;\r\n\t\tCollegeVersion: null | string;\r\n\t\tK12Version: null | string;\r\n\t\tMilitaryVersion: null | string;\r\n\t\tPreKVersion: null | string;\r\n\t} {\r\n\t\treturn {\r\n\t\t\tCTEVersion: null,\r\n\t\t\tCareerVersion: null,\r\n\t\t\tCertificationVersion: null,\r\n\t\t\tCollegeVersion: null,\r\n\t\t\tK12Version: null,\r\n\t\t\tMilitaryVersion: null,\r\n\t\t\tPreKVersion: null\r\n\t\t};\r\n\t}\r\n\r\n\tgetMapTerritoryVersionObjFromGetUserMapResponse(getUserMapResponse: any): any {\r\n\t\tlet returnObj = this.getBlankMapTerritoryVersionObj();\r\n\r\n\t\treturnObj.CTEVersion = (getUserMapResponse.CTEVersion) ? getUserMapResponse.CTEVersion.Version : null;\r\n\t\treturnObj.CareerVersion = (getUserMapResponse.CareerVersion) ? getUserMapResponse.CareerVersion.Version : null;\r\n\t\treturnObj.CertificationVersion = (getUserMapResponse.CertificationVersion) ? getUserMapResponse.CertificationVersion.Version : null;\r\n\t\treturnObj.CollegeVersion = (getUserMapResponse.CollegeVersion) ? getUserMapResponse.CollegeVersion.Version : null;\r\n\t\treturnObj.K12Version = (getUserMapResponse.K12Version) ? getUserMapResponse.K12Version.Version : null;\r\n\t\treturnObj.MilitaryVersion = (getUserMapResponse.MilitaryVersion) ? getUserMapResponse.MilitaryVersion.Version : null;\r\n\t\treturnObj.PreKVersion = (getUserMapResponse.PreKVersion) ? getUserMapResponse.PreKVersion.Version : null;\r\n\r\n\t\treturn returnObj;\r\n\t}\r\n\r\n\tgetMapSavePostDataFromTerritoryVersionsObj(territoryVersionsObj: any, mapOptionId: string): any {\r\n\t\tvar postObj: any = {\r\n\t\t\tMapOptionId: mapOptionId,\r\n\t\t\tTerritories: {\r\n\t\t\t\tCTEVersion: null,\r\n\t\t\t\tCareerVersion: null,\r\n\t\t\t\tCertificationVersion: null,\r\n\t\t\t\tCollegeVersion: null,\r\n\t\t\t\tK12Version: null,\r\n\t\t\t\tMilitaryVersion: null,\r\n\t\t\t\tPreKVersion: null\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\tpostObj.Territories.CTEVersion = (territoryVersionsObj.CTEVersion) ? territoryVersionsObj.CTEVersion : null;\r\n\t\tpostObj.Territories.CareerVersion = (territoryVersionsObj.CareerVersion) ? territoryVersionsObj.CareerVersion : null;\r\n\t\tpostObj.Territories.CertificationVersion = (territoryVersionsObj.CertificationVersion) ? territoryVersionsObj.CertificationVersion : null;\r\n\t\tpostObj.Territories.CollegeVersion = (territoryVersionsObj.CollegeVersion) ? territoryVersionsObj.CollegeVersion : null;\r\n\t\tpostObj.Territories.K12Version = (territoryVersionsObj.K12Version) ? territoryVersionsObj.K12Version : null;\r\n\t\tpostObj.Territories.MilitaryVersion = (territoryVersionsObj.MilitaryVersion) ? territoryVersionsObj.MilitaryVersion : null;\r\n\t\tpostObj.Territories.PreKVersion = (territoryVersionsObj.PreKVersion) ? territoryVersionsObj.PreKVersion : null;\r\n\r\n\t\treturn postObj;\r\n\t}\r\n\r\n\tgetMapSavePostDataFromGetUserMapTerritoryVersionsObj(territoryVersionsObj: any, mapOptionId: string): any {\r\n\t\tvar postObj: any = {\r\n\t\t\tMapOptionId: mapOptionId,\r\n\t\t\tTerritories: {\r\n\t\t\t\tCTEVersion: null,\r\n\t\t\t\tCareerVersion: null,\r\n\t\t\t\tCertificationVersion: null,\r\n\t\t\t\tCollegeVersion: null,\r\n\t\t\t\tK12Version: null,\r\n\t\t\t\tMilitaryVersion: null,\r\n\t\t\t\tPreKVersion: null\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\tpostObj.Territories.CTEVersion = (territoryVersionsObj.CTEVersion) ? territoryVersionsObj.CTEVersion.Version : null;\r\n\t\tpostObj.Territories.CareerVersion = (territoryVersionsObj.CareerVersion) ? territoryVersionsObj.CareerVersion.Version : null;\r\n\t\tpostObj.Territories.CertificationVersion = (territoryVersionsObj.CertificationVersion) ? territoryVersionsObj.CertificationVersion.Version : null;\r\n\t\tpostObj.Territories.CollegeVersion = (territoryVersionsObj.CollegeVersion) ? territoryVersionsObj.CollegeVersion.Version : null;\r\n\t\tpostObj.Territories.K12Version = (territoryVersionsObj.K12Version) ? territoryVersionsObj.K12Version.Version : null;\r\n\t\tpostObj.Territories.MilitaryVersion = (territoryVersionsObj.MilitaryVersion) ? territoryVersionsObj.MilitaryVersion.Version : null;\r\n\t\tpostObj.Territories.PreKVersion = (territoryVersionsObj.PreKVersion) ? territoryVersionsObj.PreKVersion.Version : null;\r\n\r\n\t\treturn postObj;\r\n\t}\r\n\r\n\r\n\tgetMapSavePostDataFromGetUserMapResponse(getUserMapResponse: any): any {\r\n\t\tvar postObj: any = {\r\n\t\t\tMapOptionId: getUserMapResponse.MapOptionId,\r\n\t\t\tTerritories: {\r\n\t\t\t\tCTEVersion: null,\r\n\t\t\t\tCareerVersion: null,\r\n\t\t\t\tCertificationVersion: null,\r\n\t\t\t\tCollegeVersion: null,\r\n\t\t\t\tK12Version: null,\r\n\t\t\t\tMilitaryVersion: null,\r\n\t\t\t\tPreKVersion: null\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\tpostObj.Territories.CTEVersion = (getUserMapResponse.CTEVersion) ? getUserMapResponse.CTEVersion.Version : null;\r\n\t\tpostObj.Territories.CareerVersion = (getUserMapResponse.CareerVersion) ? getUserMapResponse.CareerVersion.Version : null;\r\n\t\tpostObj.Territories.CertificationVersion = (getUserMapResponse.CertificationVersion) ? getUserMapResponse.CertificationVersion.Version : null;\r\n\t\tpostObj.Territories.CollegeVersion = (getUserMapResponse.CollegeVersion) ? getUserMapResponse.CollegeVersion.Version : null;\r\n\t\tpostObj.Territories.K12Version = (getUserMapResponse.K12Version) ? getUserMapResponse.K12Version.Version : null;\r\n\t\tpostObj.Territories.MilitaryVersion = (getUserMapResponse.MilitaryVersion) ? getUserMapResponse.MilitaryVersion.Version : null;\r\n\t\tpostObj.Territories.PreKVersion = (getUserMapResponse.PreKVersion) ? getUserMapResponse.PreKVersion.Version : null;\r\n\r\n\t\treturn postObj;\r\n\t}\r\n\r\n\tngOnInit() {}\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { HttpClient } from '@angular/common/http';\r\nimport * as Rx from 'rxjs';\r\nimport { tap, map, switchMap } from 'rxjs/operators';\r\nimport { AppSettingService } from '../app.service';\r\nimport { UserInfoService} from './user-info.service';\r\nimport { MapAPIService } from '../map/map-api.service';\r\n\r\ninterface ISaveUser {\r\n\tRole: string;\r\n\tPersonId?: number;\r\n\tFirstName: string;\r\n\tLastName: string;\r\n\tEmail?: string;\r\n\tBirthDate?: string;\r\n\tUserName?: string;\r\n\tPassword?: string;\r\n\tSelectedSchool: any;\r\n\tSchools: { SchoolId: number, SchoolName: string, City: string }[]\r\n};\r\n\r\nexport class AddTeacher implements ISaveUser {\r\n\tRole = \"Teacher\";\r\n\tconstructor(\r\n\t\tpublic FirstName: string,\r\n\t\tpublic LastName: string,\r\n\t\tpublic Email: string,\r\n\t\tpublic SelectedSchool: any,\r\n\t\tpublic Schools: { SchoolId: number, SchoolName: string, City: string }[]\r\n\t) {\r\n\t\tthis.Role = \"Teacher\";\r\n\t}\r\n\tpublic reset() {\r\n\t\tthis.FirstName = \"\";\r\n\t\tthis.LastName = \"\";\r\n\t\tthis.Email = \"\";\r\n\t\tthis.SelectedSchool = null;\r\n\t\tthis.Schools = null;\r\n\t}\r\n}\r\n\r\nexport class EditTeacher implements ISaveUser {\r\n\tRole = \"Teacher\";\r\n\tconstructor(\r\n\t\tpublic PersonId: number,\r\n\t\tpublic FirstName: string,\r\n\t\tpublic LastName: string,\r\n\t\tpublic Email: string,\r\n\t\tpublic SelectedSchool: any,\r\n\t\tpublic Schools: { SchoolId: number, SchoolName: string, City: string }[]\r\n\t) { }\r\n\r\n\tpublic reset() {\r\n\t\tthis.PersonId = null;\r\n\t\tthis.FirstName = \"\";\r\n\t\tthis.LastName = \"\";\r\n\t\tthis.Email = \"\";\r\n\t\tthis.SelectedSchool = null;\r\n\t\tthis.Schools = null;\r\n\t}\r\n}\r\n\r\nexport class AddStudent implements ISaveUser {\r\n\tRole = \"Student\";\r\n\tconstructor(\r\n\t\tpublic FirstName: string,\r\n\t\tpublic LastName: string,\r\n\t\tpublic BirthDate: string,\r\n\t\tpublic UserName: string,\r\n\t\tpublic Password: string,\r\n\t\tpublic SelectedSchool: any,\r\n\t\tpublic Schools: { SchoolId: number, SchoolName: string, City: string }[]\r\n\t) { }\r\n\r\n\tpublic reset() {\r\n\t\tthis.FirstName = \"\";\r\n\t\tthis.LastName = \"\";\r\n\t\tthis.BirthDate = \"\",\r\n\t\tthis.UserName = \"\",\r\n\t\tthis.Password = \"\",\r\n\t\tthis.SelectedSchool = null;\r\n\t\tthis.Schools = null;\r\n\t}\r\n}\r\n\r\nexport class EditStudent implements ISaveUser {\r\n\tRole = \"Student\";\r\n\tconstructor(\r\n\t\tpublic PersonId: number,\r\n\t\tpublic FirstName: string,\r\n\t\tpublic LastName: string,\r\n\t\tpublic BirthDate: string,\r\n\t\tpublic UserName: string,\r\n\t\tpublic Password: string,\r\n\t\tpublic SelectedSchool: any,\r\n\t\tpublic Schools: { SchoolId: number, SchoolName: string, City: string }[]\r\n\t) { }\r\n\r\n\tpublic reset() {\r\n\t\tthis.PersonId = null;\r\n\t\tthis.FirstName = \"\";\r\n\t\tthis.LastName = \"\";\r\n\t\tthis.BirthDate = \"\",\r\n\t\tthis.UserName = \"\",\r\n\t\tthis.Password = \"\",\r\n\t\tthis.SelectedSchool = null;\r\n\t\tthis.Schools = null;\r\n\t}\r\n}\r\n\r\nexport interface IAnonymousUser {\r\n\tEmail: string,\r\n\tEmailStatus?: boolean,\r\n\tInstitutionCode: string\r\n};\r\n\r\nexport class NewAnonymousUser implements IAnonymousUser {\r\n\tconstructor() { }\r\n\tEmail = \"\";\r\n\tEmailStatus = null as any;\r\n\tInstitutionCode = \"\";\r\n}\r\n\r\n\r\n@Injectable({\r\n\tprovidedIn: 'root'\r\n})\r\nexport class UserAPIService {\r\n\tconstructor(\r\n\t\tprivate userInfo: UserInfoService,\r\n\t\tprivate http: HttpClient\r\n\t) { }\r\n\r\n\tprivate url = AppSettingService.appConfig.JourneyAPIUrl + \"User\";\r\n\r\n\tadminSearch(role:string, schoolId:number, kw: string, limit: number, offset: number): Rx.Observable {\r\n\t\tkw = kw.trim();\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + '/Admin?role=' + role + '&schoolId=' + (schoolId==null?'':encodeURIComponent(schoolId)) + '&kw=' + encodeURIComponent(kw) + '&limit=' + limit.toString() + '&offset=' + offset.toString(),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tadminGet(personId: number): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/Admin/\" + personId.toString(),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tadminSave(user: ISaveUser): Rx.Observable {\r\n\t\treturn this.http.post(\r\n\t\t\tthis.url + \"/Admin\",\r\n\t\t\tuser,\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tregister(reg:any): Rx.Observable {\r\n\t\treturn this.http.post(\r\n\t\t\tthis.url + \"/Signup\",\r\n\t\t\treg\r\n\t\t);\r\n\t}\r\n\r\n\tglobalRegister(reg: any): Rx.Observable {\r\n\t\treturn this.http.post(\r\n\t\t\tthis.url + \"/GlobalSignup\",\r\n\t\t\treg\r\n\t\t);\r\n\t}\r\n\r\n\tupdateGlobalAccountReqiretCount(): Rx.Observable {\r\n\t\treturn this.http.put(\r\n\t\t\tthis.url + \"/GlobalSignup/Require\",\r\n\t\t\tnull,\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t)\r\n\t}\r\n\r\n\tgetGlobalAccountReqiretCount(): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/GlobalSignup/Require\",\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t)\r\n\t}\r\n\r\n\tsendEmailVerification(email: string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/VerifyEmail/Send?email=\" + encodeURIComponent(email),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tconfirmEmailVerification(email: string, code:string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/VerifyEmail/Confirm?email=\" + encodeURIComponent(email) + \"&code=\" + encodeURIComponent(code),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tcheckUserNameExist(username: string, zoneName: string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/CheckUserNameExist?username=\" + encodeURIComponent(username) + \"&zone=\" + encodeURIComponent(zoneName)\r\n\t\t);\r\n\t}\r\n\r\n\tcheckValidationCodeExist(code:string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + '/CheckValidationCodeExist?code=' + encodeURIComponent(code)\r\n\t\t);\r\n\t}\r\n\r\n\tresetPassword(req:any): Rx.Observable {\r\n\t\treturn this.http.post(\r\n\t\t\tthis.url + \"/ResetPassword\",\r\n\t\t\treq\r\n\t\t);\r\n\t}\r\n\r\n\t// Anonymous\r\n\tsaveAnonymousUser(data: IAnonymousUser): Rx.Observable {\r\n\t\treturn this.http.post(\r\n\t\t\tthis.url + \"/AnonymousUser\",\r\n\t\t\tdata,\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t};\r\n\r\n\tgetAnonymousUser(id: string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/AnonymousUser/\" + encodeURIComponent(id),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\ttransferAnonymousUserData (anonymousUserLink: string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + '/AnonymousUser/' + encodeURIComponent(anonymousUserLink) + '/TransferData',\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tcopyAnonymousSessionData(sessionId: string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + '/AnonymousUser/' + encodeURIComponent(sessionId) + '/CopySessionData',\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\t//admin\r\n\tgetUserProfile(userId: string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/UserProfile\" + (userId != null && userId.length > 0 ? \"?UserId=\" + userId : \"\"),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n}\r\n\r\n\r\nimport { IClassStudentPicker } from '../class/enrollment.service';\r\n@Injectable({\r\n\tprovidedIn: 'root'\r\n})\r\nexport class ActivityAPIService {\r\n\tconstructor(\r\n\t\tprivate userInfo: UserInfoService,\r\n\t\tprivate http: HttpClient,\r\n\t\tprivate mapAPI: MapAPIService\r\n\t) { }\r\n\r\n\tprivate url = AppSettingService.appConfig.JourneyAPIUrl + \"Activity\";\r\n\r\n\tuserInstitutionsVisited(userId: string, offset: number, limit: number): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + '/Institution?userId=' + encodeURIComponent(userId) + '&offset= ' + offset.toString() + '&limit=' + limit.toString(),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tgetActivityTotal(userId: string, activityType: number, objectType: number, depth: number): Rx.Observable {\r\n\t\tvar link = \"\";\r\n\t\tif (depth == null) {\r\n\t\t\tlink = this.url + '/TotalCount?userId=' + encodeURIComponent(userId) + '&activityType= ' + encodeURIComponent(activityType) + '&objectType=' + encodeURIComponent(objectType);\r\n\t\t}\r\n\t\telse {\r\n\t\t\tlink = this.url + '/TotalCount?userId=' + encodeURIComponent(userId) + '&activityType= ' + encodeURIComponent(activityType) + '&objectType=' + encodeURIComponent(objectType) + '&depth=' + encodeURIComponent(depth);\r\n\t\t}\r\n\t\treturn this.http.get(\r\n\t\t\tlink,\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tgetSummary(filter: IClassStudentPicker): Rx.Observable {\r\n\t\treturn this.http.post(\r\n\t\t\tthis.url + \"/Summary\",\r\n\t\t\tfilter,\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tgetStats(filter: IClassStudentPicker): Rx.Observable {\r\n\t\treturn this.http.post(\r\n\t\t\tthis.url + \"/Stats\",\r\n\t\t\tfilter,\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tuserOccupationMetrics(userId:string): Rx.Observable {\r\n\t\treturn this.mapAPI.getUserMap().pipe(switchMap(\r\n\t\t\t(response) => {\r\n\t\t\t\treturn this.http.get(\r\n\t\t\t\t\tthis.url + '/Career/Metrics?userGuid=' + encodeURIComponent(userId) + '&careerVersion=' + encodeURIComponent(response.CareerVersion.Version),\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\twithCredentials: true,\r\n\t\t\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t\t\t}\r\n\t\t\t\t);\r\n\t\t\t}\r\n\t\t));\r\n\t}\r\n\r\n\tuserOccupationVisited(userId: string, offset:number, limit:number): Rx.Observable {\r\n\t\treturn this.mapAPI.getUserMap().pipe(switchMap(\r\n\t\t\tresponse => {\r\n\t\t\t\treturn this.http.get(\r\n\t\t\t\t\tthis.url + '/Career/Visited?userGuid=' + encodeURIComponent(userId) + '&careerVersion=' + encodeURIComponent(response.CareerVersion.Version) + '&offset=' + offset + '&limit=' + limit,\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\twithCredentials: true,\r\n\t\t\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t\t\t}\r\n\t\t\t\t);\r\n\t\t\t}\r\n\t\t));\r\n\t}\r\n\r\n\tlog(objectType: string, activitytype: string, objectId: string, note: string, associatedObjectId: string): Rx.Observable {\r\n\t\tvar data = {\r\n\t\t\t\"ActivityType\": activitytype,\r\n\t\t\t\"AssociatedObjectId\": associatedObjectId,\r\n\t\t\t\"Note\": note,\r\n\t\t\t\"ObjectId\": objectId,\r\n\t\t\t\"ObjectType\": objectType,\r\n\t\t\t\"InstitutionCode\": this.userInfo.getInstitutionCode()\r\n\t\t};\r\n\t\treturn this.http.post(\r\n\t\t\tthis.url + '/Log',\r\n\t\t\tdata,\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tgetUserActivityStats(userGuid: string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + '/UserActivityStats/' + encodeURIComponent(userGuid),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n}\r\n\r\n\r\n@Injectable({\r\n\tprovidedIn: 'root'\r\n})\r\nexport class SessionAPIService {\r\n\tconstructor(\r\n\t\tprivate userInfo: UserInfoService,\r\n\t\tprivate http: HttpClient\r\n\t) { }\r\n\r\n\tprivate url = AppSettingService.appConfig.JourneyAPIUrl + \"Session\";\r\n\r\n\tgetSessionId(): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tAppSettingService.appConfig.JourneyAPIUrl + \"Session/SessionId\"\r\n\t\t).pipe(map(\r\n\t\t\tresponse => {\r\n\t\t\t\treturn response.Detail;\r\n\t\t\t}\r\n\t\t));\r\n\t}\r\n\r\n\tsignOn(username: string, password: string, zone: string): Rx.Observable {\r\n\t\tzone = (zone ?? \"\").trim();\r\n\t\tthis.userInfo.clearStorage();\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/SignOn?UserName=\" + encodeURIComponent(username) + \"&Password=\" + encodeURIComponent(password) + \"&zone=\" + encodeURIComponent(zone)\r\n\t\t);\r\n\t}\r\n\r\n\tsignOnAsOther(otherPersonId: string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/SignOnAsOther/\" + encodeURIComponent(otherPersonId),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tglobalLogin(username: string, password: string): Rx.Observable {\r\n\t\tthis.userInfo.clearStorage();\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/GlobalSignOn?UserName=\" + encodeURIComponent(username) + \"&Password=\" + encodeURIComponent(password),\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tapiKeyLogin(apiKey: string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/APIKeySignOn?Key=\" + encodeURIComponent(apiKey)\r\n\t\t);\r\n\t}\r\n\t// get the cookie for anonymous user. We need to delay to let browser has chance to set the cookie\r\n\tanonymous(): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + '/Anonymous'\r\n\t\t);\r\n\t}\r\n\r\n\tgetSessionInfo(): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url,\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tloginReport = {\r\n\t\tlastLogin: (userId: string): Rx.Observable => {\r\n\t\t\treturn this.http.get(\r\n\t\t\t\tthis.url + \"/LoginReport/LastLogin?userGuid=\" + userId,\r\n\t\t\t\t{\r\n\t\t\t\t\twithCredentials: true,\r\n\t\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t\t}\r\n\t\t\t);\r\n\t\t},\r\n\t\tmonth: (userId: string, month: number, year: number): Rx.Observable => {\r\n\t\t\treturn this.http.get(\r\n\t\t\t\tthis.url + \"/LoginReport/Month?userGuid=\" + userId + \"&month=\" + month.toString() + \"&year=\" + year.toString(),\r\n\t\t\t\t{\r\n\t\t\t\t\twithCredentials: true,\r\n\t\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t\t}\r\n\t\t\t);\r\n\t\t},\r\n\t\tday: (userId: string, month: number, year: number): Rx.Observable => {\r\n\t\t\treturn this.http.get(\r\n\t\t\t\tthis.url + \"/LoginReport/Day?userGuid=\" + userId + \"&month=\" + month.toString() + \"&year=\" + year.toString(),\r\n\t\t\t\t{\r\n\t\t\t\t\twithCredentials: true,\r\n\t\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t\t}\r\n\t\t\t);\r\n\t\t},\r\n\t\thour: (userId: string, month: number, day: number, year: number): Rx.Observable => {\r\n\t\t\treturn this.http.get(\r\n\t\t\t\tthis.url + \"/LoginReport/Hour?userGuid=\" + userId + \"&month=\" + month.toString() + \"&year=\" + year.toString() + \"&dayNum=\" + day,\r\n\t\t\t\t{\r\n\t\t\t\t\twithCredentials: true,\r\n\t\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t\t}\r\n\t\t\t);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\r\n@Injectable({\r\n\tprovidedIn: 'root'\r\n})\r\nexport class WebAPIService {\r\n\tconstructor(\r\n\t\tprivate http: HttpClient,\r\n\t\tprivate userInfo: UserInfoService\r\n\t) { }\r\n\r\n\tprivate url = AppSettingService.appConfig.WebAPIUrl;\r\n\r\n\tsignOn(username: string, password: string, zone: string): Rx.Observable {\r\n\t\tzone = (zone ?? \"\").trim();\r\n\t\tthis.userInfo.clearStorage();\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"Session/SignOn?UserName=\" + encodeURIComponent(username) + \"&Password=\" + encodeURIComponent(password) + \"&zone=\" + encodeURIComponent(zone)\r\n\t\t);\r\n\t}\r\n\r\n\tsignOff(): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"Session/SignOff\"\r\n\t\t);\r\n\t}\r\n}\r\n\r\n","import { Injectable } from '@angular/core';\r\nimport { HttpClient } from '@angular/common/http';\r\nimport * as Rx from 'rxjs';\r\nimport { tap, map } from 'rxjs/operators';\r\nimport { AppSettingService } from '../app.service';\r\nimport { UserInfoService } from '../user/user-info.service';\r\n\r\n@Injectable({\r\n\tprovidedIn: 'root'\r\n})\r\nexport class ZoneAPIService {\r\n\tconstructor(\r\n\t\tprivate userInfo: UserInfoService,\r\n\t\tprivate http: HttpClient\r\n\t) { }\r\n\r\n\tprivate url = AppSettingService.appConfig.JourneyAPIUrl + \"Zone\";\r\n\r\n\tgetUserZone(): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/UserZone\",\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tallowCreateConnection(): Rx.Observable {\r\n\t\treturn this.http.get (\r\n\t\t\tthis.url + \"/AllowCreateConection\",\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tgetZone(zoneName: string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/Name/\" + encodeURIComponent(zoneName)\r\n\t\t);\r\n\t}\r\n\r\n\tsearchZone(zoneName: string): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/Search?kw=\" + encodeURIComponent(zoneName)\r\n\t\t);\r\n\t}\r\n\r\n\tgetStatus(): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/Status\",\r\n\t\t\t{\r\n\t\t\t\twithCredentials: true,\r\n\t\t\t\theaders: { 'Authorization': this.userInfo.authHeader(false) }\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tgetPublicZone(): Rx.Observable {\r\n\t\treturn this.http.get(\r\n\t\t\tthis.url + \"/PublicZone\"\r\n\t\t);\r\n\t}\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { MatDialog } from '@angular/material/dialog';\r\nimport moment from 'moment';\r\nimport * as Rx from 'rxjs';\r\nimport { AppSettingService } from '../app.service';\r\nimport { FeatureNotAvailableDialog, ReadMoreDialog, FeatureNotAvailable2BDialog, ImageCropperDialog, CropperType } from './utility.component';\r\n\r\n\r\n@Injectable({\r\n\tprovidedIn: 'root'\r\n})\r\nexport class UtilityService {\r\n\tconstructor(\r\n\t\tprivate dialog: MatDialog\r\n\t) { }\r\n\r\n\topenNewFeatureDialog() {\r\n\t\tthis.dialog.open(\r\n\t\t\tFeatureNotAvailableDialog,\r\n\t\t\t{\r\n\t\t\t\tmaxWidth: '850px',\r\n\t\t\t\tdisableClose: false,\r\n\t\t\t\tautoFocus: true,\r\n\t\t\t\tpanelClass: 'jmDialog'\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\topenReadMoreDialog(title: string, desc: string, url: string) {\r\n\t\tthis.dialog.open(\r\n\t\t\tReadMoreDialog,\r\n\t\t\t{\r\n\t\t\t\tmaxWidth: '500px',\r\n\t\t\t\tdisableClose: false,\r\n\t\t\t\tautoFocus: true,\r\n\t\t\t\tpanelClass: 'jmDialog',\r\n\t\t\t\tdata: {\r\n\t\t\t\t\t'title': title.trim(),\r\n\t\t\t\t\t'description': desc.trim(),\r\n\t\t\t\t\t'objectURL': url.trim()\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\topenNewFeatureDialog2B(img: string) {\r\n\t\timg = img ?? \"assets/images/connections-followers-favorites-lg.png\";\r\n\t\tthis.dialog.open(\r\n\t\t\tFeatureNotAvailable2BDialog,\r\n\t\t\t{\r\n\t\t\t\tmaxWidth: '850px',\r\n\t\t\t\twidth:'95%',\r\n\t\t\t\tdisableClose: false,\r\n\t\t\t\tautoFocus: true,\r\n\t\t\t\tpanelClass: 'jmDialog',\r\n\t\t\t\tdata: {\r\n\t\t\t\t\t'img': img\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\topenImageCropper(imgType: CropperType, img: string): Rx.Observable {\r\n\t\tlet maxWidth: string = AppSettingService.widgetMobile() ? \"99%\" : \"850px\";\r\n\t\tlet popup = this.dialog.open(\r\n\t\t\tImageCropperDialog,\r\n\t\t\t{\r\n\t\t\t\tdisableClose: true,\r\n\t\t\t\tmaxWidth: maxWidth,\r\n\t\t\t\tpanelClass: 'jmDialogNoScroll',\r\n\t\t\t\tdata: {\r\n\t\t\t\t\timgType: imgType,\r\n\t\t\t\t\tselectedImage: img\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t);\r\n\t\treturn popup.afterClosed();\r\n\t}\r\n}\r\n\r\n\r\n\r\n@Injectable({\r\n\tprovidedIn: 'root'\r\n})\r\nexport class ValidateDateService {\r\n\tminMonth = 1;\r\n\tmaxMonth = 12;\r\n\tminDay = 1;\r\n\tmaxDay = 31;\r\n\tminYear = 1900;\r\n\tmaxYear = 1900;\r\n\tprivate dateError = '';\r\n\r\n\tconstructor() {\r\n\t\tthis.maxYear = parseInt(moment().format('YYYY'));\r\n\t}\r\n\r\n\tget DateError(): string {\r\n\t\treturn this.dateError;\r\n\t}\r\n\tset DateError(msg: string) {\r\n\t\tthis.dateError = msg;\r\n\t}\r\n\r\n\tvalidateMonth(month: any): any {\r\n\t\tif (typeof month !== 'undefined' && month.length > 0) {\r\n\t\t\tif (this.validateFormat(this.minMonth, this.maxMonth, month) === false) {\r\n\t\t\t\tthis.DateError = 'Month format is MM (01-12)';\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\t\t\treturn true;\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.DateError = 'Month is empty';\r\n\t\t\treturn false;\r\n\t\t}\r\n\t}\r\n\r\n\tvalidateDay(day: any): any {\r\n\t\tif (typeof day !== 'undefined' && day.length > 0) {\r\n\t\t\tif (this.validateFormat(this.minDay, this.maxDay, day) === false) {\r\n\t\t\t\tthis.DateError = 'Day format is DD (01-31)';\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\t\t\treturn true;\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.DateError = 'Day is empty';\r\n\t\t\treturn false;\r\n\t\t}\r\n\t}\r\n\r\n\tvalidateYear(year: any): any {\r\n\t\tif (typeof year !== 'undefined' && year.length > 0) {\r\n\t\t\tif (this.validateFormat(this.minYear, this.maxYear, year) === false) {\r\n\t\t\t\t//console.log('year format');\r\n\t\t\t\tthis.DateError = 'Year format is YYYY (1900-' + this.maxYear + ')';\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\t\t\treturn true;\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.DateError = 'Year is empty';\r\n\t\t\treturn false;\r\n\t\t}\r\n\t}\r\n\r\n\tvalidateDateString(date: any): any {\r\n\t\treturn moment(date).isValid();\r\n\t}\r\n\r\n\tcreateDateString(month: any, day: any, year: any): any {\r\n\t\treturn moment(year + '-' + month + '-' + day).format('YYYY-MM-DD');\r\n\t}\r\n\r\n\tvalidateDate(month: any, day: any, year: any): any {\r\n\t\tif (this.validateMonth(month) && this.validateDay(day) && this.validateYear(year)) {\r\n\t\t\tvar date = this.createDateString(month, day, year);\r\n\t\t\treturn moment(date).isValid();\r\n\t\t}\r\n\t\treturn false;\r\n\t}\r\n\r\n\tvalidateFormat(min: any, max: any, val: any): any {\r\n\t\tvar tempFormat = '';\r\n\t\tfor (var i = min; i <= max; i++) {\r\n\t\t\ttempFormat = i;\r\n\t\t\tif (i / 10 < 1) {\r\n\t\t\t\ttempFormat = '0' + i.toString();\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\ttempFormat = i.toString();\r\n\t\t\t}\r\n\t\t\tif (tempFormat === val) {\r\n\t\t\t\treturn true;\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn false;\r\n\t}\r\n}\r\n\r\n@Injectable({\r\n\tprovidedIn: 'root'\r\n})\r\nexport class DOBService {\r\n\tconstructor(private vDate: ValidateDateService) {\r\n\t}\r\n\r\n\tprivate _month: string;\r\n\tprivate _day: string;\r\n\tprivate _year: string;\r\n\tprivate _dob: string = \"\";\r\n\tprivate _age?: number = null;\r\n\tprivate _minAge: number = 13;\r\n\tprivate _dateError: string = \"\";\r\n\r\n\tset Month(v: string) { this._month = v; }\r\n\tget Month(): string { return this._month; }\r\n\r\n\tset Day(day: string) { this._day = day; }\r\n\tget Day(): string { return this._day; }\r\n\r\n\tset Year(year: string) { this._year = year; }\r\n\tget Year(): string { return this._year; }\r\n\r\n\tset Dob(dob: string) { this._dob = dob; };\r\n\tget Dob(): string { return this._dob; }\r\n\r\n\tset Age(age: number) { this._age = age; }\r\n\tget Age(): number { return this._age; };\r\n\r\n\tvalidate(format: string, val: string): any {\r\n\t\tlet res = { 'result': false, 'dateresult': false };\r\n\t\tif (format === 'month') {\r\n\t\t\tif (this.vDate.validateMonth(val) === true) {\r\n\t\t\t\tthis.Month = val;\r\n\t\t\t\tres.result = true;\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.Month = \"\";\r\n\t\t\t}\r\n\t\t}\r\n\t\telse if (format === 'day') {\r\n\t\t\t//console.log(attrs.nextElement);\r\n\t\t\tif (this.vDate.validateDay(val) === true) {\r\n\t\t\t\tthis.Day = val;\r\n\t\t\t\tres.result = true;\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.Day = \"\";\r\n\t\t\t}\r\n\t\t}\r\n\t\telse if (format === 'year') {\r\n\t\t\t//console.log(attrs.nextElement);\r\n\t\t\tif (this.vDate.validateYear(val) === true) {\r\n\t\t\t\tthis.Year = val;\r\n\t\t\t\tres.result = true;\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.Year = \"\";\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t//when all the values are set, validate date\r\n\t\tif (format === 'year' && this._year.length > 0 && this.vDate.validateDate(this._month, this._day, this._year) === true) {\r\n\t\t\tres.dateresult = true;\r\n\t\t\tthis.Dob = this.vDate.createDateString(this._month, this._day, this._year);\r\n\t\t\tthis.Age = moment().diff(this.Dob, 'y', true);\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis._dateError = this.vDate.DateError;\r\n\t\t}\r\n\r\n\t\treturn res;\r\n\t}\r\n\r\n\tgetDateError(): any {\r\n\t\treturn this._dateError;\r\n\t}\r\n\r\n\tvalidateDate(month: string, day: string, year: string): any {\r\n\t\t//console.log('validateDate');\r\n\t\tvar res = this.validate('month', month);\r\n\t\tif (res.result === true) {\r\n\t\t\tres = this.validate('day', day);\r\n\t\t\tif (res.result === true) {\r\n\t\t\t\tres = this.validate('year', year);\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn res.dateresult;\r\n\t}\r\n\r\n\tvalidateAge(): boolean {\r\n\t\tif (this._age != null) {\r\n\t\t\tif (this._age >= this._minAge) {\r\n\t\t\t\treturn true;\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\t\t}\r\n\t\telse {\r\n\t\t\treturn null;\r\n\t\t}\r\n\t}\r\n}\r\n","import { Pipe, PipeTransform } from '@angular/core';\r\nimport { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';\r\n\r\n@Pipe({\r\n\tname: 'safe',\r\n\tstandalone: false\r\n})\r\nexport class SafePipe {\r\n\tconstructor(protected _sanitizer: DomSanitizer) {\r\n\t}\r\n\r\n\tpublic transform(value: string, type: string = 'html'): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {\r\n\t\tswitch (type) {\r\n\t\t\tcase 'html': return this._sanitizer.bypassSecurityTrustHtml(value);\r\n\t\t\tcase 'style': return this._sanitizer.bypassSecurityTrustStyle(value);\r\n\t\t\tcase 'script': return this._sanitizer.bypassSecurityTrustScript(value);\r\n\t\t\tcase 'url': return this._sanitizer.bypassSecurityTrustUrl(value);\r\n\t\t\tcase 'resourceUrl': return this._sanitizer.bypassSecurityTrustResourceUrl(value);\r\n\t\t\tdefault: throw new Error(`Invalid safe type specified: ${type}`);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n/* ex 2/14/24, 09:49 AM */\r\n@Pipe({\r\n\tname: 'formatDateTime',\r\n\tpure: true,\r\n\tstandalone: false\r\n})\r\nexport class FormatDateTimePipe implements PipeTransform {\r\n\ttransform(value: string): any {\r\n\t\treturn this.getDateTime(value);\r\n\t}\r\n\tgetDateTime(date: string): string {\r\n\t\ttry {\r\n\t\t\tvar t = new Date(date);\r\n\t\t\treturn t.toLocaleTimeString([], { year: '2-digit', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' });\r\n\t\t}\r\n\t\tcatch (ex) {\r\n\t\t\treturn \"\";\r\n\t\t}\r\n\t}\r\n}\r\n\r\n/* ex December 19, 2012 */\r\n@Pipe({\r\n\tname: 'formatDate',\r\n\tpure: true,\r\n\tstandalone: false\r\n})\r\nexport class FormatDatePipe implements PipeTransform {\r\n\ttransform(value: string): any {\r\n\t\treturn this.getDateTime(value);\r\n\t}\r\n\tgetDateTime(date: string): string {\r\n\t\ttry {\r\n\t\t\tvar t = new Date(date);\r\n\t\t\treturn t.toLocaleDateString([], { year: '2-digit', month: 'short', day: 'numeric' });\r\n\t\t}\r\n\t\tcatch (ex) {\r\n\t\t\treturn \"\";\r\n\t\t}\r\n\t}\r\n}\r\n","import { Component, Inject, ElementRef, HostListener, ViewChild } from '@angular/core';\r\nimport { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';\r\nimport { ImageCropperComponent, ImageCroppedEvent } from 'ngx-image-cropper';\r\nimport { DomSanitizer } from '@angular/platform-browser';\r\n\r\n@Component({\r\n\tselector: \"app-feature-not-available-dialog\",\r\n\ttemplateUrl: \"./feature-not-available.dialog.html\",\r\n\tstandalone: false\r\n})\r\nexport class FeatureNotAvailableDialog {\r\n\tclose(e: any): void {\r\n\t\tthis.dialogRef.close();\r\n\t}\r\n\r\n\tconstructor(\r\n\t\tpublic dialogRef: MatDialogRef) {\r\n\t}\r\n}\r\n\r\n\r\n@Component({\r\n\tselector: \"app-read-more-dialog\",\r\n\ttemplateUrl: \"./read-more.dialog.html\",\r\n\tstandalone: false\r\n})\r\nexport class ReadMoreDialog {\r\n\ttitle: string;\r\n\tdescription: string;\r\n\tobjectURL: string;\r\n\r\n\tconstructor(\r\n\t\tpublic dialogRef: MatDialogRef,\r\n\t\t@Inject(MAT_DIALOG_DATA) public data: any\r\n\t) {\r\n\t\tthis.title = data?.title ?? \"\";\r\n\t\tthis.description = data?.description ?? \"\";\r\n\t\tthis.objectURL = data?.objectURL ?? \"\";\r\n\t}\r\n\r\n\tclose(e: any): void {\r\n\t\tthis.dialogRef.close();\r\n\t}\r\n\r\n\tgo(url: any) {\r\n\t\twindow.open(url);\r\n\t}\r\n}\r\n\r\n\r\n@Component({\r\n\tselector: \"app-feature-not-available-2b-dialog\",\r\n\ttemplateUrl: \"./feature-not-available-2b.dialog.html\",\r\n\tstandalone: false\r\n})\r\nexport class FeatureNotAvailable2BDialog {\r\n\timg: string;\r\n\r\n\tconstructor(\r\n\t\tpublic dialogRef: MatDialogRef,\r\n\t\t@Inject(MAT_DIALOG_DATA) public data: any\r\n\t) {\r\n\t\tthis.img = data.img;\r\n\t\tthis.img = this.img ?? \"assets/images/connections-followers-favorites-lg.png\";\r\n\t}\r\n\r\n\tclose(e: any): void {\r\n\t\tthis.dialogRef.close();\r\n\t}\r\n}\r\n\r\n\r\n//https://www.bennadel.com/blog/3831-hiding-overflow-scrollbars-until-hover-ala-gmail-labels-in-angular-9-1-7.htm\r\n@Component({\r\n\tselector: \"app-scroll-on-hover\",\r\n\thost: {\r\n\t\t\"[class.is-scrollable]\": \"isScrollable\",\r\n\t\t\"(mouseenter)\": \"enable()\",\r\n\t\t\"(mouseleave)\": \"disable()\"\r\n\t},\r\n\tstyles: [\r\n\t\t`\r\n\t\t\t:host {display: block;\toverflow: hidden;}\r\n\t\t\t:host( .is-scrollable ) {overflow: auto; overscroll-behavior: contain;}\r\n\t\t\t.wrapper {width: calc( 100% - 16px );}\r\n\t\t`\r\n\t],\r\n\ttemplate:\r\n\t\t`\r\n\t\t\r\n\t\t\t\r\n\t\t
\r\n\t`,\r\n\tstandalone: false\r\n})\r\nexport class ScrollOnHoverComponent {\r\n\tpublic isScrollable: boolean;\r\n\tpublic wrapperWidth: number | null;\r\n\tprivate elementRef: ElementRef;\r\n\r\n\t// I initialize the scroll-on-mouseenter component.\r\n\tconstructor(elementRef: ElementRef) {\r\n\t\tthis.elementRef = elementRef;\r\n\t\tthis.isScrollable = false;\r\n\t\tthis.wrapperWidth = null;\r\n\t}\r\n\r\n\t// I disable scrolling on the host component.\r\n\tpublic disable(): void {\r\n\t\tthis.isScrollable = false;\r\n\t\tthis.wrapperWidth = null;\r\n\t}\r\n\r\n\t// I enable scrolling on the host component.\r\n\tpublic enable(): void {\r\n\t\tthis.isScrollable = true;\r\n\t\tthis.wrapperWidth = this.elementRef.nativeElement.childNodes[0].clientWidth;\r\n\t}\r\n}\r\n\r\n\r\nexport type CropperType = \"circle\" | \"rectangle\";\r\n@Component({\r\n\tselector: \"app-image-cropper\",\r\n\ttemplateUrl: \"./image-cropper.dialog.html\",\r\n\tstyles: [`\r\n\t\t.crop-option-col {\r\n\t\t\ttext-align: right;\r\n\t\t\tmargin-top: 20px;\r\n\t\t\tmargin-right: 30px;\r\n\t\t\tmargin-left: -30px;\r\n\t\t}\r\n\t\t.crop-option-col img {\r\n\t\t\twidth: 20px;\r\n\t\t\theight: auto;\r\n\t\t\tmargin-top: -5px;\r\n\t\t}\r\n\t\t.crop-option-col img:nth-child(2) {\r\n\t\t\twidth: 16px;\r\n\t\t}\r\n\t`],\r\n\tstandalone: false\r\n})\r\nexport class ImageCropperDialog {\r\n\timgType: CropperType;\r\n\timageChangedEvent: any = null;\r\n\tselectedImage: any = \"\";\r\n\timageWidth: number = 0;\r\n\timageHeight: number = 0;\r\n\tclientWidth: number = 0;\r\n\tclientHeight: number = 0;\r\n\r\n\t@ViewChild(\"imageCropper\") imageCropper: ImageCropperComponent;\r\n\tmodalSize = { width: 600, height: 450 };\r\n\tcanvasSize = { width: 600, height: 300 };\r\n\taspectRatio: number = 1;\r\n\troundCropper: boolean = false;\r\n\tresizeToWidth: number = 0;\r\n\tresizeToHeight: number = 0;\r\n\tcroppedImage: any = null;\r\n\r\n\tconstructor(\r\n\t\tprivate dialogRef: MatDialogRef,\r\n\t\t@Inject(MAT_DIALOG_DATA) private data: any,\r\n\t\tprivate sanitizer: DomSanitizer\r\n\t) {\r\n\t\tthis.imgType = data.imgType;\r\n\t\tthis.selectedImage = data.selectedImage;\r\n\r\n\t\tif (this.imgType === \"circle\") {\r\n\t\t\tthis.modalSize = { width: 600, height: 450 };\r\n\t\t\tthis.canvasSize = { width: 300, height: 300 };\r\n\t\t\tthis.aspectRatio = 1;\r\n\t\t\tthis.roundCropper = true;\r\n\t\t\tthis.resizeToWidth = 230;\r\n\t\t\tthis.resizeToHeight = 230;\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.modalSize = { width: 600, height: 450 };\r\n\t\t\tthis.canvasSize = { width: 520, height: 260 };\r\n\t\t\tthis.aspectRatio = 2;\r\n\t\t\tthis.roundCropper = false;\r\n\t\t\tthis.resizeToWidth = 1200;\r\n\t\t\tthis.resizeToHeight = 600;\r\n\t\t}\r\n\t}\r\n\r\n\tprivate getImageSize(): Promise {\r\n\t\treturn new Promise((resolve, reject) => {\r\n\t\t\tlet image = new Image() as HTMLImageElement;\r\n\t\t\timage.src = this.selectedImage.toString();\r\n\t\t\timage.onload = ($event) => {\r\n\t\t\t\tthis.imageHeight = ($event.currentTarget as HTMLImageElement).height;\r\n\t\t\t\tthis.imageWidth = ($event.currentTarget as HTMLImageElement).width;\r\n\t\t\t\tresolve({\r\n\t\t\t\t\theight: this.imageHeight,\r\n\t\t\t\t\twidth: this.imageWidth\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t});\r\n\t}\r\n\r\n\tprivate setDisplay(): void {\r\n\t\tif (window.innerWidth <= this.modalSize.width) {\r\n\t\t\tthis.modalSize.width = window.innerWidth - 20;\r\n\t\t\tthis.canvasSize.width = this.modalSize.width;\r\n\t\t}\r\n\t\tif (window.innerHeight <= this.modalSize.height) {\r\n\t\t\tthis.modalSize.height = window.innerHeight - 10;\r\n\t\t\tthis.canvasSize.height = this.modalSize.height;\r\n\t\t}\r\n\t}\r\n\r\n\timageCropped(event: ImageCroppedEvent) {\r\n\t\tthis.croppedImage = event.base64;\r\n\t}\r\n\r\n\timageLoaded() {\r\n\t\t// show cropper\r\n\t\tthis.clientHeight = this.imageCropper.sourceImage.nativeElement.clientHeight;\r\n\t\tthis.clientWidth = this.imageCropper.sourceImage.nativeElement.clientWidth;\r\n\t\tif (window.innerHeight + 150 <= this.clientHeight) {\r\n\t\t\tthis.modalSize.height = window.innerHeight - 20;\r\n\t\t\tthis.canvasSize.height = window.innerHeight - 170;\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.modalSize.height = this.clientHeight + 150;\r\n\t\t\tthis.canvasSize.height = this.clientHeight;\r\n\t\t}\r\n\t}\r\n\r\n\tcropperReady() {\r\n\t\t// cropper ready\r\n\t}\r\n\r\n\tloadImageFailed() {\r\n\t\tthis.dialogRef.close(null);\r\n\t}\r\n\r\n\tsave() {\r\n\t\tthis.dialogRef.close(this.croppedImage);\r\n\t}\r\n\r\n\tcancel() {\r\n\t\tthis.dialogRef.close(null);\r\n\t}\r\n\r\n\tisRotating: boolean = false;\r\n\trotate(isClockwise: any) {\r\n\t\tif (!this.selectedImage) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tthis.isRotating = true;\r\n\t\tthis.rotateBase64Image(\r\n\t\t\tthis.selectedImage,\r\n\t\t\tisClockwise,\r\n\t\t\t(result: any) => {\r\n\t\t\t\tthis.selectedImage = result;\r\n\t\t\t\tthis.getImageSize();\r\n\t\t\t\tthis.isRotating = false;\r\n\t\t\t}\r\n\t\t);\r\n\t}\r\n\r\n\tprivate rotateBase64Image(base64data: any, isClockwise: any, callback: any): void {\r\n\t\tvar image = new Image();\r\n\t\timage.src = base64data;\r\n\t\timage.onload = function () {\r\n\t\t\tlet canvas = document.createElement('canvas');\r\n\t\t\tcanvas.width = image.height;\r\n\t\t\tcanvas.height = image.width;\r\n\t\t\tlet ctx = canvas.getContext(\"2d\");\r\n\t\t\tlet deg = isClockwise ? Math.PI / 2 : Math.PI / -2;\r\n\t\t\tctx.translate(canvas.width / 2, canvas.height / 2);\r\n\t\t\tctx.rotate(deg);\r\n\t\t\tctx.drawImage(image, -image.width / 2, -image.height / 2);\r\n\t\t\tctx.rotate(-deg);\r\n\t\t\tctx.translate(-canvas.width / 2, -canvas.height / 2);\r\n\t\t\tcallback(canvas.toDataURL());\r\n\t\t};\r\n\t}\r\n\r\n\r\n\t@HostListener('window:resize', ['$event'])\r\n\tonResize(e: any): void {\r\n\t\tthis.setDisplay();\r\n\t}\r\n\r\n\tngOnInit(): void {\r\n\t\tthis.getImageSize();\r\n\t\tthis.setDisplay();\r\n\t}\r\n}\r\n\r\n","\r\n\t
\r\n\t\t
\r\n\t\t
w:{{imageWidth}}, h:{{imageHeight}}, Client=>w:{{clientWidth}},h:{{clientHeight}}\">Crop Image
\r\n\t\t
\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t
\r\n\t
\r\n\t
\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t
\r\n\t\t
\r\n\t
\r\n\t
\r\n\t\t
\r\n\t\t
\r\n\t\t\t\r\n\t\t
\r\n\t\t
\r\n\t
\r\n
\r\n\t
\r\n\t\t\r\n\t
\r\n\t\r\n\t
\r\n\t\t
This feature is on its way!
\r\n\t
\r\n\r\n\t\r\n\t
\r\n\t\t
\r\n\t\t\t
Love Journeys? Then you'll love what is coming next.
\r\n\t\t
\r\n\t\t
\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t\r\n\t\t\t
\r\n\t\t
\r\n\t
\r\n\r\n\t\r\n\t
\r\n\t\t
![](\"assets/images/clouds.png\")
\r\n\t
\r\n
\r\n\t
\r\n\t\t\r\n\t
\r\n\t
\r\n\t\t
\r\n\t\t
\r\n\t\t
\r\n\t
\r\n
\r\n\t
\r\n\t\t\r\n\t
\r\n\t
\r\n\t\r\n\t
\r\n\t\t
\r\n\t\t\t
![]()
\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t
This feature is on its way!
\r\n\t\t\t
\r\n\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\t
Love Journeys? Then you'll love what is coming next.
\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t
\r\n\t
\r\n\t\r\n\t
\r\n\t\t
\r\n\t
\r\n
\r\n\t\t\t
\r\n\t\t\t
\r\n\t\t
\r\n\t\r\n\t
\r\n\t\t\r\n\t\t
![](\"assets/images/authenticationFlow/journeysmap.png\")
\r\n\t\t\r\n\t\t
\r\n\t\t\t
![](\"assets/images/authenticationFlow/login_splash.png\")
\r\n\t\t
\r\n\t\t\r\n\t\t
\r\n\t\t\t
![](\"assets/images/authenticationFlow/signup_name.png\")
\r\n\t\t\t
![](\"assets/images/authenticationFlow/signup_email.png\")
\r\n\t\t\t
![](\"assets/images/authenticationFlow/signup_password.png\")
\r\n\t\t\t
![](\"assets/images/authenticationFlow/signup_birthday.png\")
\r\n\t\t\t
![](\"assets/images/authenticationFlow/signup_connectioncode_ask.png\")
\r\n\t\t\t
![](\"assets/images/authenticationFlow/signup_processing.png\")
\r\n\t\t
\r\n\t\t\r\n\t\t
\r\n\r\n\t\t\t
![](\"assets/images/authenticationFlow/reset_password_forgot.png\")
\r\n\t\t\t
![](\"assets/images/authenticationFlow/reset_password_security_ask.png\")
\r\n\t\t\t
![](\"assets/images/authenticationFlow/reset_password_new_password.png\")
\r\n\t\t\t
![](\"assets/images/authenticationFlow/reset_password_email_sent.png\")
\r\n\t\t\t
![](\"assets/images/authenticationFlow/reset_password_expired.png\")
\r\n\t\t\t
![](\"assets/images/authenticationFlow/reset_password_options.png\")
\r\n\t\t\t
![](\"assets/images/authenticationFlow/reset_password_error.png\")
\t\t\t\r\n\t\t
\r\n\t
\r\n\t\r\n\t
\r\n\t\t\r\n\t\t
\r\n\t\t\r\n\t\t
\r\n\t
\r\n\t
\r\n\t\t\r\n\t\t
\r\n\t\t\r\n\t\t
\r\n\t\t
\r\n\t\t
\r\n\t\t
\r\n\t\t
\r\n\t\t
\r\n\t
\r\n\t
\r\n\t\t\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
![]()
\r\n\t\t
![]()
\r\n\t\t
![]()
\r\n\t\t
![]()
\r\n\t\t
![]()
\r\n\t\t
![]()
\r\n\t\t
![]()
\r\n\t
\r\n\t\r\n\t
\r\n\r\n\t\t
\r\n\t\t\t\r\n\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
=0)?'progressIndicatorCenterCurrent':'progressIndicatorCenterDefault'\">\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
=1)?'progressIndicatorCenterCurrent':'progressIndicatorCenterDefault'\">\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
=2)?'progressIndicatorCenterCurrent':'progressIndicatorCenterDefault'\">\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
=3)?'progressIndicatorCenterCurrent':'progressIndicatorCenterDefault'\">\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
=4)?'progressIndicatorCenterCurrent':'progressIndicatorCenterDefault'\">\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\tAlready have an account? Please
login!\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\r\n\t\t
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
=1)?'disableEvents':'disableEvents'\" (click)=\"signupComponent.prgIndicatorJumpTo($event, 0)\">\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
=0)?'progressIndicatorCenterCurrent':'progressIndicatorCenterDefault'\">\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
=1)?'disableEvents':'disableEvents'\" (click)=\"signupComponent.prgIndicatorJumpTo($event, 1)\">\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
=1)?'progressIndicatorCenterCurrent':'progressIndicatorCenterDefault'\">\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\tAlready have an account?
Login\r\n\t\t\t\t
\r\n\r\n\t\t\t
\r\n\t\t\r\n\t\t
\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t
If you remember your account now, please Login!
\t\t\t\t\r\n\t\t\t
\r\n\t
\r\n