{"version":3,"sources":["node_modules/@angular/cdk/fesm2022/coercion.mjs","node_modules/@angular/cdk/fesm2022/platform.mjs","node_modules/@angular/cdk/fesm2022/bidi.mjs","node_modules/@angular/cdk/fesm2022/collections.mjs","node_modules/@angular/cdk/fesm2022/scrolling.mjs","node_modules/@angular/cdk/fesm2022/private.mjs","node_modules/@angular/cdk/fesm2022/keycodes.mjs","node_modules/@angular/cdk/fesm2022/coercion/private.mjs","node_modules/@angular/cdk/fesm2022/observers.mjs","node_modules/@angular/cdk/fesm2022/layout.mjs","node_modules/@angular/cdk/fesm2022/a11y.mjs","node_modules/@angular/cdk/fesm2022/portal.mjs","node_modules/@angular/cdk/fesm2022/overlay.mjs","node_modules/@angular/cdk/fesm2022/dialog.mjs","src/app/interfaces/DialogType.ts","src/app/services/constants.ts","node_modules/@angular/cdk/fesm2022/accordion.mjs","src/app/components/base/accordion.component.ts","src/app/components/base/accordion.component.html","src/app/components/base/data.chip.component.ts","src/app/components/skill-list/skill-list.component.ts","src/app/components/skill-list/skill-list.component.html","src/app/interfaces/IDialogData.ts","src/environments/environment.ts","src/app/services/utils.ts","node_modules/@angular/material/fesm2022/core.mjs","node_modules/@angular/material/fesm2022/button.mjs","node_modules/@angular/animations/fesm2022/animations.mjs","node_modules/@angular/material/fesm2022/snack-bar.mjs","src/app/classes/LazyTranslateLoader.ts","src/app/services/auth.service.ts","src/app/services/api.service.ts","src/app/classes/Table.ts","src/app/classes/TableDefinitions.ts","src/app/classes/Finances.ts","src/app/classes/Food.ts","src/app/classes/Menu.ts","src/app/classes/Pen.ts","src/app/classes/User.ts","src/app/services/rxjs.helpers.ts","src/app/services/app-data.service.ts"],"sourcesContent":["import { ElementRef } from '@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}\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}\nfunction coerceArray(value) {\n return Array.isArray(value) ? value : [value];\n}\n\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}\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}\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 { _isNumberValue, coerceArray, coerceBooleanProperty, coerceCssPixelValue, coerceElement, coerceNumberProperty, coerceStringArray };\n","import * as i0 from '@angular/core';\nimport { inject, PLATFORM_ID, Injectable, NgModule } 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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(Platform, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\n})();\nclass PlatformModule {\n static ɵfac = function PlatformModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || PlatformModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: PlatformModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({});\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(PlatformModule, [{\n type: NgModule,\n args: [{}]\n }], null, null);\n})();\n\n/** Cached result Set of input types support by the current browser. */\nlet supportedInputTypes;\n/** Types of `` that *might* be supported. */\nconst candidateInputTypes = [\n// `color` must come first. Chrome 56 shows a warning if we change the type to `color` after\n// first changing it to something else:\n// The specified value \"\" does not conform to the required format.\n// The format is \"#rrggbb\" where rr, gg, bb are two-digit hexadecimal numbers.\n'color', 'button', 'checkbox', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week'];\n/** @returns The input types supported by this browser. */\nfunction getSupportedInputTypes() {\n // Result is cached.\n if (supportedInputTypes) {\n return supportedInputTypes;\n }\n // We can't check if an input type is not supported until we're on the browser, so say that\n // everything is supported when not on the browser. We don't use `Platform` here since it's\n // just a helper function and can't inject it.\n if (typeof document !== 'object' || !document) {\n supportedInputTypes = new Set(candidateInputTypes);\n return supportedInputTypes;\n }\n let featureTestInput = document.createElement('input');\n supportedInputTypes = new Set(candidateInputTypes.filter(value => {\n featureTestInput.setAttribute('type', value);\n return featureTestInput.type === value;\n }));\n return supportedInputTypes;\n}\n\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}\n\n/** The possible ways the browser may handle the horizontal scroll axis in RTL languages. */\nvar RtlScrollAxisType;\n(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})(RtlScrollAxisType || (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}\nlet 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}\n\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}\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { Platform, PlatformModule, RtlScrollAxisType, _getEventTarget, _getFocusedElementPierceShadowDom, _getShadowRoot, _isTestEnvironment, _supportsShadowDom, getRtlScrollAxisType, getSupportedInputTypes, normalizePassiveListenerOptions, supportsPassiveEventListeners, supportsScrollBehavior };\n","import * as i0 from '@angular/core';\nimport { InjectionToken, inject, EventEmitter, Injectable, Directive, Output, Input, NgModule } 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 = new InjectionToken('cdk-dir-doc', {\n providedIn: 'root',\n factory: DIR_DOCUMENT_FACTORY\n});\n/** @docs-private */\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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(Directionality, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\n})();\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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(Dir, [{\n type: Directive,\n args: [{\n selector: '[dir]',\n providers: [{\n provide: Directionality,\n useExisting: Dir\n }],\n host: {\n '[attr.dir]': '_rawDir'\n },\n exportAs: 'dir'\n }]\n }], null, {\n change: [{\n type: Output,\n args: ['dirChange']\n }],\n dir: [{\n type: Input\n }]\n });\n})();\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(BidiModule, [{\n type: NgModule,\n args: [{\n imports: [Dir],\n exports: [Dir]\n }]\n }], null, null);\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { BidiModule, DIR_DOCUMENT, Dir, Directionality };\n","import { ConnectableObservable, isObservable, of, Subject } from 'rxjs';\nimport * as i0 from '@angular/core';\nimport { InjectionToken, Injectable } from '@angular/core';\nclass DataSource {}\n/** Checks whether an object is a data source. */\nfunction isDataSource(value) {\n // Check if the value is a DataSource by observing if it has a connect function. Cannot\n // be checked as an `instanceof DataSource` since people could create their own sources\n // that match the interface, but don't extend DataSource. We also can't use `isObservable`\n // here, because of some internal apps.\n return value && typeof value.connect === 'function' && !(value instanceof ConnectableObservable);\n}\n\n/** DataSource wrapper for a native array. */\nclass ArrayDataSource extends DataSource {\n _data;\n constructor(_data) {\n super();\n this._data = _data;\n }\n connect() {\n return isObservable(this._data) ? this._data : of(this._data);\n }\n disconnect() {}\n}\n\n/** Indicates how a view was changed by a {@link _ViewRepeater}. */\nvar _ViewRepeaterOperation;\n(function (_ViewRepeaterOperation) {\n /** The content of an existing view was replaced with another item. */\n _ViewRepeaterOperation[_ViewRepeaterOperation[\"REPLACED\"] = 0] = \"REPLACED\";\n /** A new view was created with `createEmbeddedView`. */\n _ViewRepeaterOperation[_ViewRepeaterOperation[\"INSERTED\"] = 1] = \"INSERTED\";\n /** The position of a view changed, but the content remains the same. */\n _ViewRepeaterOperation[_ViewRepeaterOperation[\"MOVED\"] = 2] = \"MOVED\";\n /** A view was detached from the view container. */\n _ViewRepeaterOperation[_ViewRepeaterOperation[\"REMOVED\"] = 3] = \"REMOVED\";\n})(_ViewRepeaterOperation || (_ViewRepeaterOperation = {}));\n/**\n * Injection token for {@link _ViewRepeater}. This token is for use by Angular Material only.\n * @docs-private\n */\nconst _VIEW_REPEATER_STRATEGY = new InjectionToken('_ViewRepeater');\n\n/**\n * A repeater that destroys views when they are removed from a\n * {@link ViewContainerRef}. When new items are inserted into the container,\n * the repeater will always construct a new embedded view for each item.\n *\n * @template T The type for the embedded view's $implicit property.\n * @template R The type for the item in each IterableDiffer change record.\n * @template C The type for the context passed to each embedded view.\n */\nclass _DisposeViewRepeaterStrategy {\n applyChanges(changes, viewContainerRef, itemContextFactory, itemValueResolver, itemViewChanged) {\n changes.forEachOperation((record, adjustedPreviousIndex, currentIndex) => {\n let view;\n let operation;\n if (record.previousIndex == null) {\n const insertContext = itemContextFactory(record, adjustedPreviousIndex, currentIndex);\n view = viewContainerRef.createEmbeddedView(insertContext.templateRef, insertContext.context, insertContext.index);\n operation = _ViewRepeaterOperation.INSERTED;\n } else if (currentIndex == null) {\n viewContainerRef.remove(adjustedPreviousIndex);\n operation = _ViewRepeaterOperation.REMOVED;\n } else {\n view = viewContainerRef.get(adjustedPreviousIndex);\n viewContainerRef.move(view, currentIndex);\n operation = _ViewRepeaterOperation.MOVED;\n }\n if (itemViewChanged) {\n itemViewChanged({\n context: view?.context,\n operation,\n record\n });\n }\n });\n }\n detach() {}\n}\n\n/**\n * A repeater that caches views when they are removed from a\n * {@link ViewContainerRef}. When new items are inserted into the container,\n * the repeater will reuse one of the cached views instead of creating a new\n * embedded view. Recycling cached views reduces the quantity of expensive DOM\n * inserts.\n *\n * @template T The type for the embedded view's $implicit property.\n * @template R The type for the item in each IterableDiffer change record.\n * @template C The type for the context passed to each embedded view.\n */\nclass _RecycleViewRepeaterStrategy {\n /**\n * The size of the cache used to store unused views.\n * Setting the cache size to `0` will disable caching. Defaults to 20 views.\n */\n viewCacheSize = 20;\n /**\n * View cache that stores embedded view instances that have been previously stamped out,\n * but don't are not currently rendered. The view repeater will reuse these views rather than\n * creating brand new ones.\n *\n * TODO(michaeljamesparsons) Investigate whether using a linked list would improve performance.\n */\n _viewCache = [];\n /** Apply changes to the DOM. */\n applyChanges(changes, viewContainerRef, itemContextFactory, itemValueResolver, itemViewChanged) {\n // Rearrange the views to put them in the right location.\n changes.forEachOperation((record, adjustedPreviousIndex, currentIndex) => {\n let view;\n let operation;\n if (record.previousIndex == null) {\n // Item added.\n const viewArgsFactory = () => itemContextFactory(record, adjustedPreviousIndex, currentIndex);\n view = this._insertView(viewArgsFactory, currentIndex, viewContainerRef, itemValueResolver(record));\n operation = view ? _ViewRepeaterOperation.INSERTED : _ViewRepeaterOperation.REPLACED;\n } else if (currentIndex == null) {\n // Item removed.\n this._detachAndCacheView(adjustedPreviousIndex, viewContainerRef);\n operation = _ViewRepeaterOperation.REMOVED;\n } else {\n // Item moved.\n view = this._moveView(adjustedPreviousIndex, currentIndex, viewContainerRef, itemValueResolver(record));\n operation = _ViewRepeaterOperation.MOVED;\n }\n if (itemViewChanged) {\n itemViewChanged({\n context: view?.context,\n operation,\n record\n });\n }\n });\n }\n detach() {\n for (const view of this._viewCache) {\n view.destroy();\n }\n this._viewCache = [];\n }\n /**\n * Inserts a view for a new item, either from the cache or by creating a new\n * one. Returns `undefined` if the item was inserted into a cached view.\n */\n _insertView(viewArgsFactory, currentIndex, viewContainerRef, value) {\n const cachedView = this._insertViewFromCache(currentIndex, viewContainerRef);\n if (cachedView) {\n cachedView.context.$implicit = value;\n return undefined;\n }\n const viewArgs = viewArgsFactory();\n return viewContainerRef.createEmbeddedView(viewArgs.templateRef, viewArgs.context, viewArgs.index);\n }\n /** Detaches the view at the given index and inserts into the view cache. */\n _detachAndCacheView(index, viewContainerRef) {\n const detachedView = viewContainerRef.detach(index);\n this._maybeCacheView(detachedView, viewContainerRef);\n }\n /** Moves view at the previous index to the current index. */\n _moveView(adjustedPreviousIndex, currentIndex, viewContainerRef, value) {\n const view = viewContainerRef.get(adjustedPreviousIndex);\n viewContainerRef.move(view, currentIndex);\n view.context.$implicit = value;\n return view;\n }\n /**\n * Cache the given detached view. If the cache is full, the view will be\n * destroyed.\n */\n _maybeCacheView(view, viewContainerRef) {\n if (this._viewCache.length < this.viewCacheSize) {\n this._viewCache.push(view);\n } else {\n const index = viewContainerRef.indexOf(view);\n // The host component could remove views from the container outside of\n // the view repeater. It's unlikely this will occur, but just in case,\n // destroy the view on its own, otherwise destroy it through the\n // container to ensure that all the references are removed.\n if (index === -1) {\n view.destroy();\n } else {\n viewContainerRef.remove(index);\n }\n }\n }\n /** Inserts a recycled view from the cache at the given index. */\n _insertViewFromCache(index, viewContainerRef) {\n const cachedView = this._viewCache.pop();\n if (cachedView) {\n viewContainerRef.insert(cachedView, index);\n }\n return cachedView || null;\n }\n}\n\n/**\n * Class to be used to power selecting one or more options from a list.\n */\nclass SelectionModel {\n _multiple;\n _emitChanges;\n compareWith;\n /** Currently-selected values. */\n _selection = new Set();\n /** Keeps track of the deselected options that haven't been emitted by the change event. */\n _deselectedToEmit = [];\n /** Keeps track of the selected options that haven't been emitted by the change event. */\n _selectedToEmit = [];\n /** Cache for the array value of the selected items. */\n _selected;\n /** Selected values. */\n get selected() {\n if (!this._selected) {\n this._selected = Array.from(this._selection.values());\n }\n return this._selected;\n }\n /** Event emitted when the value has changed. */\n changed = new Subject();\n constructor(_multiple = false, initiallySelectedValues, _emitChanges = true, compareWith) {\n this._multiple = _multiple;\n this._emitChanges = _emitChanges;\n this.compareWith = compareWith;\n if (initiallySelectedValues && initiallySelectedValues.length) {\n if (_multiple) {\n initiallySelectedValues.forEach(value => this._markSelected(value));\n } else {\n this._markSelected(initiallySelectedValues[0]);\n }\n // Clear the array in order to avoid firing the change event for preselected values.\n this._selectedToEmit.length = 0;\n }\n }\n /**\n * Selects a value or an array of values.\n * @param values The values to select\n * @return Whether the selection changed as a result of this call\n * @breaking-change 16.0.0 make return type boolean\n */\n select(...values) {\n this._verifyValueAssignment(values);\n values.forEach(value => this._markSelected(value));\n const changed = this._hasQueuedChanges();\n this._emitChangeEvent();\n return changed;\n }\n /**\n * Deselects a value or an array of values.\n * @param values The values to deselect\n * @return Whether the selection changed as a result of this call\n * @breaking-change 16.0.0 make return type boolean\n */\n deselect(...values) {\n this._verifyValueAssignment(values);\n values.forEach(value => this._unmarkSelected(value));\n const changed = this._hasQueuedChanges();\n this._emitChangeEvent();\n return changed;\n }\n /**\n * Sets the selected values\n * @param values The new selected values\n * @return Whether the selection changed as a result of this call\n * @breaking-change 16.0.0 make return type boolean\n */\n setSelection(...values) {\n this._verifyValueAssignment(values);\n const oldValues = this.selected;\n const newSelectedSet = new Set(values);\n values.forEach(value => this._markSelected(value));\n oldValues.filter(value => !newSelectedSet.has(this._getConcreteValue(value, newSelectedSet))).forEach(value => this._unmarkSelected(value));\n const changed = this._hasQueuedChanges();\n this._emitChangeEvent();\n return changed;\n }\n /**\n * Toggles a value between selected and deselected.\n * @param value The value to toggle\n * @return Whether the selection changed as a result of this call\n * @breaking-change 16.0.0 make return type boolean\n */\n toggle(value) {\n return this.isSelected(value) ? this.deselect(value) : this.select(value);\n }\n /**\n * Clears all of the selected values.\n * @param flushEvent Whether to flush the changes in an event.\n * If false, the changes to the selection will be flushed along with the next event.\n * @return Whether the selection changed as a result of this call\n * @breaking-change 16.0.0 make return type boolean\n */\n clear(flushEvent = true) {\n this._unmarkAll();\n const changed = this._hasQueuedChanges();\n if (flushEvent) {\n this._emitChangeEvent();\n }\n return changed;\n }\n /**\n * Determines whether a value is selected.\n */\n isSelected(value) {\n return this._selection.has(this._getConcreteValue(value));\n }\n /**\n * Determines whether the model does not have a value.\n */\n isEmpty() {\n return this._selection.size === 0;\n }\n /**\n * Determines whether the model has a value.\n */\n hasValue() {\n return !this.isEmpty();\n }\n /**\n * Sorts the selected values based on a predicate function.\n */\n sort(predicate) {\n if (this._multiple && this.selected) {\n this._selected.sort(predicate);\n }\n }\n /**\n * Gets whether multiple values can be selected.\n */\n isMultipleSelection() {\n return this._multiple;\n }\n /** Emits a change event and clears the records of selected and deselected values. */\n _emitChangeEvent() {\n // Clear the selected values so they can be re-cached.\n this._selected = null;\n if (this._selectedToEmit.length || this._deselectedToEmit.length) {\n this.changed.next({\n source: this,\n added: this._selectedToEmit,\n removed: this._deselectedToEmit\n });\n this._deselectedToEmit = [];\n this._selectedToEmit = [];\n }\n }\n /** Selects a value. */\n _markSelected(value) {\n value = this._getConcreteValue(value);\n if (!this.isSelected(value)) {\n if (!this._multiple) {\n this._unmarkAll();\n }\n if (!this.isSelected(value)) {\n this._selection.add(value);\n }\n if (this._emitChanges) {\n this._selectedToEmit.push(value);\n }\n }\n }\n /** Deselects a value. */\n _unmarkSelected(value) {\n value = this._getConcreteValue(value);\n if (this.isSelected(value)) {\n this._selection.delete(value);\n if (this._emitChanges) {\n this._deselectedToEmit.push(value);\n }\n }\n }\n /** Clears out the selected values. */\n _unmarkAll() {\n if (!this.isEmpty()) {\n this._selection.forEach(value => this._unmarkSelected(value));\n }\n }\n /**\n * Verifies the value assignment and throws an error if the specified value array is\n * including multiple values while the selection model is not supporting multiple values.\n */\n _verifyValueAssignment(values) {\n if (values.length > 1 && !this._multiple && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw getMultipleValuesInSingleSelectionError();\n }\n }\n /** Whether there are queued up change to be emitted. */\n _hasQueuedChanges() {\n return !!(this._deselectedToEmit.length || this._selectedToEmit.length);\n }\n /** Returns a value that is comparable to inputValue by applying compareWith function, returns the same inputValue otherwise. */\n _getConcreteValue(inputValue, selection) {\n if (!this.compareWith) {\n return inputValue;\n } else {\n selection = selection ?? this._selection;\n for (let selectedValue of selection) {\n if (this.compareWith(inputValue, selectedValue)) {\n return selectedValue;\n }\n }\n return inputValue;\n }\n }\n}\n/**\n * Returns an error that reports that multiple values are passed into a selection model\n * with a single value.\n * @docs-private\n */\nfunction getMultipleValuesInSingleSelectionError() {\n return Error('Cannot pass multiple values into SelectionModel with single-value mode.');\n}\n\n/**\n * Class to coordinate unique selection based on name.\n * Intended to be consumed as an Angular service.\n * This service is needed because native radio change events are only fired on the item currently\n * being selected, and we still need to uncheck the previous selection.\n *\n * This service does not *store* any IDs and names because they may change at any time, so it is\n * less error-prone if they are simply passed through when the events occur.\n */\nclass UniqueSelectionDispatcher {\n _listeners = [];\n /**\n * Notify other items that selection for the given name has been set.\n * @param id ID of the item.\n * @param name Name of the item.\n */\n notify(id, name) {\n for (let listener of this._listeners) {\n listener(id, name);\n }\n }\n /**\n * Listen for future changes to item selection.\n * @return Function used to deregister listener\n */\n listen(listener) {\n this._listeners.push(listener);\n return () => {\n this._listeners = this._listeners.filter(registered => {\n return listener !== registered;\n });\n };\n }\n ngOnDestroy() {\n this._listeners = [];\n }\n static ɵfac = function UniqueSelectionDispatcher_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || UniqueSelectionDispatcher)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: UniqueSelectionDispatcher,\n factory: UniqueSelectionDispatcher.ɵfac,\n providedIn: 'root'\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(UniqueSelectionDispatcher, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], null, null);\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { ArrayDataSource, DataSource, SelectionModel, UniqueSelectionDispatcher, _DisposeViewRepeaterStrategy, _RecycleViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY, _ViewRepeaterOperation, getMultipleValuesInSingleSelectionError, isDataSource };\n","import { coerceNumberProperty, coerceElement } from '@angular/cdk/coercion';\nimport * as i0 from '@angular/core';\nimport { InjectionToken, forwardRef, Directive, Input, inject, NgZone, Injectable, ElementRef, RendererFactory2, ChangeDetectorRef, Injector, afterNextRender, booleanAttribute, Optional, Inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Output, ViewChild, ViewContainerRef, TemplateRef, IterableDiffers, NgModule } from '@angular/core';\nimport { Subject, of, Observable, fromEvent, animationFrameScheduler, asapScheduler, Subscription, isObservable } from 'rxjs';\nimport { distinctUntilChanged, auditTime, filter, takeUntil, startWith, pairwise, switchMap, shareReplay } from 'rxjs/operators';\nimport { Platform, getRtlScrollAxisType, RtlScrollAxisType, supportsScrollBehavior } from '@angular/cdk/platform';\nimport { DOCUMENT } from '@angular/common';\nimport { Directionality, BidiModule } from '@angular/cdk/bidi';\nimport { _VIEW_REPEATER_STRATEGY, isDataSource, ArrayDataSource, _RecycleViewRepeaterStrategy } from '@angular/cdk/collections';\n\n/** The injection token used to specify the virtual scrolling strategy. */\nconst _c0 = [\"contentWrapper\"];\nconst _c1 = [\"*\"];\nconst VIRTUAL_SCROLL_STRATEGY = new InjectionToken('VIRTUAL_SCROLL_STRATEGY');\n\n/** Virtual scrolling strategy for lists with items of known fixed size. */\nclass FixedSizeVirtualScrollStrategy {\n _scrolledIndexChange = new Subject();\n /** @docs-private Implemented as part of VirtualScrollStrategy. */\n scrolledIndexChange = this._scrolledIndexChange.pipe(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. */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkFixedSizeVirtualScroll, [{\n type: Directive,\n args: [{\n selector: 'cdk-virtual-scroll-viewport[itemSize]',\n providers: [{\n provide: VIRTUAL_SCROLL_STRATEGY,\n useFactory: _fixedSizeVirtualScrollStrategyFactory,\n deps: [forwardRef(() => CdkFixedSizeVirtualScroll)]\n }]\n }]\n }], null, {\n itemSize: [{\n type: Input\n }],\n minBufferPx: [{\n type: Input\n }],\n maxBufferPx: [{\n type: Input\n }]\n });\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 */\nclass ScrollDispatcher {\n _ngZone = inject(NgZone);\n _platform = inject(Platform);\n /** Used to reference correct document/window */\n _document = inject(DOCUMENT, {\n optional: true\n });\n constructor() {}\n /** Subject for notifying that a registered scrollable reference element has been scrolled. */\n _scrolled = new Subject();\n /** Keeps track of the global `scroll` and `resize` subscriptions. */\n _globalSubscription = null;\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._globalSubscription) {\n this._addGlobalListener();\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._removeGlobalListener();\n }\n };\n });\n }\n ngOnDestroy() {\n this._removeGlobalListener();\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 => {\n return !target || ancestors.indexOf(target) > -1;\n }));\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 /** Use defaultView of injected document if available or fallback to global window reference */\n _getWindow() {\n return this._document.defaultView || window;\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 /** Sets up the global scroll listeners. */\n _addGlobalListener() {\n this._globalSubscription = this._ngZone.runOutsideAngular(() => {\n const window = this._getWindow();\n return fromEvent(window.document, 'scroll').subscribe(() => this._scrolled.next());\n });\n }\n /** Cleans up the global scroll listener. */\n _removeGlobalListener() {\n if (this._globalSubscription) {\n this._globalSubscription.unsubscribe();\n this._globalSubscription = null;\n }\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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(ScrollDispatcher, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\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 */\nclass CdkScrollable {\n elementRef = inject(ElementRef);\n scrollDispatcher = inject(ScrollDispatcher);\n ngZone = inject(NgZone);\n dir = inject(Directionality, {\n optional: true\n });\n _destroyed = new Subject();\n _elementScrolled = new Observable(observer => this.ngZone.runOutsideAngular(() => fromEvent(this.elementRef.nativeElement, 'scroll').pipe(takeUntil(this._destroyed)).subscribe(observer)));\n constructor() {}\n ngOnInit() {\n this.scrollDispatcher.register(this);\n }\n ngOnDestroy() {\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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkScrollable, [{\n type: Directive,\n args: [{\n selector: '[cdk-scrollable], [cdkScrollable]'\n }]\n }], () => [], null);\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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(ViewportRuler, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\n})();\nconst VIRTUAL_SCROLLABLE = new InjectionToken('VIRTUAL_SCROLLABLE');\n/**\n * Extending the {@link CdkScrollable} to be used as scrolling container for virtual scrolling.\n */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkVirtualScrollable, [{\n type: Directive\n }], () => [], null);\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`. */\nclass 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.ɵɵInputTransformsFeature, 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;-webkit-overflow-scrolling:touch}.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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkVirtualScrollViewport, [{\n type: Component,\n args: [{\n selector: 'cdk-virtual-scroll-viewport',\n host: {\n 'class': 'cdk-virtual-scroll-viewport',\n '[class.cdk-virtual-scroll-orientation-horizontal]': 'orientation === \"horizontal\"',\n '[class.cdk-virtual-scroll-orientation-vertical]': 'orientation !== \"horizontal\"'\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{\n provide: CdkScrollable,\n useFactory: (virtualScrollable, viewport) => virtualScrollable || viewport,\n deps: [[new Optional(), new Inject(VIRTUAL_SCROLLABLE)], CdkVirtualScrollViewport]\n }],\n template: \"\\n
\\n \\n
\\n\\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;-webkit-overflow-scrolling:touch}.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 }]\n }], () => [], {\n orientation: [{\n type: Input\n }],\n appendOnly: [{\n type: Input,\n args: [{\n transform: booleanAttribute\n }]\n }],\n scrolledIndexChange: [{\n type: Output\n }],\n _contentWrapper: [{\n type: ViewChild,\n args: ['contentWrapper', {\n static: true\n }]\n }]\n });\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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkVirtualForOf, [{\n type: Directive,\n args: [{\n selector: '[cdkVirtualFor][cdkVirtualForOf]',\n providers: [{\n provide: _VIEW_REPEATER_STRATEGY,\n useClass: _RecycleViewRepeaterStrategy\n }]\n }]\n }], () => [], {\n cdkVirtualForOf: [{\n type: Input\n }],\n cdkVirtualForTrackBy: [{\n type: Input\n }],\n cdkVirtualForTemplate: [{\n type: Input\n }],\n cdkVirtualForTemplateCacheSize: [{\n type: Input\n }]\n });\n})();\n\n/**\n * Provides a virtual scrollable for the element it is attached to.\n */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkVirtualScrollableElement, [{\n type: Directive,\n args: [{\n selector: '[cdkVirtualScrollingElement]',\n providers: [{\n provide: VIRTUAL_SCROLLABLE,\n useExisting: CdkVirtualScrollableElement\n }],\n host: {\n 'class': 'cdk-virtual-scrollable'\n }\n }]\n }], () => [], null);\n})();\n\n/**\n * Provides as virtual scrollable for the global / window scrollbar.\n */\nclass CdkVirtualScrollableWindow extends CdkVirtualScrollable {\n _elementScrolled = new Observable(observer => this.ngZone.runOutsideAngular(() => fromEvent(document, 'scroll').pipe(takeUntil(this._destroyed)).subscribe(observer)));\n constructor() {\n super();\n this.elementRef = new ElementRef(document.documentElement);\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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkVirtualScrollableWindow, [{\n type: Directive,\n args: [{\n selector: 'cdk-virtual-scroll-viewport[scrollWindow]',\n providers: [{\n provide: VIRTUAL_SCROLLABLE,\n useExisting: CdkVirtualScrollableWindow\n }]\n }]\n }], () => [], null);\n})();\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkScrollableModule, [{\n type: NgModule,\n args: [{\n exports: [CdkScrollable],\n imports: [CdkScrollable]\n }]\n }], null, null);\n})();\n/**\n * @docs-primary-export\n */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(ScrollingModule, [{\n type: NgModule,\n args: [{\n imports: [BidiModule, CdkScrollableModule, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollableWindow, CdkVirtualScrollableElement],\n exports: [BidiModule, CdkScrollableModule, CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport, CdkVirtualScrollableWindow, CdkVirtualScrollableElement]\n }]\n }], null, null);\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { CdkFixedSizeVirtualScroll, CdkScrollable, CdkScrollableModule, CdkVirtualForOf, CdkVirtualScrollViewport, CdkVirtualScrollable, CdkVirtualScrollableElement, CdkVirtualScrollableWindow, DEFAULT_RESIZE_TIME, DEFAULT_SCROLL_TIME, FixedSizeVirtualScrollStrategy, ScrollDispatcher, ScrollingModule, VIRTUAL_SCROLLABLE, VIRTUAL_SCROLL_STRATEGY, ViewportRuler, _fixedSizeVirtualScrollStrategyFactory };\n","import * as i0 from '@angular/core';\nimport { inject, Injector, EnvironmentInjector, ApplicationRef, createComponent, Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';\n\n/** Apps in which we've loaded styles. */\nconst appsWithLoaders = new WeakMap();\n/**\n * Service that loads structural styles dynamically\n * and ensures that they're only loaded once per app.\n */\nclass _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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(_CdkPrivateStyleLoader, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], null, null);\n})();\n\n/**\n * Component used to load the .cdk-visually-hidden styles.\n * @docs-private\n */\nclass _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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(_VisuallyHiddenLoader, [{\n type: Component,\n args: [{\n exportAs: 'cdkVisuallyHidden',\n encapsulation: ViewEncapsulation.None,\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\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 }]\n }], null, null);\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { _CdkPrivateStyleLoader, _VisuallyHiddenLoader };\n","const MAC_ENTER = 3;\nconst BACKSPACE = 8;\nconst TAB = 9;\nconst NUM_CENTER = 12;\nconst ENTER = 13;\nconst SHIFT = 16;\nconst CONTROL = 17;\nconst ALT = 18;\nconst PAUSE = 19;\nconst CAPS_LOCK = 20;\nconst ESCAPE = 27;\nconst SPACE = 32;\nconst PAGE_UP = 33;\nconst PAGE_DOWN = 34;\nconst END = 35;\nconst HOME = 36;\nconst LEFT_ARROW = 37;\nconst UP_ARROW = 38;\nconst RIGHT_ARROW = 39;\nconst DOWN_ARROW = 40;\nconst PLUS_SIGN = 43;\nconst PRINT_SCREEN = 44;\nconst INSERT = 45;\nconst DELETE = 46;\nconst ZERO = 48;\nconst ONE = 49;\nconst TWO = 50;\nconst THREE = 51;\nconst FOUR = 52;\nconst FIVE = 53;\nconst SIX = 54;\nconst SEVEN = 55;\nconst EIGHT = 56;\nconst NINE = 57;\nconst FF_SEMICOLON = 59; // Firefox (Gecko) fires this for semicolon instead of 186\nconst FF_EQUALS = 61; // Firefox (Gecko) fires this for equals instead of 187\nconst QUESTION_MARK = 63;\nconst AT_SIGN = 64;\nconst A = 65;\nconst B = 66;\nconst C = 67;\nconst D = 68;\nconst E = 69;\nconst F = 70;\nconst G = 71;\nconst H = 72;\nconst I = 73;\nconst J = 74;\nconst K = 75;\nconst L = 76;\nconst M = 77;\nconst N = 78;\nconst O = 79;\nconst P = 80;\nconst Q = 81;\nconst R = 82;\nconst S = 83;\nconst T = 84;\nconst U = 85;\nconst V = 86;\nconst W = 87;\nconst X = 88;\nconst Y = 89;\nconst Z = 90;\nconst META = 91; // WIN_KEY_LEFT\nconst MAC_WK_CMD_LEFT = 91;\nconst MAC_WK_CMD_RIGHT = 93;\nconst CONTEXT_MENU = 93;\nconst NUMPAD_ZERO = 96;\nconst NUMPAD_ONE = 97;\nconst NUMPAD_TWO = 98;\nconst NUMPAD_THREE = 99;\nconst NUMPAD_FOUR = 100;\nconst NUMPAD_FIVE = 101;\nconst NUMPAD_SIX = 102;\nconst NUMPAD_SEVEN = 103;\nconst NUMPAD_EIGHT = 104;\nconst NUMPAD_NINE = 105;\nconst NUMPAD_MULTIPLY = 106;\nconst NUMPAD_PLUS = 107;\nconst NUMPAD_MINUS = 109;\nconst NUMPAD_PERIOD = 110;\nconst NUMPAD_DIVIDE = 111;\nconst F1 = 112;\nconst F2 = 113;\nconst F3 = 114;\nconst F4 = 115;\nconst F5 = 116;\nconst F6 = 117;\nconst F7 = 118;\nconst F8 = 119;\nconst F9 = 120;\nconst F10 = 121;\nconst F11 = 122;\nconst F12 = 123;\nconst NUM_LOCK = 144;\nconst SCROLL_LOCK = 145;\nconst FIRST_MEDIA = 166;\nconst FF_MINUS = 173;\nconst MUTE = 173; // Firefox (Gecko) fires 181 for MUTE\nconst VOLUME_DOWN = 174; // Firefox (Gecko) fires 182 for VOLUME_DOWN\nconst VOLUME_UP = 175; // Firefox (Gecko) fires 183 for VOLUME_UP\nconst FF_MUTE = 181;\nconst FF_VOLUME_DOWN = 182;\nconst LAST_MEDIA = 183;\nconst FF_VOLUME_UP = 183;\nconst SEMICOLON = 186; // Firefox (Gecko) fires 59 for SEMICOLON\nconst EQUALS = 187; // Firefox (Gecko) fires 61 for EQUALS\nconst COMMA = 188;\nconst DASH = 189; // Firefox (Gecko) fires 173 for DASH/MINUS\nconst PERIOD = 190;\nconst SLASH = 191;\nconst APOSTROPHE = 192;\nconst TILDE = 192;\nconst OPEN_SQUARE_BRACKET = 219;\nconst BACKSLASH = 220;\nconst CLOSE_SQUARE_BRACKET = 221;\nconst SINGLE_QUOTE = 222;\nconst MAC_META = 224;\n\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}\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { A, ALT, APOSTROPHE, AT_SIGN, B, BACKSLASH, BACKSPACE, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, D, DASH, DELETE, DOWN_ARROW, E, EIGHT, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FOUR, G, H, HOME, I, INSERT, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, META, MUTE, N, NINE, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PAUSE, PERIOD, PLUS_SIGN, PRINT_SCREEN, Q, QUESTION_MARK, R, RIGHT_ARROW, S, SCROLL_LOCK, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, T, TAB, THREE, TILDE, TWO, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, W, X, Y, Z, ZERO, hasModifierKey };\n","import { isObservable, of } from 'rxjs';\n\n/**\n * Given either an Observable or non-Observable value, returns either the original\n * Observable, or wraps it in an Observable that emits the non-Observable value.\n */\nfunction coerceObservable(data) {\n if (!isObservable(data)) {\n return of(data);\n }\n return data;\n}\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { coerceObservable };\n","import { coerceElement, coerceNumberProperty } from '@angular/cdk/coercion';\nimport * 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';\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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(MutationObserverFactory, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], null, null);\n})();\n/** An injectable service that allows watching elements for changes to their content. */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(ContentObserver, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\n})();\n/**\n * Directive that triggers a callback whenever the content of\n * its associated element has changed.\n */\nclass 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 features: [i0.ɵɵInputTransformsFeature]\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkObserveContent, [{\n type: Directive,\n args: [{\n selector: '[cdkObserveContent]',\n exportAs: 'cdkObserveContent'\n }]\n }], () => [], {\n event: [{\n type: Output,\n args: ['cdkObserveContent']\n }],\n disabled: [{\n type: Input,\n args: [{\n alias: 'cdkObserveContentDisabled',\n transform: booleanAttribute\n }]\n }],\n debounce: [{\n type: Input\n }]\n });\n})();\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(ObserversModule, [{\n type: NgModule,\n args: [{\n imports: [CdkObserveContent],\n exports: [CdkObserveContent],\n providers: [MutationObserverFactory]\n }]\n }], null, null);\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { CdkObserveContent, ContentObserver, MutationObserverFactory, ObserversModule };\n","import * as i0 from '@angular/core';\nimport { NgModule, inject, CSP_NONCE, Injectable, NgZone } from '@angular/core';\nimport { coerceArray } from '@angular/cdk/coercion';\nimport { Subject, combineLatest, concat, Observable } from 'rxjs';\nimport { take, skip, debounceTime, map, startWith, takeUntil } from 'rxjs/operators';\nimport { Platform } from '@angular/cdk/platform';\nclass LayoutModule {\n static ɵfac = function LayoutModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || LayoutModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: LayoutModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({});\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(LayoutModule, [{\n type: NgModule,\n args: [{}]\n }], null, null);\n})();\n\n/** Global registry for all dynamically-created, injected media queries. */\nconst mediaQueriesForWebkitCompatibility = new Set();\n/** Style tag that holds all of the dynamically-created media queries. */\nlet mediaQueryStyleNode;\n/** A utility for calling matchMedia queries. */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(MediaMatcher, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\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. */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(BreakpointObserver, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\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}\n\n// PascalCase is being used as Breakpoints is used like an enum.\n// tslint:disable-next-line:variable-name\nconst Breakpoints = {\n XSmall: '(max-width: 599.98px)',\n Small: '(min-width: 600px) and (max-width: 959.98px)',\n Medium: '(min-width: 960px) and (max-width: 1279.98px)',\n Large: '(min-width: 1280px) and (max-width: 1919.98px)',\n XLarge: '(min-width: 1920px)',\n Handset: '(max-width: 599.98px) and (orientation: portrait), ' + '(max-width: 959.98px) and (orientation: landscape)',\n Tablet: '(min-width: 600px) and (max-width: 839.98px) and (orientation: portrait), ' + '(min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)',\n Web: '(min-width: 840px) and (orientation: portrait), ' + '(min-width: 1280px) and (orientation: landscape)',\n HandsetPortrait: '(max-width: 599.98px) and (orientation: portrait)',\n TabletPortrait: '(min-width: 600px) and (max-width: 839.98px) and (orientation: portrait)',\n WebPortrait: '(min-width: 840px) and (orientation: portrait)',\n HandsetLandscape: '(max-width: 959.98px) and (orientation: landscape)',\n TabletLandscape: '(min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)',\n WebLandscape: '(min-width: 1280px) and (orientation: landscape)'\n};\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { BreakpointObserver, Breakpoints, LayoutModule, MediaMatcher };\n","import { DOCUMENT } from '@angular/common';\nimport * as i0 from '@angular/core';\nimport { inject, APP_ID, Injectable, signal, QueryList, isSignal, effect, InjectionToken, afterNextRender, NgZone, Injector, ElementRef, booleanAttribute, Directive, Input, EventEmitter, Output, NgModule } from '@angular/core';\nimport { Platform, _getFocusedElementPierceShadowDom, normalizePassiveListenerOptions, _getEventTarget, _getShadowRoot } from '@angular/cdk/platform';\nimport { _CdkPrivateStyleLoader, _VisuallyHiddenLoader } from '@angular/cdk/private';\nimport { A, Z, ZERO, NINE, hasModifierKey, PAGE_DOWN, PAGE_UP, END, HOME, LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW, TAB, ALT, CONTROL, MAC_META, META, SHIFT } from '@angular/cdk/keycodes';\nimport { Subject, Subscription, isObservable, of, BehaviorSubject } from 'rxjs';\nimport { tap, debounceTime, filter, map, take, skip, distinctUntilChanged, takeUntil } from 'rxjs/operators';\nimport { coerceObservable } from '@angular/cdk/coercion/private';\nimport { ContentObserver, ObserversModule } from '@angular/cdk/observers';\nimport { coerceElement } from '@angular/cdk/coercion';\nimport { BreakpointObserver } from '@angular/cdk/layout';\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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(AriaDescriber, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\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}\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 = new Subject();\n _items = [];\n _selectedItemIndex = -1;\n /** Buffer for the letters that the user has pressed */\n _pressedLetters = [];\n _skipPredicateFn;\n _selectedItem = 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}\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 = 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 = new Subject();\n /** Stream that emits whenever the active item of the list manager changes. */\n change = 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}\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}\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}\n\n/**\n * This class manages keyboard events for trees. If you pass it a QueryList or other list of tree\n * items, it will set the active item, focus, handle expansion and typeahead correctly when\n * keyboard events occur.\n */\nclass TreeKeyManager {\n /** The index of the currently active (focused) item. */\n _activeItemIndex = -1;\n /** The currently active (focused) item. */\n _activeItem = null;\n /** Whether or not we activate the item when it's focused. */\n _shouldActivationFollowFocus = false;\n /**\n * The orientation that the tree is laid out in. In `rtl` mode, the behavior of Left and\n * Right arrow are switched.\n */\n _horizontalOrientation = 'ltr';\n /**\n * Predicate function that can be used to check whether an item should be skipped\n * by the key manager.\n *\n * The default value for this doesn't skip any elements in order to keep tree items focusable\n * when disabled. This aligns with ARIA guidelines:\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols.\n */\n _skipPredicateFn = _item => false;\n /** Function to determine equivalent items. */\n _trackByFn = item => item;\n /** Synchronous cache of the items to manage. */\n _items = [];\n _typeahead;\n _typeaheadSubscription = Subscription.EMPTY;\n _hasInitialFocused = false;\n _initializeFocus() {\n if (this._hasInitialFocused || this._items.length === 0) {\n return;\n }\n let activeIndex = 0;\n for (let i = 0; i < this._items.length; i++) {\n if (!this._skipPredicateFn(this._items[i]) && !this._isItemDisabled(this._items[i])) {\n activeIndex = i;\n break;\n }\n }\n const activeItem = this._items[activeIndex];\n // Use `makeFocusable` here, because we want the item to just be focusable, not actually\n // capture the focus since the user isn't interacting with it. See #29628.\n if (activeItem.makeFocusable) {\n this._activeItem?.unfocus();\n this._activeItemIndex = activeIndex;\n this._activeItem = activeItem;\n this._typeahead?.setCurrentSelectedItemIndex(activeIndex);\n activeItem.makeFocusable();\n } else {\n // Backwards compatibility for items that don't implement `makeFocusable`.\n this.focusItem(activeIndex);\n }\n this._hasInitialFocused = true;\n }\n /**\n *\n * @param items List of TreeKeyManager options. Can be synchronous or asynchronous.\n * @param config Optional configuration options. By default, use 'ltr' horizontal orientation. By\n * default, do not skip any nodes. By default, key manager only calls `focus` method when items\n * are focused and does not call `activate`. If `typeaheadDefaultInterval` is `true`, use a\n * default interval of 200ms.\n */\n constructor(items, config) {\n // We allow for the items to be an array or Observable 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._items = items.toArray();\n items.changes.subscribe(newItems => {\n this._items = newItems.toArray();\n this._typeahead?.setItems(this._items);\n this._updateActiveItemIndex(this._items);\n this._initializeFocus();\n });\n } else if (isObservable(items)) {\n items.subscribe(newItems => {\n this._items = newItems;\n this._typeahead?.setItems(newItems);\n this._updateActiveItemIndex(newItems);\n this._initializeFocus();\n });\n } else {\n this._items = items;\n this._initializeFocus();\n }\n if (typeof config.shouldActivationFollowFocus === 'boolean') {\n this._shouldActivationFollowFocus = config.shouldActivationFollowFocus;\n }\n if (config.horizontalOrientation) {\n this._horizontalOrientation = config.horizontalOrientation;\n }\n if (config.skipPredicate) {\n this._skipPredicateFn = config.skipPredicate;\n }\n if (config.trackBy) {\n this._trackByFn = config.trackBy;\n }\n if (typeof config.typeAheadDebounceInterval !== 'undefined') {\n this._setTypeAhead(config.typeAheadDebounceInterval);\n }\n }\n /** Stream that emits any time the focused item changes. */\n change = new Subject();\n /** Cleans up the key manager. */\n destroy() {\n this._typeaheadSubscription.unsubscribe();\n this._typeahead?.destroy();\n this.change.complete();\n }\n /**\n * Handles a keyboard event on the tree.\n * @param event Keyboard event that represents the user interaction with the tree.\n */\n onKeydown(event) {\n const key = event.key;\n switch (key) {\n case 'Tab':\n // Return early here, in order to allow Tab to actually tab out of the tree\n return;\n case 'ArrowDown':\n this._focusNextItem();\n break;\n case 'ArrowUp':\n this._focusPreviousItem();\n break;\n case 'ArrowRight':\n this._horizontalOrientation === 'rtl' ? this._collapseCurrentItem() : this._expandCurrentItem();\n break;\n case 'ArrowLeft':\n this._horizontalOrientation === 'rtl' ? this._expandCurrentItem() : this._collapseCurrentItem();\n break;\n case 'Home':\n this._focusFirstItem();\n break;\n case 'End':\n this._focusLastItem();\n break;\n case 'Enter':\n case ' ':\n this._activateCurrentItem();\n break;\n default:\n if (event.key === '*') {\n this._expandAllItemsAtCurrentItemLevel();\n break;\n }\n this._typeahead?.handleKey(event);\n // Return here, in order to avoid preventing the default action of non-navigational\n // keys or resetting the buffer of pressed letters.\n return;\n }\n // Reset the typeahead since the user has used a navigational key.\n this._typeahead?.reset();\n event.preventDefault();\n }\n /** Index of the currently active item. */\n getActiveItemIndex() {\n return this._activeItemIndex;\n }\n /** The currently active item. */\n getActiveItem() {\n return this._activeItem;\n }\n /** Focus the first available item. */\n _focusFirstItem() {\n this.focusItem(this._findNextAvailableItemIndex(-1));\n }\n /** Focus the last available item. */\n _focusLastItem() {\n this.focusItem(this._findPreviousAvailableItemIndex(this._items.length));\n }\n /** Focus the next available item. */\n _focusNextItem() {\n this.focusItem(this._findNextAvailableItemIndex(this._activeItemIndex));\n }\n /** Focus the previous available item. */\n _focusPreviousItem() {\n this.focusItem(this._findPreviousAvailableItemIndex(this._activeItemIndex));\n }\n focusItem(itemOrIndex, options = {}) {\n // Set default options\n options.emitChangeEvent ??= true;\n let index = typeof itemOrIndex === 'number' ? itemOrIndex : this._items.findIndex(item => this._trackByFn(item) === this._trackByFn(itemOrIndex));\n if (index < 0 || index >= this._items.length) {\n return;\n }\n const activeItem = this._items[index];\n // If we're just setting the same item, don't re-call activate or focus\n if (this._activeItem !== null && this._trackByFn(activeItem) === this._trackByFn(this._activeItem)) {\n return;\n }\n const previousActiveItem = this._activeItem;\n this._activeItem = activeItem ?? null;\n this._activeItemIndex = index;\n this._typeahead?.setCurrentSelectedItemIndex(index);\n this._activeItem?.focus();\n previousActiveItem?.unfocus();\n if (options.emitChangeEvent) {\n this.change.next(this._activeItem);\n }\n if (this._shouldActivationFollowFocus) {\n this._activateCurrentItem();\n }\n }\n _updateActiveItemIndex(newItems) {\n const activeItem = this._activeItem;\n if (!activeItem) {\n return;\n }\n const newIndex = newItems.findIndex(item => this._trackByFn(item) === this._trackByFn(activeItem));\n if (newIndex > -1 && newIndex !== this._activeItemIndex) {\n this._activeItemIndex = newIndex;\n this._typeahead?.setCurrentSelectedItemIndex(newIndex);\n }\n }\n _setTypeAhead(debounceInterval) {\n this._typeahead = new Typeahead(this._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.focusItem(item);\n });\n }\n _findNextAvailableItemIndex(startingIndex) {\n for (let i = startingIndex + 1; i < this._items.length; i++) {\n if (!this._skipPredicateFn(this._items[i])) {\n return i;\n }\n }\n return startingIndex;\n }\n _findPreviousAvailableItemIndex(startingIndex) {\n for (let i = startingIndex - 1; i >= 0; i--) {\n if (!this._skipPredicateFn(this._items[i])) {\n return i;\n }\n }\n return startingIndex;\n }\n /**\n * If the item is already expanded, we collapse the item. Otherwise, we will focus the parent.\n */\n _collapseCurrentItem() {\n if (!this._activeItem) {\n return;\n }\n if (this._isCurrentItemExpanded()) {\n this._activeItem.collapse();\n } else {\n const parent = this._activeItem.getParent();\n if (!parent || this._skipPredicateFn(parent)) {\n return;\n }\n this.focusItem(parent);\n }\n }\n /**\n * If the item is already collapsed, we expand the item. Otherwise, we will focus the first child.\n */\n _expandCurrentItem() {\n if (!this._activeItem) {\n return;\n }\n if (!this._isCurrentItemExpanded()) {\n this._activeItem.expand();\n } else {\n coerceObservable(this._activeItem.getChildren()).pipe(take(1)).subscribe(children => {\n const firstChild = children.find(child => !this._skipPredicateFn(child));\n if (!firstChild) {\n return;\n }\n this.focusItem(firstChild);\n });\n }\n }\n _isCurrentItemExpanded() {\n if (!this._activeItem) {\n return false;\n }\n return typeof this._activeItem.isExpanded === 'boolean' ? this._activeItem.isExpanded : this._activeItem.isExpanded();\n }\n _isItemDisabled(item) {\n return typeof item.isDisabled === 'boolean' ? item.isDisabled : item.isDisabled?.();\n }\n /** For all items that are the same level as the current item, we expand those items. */\n _expandAllItemsAtCurrentItemLevel() {\n if (!this._activeItem) {\n return;\n }\n const parent = this._activeItem.getParent();\n let itemsToExpand;\n if (!parent) {\n itemsToExpand = of(this._items.filter(item => item.getParent() === null));\n } else {\n itemsToExpand = coerceObservable(parent.getChildren());\n }\n itemsToExpand.pipe(take(1)).subscribe(items => {\n for (const item of items) {\n item.expand();\n }\n });\n }\n _activateCurrentItem() {\n this._activeItem?.activate();\n }\n}\n/** @docs-private */\nfunction TREE_KEY_MANAGER_FACTORY() {\n return (items, options) => new TreeKeyManager(items, options);\n}\n/** Injection token that determines the key manager to use. */\nconst TREE_KEY_MANAGER = new InjectionToken('tree-key-manager', {\n providedIn: 'root',\n factory: TREE_KEY_MANAGER_FACTORY\n});\n/** @docs-private */\nconst TREE_KEY_MANAGER_FACTORY_PROVIDER = {\n provide: TREE_KEY_MANAGER,\n useFactory: TREE_KEY_MANAGER_FACTORY\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 = 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 * 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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(InteractivityChecker, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(FocusTrapFactory, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\n})();\n/** Directive for trapping focus within a region. */\nclass 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.ɵɵInputTransformsFeature, i0.ɵɵNgOnChangesFeature]\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkTrapFocus, [{\n type: Directive,\n args: [{\n selector: '[cdkTrapFocus]',\n exportAs: 'cdkTrapFocus'\n }]\n }], () => [], {\n enabled: [{\n type: Input,\n args: [{\n alias: 'cdkTrapFocus',\n transform: booleanAttribute\n }]\n }],\n autoCapture: [{\n type: Input,\n args: [{\n alias: 'cdkTrapFocusAutoCapture',\n transform: booleanAttribute\n }]\n }]\n });\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 = new InjectionToken('FOCUS_TRAP_INERT_STRATEGY');\n\n/** Injectable that ensures only the most recently enabled FocusTrap is active. */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(FocusTrapManager, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], null, null);\n})();\n\n/** Factory that allows easy instantiation of configurable focus traps. */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(ConfigurableFocusTrapFactory, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\n})();\n\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}\n\n/**\n * Injectable options for the InputModalityDetector. These are shallowly merged with the default\n * options.\n */\nconst INPUT_MODALITY_DETECTOR_OPTIONS = 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 = normalizePassiveListenerOptions({\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 */\nclass InputModalityDetector {\n _platform = inject(Platform);\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 ngZone.runOutsideAngular(() => {\n document.addEventListener('keydown', this._onKeydown, modalityEventListenerOptions);\n document.addEventListener('mousedown', this._onMousedown, modalityEventListenerOptions);\n document.addEventListener('touchstart', this._onTouchstart, modalityEventListenerOptions);\n });\n }\n }\n ngOnDestroy() {\n this._modality.complete();\n if (this._platform.isBrowser) {\n document.removeEventListener('keydown', this._onKeydown, modalityEventListenerOptions);\n document.removeEventListener('mousedown', this._onMousedown, modalityEventListenerOptions);\n document.removeEventListener('touchstart', this._onTouchstart, modalityEventListenerOptions);\n }\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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(InputModalityDetector, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\n})();\nconst LIVE_ANNOUNCER_ELEMENT_TOKEN = new InjectionToken('liveAnnouncerElement', {\n providedIn: 'root',\n factory: LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY\n});\n/** @docs-private */\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 = new InjectionToken('LIVE_ANNOUNCER_DEFAULT_OPTIONS');\nlet uniqueIds = 0;\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(LiveAnnouncer, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkAriaLive, [{\n type: Directive,\n args: [{\n selector: '[cdkAriaLive]',\n exportAs: 'cdkAriaLive'\n }]\n }], () => [], {\n politeness: [{\n type: Input,\n args: ['cdkAriaLive']\n }],\n duration: [{\n type: Input,\n args: ['cdkAriaLiveDuration']\n }]\n });\n})();\n\n/** Detection mode used for attributing the origin of a focus event. */\nvar FocusMonitorDetectionMode;\n(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})(FocusMonitorDetectionMode || (FocusMonitorDetectionMode = {}));\n/** InjectionToken for FocusMonitorOptions. */\nconst FOCUS_MONITOR_DEFAULT_OPTIONS = 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 = normalizePassiveListenerOptions({\n passive: true,\n capture: true\n});\n/** Monitors mouse and keyboard events to determine the cause of focus events. */\nclass 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 //
\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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(FocusMonitor, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkMonitorFocus, [{\n type: Directive,\n args: [{\n selector: '[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]',\n exportAs: 'cdkMonitorFocus'\n }]\n }], () => [], {\n cdkFocusChange: [{\n type: Output\n }]\n });\n})();\n\n/** Set of possible high-contrast mode backgrounds. */\nvar HighContrastMode;\n(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})(HighContrastMode || (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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(HighContrastModeDetector, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\n})();\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(A11yModule, [{\n type: NgModule,\n args: [{\n imports: [ObserversModule, CdkAriaLive, CdkTrapFocus, CdkMonitorFocus],\n exports: [CdkAriaLive, CdkTrapFocus, CdkMonitorFocus]\n }]\n }], () => [], null);\n})();\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. */\nclass _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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(_IdGenerator, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], null, null);\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { A11yModule, ActiveDescendantKeyManager, AriaDescriber, CDK_DESCRIBEDBY_HOST_ATTRIBUTE, CDK_DESCRIBEDBY_ID_PREFIX, CdkAriaLive, CdkMonitorFocus, CdkTrapFocus, ConfigurableFocusTrap, ConfigurableFocusTrapFactory, EventListenerFocusTrapInertStrategy, FOCUS_MONITOR_DEFAULT_OPTIONS, FOCUS_TRAP_INERT_STRATEGY, FocusKeyManager, FocusMonitor, FocusMonitorDetectionMode, FocusTrap, FocusTrapFactory, HighContrastMode, HighContrastModeDetector, INPUT_MODALITY_DETECTOR_DEFAULT_OPTIONS, INPUT_MODALITY_DETECTOR_OPTIONS, InputModalityDetector, InteractivityChecker, IsFocusableConfig, LIVE_ANNOUNCER_DEFAULT_OPTIONS, LIVE_ANNOUNCER_ELEMENT_TOKEN, LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY, ListKeyManager, LiveAnnouncer, MESSAGES_CONTAINER_ID, NOOP_TREE_KEY_MANAGER_FACTORY, NOOP_TREE_KEY_MANAGER_FACTORY_PROVIDER, NoopTreeKeyManager, TREE_KEY_MANAGER, TREE_KEY_MANAGER_FACTORY, TREE_KEY_MANAGER_FACTORY_PROVIDER, TreeKeyManager, _IdGenerator, addAriaReferencedId, getAriaReferenceIds, isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader, removeAriaReferencedId };\n","import * as i0 from '@angular/core';\nimport { ElementRef, NgModuleRef, createComponent, Injector, inject, TemplateRef, ViewContainerRef, Directive, EventEmitter, Input, Output, NgModule } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\n\n/**\n * Throws an exception when attempting to attach a null portal to a host.\n * @docs-private\n */\nfunction throwNullPortalError() {\n throw Error('Must provide a portal to attach');\n}\n/**\n * Throws an exception when attempting to attach a portal to a host that is already attached.\n * @docs-private\n */\nfunction throwPortalAlreadyAttachedError() {\n throw Error('Host already has a portal attached');\n}\n/**\n * Throws an exception when attempting to attach a portal to an already-disposed host.\n * @docs-private\n */\nfunction throwPortalOutletAlreadyDisposedError() {\n throw Error('This PortalOutlet has already been disposed');\n}\n/**\n * Throws an exception when attempting to attach an unknown portal type.\n * @docs-private\n */\nfunction throwUnknownPortalTypeError() {\n throw Error('Attempting to attach an unknown Portal type. BasePortalOutlet accepts either ' + 'a ComponentPortal or a TemplatePortal.');\n}\n/**\n * Throws an exception when attempting to attach a portal to a null host.\n * @docs-private\n */\nfunction throwNullPortalOutletError() {\n throw Error('Attempting to attach a portal to a null PortalOutlet');\n}\n/**\n * Throws an exception when attempting to detach a portal that is not attached.\n * @docs-private\n */\nfunction throwNoPortalAttachedError() {\n throw Error('Attempting to detach a portal that is not attached to a host');\n}\n\n/**\n * A `Portal` is something that you want to render somewhere else.\n * It can be attach to / detached from a `PortalOutlet`.\n */\nclass Portal {\n _attachedHost;\n /** Attach this portal to a host. */\n attach(host) {\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (host == null) {\n throwNullPortalOutletError();\n }\n if (host.hasAttached()) {\n throwPortalAlreadyAttachedError();\n }\n }\n this._attachedHost = host;\n return host.attach(this);\n }\n /** Detach this portal from its host */\n detach() {\n let host = this._attachedHost;\n if (host != null) {\n this._attachedHost = null;\n host.detach();\n } else if (typeof ngDevMode === 'undefined' || ngDevMode) {\n throwNoPortalAttachedError();\n }\n }\n /** Whether this portal is attached to a host. */\n get isAttached() {\n return this._attachedHost != null;\n }\n /**\n * Sets the PortalOutlet reference without performing `attach()`. This is used directly by\n * the PortalOutlet when it is performing an `attach()` or `detach()`.\n */\n setAttachedHost(host) {\n this._attachedHost = host;\n }\n}\n/**\n * A `ComponentPortal` is a portal that instantiates some Component upon attachment.\n */\nclass ComponentPortal extends Portal {\n /** The type of the component that will be instantiated for attachment. */\n component;\n /**\n * Where the attached component should live in Angular's *logical* component tree.\n * This is different from where the component *renders*, which is determined by the PortalOutlet.\n * The origin is necessary when the host is outside of the Angular application context.\n */\n viewContainerRef;\n /** Injector used for the instantiation of the component. */\n injector;\n /**\n * @deprecated No longer in use. To be removed.\n * @breaking-change 18.0.0\n */\n componentFactoryResolver;\n /**\n * List of DOM nodes that should be projected through `` of the attached component.\n */\n projectableNodes;\n constructor(component, viewContainerRef, injector,\n /**\n * @deprecated No longer in use. To be removed.\n * @breaking-change 18.0.0\n */\n _componentFactoryResolver, projectableNodes) {\n super();\n this.component = component;\n this.viewContainerRef = viewContainerRef;\n this.injector = injector;\n this.projectableNodes = projectableNodes;\n }\n}\n/**\n * A `TemplatePortal` is a portal that represents some embedded template (TemplateRef).\n */\nclass TemplatePortal extends Portal {\n templateRef;\n viewContainerRef;\n context;\n injector;\n constructor(/** The embedded template that will be used to instantiate an embedded View in the host. */\n templateRef, /** Reference to the ViewContainer into which the template will be stamped out. */\n viewContainerRef, /** Contextual data to be passed in to the embedded view. */\n context, /** The injector to use for the embedded view. */\n injector) {\n super();\n this.templateRef = templateRef;\n this.viewContainerRef = viewContainerRef;\n this.context = context;\n this.injector = injector;\n }\n get origin() {\n return this.templateRef.elementRef;\n }\n /**\n * Attach the portal to the provided `PortalOutlet`.\n * When a context is provided it will override the `context` property of the `TemplatePortal`\n * instance.\n */\n attach(host, context = this.context) {\n this.context = context;\n return super.attach(host);\n }\n detach() {\n this.context = undefined;\n return super.detach();\n }\n}\n/**\n * A `DomPortal` is a portal whose DOM element will be taken from its current position\n * in the DOM and moved into a portal outlet, when it is attached. On detach, the content\n * will be restored to its original position.\n */\nclass DomPortal extends Portal {\n /** DOM node hosting the portal's content. */\n element;\n constructor(element) {\n super();\n this.element = element instanceof ElementRef ? element.nativeElement : element;\n }\n}\n/**\n * Partial implementation of PortalOutlet that handles attaching\n * ComponentPortal and TemplatePortal.\n */\nclass BasePortalOutlet {\n /** The portal currently attached to the host. */\n _attachedPortal;\n /** A function that will permanently dispose this host. */\n _disposeFn;\n /** Whether this host has already been permanently disposed. */\n _isDisposed = false;\n /** Whether this host has an attached portal. */\n hasAttached() {\n return !!this._attachedPortal;\n }\n /** Attaches a portal. */\n attach(portal) {\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (!portal) {\n throwNullPortalError();\n }\n if (this.hasAttached()) {\n throwPortalAlreadyAttachedError();\n }\n if (this._isDisposed) {\n throwPortalOutletAlreadyDisposedError();\n }\n }\n if (portal instanceof ComponentPortal) {\n this._attachedPortal = portal;\n return this.attachComponentPortal(portal);\n } else if (portal instanceof TemplatePortal) {\n this._attachedPortal = portal;\n return this.attachTemplatePortal(portal);\n // @breaking-change 10.0.0 remove null check for `this.attachDomPortal`.\n } else if (this.attachDomPortal && portal instanceof DomPortal) {\n this._attachedPortal = portal;\n return this.attachDomPortal(portal);\n }\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n throwUnknownPortalTypeError();\n }\n }\n // @breaking-change 10.0.0 `attachDomPortal` to become a required abstract method.\n attachDomPortal = null;\n /** Detaches a previously attached portal. */\n detach() {\n if (this._attachedPortal) {\n this._attachedPortal.setAttachedHost(null);\n this._attachedPortal = null;\n }\n this._invokeDisposeFn();\n }\n /** Permanently dispose of this portal host. */\n dispose() {\n if (this.hasAttached()) {\n this.detach();\n }\n this._invokeDisposeFn();\n this._isDisposed = true;\n }\n /** @docs-private */\n setDisposeFn(fn) {\n this._disposeFn = fn;\n }\n _invokeDisposeFn() {\n if (this._disposeFn) {\n this._disposeFn();\n this._disposeFn = null;\n }\n }\n}\n/**\n * @deprecated Use `BasePortalOutlet` instead.\n * @breaking-change 9.0.0\n */\nclass BasePortalHost extends BasePortalOutlet {}\n\n/**\n * A PortalOutlet for attaching portals to an arbitrary DOM element outside of the Angular\n * application context.\n */\nclass DomPortalOutlet extends BasePortalOutlet {\n outletElement;\n _appRef;\n _defaultInjector;\n _document;\n /**\n * @param outletElement Element into which the content is projected.\n * @param _unusedComponentFactoryResolver Used to resolve the component factory.\n * Only required when attaching component portals.\n * @param _appRef Reference to the application. Only used in component portals when there\n * is no `ViewContainerRef` available.\n * @param _defaultInjector Injector to use as a fallback when the portal being attached doesn't\n * have one. Only used for component portals.\n * @param _document Reference to the document. Used when attaching a DOM portal. Will eventually\n * become a required parameter.\n */\n constructor(/** Element into which the content is projected. */\n outletElement,\n /**\n * @deprecated No longer in use. To be removed.\n * @breaking-change 18.0.0\n */\n _unusedComponentFactoryResolver, _appRef, _defaultInjector,\n /**\n * @deprecated `_document` Parameter to be made required.\n * @breaking-change 10.0.0\n */\n _document) {\n super();\n this.outletElement = outletElement;\n this._appRef = _appRef;\n this._defaultInjector = _defaultInjector;\n this._document = _document;\n }\n /**\n * Attach the given ComponentPortal to DOM element.\n * @param portal Portal to be attached\n * @returns Reference to the created component.\n */\n attachComponentPortal(portal) {\n let componentRef;\n // If the portal specifies a ViewContainerRef, we will use that as the attachment point\n // for the component (in terms of Angular's component tree, not rendering).\n // When the ViewContainerRef is missing, we use the factory to create the component directly\n // and then manually attach the view to the application.\n if (portal.viewContainerRef) {\n const injector = portal.injector || portal.viewContainerRef.injector;\n const ngModuleRef = injector.get(NgModuleRef, null, {\n optional: true\n }) || undefined;\n componentRef = portal.viewContainerRef.createComponent(portal.component, {\n index: portal.viewContainerRef.length,\n injector,\n ngModuleRef,\n projectableNodes: portal.projectableNodes || undefined\n });\n this.setDisposeFn(() => componentRef.destroy());\n } else {\n if ((typeof ngDevMode === 'undefined' || ngDevMode) && !this._appRef) {\n throw Error('Cannot attach component portal to outlet without an ApplicationRef.');\n }\n componentRef = createComponent(portal.component, {\n elementInjector: portal.injector || this._defaultInjector || Injector.NULL,\n environmentInjector: this._appRef.injector,\n projectableNodes: portal.projectableNodes || undefined\n });\n this._appRef.attachView(componentRef.hostView);\n this.setDisposeFn(() => {\n // Verify that the ApplicationRef has registered views before trying to detach a host view.\n // This check also protects the `detachView` from being called on a destroyed ApplicationRef.\n if (this._appRef.viewCount > 0) {\n this._appRef.detachView(componentRef.hostView);\n }\n componentRef.destroy();\n });\n }\n // At this point the component has been instantiated, so we move it to the location in the DOM\n // where we want it to be rendered.\n this.outletElement.appendChild(this._getComponentRootNode(componentRef));\n this._attachedPortal = portal;\n return componentRef;\n }\n /**\n * Attaches a template portal to the DOM as an embedded view.\n * @param portal Portal to be attached.\n * @returns Reference to the created embedded view.\n */\n attachTemplatePortal(portal) {\n let viewContainer = portal.viewContainerRef;\n let viewRef = viewContainer.createEmbeddedView(portal.templateRef, portal.context, {\n injector: portal.injector\n });\n // The method `createEmbeddedView` will add the view as a child of the viewContainer.\n // But for the DomPortalOutlet the view can be added everywhere in the DOM\n // (e.g Overlay Container) To move the view to the specified host element. We just\n // re-append the existing root nodes.\n viewRef.rootNodes.forEach(rootNode => this.outletElement.appendChild(rootNode));\n // Note that we want to detect changes after the nodes have been moved so that\n // any directives inside the portal that are looking at the DOM inside a lifecycle\n // hook won't be invoked too early.\n viewRef.detectChanges();\n this.setDisposeFn(() => {\n let index = viewContainer.indexOf(viewRef);\n if (index !== -1) {\n viewContainer.remove(index);\n }\n });\n this._attachedPortal = portal;\n // TODO(jelbourn): Return locals from view.\n return viewRef;\n }\n /**\n * Attaches a DOM portal by transferring its content into the outlet.\n * @param portal Portal to be attached.\n * @deprecated To be turned into a method.\n * @breaking-change 10.0.0\n */\n 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 element.parentNode.insertBefore(anchorNode, element);\n this.outletElement.appendChild(element);\n this._attachedPortal = portal;\n super.setDisposeFn(() => {\n // We can't use `replaceWith` here because IE doesn't support it.\n if (anchorNode.parentNode) {\n anchorNode.parentNode.replaceChild(element, anchorNode);\n }\n });\n };\n /**\n * Clears out a portal from the DOM.\n */\n dispose() {\n super.dispose();\n this.outletElement.remove();\n }\n /** Gets the root HTMLElement for an instantiated component. */\n _getComponentRootNode(componentRef) {\n return componentRef.hostView.rootNodes[0];\n }\n}\n/**\n * @deprecated Use `DomPortalOutlet` instead.\n * @breaking-change 9.0.0\n */\nclass DomPortalHost extends DomPortalOutlet {}\n\n/**\n * Directive version of a `TemplatePortal`. Because the directive *is* a TemplatePortal,\n * the directive instance itself can be attached to a host, enabling declarative use of portals.\n */\nclass CdkPortal extends TemplatePortal {\n constructor() {\n const templateRef = inject(TemplateRef);\n const viewContainerRef = inject(ViewContainerRef);\n super(templateRef, viewContainerRef);\n }\n static ɵfac = function CdkPortal_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkPortal)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkPortal,\n selectors: [[\"\", \"cdkPortal\", \"\"]],\n exportAs: [\"cdkPortal\"],\n features: [i0.ɵɵInheritDefinitionFeature]\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkPortal, [{\n type: Directive,\n args: [{\n selector: '[cdkPortal]',\n exportAs: 'cdkPortal'\n }]\n }], () => [], null);\n})();\n/**\n * @deprecated Use `CdkPortal` instead.\n * @breaking-change 9.0.0\n */\nclass TemplatePortalDirective extends CdkPortal {\n static ɵfac = /* @__PURE__ */(() => {\n let ɵTemplatePortalDirective_BaseFactory;\n return function TemplatePortalDirective_Factory(__ngFactoryType__) {\n return (ɵTemplatePortalDirective_BaseFactory || (ɵTemplatePortalDirective_BaseFactory = i0.ɵɵgetInheritedFactory(TemplatePortalDirective)))(__ngFactoryType__ || TemplatePortalDirective);\n };\n })();\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: TemplatePortalDirective,\n selectors: [[\"\", \"cdk-portal\", \"\"], [\"\", \"portal\", \"\"]],\n exportAs: [\"cdkPortal\"],\n features: [i0.ɵɵProvidersFeature([{\n provide: CdkPortal,\n useExisting: TemplatePortalDirective\n }]), i0.ɵɵInheritDefinitionFeature]\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(TemplatePortalDirective, [{\n type: Directive,\n args: [{\n selector: '[cdk-portal], [portal]',\n exportAs: 'cdkPortal',\n providers: [{\n provide: CdkPortal,\n useExisting: TemplatePortalDirective\n }]\n }]\n }], null, null);\n})();\n/**\n * Directive version of a PortalOutlet. Because the directive *is* a PortalOutlet, portals can be\n * directly attached to it, enabling declarative use.\n *\n * Usage:\n * ``\n */\nclass CdkPortalOutlet extends BasePortalOutlet {\n _moduleRef = inject(NgModuleRef, {\n optional: true\n });\n _document = inject(DOCUMENT);\n _viewContainerRef = inject(ViewContainerRef);\n /** Whether the portal component is initialized. */\n _isInitialized = false;\n /** Reference to the currently-attached component/view ref. */\n _attachedRef;\n constructor() {\n super();\n }\n /** Portal associated with the Portal outlet. */\n get portal() {\n return this._attachedPortal;\n }\n set portal(portal) {\n // Ignore the cases where the `portal` is set to a falsy value before the lifecycle hooks have\n // run. This handles the cases where the user might do something like `
`\n // and attach a portal programmatically in the parent component. When Angular does the first CD\n // round, it will fire the setter with empty string, causing the user's content to be cleared.\n if (this.hasAttached() && !portal && !this._isInitialized) {\n return;\n }\n if (this.hasAttached()) {\n super.detach();\n }\n if (portal) {\n super.attach(portal);\n }\n this._attachedPortal = portal || null;\n }\n /** 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkPortalOutlet, [{\n type: Directive,\n args: [{\n selector: '[cdkPortalOutlet]',\n exportAs: 'cdkPortalOutlet'\n }]\n }], () => [], {\n portal: [{\n type: Input,\n args: ['cdkPortalOutlet']\n }],\n attached: [{\n type: Output\n }]\n });\n})();\n/**\n * @deprecated Use `CdkPortalOutlet` instead.\n * @breaking-change 9.0.0\n */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(PortalHostDirective, [{\n type: Directive,\n args: [{\n selector: '[cdkPortalHost], [portalHost]',\n exportAs: 'cdkPortalHost',\n inputs: [{\n name: 'portal',\n alias: 'cdkPortalHost'\n }],\n providers: [{\n provide: CdkPortalOutlet,\n useExisting: PortalHostDirective\n }]\n }]\n }], null, null);\n})();\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(PortalModule, [{\n type: NgModule,\n args: [{\n imports: [CdkPortal, CdkPortalOutlet, TemplatePortalDirective, PortalHostDirective],\n exports: [CdkPortal, CdkPortalOutlet, TemplatePortalDirective, PortalHostDirective]\n }]\n }], null, null);\n})();\n\n/**\n * Custom injector to be used when providing custom\n * injection tokens to components inside a portal.\n * @docs-private\n * @deprecated Use `Injector.create` instead.\n * @breaking-change 11.0.0\n */\nclass PortalInjector {\n _parentInjector;\n _customTokens;\n constructor(_parentInjector, _customTokens) {\n this._parentInjector = _parentInjector;\n this._customTokens = _customTokens;\n }\n get(token, notFoundValue) {\n const value = this._customTokens.get(token);\n if (typeof value !== 'undefined') {\n return value;\n }\n return this._parentInjector.get(token, notFoundValue);\n }\n}\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { BasePortalHost, BasePortalOutlet, CdkPortal, CdkPortalOutlet, ComponentPortal, DomPortal, DomPortalHost, DomPortalOutlet, Portal, PortalHostDirective, PortalInjector, PortalModule, TemplatePortal, TemplatePortalDirective };\n","import { ScrollDispatcher, ViewportRuler, ScrollingModule } from '@angular/cdk/scrolling';\nexport { CdkScrollable, ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling';\nimport { DOCUMENT, Location } from '@angular/common';\nimport * 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 { coerceCssPixelValue, coerceArray } from '@angular/cdk/coercion';\nimport { supportsScrollBehavior, Platform, _getEventTarget, _isTestEnvironment } from '@angular/cdk/platform';\nimport { filter, takeUntil, takeWhile } from 'rxjs/operators';\nimport { Directionality, BidiModule } from '@angular/cdk/bidi';\nimport { DomPortalOutlet, TemplatePortal, PortalModule } from '@angular/cdk/portal';\nimport { _IdGenerator } from '@angular/cdk/a11y';\nimport { _CdkPrivateStyleLoader } from '@angular/cdk/private';\nimport { Subject, Subscription, merge } from 'rxjs';\nimport { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';\nconst scrollBehaviorSupported = 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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(ScrollStrategyOptions, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\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 = 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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(BaseOverlayDispatcher, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(OverlayKeyboardDispatcher, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], null, null);\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 */\nclass OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {\n _platform = inject(Platform);\n _ngZone = inject(NgZone, {\n optional: true\n });\n _cursorOriginalValue;\n _cursorStyleIsSet = false;\n _pointerDownEventTarget;\n /** Add a new overlay to the list of attached overlay refs. */\n add(overlayRef) {\n super.add(overlayRef);\n // Safari on iOS does not generate click events for non-interactive\n // elements. However, we want to receive a click for any element outside\n // the overlay. We can force a \"clickable\" state by setting\n // `cursor: pointer` on the document body. See:\n // https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile\n // https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html\n if (!this._isAttached) {\n const body = this._document.body;\n /** @breaking-change 14.0.0 _ngZone will be required. */\n if (this._ngZone) {\n this._ngZone.runOutsideAngular(() => this._addEventListeners(body));\n } else {\n this._addEventListeners(body);\n }\n // click event is not fired on iOS. To make element \"clickable\" we are\n // setting the cursor to pointer\n if (this._platform.IOS && !this._cursorStyleIsSet) {\n this._cursorOriginalValue = body.style.cursor;\n body.style.cursor = 'pointer';\n this._cursorStyleIsSet = true;\n }\n this._isAttached = true;\n }\n }\n /** Detaches the global keyboard event listener. */\n detach() {\n if (this._isAttached) {\n const body = this._document.body;\n body.removeEventListener('pointerdown', this._pointerDownListener, true);\n body.removeEventListener('click', this._clickListener, true);\n body.removeEventListener('auxclick', this._clickListener, true);\n body.removeEventListener('contextmenu', this._clickListener, true);\n if (this._platform.IOS && this._cursorStyleIsSet) {\n body.style.cursor = this._cursorOriginalValue;\n this._cursorStyleIsSet = false;\n }\n this._isAttached = false;\n }\n }\n _addEventListeners(body) {\n body.addEventListener('pointerdown', this._pointerDownListener, true);\n body.addEventListener('click', this._clickListener, true);\n body.addEventListener('auxclick', this._clickListener, true);\n body.addEventListener('contextmenu', this._clickListener, true);\n }\n /** 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(OverlayOutsideClickDispatcher, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], null, null);\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}\nclass _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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(_CdkOverlayStyleLoader, [{\n type: Component,\n args: [{\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n 'cdk-overlay-style-loader': ''\n },\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 }]\n }], null, null);\n})();\n/** Container inside which all overlays will render. */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(OverlayContainer, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\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 _backdropElement = null;\n _backdropTimeout;\n _backdropClick = new Subject();\n _attachments = new Subject();\n _detachments = new Subject();\n _positionStrategy;\n _scrollStrategy;\n _locationChanges = Subscription.EMPTY;\n _cleanupBackdropClick;\n _cleanupBackdropTransitionEnd;\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 = new Subject();\n /** Stream of mouse outside events dispatched to this overlay. */\n _outsidePointerEvents = new Subject();\n _renders = 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._backdropElement;\n }\n /**\n * Wrapper around the panel element. Can be used for advanced\n * positioning where a wrapper with specific styling is\n * required around the overlay pane.\n */\n get hostElement() {\n return this._host;\n }\n /**\n * Attaches content, given via a Portal, to the overlay.\n * If the overlay is configured to have a backdrop, it will be created.\n *\n * @param portal Portal instance to which to attach the overlay.\n * @returns The portal attachment result.\n */\n attach(portal) {\n // Insert the host into the DOM before attaching the portal, otherwise\n // the animations module will skip animations on repeat attachments.\n if (!this._host.parentElement && this._previousHostParent) {\n this._previousHostParent.appendChild(this._host);\n }\n const attachResult = this._portalOutlet.attach(portal);\n if (this._positionStrategy) {\n this._positionStrategy.attach(this);\n }\n this._updateStackingOrder();\n this._updateElementSize();\n this._updateElementDirection();\n if (this._scrollStrategy) {\n this._scrollStrategy.enable();\n }\n // 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._disposeBackdrop(this._backdropElement);\n this._locationChanges.unsubscribe();\n this._keyboardDispatcher.remove(this);\n this._portalOutlet.dispose();\n this._attachments.complete();\n this._backdropClick.complete();\n this._keydownEvents.complete();\n this._outsidePointerEvents.complete();\n this._outsideClickDispatcher.remove(this);\n this._host?.remove();\n this._afterNextRenderRef?.destroy();\n this._previousHostParent = this._pane = this._host = 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._backdropElement = this._document.createElement('div');\n this._backdropElement.classList.add('cdk-overlay-backdrop');\n if (this._animationsDisabled) {\n this._backdropElement.classList.add('cdk-overlay-backdrop-noop-animation');\n }\n if (this._config.backdropClass) {\n this._toggleClasses(this._backdropElement, this._config.backdropClass, true);\n }\n // Insert the backdrop before the pane in the DOM order,\n // in order to handle stacked overlays properly.\n this._host.parentElement.insertBefore(this._backdropElement, this._host);\n // Forward backdrop clicks such that the consumer of the overlay can perform whatever\n // action desired when such a click occurs (usually closing the overlay).\n this._cleanupBackdropClick?.();\n this._cleanupBackdropClick = this._renderer.listen(this._backdropElement, 'click', event => this._backdropClick.next(event));\n // Add class to fade-in the backdrop after one frame.\n if (!this._animationsDisabled && typeof requestAnimationFrame !== 'undefined') {\n this._ngZone.runOutsideAngular(() => {\n requestAnimationFrame(() => {\n if (this._backdropElement) {\n this._backdropElement.classList.add(showingClass);\n }\n });\n });\n } else {\n this._backdropElement.classList.add(showingClass);\n }\n }\n /**\n * Updates the stacking order of the element, moving it to the top if necessary.\n * This is required in cases where one overlay was detached, while another one,\n * that should be behind it, was destroyed. The next time both of them are opened,\n * the stacking will be wrong, because the detached element's pane will still be\n * in its original DOM position.\n */\n _updateStackingOrder() {\n if (this._host.nextSibling) {\n this._host.parentNode.appendChild(this._host);\n }\n }\n /** Detaches the backdrop (if any) associated with the overlay. */\n detachBackdrop() {\n const backdropToDetach = this._backdropElement;\n if (!backdropToDetach) {\n return;\n }\n if (this._animationsDisabled) {\n this._disposeBackdrop(backdropToDetach);\n return;\n }\n backdropToDetach.classList.remove('cdk-overlay-backdrop-showing');\n this._ngZone.runOutsideAngular(() => {\n this._cleanupBackdropTransitionEnd?.();\n this._cleanupBackdropTransitionEnd = this._renderer.listen(backdropToDetach, 'transitionend', event => {\n this._disposeBackdrop(event.target);\n });\n });\n // If the backdrop doesn't have a transition, the `transitionend` event won't fire.\n // In this case we make it unclickable and we try to remove it after a delay.\n backdropToDetach.style.pointerEvents = 'none';\n // Run this outside the Angular zone because there's nothing that Angular cares about.\n // If it were to run inside the Angular zone, every test that used Overlay would have to be\n // either async or fakeAsync.\n this._backdropTimeout = this._ngZone.runOutsideAngular(() => setTimeout(() => {\n this._disposeBackdrop(backdropToDetach);\n }, 500));\n }\n /** Toggles a single CSS class or an array of classes on an element. */\n _toggleClasses(element, cssClasses, isAdd) {\n const classes = coerceArray(cssClasses || []).filter(c => !!c);\n if (classes.length) {\n isAdd ? element.classList.add(...classes) : element.classList.remove(...classes);\n }\n }\n /** Detaches the overlay content next time the zone stabilizes. */\n _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 if (scrollStrategy) {\n scrollStrategy.disable();\n if (scrollStrategy.detach) {\n scrollStrategy.detach();\n }\n }\n }\n /** Removes a backdrop element from the DOM. */\n _disposeBackdrop(backdrop) {\n this._cleanupBackdropClick?.();\n this._cleanupBackdropTransitionEnd?.();\n if (backdrop) {\n backdrop.remove();\n // It is possible that a new portal has been attached to this overlay since we started\n // removing the backdrop. If that is the case, only clear the backdrop reference if it\n // is still the same instance that we started to remove.\n if (this._backdropElement === backdrop) {\n this._backdropElement = null;\n }\n }\n if (this._backdropTimeout) {\n clearTimeout(this._backdropTimeout);\n this._backdropTimeout = undefined;\n }\n }\n}\n\n// TODO: refactor clipping detection into a separate thing (part of scrolling module)\n// TODO: doesn't handle both flexible width and height when it has to scroll along both axis.\n/** Class to be added to the overlay bounding box. */\nconst boundingBoxClass = 'cdk-overlay-connected-position-bounding-box';\n/** Regex used to split a string on its CSS units. */\nconst cssUnitPattern = /([A-Za-z%]+)$/;\n/**\n * A strategy for positioning overlays. Using this strategy, an overlay is given an\n * implicit position relative some origin element. The relative position is defined in terms of\n * a point on the origin element that is connected to a point on the overlay element. For example,\n * a basic dropdown is connecting the bottom-left corner of the origin to the top-left corner\n * of the overlay.\n */\nclass FlexibleConnectedPositionStrategy {\n _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 = 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. */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(OverlayPositionBuilder, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(Overlay, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\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 = 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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkOverlayOrigin, [{\n type: Directive,\n args: [{\n selector: '[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]',\n exportAs: 'cdkOverlayOrigin'\n }]\n }], () => [], null);\n})();\n/**\n * Directive to facilitate declarative creation of an\n * Overlay using a FlexibleConnectedPositionStrategy.\n */\nclass 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 if (this._overlayRef) {\n this._overlayRef.dispose();\n }\n }\n ngOnChanges(changes) {\n if (this._position) {\n this._updatePositionStrategy(this._position);\n this._overlayRef.updateSize({\n width: this.width,\n minWidth: this.minWidth,\n height: this.height,\n minHeight: this.minHeight\n });\n if (changes['origin'] && this.open) {\n this._position.apply();\n }\n }\n if (changes['open']) {\n this.open ? this._attachOverlay() : this._detachOverlay();\n }\n }\n /** Creates an overlay */\n _createOverlay() {\n if (!this.positions || !this.positions.length) {\n this.positions = defaultPositionList;\n }\n const overlayRef = this._overlayRef = this._overlay.create(this._buildConfig());\n this._attachSubscription = overlayRef.attachments().subscribe(() => this.attach.emit());\n this._detachSubscription = overlayRef.detachments().subscribe(() => this.detach.emit());\n overlayRef.keydownEvents().subscribe(event => {\n this.overlayKeydown.next(event);\n if (event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)) {\n event.preventDefault();\n this._detachOverlay();\n }\n });\n this._overlayRef.outsidePointerEvents().subscribe(event => {\n 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 and subscribes to backdrop clicks if backdrop exists */\n _attachOverlay() {\n if (!this._overlayRef) {\n this._createOverlay();\n } else {\n // Update the overlay size, in case the directive's inputs have changed\n this._overlayRef.getConfig().hasBackdrop = this.hasBackdrop;\n }\n if (!this._overlayRef.hasAttached()) {\n this._overlayRef.attach(this._templatePortal);\n }\n if (this.hasBackdrop) {\n this._backdropSubscription = this._overlayRef.backdropClick().subscribe(event => {\n this.backdropClick.emit(event);\n });\n } else {\n this._backdropSubscription.unsubscribe();\n }\n this._positionSubscription.unsubscribe();\n // Only subscribe to `positionChanges` if requested, because putting\n // together all the information for it can be expensive.\n if (this.positionChange.observers.length > 0) {\n this._positionSubscription = this._position.positionChanges.pipe(takeWhile(() => this.positionChange.observers.length > 0)).subscribe(position => {\n this._ngZone.run(() => this.positionChange.emit(position));\n if (this.positionChange.observers.length === 0) {\n this._positionSubscription.unsubscribe();\n }\n });\n }\n }\n /** Detaches the overlay and unsubscribes to backdrop clicks if backdrop exists */\n _detachOverlay() {\n if (this._overlayRef) {\n this._overlayRef.detach();\n }\n this._backdropSubscription.unsubscribe();\n this._positionSubscription.unsubscribe();\n }\n static ɵ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.ɵɵInputTransformsFeature, i0.ɵɵNgOnChangesFeature]\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkConnectedOverlay, [{\n type: Directive,\n args: [{\n selector: '[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]',\n exportAs: 'cdkConnectedOverlay'\n }]\n }], () => [], {\n origin: [{\n type: Input,\n args: ['cdkConnectedOverlayOrigin']\n }],\n positions: [{\n type: Input,\n args: ['cdkConnectedOverlayPositions']\n }],\n positionStrategy: [{\n type: Input,\n args: ['cdkConnectedOverlayPositionStrategy']\n }],\n offsetX: [{\n type: Input,\n args: ['cdkConnectedOverlayOffsetX']\n }],\n offsetY: [{\n type: Input,\n args: ['cdkConnectedOverlayOffsetY']\n }],\n width: [{\n type: Input,\n args: ['cdkConnectedOverlayWidth']\n }],\n height: [{\n type: Input,\n args: ['cdkConnectedOverlayHeight']\n }],\n minWidth: [{\n type: Input,\n args: ['cdkConnectedOverlayMinWidth']\n }],\n minHeight: [{\n type: Input,\n args: ['cdkConnectedOverlayMinHeight']\n }],\n backdropClass: [{\n type: Input,\n args: ['cdkConnectedOverlayBackdropClass']\n }],\n panelClass: [{\n type: Input,\n args: ['cdkConnectedOverlayPanelClass']\n }],\n viewportMargin: [{\n type: Input,\n args: ['cdkConnectedOverlayViewportMargin']\n }],\n scrollStrategy: [{\n type: Input,\n args: ['cdkConnectedOverlayScrollStrategy']\n }],\n open: [{\n type: Input,\n args: ['cdkConnectedOverlayOpen']\n }],\n disableClose: [{\n type: Input,\n args: ['cdkConnectedOverlayDisableClose']\n }],\n transformOriginSelector: [{\n type: Input,\n args: ['cdkConnectedOverlayTransformOriginOn']\n }],\n hasBackdrop: [{\n type: Input,\n args: [{\n alias: 'cdkConnectedOverlayHasBackdrop',\n transform: booleanAttribute\n }]\n }],\n lockPosition: [{\n type: Input,\n args: [{\n alias: 'cdkConnectedOverlayLockPosition',\n transform: booleanAttribute\n }]\n }],\n flexibleDimensions: [{\n type: Input,\n args: [{\n alias: 'cdkConnectedOverlayFlexibleDimensions',\n transform: booleanAttribute\n }]\n }],\n growAfterOpen: [{\n type: Input,\n args: [{\n alias: 'cdkConnectedOverlayGrowAfterOpen',\n transform: booleanAttribute\n }]\n }],\n push: [{\n type: Input,\n args: [{\n alias: 'cdkConnectedOverlayPush',\n transform: booleanAttribute\n }]\n }],\n disposeOnNavigation: [{\n type: Input,\n args: [{\n alias: 'cdkConnectedOverlayDisposeOnNavigation',\n transform: booleanAttribute\n }]\n }],\n backdropClick: [{\n type: Output\n }],\n positionChange: [{\n type: Output\n }],\n attach: [{\n type: Output\n }],\n detach: [{\n type: Output\n }],\n overlayKeydown: [{\n type: Output\n }],\n overlayOutsideClick: [{\n type: Output\n }]\n });\n})();\n/** @docs-private */\nfunction CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {\n return () => overlay.scrollStrategies.reposition();\n}\n/** @docs-private */\nconst CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {\n provide: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY,\n deps: [Overlay],\n useFactory: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY\n};\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(OverlayModule, [{\n type: NgModule,\n args: [{\n imports: [BidiModule, PortalModule, ScrollingModule, CdkConnectedOverlay, CdkOverlayOrigin],\n exports: [CdkConnectedOverlay, CdkOverlayOrigin, ScrollingModule],\n providers: [Overlay, CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER]\n }]\n }], null, null);\n})();\n\n/**\n * Alternative to OverlayContainer that supports correct displaying of overlay elements in\n * Fullscreen mode\n * https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen\n *\n * Should be provided in the root component.\n */\nclass FullscreenOverlayContainer extends OverlayContainer {\n _renderer = inject(RendererFactory2).createRenderer(null, null);\n _fullScreenEventName;\n _cleanupFullScreenListener;\n constructor() {\n super();\n }\n ngOnDestroy() {\n super.ngOnDestroy();\n this._cleanupFullScreenListener?.();\n }\n _createContainer() {\n const eventName = this._getEventName();\n super._createContainer();\n this._adjustParentForFullscreenChange();\n if (eventName) {\n this._cleanupFullScreenListener?.();\n this._cleanupFullScreenListener = this._renderer.listen('document', eventName, () => {\n this._adjustParentForFullscreenChange();\n });\n }\n }\n _adjustParentForFullscreenChange() {\n if (this._containerElement) {\n const fullscreenElement = this.getFullscreenElement();\n const parent = fullscreenElement || this._document.body;\n parent.appendChild(this._containerElement);\n }\n }\n _getEventName() {\n if (!this._fullScreenEventName) {\n const _document = this._document;\n if (_document.fullscreenEnabled) {\n this._fullScreenEventName = 'fullscreenchange';\n } else if (_document.webkitFullscreenEnabled) {\n this._fullScreenEventName = 'webkitfullscreenchange';\n } else if (_document.mozFullScreenEnabled) {\n this._fullScreenEventName = 'mozfullscreenchange';\n } else if (_document.msFullscreenEnabled) {\n this._fullScreenEventName = 'MSFullscreenChange';\n }\n }\n return this._fullScreenEventName;\n }\n /**\n * When the page is put into fullscreen mode, a specific element is specified.\n * Only that element and its children are visible when in fullscreen mode.\n */\n getFullscreenElement() {\n const _document = this._document;\n return _document.fullscreenElement || _document.webkitFullscreenElement || _document.mozFullScreenElement || _document.msFullscreenElement || null;\n }\n static ɵfac = function FullscreenOverlayContainer_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || FullscreenOverlayContainer)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: FullscreenOverlayContainer,\n factory: FullscreenOverlayContainer.ɵfac,\n providedIn: 'root'\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(FullscreenOverlayContainer, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { BlockScrollStrategy, CdkConnectedOverlay, CdkOverlayOrigin, CloseScrollStrategy, ConnectedOverlayPositionChange, ConnectionPositionPair, FlexibleConnectedPositionStrategy, FullscreenOverlayContainer, GlobalPositionStrategy, NoopScrollStrategy, Overlay, OverlayConfig, OverlayContainer, OverlayKeyboardDispatcher, OverlayModule, OverlayOutsideClickDispatcher, OverlayPositionBuilder, OverlayRef, RepositionScrollStrategy, STANDARD_DROPDOWN_ADJACENT_POSITIONS, STANDARD_DROPDOWN_BELOW_POSITIONS, ScrollStrategyOptions, ScrollingVisibility, validateHorizontalPosition, validateVerticalPosition };\n","import { FocusTrapFactory, InteractivityChecker, FocusMonitor, _IdGenerator, A11yModule } from '@angular/cdk/a11y';\nimport { OverlayRef, Overlay, OverlayContainer, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';\nimport { Platform, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';\nimport { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';\nimport { 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 { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';\nimport { Subject, defer, of } from 'rxjs';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { startWith } from 'rxjs/operators';\n\n/** Configuration for opening a modal dialog. */\nfunction CdkDialogContainer_ng_template_0_Template(rf, ctx) {}\nclass DialogConfig {\n /**\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 /** Whether this is a modal dialog. Used to set the `aria-modal` attribute. */\n ariaModal = true;\n /**\n * Where the dialog should focus on open.\n * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or\n * AutoFocusTarget instead.\n */\n 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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkDialogContainer, [{\n type: Component,\n args: [{\n selector: 'cdk-dialog-container',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.Default,\n imports: [CdkPortalOutlet],\n host: {\n 'class': 'cdk-dialog-container',\n 'tabindex': '-1',\n '[attr.id]': '_config.id || null',\n '[attr.role]': '_config.role',\n '[attr.aria-modal]': '_config.ariaModal',\n '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledByQueue[0]',\n '[attr.aria-label]': '_config.ariaLabel',\n '[attr.aria-describedby]': '_config.ariaDescribedBy || null'\n },\n template: \"\\n\",\n styles: [\".cdk-dialog-container{display:block;width:100%;height:100%;min-height:inherit;max-height:inherit}\"]\n }]\n }], () => [], {\n _portalOutlet: [{\n type: ViewChild,\n args: [CdkPortalOutlet, {\n static: true\n }]\n }]\n });\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 = 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 = 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 = new InjectionToken('DialogData');\n/** Injection token that can be used to provide default options for the dialog module. */\nconst DEFAULT_DIALOG_CONFIG = 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};\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(Dialog, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\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}\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(DialogModule, [{\n type: NgModule,\n args: [{\n imports: [OverlayModule, PortalModule, A11yModule, CdkDialogContainer],\n exports: [\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, CdkDialogContainer],\n providers: [Dialog]\n }]\n }], null, null);\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { CdkDialogContainer, DEFAULT_DIALOG_CONFIG, DIALOG_DATA, DIALOG_SCROLL_STRATEGY, DIALOG_SCROLL_STRATEGY_PROVIDER, DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, Dialog, DialogConfig, DialogModule, DialogRef, throwDialogContentAlreadyAttachedError };\n","export enum DialogType {\r\n Skills,\r\n Pigeon,\r\n Fancier,\r\n Report,\r\n Confirm,\r\n CreateTransfers,\r\n CreateFlight,\r\n Sponsor,\r\n Call,\r\n Barn,\r\n Filter,\r\n Flight,\r\n DevItem,\r\n Json,\r\n Ranking,\r\n Management,\r\n Component\r\n}","import { Injectable } from '@angular/core';\r\nimport { IReport, IReportIcon } from '../interfaces/IReport';\r\n\r\nexport type IRankingType = 'regional' | 'national' | 'megawing' | 'training';\r\nexport type IRankingSubType = 'fanciers' | 'pigeons';\r\nexport type IAgeType = 'youth' | 'yearling' | 'elder';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class Constants {\r\n\r\n static foodTypes = ['barley', 'grain', 'corn', 'peanut'];\r\n static roles = { administrator: 'Administrator', moderator: 'Moderator' };\r\n static status = {\r\n authenticating: 0,\r\n authenticationSuccess: 1,\r\n loadingUserData: 2,\r\n loadingUserDataSuccess: 3,\r\n success: 'success',\r\n closed: 'closed',\r\n notactivated: 'notactivated'\r\n };\r\n\r\n static ageTypes = {\r\n 1: 'youth',\r\n 2: 'yearling',\r\n 4: 'elder'\r\n };\r\n\r\n static medals = {\r\n 1: 'gold',\r\n 2: 'silver',\r\n 3: 'bronze'\r\n };\r\n\r\n static reportTypes = {\r\n birth: 'birth',\r\n deathAge: 'deathAge',\r\n deathFlight: 'deathFlight',\r\n deathDisease: 'deathDisease',\r\n flightPayout: 'flightPayout',\r\n flightInvitation: 'flightInvitation',\r\n financial: 'financial',\r\n transferIn: 'transferIn',\r\n transferOut: 'transferOut',\r\n transferFailed: 'transferFailed',\r\n barn: 'barn',\r\n item: 'item',\r\n sponsor: 'sponsor',\r\n ranking: 'ranking',\r\n payout: 'payout',\r\n dump: 'dump',\r\n subscribe: 'subscribe',\r\n unsubscribe: 'unsubscribe',\r\n bingoPrize: 'bingoPrize',\r\n bingoFine: 'bingoFine',\r\n bingoCard: 'bingoCard',\r\n certificate: 'certificate'\r\n };\r\n\r\n static flightStatus = { NOTSTARTED: 'notStarted', STARTED: 'started', ENDED: 'ended' };\r\n\r\n logLevel = {\r\n verbose: 0,\r\n debug: 1,\r\n info: 2,\r\n warn: 3,\r\n error: 4,\r\n fatal: 5\r\n };\r\n\r\n connectionState = { initial: 0, connecting: 1, connected: 2, disconnected: 3 };\r\n\r\n snapshots = { subscriptions: 'subscriptions', pigeon: 'pigeon', fancier: 'fancier', calendar: 'calendar', flight: 'flight' };\r\n buttons = {\r\n filter: { id: 0, icon: 'filter_list', label: 'filter' },\r\n switchView: { id: 1, icon: 'view_module', label: '' },\r\n dump: { id: 2, icon: 'delete', label: 'dump' },\r\n transfer: { id: 3, icon: 'swap_horiz', label: 'transfer' },\r\n couple: { id: 4, icon: 'favorite', label: 'couple' },\r\n save: { id: 5, icon: 'done_all', label: 'save' },\r\n results: { id: 6, icon: 'format_list_numbered', label: 'results' },\r\n add: { id: 7, icon: 'add', label: 'add' },\r\n edit: { id: 8, icon: 'mode_edit', label: 'edit' },\r\n delete: { id: 9, icon: 'close', label: 'delete' },\r\n refresh: { id: 10, icon: 'refresh', label: 'refresh' },\r\n group: { id: 11, icon: 'group', label: 'groups' }\r\n };\r\n\r\n maxStats = 60;\r\n static stats = [\r\n { i18n: 'form', cap: 7 },\r\n { i18n: 'experience', cap: 10 },\r\n { i18n: 'stamina', cap: 11 },\r\n { i18n: 'speed', cap: 11 },\r\n { i18n: 'navigation', cap: 11 },\r\n { i18n: 'technique', cap: 11 },\r\n { i18n: 'aerodynamics', cap: 11 },\r\n { i18n: 'intelligence', cap: 12, withSex: true },\r\n { i18n: 'libido', cap: 11, withSex: true },\r\n { i18n: 'nightvision', cap: 10 }];\r\n\r\n rankingTypes = [{ id: 2, i18n: 'rankingType.national' }, { id: 0, i18n: 'rankingType.regional' }];\r\n ageTypes = [{ id: 0, i18n: 'ageType.youth' }, { id: 1, i18n: 'ageType.yearling' }, { id: 2, i18n: 'ageType.elder' }];\r\n transferTypes = [\r\n { id: 0, i18n: 'transferType.all' },\r\n { id: 1, i18n: 'transferType.incoming' },\r\n { id: 2, i18n: 'transferType.outgoing' }];\r\n\r\n displayModes = { DETAIL: 0, MOBILE: 1, ROW: 2, SELECTION: 3, TRANSFER: 4 };\r\n tables = {\r\n team: {\r\n columns: [{ prop: 'checked', checkboxable: true, maxWidth: '40' },\r\n { prop: 'name', name: 'name', flexGrow: 3, minWidth: '250' },\r\n { prop: 'premium' },\r\n { prop: 'sex', checkboxable: true },\r\n { prop: 'years' },\r\n { prop: 'skills.form', name: 'form', minWidth: '60' },\r\n { prop: 'skills.experience', name: 'experience', minWidth: '60' },\r\n { prop: 'skills.speed', name: 'speed', minWidth: '60' },\r\n { prop: 'skills.aerodynamics', name: 'aerodynamics', minWidth: '60' },\r\n { prop: 'skills.stamina', name: 'stamina', minWidth: '60' },\r\n { prop: 'skills.intelligence', name: 'intelligence', minWidth: '60' },\r\n { prop: 'skills.navigation', name: 'navigation', minWidth: '60' },\r\n { prop: 'skills.libido', name: 'libido', minWidth: '60' },\r\n { prop: 'skills.technique', name: 'technique', minWidth: '60' },\r\n { prop: 'skills.nightvision', name: 'nightvision', minWidth: '60' }\r\n ]\r\n }\r\n };\r\n\r\n\r\n loadingText = {\r\n transfers: 4,\r\n flight: 2,\r\n sponsor: 1\r\n };\r\n\r\n getLoadingText(type: string): string {\r\n return 'loading.' + type + '.' + (Math.floor(Math.random() * this.loadingText[type]) + 1);\r\n }\r\n\r\n public static getReportIcon(report: IReport): IReportIcon {\r\n switch (report.type) {\r\n case Constants.reportTypes.deathAge:\r\n case Constants.reportTypes.deathDisease:\r\n case Constants.reportTypes.deathFlight:\r\n case Constants.reportTypes.dump: return { iconClass: 'fa fa-skull-crossbones', color: '#616161' };\r\n case Constants.reportTypes.transferIn: return { iconClass: 'fa fa-long-arrow-alt-left', color: '#4CAF50' };\r\n case Constants.reportTypes.transferOut: return { iconClass: 'fa fa-long-arrow-alt-right', color: '#FF9800' };\r\n case Constants.reportTypes.transferFailed: return { iconClass: 'fa fa-exchange-alt', color: '#b80000' };\r\n case Constants.reportTypes.birth: return { iconClass: 'fa fa-heart', color: '#d9534f' };\r\n case Constants.reportTypes.flightPayout:\r\n case Constants.reportTypes.financial:\r\n case Constants.reportTypes.bingoCard: return { iconClass: 'fa fa-dollar-sign', color: '#FF9800' };\r\n case Constants.reportTypes.flightInvitation: return { iconClass: 'fa fa-calendar-alt', color: 'cadetblue' };\r\n case Constants.reportTypes.barn:\r\n case Constants.reportTypes.item: return { iconClass: 'fa fa-shopping-cart', color: 'darkseagreen' };\r\n case Constants.reportTypes.ranking: return { iconClass: 'fas fa-trophy', color: 'goldenrod' };\r\n case Constants.reportTypes.sponsor: return { iconClass: 'fas fa-file-contract', color: '#4fc3d2' };\r\n case Constants.reportTypes.subscribe: return { iconClass: 'fas fa-plus', color: '#4fc3d2' };\r\n case Constants.reportTypes.unsubscribe: return { iconClass: 'fas fa-minus', color: '#E91E63' };\r\n case Constants.reportTypes.bingoPrize: return { iconClass: 'fas fa-bullhorn', color: '#FF9800' };\r\n case Constants.reportTypes.bingoFine: return { iconClass: 'fas fa-hand-paper', color: '#a2403d' };\r\n case Constants.reportTypes.certificate: return { iconClass: 'fas fa-stamp', color: 'lightseagreen' };\r\n default: return {};\r\n }\r\n }\r\n}\r\n","import * as i0 from '@angular/core';\nimport { InjectionToken, inject, booleanAttribute, Directive, Input, ChangeDetectorRef, EventEmitter, Output, NgModule } from '@angular/core';\nimport { _IdGenerator } from '@angular/cdk/a11y';\nimport { UniqueSelectionDispatcher } from '@angular/cdk/collections';\nimport { Subject, Subscription } from 'rxjs';\n\n/**\n * Injection token that can be used to reference instances of `CdkAccordion`. It serves\n * as alternative token to the actual `CdkAccordion` class which could cause unnecessary\n * retention of the class and its directive metadata.\n */\nconst CDK_ACCORDION = new InjectionToken('CdkAccordion');\n/**\n * Directive whose purpose is to manage the expanded state of CdkAccordionItem children.\n */\nclass CdkAccordion {\n /** Emits when the state of the accordion changes */\n _stateChanges = new Subject();\n /** Stream that emits true/false when openAll/closeAll is triggered. */\n _openCloseAllActions = new Subject();\n /** A readonly id value to use for unique selection coordination. */\n id = inject(_IdGenerator).getId('cdk-accordion-');\n /** Whether the accordion should allow multiple expanded accordion items simultaneously. */\n multi = false;\n /** Opens all enabled accordion items in an accordion where multi is enabled. */\n openAll() {\n if (this.multi) {\n this._openCloseAllActions.next(true);\n }\n }\n /** Closes all enabled accordion items. */\n closeAll() {\n this._openCloseAllActions.next(false);\n }\n ngOnChanges(changes) {\n this._stateChanges.next(changes);\n }\n ngOnDestroy() {\n this._stateChanges.complete();\n this._openCloseAllActions.complete();\n }\n static ɵfac = function CdkAccordion_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkAccordion)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkAccordion,\n selectors: [[\"cdk-accordion\"], [\"\", \"cdkAccordion\", \"\"]],\n inputs: {\n multi: [2, \"multi\", \"multi\", booleanAttribute]\n },\n exportAs: [\"cdkAccordion\"],\n features: [i0.ɵɵProvidersFeature([{\n provide: CDK_ACCORDION,\n useExisting: CdkAccordion\n }]), i0.ɵɵInputTransformsFeature, i0.ɵɵNgOnChangesFeature]\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkAccordion, [{\n type: Directive,\n args: [{\n selector: 'cdk-accordion, [cdkAccordion]',\n exportAs: 'cdkAccordion',\n providers: [{\n provide: CDK_ACCORDION,\n useExisting: CdkAccordion\n }]\n }]\n }], null, {\n multi: [{\n type: Input,\n args: [{\n transform: booleanAttribute\n }]\n }]\n });\n})();\n\n/**\n * A basic directive expected to be extended and decorated as a component. Sets up all\n * events and attributes needed to be managed by a CdkAccordion parent.\n */\nclass CdkAccordionItem {\n accordion = inject(CDK_ACCORDION, {\n optional: true,\n skipSelf: true\n });\n _changeDetectorRef = inject(ChangeDetectorRef);\n _expansionDispatcher = inject(UniqueSelectionDispatcher);\n /** Subscription to openAll/closeAll events. */\n _openCloseAllSubscription = Subscription.EMPTY;\n /** Event emitted every time the AccordionItem is closed. */\n closed = new EventEmitter();\n /** Event emitted every time the AccordionItem is opened. */\n opened = new EventEmitter();\n /** Event emitted when the AccordionItem is destroyed. */\n destroyed = new EventEmitter();\n /**\n * Emits whenever the expanded state of the accordion changes.\n * Primarily used to facilitate two-way binding.\n * @docs-private\n */\n expandedChange = new EventEmitter();\n /** The unique AccordionItem id. */\n id = inject(_IdGenerator).getId('cdk-accordion-child-');\n /** Whether the AccordionItem is expanded. */\n get expanded() {\n return this._expanded;\n }\n set expanded(expanded) {\n // Only emit events and update the internal value if the value changes.\n if (this._expanded !== expanded) {\n this._expanded = expanded;\n this.expandedChange.emit(expanded);\n if (expanded) {\n this.opened.emit();\n /**\n * In the unique selection dispatcher, the id parameter is the id of the CdkAccordionItem,\n * the name value is the id of the accordion.\n */\n const accordionId = this.accordion ? this.accordion.id : this.id;\n this._expansionDispatcher.notify(this.id, accordionId);\n } else {\n this.closed.emit();\n }\n // Ensures that the animation will run when the value is set outside of an `@Input`.\n // This includes cases like the open, close and toggle methods.\n this._changeDetectorRef.markForCheck();\n }\n }\n _expanded = false;\n /** Whether the AccordionItem is disabled. */\n disabled = false;\n /** Unregister function for _expansionDispatcher. */\n _removeUniqueSelectionListener = () => {};\n constructor() {}\n ngOnInit() {\n this._removeUniqueSelectionListener = this._expansionDispatcher.listen((id, accordionId) => {\n if (this.accordion && !this.accordion.multi && this.accordion.id === accordionId && this.id !== id) {\n this.expanded = false;\n }\n });\n // When an accordion item is hosted in an accordion, subscribe to open/close events.\n if (this.accordion) {\n this._openCloseAllSubscription = this._subscribeToOpenCloseAllActions();\n }\n }\n /** Emits an event for the accordion item being destroyed. */\n ngOnDestroy() {\n this.opened.complete();\n this.closed.complete();\n this.destroyed.emit();\n this.destroyed.complete();\n this._removeUniqueSelectionListener();\n this._openCloseAllSubscription.unsubscribe();\n }\n /** Toggles the expanded state of the accordion item. */\n toggle() {\n if (!this.disabled) {\n this.expanded = !this.expanded;\n }\n }\n /** Sets the expanded state of the accordion item to false. */\n close() {\n if (!this.disabled) {\n this.expanded = false;\n }\n }\n /** Sets the expanded state of the accordion item to true. */\n open() {\n if (!this.disabled) {\n this.expanded = true;\n }\n }\n _subscribeToOpenCloseAllActions() {\n return this.accordion._openCloseAllActions.subscribe(expanded => {\n // Only change expanded state if item is enabled\n if (!this.disabled) {\n this.expanded = expanded;\n }\n });\n }\n static ɵfac = function CdkAccordionItem_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkAccordionItem)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkAccordionItem,\n selectors: [[\"cdk-accordion-item\"], [\"\", \"cdkAccordionItem\", \"\"]],\n inputs: {\n expanded: [2, \"expanded\", \"expanded\", booleanAttribute],\n disabled: [2, \"disabled\", \"disabled\", booleanAttribute]\n },\n outputs: {\n closed: \"closed\",\n opened: \"opened\",\n destroyed: \"destroyed\",\n expandedChange: \"expandedChange\"\n },\n exportAs: [\"cdkAccordionItem\"],\n features: [i0.ɵɵProvidersFeature([\n // Provide `CDK_ACCORDION` as undefined to prevent nested accordion items from\n // registering to the same accordion.\n {\n provide: CDK_ACCORDION,\n useValue: undefined\n }]), i0.ɵɵInputTransformsFeature]\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkAccordionItem, [{\n type: Directive,\n args: [{\n selector: 'cdk-accordion-item, [cdkAccordionItem]',\n exportAs: 'cdkAccordionItem',\n providers: [\n // Provide `CDK_ACCORDION` as undefined to prevent nested accordion items from\n // registering to the same accordion.\n {\n provide: CDK_ACCORDION,\n useValue: undefined\n }]\n }]\n }], () => [], {\n closed: [{\n type: Output\n }],\n opened: [{\n type: Output\n }],\n destroyed: [{\n type: Output\n }],\n expandedChange: [{\n type: Output\n }],\n expanded: [{\n type: Input,\n args: [{\n transform: booleanAttribute\n }]\n }],\n disabled: [{\n type: Input,\n args: [{\n transform: booleanAttribute\n }]\n }]\n });\n})();\nclass CdkAccordionModule {\n static ɵfac = function CdkAccordionModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkAccordionModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: CdkAccordionModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({});\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkAccordionModule, [{\n type: NgModule,\n args: [{\n imports: [CdkAccordion, CdkAccordionItem],\n exports: [CdkAccordion, CdkAccordionItem]\n }]\n }], null, null);\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { CDK_ACCORDION, CdkAccordion, CdkAccordionItem, CdkAccordionModule };\n","import { CdkAccordionItem, CdkAccordionModule } from '@angular/cdk/accordion';\r\nimport { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';\r\nimport { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, Input, QueryList, TemplateRef } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'accordion-item',\r\n template: '',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: []\r\n})\r\nexport class AccordionItemComponent {\r\n @Input() title: string;\r\n @Input() icon?: string;\r\n @Input() iconColor?: string;\r\n @Input() expanded?: boolean;\r\n @Input() gridArea: string;\r\n @ContentChild('header') header: TemplateRef;\r\n @ContentChild('content') content: TemplateRef;\r\n}\r\n\r\n@Component({\r\n selector: 'accordion',\r\n templateUrl: 'accordion.component.html',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [NgIf, NgFor, NgClass, CdkAccordionModule, NgTemplateOutlet]\r\n})\r\nexport class AccordionComponent implements AfterContentInit {\r\n @ContentChildren(AccordionItemComponent) items: QueryList;\r\n\r\n @Input() multi = true;\r\n @Input() fit = false;\r\n @Input() expanded = false;\r\n @Input() footer?: boolean;\r\n\r\n constructor(private cdr: ChangeDetectorRef) { }\r\n\r\n ngAfterContentInit(): void {\r\n this.items.changes.subscribe(() => this.cdr.detectChanges());\r\n }\r\n\r\n toggle(item: CdkAccordionItem) {\r\n item.toggle();\r\n }\r\n}","\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n @if(footer) {\r\n
\r\n }\r\n
\r\n
\r\n
\r\n\r\n\r\n {{item.title}}\r\n \r\n","import { NgClass } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';\r\n\r\n@Component({\n selector: 'data-chip',\n template: ` \r\n
\r\n @if(hideAvatar && index) {\r\n
{{index}}
\r\n }\r\n @else {\r\n
\r\n @if(avatarUrl) {\r\n
\r\n }\r\n @else {\r\n
\r\n @if(iconClass) {\r\n \r\n }\r\n
\r\n }\r\n
\r\n }\r\n
\r\n \r\n \r\n
\r\n @if(badge) {\r\n
\r\n \r\n
\r\n }\r\n @else {\r\n
\r\n }\r\n
\r\n`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [NgClass]\n})\r\nexport class DataChipComponent implements OnInit {\r\n @Input()\r\n public index: number;\r\n @Input()\r\n public text: string;\r\n @Input()\r\n public subText: string;\r\n @Input()\r\n public badge: string;\r\n @Input()\r\n public badgeClass: any;\r\n @Input({\r\n transform: (value: string) => {\r\n // eslint-disable-next-line @angular-eslint/no-input-rename\r\n const defaultAvatar = 'media/user-icon-placeholder.png';\r\n return value ? value : defaultAvatar;\r\n }\r\n }) avatarUrl: string;\r\n @Input()\r\n public avatarClass: string;\r\n @Input()\r\n public iconClass: string;\r\n @Input()\r\n public iconColor: string;\r\n @Input()\r\n public highlight = false;\r\n @Input()\r\n public chipClass: any;\r\n\r\n protected hideAvatar = false;\r\n\r\n ngOnInit(): void {\r\n this.hideAvatar = !this.avatarUrl && !this.avatarClass && !this.iconClass;\r\n }\r\n}\r\n","import { NgStyle } from '@angular/common';\r\nimport { Component, Input, OnChanges } from '@angular/core';\r\nimport { TranslateModule } from '@ngx-translate/core';\r\nimport { ISkill } from 'src/app/interfaces/IDialogData';\r\nimport { AccordionComponent, AccordionItemComponent } from \"../base/accordion.component\";\r\nimport { DataChipComponent } from \"../base/data.chip.component\";\r\n\r\n@Component({\n selector: 'skill-list',\n templateUrl: 'skill-list.component.html',\n imports: [NgStyle, TranslateModule, DataChipComponent, AccordionComponent, AccordionItemComponent]\n})\r\nexport class SkillListComponent implements OnChanges {\r\n\r\n @Input() skill: ISkill;\r\n @Input() value: number;\r\n @Input() sex: boolean;\r\n\r\n public skillValues: number[];\r\n public hasFemaleLabel: boolean;\r\n\r\n ngOnChanges(): void {\r\n this.set();\r\n }\r\n\r\n set(): void {\r\n this.skillValues = new Array(this.skill.cap).fill(1).map((x, i) => i);\r\n this.hasFemaleLabel = ['intelligence', 'libido'].indexOf(this.skill.i18n) >= 0;\r\n }\r\n}\r\n","\r\n \r\n \r\n @for (s of skillValues; track s) {\r\n \r\n }\r\n \r\n \r\n","import { DialogRef } from '@angular/cdk/dialog';\r\nimport { ComponentType } from '@angular/cdk/portal';\r\nimport { UntypedFormGroup } from '@angular/forms';\r\nimport { SkillListComponent } from '../components/skill-list/skill-list.component';\r\nimport { Constants } from '../services/constants';\r\nimport { DialogType } from './DialogType';\r\nimport { IDevItem } from './IDevItem';\r\nimport { IFlight } from './IFlight';\r\nimport { IPigeon } from './IPigeon';\r\nimport { IReport } from './IReport';\r\nimport { ISkillSet } from './ISkills';\r\nimport { ISponsor } from './ISponsor';\r\n\r\nexport interface IDialogData {\r\n type?: DialogType;\r\n component?: ComponentType;\r\n inputs?: Map;\r\n color?: string;\r\n title?: string;\r\n commands?: any[];\r\n dialog?: DialogRef;\r\n afterClosed?: (res?: any) => void;\r\n position?: 'left' | 'center' | 'right';\r\n data?: unknown;\r\n}\r\n\r\nexport interface ISkill {\r\n i18n: string;\r\n i: string;\r\n cap: number;\r\n}\r\n\r\nexport class BaseData implements IDialogData {\r\n color?: string;\r\n commands?: any[];\r\n dialog: DialogRef;\r\n component?: ComponentType;\r\n inputs?: Map;\r\n position?: 'left' | 'center' | 'right';\r\n\r\n constructor(public type: DialogType, public title?: string) { }\r\n afterClosed?: (res?: any) => void;\r\n}\r\n\r\nexport class DevData extends BaseData {\r\n constructor(public item?: IDevItem) {\r\n super(DialogType.DevItem, 'dev-item');\r\n }\r\n}\r\n\r\nexport class SubscribeData extends BaseData {\r\n constructor(public flight: IFlight, component: ComponentType) {\r\n super(DialogType.Flight, 'flight.report');\r\n this.component = component;\r\n this.inputs = new Map([[\"id\", flight.id]]);\r\n this.commands = ['report', flight.id];\r\n }\r\n}\r\n\r\nexport class FlightData extends BaseData {\r\n constructor(public flight: IFlight) {\r\n super(DialogType.Flight, 'flight.report');\r\n // this.component = FlightComponent;\r\n this.inputs = new Map([[\"id\", flight.id]]);\r\n this.commands = ['report', flight.id];\r\n }\r\n}\r\n\r\nexport class JsonData extends BaseData {\r\n\r\n constructor(public json: any) {\r\n super(DialogType.Json, 'Debug');\r\n this.commands = ['debug'];\r\n }\r\n}\r\n\r\nexport class ConfirmData extends BaseData {\r\n constructor(public title: string, public message?: string, public args?: any) {\r\n super(DialogType.Confirm, title);\r\n }\r\n}\r\n\r\nexport class FilterData extends BaseData {\r\n constructor(public form: UntypedFormGroup) {\r\n super(DialogType.Filter);\r\n this.title = 'search';\r\n }\r\n}\r\n\r\nexport class SponsorData extends BaseData {\r\n constructor(public sponsor?: ISponsor) {\r\n super(DialogType.Sponsor);\r\n this.title = 'sponsor.' + sponsor.sponsorId + '.title';\r\n }\r\n}\r\n\r\nexport class CreateTransferData extends BaseData {\r\n constructor(public pigeons: IPigeon[]) {\r\n super(DialogType.CreateTransfers);\r\n this.title = 'create.transfers';\r\n }\r\n}\r\n\r\nexport class PigeonData extends BaseData {\r\n id: number;\r\n\r\n constructor(id: number, title: string) {\r\n super(DialogType.Pigeon);\r\n this.id = id;\r\n this.title = title;\r\n this.commands = ['pigeon', id];\r\n }\r\n}\r\n\r\nexport class FancierData extends BaseData {\r\n id: number;\r\n\r\n constructor(id: number, title: string) {\r\n super(DialogType.Fancier);\r\n this.id = id;\r\n this.title = title;\r\n this.commands = ['fancier', id];\r\n }\r\n}\r\n\r\nexport class SkillsData extends BaseData {\r\n constructor(public skill: ISkill, skills: ISkillSet, sex: boolean) {\r\n super(DialogType.Skills);\r\n this.title = 'skills';\r\n this.component = SkillListComponent;\r\n this.inputs = new Map([\r\n [\"skill\", skill],\r\n [\"sex\", sex],\r\n [\"value\", skills[skill.i18n]]\r\n ]);\r\n }\r\n}\r\n\r\nexport class ReportData extends BaseData {\r\n color = '#4fc3d2';\r\n icon = '';\r\n\r\n constructor(public report: IReport) {\r\n super(DialogType.Report);\r\n this.title = `reports.${this.report.type}`;\r\n\r\n switch (report.type) {\r\n case Constants.reportTypes.deathAge:\r\n case Constants.reportTypes.deathDisease:\r\n case Constants.reportTypes.deathFlight:\r\n case Constants.reportTypes.dump:\r\n this.icon = 'fa-skull-crossbones';\r\n this.color = '#616161'; break;\r\n case Constants.reportTypes.transferIn:\r\n this.icon = 'fa-long-arrow-alt-left';\r\n this.color = '#4CAF50'; break;\r\n case Constants.reportTypes.transferOut:\r\n this.icon = 'fa-long-arrow-alt-right';\r\n this.color = '#FF9800'; break;\r\n case Constants.reportTypes.transferFailed:\r\n this.icon = 'fa-exchange-alt';\r\n this.color = '#b80000'; break;\r\n case Constants.reportTypes.birth:\r\n this.icon = 'fa-heart';\r\n this.color = '#d9534f'; break;\r\n case Constants.reportTypes.flightPayout:\r\n case Constants.reportTypes.financial:\r\n case Constants.reportTypes.bingoCard:\r\n this.icon = 'fa-dollar-sign';\r\n this.color = '#FF9800'; break;\r\n case Constants.reportTypes.flightInvitation:\r\n this.icon = 'fa-calendar-alt';\r\n this.color = 'cadetblue'; break;\r\n case Constants.reportTypes.barn:\r\n case Constants.reportTypes.item:\r\n this.icon = 'fa-shopping-cart';\r\n this.color = 'darkseagreen'; break;\r\n case Constants.reportTypes.ranking:\r\n this.icon = 'fas fa-trophy';\r\n this.color = 'goldenrod'; break;\r\n case Constants.reportTypes.sponsor:\r\n this.icon = 'fas fa-file-contract'; break;\r\n case Constants.reportTypes.subscribe:\r\n this.icon = 'fas fa-plus'; break;\r\n case Constants.reportTypes.unsubscribe:\r\n this.icon = 'fas fa-minus';\r\n this.color = '#E91E63'; break;\r\n case Constants.reportTypes.bingoPrize:\r\n this.icon = 'fas fa-bullhorn';\r\n this.color = '#FF9800'; break;\r\n case Constants.reportTypes.bingoFine:\r\n this.icon = 'fas fa-hand-paper';\r\n this.color = '#a2403d'; break;\r\n case Constants.reportTypes.certificate:\r\n this.icon = 'fas fa-stamp';\r\n this.color = 'lightseagreen'; break;\r\n }\r\n }\r\n}\r\nexport { DialogType };\r\n\r\n","// This file can be replaced during build by using the `fileReplacements` array.\r\n// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.\r\n// The list of file replacements can be found in `angular.json`.\r\n\r\nexport const environment = {\r\n production: false\r\n};\r\n\r\n/*\r\n * For easier debugging in development mode, you can import the following file\r\n * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.\r\n *\r\n * This import should be commented out in production mode because it will have a negative impact\r\n * on performance if an error is thrown.\r\n */\r\n// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.\r\n","import { formatCurrency, getCurrencySymbol } from '@angular/common';\r\nimport { WritableSignal } from '@angular/core';\r\nimport { Observable, of, timer } from 'rxjs';\r\nimport { map } from 'rxjs/operators';\r\nimport { environment } from 'src/environments/environment';\r\nimport { TableDataRequest } from '../classes/Table';\r\nimport { IPagedResult } from '../interfaces/IPFResponse';\r\n\r\nexport class Utils {\r\n\r\n public static localeId = 'nl';\r\n public static currencyCode = 'EUR';\r\n public static timezone = new Date().getTimezoneOffset().toString();\r\n\r\n public static counter = timer(0, 1000);\r\n\r\n public static getUtcTime() {\r\n const d1 = new Date();\r\n const d2 = new Date(d1.getUTCFullYear(), d1.getUTCMonth(), d1.getUTCDate(),\r\n d1.getUTCHours(), d1.getUTCMinutes(), d1.getUTCSeconds());\r\n return d2.getTime();\r\n }\r\n}\r\n\r\n/** Only set a signal when the current value is not equal */\r\nexport function setSignalWithCheck(signal: WritableSignal, newValue: T) {\r\n const currentValue = signal();\r\n if (!deepEqual(currentValue, newValue))\r\n signal.set(newValue);\r\n}\r\n\r\nexport function deepEqual(object1, object2) {\r\n const keys1 = Object.keys(object1);\r\n const keys2 = Object.keys(object2);\r\n\r\n if (keys1.length !== keys2.length) {\r\n return false;\r\n }\r\n\r\n function isObject(object) {\r\n return object != null && typeof object === 'object';\r\n }\r\n\r\n for (const key of keys1) {\r\n const val1 = object1[key];\r\n const val2 = object2[key];\r\n const areObjects = isObject(val1) && isObject(val2);\r\n if (\r\n areObjects && !deepEqual(val1, val2) ||\r\n !areObjects && val1 !== val2\r\n ) {\r\n return false;\r\n }\r\n }\r\n\r\n return true;\r\n}\r\n\r\nexport function hasValue(o: any) {\r\n return o !== undefined && o !== null;\r\n}\r\n\r\nexport function getCurrency(val: number) {\r\n return formatCurrency(val, Utils.localeId || 'nl', getCurrencySymbol(Utils.currencyCode, 'narrow'), '1.0-0');\r\n}\r\n\r\nexport function page(src: T[] | Observable, req: TableDataRequest): Observable> {\r\n const start = req.page * req.pageSize;\r\n const end = start + req.pageSize;\r\n\r\n if (src instanceof Array) {\r\n return of({ items: src.slice(start, end), count: src.length });\r\n }\r\n return src.pipe(map(o => ({ items: o.slice(start, end), count: o.length })));\r\n}\r\n\r\nexport function paged(src: T[] | Observable): Observable> {\r\n if (src instanceof Array) {\r\n return of({ items: src, count: src.length });\r\n }\r\n return src.pipe(map(o => ({ items: o, count: o.length })));\r\n}\r\n\r\nexport function debug(message?: any, ...optionalParams: any[]) {\r\n if (!environment.production) {\r\n console.log(message, ...optionalParams);\r\n }\r\n}\r\n\r\nexport function depClass(department: number) {\r\n return department > 0 ? (Math.floor(Math.log2(department)) + 1) : 0;\r\n}\r\n\r\nexport function depString(department: number) {\r\n const c = depClass(department);\r\n return c + '.' + (department - classDepartmentStart(c));\r\n}\r\n\r\nexport function classDepartmentStart(c: number) {\r\n let start = 0;\r\n\r\n for (let i = 0; i < c - 1; i++) {\r\n start += Math.pow(2, i);\r\n }\r\n\r\n return start;\r\n}\r\n\r\nexport function compareMaps(map1, map2) {\r\n let testVal;\r\n\r\n if (!map1 && !map2)\r\n return true;\r\n\r\n if (map1.size !== map2.size) {\r\n return false;\r\n }\r\n for (let [key, val] of map1) {\r\n testVal = map2.get(key);\r\n // in cases of an undefined value, make sure the key\r\n // actually exists on the object so there are no false positives\r\n if (testVal !== val || (testVal === undefined && !map2.has(key))) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n}","import * as i0 from '@angular/core';\nimport { Version, InjectionToken, inject, NgModule, LOCALE_ID, Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, ElementRef, ANIMATION_MODULE_TYPE, NgZone, Injector, Input, booleanAttribute, ChangeDetectorRef, EventEmitter, isSignal, Output, ViewChild } from '@angular/core';\nimport { HighContrastModeDetector, isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader, _IdGenerator } from '@angular/cdk/a11y';\nimport { BidiModule } from '@angular/cdk/bidi';\nimport { Subject } from 'rxjs';\nimport { startWith } from 'rxjs/operators';\nimport { normalizePassiveListenerOptions, _getEventTarget, Platform } from '@angular/cdk/platform';\nimport { coerceElement } from '@angular/cdk/coercion';\nimport { _CdkPrivateStyleLoader, _VisuallyHiddenLoader } from '@angular/cdk/private';\nimport { ENTER, SPACE, hasModifierKey } from '@angular/cdk/keycodes';\nimport { DOCUMENT } from '@angular/common';\n\n/** Current version of Angular Material. */\nconst _c0 = [\"*\", [[\"mat-option\"], [\"ng-container\"]]];\nconst _c1 = [\"*\", \"mat-option, ng-container\"];\nconst _c2 = [\"text\"];\nconst _c3 = [[[\"mat-icon\"]], \"*\"];\nconst _c4 = [\"mat-icon\", \"*\"];\nfunction MatOption_Conditional_0_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelement(0, \"mat-pseudo-checkbox\", 1);\n }\n if (rf & 2) {\n const ctx_r0 = i0.ɵɵnextContext();\n i0.ɵɵproperty(\"disabled\", ctx_r0.disabled)(\"state\", ctx_r0.selected ? \"checked\" : \"unchecked\");\n }\n}\nfunction MatOption_Conditional_5_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelement(0, \"mat-pseudo-checkbox\", 3);\n }\n if (rf & 2) {\n const ctx_r0 = i0.ɵɵnextContext();\n i0.ɵɵproperty(\"disabled\", ctx_r0.disabled);\n }\n}\nfunction MatOption_Conditional_6_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"span\", 4);\n i0.ɵɵtext(1);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const ctx_r0 = i0.ɵɵnextContext();\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate1(\"(\", ctx_r0.group.label, \")\");\n }\n}\nconst _c5 = [\"mat-internal-form-field\", \"\"];\nconst _c6 = [\"*\"];\nconst VERSION = new Version('19.0.4');\n\n/** @docs-private */\nclass AnimationCurves {\n static STANDARD_CURVE = 'cubic-bezier(0.4,0.0,0.2,1)';\n static DECELERATION_CURVE = 'cubic-bezier(0.0,0.0,0.2,1)';\n static ACCELERATION_CURVE = 'cubic-bezier(0.4,0.0,1,1)';\n static SHARP_CURVE = 'cubic-bezier(0.4,0.0,0.6,1)';\n}\n/** @docs-private */\nclass AnimationDurations {\n static COMPLEX = '375ms';\n static ENTERING = '225ms';\n static EXITING = '195ms';\n}\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 = 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 */\nclass 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(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(MatCommonModule, [{\n type: NgModule,\n args: [{\n imports: [BidiModule],\n exports: [BidiModule]\n }]\n }], () => [], null);\n})();\n\n/**\n * Class that tracks the error state of a component.\n * @docs-private\n */\nclass _ErrorStateTracker {\n _defaultMatcher;\n ngControl;\n _parentFormGroup;\n _parentForm;\n _stateChanges;\n /** Whether the tracker is currently in an error state. */\n errorState = false;\n /** User-defined matcher for the error state. */\n matcher;\n constructor(_defaultMatcher, ngControl, _parentFormGroup, _parentForm, _stateChanges) {\n this._defaultMatcher = _defaultMatcher;\n this.ngControl = ngControl;\n this._parentFormGroup = _parentFormGroup;\n this._parentForm = _parentForm;\n this._stateChanges = _stateChanges;\n }\n /** Updates the error state based on the provided error state matcher. */\n updateErrorState() {\n const oldState = this.errorState;\n const parent = this._parentFormGroup || this._parentForm;\n const matcher = this.matcher || this._defaultMatcher;\n const control = this.ngControl ? this.ngControl.control : null;\n const newState = matcher?.isErrorState(control, parent) ?? false;\n if (newState !== oldState) {\n this.errorState = newState;\n this._stateChanges.next();\n }\n }\n}\n\n/** InjectionToken for datepicker that can be used to override default locale code. */\nconst MAT_DATE_LOCALE = new InjectionToken('MAT_DATE_LOCALE', {\n providedIn: 'root',\n factory: MAT_DATE_LOCALE_FACTORY\n});\n/** @docs-private */\nfunction MAT_DATE_LOCALE_FACTORY() {\n return inject(LOCALE_ID);\n}\nconst NOT_IMPLEMENTED = 'Method not implemented';\n/** Adapts type `D` to be usable as a date by cdk-based components that work with dates. */\nclass DateAdapter {\n /** The locale to use for all dates. */\n locale;\n _localeChanges = new Subject();\n /** A stream that emits when the locale changes. */\n localeChanges = this._localeChanges;\n /**\n * Sets the time of one date to the time of another.\n * @param target Date whose time will be set.\n * @param hours New hours to set on the date object.\n * @param minutes New minutes to set on the date object.\n * @param seconds New seconds to set on the date object.\n */\n setTime(target, hours, minutes, seconds) {\n throw new Error(NOT_IMPLEMENTED);\n }\n /**\n * Gets the hours component of the given date.\n * @param date The date to extract the hours from.\n */\n getHours(date) {\n throw new Error(NOT_IMPLEMENTED);\n }\n /**\n * Gets the minutes component of the given date.\n * @param date The date to extract the minutes from.\n */\n getMinutes(date) {\n throw new Error(NOT_IMPLEMENTED);\n }\n /**\n * Gets the seconds component of the given date.\n * @param date The date to extract the seconds from.\n */\n getSeconds(date) {\n throw new Error(NOT_IMPLEMENTED);\n }\n /**\n * Parses a date with a specific time from a user-provided value.\n * @param value The value to parse.\n * @param parseFormat The expected format of the value being parsed\n * (type is implementation-dependent).\n */\n parseTime(value, parseFormat) {\n throw new Error(NOT_IMPLEMENTED);\n }\n /**\n * Adds an amount of seconds to the specified date.\n * @param date Date to which to add the seconds.\n * @param amount Amount of seconds to add to the date.\n */\n addSeconds(date, amount) {\n throw new Error(NOT_IMPLEMENTED);\n }\n /**\n * Given a potential date object, returns that same date object if it is\n * a valid date, or `null` if it's not a valid date.\n * @param obj The object to check.\n * @returns A date or `null`.\n */\n getValidDateOrNull(obj) {\n return this.isDateInstance(obj) && this.isValid(obj) ? obj : null;\n }\n /**\n * Attempts to deserialize a value to a valid date object. This is different from parsing in that\n * deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601\n * string). The default implementation does not allow any deserialization, it simply checks that\n * the given value is already a valid date object or null. The `` will call this\n * method on all of its `@Input()` properties that accept dates. It is therefore possible to\n * support passing values from your backend directly to these properties by overriding this method\n * to also deserialize the format used by your backend.\n * @param value The value to be deserialized into a date object.\n * @returns The deserialized date object, either a valid date, null if the value can be\n * deserialized into a null date (e.g. the empty string), or an invalid date.\n */\n deserialize(value) {\n if (value == null || this.isDateInstance(value) && this.isValid(value)) {\n return value;\n }\n return this.invalid();\n }\n /**\n * Sets the locale used for all dates.\n * @param locale The new locale.\n */\n setLocale(locale) {\n this.locale = locale;\n this._localeChanges.next();\n }\n /**\n * Compares two dates.\n * @param first The first date to compare.\n * @param second The second date to compare.\n * @returns 0 if the dates are equal, a number less than 0 if the first date is earlier,\n * a number greater than 0 if the first date is later.\n */\n compareDate(first, second) {\n return this.getYear(first) - this.getYear(second) || this.getMonth(first) - this.getMonth(second) || this.getDate(first) - this.getDate(second);\n }\n /**\n * Compares the time values of two dates.\n * @param first First date to compare.\n * @param second Second date to compare.\n * @returns 0 if the times are equal, a number less than 0 if the first time is earlier,\n * a number greater than 0 if the first time is later.\n */\n compareTime(first, second) {\n return this.getHours(first) - this.getHours(second) || this.getMinutes(first) - this.getMinutes(second) || this.getSeconds(first) - this.getSeconds(second);\n }\n /**\n * Checks if two dates are equal.\n * @param first The first date to check.\n * @param second The second date to check.\n * @returns Whether the two dates are equal.\n * Null dates are considered equal to other null dates.\n */\n sameDate(first, second) {\n if (first && second) {\n let firstValid = this.isValid(first);\n let secondValid = this.isValid(second);\n if (firstValid && secondValid) {\n return !this.compareDate(first, second);\n }\n return firstValid == secondValid;\n }\n return first == second;\n }\n /**\n * Checks if the times of two dates are equal.\n * @param first The first date to check.\n * @param second The second date to check.\n * @returns Whether the times of the two dates are equal.\n * Null dates are considered equal to other null dates.\n */\n sameTime(first, second) {\n if (first && second) {\n const firstValid = this.isValid(first);\n const secondValid = this.isValid(second);\n if (firstValid && secondValid) {\n return !this.compareTime(first, second);\n }\n return firstValid == secondValid;\n }\n return first == second;\n }\n /**\n * Clamp the given date between min and max dates.\n * @param date The date to clamp.\n * @param min The minimum value to allow. If null or omitted no min is enforced.\n * @param max The maximum value to allow. If null or omitted no max is enforced.\n * @returns `min` if `date` is less than `min`, `max` if date is greater than `max`,\n * otherwise `date`.\n */\n clampDate(date, min, max) {\n if (min && this.compareDate(date, min) < 0) {\n return min;\n }\n if (max && this.compareDate(date, max) > 0) {\n return max;\n }\n return date;\n }\n}\nconst MAT_DATE_FORMATS = new InjectionToken('mat-date-formats');\n\n/**\n * Matches strings that have the form of a valid RFC 3339 string\n * (https://tools.ietf.org/html/rfc3339). Note that the string may not actually be a valid date\n * because the regex will match strings with an out of bounds month, date, etc.\n */\nconst ISO_8601_REGEX = /^\\d{4}-\\d{2}-\\d{2}(?:T\\d{2}:\\d{2}:\\d{2}(?:\\.\\d+)?(?:Z|(?:(?:\\+|-)\\d{2}:\\d{2}))?)?$/;\n/**\n * Matches a time string. Supported formats:\n * - {{hours}}:{{minutes}}\n * - {{hours}}:{{minutes}}:{{seconds}}\n * - {{hours}}:{{minutes}} AM/PM\n * - {{hours}}:{{minutes}}:{{seconds}} AM/PM\n * - {{hours}}.{{minutes}}\n * - {{hours}}.{{minutes}}.{{seconds}}\n * - {{hours}}.{{minutes}} AM/PM\n * - {{hours}}.{{minutes}}.{{seconds}} AM/PM\n */\nconst TIME_REGEX = /^(\\d?\\d)[:.](\\d?\\d)(?:[:.](\\d?\\d))?\\s*(AM|PM)?$/i;\n/** Creates an array and fills it with values. */\nfunction range(length, valueFunction) {\n const valuesArray = Array(length);\n for (let i = 0; i < length; i++) {\n valuesArray[i] = valueFunction(i);\n }\n return valuesArray;\n}\n/** Adapts the native JS Date for use with cdk-based components that work with dates. */\nclass NativeDateAdapter extends DateAdapter {\n /**\n * @deprecated No longer being used. To be removed.\n * @breaking-change 14.0.0\n */\n useUtcForDisplay = false;\n /** The injected locale. */\n _matDateLocale = inject(MAT_DATE_LOCALE, {\n optional: true\n });\n constructor() {\n super();\n const matDateLocale = inject(MAT_DATE_LOCALE, {\n optional: true\n });\n if (matDateLocale !== undefined) {\n this._matDateLocale = matDateLocale;\n }\n super.setLocale(this._matDateLocale);\n }\n getYear(date) {\n return date.getFullYear();\n }\n getMonth(date) {\n return date.getMonth();\n }\n getDate(date) {\n return date.getDate();\n }\n getDayOfWeek(date) {\n return date.getDay();\n }\n getMonthNames(style) {\n const dtf = new Intl.DateTimeFormat(this.locale, {\n month: style,\n timeZone: 'utc'\n });\n return range(12, i => this._format(dtf, new Date(2017, i, 1)));\n }\n getDateNames() {\n const dtf = new Intl.DateTimeFormat(this.locale, {\n day: 'numeric',\n timeZone: 'utc'\n });\n return range(31, i => this._format(dtf, new Date(2017, 0, i + 1)));\n }\n getDayOfWeekNames(style) {\n const dtf = new Intl.DateTimeFormat(this.locale, {\n weekday: style,\n timeZone: 'utc'\n });\n return range(7, i => this._format(dtf, new Date(2017, 0, i + 1)));\n }\n getYearName(date) {\n const dtf = new Intl.DateTimeFormat(this.locale, {\n year: 'numeric',\n timeZone: 'utc'\n });\n return this._format(dtf, date);\n }\n getFirstDayOfWeek() {\n // At the time of writing `Intl.Locale` isn't available\n // in the internal types so we need to cast to `any`.\n if (typeof Intl !== 'undefined' && Intl.Locale) {\n const locale = new Intl.Locale(this.locale);\n // Some browsers implement a `getWeekInfo` method while others have a `weekInfo` getter.\n // Note that this isn't supported in all browsers so we need to null check it.\n const firstDay = (locale.getWeekInfo?.() || locale.weekInfo)?.firstDay ?? 0;\n // `weekInfo.firstDay` is a number between 1 and 7 where, starting from Monday,\n // whereas our representation is 0 to 6 where 0 is Sunday so we need to normalize it.\n return firstDay === 7 ? 0 : firstDay;\n }\n // Default to Sunday if the browser doesn't provide the week information.\n return 0;\n }\n getNumDaysInMonth(date) {\n return this.getDate(this._createDateWithOverflow(this.getYear(date), this.getMonth(date) + 1, 0));\n }\n clone(date) {\n return new Date(date.getTime());\n }\n createDate(year, month, date) {\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n // Check for invalid month and date (except upper bound on date which we have to check after\n // creating the Date).\n if (month < 0 || month > 11) {\n throw Error(`Invalid month index \"${month}\". Month index has to be between 0 and 11.`);\n }\n if (date < 1) {\n throw Error(`Invalid date \"${date}\". Date has to be greater than 0.`);\n }\n }\n let result = this._createDateWithOverflow(year, month, date);\n // Check that the date wasn't above the upper bound for the month, causing the month to overflow\n if (result.getMonth() != month && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error(`Invalid date \"${date}\" for month with index \"${month}\".`);\n }\n return result;\n }\n today() {\n return new Date();\n }\n parse(value, parseFormat) {\n // We have no way using the native JS Date to set the parse format or locale, so we ignore these\n // parameters.\n if (typeof value == 'number') {\n return new Date(value);\n }\n return value ? new Date(Date.parse(value)) : null;\n }\n format(date, displayFormat) {\n if (!this.isValid(date)) {\n throw Error('NativeDateAdapter: Cannot format invalid date.');\n }\n const dtf = new Intl.DateTimeFormat(this.locale, {\n ...displayFormat,\n timeZone: 'utc'\n });\n return this._format(dtf, date);\n }\n addCalendarYears(date, years) {\n return this.addCalendarMonths(date, years * 12);\n }\n addCalendarMonths(date, months) {\n let newDate = this._createDateWithOverflow(this.getYear(date), this.getMonth(date) + months, this.getDate(date));\n // It's possible to wind up in the wrong month if the original month has more days than the new\n // month. In this case we want to go to the last day of the desired month.\n // Note: the additional + 12 % 12 ensures we end up with a positive number, since JS % doesn't\n // guarantee this.\n if (this.getMonth(newDate) != ((this.getMonth(date) + months) % 12 + 12) % 12) {\n newDate = this._createDateWithOverflow(this.getYear(newDate), this.getMonth(newDate), 0);\n }\n return newDate;\n }\n addCalendarDays(date, days) {\n return this._createDateWithOverflow(this.getYear(date), this.getMonth(date), this.getDate(date) + days);\n }\n toIso8601(date) {\n return [date.getUTCFullYear(), this._2digit(date.getUTCMonth() + 1), this._2digit(date.getUTCDate())].join('-');\n }\n /**\n * Returns the given value if given a valid Date or null. Deserializes valid ISO 8601 strings\n * (https://www.ietf.org/rfc/rfc3339.txt) into valid Dates and empty string into null. Returns an\n * invalid date for all other values.\n */\n deserialize(value) {\n if (typeof value === 'string') {\n if (!value) {\n return null;\n }\n // The `Date` constructor accepts formats other than ISO 8601, so we need to make sure the\n // string is the right format first.\n if (ISO_8601_REGEX.test(value)) {\n let date = new Date(value);\n if (this.isValid(date)) {\n return date;\n }\n }\n }\n return super.deserialize(value);\n }\n isDateInstance(obj) {\n return obj instanceof Date;\n }\n isValid(date) {\n return !isNaN(date.getTime());\n }\n invalid() {\n return new Date(NaN);\n }\n setTime(target, hours, minutes, seconds) {\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (!inRange(hours, 0, 23)) {\n throw Error(`Invalid hours \"${hours}\". Hours value must be between 0 and 23.`);\n }\n if (!inRange(minutes, 0, 59)) {\n throw Error(`Invalid minutes \"${minutes}\". Minutes value must be between 0 and 59.`);\n }\n if (!inRange(seconds, 0, 59)) {\n throw Error(`Invalid seconds \"${seconds}\". Seconds value must be between 0 and 59.`);\n }\n }\n const clone = this.clone(target);\n clone.setHours(hours, minutes, seconds, 0);\n return clone;\n }\n getHours(date) {\n return date.getHours();\n }\n getMinutes(date) {\n return date.getMinutes();\n }\n getSeconds(date) {\n return date.getSeconds();\n }\n parseTime(userValue, parseFormat) {\n if (typeof userValue !== 'string') {\n return userValue instanceof Date ? new Date(userValue.getTime()) : null;\n }\n const value = userValue.trim();\n if (value.length === 0) {\n return null;\n }\n // Attempt to parse the value directly.\n let result = this._parseTimeString(value);\n // Some locales add extra characters around the time, but are otherwise parseable\n // (e.g. `00:05 ч.` in bg-BG). Try replacing all non-number and non-colon characters.\n if (result === null) {\n const withoutExtras = value.replace(/[^0-9:(AM|PM)]/gi, '').trim();\n if (withoutExtras.length > 0) {\n result = this._parseTimeString(withoutExtras);\n }\n }\n return result || this.invalid();\n }\n addSeconds(date, amount) {\n return new Date(date.getTime() + amount * 1000);\n }\n /** Creates a date but allows the month and date to overflow. */\n _createDateWithOverflow(year, month, date) {\n // Passing the year to the constructor causes year numbers <100 to be converted to 19xx.\n // To work around this we use `setFullYear` and `setHours` instead.\n const d = new Date();\n d.setFullYear(year, month, date);\n d.setHours(0, 0, 0, 0);\n return d;\n }\n /**\n * Pads a number to make it two digits.\n * @param n The number to pad.\n * @returns The padded number.\n */\n _2digit(n) {\n return ('00' + n).slice(-2);\n }\n /**\n * When converting Date object to string, javascript built-in functions may return wrong\n * results because it applies its internal DST rules. The DST rules around the world change\n * very frequently, and the current valid rule is not always valid in previous years though.\n * We work around this problem building a new Date object which has its internal UTC\n * representation with the local date and time.\n * @param dtf Intl.DateTimeFormat object, containing the desired string format. It must have\n * timeZone set to 'utc' to work fine.\n * @param date Date from which we want to get the string representation according to dtf\n * @returns A Date object with its UTC representation based on the passed in date info\n */\n _format(dtf, date) {\n // Passing the year to the constructor causes year numbers <100 to be converted to 19xx.\n // To work around this we use `setUTCFullYear` and `setUTCHours` instead.\n const d = new Date();\n d.setUTCFullYear(date.getFullYear(), date.getMonth(), date.getDate());\n d.setUTCHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());\n return dtf.format(d);\n }\n /**\n * Attempts to parse a time string into a date object. Returns null if it cannot be parsed.\n * @param value Time string to parse.\n */\n _parseTimeString(value) {\n // Note: we can technically rely on the browser for the time parsing by generating\n // an ISO string and appending the string to the end of it. We don't do it, because\n // browsers aren't consistent in what they support. Some examples:\n // - Safari doesn't support AM/PM.\n // - Firefox produces a valid date object if the time string has overflows (e.g. 12:75) while\n // other browsers produce an invalid date.\n // - Safari doesn't allow padded numbers.\n const parsed = value.toUpperCase().match(TIME_REGEX);\n if (parsed) {\n let hours = parseInt(parsed[1]);\n const minutes = parseInt(parsed[2]);\n let seconds = parsed[3] == null ? undefined : parseInt(parsed[3]);\n const amPm = parsed[4];\n if (hours === 12) {\n hours = amPm === 'AM' ? 0 : hours;\n } else if (amPm === 'PM') {\n hours += 12;\n }\n if (inRange(hours, 0, 23) && inRange(minutes, 0, 59) && (seconds == null || inRange(seconds, 0, 59))) {\n return this.setTime(this.today(), hours, minutes, seconds || 0);\n }\n }\n return null;\n }\n static ɵfac = function NativeDateAdapter_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || NativeDateAdapter)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: NativeDateAdapter,\n factory: NativeDateAdapter.ɵfac\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(NativeDateAdapter, [{\n type: Injectable\n }], () => [], null);\n})();\n/** Checks whether a number is within a certain range. */\nfunction inRange(value, min, max) {\n return !isNaN(value) && value >= min && value <= max;\n}\nconst MAT_NATIVE_DATE_FORMATS = {\n parse: {\n dateInput: null,\n timeInput: null\n },\n display: {\n dateInput: {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric'\n },\n timeInput: {\n hour: 'numeric',\n minute: 'numeric'\n },\n monthYearLabel: {\n year: 'numeric',\n month: 'short'\n },\n dateA11yLabel: {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n },\n monthYearA11yLabel: {\n year: 'numeric',\n month: 'long'\n },\n timeOptionLabel: {\n hour: 'numeric',\n minute: 'numeric'\n }\n }\n};\nclass NativeDateModule {\n static ɵfac = function NativeDateModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || NativeDateModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: NativeDateModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n providers: [{\n provide: DateAdapter,\n useClass: NativeDateAdapter\n }]\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(NativeDateModule, [{\n type: NgModule,\n args: [{\n providers: [{\n provide: DateAdapter,\n useClass: NativeDateAdapter\n }]\n }]\n }], null, null);\n})();\nclass MatNativeDateModule {\n static ɵfac = function MatNativeDateModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatNativeDateModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: MatNativeDateModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n providers: [provideNativeDateAdapter()]\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(MatNativeDateModule, [{\n type: NgModule,\n args: [{\n providers: [provideNativeDateAdapter()]\n }]\n }], null, null);\n})();\nfunction provideNativeDateAdapter(formats = MAT_NATIVE_DATE_FORMATS) {\n return [{\n provide: DateAdapter,\n useClass: NativeDateAdapter\n }, {\n provide: MAT_DATE_FORMATS,\n useValue: formats\n }];\n}\n\n/** Error state matcher that matches when a control is invalid and dirty. */\nclass ShowOnDirtyErrorStateMatcher {\n isErrorState(control, form) {\n return !!(control && control.invalid && (control.dirty || form && form.submitted));\n }\n static ɵfac = function ShowOnDirtyErrorStateMatcher_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || ShowOnDirtyErrorStateMatcher)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: ShowOnDirtyErrorStateMatcher,\n factory: ShowOnDirtyErrorStateMatcher.ɵfac\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(ShowOnDirtyErrorStateMatcher, [{\n type: Injectable\n }], null, null);\n})();\n/** Provider that defines how form controls behave with regards to displaying error messages. */\nclass ErrorStateMatcher {\n isErrorState(control, form) {\n return !!(control && control.invalid && (control.touched || form && form.submitted));\n }\n static ɵfac = function ErrorStateMatcher_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || ErrorStateMatcher)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: ErrorStateMatcher,\n factory: ErrorStateMatcher.ɵfac,\n providedIn: 'root'\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(ErrorStateMatcher, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], null, null);\n})();\n\n/**\n * Component used to load structural styles for focus indicators.\n * @docs-private\n */\nclass _StructuralStylesLoader {\n static ɵfac = function _StructuralStylesLoader_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || _StructuralStylesLoader)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: _StructuralStylesLoader,\n selectors: [[\"structural-styles\"]],\n decls: 0,\n vars: 0,\n template: function _StructuralStylesLoader_Template(rf, ctx) {},\n styles: [\".mat-focus-indicator{position:relative}.mat-focus-indicator::before{top:0;left:0;right:0;bottom:0;position:absolute;box-sizing:border-box;pointer-events:none;display:var(--mat-focus-indicator-display, none);border-width:var(--mat-focus-indicator-border-width, 3px);border-style:var(--mat-focus-indicator-border-style, solid);border-color:var(--mat-focus-indicator-border-color, transparent);border-radius:var(--mat-focus-indicator-border-radius, 4px)}.mat-focus-indicator:focus::before{content:\\\"\\\"}@media(forced-colors: active){html{--mat-focus-indicator-display: block}}\"],\n encapsulation: 2,\n changeDetection: 0\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(_StructuralStylesLoader, [{\n type: Component,\n args: [{\n selector: 'structural-styles',\n encapsulation: ViewEncapsulation.None,\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [\".mat-focus-indicator{position:relative}.mat-focus-indicator::before{top:0;left:0;right:0;bottom:0;position:absolute;box-sizing:border-box;pointer-events:none;display:var(--mat-focus-indicator-display, none);border-width:var(--mat-focus-indicator-border-width, 3px);border-style:var(--mat-focus-indicator-border-style, solid);border-color:var(--mat-focus-indicator-border-color, transparent);border-radius:var(--mat-focus-indicator-border-radius, 4px)}.mat-focus-indicator:focus::before{content:\\\"\\\"}@media(forced-colors: active){html{--mat-focus-indicator-display: block}}\"]\n }]\n }], null, null);\n})();\n\n/**\n * Shared directive to count lines inside a text area, such as a list item.\n * Line elements can be extracted with a @ContentChildren(MatLine) query, then\n * counted by checking the query list's length.\n */\nclass MatLine {\n static ɵfac = function MatLine_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatLine)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatLine,\n selectors: [[\"\", \"mat-line\", \"\"], [\"\", \"matLine\", \"\"]],\n hostAttrs: [1, \"mat-line\"]\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(MatLine, [{\n type: Directive,\n args: [{\n selector: '[mat-line], [matLine]',\n host: {\n 'class': 'mat-line'\n }\n }]\n }], null, null);\n})();\n/**\n * Helper that takes a query list of lines and sets the correct class on the host.\n * @docs-private\n */\nfunction setLines(lines, element, prefix = 'mat') {\n // Note: doesn't need to unsubscribe, because `changes`\n // gets completed by Angular when the view is destroyed.\n lines.changes.pipe(startWith(lines)).subscribe(({\n length\n }) => {\n setClass(element, `${prefix}-2-line`, false);\n setClass(element, `${prefix}-3-line`, false);\n setClass(element, `${prefix}-multi-line`, false);\n if (length === 2 || length === 3) {\n setClass(element, `${prefix}-${length}-line`, true);\n } else if (length > 3) {\n setClass(element, `${prefix}-multi-line`, true);\n }\n });\n}\n/** Adds or removes a class from an element. */\nfunction setClass(element, className, isAdd) {\n element.nativeElement.classList.toggle(className, isAdd);\n}\nclass MatLineModule {\n static ɵfac = function MatLineModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatLineModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: MatLineModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n imports: [MatCommonModule, MatCommonModule]\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(MatLineModule, [{\n type: NgModule,\n args: [{\n imports: [MatCommonModule, MatLine],\n exports: [MatLine, MatCommonModule]\n }]\n }], null, null);\n})();\n\n/** Possible states for a ripple element. */\nvar RippleState;\n(function (RippleState) {\n RippleState[RippleState[\"FADING_IN\"] = 0] = \"FADING_IN\";\n RippleState[RippleState[\"VISIBLE\"] = 1] = \"VISIBLE\";\n RippleState[RippleState[\"FADING_OUT\"] = 2] = \"FADING_OUT\";\n RippleState[RippleState[\"HIDDEN\"] = 3] = \"HIDDEN\";\n})(RippleState || (RippleState = {}));\n/**\n * Reference to a previously launched ripple element.\n */\nclass RippleRef {\n _renderer;\n element;\n config;\n _animationForciblyDisabledThroughCss;\n /** Current state of the ripple. */\n state = RippleState.HIDDEN;\n constructor(_renderer, /** Reference to the ripple HTML element. */\n element, /** Ripple configuration used for the ripple. */\n config, /* Whether animations are forcibly disabled for ripples through CSS. */\n _animationForciblyDisabledThroughCss = false) {\n this._renderer = _renderer;\n this.element = element;\n this.config = config;\n this._animationForciblyDisabledThroughCss = _animationForciblyDisabledThroughCss;\n }\n /** Fades out the ripple element. */\n fadeOut() {\n this._renderer.fadeOutRipple(this);\n }\n}\n\n/** Options used to bind a passive capturing event. */\nconst passiveCapturingEventOptions$1 = normalizePassiveListenerOptions({\n passive: true,\n capture: true\n});\n/** Manages events through delegation so that as few event handlers as possible are bound. */\nclass RippleEventManager {\n _events = new Map();\n /** Adds an event handler. */\n addHandler(ngZone, name, element, handler) {\n const handlersForEvent = this._events.get(name);\n if (handlersForEvent) {\n const handlersForElement = handlersForEvent.get(element);\n if (handlersForElement) {\n handlersForElement.add(handler);\n } else {\n handlersForEvent.set(element, new Set([handler]));\n }\n } else {\n this._events.set(name, new Map([[element, new Set([handler])]]));\n ngZone.runOutsideAngular(() => {\n document.addEventListener(name, this._delegateEventHandler, passiveCapturingEventOptions$1);\n });\n }\n }\n /** Removes an event handler. */\n removeHandler(name, element, handler) {\n const handlersForEvent = this._events.get(name);\n if (!handlersForEvent) {\n return;\n }\n const handlersForElement = handlersForEvent.get(element);\n if (!handlersForElement) {\n return;\n }\n handlersForElement.delete(handler);\n if (handlersForElement.size === 0) {\n handlersForEvent.delete(element);\n }\n if (handlersForEvent.size === 0) {\n this._events.delete(name);\n document.removeEventListener(name, this._delegateEventHandler, passiveCapturingEventOptions$1);\n }\n }\n /** Event handler that is bound and which dispatches the events to the different targets. */\n _delegateEventHandler = event => {\n const target = _getEventTarget(event);\n if (target) {\n this._events.get(event.type)?.forEach((handlers, element) => {\n if (element === target || element.contains(target)) {\n handlers.forEach(handler => handler.handleEvent(event));\n }\n });\n }\n };\n}\n\n/**\n * Default ripple animation configuration for ripples without an explicit\n * animation config specified.\n */\nconst defaultRippleAnimationConfig = {\n enterDuration: 225,\n exitDuration: 150\n};\n/**\n * Timeout for ignoring mouse events. Mouse events will be temporary ignored after touch\n * events to avoid synthetic mouse events.\n */\nconst ignoreMouseEventsTimeout = 800;\n/** Options used to bind a passive capturing event. */\nconst passiveCapturingEventOptions = normalizePassiveListenerOptions({\n passive: true,\n capture: true\n});\n/** Events that signal that the pointer is down. */\nconst pointerDownEvents = ['mousedown', 'touchstart'];\n/** Events that signal that the pointer is up. */\nconst pointerUpEvents = ['mouseup', 'mouseleave', 'touchend', 'touchcancel'];\nclass _MatRippleStylesLoader {\n static ɵfac = function _MatRippleStylesLoader_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || _MatRippleStylesLoader)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: _MatRippleStylesLoader,\n selectors: [[\"ng-component\"]],\n hostAttrs: [\"mat-ripple-style-loader\", \"\"],\n decls: 0,\n vars: 0,\n template: function _MatRippleStylesLoader_Template(rf, ctx) {},\n styles: [\".mat-ripple{overflow:hidden;position:relative}.mat-ripple:not(:empty){transform:translateZ(0)}.mat-ripple.mat-ripple-unbounded{overflow:visible}.mat-ripple-element{position:absolute;border-radius:50%;pointer-events:none;transition:opacity,transform 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale3d(0, 0, 0);background-color:var(--mat-ripple-color, color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent))}@media(forced-colors: active){.mat-ripple-element{display:none}}.cdk-drag-preview .mat-ripple-element,.cdk-drag-placeholder .mat-ripple-element{display:none}\"],\n encapsulation: 2,\n changeDetection: 0\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(_MatRippleStylesLoader, [{\n type: Component,\n args: [{\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n 'mat-ripple-style-loader': ''\n },\n styles: [\".mat-ripple{overflow:hidden;position:relative}.mat-ripple:not(:empty){transform:translateZ(0)}.mat-ripple.mat-ripple-unbounded{overflow:visible}.mat-ripple-element{position:absolute;border-radius:50%;pointer-events:none;transition:opacity,transform 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale3d(0, 0, 0);background-color:var(--mat-ripple-color, color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent))}@media(forced-colors: active){.mat-ripple-element{display:none}}.cdk-drag-preview .mat-ripple-element,.cdk-drag-placeholder .mat-ripple-element{display:none}\"]\n }]\n }], null, null);\n})();\n/**\n * Helper service that performs DOM manipulations. Not intended to be used outside this module.\n * The constructor takes a reference to the ripple directive's host element and a map of DOM\n * event handlers to be installed on the element that triggers ripple animations.\n * This will eventually become a custom renderer once Angular support exists.\n * @docs-private\n */\nclass RippleRenderer {\n _target;\n _ngZone;\n _platform;\n /** Element where the ripples are being added to. */\n _containerElement;\n /** Element which triggers the ripple elements on mouse events. */\n _triggerElement;\n /** Whether the pointer is currently down or not. */\n _isPointerDown = false;\n /**\n * Map of currently active ripple references.\n * The ripple reference is mapped to its element event listeners.\n * The reason why `| null` is used is that event listeners are added only\n * when the condition is truthy (see the `_startFadeOutTransition` method).\n */\n _activeRipples = new Map();\n /** Latest non-persistent ripple that was triggered. */\n _mostRecentTransientRipple;\n /** Time in milliseconds when the last touchstart event happened. */\n _lastTouchStartEvent;\n /** Whether pointer-up event listeners have been registered. */\n _pointerUpEventsRegistered = false;\n /**\n * Cached dimensions of the ripple container. Set when the first\n * ripple is shown and cleared once no more ripples are visible.\n */\n _containerRect;\n static _eventManager = new RippleEventManager();\n constructor(_target, _ngZone, elementOrElementRef, _platform, injector) {\n this._target = _target;\n this._ngZone = _ngZone;\n this._platform = _platform;\n // Only do anything if we're on the browser.\n if (_platform.isBrowser) {\n this._containerElement = coerceElement(elementOrElementRef);\n }\n if (injector) {\n injector.get(_CdkPrivateStyleLoader).load(_MatRippleStylesLoader);\n }\n }\n /**\n * Fades in a ripple at the given coordinates.\n * @param x Coordinate within the element, along the X axis at which to start the ripple.\n * @param y Coordinate within the element, along the Y axis at which to start the ripple.\n * @param config Extra ripple options.\n */\n fadeInRipple(x, y, config = {}) {\n const containerRect = this._containerRect = this._containerRect || this._containerElement.getBoundingClientRect();\n const animationConfig = {\n ...defaultRippleAnimationConfig,\n ...config.animation\n };\n if (config.centered) {\n x = containerRect.left + containerRect.width / 2;\n y = containerRect.top + containerRect.height / 2;\n }\n const radius = config.radius || distanceToFurthestCorner(x, y, containerRect);\n const offsetX = x - containerRect.left;\n const offsetY = y - containerRect.top;\n const enterDuration = animationConfig.enterDuration;\n const ripple = document.createElement('div');\n ripple.classList.add('mat-ripple-element');\n ripple.style.left = `${offsetX - radius}px`;\n ripple.style.top = `${offsetY - radius}px`;\n ripple.style.height = `${radius * 2}px`;\n ripple.style.width = `${radius * 2}px`;\n // If a custom color has been specified, set it as inline style. If no color is\n // set, the default color will be applied through the ripple theme styles.\n if (config.color != null) {\n ripple.style.backgroundColor = config.color;\n }\n ripple.style.transitionDuration = `${enterDuration}ms`;\n this._containerElement.appendChild(ripple);\n // By default the browser does not recalculate the styles of dynamically created\n // ripple elements. This is critical to ensure that the `scale` animates properly.\n // We enforce a style recalculation by calling `getComputedStyle` and *accessing* a property.\n // See: https://gist.github.com/paulirish/5d52fb081b3570c81e3a\n const computedStyles = window.getComputedStyle(ripple);\n const userTransitionProperty = computedStyles.transitionProperty;\n const userTransitionDuration = computedStyles.transitionDuration;\n // Note: We detect whether animation is forcibly disabled through CSS (e.g. through\n // `transition: none` or `display: none`). This is technically unexpected since animations are\n // controlled through the animation config, but this exists for backwards compatibility. This\n // logic does not need to be super accurate since it covers some edge cases which can be easily\n // avoided by users.\n const animationForciblyDisabledThroughCss = userTransitionProperty === 'none' ||\n // Note: The canonical unit for serialized CSS `