`\n // and attach a portal programmatically in the parent component. When Angular does the first CD\n // round, it will fire the setter with empty string, causing the user's content to be cleared.\n if (this.hasAttached() && !portal && !this._isInitialized) {\n return;\n }\n if (this.hasAttached()) {\n super.detach();\n }\n if (portal) {\n super.attach(portal);\n }\n this._attachedPortal = portal || null;\n }\n /** Emits when a portal is attached to the outlet. */\n attached = new EventEmitter();\n /** Component or view reference that is attached to the portal. */\n get attachedRef() {\n return this._attachedRef;\n }\n ngOnInit() {\n this._isInitialized = true;\n }\n ngOnDestroy() {\n super.dispose();\n this._attachedRef = this._attachedPortal = null;\n }\n /**\n * Attach the given ComponentPortal to this PortalOutlet.\n *\n * @param portal Portal to be attached to the portal outlet.\n * @returns Reference to the created component.\n */\n attachComponentPortal(portal) {\n portal.setAttachedHost(this);\n // If the portal specifies an origin, use that as the logical location of the component\n // in the application tree. Otherwise use the location of this PortalOutlet.\n const viewContainerRef = portal.viewContainerRef != null ? portal.viewContainerRef : this._viewContainerRef;\n const ref = viewContainerRef.createComponent(portal.component, {\n index: viewContainerRef.length,\n injector: portal.injector || viewContainerRef.injector,\n projectableNodes: portal.projectableNodes || undefined,\n ngModuleRef: this._moduleRef || undefined\n });\n // If we're using a view container that's different from the injected one (e.g. when the portal\n // specifies its own) we need to move the component into the outlet, otherwise it'll be rendered\n // inside of the alternate view container.\n if (viewContainerRef !== this._viewContainerRef) {\n this._getRootNode().appendChild(ref.hostView.rootNodes[0]);\n }\n super.setDisposeFn(() => ref.destroy());\n this._attachedPortal = portal;\n this._attachedRef = ref;\n this.attached.emit(ref);\n return ref;\n }\n /**\n * Attach the given TemplatePortal to this PortalHost as an embedded View.\n * @param portal Portal to be attached.\n * @returns Reference to the created embedded view.\n */\n attachTemplatePortal(portal) {\n portal.setAttachedHost(this);\n const viewRef = this._viewContainerRef.createEmbeddedView(portal.templateRef, portal.context, {\n injector: portal.injector\n });\n super.setDisposeFn(() => this._viewContainerRef.clear());\n this._attachedPortal = portal;\n this._attachedRef = viewRef;\n this.attached.emit(viewRef);\n return viewRef;\n }\n /**\n * Attaches the given DomPortal to this PortalHost by moving all of the portal content into it.\n * @param portal Portal to be attached.\n * @deprecated To be turned into a method.\n * @breaking-change 10.0.0\n */\n attachDomPortal = portal => {\n const element = portal.element;\n if (!element.parentNode && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('DOM portal content must be attached to a parent node.');\n }\n // Anchor used to save the element's previous position so\n // that we can restore it when the portal is detached.\n const anchorNode = this._document.createComment('dom-portal');\n portal.setAttachedHost(this);\n element.parentNode.insertBefore(anchorNode, element);\n this._getRootNode().appendChild(element);\n this._attachedPortal = portal;\n super.setDisposeFn(() => {\n if (anchorNode.parentNode) {\n anchorNode.parentNode.replaceChild(element, anchorNode);\n }\n });\n };\n /** Gets the root node of the portal outlet. */\n _getRootNode() {\n const nativeElement = this._viewContainerRef.element.nativeElement;\n // The directive could be set on a template which will result in a comment\n // node being the root. Use the comment's parent node if that is the case.\n return nativeElement.nodeType === nativeElement.ELEMENT_NODE ? nativeElement : nativeElement.parentNode;\n }\n static ɵfac = function CdkPortalOutlet_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkPortalOutlet)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkPortalOutlet,\n selectors: [[\"\", \"cdkPortalOutlet\", \"\"]],\n inputs: {\n portal: [0, \"cdkPortalOutlet\", \"portal\"]\n },\n outputs: {\n attached: \"attached\"\n },\n exportAs: [\"cdkPortalOutlet\"],\n features: [i0.ɵɵInheritDefinitionFeature]\n });\n }\n return CdkPortalOutlet;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * @deprecated Use `CdkPortalOutlet` instead.\n * @breaking-change 9.0.0\n */\nlet PortalHostDirective = /*#__PURE__*/(() => {\n class PortalHostDirective extends CdkPortalOutlet {\n static ɵfac = /* @__PURE__ */(() => {\n let ɵPortalHostDirective_BaseFactory;\n return function PortalHostDirective_Factory(__ngFactoryType__) {\n return (ɵPortalHostDirective_BaseFactory || (ɵPortalHostDirective_BaseFactory = i0.ɵɵgetInheritedFactory(PortalHostDirective)))(__ngFactoryType__ || PortalHostDirective);\n };\n })();\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: PortalHostDirective,\n selectors: [[\"\", \"cdkPortalHost\", \"\"], [\"\", \"portalHost\", \"\"]],\n inputs: {\n portal: [0, \"cdkPortalHost\", \"portal\"]\n },\n exportAs: [\"cdkPortalHost\"],\n features: [i0.ɵɵProvidersFeature([{\n provide: CdkPortalOutlet,\n useExisting: PortalHostDirective\n }]), i0.ɵɵInheritDefinitionFeature]\n });\n }\n return PortalHostDirective;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet PortalModule = /*#__PURE__*/(() => {\n class PortalModule {\n static ɵfac = function PortalModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || PortalModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: PortalModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({});\n }\n return PortalModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\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 = /*#__PURE__*/supportsScrollBehavior();\n/**\n * Strategy that will prevent the user from scrolling while the overlay is visible.\n */\nclass BlockScrollStrategy {\n _viewportRuler;\n _previousHTMLStyles = {\n top: '',\n left: ''\n };\n _previousScrollPosition;\n _isEnabled = false;\n _document;\n constructor(_viewportRuler, document) {\n this._viewportRuler = _viewportRuler;\n this._document = document;\n }\n /** Attaches this scroll strategy to an overlay. */\n attach() {}\n /** Blocks page-level scroll while the attached overlay is open. */\n enable() {\n if (this._canBeEnabled()) {\n const root = this._document.documentElement;\n this._previousScrollPosition = this._viewportRuler.getViewportScrollPosition();\n // Cache the previous inline styles in case the user had set them.\n this._previousHTMLStyles.left = root.style.left || '';\n this._previousHTMLStyles.top = root.style.top || '';\n // Note: we're using the `html` node, instead of the `body`, because the `body` may\n // have the user agent margin, whereas the `html` is guaranteed not to have one.\n root.style.left = coerceCssPixelValue(-this._previousScrollPosition.left);\n root.style.top = coerceCssPixelValue(-this._previousScrollPosition.top);\n root.classList.add('cdk-global-scrollblock');\n this._isEnabled = true;\n }\n }\n /** Unblocks page-level scroll while the attached overlay is open. */\n disable() {\n if (this._isEnabled) {\n const html = this._document.documentElement;\n const body = this._document.body;\n const htmlStyle = html.style;\n const bodyStyle = body.style;\n const previousHtmlScrollBehavior = htmlStyle.scrollBehavior || '';\n const previousBodyScrollBehavior = bodyStyle.scrollBehavior || '';\n this._isEnabled = false;\n htmlStyle.left = this._previousHTMLStyles.left;\n htmlStyle.top = this._previousHTMLStyles.top;\n html.classList.remove('cdk-global-scrollblock');\n // Disable user-defined smooth scrolling temporarily while we restore the scroll position.\n // See https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior\n // Note that we don't mutate the property if the browser doesn't support `scroll-behavior`,\n // because it can throw off feature detections in `supportsScrollBehavior` which\n // checks for `'scrollBehavior' in documentElement.style`.\n if (scrollBehaviorSupported) {\n htmlStyle.scrollBehavior = bodyStyle.scrollBehavior = 'auto';\n }\n window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top);\n if (scrollBehaviorSupported) {\n htmlStyle.scrollBehavior = previousHtmlScrollBehavior;\n bodyStyle.scrollBehavior = previousBodyScrollBehavior;\n }\n }\n }\n _canBeEnabled() {\n // Since the scroll strategies can't be singletons, we have to use a global CSS class\n // (`cdk-global-scrollblock`) to make sure that we don't try to disable global\n // scrolling multiple times.\n const html = this._document.documentElement;\n if (html.classList.contains('cdk-global-scrollblock') || this._isEnabled) {\n return false;\n }\n const body = this._document.body;\n const viewport = this._viewportRuler.getViewportSize();\n return body.scrollHeight > viewport.height || body.scrollWidth > viewport.width;\n }\n}\n\n/**\n * Returns an error to be thrown when attempting to attach an already-attached scroll strategy.\n */\nfunction getMatScrollStrategyAlreadyAttachedError() {\n return Error(`Scroll strategy has already been attached.`);\n}\n\n/**\n * Strategy that will close the overlay as soon as the user starts scrolling.\n */\nclass CloseScrollStrategy {\n _scrollDispatcher;\n _ngZone;\n _viewportRuler;\n _config;\n _scrollSubscription = null;\n _overlayRef;\n _initialScrollPosition;\n constructor(_scrollDispatcher, _ngZone, _viewportRuler, _config) {\n this._scrollDispatcher = _scrollDispatcher;\n this._ngZone = _ngZone;\n this._viewportRuler = _viewportRuler;\n this._config = _config;\n }\n /** Attaches this scroll strategy to an overlay. */\n attach(overlayRef) {\n if (this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw getMatScrollStrategyAlreadyAttachedError();\n }\n this._overlayRef = overlayRef;\n }\n /** Enables the closing of the attached overlay on scroll. */\n enable() {\n if (this._scrollSubscription) {\n return;\n }\n const stream = this._scrollDispatcher.scrolled(0).pipe(filter(scrollable => {\n return !scrollable || !this._overlayRef.overlayElement.contains(scrollable.getElementRef().nativeElement);\n }));\n if (this._config && this._config.threshold && this._config.threshold > 1) {\n this._initialScrollPosition = this._viewportRuler.getViewportScrollPosition().top;\n this._scrollSubscription = stream.subscribe(() => {\n const scrollPosition = this._viewportRuler.getViewportScrollPosition().top;\n if (Math.abs(scrollPosition - this._initialScrollPosition) > this._config.threshold) {\n this._detach();\n } else {\n this._overlayRef.updatePosition();\n }\n });\n } else {\n this._scrollSubscription = stream.subscribe(this._detach);\n }\n }\n /** Disables the closing the attached overlay on scroll. */\n disable() {\n if (this._scrollSubscription) {\n this._scrollSubscription.unsubscribe();\n this._scrollSubscription = null;\n }\n }\n detach() {\n this.disable();\n this._overlayRef = null;\n }\n /** Detaches the overlay ref and disables the scroll strategy. */\n _detach = () => {\n this.disable();\n if (this._overlayRef.hasAttached()) {\n this._ngZone.run(() => this._overlayRef.detach());\n }\n };\n}\n\n/** Scroll strategy that doesn't do anything. */\nclass NoopScrollStrategy {\n /** Does nothing, as this scroll strategy is a no-op. */\n enable() {}\n /** Does nothing, as this scroll strategy is a no-op. */\n disable() {}\n /** Does nothing, as this scroll strategy is a no-op. */\n attach() {}\n}\n\n/**\n * Gets whether an element is scrolled outside of view by any of its parent scrolling containers.\n * @param element Dimensions of the element (from getBoundingClientRect)\n * @param scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)\n * @returns Whether the element is scrolled out of view\n * @docs-private\n */\nfunction isElementScrolledOutsideView(element, scrollContainers) {\n return scrollContainers.some(containerBounds => {\n const outsideAbove = element.bottom < containerBounds.top;\n const outsideBelow = element.top > containerBounds.bottom;\n const outsideLeft = element.right < containerBounds.left;\n const outsideRight = element.left > containerBounds.right;\n return outsideAbove || outsideBelow || outsideLeft || outsideRight;\n });\n}\n/**\n * Gets whether an element is clipped by any of its scrolling containers.\n * @param element Dimensions of the element (from getBoundingClientRect)\n * @param scrollContainers Dimensions of element's scrolling containers (from getBoundingClientRect)\n * @returns Whether the element is clipped\n * @docs-private\n */\nfunction isElementClippedByScrolling(element, scrollContainers) {\n return scrollContainers.some(scrollContainerRect => {\n const clippedAbove = element.top < scrollContainerRect.top;\n const clippedBelow = element.bottom > scrollContainerRect.bottom;\n const clippedLeft = element.left < scrollContainerRect.left;\n const clippedRight = element.right > scrollContainerRect.right;\n return clippedAbove || clippedBelow || clippedLeft || clippedRight;\n });\n}\n\n/**\n * Strategy that will update the element position as the user is scrolling.\n */\nclass RepositionScrollStrategy {\n _scrollDispatcher;\n _viewportRuler;\n _ngZone;\n _config;\n _scrollSubscription = null;\n _overlayRef;\n constructor(_scrollDispatcher, _viewportRuler, _ngZone, _config) {\n this._scrollDispatcher = _scrollDispatcher;\n this._viewportRuler = _viewportRuler;\n this._ngZone = _ngZone;\n this._config = _config;\n }\n /** Attaches this scroll strategy to an overlay. */\n attach(overlayRef) {\n if (this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw getMatScrollStrategyAlreadyAttachedError();\n }\n this._overlayRef = overlayRef;\n }\n /** Enables repositioning of the attached overlay on scroll. */\n enable() {\n if (!this._scrollSubscription) {\n const throttle = this._config ? this._config.scrollThrottle : 0;\n this._scrollSubscription = this._scrollDispatcher.scrolled(throttle).subscribe(() => {\n this._overlayRef.updatePosition();\n // TODO(crisbeto): make `close` on by default once all components can handle it.\n if (this._config && this._config.autoClose) {\n const overlayRect = this._overlayRef.overlayElement.getBoundingClientRect();\n const {\n width,\n height\n } = this._viewportRuler.getViewportSize();\n // TODO(crisbeto): include all ancestor scroll containers here once\n // we have a way of exposing the trigger element to the scroll strategy.\n const parentRects = [{\n width,\n height,\n bottom: height,\n right: width,\n top: 0,\n left: 0\n }];\n if (isElementScrolledOutsideView(overlayRect, parentRects)) {\n this.disable();\n this._ngZone.run(() => this._overlayRef.detach());\n }\n }\n });\n }\n }\n /** Disables repositioning of the attached overlay on scroll. */\n disable() {\n if (this._scrollSubscription) {\n this._scrollSubscription.unsubscribe();\n this._scrollSubscription = null;\n }\n }\n detach() {\n this.disable();\n this._overlayRef = null;\n }\n}\n\n/**\n * Options for how an overlay will handle scrolling.\n *\n * Users can provide a custom value for `ScrollStrategyOptions` to replace the default\n * behaviors. This class primarily acts as a factory for ScrollStrategy instances.\n */\nlet ScrollStrategyOptions = /*#__PURE__*/(() => {\n class ScrollStrategyOptions {\n _scrollDispatcher = inject(ScrollDispatcher);\n _viewportRuler = inject(ViewportRuler);\n _ngZone = inject(NgZone);\n _document = inject(DOCUMENT);\n constructor() {}\n /** Do nothing on scroll. */\n noop = () => new NoopScrollStrategy();\n /**\n * Close the overlay as soon as the user scrolls.\n * @param config Configuration to be used inside the scroll strategy.\n */\n close = config => new CloseScrollStrategy(this._scrollDispatcher, this._ngZone, this._viewportRuler, config);\n /** Block scrolling. */\n block = () => new BlockScrollStrategy(this._viewportRuler, this._document);\n /**\n * Update the overlay's position on scroll.\n * @param config Configuration to be used inside the scroll strategy.\n * Allows debouncing the reposition calls.\n */\n reposition = config => new RepositionScrollStrategy(this._scrollDispatcher, this._viewportRuler, this._ngZone, config);\n static ɵfac = function ScrollStrategyOptions_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || ScrollStrategyOptions)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: ScrollStrategyOptions,\n factory: ScrollStrategyOptions.ɵfac,\n providedIn: 'root'\n });\n }\n return ScrollStrategyOptions;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Initial configuration used when creating an overlay. */\nclass OverlayConfig {\n /** Strategy with which to position the overlay. */\n positionStrategy;\n /** Strategy to be used when handling scroll events while the overlay is open. */\n scrollStrategy = /*#__PURE__*/new NoopScrollStrategy();\n /** Custom class to add to the overlay pane. */\n panelClass = '';\n /** Whether the overlay has a backdrop. */\n hasBackdrop = false;\n /** Custom class to add to the backdrop */\n backdropClass = 'cdk-overlay-dark-backdrop';\n /** The width of the overlay panel. If a number is provided, pixel units are assumed. */\n width;\n /** The height of the overlay panel. If a number is provided, pixel units are assumed. */\n height;\n /** The min-width of the overlay panel. If a number is provided, pixel units are assumed. */\n minWidth;\n /** The min-height of the overlay panel. If a number is provided, pixel units are assumed. */\n minHeight;\n /** The max-width of the overlay panel. If a number is provided, pixel units are assumed. */\n maxWidth;\n /** The max-height of the overlay panel. If a number is provided, pixel units are assumed. */\n maxHeight;\n /**\n * Direction of the text in the overlay panel. If a `Directionality` instance\n * is passed in, the overlay will handle changes to its value automatically.\n */\n direction;\n /**\n * Whether the overlay should be disposed of when the user goes backwards/forwards in history.\n * Note that this usually doesn't include clicking on links (unless the user is using\n * the `HashLocationStrategy`).\n */\n disposeOnNavigation = false;\n constructor(config) {\n if (config) {\n // Use `Iterable` instead of `Array` because TypeScript, as of 3.6.3,\n // loses the array generic type in the `for of`. But we *also* have to use `Array` because\n // typescript won't iterate over an `Iterable` unless you compile with `--downlevelIteration`\n const configKeys = Object.keys(config);\n for (const key of configKeys) {\n if (config[key] !== undefined) {\n // TypeScript, as of version 3.5, sees the left-hand-side of this expression\n // as \"I don't know *which* key this is, so the only valid value is the intersection\n // of all the possible values.\" In this case, that happens to be `undefined`. TypeScript\n // is not smart enough to see that the right-hand-side is actually an access of the same\n // exact type with the same exact key, meaning that the value type must be identical.\n // So we use `any` to work around this.\n this[key] = config[key];\n }\n }\n }\n }\n}\n\n/** The points of the origin element and the overlay element to connect. */\nclass ConnectionPositionPair {\n offsetX;\n offsetY;\n panelClass;\n /** X-axis attachment point for connected overlay origin. Can be 'start', 'end', or 'center'. */\n originX;\n /** Y-axis attachment point for connected overlay origin. Can be 'top', 'bottom', or 'center'. */\n originY;\n /** X-axis attachment point for connected overlay. Can be 'start', 'end', or 'center'. */\n overlayX;\n /** Y-axis attachment point for connected overlay. Can be 'top', 'bottom', or 'center'. */\n overlayY;\n constructor(origin, overlay, /** Offset along the X axis. */\n offsetX, /** Offset along the Y axis. */\n offsetY, /** Class(es) to be applied to the panel while this position is active. */\n panelClass) {\n this.offsetX = offsetX;\n this.offsetY = offsetY;\n this.panelClass = panelClass;\n this.originX = origin.originX;\n this.originY = origin.originY;\n this.overlayX = overlay.overlayX;\n this.overlayY = overlay.overlayY;\n }\n}\n/**\n * Set of properties regarding the position of the origin and overlay relative to the viewport\n * with respect to the containing Scrollable elements.\n *\n * The overlay and origin are clipped if any part of their bounding client rectangle exceeds the\n * bounds of any one of the strategy's Scrollable's bounding client rectangle.\n *\n * The overlay and origin are outside view if there is no overlap between their bounding client\n * rectangle and any one of the strategy's Scrollable's bounding client rectangle.\n *\n * ----------- -----------\n * | outside | | clipped |\n * | view | --------------------------\n * | | | | | |\n * ---------- | ----------- |\n * -------------------------- | |\n * | | | Scrollable |\n * | | | |\n * | | --------------------------\n * | Scrollable |\n * | |\n * --------------------------\n *\n * @docs-private\n */\nclass ScrollingVisibility {\n isOriginClipped;\n isOriginOutsideView;\n isOverlayClipped;\n isOverlayOutsideView;\n}\n/** The change event emitted by the strategy when a fallback position is used. */\nclass ConnectedOverlayPositionChange {\n connectionPair;\n scrollableViewProperties;\n constructor(/** The position used as a result of this change. */\n connectionPair, /** @docs-private */\n scrollableViewProperties) {\n this.connectionPair = connectionPair;\n this.scrollableViewProperties = scrollableViewProperties;\n }\n}\n/**\n * Validates whether a vertical position property matches the expected values.\n * @param property Name of the property being validated.\n * @param value Value of the property being validated.\n * @docs-private\n */\nfunction validateVerticalPosition(property, value) {\n if (value !== 'top' && value !== 'bottom' && value !== 'center') {\n throw Error(`ConnectedPosition: Invalid ${property} \"${value}\". ` + `Expected \"top\", \"bottom\" or \"center\".`);\n }\n}\n/**\n * Validates whether a horizontal position property matches the expected values.\n * @param property Name of the property being validated.\n * @param value Value of the property being validated.\n * @docs-private\n */\nfunction validateHorizontalPosition(property, value) {\n if (value !== 'start' && value !== 'end' && value !== 'center') {\n throw Error(`ConnectedPosition: Invalid ${property} \"${value}\". ` + `Expected \"start\", \"end\" or \"center\".`);\n }\n}\n\n/**\n * Service for dispatching events that land on the body to appropriate overlay ref,\n * if any. It maintains a list of attached overlays to determine best suited overlay based\n * on event target and order of overlay opens.\n */\nlet BaseOverlayDispatcher = /*#__PURE__*/(() => {\n class BaseOverlayDispatcher {\n /** Currently attached overlays in the order they were attached. */\n _attachedOverlays = [];\n _document = inject(DOCUMENT);\n _isAttached;\n constructor() {}\n ngOnDestroy() {\n this.detach();\n }\n /** Add a new overlay to the list of attached overlay refs. */\n add(overlayRef) {\n // Ensure that we don't get the same overlay multiple times.\n this.remove(overlayRef);\n this._attachedOverlays.push(overlayRef);\n }\n /** Remove an overlay from the list of attached overlay refs. */\n remove(overlayRef) {\n const index = this._attachedOverlays.indexOf(overlayRef);\n if (index > -1) {\n this._attachedOverlays.splice(index, 1);\n }\n // Remove the global listener once there are no more overlays.\n if (this._attachedOverlays.length === 0) {\n this.detach();\n }\n }\n static ɵfac = function BaseOverlayDispatcher_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || BaseOverlayDispatcher)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: BaseOverlayDispatcher,\n factory: BaseOverlayDispatcher.ɵfac,\n providedIn: 'root'\n });\n }\n return BaseOverlayDispatcher;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Service for dispatching keyboard events that land on the body to appropriate overlay ref,\n * if any. It maintains a list of attached overlays to determine best suited overlay based\n * on event target and order of overlay opens.\n */\nlet OverlayKeyboardDispatcher = /*#__PURE__*/(() => {\n class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {\n _ngZone = inject(NgZone);\n _renderer = inject(RendererFactory2).createRenderer(null, null);\n _cleanupKeydown;\n /** Add a new overlay to the list of attached overlay refs. */\n add(overlayRef) {\n super.add(overlayRef);\n // Lazily start dispatcher once first overlay is added\n if (!this._isAttached) {\n this._ngZone.runOutsideAngular(() => {\n this._cleanupKeydown = this._renderer.listen('body', 'keydown', this._keydownListener);\n });\n this._isAttached = true;\n }\n }\n /** Detaches the global keyboard event listener. */\n detach() {\n if (this._isAttached) {\n this._cleanupKeydown?.();\n this._isAttached = false;\n }\n }\n /** Keyboard event listener that will be attached to the body. */\n _keydownListener = event => {\n const overlays = this._attachedOverlays;\n for (let i = overlays.length - 1; i > -1; i--) {\n // Dispatch the keydown event to the top overlay which has subscribers to its keydown events.\n // We want to target the most recent overlay, rather than trying to match where the event came\n // from, because some components might open an overlay, but keep focus on a trigger element\n // (e.g. for select and autocomplete). We skip overlays without keydown event subscriptions,\n // because we don't want overlays that don't handle keyboard events to block the ones below\n // them that do.\n if (overlays[i]._keydownEvents.observers.length > 0) {\n this._ngZone.run(() => overlays[i]._keydownEvents.next(event));\n break;\n }\n }\n };\n static ɵfac = /* @__PURE__ */(() => {\n let ɵOverlayKeyboardDispatcher_BaseFactory;\n return function OverlayKeyboardDispatcher_Factory(__ngFactoryType__) {\n return (ɵOverlayKeyboardDispatcher_BaseFactory || (ɵOverlayKeyboardDispatcher_BaseFactory = i0.ɵɵgetInheritedFactory(OverlayKeyboardDispatcher)))(__ngFactoryType__ || OverlayKeyboardDispatcher);\n };\n })();\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: OverlayKeyboardDispatcher,\n factory: OverlayKeyboardDispatcher.ɵfac,\n providedIn: 'root'\n });\n }\n return OverlayKeyboardDispatcher;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Service for dispatching mouse click events that land on the body to appropriate overlay ref,\n * if any. It maintains a list of attached overlays to determine best suited overlay based\n * on event target and order of overlay opens.\n */\nlet OverlayOutsideClickDispatcher = /*#__PURE__*/(() => {\n class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {\n _platform = inject(Platform);\n _ngZone = inject(NgZone, {\n 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 return OverlayOutsideClickDispatcher;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** Version of `Element.contains` that transcends shadow DOM boundaries. */\nfunction containsPierceShadowDom(parent, child) {\n const supportsShadowRoot = typeof ShadowRoot !== 'undefined' && ShadowRoot;\n let current = child;\n while (current) {\n if (current === parent) {\n return true;\n }\n current = supportsShadowRoot && current instanceof ShadowRoot ? current.host : current.parentNode;\n }\n return false;\n}\nlet _CdkOverlayStyleLoader = /*#__PURE__*/(() => {\n class _CdkOverlayStyleLoader {\n static ɵfac = function _CdkOverlayStyleLoader_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || _CdkOverlayStyleLoader)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: _CdkOverlayStyleLoader,\n selectors: [[\"ng-component\"]],\n hostAttrs: [\"cdk-overlay-style-loader\", \"\"],\n decls: 0,\n vars: 0,\n template: function _CdkOverlayStyleLoader_Template(rf, ctx) {},\n styles: [\".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed}@layer cdk-overlay{.cdk-overlay-container{z-index:1000}}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute}@layer cdk-overlay{.cdk-global-overlay-wrapper{z-index:1000}}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%}@layer cdk-overlay{.cdk-overlay-pane{z-index:1000}}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0}@layer cdk-overlay{.cdk-overlay-backdrop{z-index:1000;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}@layer cdk-overlay{.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px}@layer cdk-overlay{.cdk-overlay-connected-position-bounding-box{z-index:1000}}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}\"],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return _CdkOverlayStyleLoader;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** Container inside which all overlays will render. */\nlet OverlayContainer = /*#__PURE__*/(() => {\n class OverlayContainer {\n _platform = inject(Platform);\n _containerElement;\n _document = inject(DOCUMENT);\n _styleLoader = inject(_CdkPrivateStyleLoader);\n constructor() {}\n ngOnDestroy() {\n this._containerElement?.remove();\n }\n /**\n * This method returns the overlay container element. It will lazily\n * create the element the first time it is called to facilitate using\n * the container in non-browser environments.\n * @returns the container element\n */\n getContainerElement() {\n this._loadStyles();\n if (!this._containerElement) {\n this._createContainer();\n }\n return this._containerElement;\n }\n /**\n * Create the overlay container element, which is simply a div\n * with the 'cdk-overlay-container' class on the document body.\n */\n _createContainer() {\n const containerClass = 'cdk-overlay-container';\n // TODO(crisbeto): remove the testing check once we have an overlay testing\n // module or Angular starts tearing down the testing `NgModule`. See:\n // https://github.com/angular/angular/issues/18831\n if (this._platform.isBrowser || _isTestEnvironment()) {\n const oppositePlatformContainers = this._document.querySelectorAll(`.${containerClass}[platform=\"server\"], ` + `.${containerClass}[platform=\"test\"]`);\n // Remove any old containers from the opposite platform.\n // This can happen when transitioning from the server to the client.\n for (let i = 0; i < oppositePlatformContainers.length; i++) {\n oppositePlatformContainers[i].remove();\n }\n }\n const container = this._document.createElement('div');\n container.classList.add(containerClass);\n // A long time ago we kept adding new overlay containers whenever a new app was instantiated,\n // but at some point we added logic which clears the duplicate ones in order to avoid leaks.\n // The new logic was a little too aggressive since it was breaking some legitimate use cases.\n // To mitigate the problem we made it so that only containers from a different platform are\n // cleared, but the side-effect was that people started depending on the overly-aggressive\n // logic to clean up their tests for them. Until we can introduce an overlay-specific testing\n // module which does the cleanup, we try to detect that we're in a test environment and we\n // always clear the container. See #17006.\n // TODO(crisbeto): remove the test environment check once we have an overlay testing module.\n if (_isTestEnvironment()) {\n container.setAttribute('platform', 'test');\n } else if (!this._platform.isBrowser) {\n container.setAttribute('platform', 'server');\n }\n this._document.body.appendChild(container);\n this._containerElement = container;\n }\n /** Loads the structural styles necessary for the overlay to work. */\n _loadStyles() {\n this._styleLoader.load(_CdkOverlayStyleLoader);\n }\n static ɵfac = function OverlayContainer_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || OverlayContainer)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: OverlayContainer,\n factory: OverlayContainer.ɵfac,\n providedIn: 'root'\n });\n }\n return OverlayContainer;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\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 = /*#__PURE__*/new Subject();\n _attachments = /*#__PURE__*/new Subject();\n _detachments = /*#__PURE__*/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 = /*#__PURE__*/new Subject();\n /** Stream of mouse outside events dispatched to this overlay. */\n _outsidePointerEvents = /*#__PURE__*/new Subject();\n _renders = /*#__PURE__*/new Subject();\n _afterRenderRef;\n /** Reference to the currently-running `afterNextRender` call. */\n _afterNextRenderRef;\n constructor(_portalOutlet, _host, _pane, _config, _ngZone, _keyboardDispatcher, _document, _location, _outsideClickDispatcher, _animationsDisabled = false, _injector, _renderer) {\n this._portalOutlet = _portalOutlet;\n this._host = _host;\n this._pane = _pane;\n this._config = _config;\n this._ngZone = _ngZone;\n this._keyboardDispatcher = _keyboardDispatcher;\n this._document = _document;\n this._location = _location;\n this._outsideClickDispatcher = _outsideClickDispatcher;\n this._animationsDisabled = _animationsDisabled;\n this._injector = _injector;\n this._renderer = _renderer;\n if (_config.scrollStrategy) {\n this._scrollStrategy = _config.scrollStrategy;\n this._scrollStrategy.attach(this);\n }\n this._positionStrategy = _config.positionStrategy;\n // Users could open the overlay from an `effect`, in which case we need to\n // run the `afterRender` as `untracked`. We don't recommend that users do\n // this, but we also don't want to break users who are doing it.\n this._afterRenderRef = untracked(() => afterRender(() => {\n this._renders.next();\n }, {\n injector: this._injector\n }));\n }\n /** The overlay's HTML element */\n get overlayElement() {\n return this._pane;\n }\n /** The overlay's backdrop HTML element. */\n get backdropElement() {\n return this._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 = /*#__PURE__*/new Subject();\n /** Subscription to viewport size changes. */\n _resizeSubscription = Subscription.EMPTY;\n /** Default offset for the overlay along the x axis. */\n _offsetX = 0;\n /** Default offset for the overlay along the y axis. */\n _offsetY = 0;\n /** Selector to be used when finding the elements on which to set the transform origin. */\n _transformOriginSelector;\n /** Keeps track of the CSS classes that the position strategy has applied on the overlay panel. */\n _appliedPanelClasses = [];\n /** Amount by which the overlay was pushed in each axis during the last time it was positioned. */\n _previousPushAmount;\n /** Observable sequence of position changes. */\n positionChanges = this._positionChanges;\n /** Ordered list of preferred positions, from most to least desirable. */\n get positions() {\n return this._preferredPositions;\n }\n constructor(connectedTo, _viewportRuler, _document, _platform, _overlayContainer) {\n this._viewportRuler = _viewportRuler;\n this._document = _document;\n this._platform = _platform;\n this._overlayContainer = _overlayContainer;\n this.setOrigin(connectedTo);\n }\n /** Attaches this position strategy to an overlay. */\n attach(overlayRef) {\n if (this._overlayRef && overlayRef !== this._overlayRef && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('This position strategy is already attached to an overlay');\n }\n this._validatePositions();\n overlayRef.hostElement.classList.add(boundingBoxClass);\n this._overlayRef = overlayRef;\n this._boundingBox = overlayRef.hostElement;\n this._pane = overlayRef.overlayElement;\n this._isDisposed = false;\n this._isInitialRender = true;\n this._lastPosition = null;\n this._resizeSubscription.unsubscribe();\n this._resizeSubscription = this._viewportRuler.change().subscribe(() => {\n // When the window is resized, we want to trigger the next reposition as if it\n // was an initial render, in order for the strategy to pick a new optimal position,\n // otherwise position locking will cause it to stay at the old one.\n this._isInitialRender = true;\n this.apply();\n });\n }\n /**\n * Updates the position of the overlay element, using whichever preferred position relative\n * to the origin best fits on-screen.\n *\n * The selection of a position goes as follows:\n * - If any positions fit completely within the viewport as-is,\n * choose the first position that does so.\n * - If flexible dimensions are enabled and at least one satisfies the given minimum width/height,\n * choose the position with the greatest available size modified by the positions' weight.\n * - If pushing is enabled, take the position that went off-screen the least and push it\n * on-screen.\n * - If none of the previous criteria were met, use the position that goes off-screen the least.\n * @docs-private\n */\n apply() {\n // We shouldn't do anything if the strategy was disposed or we're on the server.\n if (this._isDisposed || !this._platform.isBrowser) {\n return;\n }\n // If the position has been applied already (e.g. when the overlay was opened) and the\n // consumer opted into locking in the position, re-use the old position, in order to\n // prevent the overlay from jumping around.\n if (!this._isInitialRender && this._positionLocked && this._lastPosition) {\n this.reapplyLastPosition();\n return;\n }\n this._clearPanelClasses();\n this._resetOverlayElementStyles();\n this._resetBoundingBoxStyles();\n // We need the bounding rects for the origin, the overlay and the container to determine how to position\n // the overlay relative to the origin.\n // We use the viewport rect to determine whether a position would go off-screen.\n this._viewportRect = this._getNarrowedViewportRect();\n this._originRect = this._getOriginRect();\n this._overlayRect = this._pane.getBoundingClientRect();\n this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();\n const originRect = this._originRect;\n const overlayRect = this._overlayRect;\n const viewportRect = this._viewportRect;\n const containerRect = this._containerRect;\n // Positions where the overlay will fit with flexible dimensions.\n const flexibleFits = [];\n // Fallback if none of the preferred positions fit within the viewport.\n let fallback;\n // Go through each of the preferred positions looking for a good fit.\n // If a good fit is found, it will be applied immediately.\n for (let pos of this._preferredPositions) {\n // Get the exact (x, y) coordinate for the point-of-origin on the origin element.\n let originPoint = this._getOriginPoint(originRect, containerRect, pos);\n // From that point-of-origin, get the exact (x, y) coordinate for the top-left corner of the\n // overlay in this position. We use the top-left corner for calculations and later translate\n // this into an appropriate (top, left, bottom, right) style.\n let overlayPoint = this._getOverlayPoint(originPoint, overlayRect, pos);\n // Calculate how well the overlay would fit into the viewport with this point.\n let overlayFit = this._getOverlayFit(overlayPoint, overlayRect, viewportRect, pos);\n // If the overlay, without any further work, fits into the viewport, use this position.\n if (overlayFit.isCompletelyWithinViewport) {\n this._isPushed = false;\n this._applyPosition(pos, originPoint);\n return;\n }\n // If the overlay has flexible dimensions, we can use this position\n // so long as there's enough space for the minimum dimensions.\n if (this._canFitWithFlexibleDimensions(overlayFit, overlayPoint, viewportRect)) {\n // Save positions where the overlay will fit with flexible dimensions. We will use these\n // if none of the positions fit *without* flexible dimensions.\n flexibleFits.push({\n position: pos,\n origin: originPoint,\n overlayRect,\n boundingBoxRect: this._calculateBoundingBoxRect(originPoint, pos)\n });\n continue;\n }\n // If the current preferred position does not fit on the screen, remember the position\n // if it has more visible area on-screen than we've seen and move onto the next preferred\n // position.\n if (!fallback || fallback.overlayFit.visibleArea < overlayFit.visibleArea) {\n fallback = {\n overlayFit,\n overlayPoint,\n originPoint,\n position: pos,\n overlayRect\n };\n }\n }\n // If there are any positions where the overlay would fit with flexible dimensions, choose the\n // one that has the greatest area available modified by the position's weight\n if (flexibleFits.length) {\n let bestFit = null;\n let bestScore = -1;\n for (const fit of flexibleFits) {\n const score = fit.boundingBoxRect.width * fit.boundingBoxRect.height * (fit.position.weight || 1);\n if (score > bestScore) {\n bestScore = score;\n bestFit = fit;\n }\n }\n this._isPushed = false;\n this._applyPosition(bestFit.position, bestFit.origin);\n return;\n }\n // When none of the preferred positions fit within the viewport, take the position\n // that went off-screen the least and attempt to push it on-screen.\n if (this._canPush) {\n // TODO(jelbourn): after pushing, the opening \"direction\" of the overlay might not make sense.\n this._isPushed = true;\n this._applyPosition(fallback.position, fallback.originPoint);\n return;\n }\n // All options for getting the overlay within the viewport have been exhausted, so go with the\n // position that went off-screen the least.\n this._applyPosition(fallback.position, fallback.originPoint);\n }\n detach() {\n this._clearPanelClasses();\n this._lastPosition = null;\n this._previousPushAmount = null;\n this._resizeSubscription.unsubscribe();\n }\n /** Cleanup after the element gets destroyed. */\n dispose() {\n if (this._isDisposed) {\n return;\n }\n // We can't use `_resetBoundingBoxStyles` here, because it resets\n // some properties to zero, rather than removing them.\n if (this._boundingBox) {\n extendStyles(this._boundingBox.style, {\n top: '',\n left: '',\n right: '',\n bottom: '',\n height: '',\n width: '',\n alignItems: '',\n justifyContent: ''\n });\n }\n if (this._pane) {\n this._resetOverlayElementStyles();\n }\n if (this._overlayRef) {\n this._overlayRef.hostElement.classList.remove(boundingBoxClass);\n }\n this.detach();\n this._positionChanges.complete();\n this._overlayRef = this._boundingBox = null;\n this._isDisposed = true;\n }\n /**\n * This re-aligns the overlay element with the trigger in its last calculated position,\n * even if a position higher in the \"preferred positions\" list would now fit. This\n * allows one to re-align the panel without changing the orientation of the panel.\n */\n reapplyLastPosition() {\n if (this._isDisposed || !this._platform.isBrowser) {\n return;\n }\n const lastPosition = this._lastPosition;\n if (lastPosition) {\n this._originRect = this._getOriginRect();\n this._overlayRect = this._pane.getBoundingClientRect();\n this._viewportRect = this._getNarrowedViewportRect();\n this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();\n const originPoint = this._getOriginPoint(this._originRect, this._containerRect, lastPosition);\n this._applyPosition(lastPosition, originPoint);\n } else {\n this.apply();\n }\n }\n /**\n * Sets the list of Scrollable containers that host the origin element so that\n * on reposition we can evaluate if it or the overlay has been clipped or outside view. Every\n * Scrollable must be an ancestor element of the strategy's origin element.\n */\n withScrollableContainers(scrollables) {\n this._scrollables = scrollables;\n return this;\n }\n /**\n * Adds new preferred positions.\n * @param positions List of positions options for this overlay.\n */\n withPositions(positions) {\n this._preferredPositions = positions;\n // If the last calculated position object isn't part of the positions anymore, clear\n // it in order to avoid it being picked up if the consumer tries to re-apply.\n if (positions.indexOf(this._lastPosition) === -1) {\n this._lastPosition = null;\n }\n this._validatePositions();\n return this;\n }\n /**\n * Sets a minimum distance the overlay may be positioned to the edge of the viewport.\n * @param margin Required margin between the overlay and the viewport edge in pixels.\n */\n withViewportMargin(margin) {\n this._viewportMargin = margin;\n return this;\n }\n /** Sets whether the overlay's width and height can be constrained to fit within the viewport. */\n withFlexibleDimensions(flexibleDimensions = true) {\n this._hasFlexibleDimensions = flexibleDimensions;\n return this;\n }\n /** Sets whether the overlay can grow after the initial open via flexible width/height. */\n withGrowAfterOpen(growAfterOpen = true) {\n this._growAfterOpen = growAfterOpen;\n return this;\n }\n /** Sets whether the overlay can be pushed on-screen if none of the provided positions fit. */\n withPush(canPush = true) {\n this._canPush = canPush;\n return this;\n }\n /**\n * Sets whether the overlay's position should be locked in after it is positioned\n * initially. When an overlay is locked in, it won't attempt to reposition itself\n * when the position is re-applied (e.g. when the user scrolls away).\n * @param isLocked Whether the overlay should locked in.\n */\n withLockedPosition(isLocked = true) {\n this._positionLocked = isLocked;\n return this;\n }\n /**\n * Sets the origin, relative to which to position the overlay.\n * Using an element origin is useful for building components that need to be positioned\n * relatively to a trigger (e.g. dropdown menus or tooltips), whereas using a point can be\n * used for cases like contextual menus which open relative to the user's pointer.\n * @param origin Reference to the new origin.\n */\n setOrigin(origin) {\n this._origin = origin;\n return this;\n }\n /**\n * Sets the default offset for the overlay's connection point on the x-axis.\n * @param offset New offset in the X axis.\n */\n withDefaultOffsetX(offset) {\n this._offsetX = offset;\n return this;\n }\n /**\n * Sets the default offset for the overlay's connection point on the y-axis.\n * @param offset New offset in the Y axis.\n */\n withDefaultOffsetY(offset) {\n this._offsetY = offset;\n return this;\n }\n /**\n * Configures that the position strategy should set a `transform-origin` on some elements\n * inside the overlay, depending on the current position that is being applied. This is\n * useful for the cases where the origin of an animation can change depending on the\n * alignment of the overlay.\n * @param selector CSS selector that will be used to find the target\n * elements onto which to set the transform origin.\n */\n withTransformOriginOn(selector) {\n this._transformOriginSelector = selector;\n return this;\n }\n /**\n * Gets the (x, y) coordinate of a connection point on the origin based on a relative position.\n */\n _getOriginPoint(originRect, containerRect, pos) {\n let x;\n if (pos.originX == 'center') {\n // Note: when centering we should always use the `left`\n // offset, otherwise the position will be wrong in RTL.\n x = originRect.left + originRect.width / 2;\n } else {\n const startX = this._isRtl() ? originRect.right : originRect.left;\n const endX = this._isRtl() ? originRect.left : originRect.right;\n x = pos.originX == 'start' ? startX : endX;\n }\n // When zooming in Safari the container rectangle contains negative values for the position\n // and we need to re-add them to the calculated coordinates.\n if (containerRect.left < 0) {\n x -= containerRect.left;\n }\n let y;\n if (pos.originY == 'center') {\n y = originRect.top + originRect.height / 2;\n } else {\n y = pos.originY == 'top' ? originRect.top : originRect.bottom;\n }\n // Normally the containerRect's top value would be zero, however when the overlay is attached to an input\n // (e.g. in an autocomplete), mobile browsers will shift everything in order to put the input in the middle\n // of the screen and to make space for the virtual keyboard. We need to account for this offset,\n // otherwise our positioning will be thrown off.\n // Additionally, when zooming in Safari this fixes the vertical position.\n if (containerRect.top < 0) {\n y -= containerRect.top;\n }\n return {\n x,\n y\n };\n }\n /**\n * Gets the (x, y) coordinate of the top-left corner of the overlay given a given position and\n * origin point to which the overlay should be connected.\n */\n _getOverlayPoint(originPoint, overlayRect, pos) {\n // Calculate the (overlayStartX, overlayStartY), the start of the\n // potential overlay position relative to the origin point.\n let overlayStartX;\n if (pos.overlayX == 'center') {\n overlayStartX = -overlayRect.width / 2;\n } else if (pos.overlayX === 'start') {\n overlayStartX = this._isRtl() ? -overlayRect.width : 0;\n } else {\n overlayStartX = this._isRtl() ? 0 : -overlayRect.width;\n }\n let overlayStartY;\n if (pos.overlayY == 'center') {\n overlayStartY = -overlayRect.height / 2;\n } else {\n overlayStartY = pos.overlayY == 'top' ? 0 : -overlayRect.height;\n }\n // The (x, y) coordinates of the overlay.\n return {\n x: originPoint.x + overlayStartX,\n y: originPoint.y + overlayStartY\n };\n }\n /** Gets how well an overlay at the given point will fit within the viewport. */\n _getOverlayFit(point, rawOverlayRect, viewport, position) {\n // Round the overlay rect when comparing against the\n // viewport, because the viewport is always rounded.\n const overlay = getRoundedBoundingClientRect(rawOverlayRect);\n let {\n x,\n y\n } = point;\n let offsetX = this._getOffset(position, 'x');\n let offsetY = this._getOffset(position, 'y');\n // Account for the offsets since they could push the overlay out of the viewport.\n if (offsetX) {\n x += offsetX;\n }\n if (offsetY) {\n y += offsetY;\n }\n // How much the overlay would overflow at this position, on each side.\n let leftOverflow = 0 - x;\n let rightOverflow = x + overlay.width - viewport.width;\n let topOverflow = 0 - y;\n let bottomOverflow = y + overlay.height - viewport.height;\n // Visible parts of the element on each axis.\n let visibleWidth = this._subtractOverflows(overlay.width, leftOverflow, rightOverflow);\n let visibleHeight = this._subtractOverflows(overlay.height, topOverflow, bottomOverflow);\n let visibleArea = visibleWidth * visibleHeight;\n return {\n visibleArea,\n isCompletelyWithinViewport: overlay.width * overlay.height === visibleArea,\n fitsInViewportVertically: visibleHeight === overlay.height,\n fitsInViewportHorizontally: visibleWidth == overlay.width\n };\n }\n /**\n * Whether the overlay can fit within the viewport when it may resize either its width or height.\n * @param fit How well the overlay fits in the viewport at some position.\n * @param point The (x, y) coordinates of the overlay at some position.\n * @param viewport The geometry of the viewport.\n */\n _canFitWithFlexibleDimensions(fit, point, viewport) {\n if (this._hasFlexibleDimensions) {\n const availableHeight = viewport.bottom - point.y;\n const availableWidth = viewport.right - point.x;\n const minHeight = getPixelValue(this._overlayRef.getConfig().minHeight);\n const minWidth = getPixelValue(this._overlayRef.getConfig().minWidth);\n const verticalFit = fit.fitsInViewportVertically || minHeight != null && minHeight <= availableHeight;\n const horizontalFit = fit.fitsInViewportHorizontally || minWidth != null && minWidth <= availableWidth;\n return verticalFit && horizontalFit;\n }\n return false;\n }\n /**\n * Gets the point at which the overlay can be \"pushed\" on-screen. If the overlay is larger than\n * the viewport, the top-left corner will be pushed on-screen (with overflow occurring on the\n * right and bottom).\n *\n * @param start Starting point from which the overlay is pushed.\n * @param rawOverlayRect Dimensions of the overlay.\n * @param scrollPosition Current viewport scroll position.\n * @returns The point at which to position the overlay after pushing. This is effectively a new\n * originPoint.\n */\n _pushOverlayOnScreen(start, rawOverlayRect, scrollPosition) {\n // If the position is locked and we've pushed the overlay already, reuse the previous push\n // amount, rather than pushing it again. If we were to continue pushing, the element would\n // remain in the viewport, which goes against the expectations when position locking is enabled.\n if (this._previousPushAmount && this._positionLocked) {\n return {\n x: start.x + this._previousPushAmount.x,\n y: start.y + this._previousPushAmount.y\n };\n }\n // Round the overlay rect when comparing against the\n // viewport, because the viewport is always rounded.\n const overlay = getRoundedBoundingClientRect(rawOverlayRect);\n const viewport = this._viewportRect;\n // Determine how much the overlay goes outside the viewport on each\n // side, which we'll use to decide which direction to push it.\n const overflowRight = Math.max(start.x + overlay.width - viewport.width, 0);\n const overflowBottom = Math.max(start.y + overlay.height - viewport.height, 0);\n const overflowTop = Math.max(viewport.top - scrollPosition.top - start.y, 0);\n const overflowLeft = Math.max(viewport.left - scrollPosition.left - start.x, 0);\n // Amount by which to push the overlay in each axis such that it remains on-screen.\n let pushX = 0;\n let pushY = 0;\n // If the overlay fits completely within the bounds of the viewport, push it from whichever\n // direction is goes off-screen. Otherwise, push the top-left corner such that its in the\n // viewport and allow for the trailing end of the overlay to go out of bounds.\n if (overlay.width <= viewport.width) {\n pushX = overflowLeft || -overflowRight;\n } else {\n pushX = start.x < this._viewportMargin ? viewport.left - scrollPosition.left - start.x : 0;\n }\n if (overlay.height <= viewport.height) {\n pushY = overflowTop || -overflowBottom;\n } else {\n pushY = start.y < this._viewportMargin ? viewport.top - scrollPosition.top - start.y : 0;\n }\n this._previousPushAmount = {\n x: pushX,\n y: pushY\n };\n return {\n x: start.x + pushX,\n y: start.y + pushY\n };\n }\n /**\n * Applies a computed position to the overlay and emits a position change.\n * @param position The position preference\n * @param originPoint The point on the origin element where the overlay is connected.\n */\n _applyPosition(position, originPoint) {\n this._setTransformOrigin(position);\n this._setOverlayElementStyles(originPoint, position);\n this._setBoundingBoxStyles(originPoint, position);\n if (position.panelClass) {\n this._addPanelClasses(position.panelClass);\n }\n // Notify that the position has been changed along with its change properties.\n // We only emit if we've got any subscriptions, because the scroll visibility\n // calculations can be somewhat expensive.\n if (this._positionChanges.observers.length) {\n const scrollVisibility = this._getScrollVisibility();\n // We're recalculating on scroll, but we only want to emit if anything\n // changed since downstream code might be hitting the `NgZone`.\n if (position !== this._lastPosition || !this._lastScrollVisibility || !compareScrollVisibility(this._lastScrollVisibility, scrollVisibility)) {\n const changeEvent = new ConnectedOverlayPositionChange(position, scrollVisibility);\n this._positionChanges.next(changeEvent);\n }\n this._lastScrollVisibility = scrollVisibility;\n }\n // Save the last connected position in case the position needs to be re-calculated.\n this._lastPosition = position;\n this._isInitialRender = false;\n }\n /** Sets the transform origin based on the configured selector and the passed-in position. */\n _setTransformOrigin(position) {\n if (!this._transformOriginSelector) {\n return;\n }\n const elements = this._boundingBox.querySelectorAll(this._transformOriginSelector);\n let xOrigin;\n let yOrigin = position.overlayY;\n if (position.overlayX === 'center') {\n xOrigin = 'center';\n } else if (this._isRtl()) {\n xOrigin = position.overlayX === 'start' ? 'right' : 'left';\n } else {\n xOrigin = position.overlayX === 'start' ? 'left' : 'right';\n }\n for (let i = 0; i < elements.length; i++) {\n elements[i].style.transformOrigin = `${xOrigin} ${yOrigin}`;\n }\n }\n /**\n * Gets the position and size of the overlay's sizing container.\n *\n * This method does no measuring and applies no styles so that we can cheaply compute the\n * bounds for all positions and choose the best fit based on these results.\n */\n _calculateBoundingBoxRect(origin, position) {\n const viewport = this._viewportRect;\n const isRtl = this._isRtl();\n let height, top, bottom;\n if (position.overlayY === 'top') {\n // Overlay is opening \"downward\" and thus is bound by the bottom viewport edge.\n top = origin.y;\n height = viewport.height - top + this._viewportMargin;\n } else if (position.overlayY === 'bottom') {\n // Overlay is opening \"upward\" and thus is bound by the top viewport edge. We need to add\n // the viewport margin back in, because the viewport rect is narrowed down to remove the\n // margin, whereas the `origin` position is calculated based on its `DOMRect`.\n bottom = viewport.height - origin.y + this._viewportMargin * 2;\n height = viewport.height - bottom + this._viewportMargin;\n } else {\n // If neither top nor bottom, it means that the overlay is vertically centered on the\n // origin point. Note that we want the position relative to the viewport, rather than\n // the page, which is why we don't use something like `viewport.bottom - origin.y` and\n // `origin.y - viewport.top`.\n const smallestDistanceToViewportEdge = Math.min(viewport.bottom - origin.y + viewport.top, origin.y);\n const previousHeight = this._lastBoundingBoxSize.height;\n height = smallestDistanceToViewportEdge * 2;\n top = origin.y - smallestDistanceToViewportEdge;\n if (height > previousHeight && !this._isInitialRender && !this._growAfterOpen) {\n top = origin.y - previousHeight / 2;\n }\n }\n // The overlay is opening 'right-ward' (the content flows to the right).\n const isBoundedByRightViewportEdge = position.overlayX === 'start' && !isRtl || position.overlayX === 'end' && isRtl;\n // The overlay is opening 'left-ward' (the content flows to the left).\n const isBoundedByLeftViewportEdge = position.overlayX === 'end' && !isRtl || position.overlayX === 'start' && isRtl;\n let width, left, right;\n if (isBoundedByLeftViewportEdge) {\n right = viewport.width - origin.x + this._viewportMargin * 2;\n width = origin.x - this._viewportMargin;\n } else if (isBoundedByRightViewportEdge) {\n left = origin.x;\n width = viewport.right - origin.x;\n } else {\n // If neither start nor end, it means that the overlay is horizontally centered on the\n // origin point. Note that we want the position relative to the viewport, rather than\n // the page, which is why we don't use something like `viewport.right - origin.x` and\n // `origin.x - viewport.left`.\n const smallestDistanceToViewportEdge = Math.min(viewport.right - origin.x + viewport.left, origin.x);\n const previousWidth = this._lastBoundingBoxSize.width;\n width = smallestDistanceToViewportEdge * 2;\n left = origin.x - smallestDistanceToViewportEdge;\n if (width > previousWidth && !this._isInitialRender && !this._growAfterOpen) {\n left = origin.x - previousWidth / 2;\n }\n }\n return {\n top: top,\n left: left,\n bottom: bottom,\n right: right,\n width,\n height\n };\n }\n /**\n * Sets the position and size of the overlay's sizing wrapper. The wrapper is positioned on the\n * origin's connection point and stretches to the bounds of the viewport.\n *\n * @param origin The point on the origin element where the overlay is connected.\n * @param position The position preference\n */\n _setBoundingBoxStyles(origin, position) {\n const boundingBoxRect = this._calculateBoundingBoxRect(origin, position);\n // It's weird if the overlay *grows* while scrolling, so we take the last size into account\n // when applying a new size.\n if (!this._isInitialRender && !this._growAfterOpen) {\n boundingBoxRect.height = Math.min(boundingBoxRect.height, this._lastBoundingBoxSize.height);\n boundingBoxRect.width = Math.min(boundingBoxRect.width, this._lastBoundingBoxSize.width);\n }\n const styles = {};\n if (this._hasExactPosition()) {\n styles.top = styles.left = '0';\n styles.bottom = styles.right = styles.maxHeight = styles.maxWidth = '';\n styles.width = styles.height = '100%';\n } else {\n const maxHeight = this._overlayRef.getConfig().maxHeight;\n const maxWidth = this._overlayRef.getConfig().maxWidth;\n styles.height = coerceCssPixelValue(boundingBoxRect.height);\n styles.top = coerceCssPixelValue(boundingBoxRect.top);\n styles.bottom = coerceCssPixelValue(boundingBoxRect.bottom);\n styles.width = coerceCssPixelValue(boundingBoxRect.width);\n styles.left = coerceCssPixelValue(boundingBoxRect.left);\n styles.right = coerceCssPixelValue(boundingBoxRect.right);\n // Push the pane content towards the proper direction.\n if (position.overlayX === 'center') {\n styles.alignItems = 'center';\n } else {\n styles.alignItems = position.overlayX === 'end' ? 'flex-end' : 'flex-start';\n }\n if (position.overlayY === 'center') {\n styles.justifyContent = 'center';\n } else {\n styles.justifyContent = position.overlayY === 'bottom' ? 'flex-end' : 'flex-start';\n }\n if (maxHeight) {\n styles.maxHeight = coerceCssPixelValue(maxHeight);\n }\n if (maxWidth) {\n styles.maxWidth = coerceCssPixelValue(maxWidth);\n }\n }\n this._lastBoundingBoxSize = boundingBoxRect;\n extendStyles(this._boundingBox.style, styles);\n }\n /** Resets the styles for the bounding box so that a new positioning can be computed. */\n _resetBoundingBoxStyles() {\n extendStyles(this._boundingBox.style, {\n top: '0',\n left: '0',\n right: '0',\n bottom: '0',\n height: '',\n width: '',\n alignItems: '',\n justifyContent: ''\n });\n }\n /** Resets the styles for the overlay pane so that a new positioning can be computed. */\n _resetOverlayElementStyles() {\n extendStyles(this._pane.style, {\n top: '',\n left: '',\n bottom: '',\n right: '',\n position: '',\n transform: ''\n });\n }\n /** Sets positioning styles to the overlay element. */\n _setOverlayElementStyles(originPoint, position) {\n const styles = {};\n const hasExactPosition = this._hasExactPosition();\n const hasFlexibleDimensions = this._hasFlexibleDimensions;\n const config = this._overlayRef.getConfig();\n if (hasExactPosition) {\n const scrollPosition = this._viewportRuler.getViewportScrollPosition();\n extendStyles(styles, this._getExactOverlayY(position, originPoint, scrollPosition));\n extendStyles(styles, this._getExactOverlayX(position, originPoint, scrollPosition));\n } else {\n styles.position = 'static';\n }\n // Use a transform to apply the offsets. We do this because the `center` positions rely on\n // being in the normal flex flow and setting a `top` / `left` at all will completely throw\n // off the position. We also can't use margins, because they won't have an effect in some\n // cases where the element doesn't have anything to \"push off of\". Finally, this works\n // better both with flexible and non-flexible positioning.\n let transformString = '';\n let offsetX = this._getOffset(position, 'x');\n let offsetY = this._getOffset(position, 'y');\n if (offsetX) {\n transformString += `translateX(${offsetX}px) `;\n }\n if (offsetY) {\n transformString += `translateY(${offsetY}px)`;\n }\n styles.transform = transformString.trim();\n // If a maxWidth or maxHeight is specified on the overlay, we remove them. We do this because\n // we need these values to both be set to \"100%\" for the automatic flexible sizing to work.\n // The maxHeight and maxWidth are set on the boundingBox in order to enforce the constraint.\n // Note that this doesn't apply when we have an exact position, in which case we do want to\n // apply them because they'll be cleared from the bounding box.\n if (config.maxHeight) {\n if (hasExactPosition) {\n styles.maxHeight = coerceCssPixelValue(config.maxHeight);\n } else if (hasFlexibleDimensions) {\n styles.maxHeight = '';\n }\n }\n if (config.maxWidth) {\n if (hasExactPosition) {\n styles.maxWidth = coerceCssPixelValue(config.maxWidth);\n } else if (hasFlexibleDimensions) {\n styles.maxWidth = '';\n }\n }\n extendStyles(this._pane.style, styles);\n }\n /** Gets the exact top/bottom for the overlay when not using flexible sizing or when pushing. */\n _getExactOverlayY(position, originPoint, scrollPosition) {\n // Reset any existing styles. This is necessary in case the\n // preferred position has changed since the last `apply`.\n let styles = {\n top: '',\n bottom: ''\n };\n let overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);\n if (this._isPushed) {\n overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);\n }\n // We want to set either `top` or `bottom` based on whether the overlay wants to appear\n // above or below the origin and the direction in which the element will expand.\n if (position.overlayY === 'bottom') {\n // When using `bottom`, we adjust the y position such that it is the distance\n // from the bottom of the viewport rather than the top.\n const documentHeight = this._document.documentElement.clientHeight;\n styles.bottom = `${documentHeight - (overlayPoint.y + this._overlayRect.height)}px`;\n } else {\n styles.top = coerceCssPixelValue(overlayPoint.y);\n }\n return styles;\n }\n /** Gets the exact left/right for the overlay when not using flexible sizing or when pushing. */\n _getExactOverlayX(position, originPoint, scrollPosition) {\n // Reset any existing styles. This is necessary in case the preferred position has\n // changed since the last `apply`.\n let styles = {\n left: '',\n right: ''\n };\n let overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position);\n if (this._isPushed) {\n overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);\n }\n // We want to set either `left` or `right` based on whether the overlay wants to appear \"before\"\n // or \"after\" the origin, which determines the direction in which the element will expand.\n // For the horizontal axis, the meaning of \"before\" and \"after\" change based on whether the\n // page is in RTL or LTR.\n let horizontalStyleProperty;\n if (this._isRtl()) {\n horizontalStyleProperty = position.overlayX === 'end' ? 'left' : 'right';\n } else {\n horizontalStyleProperty = position.overlayX === 'end' ? 'right' : 'left';\n }\n // When we're setting `right`, we adjust the x position such that it is the distance\n // from the right edge of the viewport rather than the left edge.\n if (horizontalStyleProperty === 'right') {\n const documentWidth = this._document.documentElement.clientWidth;\n styles.right = `${documentWidth - (overlayPoint.x + this._overlayRect.width)}px`;\n } else {\n styles.left = coerceCssPixelValue(overlayPoint.x);\n }\n return styles;\n }\n /**\n * Gets the view properties of the trigger and overlay, including whether they are clipped\n * or completely outside the view of any of the strategy's scrollables.\n */\n _getScrollVisibility() {\n // Note: needs fresh rects since the position could've changed.\n const originBounds = this._getOriginRect();\n const overlayBounds = this._pane.getBoundingClientRect();\n // TODO(jelbourn): instead of needing all of the client rects for these scrolling containers\n // every time, we should be able to use the scrollTop of the containers if the size of those\n // containers hasn't changed.\n const scrollContainerBounds = this._scrollables.map(scrollable => {\n return scrollable.getElementRef().nativeElement.getBoundingClientRect();\n });\n return {\n isOriginClipped: isElementClippedByScrolling(originBounds, scrollContainerBounds),\n isOriginOutsideView: isElementScrolledOutsideView(originBounds, scrollContainerBounds),\n isOverlayClipped: isElementClippedByScrolling(overlayBounds, scrollContainerBounds),\n isOverlayOutsideView: isElementScrolledOutsideView(overlayBounds, scrollContainerBounds)\n };\n }\n /** Subtracts the amount that an element is overflowing on an axis from its length. */\n _subtractOverflows(length, ...overflows) {\n return overflows.reduce((currentValue, currentOverflow) => {\n return currentValue - Math.max(currentOverflow, 0);\n }, length);\n }\n /** Narrows the given viewport rect by the current _viewportMargin. */\n _getNarrowedViewportRect() {\n // We recalculate the viewport rect here ourselves, rather than using the ViewportRuler,\n // because we want to use the `clientWidth` and `clientHeight` as the base. The difference\n // being that the client properties don't include the scrollbar, as opposed to `innerWidth`\n // and `innerHeight` that do. This is necessary, because the overlay container uses\n // 100% `width` and `height` which don't include the scrollbar either.\n const width = this._document.documentElement.clientWidth;\n const height = this._document.documentElement.clientHeight;\n const scrollPosition = this._viewportRuler.getViewportScrollPosition();\n return {\n top: scrollPosition.top + this._viewportMargin,\n left: scrollPosition.left + this._viewportMargin,\n right: scrollPosition.left + width - this._viewportMargin,\n bottom: scrollPosition.top + height - this._viewportMargin,\n width: width - 2 * this._viewportMargin,\n height: height - 2 * this._viewportMargin\n };\n }\n /** Whether the we're dealing with an RTL context */\n _isRtl() {\n return this._overlayRef.getDirection() === 'rtl';\n }\n /** Determines whether the overlay uses exact or flexible positioning. */\n _hasExactPosition() {\n return !this._hasFlexibleDimensions || this._isPushed;\n }\n /** Retrieves the offset of a position along the x or y axis. */\n _getOffset(position, axis) {\n if (axis === 'x') {\n // We don't do something like `position['offset' + axis]` in\n // order to avoid breaking minifiers that rename properties.\n return position.offsetX == null ? this._offsetX : position.offsetX;\n }\n return position.offsetY == null ? this._offsetY : position.offsetY;\n }\n /** Validates that the current position match the expected values. */\n _validatePositions() {\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (!this._preferredPositions.length) {\n throw Error('FlexibleConnectedPositionStrategy: At least one position is required.');\n }\n // TODO(crisbeto): remove these once Angular's template type\n // checking is advanced enough to catch these cases.\n this._preferredPositions.forEach(pair => {\n validateHorizontalPosition('originX', pair.originX);\n validateVerticalPosition('originY', pair.originY);\n validateHorizontalPosition('overlayX', pair.overlayX);\n validateVerticalPosition('overlayY', pair.overlayY);\n });\n }\n }\n /** Adds a single CSS class or an array of classes on the overlay panel. */\n _addPanelClasses(cssClasses) {\n if (this._pane) {\n coerceArray(cssClasses).forEach(cssClass => {\n if (cssClass !== '' && this._appliedPanelClasses.indexOf(cssClass) === -1) {\n this._appliedPanelClasses.push(cssClass);\n this._pane.classList.add(cssClass);\n }\n });\n }\n }\n /** Clears the classes that the position strategy has applied from the overlay panel. */\n _clearPanelClasses() {\n if (this._pane) {\n this._appliedPanelClasses.forEach(cssClass => {\n this._pane.classList.remove(cssClass);\n });\n this._appliedPanelClasses = [];\n }\n }\n /** Returns the DOMRect of the current origin. */\n _getOriginRect() {\n const origin = this._origin;\n if (origin instanceof ElementRef) {\n return origin.nativeElement.getBoundingClientRect();\n }\n // Check for Element so SVG elements are also supported.\n if (origin instanceof Element) {\n return origin.getBoundingClientRect();\n }\n const width = origin.width || 0;\n const height = origin.height || 0;\n // If the origin is a point, return a client rect as if it was a 0x0 element at the point.\n return {\n top: origin.y,\n bottom: origin.y + height,\n left: origin.x,\n right: origin.x + width,\n height,\n width\n };\n }\n}\n/** Shallow-extends a stylesheet object with another stylesheet object. */\nfunction extendStyles(destination, source) {\n for (let key in source) {\n if (source.hasOwnProperty(key)) {\n destination[key] = source[key];\n }\n }\n return destination;\n}\n/**\n * Extracts the pixel value as a number from a value, if it's a number\n * or a CSS pixel string (e.g. `1337px`). Otherwise returns null.\n */\nfunction getPixelValue(input) {\n if (typeof input !== 'number' && input != null) {\n const [value, units] = input.split(cssUnitPattern);\n return !units || units === 'px' ? parseFloat(value) : null;\n }\n return input || null;\n}\n/**\n * Gets a version of an element's bounding `DOMRect` where all the values are rounded down to\n * the nearest pixel. This allows us to account for the cases where there may be sub-pixel\n * deviations in the `DOMRect` returned by the browser (e.g. when zoomed in with a percentage\n * size, see #21350).\n */\nfunction getRoundedBoundingClientRect(clientRect) {\n return {\n top: Math.floor(clientRect.top),\n right: Math.floor(clientRect.right),\n bottom: Math.floor(clientRect.bottom),\n left: Math.floor(clientRect.left),\n width: Math.floor(clientRect.width),\n height: Math.floor(clientRect.height)\n };\n}\n/** Returns whether two `ScrollingVisibility` objects are identical. */\nfunction compareScrollVisibility(a, b) {\n if (a === b) {\n return true;\n }\n return a.isOriginClipped === b.isOriginClipped && a.isOriginOutsideView === b.isOriginOutsideView && a.isOverlayClipped === b.isOverlayClipped && a.isOverlayOutsideView === b.isOverlayOutsideView;\n}\nconst STANDARD_DROPDOWN_BELOW_POSITIONS = [{\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top'\n}, {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom'\n}, {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top'\n}, {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom'\n}];\nconst STANDARD_DROPDOWN_ADJACENT_POSITIONS = [{\n originX: 'end',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'top'\n}, {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'bottom'\n}, {\n originX: 'start',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'top'\n}, {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'bottom'\n}];\n\n/** Class to be added to the overlay pane wrapper. */\nconst wrapperClass = 'cdk-global-overlay-wrapper';\n/**\n * A strategy for positioning overlays. Using this strategy, an overlay is given an\n * explicit position relative to the browser's viewport. We use flexbox, instead of\n * transforms, in order to avoid issues with subpixel rendering which can cause the\n * element to become blurry.\n */\nclass GlobalPositionStrategy {\n /** The overlay to which this strategy is attached. */\n _overlayRef;\n _cssPosition = 'static';\n _topOffset = '';\n _bottomOffset = '';\n _alignItems = '';\n _xPosition = '';\n _xOffset = '';\n _width = '';\n _height = '';\n _isDisposed = false;\n attach(overlayRef) {\n const config = overlayRef.getConfig();\n this._overlayRef = overlayRef;\n if (this._width && !config.width) {\n overlayRef.updateSize({\n width: this._width\n });\n }\n if (this._height && !config.height) {\n overlayRef.updateSize({\n height: this._height\n });\n }\n overlayRef.hostElement.classList.add(wrapperClass);\n this._isDisposed = false;\n }\n /**\n * Sets the top position of the overlay. Clears any previously set vertical position.\n * @param value New top offset.\n */\n top(value = '') {\n this._bottomOffset = '';\n this._topOffset = value;\n this._alignItems = 'flex-start';\n return this;\n }\n /**\n * Sets the left position of the overlay. Clears any previously set horizontal position.\n * @param value New left offset.\n */\n left(value = '') {\n this._xOffset = value;\n this._xPosition = 'left';\n return this;\n }\n /**\n * Sets the bottom position of the overlay. Clears any previously set vertical position.\n * @param value New bottom offset.\n */\n bottom(value = '') {\n this._topOffset = '';\n this._bottomOffset = value;\n this._alignItems = 'flex-end';\n return this;\n }\n /**\n * Sets the right position of the overlay. Clears any previously set horizontal position.\n * @param value New right offset.\n */\n right(value = '') {\n this._xOffset = value;\n this._xPosition = 'right';\n return this;\n }\n /**\n * Sets the overlay to the start of the viewport, depending on the overlay direction.\n * This will be to the left in LTR layouts and to the right in RTL.\n * @param offset Offset from the edge of the screen.\n */\n start(value = '') {\n this._xOffset = value;\n this._xPosition = 'start';\n return this;\n }\n /**\n * Sets the overlay to the end of the viewport, depending on the overlay direction.\n * This will be to the right in LTR layouts and to the left in RTL.\n * @param offset Offset from the edge of the screen.\n */\n end(value = '') {\n this._xOffset = value;\n this._xPosition = 'end';\n return this;\n }\n /**\n * Sets the overlay width and clears any previously set width.\n * @param value New width for the overlay\n * @deprecated Pass the `width` through the `OverlayConfig`.\n * @breaking-change 8.0.0\n */\n width(value = '') {\n if (this._overlayRef) {\n this._overlayRef.updateSize({\n width: value\n });\n } else {\n this._width = value;\n }\n return this;\n }\n /**\n * Sets the overlay height and clears any previously set height.\n * @param value New height for the overlay\n * @deprecated Pass the `height` through the `OverlayConfig`.\n * @breaking-change 8.0.0\n */\n height(value = '') {\n if (this._overlayRef) {\n this._overlayRef.updateSize({\n height: value\n });\n } else {\n this._height = value;\n }\n return this;\n }\n /**\n * Centers the overlay horizontally with an optional offset.\n * Clears any previously set horizontal position.\n *\n * @param offset Overlay offset from the horizontal center.\n */\n centerHorizontally(offset = '') {\n this.left(offset);\n this._xPosition = 'center';\n return this;\n }\n /**\n * Centers the overlay vertically with an optional offset.\n * Clears any previously set vertical position.\n *\n * @param offset Overlay offset from the vertical center.\n */\n centerVertically(offset = '') {\n this.top(offset);\n this._alignItems = 'center';\n return this;\n }\n /**\n * Apply the position to the element.\n * @docs-private\n */\n apply() {\n // Since the overlay ref applies the strategy asynchronously, it could\n // have been disposed before it ends up being applied. If that is the\n // case, we shouldn't do anything.\n if (!this._overlayRef || !this._overlayRef.hasAttached()) {\n return;\n }\n const styles = this._overlayRef.overlayElement.style;\n const parentStyles = this._overlayRef.hostElement.style;\n const config = this._overlayRef.getConfig();\n const {\n width,\n height,\n maxWidth,\n maxHeight\n } = config;\n const shouldBeFlushHorizontally = (width === '100%' || width === '100vw') && (!maxWidth || maxWidth === '100%' || maxWidth === '100vw');\n const shouldBeFlushVertically = (height === '100%' || height === '100vh') && (!maxHeight || maxHeight === '100%' || maxHeight === '100vh');\n const xPosition = this._xPosition;\n const xOffset = this._xOffset;\n const isRtl = this._overlayRef.getConfig().direction === 'rtl';\n let marginLeft = '';\n let marginRight = '';\n let justifyContent = '';\n if (shouldBeFlushHorizontally) {\n justifyContent = 'flex-start';\n } else if (xPosition === 'center') {\n justifyContent = 'center';\n if (isRtl) {\n marginRight = xOffset;\n } else {\n marginLeft = xOffset;\n }\n } else if (isRtl) {\n if (xPosition === 'left' || xPosition === 'end') {\n justifyContent = 'flex-end';\n marginLeft = xOffset;\n } else if (xPosition === 'right' || xPosition === 'start') {\n justifyContent = 'flex-start';\n marginRight = xOffset;\n }\n } else if (xPosition === 'left' || xPosition === 'start') {\n justifyContent = 'flex-start';\n marginLeft = xOffset;\n } else if (xPosition === 'right' || xPosition === 'end') {\n justifyContent = 'flex-end';\n marginRight = xOffset;\n }\n styles.position = this._cssPosition;\n styles.marginLeft = shouldBeFlushHorizontally ? '0' : marginLeft;\n styles.marginTop = shouldBeFlushVertically ? '0' : this._topOffset;\n styles.marginBottom = this._bottomOffset;\n styles.marginRight = shouldBeFlushHorizontally ? '0' : marginRight;\n parentStyles.justifyContent = justifyContent;\n parentStyles.alignItems = shouldBeFlushVertically ? 'flex-start' : this._alignItems;\n }\n /**\n * Cleans up the DOM changes from the position strategy.\n * @docs-private\n */\n dispose() {\n if (this._isDisposed || !this._overlayRef) {\n return;\n }\n const styles = this._overlayRef.overlayElement.style;\n const parent = this._overlayRef.hostElement;\n const parentStyles = parent.style;\n parent.classList.remove(wrapperClass);\n parentStyles.justifyContent = parentStyles.alignItems = styles.marginTop = styles.marginBottom = styles.marginLeft = styles.marginRight = styles.position = '';\n this._overlayRef = null;\n this._isDisposed = true;\n }\n}\n\n/** Builder for overlay position strategy. */\nlet OverlayPositionBuilder = /*#__PURE__*/(() => {\n class OverlayPositionBuilder {\n _viewportRuler = inject(ViewportRuler);\n _document = inject(DOCUMENT);\n _platform = inject(Platform);\n _overlayContainer = inject(OverlayContainer);\n constructor() {}\n /**\n * Creates a global position strategy.\n */\n global() {\n return new GlobalPositionStrategy();\n }\n /**\n * Creates a flexible position strategy.\n * @param origin Origin relative to which to position the overlay.\n */\n flexibleConnectedTo(origin) {\n return new FlexibleConnectedPositionStrategy(origin, this._viewportRuler, this._document, this._platform, this._overlayContainer);\n }\n static ɵfac = function OverlayPositionBuilder_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || OverlayPositionBuilder)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: OverlayPositionBuilder,\n factory: OverlayPositionBuilder.ɵfac,\n providedIn: 'root'\n });\n }\n return OverlayPositionBuilder;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be\n * used as a low-level building block for other components. Dialogs, tooltips, menus,\n * selects, etc. can all be built using overlays. The service should primarily be used by authors\n * of re-usable components rather than developers building end-user applications.\n *\n * An overlay *is* a PortalOutlet, so any kind of Portal can be loaded into one.\n */\nlet Overlay = /*#__PURE__*/(() => {\n class Overlay {\n scrollStrategies = inject(ScrollStrategyOptions);\n _overlayContainer = inject(OverlayContainer);\n _positionBuilder = inject(OverlayPositionBuilder);\n _keyboardDispatcher = inject(OverlayKeyboardDispatcher);\n _injector = inject(Injector);\n _ngZone = inject(NgZone);\n _document = inject(DOCUMENT);\n _directionality = inject(Directionality);\n _location = inject(Location);\n _outsideClickDispatcher = inject(OverlayOutsideClickDispatcher);\n _animationsModuleType = inject(ANIMATION_MODULE_TYPE, {\n optional: true\n });\n _idGenerator = inject(_IdGenerator);\n _renderer = inject(RendererFactory2).createRenderer(null, null);\n _appRef;\n _styleLoader = inject(_CdkPrivateStyleLoader);\n constructor() {}\n /**\n * Creates an overlay.\n * @param config Configuration applied to the overlay.\n * @returns Reference to the created overlay.\n */\n create(config) {\n // This is done in the overlay container as well, but we have it here\n // since it's common to mock out the overlay container in tests.\n this._styleLoader.load(_CdkOverlayStyleLoader);\n const host = this._createHostElement();\n const pane = this._createPaneElement(host);\n const portalOutlet = this._createPortalOutlet(pane);\n const overlayConfig = new OverlayConfig(config);\n overlayConfig.direction = overlayConfig.direction || this._directionality.value;\n return new OverlayRef(portalOutlet, host, pane, overlayConfig, this._ngZone, this._keyboardDispatcher, this._document, this._location, this._outsideClickDispatcher, this._animationsModuleType === 'NoopAnimations', this._injector.get(EnvironmentInjector), this._renderer);\n }\n /**\n * Gets a position builder that can be used, via fluent API,\n * to construct and configure a position strategy.\n * @returns An overlay position builder.\n */\n position() {\n return this._positionBuilder;\n }\n /**\n * Creates the DOM element for an overlay and appends it to the overlay container.\n * @returns Newly-created pane element\n */\n _createPaneElement(host) {\n const pane = this._document.createElement('div');\n pane.id = this._idGenerator.getId('cdk-overlay-');\n pane.classList.add('cdk-overlay-pane');\n host.appendChild(pane);\n return pane;\n }\n /**\n * Creates the host element that wraps around an overlay\n * and can be used for advanced positioning.\n * @returns Newly-create host element.\n */\n _createHostElement() {\n const host = this._document.createElement('div');\n this._overlayContainer.getContainerElement().appendChild(host);\n return host;\n }\n /**\n * Create a DomPortalOutlet into which the overlay content can be loaded.\n * @param pane The DOM element to turn into a portal outlet.\n * @returns A portal outlet for the given DOM element.\n */\n _createPortalOutlet(pane) {\n // We have to resolve the ApplicationRef later in order to allow people\n // to use overlay-based providers during app initialization.\n if (!this._appRef) {\n this._appRef = this._injector.get(ApplicationRef);\n }\n return new DomPortalOutlet(pane, null, this._appRef, this._injector, this._document);\n }\n static ɵfac = function Overlay_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || Overlay)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: Overlay,\n factory: Overlay.ɵfac,\n providedIn: 'root'\n });\n }\n return Overlay;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Default set of positions for the overlay. Follows the behavior of a dropdown. */\nconst defaultPositionList = [{\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top'\n}, {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom'\n}, {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom'\n}, {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top'\n}];\n/** Injection token that determines the scroll handling while the connected overlay is open. */\nconst CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY = /*#__PURE__*/new InjectionToken('cdk-connected-overlay-scroll-strategy', {\n providedIn: 'root',\n factory: () => {\n const overlay = inject(Overlay);\n return () => overlay.scrollStrategies.reposition();\n }\n});\n/**\n * Directive applied to an element to make it usable as an origin for an Overlay using a\n * ConnectedPositionStrategy.\n */\nlet CdkOverlayOrigin = /*#__PURE__*/(() => {\n class CdkOverlayOrigin {\n elementRef = inject(ElementRef);\n constructor() {}\n static ɵfac = function CdkOverlayOrigin_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkOverlayOrigin)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkOverlayOrigin,\n selectors: [[\"\", \"cdk-overlay-origin\", \"\"], [\"\", \"overlay-origin\", \"\"], [\"\", \"cdkOverlayOrigin\", \"\"]],\n exportAs: [\"cdkOverlayOrigin\"]\n });\n }\n return CdkOverlayOrigin;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Directive to facilitate declarative creation of an\n * Overlay using a FlexibleConnectedPositionStrategy.\n */\nlet CdkConnectedOverlay = /*#__PURE__*/(() => {\n class CdkConnectedOverlay {\n _overlay = inject(Overlay);\n _dir = inject(Directionality, {\n optional: true\n });\n _overlayRef;\n _templatePortal;\n _backdropSubscription = Subscription.EMPTY;\n _attachSubscription = Subscription.EMPTY;\n _detachSubscription = Subscription.EMPTY;\n _positionSubscription = Subscription.EMPTY;\n _offsetX;\n _offsetY;\n _position;\n _scrollStrategyFactory = inject(CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY);\n _disposeOnNavigation = false;\n _ngZone = inject(NgZone);\n /** Origin for the connected overlay. */\n origin;\n /** Registered connected position pairs. */\n positions;\n /**\n * This input overrides the positions input if specified. It lets users pass\n * in arbitrary positioning strategies.\n */\n positionStrategy;\n /** The offset in pixels for the overlay connection point on the x-axis */\n get offsetX() {\n return this._offsetX;\n }\n set offsetX(offsetX) {\n this._offsetX = offsetX;\n if (this._position) {\n this._updatePositionStrategy(this._position);\n }\n }\n /** The offset in pixels for the overlay connection point on the y-axis */\n get offsetY() {\n return this._offsetY;\n }\n set offsetY(offsetY) {\n this._offsetY = offsetY;\n if (this._position) {\n this._updatePositionStrategy(this._position);\n }\n }\n /** The width of the overlay panel. */\n width;\n /** The height of the overlay panel. */\n height;\n /** The min width of the overlay panel. */\n minWidth;\n /** The min height of the overlay panel. */\n minHeight;\n /** The custom class to be set on the backdrop element. */\n backdropClass;\n /** The custom class to add to the overlay pane element. */\n panelClass;\n /** Margin between the overlay and the viewport edges. */\n viewportMargin = 0;\n /** Strategy to be used when handling scroll events while the overlay is open. */\n scrollStrategy;\n /** Whether the overlay is open. */\n open = false;\n /** Whether the overlay can be closed by user interaction. */\n disableClose = false;\n /** CSS selector which to set the transform origin. */\n transformOriginSelector;\n /** Whether or not the overlay should attach a backdrop. */\n hasBackdrop = false;\n /** Whether or not the overlay should be locked when scrolling. */\n lockPosition = false;\n /** Whether the overlay's width and height can be constrained to fit within the viewport. */\n flexibleDimensions = false;\n /** Whether the overlay can grow after the initial open when flexible positioning is turned on. */\n growAfterOpen = false;\n /** Whether the overlay can be pushed on-screen if none of the provided positions fit. */\n push = false;\n /** Whether the overlay should be disposed of when the user goes backwards/forwards in history. */\n get disposeOnNavigation() {\n return this._disposeOnNavigation;\n }\n set disposeOnNavigation(value) {\n this._disposeOnNavigation = value;\n }\n /** Event emitted when the backdrop is clicked. */\n backdropClick = new EventEmitter();\n /** Event emitted when the position has changed. */\n positionChange = new EventEmitter();\n /** Event emitted when the overlay has been attached. */\n attach = new EventEmitter();\n /** Event emitted when the overlay has been detached. */\n detach = new EventEmitter();\n /** Emits when there are keyboard events that are targeted at the overlay. */\n overlayKeydown = new EventEmitter();\n /** Emits when there are mouse outside click events that are targeted at the overlay. */\n overlayOutsideClick = new EventEmitter();\n // TODO(jelbourn): inputs for size, scroll behavior, animation, etc.\n constructor() {\n const templateRef = inject(TemplateRef);\n const viewContainerRef = inject(ViewContainerRef);\n this._templatePortal = new TemplatePortal(templateRef, viewContainerRef);\n this.scrollStrategy = this._scrollStrategyFactory();\n }\n /** The associated overlay reference. */\n get overlayRef() {\n return this._overlayRef;\n }\n /** The element's layout direction. */\n get dir() {\n return this._dir ? this._dir.value : 'ltr';\n }\n ngOnDestroy() {\n this._attachSubscription.unsubscribe();\n this._detachSubscription.unsubscribe();\n this._backdropSubscription.unsubscribe();\n this._positionSubscription.unsubscribe();\n 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 return CdkConnectedOverlay;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** @docs-private */\nfunction CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {\n return () => overlay.scrollStrategies.reposition();\n}\n/** @docs-private */\nconst CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {\n provide: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY,\n deps: [Overlay],\n useFactory: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY\n};\nlet OverlayModule = /*#__PURE__*/(() => {\n class OverlayModule {\n static ɵfac = function OverlayModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || OverlayModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: OverlayModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n providers: [Overlay, CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER],\n imports: [BidiModule, PortalModule, ScrollingModule, ScrollingModule]\n });\n }\n return OverlayModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Alternative to OverlayContainer that supports correct displaying of overlay elements in\n * Fullscreen mode\n * https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen\n *\n * Should be provided in the root component.\n */\nlet FullscreenOverlayContainer = /*#__PURE__*/(() => {\n class FullscreenOverlayContainer extends OverlayContainer {\n _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 return FullscreenOverlayContainer;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { BlockScrollStrategy, CdkConnectedOverlay, CdkOverlayOrigin, CloseScrollStrategy, ConnectedOverlayPositionChange, ConnectionPositionPair, FlexibleConnectedPositionStrategy, FullscreenOverlayContainer, GlobalPositionStrategy, NoopScrollStrategy, Overlay, OverlayConfig, OverlayContainer, OverlayKeyboardDispatcher, OverlayModule, OverlayOutsideClickDispatcher, OverlayPositionBuilder, OverlayRef, RepositionScrollStrategy, STANDARD_DROPDOWN_ADJACENT_POSITIONS, STANDARD_DROPDOWN_BELOW_POSITIONS, ScrollStrategyOptions, ScrollingVisibility, validateHorizontalPosition, validateVerticalPosition };\n","import * as i0 from '@angular/core';\nimport { InjectionToken, inject, ElementRef, NgZone, ANIMATION_MODULE_TYPE, booleanAttribute, Directive, Input, Renderer2, numberAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport { Platform } from '@angular/cdk/platform';\nimport { MatRippleLoader, _StructuralStylesLoader, MatCommonModule, MatRippleModule } from '@angular/material/core';\nimport { _CdkPrivateStyleLoader } from '@angular/cdk/private';\n\n/** Injection token that can be used to provide the default options the button component. */\nconst _c0 = [\"mat-button\", \"\"];\nconst _c1 = [[[\"\", 8, \"material-icons\", 3, \"iconPositionEnd\", \"\"], [\"mat-icon\", 3, \"iconPositionEnd\", \"\"], [\"\", \"matButtonIcon\", \"\", 3, \"iconPositionEnd\", \"\"]], \"*\", [[\"\", \"iconPositionEnd\", \"\", 8, \"material-icons\"], [\"mat-icon\", \"iconPositionEnd\", \"\"], [\"\", \"matButtonIcon\", \"\", \"iconPositionEnd\", \"\"]]];\nconst _c2 = [\".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])\", \"*\", \".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]\"];\nconst _c3 = \".mat-mdc-button-base{text-decoration:none}.mdc-button{-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;border:none;outline:none;line-height:inherit;-webkit-appearance:none;overflow:visible;vertical-align:middle;background:rgba(0,0,0,0);padding:0 8px}.mdc-button::-moz-focus-inner{padding:0;border:0}.mdc-button:active{outline:none}.mdc-button:hover{cursor:pointer}.mdc-button:disabled{cursor:default;pointer-events:none}.mdc-button[hidden]{display:none}.mdc-button .mdc-button__label{position:relative}.mat-mdc-button{padding:0 var(--mat-text-button-horizontal-padding, 12px);height:var(--mdc-text-button-container-height, 40px);font-family:var(--mdc-text-button-label-text-font, var(--mat-sys-label-large-font));font-size:var(--mdc-text-button-label-text-size, var(--mat-sys-label-large-size));letter-spacing:var(--mdc-text-button-label-text-tracking, var(--mat-sys-label-large-tracking));text-transform:var(--mdc-text-button-label-text-transform);font-weight:var(--mdc-text-button-label-text-weight, var(--mat-sys-label-large-weight))}.mat-mdc-button,.mat-mdc-button .mdc-button__ripple{border-radius:var(--mdc-text-button-container-shape, var(--mat-sys-corner-full))}.mat-mdc-button:not(:disabled){color:var(--mdc-text-button-label-text-color, var(--mat-sys-primary))}.mat-mdc-button[disabled],.mat-mdc-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mdc-text-button-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-button.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-button:has(.material-icons,mat-icon,[matButtonIcon]){padding:0 var(--mat-text-button-with-icon-horizontal-padding, 16px)}.mat-mdc-button>.mat-icon{margin-right:var(--mat-text-button-icon-spacing, 8px);margin-left:var(--mat-text-button-icon-offset, -4px)}[dir=rtl] .mat-mdc-button>.mat-icon{margin-right:var(--mat-text-button-icon-offset, -4px);margin-left:var(--mat-text-button-icon-spacing, 8px)}.mat-mdc-button .mdc-button__label+.mat-icon{margin-right:var(--mat-text-button-icon-offset, -4px);margin-left:var(--mat-text-button-icon-spacing, 8px)}[dir=rtl] .mat-mdc-button .mdc-button__label+.mat-icon{margin-right:var(--mat-text-button-icon-spacing, 8px);margin-left:var(--mat-text-button-icon-offset, -4px)}.mat-mdc-button .mat-ripple-element{background-color:var(--mat-text-button-ripple-color, color-mix(in srgb, var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-button .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-text-button-state-layer-color, var(--mat-sys-primary))}.mat-mdc-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-text-button-disabled-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-button:hover .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-text-button-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-button.mat-mdc-button-disabled-interactive:focus .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-text-button-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-button:active .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-text-button-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-button .mat-mdc-button-touch-target{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%);display:var(--mat-text-button-touch-target-display, block)}.mat-mdc-unelevated-button{transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);height:var(--mdc-filled-button-container-height, 40px);font-family:var(--mdc-filled-button-label-text-font, var(--mat-sys-label-large-font));font-size:var(--mdc-filled-button-label-text-size, var(--mat-sys-label-large-size));letter-spacing:var(--mdc-filled-button-label-text-tracking, var(--mat-sys-label-large-tracking));text-transform:var(--mdc-filled-button-label-text-transform);font-weight:var(--mdc-filled-button-label-text-weight, var(--mat-sys-label-large-weight));padding:0 var(--mat-filled-button-horizontal-padding, 24px)}.mat-mdc-unelevated-button>.mat-icon{margin-right:var(--mat-filled-button-icon-spacing, 8px);margin-left:var(--mat-filled-button-icon-offset, -8px)}[dir=rtl] .mat-mdc-unelevated-button>.mat-icon{margin-right:var(--mat-filled-button-icon-offset, -8px);margin-left:var(--mat-filled-button-icon-spacing, 8px)}.mat-mdc-unelevated-button .mdc-button__label+.mat-icon{margin-right:var(--mat-filled-button-icon-offset, -8px);margin-left:var(--mat-filled-button-icon-spacing, 8px)}[dir=rtl] .mat-mdc-unelevated-button .mdc-button__label+.mat-icon{margin-right:var(--mat-filled-button-icon-spacing, 8px);margin-left:var(--mat-filled-button-icon-offset, -8px)}.mat-mdc-unelevated-button .mat-ripple-element{background-color:var(--mat-filled-button-ripple-color, color-mix(in srgb, var(--mat-sys-on-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-filled-button-state-layer-color, var(--mat-sys-on-primary))}.mat-mdc-unelevated-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-filled-button-disabled-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-unelevated-button:hover .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-filled-button-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-unelevated-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-unelevated-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-unelevated-button.mat-mdc-button-disabled-interactive:focus .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-filled-button-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-unelevated-button:active .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-filled-button-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-unelevated-button .mat-mdc-button-touch-target{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%);display:var(--mat-filled-button-touch-target-display, block)}.mat-mdc-unelevated-button:not(:disabled){color:var(--mdc-filled-button-label-text-color, var(--mat-sys-on-primary));background-color:var(--mdc-filled-button-container-color, var(--mat-sys-primary))}.mat-mdc-unelevated-button,.mat-mdc-unelevated-button .mdc-button__ripple{border-radius:var(--mdc-filled-button-container-shape, var(--mat-sys-corner-full))}.mat-mdc-unelevated-button[disabled],.mat-mdc-unelevated-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mdc-filled-button-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));background-color:var(--mdc-filled-button-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent))}.mat-mdc-unelevated-button.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-raised-button{transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);box-shadow:var(--mdc-protected-button-container-elevation-shadow, var(--mat-sys-level1));height:var(--mdc-protected-button-container-height, 40px);font-family:var(--mdc-protected-button-label-text-font, var(--mat-sys-label-large-font));font-size:var(--mdc-protected-button-label-text-size, var(--mat-sys-label-large-size));letter-spacing:var(--mdc-protected-button-label-text-tracking, var(--mat-sys-label-large-tracking));text-transform:var(--mdc-protected-button-label-text-transform);font-weight:var(--mdc-protected-button-label-text-weight, var(--mat-sys-label-large-weight));padding:0 var(--mat-protected-button-horizontal-padding, 24px)}.mat-mdc-raised-button>.mat-icon{margin-right:var(--mat-protected-button-icon-spacing, 8px);margin-left:var(--mat-protected-button-icon-offset, -8px)}[dir=rtl] .mat-mdc-raised-button>.mat-icon{margin-right:var(--mat-protected-button-icon-offset, -8px);margin-left:var(--mat-protected-button-icon-spacing, 8px)}.mat-mdc-raised-button .mdc-button__label+.mat-icon{margin-right:var(--mat-protected-button-icon-offset, -8px);margin-left:var(--mat-protected-button-icon-spacing, 8px)}[dir=rtl] .mat-mdc-raised-button .mdc-button__label+.mat-icon{margin-right:var(--mat-protected-button-icon-spacing, 8px);margin-left:var(--mat-protected-button-icon-offset, -8px)}.mat-mdc-raised-button .mat-ripple-element{background-color:var(--mat-protected-button-ripple-color, color-mix(in srgb, var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-protected-button-state-layer-color, var(--mat-sys-primary))}.mat-mdc-raised-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-protected-button-disabled-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-raised-button:hover .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-protected-button-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-raised-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-raised-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-raised-button.mat-mdc-button-disabled-interactive:focus .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-protected-button-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-raised-button:active .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-protected-button-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-raised-button .mat-mdc-button-touch-target{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%);display:var(--mat-protected-button-touch-target-display, block)}.mat-mdc-raised-button:not(:disabled){color:var(--mdc-protected-button-label-text-color, var(--mat-sys-primary));background-color:var(--mdc-protected-button-container-color, var(--mat-sys-surface))}.mat-mdc-raised-button,.mat-mdc-raised-button .mdc-button__ripple{border-radius:var(--mdc-protected-button-container-shape, var(--mat-sys-corner-full))}.mat-mdc-raised-button:hover{box-shadow:var(--mdc-protected-button-hover-container-elevation-shadow, var(--mat-sys-level2))}.mat-mdc-raised-button:focus{box-shadow:var(--mdc-protected-button-focus-container-elevation-shadow, var(--mat-sys-level1))}.mat-mdc-raised-button:active,.mat-mdc-raised-button:focus:active{box-shadow:var(--mdc-protected-button-pressed-container-elevation-shadow, var(--mat-sys-level1))}.mat-mdc-raised-button[disabled],.mat-mdc-raised-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mdc-protected-button-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));background-color:var(--mdc-protected-button-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent))}.mat-mdc-raised-button[disabled].mat-mdc-button-disabled,.mat-mdc-raised-button.mat-mdc-button-disabled.mat-mdc-button-disabled{box-shadow:var(--mdc-protected-button-disabled-container-elevation-shadow, var(--mat-sys-level0))}.mat-mdc-raised-button.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-outlined-button{border-style:solid;transition:border 280ms cubic-bezier(0.4, 0, 0.2, 1);height:var(--mdc-outlined-button-container-height, 40px);font-family:var(--mdc-outlined-button-label-text-font, var(--mat-sys-label-large-font));font-size:var(--mdc-outlined-button-label-text-size, var(--mat-sys-label-large-size));letter-spacing:var(--mdc-outlined-button-label-text-tracking, var(--mat-sys-label-large-tracking));text-transform:var(--mdc-outlined-button-label-text-transform);font-weight:var(--mdc-outlined-button-label-text-weight, var(--mat-sys-label-large-weight));border-radius:var(--mdc-outlined-button-container-shape, var(--mat-sys-corner-full));border-width:var(--mdc-outlined-button-outline-width, 1px);padding:0 var(--mat-outlined-button-horizontal-padding, 24px)}.mat-mdc-outlined-button>.mat-icon{margin-right:var(--mat-outlined-button-icon-spacing, 8px);margin-left:var(--mat-outlined-button-icon-offset, -8px)}[dir=rtl] .mat-mdc-outlined-button>.mat-icon{margin-right:var(--mat-outlined-button-icon-offset, -8px);margin-left:var(--mat-outlined-button-icon-spacing, 8px)}.mat-mdc-outlined-button .mdc-button__label+.mat-icon{margin-right:var(--mat-outlined-button-icon-offset, -8px);margin-left:var(--mat-outlined-button-icon-spacing, 8px)}[dir=rtl] .mat-mdc-outlined-button .mdc-button__label+.mat-icon{margin-right:var(--mat-outlined-button-icon-spacing, 8px);margin-left:var(--mat-outlined-button-icon-offset, -8px)}.mat-mdc-outlined-button .mat-ripple-element{background-color:var(--mat-outlined-button-ripple-color, color-mix(in srgb, var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-outlined-button-state-layer-color, var(--mat-sys-primary))}.mat-mdc-outlined-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-outlined-button-disabled-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-outlined-button:hover .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-outlined-button-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-outlined-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-outlined-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-outlined-button.mat-mdc-button-disabled-interactive:focus .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-outlined-button-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-outlined-button:active .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-outlined-button-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-outlined-button .mat-mdc-button-touch-target{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%);display:var(--mat-outlined-button-touch-target-display, block)}.mat-mdc-outlined-button:not(:disabled){color:var(--mdc-outlined-button-label-text-color, var(--mat-sys-primary));border-color:var(--mdc-outlined-button-outline-color, var(--mat-sys-outline))}.mat-mdc-outlined-button[disabled],.mat-mdc-outlined-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mdc-outlined-button-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));border-color:var(--mdc-outlined-button-disabled-outline-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent))}.mat-mdc-outlined-button.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-outlined-button .mdc-button__ripple{border-width:var(--mdc-outlined-button-outline-width, 1px);border-style:solid;border-color:rgba(0,0,0,0)}.mat-mdc-button,.mat-mdc-unelevated-button,.mat-mdc-raised-button,.mat-mdc-outlined-button{-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-button .mat-mdc-button-ripple,.mat-mdc-button .mat-mdc-button-persistent-ripple,.mat-mdc-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-unelevated-button .mat-mdc-button-ripple,.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple,.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-raised-button .mat-mdc-button-ripple,.mat-mdc-raised-button .mat-mdc-button-persistent-ripple,.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-outlined-button .mat-mdc-button-ripple,.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple,.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-button .mat-mdc-button-ripple,.mat-mdc-unelevated-button .mat-mdc-button-ripple,.mat-mdc-raised-button .mat-mdc-button-ripple,.mat-mdc-outlined-button .mat-mdc-button-ripple{overflow:hidden}.mat-mdc-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before{content:\\\"\\\";opacity:0}.mat-mdc-button .mdc-button__label,.mat-mdc-button .mat-icon,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-unelevated-button .mat-icon,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-raised-button .mat-icon,.mat-mdc-outlined-button .mdc-button__label,.mat-mdc-outlined-button .mat-icon{z-index:1;position:relative}.mat-mdc-button .mat-focus-indicator,.mat-mdc-unelevated-button .mat-focus-indicator,.mat-mdc-raised-button .mat-focus-indicator,.mat-mdc-outlined-button .mat-focus-indicator{top:0;left:0;right:0;bottom:0;position:absolute}.mat-mdc-button:focus .mat-focus-indicator::before,.mat-mdc-unelevated-button:focus .mat-focus-indicator::before,.mat-mdc-raised-button:focus .mat-focus-indicator::before,.mat-mdc-outlined-button:focus .mat-focus-indicator::before{content:\\\"\\\"}.mat-mdc-button._mat-animation-noopable,.mat-mdc-unelevated-button._mat-animation-noopable,.mat-mdc-raised-button._mat-animation-noopable,.mat-mdc-outlined-button._mat-animation-noopable{transition:none !important;animation:none !important}.mat-mdc-button>.mat-icon,.mat-mdc-unelevated-button>.mat-icon,.mat-mdc-raised-button>.mat-icon,.mat-mdc-outlined-button>.mat-icon{display:inline-block;position:relative;vertical-align:top;font-size:1.125rem;height:1.125rem;width:1.125rem}.mat-mdc-outlined-button .mat-mdc-button-ripple,.mat-mdc-outlined-button .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px}.mat-mdc-unelevated-button .mat-focus-indicator::before,.mat-mdc-raised-button .mat-focus-indicator::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px)*-1)}.mat-mdc-outlined-button .mat-focus-indicator::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 3px)*-1)}\";\nconst _c4 = \"@media(forced-colors: active){.mat-mdc-button:not(.mdc-button--outlined),.mat-mdc-unelevated-button:not(.mdc-button--outlined),.mat-mdc-raised-button:not(.mdc-button--outlined),.mat-mdc-outlined-button:not(.mdc-button--outlined),.mat-mdc-icon-button.mat-mdc-icon-button{outline:solid 1px}}\";\nconst _c5 = [\"mat-fab\", \"\"];\nconst _c6 = [\"mat-mini-fab\", \"\"];\nconst _c7 = \".mat-mdc-fab-base{-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:56px;height:56px;padding:0;border:none;fill:currentColor;text-decoration:none;cursor:pointer;-moz-appearance:none;-webkit-appearance:none;overflow:visible;transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),opacity 15ms linear 30ms,transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);flex-shrink:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-fab-base .mat-mdc-button-ripple,.mat-mdc-fab-base .mat-mdc-button-persistent-ripple,.mat-mdc-fab-base .mat-mdc-button-persistent-ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-fab-base .mat-mdc-button-ripple{overflow:hidden}.mat-mdc-fab-base .mat-mdc-button-persistent-ripple::before{content:\\\"\\\";opacity:0}.mat-mdc-fab-base .mdc-button__label,.mat-mdc-fab-base .mat-icon{z-index:1;position:relative}.mat-mdc-fab-base .mat-focus-indicator{top:0;left:0;right:0;bottom:0;position:absolute}.mat-mdc-fab-base:focus .mat-focus-indicator::before{content:\\\"\\\"}.mat-mdc-fab-base._mat-animation-noopable{transition:none !important;animation:none !important}.mat-mdc-fab-base::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\\\"\\\";pointer-events:none}.mat-mdc-fab-base[hidden]{display:none}.mat-mdc-fab-base::-moz-focus-inner{padding:0;border:0}.mat-mdc-fab-base:active,.mat-mdc-fab-base:focus{outline:none}.mat-mdc-fab-base:hover{cursor:pointer}.mat-mdc-fab-base>svg{width:100%}.mat-mdc-fab-base .mat-icon,.mat-mdc-fab-base .material-icons{transition:transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);fill:currentColor;will-change:transform}.mat-mdc-fab-base .mat-focus-indicator::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px)*-1)}.mat-mdc-fab-base[disabled],.mat-mdc-fab-base.mat-mdc-button-disabled{cursor:default;pointer-events:none}.mat-mdc-fab-base[disabled],.mat-mdc-fab-base[disabled]:focus,.mat-mdc-fab-base.mat-mdc-button-disabled,.mat-mdc-fab-base.mat-mdc-button-disabled:focus{box-shadow:none}.mat-mdc-fab-base.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-fab{background-color:var(--mdc-fab-container-color, var(--mat-sys-primary-container));border-radius:var(--mdc-fab-container-shape, var(--mat-sys-corner-large));color:var(--mat-fab-foreground-color, var(--mat-sys-on-primary-container, inherit));box-shadow:var(--mdc-fab-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-fab:hover{box-shadow:var(--mdc-fab-hover-container-elevation-shadow, var(--mat-sys-level4))}.mat-mdc-fab:focus{box-shadow:var(--mdc-fab-focus-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-fab:active,.mat-mdc-fab:focus:active{box-shadow:var(--mdc-fab-pressed-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-fab[disabled],.mat-mdc-fab.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mat-fab-disabled-state-foreground-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));background-color:var(--mat-fab-disabled-state-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent))}.mat-mdc-fab.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-fab .mat-mdc-button-touch-target{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%);display:var(--mat-fab-touch-target-display, block)}.mat-mdc-fab .mat-ripple-element{background-color:var(--mat-fab-ripple-color, color-mix(in srgb, var(--mat-sys-on-primary-container) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-fab .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-fab-state-layer-color, var(--mat-sys-on-primary-container))}.mat-mdc-fab.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-fab-disabled-state-layer-color)}.mat-mdc-fab:hover .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-fab-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-fab.cdk-program-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-fab.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-fab.mat-mdc-button-disabled-interactive:focus .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-fab-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-fab:active .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-fab-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-mini-fab{width:40px;height:40px;background-color:var(--mdc-fab-small-container-color, var(--mat-sys-primary-container));border-radius:var(--mdc-fab-small-container-shape, var(--mat-sys-corner-medium));color:var(--mat-fab-small-foreground-color, var(--mat-sys-on-primary-container, inherit));box-shadow:var(--mdc-fab-small-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-mini-fab:hover{box-shadow:var(--mdc-fab-small-hover-container-elevation-shadow, var(--mat-sys-level4))}.mat-mdc-mini-fab:focus{box-shadow:var(--mdc-fab-small-focus-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-mini-fab:active,.mat-mdc-mini-fab:focus:active{box-shadow:var(--mdc-fab-small-pressed-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-mini-fab[disabled],.mat-mdc-mini-fab.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mat-fab-small-disabled-state-foreground-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));background-color:var(--mat-fab-small-disabled-state-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent))}.mat-mdc-mini-fab.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-mini-fab .mat-mdc-button-touch-target{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%);display:var(--mat-fab-small-touch-target-display)}.mat-mdc-mini-fab .mat-ripple-element{background-color:var(--mat-fab-small-ripple-color, color-mix(in srgb, var(--mat-sys-on-primary-container) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-mini-fab .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-fab-small-state-layer-color, var(--mat-sys-on-primary-container))}.mat-mdc-mini-fab.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-fab-small-disabled-state-layer-color)}.mat-mdc-mini-fab:hover .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-fab-small-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-mini-fab.cdk-program-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-mini-fab.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-mini-fab.mat-mdc-button-disabled-interactive:focus .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-fab-small-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-mini-fab:active .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-fab-small-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-extended-fab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;border-radius:24px;padding-left:20px;padding-right:20px;width:auto;max-width:100%;line-height:normal;height:var(--mdc-extended-fab-container-height, 56px);border-radius:var(--mdc-extended-fab-container-shape, var(--mat-sys-corner-large));font-family:var(--mdc-extended-fab-label-text-font, var(--mat-sys-label-large-font));font-size:var(--mdc-extended-fab-label-text-size, var(--mat-sys-label-large-size));font-weight:var(--mdc-extended-fab-label-text-weight, var(--mat-sys-label-large-weight));letter-spacing:var(--mdc-extended-fab-label-text-tracking, var(--mat-sys-label-large-tracking));box-shadow:var(--mdc-extended-fab-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-extended-fab:hover{box-shadow:var(--mdc-extended-fab-hover-container-elevation-shadow, var(--mat-sys-level4))}.mat-mdc-extended-fab:focus{box-shadow:var(--mdc-extended-fab-focus-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-extended-fab:active,.mat-mdc-extended-fab:focus:active{box-shadow:var(--mdc-extended-fab-pressed-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-extended-fab[disabled],.mat-mdc-extended-fab.mat-mdc-button-disabled{cursor:default;pointer-events:none}.mat-mdc-extended-fab[disabled],.mat-mdc-extended-fab[disabled]:focus,.mat-mdc-extended-fab.mat-mdc-button-disabled,.mat-mdc-extended-fab.mat-mdc-button-disabled:focus{box-shadow:none}.mat-mdc-extended-fab.mat-mdc-button-disabled-interactive{pointer-events:auto}[dir=rtl] .mat-mdc-extended-fab .mdc-button__label+.mat-icon,[dir=rtl] .mat-mdc-extended-fab .mdc-button__label+.material-icons,.mat-mdc-extended-fab>.mat-icon,.mat-mdc-extended-fab>.material-icons{margin-left:-8px;margin-right:12px}.mat-mdc-extended-fab .mdc-button__label+.mat-icon,.mat-mdc-extended-fab .mdc-button__label+.material-icons,[dir=rtl] .mat-mdc-extended-fab>.mat-icon,[dir=rtl] .mat-mdc-extended-fab>.material-icons{margin-left:12px;margin-right:-8px}.mat-mdc-extended-fab .mat-mdc-button-touch-target{width:100%}\";\nconst _c8 = [\"mat-icon-button\", \"\"];\nconst _c9 = [\"*\"];\nconst _c10 = \".mat-mdc-icon-button{-webkit-user-select:none;user-select:none;display:inline-block;position:relative;box-sizing:border-box;border:none;outline:none;background-color:rgba(0,0,0,0);fill:currentColor;color:inherit;text-decoration:none;cursor:pointer;z-index:0;overflow:visible;border-radius:50%;flex-shrink:0;text-align:center;width:var(--mdc-icon-button-state-layer-size, 40px);height:var(--mdc-icon-button-state-layer-size, 40px);padding:calc(calc(var(--mdc-icon-button-state-layer-size, 40px) - var(--mdc-icon-button-icon-size, 24px)) / 2);font-size:var(--mdc-icon-button-icon-size, 24px);color:var(--mdc-icon-button-icon-color, var(--mat-sys-on-surface-variant));-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-icon-button .mat-mdc-button-ripple,.mat-mdc-icon-button .mat-mdc-button-persistent-ripple,.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-icon-button .mat-mdc-button-ripple{overflow:hidden}.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before{content:\\\"\\\";opacity:0}.mat-mdc-icon-button .mdc-button__label,.mat-mdc-icon-button .mat-icon{z-index:1;position:relative}.mat-mdc-icon-button .mat-focus-indicator{top:0;left:0;right:0;bottom:0;position:absolute}.mat-mdc-icon-button:focus .mat-focus-indicator::before{content:\\\"\\\"}.mat-mdc-icon-button .mat-ripple-element{background-color:var(--mat-icon-button-ripple-color, color-mix(in srgb, var(--mat-sys-on-surface-variant) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-icon-button-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-icon-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-icon-button-disabled-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-icon-button:hover .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-icon-button-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-icon-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-icon-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-icon-button.mat-mdc-button-disabled-interactive:focus .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-icon-button-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-icon-button:active .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-icon-button-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-icon-button .mat-mdc-button-touch-target{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%);display:var(--mat-icon-button-touch-target-display, block)}.mat-mdc-icon-button._mat-animation-noopable{transition:none !important;animation:none !important}.mat-mdc-icon-button[disabled],.mat-mdc-icon-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mdc-icon-button-disabled-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-icon-button.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-icon-button img,.mat-mdc-icon-button svg{width:var(--mdc-icon-button-icon-size, 24px);height:var(--mdc-icon-button-icon-size, 24px);vertical-align:baseline}.mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:50%}.mat-mdc-icon-button[hidden]{display:none}.mat-mdc-icon-button.mat-unthemed:not(.mdc-ripple-upgraded):focus::before,.mat-mdc-icon-button.mat-primary:not(.mdc-ripple-upgraded):focus::before,.mat-mdc-icon-button.mat-accent:not(.mdc-ripple-upgraded):focus::before,.mat-mdc-icon-button.mat-warn:not(.mdc-ripple-upgraded):focus::before{background:rgba(0,0,0,0);opacity:1}\";\nconst MAT_BUTTON_CONFIG = /*#__PURE__*/new InjectionToken('MAT_BUTTON_CONFIG');\n/** Shared host configuration for all buttons */\nconst MAT_BUTTON_HOST = {\n '[attr.disabled]': '_getDisabledAttribute()',\n '[attr.aria-disabled]': '_getAriaDisabled()',\n '[class.mat-mdc-button-disabled]': 'disabled',\n '[class.mat-mdc-button-disabled-interactive]': 'disabledInteractive',\n '[class._mat-animation-noopable]': '_animationMode === \"NoopAnimations\"',\n // MDC automatically applies the primary theme color to the button, but we want to support\n // an unthemed version. If color is undefined, apply a CSS class that makes it easy to\n // select and style this \"theme\".\n '[class.mat-unthemed]': '!color',\n // Add a class that applies to all buttons. This makes it easier to target if somebody\n // wants to target all Material buttons.\n '[class.mat-mdc-button-base]': 'true',\n '[class]': 'color ? \"mat-\" + color : \"\"'\n};\n/** List of classes to add to buttons instances based on host attribute selector. */\nconst HOST_SELECTOR_MDC_CLASS_PAIR = [{\n attribute: 'mat-button',\n mdcClasses: ['mdc-button', 'mat-mdc-button']\n}, {\n attribute: 'mat-flat-button',\n mdcClasses: ['mdc-button', 'mdc-button--unelevated', 'mat-mdc-unelevated-button']\n}, {\n attribute: 'mat-raised-button',\n mdcClasses: ['mdc-button', 'mdc-button--raised', 'mat-mdc-raised-button']\n}, {\n attribute: 'mat-stroked-button',\n mdcClasses: ['mdc-button', 'mdc-button--outlined', 'mat-mdc-outlined-button']\n}, {\n attribute: 'mat-fab',\n mdcClasses: ['mdc-fab', 'mat-mdc-fab-base', 'mat-mdc-fab']\n}, {\n attribute: 'mat-mini-fab',\n mdcClasses: ['mdc-fab', 'mat-mdc-fab-base', 'mdc-fab--mini', 'mat-mdc-mini-fab']\n}, {\n attribute: 'mat-icon-button',\n mdcClasses: ['mdc-icon-button', 'mat-mdc-icon-button']\n}];\n/** Base class for all buttons. */\nlet MatButtonBase = /*#__PURE__*/(() => {\n class MatButtonBase {\n _elementRef = inject(ElementRef);\n _platform = inject(Platform);\n _ngZone = inject(NgZone);\n _animationMode = inject(ANIMATION_MODULE_TYPE, {\n optional: true\n });\n _focusMonitor = inject(FocusMonitor);\n /**\n * Handles the lazy creation of the MatButton ripple.\n * Used to improve initial load time of large applications.\n */\n _rippleLoader = inject(MatRippleLoader);\n /** Whether this button is a FAB. Used to apply the correct class on the ripple. */\n _isFab = false;\n /**\n * Theme color of the button. This API is supported in M2 themes only, it has\n * no effect in M3 themes.\n *\n * For information on applying color variants in M3, see\n * https://material.angular.io/guide/theming#using-component-color-variants.\n */\n color;\n /** Whether the ripple effect is disabled or not. */\n get disableRipple() {\n return this._disableRipple;\n }\n set disableRipple(value) {\n this._disableRipple = value;\n this._updateRippleDisabled();\n }\n _disableRipple = false;\n /** Whether the button is disabled. */\n get disabled() {\n return this._disabled;\n }\n set disabled(value) {\n this._disabled = value;\n this._updateRippleDisabled();\n }\n _disabled = false;\n /** `aria-disabled` value of the button. */\n ariaDisabled;\n /**\n * Natively disabled buttons prevent focus and any pointer events from reaching the button.\n * In some scenarios this might not be desirable, because it can prevent users from finding out\n * why the button is disabled (e.g. via tooltip).\n *\n * Enabling this input will change the button so that it is styled to be disabled and will be\n * marked as `aria-disabled`, but it will allow the button to receive events and focus.\n *\n * Note that by enabling this, you need to set the `tabindex` yourself if the button isn't\n * meant to be tabbable and you have to prevent the button action (e.g. form submissions).\n */\n disabledInteractive;\n constructor() {\n inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);\n const config = inject(MAT_BUTTON_CONFIG, {\n optional: true\n });\n const element = this._elementRef.nativeElement;\n const classList = element.classList;\n this.disabledInteractive = config?.disabledInteractive ?? false;\n this.color = config?.color ?? null;\n this._rippleLoader?.configureRipple(element, {\n className: 'mat-mdc-button-ripple'\n });\n // For each of the variant selectors that is present in the button's host\n // attributes, add the correct corresponding MDC classes.\n for (const {\n attribute,\n mdcClasses\n } of HOST_SELECTOR_MDC_CLASS_PAIR) {\n if (element.hasAttribute(attribute)) {\n classList.add(...mdcClasses);\n }\n }\n }\n ngAfterViewInit() {\n this._focusMonitor.monitor(this._elementRef, true);\n }\n ngOnDestroy() {\n this._focusMonitor.stopMonitoring(this._elementRef);\n this._rippleLoader?.destroyRipple(this._elementRef.nativeElement);\n }\n /** Focuses the button. */\n focus(origin = 'program', options) {\n if (origin) {\n this._focusMonitor.focusVia(this._elementRef.nativeElement, origin, options);\n } else {\n this._elementRef.nativeElement.focus(options);\n }\n }\n _getAriaDisabled() {\n if (this.ariaDisabled != null) {\n return this.ariaDisabled;\n }\n return this.disabled && this.disabledInteractive ? true : null;\n }\n _getDisabledAttribute() {\n return this.disabledInteractive || !this.disabled ? null : true;\n }\n _updateRippleDisabled() {\n this._rippleLoader?.setDisabled(this._elementRef.nativeElement, this.disableRipple || this.disabled);\n }\n static ɵfac = function MatButtonBase_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatButtonBase)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatButtonBase,\n inputs: {\n color: \"color\",\n disableRipple: [2, \"disableRipple\", \"disableRipple\", booleanAttribute],\n disabled: [2, \"disabled\", \"disabled\", booleanAttribute],\n ariaDisabled: [2, \"aria-disabled\", \"ariaDisabled\", booleanAttribute],\n disabledInteractive: [2, \"disabledInteractive\", \"disabledInteractive\", booleanAttribute]\n },\n features: [i0.ɵɵInputTransformsFeature]\n });\n }\n return MatButtonBase;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** Shared host configuration for buttons using the `
` tag. */\nconst MAT_ANCHOR_HOST = {\n // Note that this is basically a noop on anchors,\n // but it appears that some internal apps depend on it.\n '[attr.disabled]': '_getDisabledAttribute()',\n '[class.mat-mdc-button-disabled]': 'disabled',\n '[class.mat-mdc-button-disabled-interactive]': 'disabledInteractive',\n '[class._mat-animation-noopable]': '_animationMode === \"NoopAnimations\"',\n // Note that we ignore the user-specified tabindex when it's disabled for\n // consistency with the `mat-button` applied on native buttons where even\n // though they have an index, they're not tabbable.\n '[attr.tabindex]': 'disabled && !disabledInteractive ? -1 : tabIndex',\n '[attr.aria-disabled]': '_getAriaDisabled()',\n // MDC automatically applies the primary theme color to the button, but we want to support\n // an unthemed version. If color is undefined, apply a CSS class that makes it easy to\n // select and style this \"theme\".\n '[class.mat-unthemed]': '!color',\n // Add a class that applies to all buttons. This makes it easier to target if somebody\n // wants to target all Material buttons.\n '[class.mat-mdc-button-base]': 'true',\n '[class]': 'color ? \"mat-\" + color : \"\"'\n};\n/**\n * Anchor button base.\n */\nlet MatAnchorBase = /*#__PURE__*/(() => {\n class MatAnchorBase extends MatButtonBase {\n _renderer = inject(Renderer2);\n _cleanupClick;\n tabIndex;\n ngOnInit() {\n this._ngZone.runOutsideAngular(() => {\n this._cleanupClick = this._renderer.listen(this._elementRef.nativeElement, 'click', this._haltDisabledEvents);\n });\n }\n ngOnDestroy() {\n super.ngOnDestroy();\n this._cleanupClick?.();\n }\n _haltDisabledEvents = event => {\n // A disabled button shouldn't apply any actions\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n };\n _getAriaDisabled() {\n if (this.ariaDisabled != null) {\n return this.ariaDisabled;\n }\n return this.disabled || null;\n }\n static ɵfac = /* @__PURE__ */(() => {\n let ɵMatAnchorBase_BaseFactory;\n return function MatAnchorBase_Factory(__ngFactoryType__) {\n return (ɵMatAnchorBase_BaseFactory || (ɵMatAnchorBase_BaseFactory = i0.ɵɵgetInheritedFactory(MatAnchorBase)))(__ngFactoryType__ || MatAnchorBase);\n };\n })();\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatAnchorBase,\n inputs: {\n tabIndex: [2, \"tabIndex\", \"tabIndex\", value => {\n return value == null ? undefined : numberAttribute(value);\n }]\n },\n features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature]\n });\n }\n return MatAnchorBase;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Material Design button component. Users interact with a button to perform an action.\n * See https://material.io/components/buttons\n *\n * The `MatButton` class applies to native button elements and captures the appearances for\n * \"text button\", \"outlined button\", and \"contained button\" per the Material Design\n * specification. `MatButton` additionally captures an additional \"flat\" appearance, which matches\n * \"contained\" but without elevation.\n */\nlet MatButton = /*#__PURE__*/(() => {\n class MatButton extends MatButtonBase {\n static ɵfac = /* @__PURE__ */(() => {\n let ɵMatButton_BaseFactory;\n return function MatButton_Factory(__ngFactoryType__) {\n return (ɵMatButton_BaseFactory || (ɵMatButton_BaseFactory = i0.ɵɵgetInheritedFactory(MatButton)))(__ngFactoryType__ || MatButton);\n };\n })();\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatButton,\n selectors: [[\"button\", \"mat-button\", \"\"], [\"button\", \"mat-raised-button\", \"\"], [\"button\", \"mat-flat-button\", \"\"], [\"button\", \"mat-stroked-button\", \"\"]],\n hostVars: 14,\n hostBindings: function MatButton_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵattribute(\"disabled\", ctx._getDisabledAttribute())(\"aria-disabled\", ctx._getAriaDisabled());\n i0.ɵɵclassMap(ctx.color ? \"mat-\" + ctx.color : \"\");\n i0.ɵɵclassProp(\"mat-mdc-button-disabled\", ctx.disabled)(\"mat-mdc-button-disabled-interactive\", ctx.disabledInteractive)(\"_mat-animation-noopable\", ctx._animationMode === \"NoopAnimations\")(\"mat-unthemed\", !ctx.color)(\"mat-mdc-button-base\", true);\n }\n },\n exportAs: [\"matButton\"],\n features: [i0.ɵɵInheritDefinitionFeature],\n attrs: _c0,\n ngContentSelectors: _c2,\n decls: 7,\n vars: 4,\n consts: [[1, \"mat-mdc-button-persistent-ripple\"], [1, \"mdc-button__label\"], [1, \"mat-focus-indicator\"], [1, \"mat-mdc-button-touch-target\"]],\n template: function MatButton_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef(_c1);\n i0.ɵɵelement(0, \"span\", 0);\n i0.ɵɵprojection(1);\n i0.ɵɵelementStart(2, \"span\", 1);\n i0.ɵɵprojection(3, 1);\n i0.ɵɵelementEnd();\n i0.ɵɵprojection(4, 2);\n i0.ɵɵelement(5, \"span\", 2)(6, \"span\", 3);\n }\n if (rf & 2) {\n i0.ɵɵclassProp(\"mdc-button__ripple\", !ctx._isFab)(\"mdc-fab__ripple\", ctx._isFab);\n }\n },\n styles: [\".mat-mdc-button-base{text-decoration:none}.mdc-button{-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;border:none;outline:none;line-height:inherit;-webkit-appearance:none;overflow:visible;vertical-align:middle;background:rgba(0,0,0,0);padding:0 8px}.mdc-button::-moz-focus-inner{padding:0;border:0}.mdc-button:active{outline:none}.mdc-button:hover{cursor:pointer}.mdc-button:disabled{cursor:default;pointer-events:none}.mdc-button[hidden]{display:none}.mdc-button .mdc-button__label{position:relative}.mat-mdc-button{padding:0 var(--mat-text-button-horizontal-padding, 12px);height:var(--mdc-text-button-container-height, 40px);font-family:var(--mdc-text-button-label-text-font, var(--mat-sys-label-large-font));font-size:var(--mdc-text-button-label-text-size, var(--mat-sys-label-large-size));letter-spacing:var(--mdc-text-button-label-text-tracking, var(--mat-sys-label-large-tracking));text-transform:var(--mdc-text-button-label-text-transform);font-weight:var(--mdc-text-button-label-text-weight, var(--mat-sys-label-large-weight))}.mat-mdc-button,.mat-mdc-button .mdc-button__ripple{border-radius:var(--mdc-text-button-container-shape, var(--mat-sys-corner-full))}.mat-mdc-button:not(:disabled){color:var(--mdc-text-button-label-text-color, var(--mat-sys-primary))}.mat-mdc-button[disabled],.mat-mdc-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mdc-text-button-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-button.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-button:has(.material-icons,mat-icon,[matButtonIcon]){padding:0 var(--mat-text-button-with-icon-horizontal-padding, 16px)}.mat-mdc-button>.mat-icon{margin-right:var(--mat-text-button-icon-spacing, 8px);margin-left:var(--mat-text-button-icon-offset, -4px)}[dir=rtl] .mat-mdc-button>.mat-icon{margin-right:var(--mat-text-button-icon-offset, -4px);margin-left:var(--mat-text-button-icon-spacing, 8px)}.mat-mdc-button .mdc-button__label+.mat-icon{margin-right:var(--mat-text-button-icon-offset, -4px);margin-left:var(--mat-text-button-icon-spacing, 8px)}[dir=rtl] .mat-mdc-button .mdc-button__label+.mat-icon{margin-right:var(--mat-text-button-icon-spacing, 8px);margin-left:var(--mat-text-button-icon-offset, -4px)}.mat-mdc-button .mat-ripple-element{background-color:var(--mat-text-button-ripple-color, color-mix(in srgb, var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-button .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-text-button-state-layer-color, var(--mat-sys-primary))}.mat-mdc-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-text-button-disabled-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-button:hover .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-text-button-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-button.mat-mdc-button-disabled-interactive:focus .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-text-button-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-button:active .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-text-button-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-button .mat-mdc-button-touch-target{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%);display:var(--mat-text-button-touch-target-display, block)}.mat-mdc-unelevated-button{transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);height:var(--mdc-filled-button-container-height, 40px);font-family:var(--mdc-filled-button-label-text-font, var(--mat-sys-label-large-font));font-size:var(--mdc-filled-button-label-text-size, var(--mat-sys-label-large-size));letter-spacing:var(--mdc-filled-button-label-text-tracking, var(--mat-sys-label-large-tracking));text-transform:var(--mdc-filled-button-label-text-transform);font-weight:var(--mdc-filled-button-label-text-weight, var(--mat-sys-label-large-weight));padding:0 var(--mat-filled-button-horizontal-padding, 24px)}.mat-mdc-unelevated-button>.mat-icon{margin-right:var(--mat-filled-button-icon-spacing, 8px);margin-left:var(--mat-filled-button-icon-offset, -8px)}[dir=rtl] .mat-mdc-unelevated-button>.mat-icon{margin-right:var(--mat-filled-button-icon-offset, -8px);margin-left:var(--mat-filled-button-icon-spacing, 8px)}.mat-mdc-unelevated-button .mdc-button__label+.mat-icon{margin-right:var(--mat-filled-button-icon-offset, -8px);margin-left:var(--mat-filled-button-icon-spacing, 8px)}[dir=rtl] .mat-mdc-unelevated-button .mdc-button__label+.mat-icon{margin-right:var(--mat-filled-button-icon-spacing, 8px);margin-left:var(--mat-filled-button-icon-offset, -8px)}.mat-mdc-unelevated-button .mat-ripple-element{background-color:var(--mat-filled-button-ripple-color, color-mix(in srgb, var(--mat-sys-on-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-filled-button-state-layer-color, var(--mat-sys-on-primary))}.mat-mdc-unelevated-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-filled-button-disabled-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-unelevated-button:hover .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-filled-button-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-unelevated-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-unelevated-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-unelevated-button.mat-mdc-button-disabled-interactive:focus .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-filled-button-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-unelevated-button:active .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-filled-button-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-unelevated-button .mat-mdc-button-touch-target{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%);display:var(--mat-filled-button-touch-target-display, block)}.mat-mdc-unelevated-button:not(:disabled){color:var(--mdc-filled-button-label-text-color, var(--mat-sys-on-primary));background-color:var(--mdc-filled-button-container-color, var(--mat-sys-primary))}.mat-mdc-unelevated-button,.mat-mdc-unelevated-button .mdc-button__ripple{border-radius:var(--mdc-filled-button-container-shape, var(--mat-sys-corner-full))}.mat-mdc-unelevated-button[disabled],.mat-mdc-unelevated-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mdc-filled-button-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));background-color:var(--mdc-filled-button-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent))}.mat-mdc-unelevated-button.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-raised-button{transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);box-shadow:var(--mdc-protected-button-container-elevation-shadow, var(--mat-sys-level1));height:var(--mdc-protected-button-container-height, 40px);font-family:var(--mdc-protected-button-label-text-font, var(--mat-sys-label-large-font));font-size:var(--mdc-protected-button-label-text-size, var(--mat-sys-label-large-size));letter-spacing:var(--mdc-protected-button-label-text-tracking, var(--mat-sys-label-large-tracking));text-transform:var(--mdc-protected-button-label-text-transform);font-weight:var(--mdc-protected-button-label-text-weight, var(--mat-sys-label-large-weight));padding:0 var(--mat-protected-button-horizontal-padding, 24px)}.mat-mdc-raised-button>.mat-icon{margin-right:var(--mat-protected-button-icon-spacing, 8px);margin-left:var(--mat-protected-button-icon-offset, -8px)}[dir=rtl] .mat-mdc-raised-button>.mat-icon{margin-right:var(--mat-protected-button-icon-offset, -8px);margin-left:var(--mat-protected-button-icon-spacing, 8px)}.mat-mdc-raised-button .mdc-button__label+.mat-icon{margin-right:var(--mat-protected-button-icon-offset, -8px);margin-left:var(--mat-protected-button-icon-spacing, 8px)}[dir=rtl] .mat-mdc-raised-button .mdc-button__label+.mat-icon{margin-right:var(--mat-protected-button-icon-spacing, 8px);margin-left:var(--mat-protected-button-icon-offset, -8px)}.mat-mdc-raised-button .mat-ripple-element{background-color:var(--mat-protected-button-ripple-color, color-mix(in srgb, var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-protected-button-state-layer-color, var(--mat-sys-primary))}.mat-mdc-raised-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-protected-button-disabled-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-raised-button:hover .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-protected-button-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-raised-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-raised-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-raised-button.mat-mdc-button-disabled-interactive:focus .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-protected-button-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-raised-button:active .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-protected-button-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-raised-button .mat-mdc-button-touch-target{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%);display:var(--mat-protected-button-touch-target-display, block)}.mat-mdc-raised-button:not(:disabled){color:var(--mdc-protected-button-label-text-color, var(--mat-sys-primary));background-color:var(--mdc-protected-button-container-color, var(--mat-sys-surface))}.mat-mdc-raised-button,.mat-mdc-raised-button .mdc-button__ripple{border-radius:var(--mdc-protected-button-container-shape, var(--mat-sys-corner-full))}.mat-mdc-raised-button:hover{box-shadow:var(--mdc-protected-button-hover-container-elevation-shadow, var(--mat-sys-level2))}.mat-mdc-raised-button:focus{box-shadow:var(--mdc-protected-button-focus-container-elevation-shadow, var(--mat-sys-level1))}.mat-mdc-raised-button:active,.mat-mdc-raised-button:focus:active{box-shadow:var(--mdc-protected-button-pressed-container-elevation-shadow, var(--mat-sys-level1))}.mat-mdc-raised-button[disabled],.mat-mdc-raised-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mdc-protected-button-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));background-color:var(--mdc-protected-button-disabled-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent))}.mat-mdc-raised-button[disabled].mat-mdc-button-disabled,.mat-mdc-raised-button.mat-mdc-button-disabled.mat-mdc-button-disabled{box-shadow:var(--mdc-protected-button-disabled-container-elevation-shadow, var(--mat-sys-level0))}.mat-mdc-raised-button.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-outlined-button{border-style:solid;transition:border 280ms cubic-bezier(0.4, 0, 0.2, 1);height:var(--mdc-outlined-button-container-height, 40px);font-family:var(--mdc-outlined-button-label-text-font, var(--mat-sys-label-large-font));font-size:var(--mdc-outlined-button-label-text-size, var(--mat-sys-label-large-size));letter-spacing:var(--mdc-outlined-button-label-text-tracking, var(--mat-sys-label-large-tracking));text-transform:var(--mdc-outlined-button-label-text-transform);font-weight:var(--mdc-outlined-button-label-text-weight, var(--mat-sys-label-large-weight));border-radius:var(--mdc-outlined-button-container-shape, var(--mat-sys-corner-full));border-width:var(--mdc-outlined-button-outline-width, 1px);padding:0 var(--mat-outlined-button-horizontal-padding, 24px)}.mat-mdc-outlined-button>.mat-icon{margin-right:var(--mat-outlined-button-icon-spacing, 8px);margin-left:var(--mat-outlined-button-icon-offset, -8px)}[dir=rtl] .mat-mdc-outlined-button>.mat-icon{margin-right:var(--mat-outlined-button-icon-offset, -8px);margin-left:var(--mat-outlined-button-icon-spacing, 8px)}.mat-mdc-outlined-button .mdc-button__label+.mat-icon{margin-right:var(--mat-outlined-button-icon-offset, -8px);margin-left:var(--mat-outlined-button-icon-spacing, 8px)}[dir=rtl] .mat-mdc-outlined-button .mdc-button__label+.mat-icon{margin-right:var(--mat-outlined-button-icon-spacing, 8px);margin-left:var(--mat-outlined-button-icon-offset, -8px)}.mat-mdc-outlined-button .mat-ripple-element{background-color:var(--mat-outlined-button-ripple-color, color-mix(in srgb, var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-outlined-button-state-layer-color, var(--mat-sys-primary))}.mat-mdc-outlined-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-outlined-button-disabled-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-outlined-button:hover .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-outlined-button-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-outlined-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-outlined-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-outlined-button.mat-mdc-button-disabled-interactive:focus .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-outlined-button-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-outlined-button:active .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-outlined-button-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-outlined-button .mat-mdc-button-touch-target{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%);display:var(--mat-outlined-button-touch-target-display, block)}.mat-mdc-outlined-button:not(:disabled){color:var(--mdc-outlined-button-label-text-color, var(--mat-sys-primary));border-color:var(--mdc-outlined-button-outline-color, var(--mat-sys-outline))}.mat-mdc-outlined-button[disabled],.mat-mdc-outlined-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mdc-outlined-button-disabled-label-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));border-color:var(--mdc-outlined-button-disabled-outline-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent))}.mat-mdc-outlined-button.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-outlined-button .mdc-button__ripple{border-width:var(--mdc-outlined-button-outline-width, 1px);border-style:solid;border-color:rgba(0,0,0,0)}.mat-mdc-button,.mat-mdc-unelevated-button,.mat-mdc-raised-button,.mat-mdc-outlined-button{-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-button .mat-mdc-button-ripple,.mat-mdc-button .mat-mdc-button-persistent-ripple,.mat-mdc-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-unelevated-button .mat-mdc-button-ripple,.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple,.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-raised-button .mat-mdc-button-ripple,.mat-mdc-raised-button .mat-mdc-button-persistent-ripple,.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-outlined-button .mat-mdc-button-ripple,.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple,.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-button .mat-mdc-button-ripple,.mat-mdc-unelevated-button .mat-mdc-button-ripple,.mat-mdc-raised-button .mat-mdc-button-ripple,.mat-mdc-outlined-button .mat-mdc-button-ripple{overflow:hidden}.mat-mdc-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before,.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before{content:\\\"\\\";opacity:0}.mat-mdc-button .mdc-button__label,.mat-mdc-button .mat-icon,.mat-mdc-unelevated-button .mdc-button__label,.mat-mdc-unelevated-button .mat-icon,.mat-mdc-raised-button .mdc-button__label,.mat-mdc-raised-button .mat-icon,.mat-mdc-outlined-button .mdc-button__label,.mat-mdc-outlined-button .mat-icon{z-index:1;position:relative}.mat-mdc-button .mat-focus-indicator,.mat-mdc-unelevated-button .mat-focus-indicator,.mat-mdc-raised-button .mat-focus-indicator,.mat-mdc-outlined-button .mat-focus-indicator{top:0;left:0;right:0;bottom:0;position:absolute}.mat-mdc-button:focus .mat-focus-indicator::before,.mat-mdc-unelevated-button:focus .mat-focus-indicator::before,.mat-mdc-raised-button:focus .mat-focus-indicator::before,.mat-mdc-outlined-button:focus .mat-focus-indicator::before{content:\\\"\\\"}.mat-mdc-button._mat-animation-noopable,.mat-mdc-unelevated-button._mat-animation-noopable,.mat-mdc-raised-button._mat-animation-noopable,.mat-mdc-outlined-button._mat-animation-noopable{transition:none !important;animation:none !important}.mat-mdc-button>.mat-icon,.mat-mdc-unelevated-button>.mat-icon,.mat-mdc-raised-button>.mat-icon,.mat-mdc-outlined-button>.mat-icon{display:inline-block;position:relative;vertical-align:top;font-size:1.125rem;height:1.125rem;width:1.125rem}.mat-mdc-outlined-button .mat-mdc-button-ripple,.mat-mdc-outlined-button .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px}.mat-mdc-unelevated-button .mat-focus-indicator::before,.mat-mdc-raised-button .mat-focus-indicator::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px)*-1)}.mat-mdc-outlined-button .mat-focus-indicator::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 3px)*-1)}\", \"@media(forced-colors: active){.mat-mdc-button:not(.mdc-button--outlined),.mat-mdc-unelevated-button:not(.mdc-button--outlined),.mat-mdc-raised-button:not(.mdc-button--outlined),.mat-mdc-outlined-button:not(.mdc-button--outlined),.mat-mdc-icon-button.mat-mdc-icon-button{outline:solid 1px}}\"],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatButton;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Material Design button component for anchor elements. Anchor elements are used to provide\n * links for the user to navigate across different routes or pages.\n * See https://material.io/components/buttons\n *\n * The `MatAnchor` class applies to native anchor elements and captures the appearances for\n * \"text button\", \"outlined button\", and \"contained button\" per the Material Design\n * specification. `MatAnchor` additionally captures an additional \"flat\" appearance, which matches\n * \"contained\" but without elevation.\n */\nlet MatAnchor = /*#__PURE__*/(() => {\n class MatAnchor extends MatAnchorBase {\n static ɵfac = /* @__PURE__ */(() => {\n let ɵMatAnchor_BaseFactory;\n return function MatAnchor_Factory(__ngFactoryType__) {\n return (ɵMatAnchor_BaseFactory || (ɵMatAnchor_BaseFactory = i0.ɵɵgetInheritedFactory(MatAnchor)))(__ngFactoryType__ || MatAnchor);\n };\n })();\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatAnchor,\n selectors: [[\"a\", \"mat-button\", \"\"], [\"a\", \"mat-raised-button\", \"\"], [\"a\", \"mat-flat-button\", \"\"], [\"a\", \"mat-stroked-button\", \"\"]],\n hostVars: 15,\n hostBindings: function MatAnchor_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵattribute(\"disabled\", ctx._getDisabledAttribute())(\"tabindex\", ctx.disabled && !ctx.disabledInteractive ? -1 : ctx.tabIndex)(\"aria-disabled\", ctx._getAriaDisabled());\n i0.ɵɵclassMap(ctx.color ? \"mat-\" + ctx.color : \"\");\n i0.ɵɵclassProp(\"mat-mdc-button-disabled\", ctx.disabled)(\"mat-mdc-button-disabled-interactive\", ctx.disabledInteractive)(\"_mat-animation-noopable\", ctx._animationMode === \"NoopAnimations\")(\"mat-unthemed\", !ctx.color)(\"mat-mdc-button-base\", true);\n }\n },\n exportAs: [\"matButton\", \"matAnchor\"],\n features: [i0.ɵɵInheritDefinitionFeature],\n attrs: _c0,\n ngContentSelectors: _c2,\n decls: 7,\n vars: 4,\n consts: [[1, \"mat-mdc-button-persistent-ripple\"], [1, \"mdc-button__label\"], [1, \"mat-focus-indicator\"], [1, \"mat-mdc-button-touch-target\"]],\n template: function MatAnchor_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef(_c1);\n i0.ɵɵelement(0, \"span\", 0);\n i0.ɵɵprojection(1);\n i0.ɵɵelementStart(2, \"span\", 1);\n i0.ɵɵprojection(3, 1);\n i0.ɵɵelementEnd();\n i0.ɵɵprojection(4, 2);\n i0.ɵɵelement(5, \"span\", 2)(6, \"span\", 3);\n }\n if (rf & 2) {\n i0.ɵɵclassProp(\"mdc-button__ripple\", !ctx._isFab)(\"mdc-fab__ripple\", ctx._isFab);\n }\n },\n styles: [_c3, _c4],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatAnchor;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Injection token to be used to override the default options for FAB. */\nconst MAT_FAB_DEFAULT_OPTIONS = /*#__PURE__*/new InjectionToken('mat-mdc-fab-default-options', {\n providedIn: 'root',\n factory: MAT_FAB_DEFAULT_OPTIONS_FACTORY\n});\n/** @docs-private */\nfunction MAT_FAB_DEFAULT_OPTIONS_FACTORY() {\n return {\n // The FAB by default has its color set to accent.\n color: 'accent'\n };\n}\n// Default FAB configuration.\nconst defaults = /*#__PURE__*/MAT_FAB_DEFAULT_OPTIONS_FACTORY();\n/**\n * Material Design floating action button (FAB) component. These buttons represent the primary\n * or most common action for users to interact with.\n * See https://material.io/components/buttons-floating-action-button/\n *\n * The `MatFabButton` class has two appearances: normal and extended.\n */\nlet MatFabButton = /*#__PURE__*/(() => {\n class MatFabButton extends MatButtonBase {\n _options = inject(MAT_FAB_DEFAULT_OPTIONS, {\n optional: true\n });\n _isFab = true;\n extended;\n constructor() {\n super();\n this._options = this._options || defaults;\n this.color = this._options.color || defaults.color;\n }\n static ɵfac = function MatFabButton_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatFabButton)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatFabButton,\n selectors: [[\"button\", \"mat-fab\", \"\"]],\n hostVars: 18,\n hostBindings: function MatFabButton_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵattribute(\"disabled\", ctx._getDisabledAttribute())(\"aria-disabled\", ctx._getAriaDisabled());\n i0.ɵɵclassMap(ctx.color ? \"mat-\" + ctx.color : \"\");\n i0.ɵɵclassProp(\"mat-mdc-button-disabled\", ctx.disabled)(\"mat-mdc-button-disabled-interactive\", ctx.disabledInteractive)(\"_mat-animation-noopable\", ctx._animationMode === \"NoopAnimations\")(\"mat-unthemed\", !ctx.color)(\"mat-mdc-button-base\", true)(\"mdc-fab--extended\", ctx.extended)(\"mat-mdc-extended-fab\", ctx.extended);\n }\n },\n inputs: {\n extended: [2, \"extended\", \"extended\", booleanAttribute]\n },\n exportAs: [\"matButton\"],\n features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature],\n attrs: _c5,\n ngContentSelectors: _c2,\n decls: 7,\n vars: 4,\n consts: [[1, \"mat-mdc-button-persistent-ripple\"], [1, \"mdc-button__label\"], [1, \"mat-focus-indicator\"], [1, \"mat-mdc-button-touch-target\"]],\n template: function MatFabButton_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef(_c1);\n i0.ɵɵelement(0, \"span\", 0);\n i0.ɵɵprojection(1);\n i0.ɵɵelementStart(2, \"span\", 1);\n i0.ɵɵprojection(3, 1);\n i0.ɵɵelementEnd();\n i0.ɵɵprojection(4, 2);\n i0.ɵɵelement(5, \"span\", 2)(6, \"span\", 3);\n }\n if (rf & 2) {\n i0.ɵɵclassProp(\"mdc-button__ripple\", !ctx._isFab)(\"mdc-fab__ripple\", ctx._isFab);\n }\n },\n styles: [\".mat-mdc-fab-base{-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:56px;height:56px;padding:0;border:none;fill:currentColor;text-decoration:none;cursor:pointer;-moz-appearance:none;-webkit-appearance:none;overflow:visible;transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),opacity 15ms linear 30ms,transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);flex-shrink:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-fab-base .mat-mdc-button-ripple,.mat-mdc-fab-base .mat-mdc-button-persistent-ripple,.mat-mdc-fab-base .mat-mdc-button-persistent-ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-fab-base .mat-mdc-button-ripple{overflow:hidden}.mat-mdc-fab-base .mat-mdc-button-persistent-ripple::before{content:\\\"\\\";opacity:0}.mat-mdc-fab-base .mdc-button__label,.mat-mdc-fab-base .mat-icon{z-index:1;position:relative}.mat-mdc-fab-base .mat-focus-indicator{top:0;left:0;right:0;bottom:0;position:absolute}.mat-mdc-fab-base:focus .mat-focus-indicator::before{content:\\\"\\\"}.mat-mdc-fab-base._mat-animation-noopable{transition:none !important;animation:none !important}.mat-mdc-fab-base::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\\\"\\\";pointer-events:none}.mat-mdc-fab-base[hidden]{display:none}.mat-mdc-fab-base::-moz-focus-inner{padding:0;border:0}.mat-mdc-fab-base:active,.mat-mdc-fab-base:focus{outline:none}.mat-mdc-fab-base:hover{cursor:pointer}.mat-mdc-fab-base>svg{width:100%}.mat-mdc-fab-base .mat-icon,.mat-mdc-fab-base .material-icons{transition:transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);fill:currentColor;will-change:transform}.mat-mdc-fab-base .mat-focus-indicator::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 2px)*-1)}.mat-mdc-fab-base[disabled],.mat-mdc-fab-base.mat-mdc-button-disabled{cursor:default;pointer-events:none}.mat-mdc-fab-base[disabled],.mat-mdc-fab-base[disabled]:focus,.mat-mdc-fab-base.mat-mdc-button-disabled,.mat-mdc-fab-base.mat-mdc-button-disabled:focus{box-shadow:none}.mat-mdc-fab-base.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-fab{background-color:var(--mdc-fab-container-color, var(--mat-sys-primary-container));border-radius:var(--mdc-fab-container-shape, var(--mat-sys-corner-large));color:var(--mat-fab-foreground-color, var(--mat-sys-on-primary-container, inherit));box-shadow:var(--mdc-fab-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-fab:hover{box-shadow:var(--mdc-fab-hover-container-elevation-shadow, var(--mat-sys-level4))}.mat-mdc-fab:focus{box-shadow:var(--mdc-fab-focus-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-fab:active,.mat-mdc-fab:focus:active{box-shadow:var(--mdc-fab-pressed-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-fab[disabled],.mat-mdc-fab.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mat-fab-disabled-state-foreground-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));background-color:var(--mat-fab-disabled-state-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent))}.mat-mdc-fab.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-fab .mat-mdc-button-touch-target{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%);display:var(--mat-fab-touch-target-display, block)}.mat-mdc-fab .mat-ripple-element{background-color:var(--mat-fab-ripple-color, color-mix(in srgb, var(--mat-sys-on-primary-container) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-fab .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-fab-state-layer-color, var(--mat-sys-on-primary-container))}.mat-mdc-fab.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-fab-disabled-state-layer-color)}.mat-mdc-fab:hover .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-fab-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-fab.cdk-program-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-fab.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-fab.mat-mdc-button-disabled-interactive:focus .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-fab-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-fab:active .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-fab-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-mini-fab{width:40px;height:40px;background-color:var(--mdc-fab-small-container-color, var(--mat-sys-primary-container));border-radius:var(--mdc-fab-small-container-shape, var(--mat-sys-corner-medium));color:var(--mat-fab-small-foreground-color, var(--mat-sys-on-primary-container, inherit));box-shadow:var(--mdc-fab-small-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-mini-fab:hover{box-shadow:var(--mdc-fab-small-hover-container-elevation-shadow, var(--mat-sys-level4))}.mat-mdc-mini-fab:focus{box-shadow:var(--mdc-fab-small-focus-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-mini-fab:active,.mat-mdc-mini-fab:focus:active{box-shadow:var(--mdc-fab-small-pressed-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-mini-fab[disabled],.mat-mdc-mini-fab.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mat-fab-small-disabled-state-foreground-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));background-color:var(--mat-fab-small-disabled-state-container-color, color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent))}.mat-mdc-mini-fab.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-mini-fab .mat-mdc-button-touch-target{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%);display:var(--mat-fab-small-touch-target-display)}.mat-mdc-mini-fab .mat-ripple-element{background-color:var(--mat-fab-small-ripple-color, color-mix(in srgb, var(--mat-sys-on-primary-container) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-mini-fab .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-fab-small-state-layer-color, var(--mat-sys-on-primary-container))}.mat-mdc-mini-fab.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-fab-small-disabled-state-layer-color)}.mat-mdc-mini-fab:hover .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-fab-small-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-mini-fab.cdk-program-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-mini-fab.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-mini-fab.mat-mdc-button-disabled-interactive:focus .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-fab-small-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-mini-fab:active .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-fab-small-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-extended-fab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;border-radius:24px;padding-left:20px;padding-right:20px;width:auto;max-width:100%;line-height:normal;height:var(--mdc-extended-fab-container-height, 56px);border-radius:var(--mdc-extended-fab-container-shape, var(--mat-sys-corner-large));font-family:var(--mdc-extended-fab-label-text-font, var(--mat-sys-label-large-font));font-size:var(--mdc-extended-fab-label-text-size, var(--mat-sys-label-large-size));font-weight:var(--mdc-extended-fab-label-text-weight, var(--mat-sys-label-large-weight));letter-spacing:var(--mdc-extended-fab-label-text-tracking, var(--mat-sys-label-large-tracking));box-shadow:var(--mdc-extended-fab-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-extended-fab:hover{box-shadow:var(--mdc-extended-fab-hover-container-elevation-shadow, var(--mat-sys-level4))}.mat-mdc-extended-fab:focus{box-shadow:var(--mdc-extended-fab-focus-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-extended-fab:active,.mat-mdc-extended-fab:focus:active{box-shadow:var(--mdc-extended-fab-pressed-container-elevation-shadow, var(--mat-sys-level3))}.mat-mdc-extended-fab[disabled],.mat-mdc-extended-fab.mat-mdc-button-disabled{cursor:default;pointer-events:none}.mat-mdc-extended-fab[disabled],.mat-mdc-extended-fab[disabled]:focus,.mat-mdc-extended-fab.mat-mdc-button-disabled,.mat-mdc-extended-fab.mat-mdc-button-disabled:focus{box-shadow:none}.mat-mdc-extended-fab.mat-mdc-button-disabled-interactive{pointer-events:auto}[dir=rtl] .mat-mdc-extended-fab .mdc-button__label+.mat-icon,[dir=rtl] .mat-mdc-extended-fab .mdc-button__label+.material-icons,.mat-mdc-extended-fab>.mat-icon,.mat-mdc-extended-fab>.material-icons{margin-left:-8px;margin-right:12px}.mat-mdc-extended-fab .mdc-button__label+.mat-icon,.mat-mdc-extended-fab .mdc-button__label+.material-icons,[dir=rtl] .mat-mdc-extended-fab>.mat-icon,[dir=rtl] .mat-mdc-extended-fab>.material-icons{margin-left:12px;margin-right:-8px}.mat-mdc-extended-fab .mat-mdc-button-touch-target{width:100%}\"],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatFabButton;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Material Design mini floating action button (FAB) component. These buttons represent the primary\n * or most common action for users to interact with.\n * See https://material.io/components/buttons-floating-action-button/\n */\nlet MatMiniFabButton = /*#__PURE__*/(() => {\n class MatMiniFabButton extends MatButtonBase {\n _options = inject(MAT_FAB_DEFAULT_OPTIONS, {\n optional: true\n });\n _isFab = true;\n constructor() {\n super();\n this._options = this._options || defaults;\n this.color = this._options.color || defaults.color;\n }\n static ɵfac = function MatMiniFabButton_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatMiniFabButton)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatMiniFabButton,\n selectors: [[\"button\", \"mat-mini-fab\", \"\"]],\n hostVars: 14,\n hostBindings: function MatMiniFabButton_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵattribute(\"disabled\", ctx._getDisabledAttribute())(\"aria-disabled\", ctx._getAriaDisabled());\n i0.ɵɵclassMap(ctx.color ? \"mat-\" + ctx.color : \"\");\n i0.ɵɵclassProp(\"mat-mdc-button-disabled\", ctx.disabled)(\"mat-mdc-button-disabled-interactive\", ctx.disabledInteractive)(\"_mat-animation-noopable\", ctx._animationMode === \"NoopAnimations\")(\"mat-unthemed\", !ctx.color)(\"mat-mdc-button-base\", true);\n }\n },\n exportAs: [\"matButton\"],\n features: [i0.ɵɵInheritDefinitionFeature],\n attrs: _c6,\n ngContentSelectors: _c2,\n decls: 7,\n vars: 4,\n consts: [[1, \"mat-mdc-button-persistent-ripple\"], [1, \"mdc-button__label\"], [1, \"mat-focus-indicator\"], [1, \"mat-mdc-button-touch-target\"]],\n template: function MatMiniFabButton_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef(_c1);\n i0.ɵɵelement(0, \"span\", 0);\n i0.ɵɵprojection(1);\n i0.ɵɵelementStart(2, \"span\", 1);\n i0.ɵɵprojection(3, 1);\n i0.ɵɵelementEnd();\n i0.ɵɵprojection(4, 2);\n i0.ɵɵelement(5, \"span\", 2)(6, \"span\", 3);\n }\n if (rf & 2) {\n i0.ɵɵclassProp(\"mdc-button__ripple\", !ctx._isFab)(\"mdc-fab__ripple\", ctx._isFab);\n }\n },\n styles: [_c7],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatMiniFabButton;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Material Design floating action button (FAB) component for anchor elements. Anchor elements\n * are used to provide links for the user to navigate across different routes or pages.\n * See https://material.io/components/buttons-floating-action-button/\n *\n * The `MatFabAnchor` class has two appearances: normal and extended.\n */\nlet MatFabAnchor = /*#__PURE__*/(() => {\n class MatFabAnchor extends MatAnchor {\n _options = inject(MAT_FAB_DEFAULT_OPTIONS, {\n optional: true\n });\n _isFab = true;\n extended;\n constructor() {\n super();\n this._options = this._options || defaults;\n this.color = this._options.color || defaults.color;\n }\n static ɵfac = function MatFabAnchor_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatFabAnchor)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatFabAnchor,\n selectors: [[\"a\", \"mat-fab\", \"\"]],\n hostVars: 19,\n hostBindings: function MatFabAnchor_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵattribute(\"disabled\", ctx._getDisabledAttribute())(\"tabindex\", ctx.disabled && !ctx.disabledInteractive ? -1 : ctx.tabIndex)(\"aria-disabled\", ctx._getAriaDisabled());\n i0.ɵɵclassMap(ctx.color ? \"mat-\" + ctx.color : \"\");\n i0.ɵɵclassProp(\"mat-mdc-button-disabled\", ctx.disabled)(\"mat-mdc-button-disabled-interactive\", ctx.disabledInteractive)(\"_mat-animation-noopable\", ctx._animationMode === \"NoopAnimations\")(\"mat-unthemed\", !ctx.color)(\"mat-mdc-button-base\", true)(\"mdc-fab--extended\", ctx.extended)(\"mat-mdc-extended-fab\", ctx.extended);\n }\n },\n inputs: {\n extended: [2, \"extended\", \"extended\", booleanAttribute]\n },\n exportAs: [\"matButton\", \"matAnchor\"],\n features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature],\n attrs: _c5,\n ngContentSelectors: _c2,\n decls: 7,\n vars: 4,\n consts: [[1, \"mat-mdc-button-persistent-ripple\"], [1, \"mdc-button__label\"], [1, \"mat-focus-indicator\"], [1, \"mat-mdc-button-touch-target\"]],\n template: function MatFabAnchor_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef(_c1);\n i0.ɵɵelement(0, \"span\", 0);\n i0.ɵɵprojection(1);\n i0.ɵɵelementStart(2, \"span\", 1);\n i0.ɵɵprojection(3, 1);\n i0.ɵɵelementEnd();\n i0.ɵɵprojection(4, 2);\n i0.ɵɵelement(5, \"span\", 2)(6, \"span\", 3);\n }\n if (rf & 2) {\n i0.ɵɵclassProp(\"mdc-button__ripple\", !ctx._isFab)(\"mdc-fab__ripple\", ctx._isFab);\n }\n },\n styles: [_c7],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatFabAnchor;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Material Design mini floating action button (FAB) component for anchor elements. Anchor elements\n * are used to provide links for the user to navigate across different routes or pages.\n * See https://material.io/components/buttons-floating-action-button/\n */\nlet MatMiniFabAnchor = /*#__PURE__*/(() => {\n class MatMiniFabAnchor extends MatAnchor {\n _options = inject(MAT_FAB_DEFAULT_OPTIONS, {\n optional: true\n });\n _isFab = true;\n constructor() {\n super();\n this._options = this._options || defaults;\n this.color = this._options.color || defaults.color;\n }\n static ɵfac = function MatMiniFabAnchor_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatMiniFabAnchor)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatMiniFabAnchor,\n selectors: [[\"a\", \"mat-mini-fab\", \"\"]],\n hostVars: 15,\n hostBindings: function MatMiniFabAnchor_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵattribute(\"disabled\", ctx._getDisabledAttribute())(\"tabindex\", ctx.disabled && !ctx.disabledInteractive ? -1 : ctx.tabIndex)(\"aria-disabled\", ctx._getAriaDisabled());\n i0.ɵɵclassMap(ctx.color ? \"mat-\" + ctx.color : \"\");\n i0.ɵɵclassProp(\"mat-mdc-button-disabled\", ctx.disabled)(\"mat-mdc-button-disabled-interactive\", ctx.disabledInteractive)(\"_mat-animation-noopable\", ctx._animationMode === \"NoopAnimations\")(\"mat-unthemed\", !ctx.color)(\"mat-mdc-button-base\", true);\n }\n },\n exportAs: [\"matButton\", \"matAnchor\"],\n features: [i0.ɵɵInheritDefinitionFeature],\n attrs: _c6,\n ngContentSelectors: _c2,\n decls: 7,\n vars: 4,\n consts: [[1, \"mat-mdc-button-persistent-ripple\"], [1, \"mdc-button__label\"], [1, \"mat-focus-indicator\"], [1, \"mat-mdc-button-touch-target\"]],\n template: function MatMiniFabAnchor_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef(_c1);\n i0.ɵɵelement(0, \"span\", 0);\n i0.ɵɵprojection(1);\n i0.ɵɵelementStart(2, \"span\", 1);\n i0.ɵɵprojection(3, 1);\n i0.ɵɵelementEnd();\n i0.ɵɵprojection(4, 2);\n i0.ɵɵelement(5, \"span\", 2)(6, \"span\", 3);\n }\n if (rf & 2) {\n i0.ɵɵclassProp(\"mdc-button__ripple\", !ctx._isFab)(\"mdc-fab__ripple\", ctx._isFab);\n }\n },\n styles: [_c7],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatMiniFabAnchor;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Material Design icon button component. This type of button displays a single interactive icon for\n * users to perform an action.\n * See https://material.io/develop/web/components/buttons/icon-buttons/\n */\nlet MatIconButton = /*#__PURE__*/(() => {\n class MatIconButton extends MatButtonBase {\n constructor() {\n super();\n this._rippleLoader.configureRipple(this._elementRef.nativeElement, {\n centered: true\n });\n }\n static ɵfac = function MatIconButton_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatIconButton)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatIconButton,\n selectors: [[\"button\", \"mat-icon-button\", \"\"]],\n hostVars: 14,\n hostBindings: function MatIconButton_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵattribute(\"disabled\", ctx._getDisabledAttribute())(\"aria-disabled\", ctx._getAriaDisabled());\n i0.ɵɵclassMap(ctx.color ? \"mat-\" + ctx.color : \"\");\n i0.ɵɵclassProp(\"mat-mdc-button-disabled\", ctx.disabled)(\"mat-mdc-button-disabled-interactive\", ctx.disabledInteractive)(\"_mat-animation-noopable\", ctx._animationMode === \"NoopAnimations\")(\"mat-unthemed\", !ctx.color)(\"mat-mdc-button-base\", true);\n }\n },\n exportAs: [\"matButton\"],\n features: [i0.ɵɵInheritDefinitionFeature],\n attrs: _c8,\n ngContentSelectors: _c9,\n decls: 4,\n vars: 0,\n consts: [[1, \"mat-mdc-button-persistent-ripple\", \"mdc-icon-button__ripple\"], [1, \"mat-focus-indicator\"], [1, \"mat-mdc-button-touch-target\"]],\n template: function MatIconButton_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef();\n i0.ɵɵelement(0, \"span\", 0);\n i0.ɵɵprojection(1);\n i0.ɵɵelement(2, \"span\", 1)(3, \"span\", 2);\n }\n },\n styles: [\".mat-mdc-icon-button{-webkit-user-select:none;user-select:none;display:inline-block;position:relative;box-sizing:border-box;border:none;outline:none;background-color:rgba(0,0,0,0);fill:currentColor;color:inherit;text-decoration:none;cursor:pointer;z-index:0;overflow:visible;border-radius:50%;flex-shrink:0;text-align:center;width:var(--mdc-icon-button-state-layer-size, 40px);height:var(--mdc-icon-button-state-layer-size, 40px);padding:calc(calc(var(--mdc-icon-button-state-layer-size, 40px) - var(--mdc-icon-button-icon-size, 24px)) / 2);font-size:var(--mdc-icon-button-icon-size, 24px);color:var(--mdc-icon-button-icon-color, var(--mat-sys-on-surface-variant));-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-icon-button .mat-mdc-button-ripple,.mat-mdc-icon-button .mat-mdc-button-persistent-ripple,.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-mdc-icon-button .mat-mdc-button-ripple{overflow:hidden}.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before{content:\\\"\\\";opacity:0}.mat-mdc-icon-button .mdc-button__label,.mat-mdc-icon-button .mat-icon{z-index:1;position:relative}.mat-mdc-icon-button .mat-focus-indicator{top:0;left:0;right:0;bottom:0;position:absolute}.mat-mdc-icon-button:focus .mat-focus-indicator::before{content:\\\"\\\"}.mat-mdc-icon-button .mat-ripple-element{background-color:var(--mat-icon-button-ripple-color, color-mix(in srgb, var(--mat-sys-on-surface-variant) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent))}.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-icon-button-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-icon-button.mat-mdc-button-disabled .mat-mdc-button-persistent-ripple::before{background-color:var(--mat-icon-button-disabled-state-layer-color, var(--mat-sys-on-surface-variant))}.mat-mdc-icon-button:hover .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-icon-button-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))}.mat-mdc-icon-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-icon-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before,.mat-mdc-icon-button.mat-mdc-button-disabled-interactive:focus .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-icon-button-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity))}.mat-mdc-icon-button:active .mat-mdc-button-persistent-ripple::before{opacity:var(--mat-icon-button-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity))}.mat-mdc-icon-button .mat-mdc-button-touch-target{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%);display:var(--mat-icon-button-touch-target-display, block)}.mat-mdc-icon-button._mat-animation-noopable{transition:none !important;animation:none !important}.mat-mdc-icon-button[disabled],.mat-mdc-icon-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mdc-icon-button-disabled-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-icon-button.mat-mdc-button-disabled-interactive{pointer-events:auto}.mat-mdc-icon-button img,.mat-mdc-icon-button svg{width:var(--mdc-icon-button-icon-size, 24px);height:var(--mdc-icon-button-icon-size, 24px);vertical-align:baseline}.mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:50%}.mat-mdc-icon-button[hidden]{display:none}.mat-mdc-icon-button.mat-unthemed:not(.mdc-ripple-upgraded):focus::before,.mat-mdc-icon-button.mat-primary:not(.mdc-ripple-upgraded):focus::before,.mat-mdc-icon-button.mat-accent:not(.mdc-ripple-upgraded):focus::before,.mat-mdc-icon-button.mat-warn:not(.mdc-ripple-upgraded):focus::before{background:rgba(0,0,0,0);opacity:1}\", _c4],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatIconButton;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Material Design icon button component for anchor elements. This button displays a single\n * interaction icon that allows users to navigate across different routes or pages.\n * See https://material.io/develop/web/components/buttons/icon-buttons/\n */\nlet MatIconAnchor = /*#__PURE__*/(() => {\n class MatIconAnchor extends MatAnchorBase {\n static ɵfac = /* @__PURE__ */(() => {\n let ɵMatIconAnchor_BaseFactory;\n return function MatIconAnchor_Factory(__ngFactoryType__) {\n return (ɵMatIconAnchor_BaseFactory || (ɵMatIconAnchor_BaseFactory = i0.ɵɵgetInheritedFactory(MatIconAnchor)))(__ngFactoryType__ || MatIconAnchor);\n };\n })();\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatIconAnchor,\n selectors: [[\"a\", \"mat-icon-button\", \"\"]],\n hostVars: 15,\n hostBindings: function MatIconAnchor_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵattribute(\"disabled\", ctx._getDisabledAttribute())(\"tabindex\", ctx.disabled && !ctx.disabledInteractive ? -1 : ctx.tabIndex)(\"aria-disabled\", ctx._getAriaDisabled());\n i0.ɵɵclassMap(ctx.color ? \"mat-\" + ctx.color : \"\");\n i0.ɵɵclassProp(\"mat-mdc-button-disabled\", ctx.disabled)(\"mat-mdc-button-disabled-interactive\", ctx.disabledInteractive)(\"_mat-animation-noopable\", ctx._animationMode === \"NoopAnimations\")(\"mat-unthemed\", !ctx.color)(\"mat-mdc-button-base\", true);\n }\n },\n exportAs: [\"matButton\", \"matAnchor\"],\n features: [i0.ɵɵInheritDefinitionFeature],\n attrs: _c8,\n ngContentSelectors: _c9,\n decls: 4,\n vars: 0,\n consts: [[1, \"mat-mdc-button-persistent-ripple\", \"mdc-icon-button__ripple\"], [1, \"mat-focus-indicator\"], [1, \"mat-mdc-button-touch-target\"]],\n template: function MatIconAnchor_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef();\n i0.ɵɵelement(0, \"span\", 0);\n i0.ɵɵprojection(1);\n i0.ɵɵelement(2, \"span\", 1)(3, \"span\", 2);\n }\n },\n styles: [_c10, _c4],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatIconAnchor;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet MatButtonModule = /*#__PURE__*/(() => {\n class MatButtonModule {\n static ɵfac = function MatButtonModule_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatButtonModule)();\n };\n static ɵmod = /* @__PURE__ */i0.ɵɵdefineNgModule({\n type: MatButtonModule\n });\n static ɵinj = /* @__PURE__ */i0.ɵɵdefineInjector({\n imports: [MatCommonModule, MatRippleModule, MatCommonModule]\n });\n }\n return MatButtonModule;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Generated bundle index. Do not edit.\n */\n\nexport { MAT_BUTTON_CONFIG, MAT_FAB_DEFAULT_OPTIONS, MAT_FAB_DEFAULT_OPTIONS_FACTORY, MatAnchor, MatButton, MatButtonModule, MatFabAnchor, MatFabButton, MatIconAnchor, MatIconButton, MatMiniFabAnchor, MatMiniFabButton };\n","import { _IdGenerator, CdkMonitorFocus, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';\nimport { Overlay, FlexibleConnectedPositionStrategy, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';\nimport { ComponentPortal, CdkPortalOutlet, TemplatePortal, PortalModule } from '@angular/cdk/portal';\nimport * as i0 from '@angular/core';\nimport { Injectable, inject, ElementRef, NgZone, EventEmitter, Injector, afterNextRender, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Optional, SkipSelf, InjectionToken, ChangeDetectorRef, ViewChild, ViewContainerRef, booleanAttribute, Directive, forwardRef, signal, HostAttributeToken, ContentChild, TemplateRef, NgModule } from '@angular/core';\nimport { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';\nimport { CdkScrollableModule } from '@angular/cdk/scrolling';\nimport * as i1 from '@angular/material/core';\nimport { _StructuralStylesLoader, DateAdapter, MAT_DATE_FORMATS, ErrorStateMatcher, _ErrorStateTracker, MatCommonModule } from '@angular/material/core';\nimport { Subject, Subscription, merge, of } from 'rxjs';\nimport { ESCAPE, hasModifierKey, SPACE, ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, BACKSPACE } from '@angular/cdk/keycodes';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { normalizePassiveListenerOptions, Platform, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';\nimport { NgClass, DOCUMENT } from '@angular/common';\nimport { _CdkPrivateStyleLoader, _VisuallyHiddenLoader } from '@angular/cdk/private';\nimport { startWith, take, filter } from 'rxjs/operators';\nimport { coerceStringArray } from '@angular/cdk/coercion';\nimport { trigger, transition, animate, keyframes, style, state } from '@angular/animations';\nimport { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, NgForm, FormGroupDirective, NgControl, ControlContainer } from '@angular/forms';\nimport { MAT_FORM_FIELD, MatFormFieldControl } from '@angular/material/form-field';\nimport { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';\n\n/** @docs-private */\nconst _c0 = [\"mat-calendar-body\", \"\"];\nfunction _forTrack0($index, $item) {\n return this._trackRow($item);\n}\nconst _forTrack1 = ($index, $item) => $item.id;\nfunction MatCalendarBody_Conditional_0_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"tr\", 0)(1, \"td\", 3);\n i0.ɵɵtext(2);\n i0.ɵɵelementEnd()();\n }\n if (rf & 2) {\n const ctx_r0 = i0.ɵɵnextContext();\n i0.ɵɵadvance();\n i0.ɵɵstyleProp(\"padding-top\", ctx_r0._cellPadding)(\"padding-bottom\", ctx_r0._cellPadding);\n i0.ɵɵattribute(\"colspan\", ctx_r0.numCols);\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate1(\" \", ctx_r0.label, \" \");\n }\n}\nfunction MatCalendarBody_For_2_Conditional_1_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"td\", 3);\n i0.ɵɵtext(1);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const ctx_r0 = i0.ɵɵnextContext(2);\n i0.ɵɵstyleProp(\"padding-top\", ctx_r0._cellPadding)(\"padding-bottom\", ctx_r0._cellPadding);\n i0.ɵɵattribute(\"colspan\", ctx_r0._firstRowOffset);\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate1(\" \", ctx_r0._firstRowOffset >= ctx_r0.labelMinRequiredCells ? ctx_r0.label : \"\", \" \");\n }\n}\nfunction MatCalendarBody_For_2_For_3_Template(rf, ctx) {\n if (rf & 1) {\n const _r2 = i0.ɵɵgetCurrentView();\n i0.ɵɵelementStart(0, \"td\", 6)(1, \"button\", 7);\n i0.ɵɵlistener(\"click\", function MatCalendarBody_For_2_For_3_Template_button_click_1_listener($event) {\n const item_r3 = i0.ɵɵrestoreView(_r2).$implicit;\n const ctx_r0 = i0.ɵɵnextContext(2);\n return i0.ɵɵresetView(ctx_r0._cellClicked(item_r3, $event));\n })(\"focus\", function MatCalendarBody_For_2_For_3_Template_button_focus_1_listener($event) {\n const item_r3 = i0.ɵɵrestoreView(_r2).$implicit;\n const ctx_r0 = i0.ɵɵnextContext(2);\n return i0.ɵɵresetView(ctx_r0._emitActiveDateChange(item_r3, $event));\n });\n i0.ɵɵelementStart(2, \"span\", 8);\n i0.ɵɵtext(3);\n i0.ɵɵelementEnd();\n i0.ɵɵelement(4, \"span\", 9);\n i0.ɵɵelementEnd()();\n }\n if (rf & 2) {\n const item_r3 = ctx.$implicit;\n const ɵ$index_14_r4 = ctx.$index;\n const ɵ$index_7_r5 = i0.ɵɵnextContext().$index;\n const ctx_r0 = i0.ɵɵnextContext();\n i0.ɵɵstyleProp(\"width\", ctx_r0._cellWidth)(\"padding-top\", ctx_r0._cellPadding)(\"padding-bottom\", ctx_r0._cellPadding);\n i0.ɵɵattribute(\"data-mat-row\", ɵ$index_7_r5)(\"data-mat-col\", ɵ$index_14_r4);\n i0.ɵɵadvance();\n i0.ɵɵclassProp(\"mat-calendar-body-disabled\", !item_r3.enabled)(\"mat-calendar-body-active\", ctx_r0._isActiveCell(ɵ$index_7_r5, ɵ$index_14_r4))(\"mat-calendar-body-range-start\", ctx_r0._isRangeStart(item_r3.compareValue))(\"mat-calendar-body-range-end\", ctx_r0._isRangeEnd(item_r3.compareValue))(\"mat-calendar-body-in-range\", ctx_r0._isInRange(item_r3.compareValue))(\"mat-calendar-body-comparison-bridge-start\", ctx_r0._isComparisonBridgeStart(item_r3.compareValue, ɵ$index_7_r5, ɵ$index_14_r4))(\"mat-calendar-body-comparison-bridge-end\", ctx_r0._isComparisonBridgeEnd(item_r3.compareValue, ɵ$index_7_r5, ɵ$index_14_r4))(\"mat-calendar-body-comparison-start\", ctx_r0._isComparisonStart(item_r3.compareValue))(\"mat-calendar-body-comparison-end\", ctx_r0._isComparisonEnd(item_r3.compareValue))(\"mat-calendar-body-in-comparison-range\", ctx_r0._isInComparisonRange(item_r3.compareValue))(\"mat-calendar-body-preview-start\", ctx_r0._isPreviewStart(item_r3.compareValue))(\"mat-calendar-body-preview-end\", ctx_r0._isPreviewEnd(item_r3.compareValue))(\"mat-calendar-body-in-preview\", ctx_r0._isInPreview(item_r3.compareValue));\n i0.ɵɵproperty(\"ngClass\", item_r3.cssClasses)(\"tabindex\", ctx_r0._isActiveCell(ɵ$index_7_r5, ɵ$index_14_r4) ? 0 : -1);\n i0.ɵɵattribute(\"aria-label\", item_r3.ariaLabel)(\"aria-disabled\", !item_r3.enabled || null)(\"aria-pressed\", ctx_r0._isSelected(item_r3.compareValue))(\"aria-current\", ctx_r0.todayValue === item_r3.compareValue ? \"date\" : null)(\"aria-describedby\", ctx_r0._getDescribedby(item_r3.compareValue));\n i0.ɵɵadvance();\n i0.ɵɵclassProp(\"mat-calendar-body-selected\", ctx_r0._isSelected(item_r3.compareValue))(\"mat-calendar-body-comparison-identical\", ctx_r0._isComparisonIdentical(item_r3.compareValue))(\"mat-calendar-body-today\", ctx_r0.todayValue === item_r3.compareValue);\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate1(\" \", item_r3.displayValue, \" \");\n }\n}\nfunction MatCalendarBody_For_2_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"tr\", 1);\n i0.ɵɵtemplate(1, MatCalendarBody_For_2_Conditional_1_Template, 2, 6, \"td\", 4);\n i0.ɵɵrepeaterCreate(2, MatCalendarBody_For_2_For_3_Template, 5, 48, \"td\", 5, _forTrack1);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const row_r6 = ctx.$implicit;\n const ɵ$index_7_r5 = ctx.$index;\n const ctx_r0 = i0.ɵɵnextContext();\n i0.ɵɵadvance();\n i0.ɵɵconditional(ɵ$index_7_r5 === 0 && ctx_r0._firstRowOffset ? 1 : -1);\n i0.ɵɵadvance();\n i0.ɵɵrepeater(row_r6);\n }\n}\nfunction MatMonthView_For_4_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"th\", 2)(1, \"span\", 6);\n i0.ɵɵtext(2);\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(3, \"span\", 3);\n i0.ɵɵtext(4);\n i0.ɵɵelementEnd()();\n }\n if (rf & 2) {\n const day_r1 = ctx.$implicit;\n i0.ɵɵadvance(2);\n i0.ɵɵtextInterpolate(day_r1.long);\n i0.ɵɵadvance(2);\n i0.ɵɵtextInterpolate(day_r1.narrow);\n }\n}\nconst _c1 = [\"*\"];\nfunction MatCalendar_ng_template_0_Template(rf, ctx) {}\nfunction MatCalendar_Case_2_Template(rf, ctx) {\n if (rf & 1) {\n const _r1 = i0.ɵɵgetCurrentView();\n i0.ɵɵelementStart(0, \"mat-month-view\", 4);\n i0.ɵɵtwoWayListener(\"activeDateChange\", function MatCalendar_Case_2_Template_mat_month_view_activeDateChange_0_listener($event) {\n i0.ɵɵrestoreView(_r1);\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵtwoWayBindingSet(ctx_r1.activeDate, $event) || (ctx_r1.activeDate = $event);\n return i0.ɵɵresetView($event);\n });\n i0.ɵɵlistener(\"_userSelection\", function MatCalendar_Case_2_Template_mat_month_view__userSelection_0_listener($event) {\n i0.ɵɵrestoreView(_r1);\n const ctx_r1 = i0.ɵɵnextContext();\n return i0.ɵɵresetView(ctx_r1._dateSelected($event));\n })(\"dragStarted\", function MatCalendar_Case_2_Template_mat_month_view_dragStarted_0_listener($event) {\n i0.ɵɵrestoreView(_r1);\n const ctx_r1 = i0.ɵɵnextContext();\n return i0.ɵɵresetView(ctx_r1._dragStarted($event));\n })(\"dragEnded\", function MatCalendar_Case_2_Template_mat_month_view_dragEnded_0_listener($event) {\n i0.ɵɵrestoreView(_r1);\n const ctx_r1 = i0.ɵɵnextContext();\n return i0.ɵɵresetView(ctx_r1._dragEnded($event));\n });\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵtwoWayProperty(\"activeDate\", ctx_r1.activeDate);\n i0.ɵɵproperty(\"selected\", ctx_r1.selected)(\"dateFilter\", ctx_r1.dateFilter)(\"maxDate\", ctx_r1.maxDate)(\"minDate\", ctx_r1.minDate)(\"dateClass\", ctx_r1.dateClass)(\"comparisonStart\", ctx_r1.comparisonStart)(\"comparisonEnd\", ctx_r1.comparisonEnd)(\"startDateAccessibleName\", ctx_r1.startDateAccessibleName)(\"endDateAccessibleName\", ctx_r1.endDateAccessibleName)(\"activeDrag\", ctx_r1._activeDrag);\n }\n}\nfunction MatCalendar_Case_3_Template(rf, ctx) {\n if (rf & 1) {\n const _r3 = i0.ɵɵgetCurrentView();\n i0.ɵɵelementStart(0, \"mat-year-view\", 5);\n i0.ɵɵtwoWayListener(\"activeDateChange\", function MatCalendar_Case_3_Template_mat_year_view_activeDateChange_0_listener($event) {\n i0.ɵɵrestoreView(_r3);\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵtwoWayBindingSet(ctx_r1.activeDate, $event) || (ctx_r1.activeDate = $event);\n return i0.ɵɵresetView($event);\n });\n i0.ɵɵlistener(\"monthSelected\", function MatCalendar_Case_3_Template_mat_year_view_monthSelected_0_listener($event) {\n i0.ɵɵrestoreView(_r3);\n const ctx_r1 = i0.ɵɵnextContext();\n return i0.ɵɵresetView(ctx_r1._monthSelectedInYearView($event));\n })(\"selectedChange\", function MatCalendar_Case_3_Template_mat_year_view_selectedChange_0_listener($event) {\n i0.ɵɵrestoreView(_r3);\n const ctx_r1 = i0.ɵɵnextContext();\n return i0.ɵɵresetView(ctx_r1._goToDateInView($event, \"month\"));\n });\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵtwoWayProperty(\"activeDate\", ctx_r1.activeDate);\n i0.ɵɵproperty(\"selected\", ctx_r1.selected)(\"dateFilter\", ctx_r1.dateFilter)(\"maxDate\", ctx_r1.maxDate)(\"minDate\", ctx_r1.minDate)(\"dateClass\", ctx_r1.dateClass);\n }\n}\nfunction MatCalendar_Case_4_Template(rf, ctx) {\n if (rf & 1) {\n const _r4 = i0.ɵɵgetCurrentView();\n i0.ɵɵelementStart(0, \"mat-multi-year-view\", 6);\n i0.ɵɵtwoWayListener(\"activeDateChange\", function MatCalendar_Case_4_Template_mat_multi_year_view_activeDateChange_0_listener($event) {\n i0.ɵɵrestoreView(_r4);\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵtwoWayBindingSet(ctx_r1.activeDate, $event) || (ctx_r1.activeDate = $event);\n return i0.ɵɵresetView($event);\n });\n i0.ɵɵlistener(\"yearSelected\", function MatCalendar_Case_4_Template_mat_multi_year_view_yearSelected_0_listener($event) {\n i0.ɵɵrestoreView(_r4);\n const ctx_r1 = i0.ɵɵnextContext();\n return i0.ɵɵresetView(ctx_r1._yearSelectedInMultiYearView($event));\n })(\"selectedChange\", function MatCalendar_Case_4_Template_mat_multi_year_view_selectedChange_0_listener($event) {\n i0.ɵɵrestoreView(_r4);\n const ctx_r1 = i0.ɵɵnextContext();\n return i0.ɵɵresetView(ctx_r1._goToDateInView($event, \"year\"));\n });\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n const ctx_r1 = i0.ɵɵnextContext();\n i0.ɵɵtwoWayProperty(\"activeDate\", ctx_r1.activeDate);\n i0.ɵɵproperty(\"selected\", ctx_r1.selected)(\"dateFilter\", ctx_r1.dateFilter)(\"maxDate\", ctx_r1.maxDate)(\"minDate\", ctx_r1.minDate)(\"dateClass\", ctx_r1.dateClass);\n }\n}\nfunction MatDatepickerContent_ng_template_2_Template(rf, ctx) {}\nconst _c2 = [\"button\"];\nconst _c3 = [[[\"\", \"matDatepickerToggleIcon\", \"\"]]];\nconst _c4 = [\"[matDatepickerToggleIcon]\"];\nfunction MatDatepickerToggle_Conditional_2_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵnamespaceSVG();\n i0.ɵɵelementStart(0, \"svg\", 2);\n i0.ɵɵelement(1, \"path\", 3);\n i0.ɵɵelementEnd();\n }\n}\nconst _c5 = [[[\"input\", \"matStartDate\", \"\"]], [[\"input\", \"matEndDate\", \"\"]]];\nconst _c6 = [\"input[matStartDate]\", \"input[matEndDate]\"];\nfunction MatDatepickerActions_ng_template_0_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"div\", 0);\n i0.ɵɵprojection(1);\n i0.ɵɵelementEnd();\n }\n}\nfunction createMissingDateImplError(provider) {\n return Error(`MatDatepicker: No provider found for ${provider}. You must add one of the following ` + `to your app config: provideNativeDateAdapter, provideDateFnsAdapter, ` + `provideLuxonDateAdapter, provideMomentDateAdapter, or provide a custom implementation.`);\n}\n\n/** Datepicker data that requires internationalization. */\nlet MatDatepickerIntl = /*#__PURE__*/(() => {\n class MatDatepickerIntl {\n /**\n * Stream that emits whenever the labels here are changed. Use this to notify\n * components if the labels have changed after initialization.\n */\n changes = new Subject();\n /** A label for the calendar popup (used by screen readers). */\n calendarLabel = 'Calendar';\n /** A label for the button used to open the calendar popup (used by screen readers). */\n openCalendarLabel = 'Open calendar';\n /** Label for the button used to close the calendar popup. */\n closeCalendarLabel = 'Close calendar';\n /** A label for the previous month button (used by screen readers). */\n prevMonthLabel = 'Previous month';\n /** A label for the next month button (used by screen readers). */\n nextMonthLabel = 'Next month';\n /** A label for the previous year button (used by screen readers). */\n prevYearLabel = 'Previous year';\n /** A label for the next year button (used by screen readers). */\n nextYearLabel = 'Next year';\n /** A label for the previous multi-year button (used by screen readers). */\n prevMultiYearLabel = 'Previous 24 years';\n /** A label for the next multi-year button (used by screen readers). */\n nextMultiYearLabel = 'Next 24 years';\n /** A label for the 'switch to month view' button (used by screen readers). */\n switchToMonthViewLabel = 'Choose date';\n /** A label for the 'switch to year view' button (used by screen readers). */\n switchToMultiYearViewLabel = 'Choose month and year';\n /**\n * A label for the first date of a range of dates (used by screen readers).\n * @deprecated Provide your own internationalization string.\n * @breaking-change 17.0.0\n */\n startDateLabel = 'Start date';\n /**\n * A label for the last date of a range of dates (used by screen readers).\n * @deprecated Provide your own internationalization string.\n * @breaking-change 17.0.0\n */\n endDateLabel = 'End date';\n /**\n * A label for the Comparison date of a range of dates (used by screen readers).\n */\n comparisonDateLabel = 'Comparison range';\n /** Formats a range of years (used for visuals). */\n formatYearRange(start, end) {\n return `${start} \\u2013 ${end}`;\n }\n /** Formats a label for a range of years (used by screen readers). */\n formatYearRangeLabel(start, end) {\n return `${start} to ${end}`;\n }\n static ɵfac = function MatDatepickerIntl_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDatepickerIntl)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: MatDatepickerIntl,\n factory: MatDatepickerIntl.ɵfac,\n providedIn: 'root'\n });\n }\n return MatDatepickerIntl;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet uniqueIdCounter$1 = 0;\n/**\n * An internal class that represents the data corresponding to a single calendar cell.\n * @docs-private\n */\nclass MatCalendarCell {\n value;\n displayValue;\n ariaLabel;\n enabled;\n cssClasses;\n compareValue;\n rawValue;\n id = uniqueIdCounter$1++;\n constructor(value, displayValue, ariaLabel, enabled, cssClasses = {}, compareValue = value, rawValue) {\n this.value = value;\n this.displayValue = displayValue;\n this.ariaLabel = ariaLabel;\n this.enabled = enabled;\n this.cssClasses = cssClasses;\n this.compareValue = compareValue;\n this.rawValue = rawValue;\n }\n}\n/** Event options that can be used to bind an active, capturing event. */\nconst activeCapturingEventOptions = /*#__PURE__*/normalizePassiveListenerOptions({\n passive: false,\n capture: true\n});\n/** Event options that can be used to bind a passive, capturing event. */\nconst passiveCapturingEventOptions = /*#__PURE__*/normalizePassiveListenerOptions({\n passive: true,\n capture: true\n});\n/** Event options that can be used to bind a passive, non-capturing event. */\nconst passiveEventOptions = /*#__PURE__*/normalizePassiveListenerOptions({\n passive: true\n});\n/**\n * An internal component used to display calendar data in a table.\n * @docs-private\n */\nlet MatCalendarBody = /*#__PURE__*/(() => {\n class MatCalendarBody {\n _elementRef = inject(ElementRef);\n _ngZone = inject(NgZone);\n _platform = inject(Platform);\n _intl = inject(MatDatepickerIntl);\n /**\n * Used to skip the next focus event when rendering the preview range.\n * We need a flag like this, because some browsers fire focus events asynchronously.\n */\n _skipNextFocus;\n /**\n * Used to focus the active cell after change detection has run.\n */\n _focusActiveCellAfterViewChecked = false;\n /** The label for the table. (e.g. \"Jan 2017\"). */\n label;\n /** The cells to display in the table. */\n rows;\n /** The value in the table that corresponds to today. */\n todayValue;\n /** Start value of the selected date range. */\n startValue;\n /** End value of the selected date range. */\n endValue;\n /** The minimum number of free cells needed to fit the label in the first row. */\n labelMinRequiredCells;\n /** The number of columns in the table. */\n numCols = 7;\n /** The cell number of the active cell in the table. */\n activeCell = 0;\n ngAfterViewChecked() {\n if (this._focusActiveCellAfterViewChecked) {\n this._focusActiveCell();\n this._focusActiveCellAfterViewChecked = false;\n }\n }\n /** Whether a range is being selected. */\n isRange = false;\n /**\n * The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be\n * maintained even as the table resizes.\n */\n cellAspectRatio = 1;\n /** Start of the comparison range. */\n comparisonStart;\n /** End of the comparison range. */\n comparisonEnd;\n /** Start of the preview range. */\n previewStart = null;\n /** End of the preview range. */\n previewEnd = null;\n /** ARIA Accessible name of the `` */\n startDateAccessibleName;\n /** ARIA Accessible name of the `` */\n endDateAccessibleName;\n /** Emits when a new value is selected. */\n selectedValueChange = new EventEmitter();\n /** Emits when the preview has changed as a result of a user action. */\n previewChange = new EventEmitter();\n activeDateChange = new EventEmitter();\n /** Emits the date at the possible start of a drag event. */\n dragStarted = new EventEmitter();\n /** Emits the date at the conclusion of a drag, or null if mouse was not released on a date. */\n dragEnded = new EventEmitter();\n /** The number of blank cells to put at the beginning for the first row. */\n _firstRowOffset;\n /** Padding for the individual date cells. */\n _cellPadding;\n /** Width of an individual cell. */\n _cellWidth;\n /** ID for the start date label. */\n _startDateLabelId;\n /** ID for the end date label. */\n _endDateLabelId;\n /** ID for the comparison start date label. */\n _comparisonStartDateLabelId;\n /** ID for the comparison end date label. */\n _comparisonEndDateLabelId;\n _didDragSinceMouseDown = false;\n _injector = inject(Injector);\n comparisonDateAccessibleName = this._intl.comparisonDateLabel;\n /**\n * Tracking function for rows based on their identity. Ideally we would use some sort of\n * key on the row, but that would require a breaking change for the `rows` input. We don't\n * use the built-in identity tracking, because it logs warnings.\n */\n _trackRow = row => row;\n constructor() {\n const idGenerator = inject(_IdGenerator);\n this._startDateLabelId = idGenerator.getId('mat-calendar-body-start-');\n this._endDateLabelId = idGenerator.getId('mat-calendar-body-end-');\n this._comparisonStartDateLabelId = idGenerator.getId('mat-calendar-body-comparison-start-');\n this._comparisonEndDateLabelId = idGenerator.getId('mat-calendar-body-comparison-end-');\n inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);\n this._ngZone.runOutsideAngular(() => {\n const element = this._elementRef.nativeElement;\n // `touchmove` is active since we need to call `preventDefault`.\n element.addEventListener('touchmove', this._touchmoveHandler, activeCapturingEventOptions);\n element.addEventListener('mouseenter', this._enterHandler, passiveCapturingEventOptions);\n element.addEventListener('focus', this._enterHandler, passiveCapturingEventOptions);\n element.addEventListener('mouseleave', this._leaveHandler, passiveCapturingEventOptions);\n element.addEventListener('blur', this._leaveHandler, passiveCapturingEventOptions);\n element.addEventListener('mousedown', this._mousedownHandler, passiveEventOptions);\n element.addEventListener('touchstart', this._mousedownHandler, passiveEventOptions);\n if (this._platform.isBrowser) {\n window.addEventListener('mouseup', this._mouseupHandler);\n window.addEventListener('touchend', this._touchendHandler);\n }\n });\n }\n /** Called when a cell is clicked. */\n _cellClicked(cell, event) {\n // Ignore \"clicks\" that are actually canceled drags (eg the user dragged\n // off and then went back to this cell to undo).\n if (this._didDragSinceMouseDown) {\n return;\n }\n if (cell.enabled) {\n this.selectedValueChange.emit({\n value: cell.value,\n event\n });\n }\n }\n _emitActiveDateChange(cell, event) {\n if (cell.enabled) {\n this.activeDateChange.emit({\n value: cell.value,\n event\n });\n }\n }\n /** Returns whether a cell should be marked as selected. */\n _isSelected(value) {\n return this.startValue === value || this.endValue === value;\n }\n ngOnChanges(changes) {\n const columnChanges = changes['numCols'];\n const {\n rows,\n numCols\n } = this;\n if (changes['rows'] || columnChanges) {\n this._firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0;\n }\n if (changes['cellAspectRatio'] || columnChanges || !this._cellPadding) {\n this._cellPadding = `${50 * this.cellAspectRatio / numCols}%`;\n }\n if (columnChanges || !this._cellWidth) {\n this._cellWidth = `${100 / numCols}%`;\n }\n }\n ngOnDestroy() {\n const element = this._elementRef.nativeElement;\n element.removeEventListener('touchmove', this._touchmoveHandler, activeCapturingEventOptions);\n element.removeEventListener('mouseenter', this._enterHandler, passiveCapturingEventOptions);\n element.removeEventListener('focus', this._enterHandler, passiveCapturingEventOptions);\n element.removeEventListener('mouseleave', this._leaveHandler, passiveCapturingEventOptions);\n element.removeEventListener('blur', this._leaveHandler, passiveCapturingEventOptions);\n element.removeEventListener('mousedown', this._mousedownHandler, passiveEventOptions);\n element.removeEventListener('touchstart', this._mousedownHandler, passiveEventOptions);\n if (this._platform.isBrowser) {\n window.removeEventListener('mouseup', this._mouseupHandler);\n window.removeEventListener('touchend', this._touchendHandler);\n }\n }\n /** Returns whether a cell is active. */\n _isActiveCell(rowIndex, colIndex) {\n let cellNumber = rowIndex * this.numCols + colIndex;\n // Account for the fact that the first row may not have as many cells.\n if (rowIndex) {\n cellNumber -= this._firstRowOffset;\n }\n return cellNumber == this.activeCell;\n }\n /**\n * Focuses the active cell after the microtask queue is empty.\n *\n * Adding a 0ms setTimeout seems to fix Voiceover losing focus when pressing PageUp/PageDown\n * (issue #24330).\n *\n * Determined a 0ms by gradually increasing duration from 0 and testing two use cases with screen\n * reader enabled:\n *\n * 1. Pressing PageUp/PageDown repeatedly with pausing between each key press.\n * 2. Pressing and holding the PageDown key with repeated keys enabled.\n *\n * Test 1 worked roughly 95-99% of the time with 0ms and got a little bit better as the duration\n * increased. Test 2 got slightly better until the duration was long enough to interfere with\n * repeated keys. If the repeated key speed was faster than the timeout duration, then pressing\n * and holding pagedown caused the entire page to scroll.\n *\n * Since repeated key speed can verify across machines, determined that any duration could\n * potentially interfere with repeated keys. 0ms would be best because it almost entirely\n * eliminates the focus being lost in Voiceover (#24330) without causing unintended side effects.\n * Adding delay also complicates writing tests.\n */\n _focusActiveCell(movePreview = true) {\n afterNextRender(() => {\n setTimeout(() => {\n const activeCell = this._elementRef.nativeElement.querySelector('.mat-calendar-body-active');\n if (activeCell) {\n if (!movePreview) {\n this._skipNextFocus = true;\n }\n activeCell.focus();\n }\n });\n }, {\n injector: this._injector\n });\n }\n /** Focuses the active cell after change detection has run and the microtask queue is empty. */\n _scheduleFocusActiveCellAfterViewChecked() {\n this._focusActiveCellAfterViewChecked = true;\n }\n /** Gets whether a value is the start of the main range. */\n _isRangeStart(value) {\n return isStart(value, this.startValue, this.endValue);\n }\n /** Gets whether a value is the end of the main range. */\n _isRangeEnd(value) {\n return isEnd(value, this.startValue, this.endValue);\n }\n /** Gets whether a value is within the currently-selected range. */\n _isInRange(value) {\n return isInRange(value, this.startValue, this.endValue, this.isRange);\n }\n /** Gets whether a value is the start of the comparison range. */\n _isComparisonStart(value) {\n return isStart(value, this.comparisonStart, this.comparisonEnd);\n }\n /** Whether the cell is a start bridge cell between the main and comparison ranges. */\n _isComparisonBridgeStart(value, rowIndex, colIndex) {\n if (!this._isComparisonStart(value) || this._isRangeStart(value) || !this._isInRange(value)) {\n return false;\n }\n let previousCell = this.rows[rowIndex][colIndex - 1];\n if (!previousCell) {\n const previousRow = this.rows[rowIndex - 1];\n previousCell = previousRow && previousRow[previousRow.length - 1];\n }\n return previousCell && !this._isRangeEnd(previousCell.compareValue);\n }\n /** Whether the cell is an end bridge cell between the main and comparison ranges. */\n _isComparisonBridgeEnd(value, rowIndex, colIndex) {\n if (!this._isComparisonEnd(value) || this._isRangeEnd(value) || !this._isInRange(value)) {\n return false;\n }\n let nextCell = this.rows[rowIndex][colIndex + 1];\n if (!nextCell) {\n const nextRow = this.rows[rowIndex + 1];\n nextCell = nextRow && nextRow[0];\n }\n return nextCell && !this._isRangeStart(nextCell.compareValue);\n }\n /** Gets whether a value is the end of the comparison range. */\n _isComparisonEnd(value) {\n return isEnd(value, this.comparisonStart, this.comparisonEnd);\n }\n /** Gets whether a value is within the current comparison range. */\n _isInComparisonRange(value) {\n return isInRange(value, this.comparisonStart, this.comparisonEnd, this.isRange);\n }\n /**\n * Gets whether a value is the same as the start and end of the comparison range.\n * For context, the functions that we use to determine whether something is the start/end of\n * a range don't allow for the start and end to be on the same day, because we'd have to use\n * much more specific CSS selectors to style them correctly in all scenarios. This is fine for\n * the regular range, because when it happens, the selected styles take over and still show where\n * the range would've been, however we don't have these selected styles for a comparison range.\n * This function is used to apply a class that serves the same purpose as the one for selected\n * dates, but it only applies in the context of a comparison range.\n */\n _isComparisonIdentical(value) {\n // Note that we don't need to null check the start/end\n // here, because the `value` will always be defined.\n return this.comparisonStart === this.comparisonEnd && value === this.comparisonStart;\n }\n /** Gets whether a value is the start of the preview range. */\n _isPreviewStart(value) {\n return isStart(value, this.previewStart, this.previewEnd);\n }\n /** Gets whether a value is the end of the preview range. */\n _isPreviewEnd(value) {\n return isEnd(value, this.previewStart, this.previewEnd);\n }\n /** Gets whether a value is inside the preview range. */\n _isInPreview(value) {\n return isInRange(value, this.previewStart, this.previewEnd, this.isRange);\n }\n /** Gets ids of aria descriptions for the start and end of a date range. */\n _getDescribedby(value) {\n if (!this.isRange) {\n return null;\n }\n if (this.startValue === value && this.endValue === value) {\n return `${this._startDateLabelId} ${this._endDateLabelId}`;\n } else if (this.startValue === value) {\n return this._startDateLabelId;\n } else if (this.endValue === value) {\n return this._endDateLabelId;\n }\n if (this.comparisonStart !== null && this.comparisonEnd !== null) {\n if (value === this.comparisonStart && value === this.comparisonEnd) {\n return `${this._comparisonStartDateLabelId} ${this._comparisonEndDateLabelId}`;\n } else if (value === this.comparisonStart) {\n return this._comparisonStartDateLabelId;\n } else if (value === this.comparisonEnd) {\n return this._comparisonEndDateLabelId;\n }\n }\n return null;\n }\n /**\n * Event handler for when the user enters an element\n * inside the calendar body (e.g. by hovering in or focus).\n */\n _enterHandler = event => {\n if (this._skipNextFocus && event.type === 'focus') {\n this._skipNextFocus = false;\n return;\n }\n // We only need to hit the zone when we're selecting a range.\n if (event.target && this.isRange) {\n const cell = this._getCellFromElement(event.target);\n if (cell) {\n this._ngZone.run(() => this.previewChange.emit({\n value: cell.enabled ? cell : null,\n event\n }));\n }\n }\n };\n _touchmoveHandler = event => {\n if (!this.isRange) return;\n const target = getActualTouchTarget(event);\n const cell = target ? this._getCellFromElement(target) : null;\n if (target !== event.target) {\n this._didDragSinceMouseDown = true;\n }\n // If the initial target of the touch is a date cell, prevent default so\n // that the move is not handled as a scroll.\n if (getCellElement(event.target)) {\n event.preventDefault();\n }\n this._ngZone.run(() => this.previewChange.emit({\n value: cell?.enabled ? cell : null,\n event\n }));\n };\n /**\n * Event handler for when the user's pointer leaves an element\n * inside the calendar body (e.g. by hovering out or blurring).\n */\n _leaveHandler = event => {\n // We only need to hit the zone when we're selecting a range.\n if (this.previewEnd !== null && this.isRange) {\n if (event.type !== 'blur') {\n this._didDragSinceMouseDown = true;\n }\n // Only reset the preview end value when leaving cells. This looks better, because\n // we have a gap between the cells and the rows and we don't want to remove the\n // range just for it to show up again when the user moves a few pixels to the side.\n if (event.target && this._getCellFromElement(event.target) && !(event.relatedTarget && this._getCellFromElement(event.relatedTarget))) {\n this._ngZone.run(() => this.previewChange.emit({\n value: null,\n event\n }));\n }\n }\n };\n /**\n * Triggered on mousedown or touchstart on a date cell.\n * Respsonsible for starting a drag sequence.\n */\n _mousedownHandler = event => {\n if (!this.isRange) return;\n this._didDragSinceMouseDown = false;\n // Begin a drag if a cell within the current range was targeted.\n const cell = event.target && this._getCellFromElement(event.target);\n if (!cell || !this._isInRange(cell.compareValue)) {\n return;\n }\n this._ngZone.run(() => {\n this.dragStarted.emit({\n value: cell.rawValue,\n event\n });\n });\n };\n /** Triggered on mouseup anywhere. Respsonsible for ending a drag sequence. */\n _mouseupHandler = event => {\n if (!this.isRange) return;\n const cellElement = getCellElement(event.target);\n if (!cellElement) {\n // Mouseup happened outside of datepicker. Cancel drag.\n this._ngZone.run(() => {\n this.dragEnded.emit({\n value: null,\n event\n });\n });\n return;\n }\n if (cellElement.closest('.mat-calendar-body') !== this._elementRef.nativeElement) {\n // Mouseup happened inside a different month instance.\n // Allow it to handle the event.\n return;\n }\n this._ngZone.run(() => {\n const cell = this._getCellFromElement(cellElement);\n this.dragEnded.emit({\n value: cell?.rawValue ?? null,\n event\n });\n });\n };\n /** Triggered on touchend anywhere. Respsonsible for ending a drag sequence. */\n _touchendHandler = event => {\n const target = getActualTouchTarget(event);\n if (target) {\n this._mouseupHandler({\n target\n });\n }\n };\n /** Finds the MatCalendarCell that corresponds to a DOM node. */\n _getCellFromElement(element) {\n const cell = getCellElement(element);\n if (cell) {\n const row = cell.getAttribute('data-mat-row');\n const col = cell.getAttribute('data-mat-col');\n if (row && col) {\n return this.rows[parseInt(row)][parseInt(col)];\n }\n }\n return null;\n }\n static ɵfac = function MatCalendarBody_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatCalendarBody)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatCalendarBody,\n selectors: [[\"\", \"mat-calendar-body\", \"\"]],\n hostAttrs: [1, \"mat-calendar-body\"],\n inputs: {\n label: \"label\",\n rows: \"rows\",\n todayValue: \"todayValue\",\n startValue: \"startValue\",\n endValue: \"endValue\",\n labelMinRequiredCells: \"labelMinRequiredCells\",\n numCols: \"numCols\",\n activeCell: \"activeCell\",\n isRange: \"isRange\",\n cellAspectRatio: \"cellAspectRatio\",\n comparisonStart: \"comparisonStart\",\n comparisonEnd: \"comparisonEnd\",\n previewStart: \"previewStart\",\n previewEnd: \"previewEnd\",\n startDateAccessibleName: \"startDateAccessibleName\",\n endDateAccessibleName: \"endDateAccessibleName\"\n },\n outputs: {\n selectedValueChange: \"selectedValueChange\",\n previewChange: \"previewChange\",\n activeDateChange: \"activeDateChange\",\n dragStarted: \"dragStarted\",\n dragEnded: \"dragEnded\"\n },\n exportAs: [\"matCalendarBody\"],\n features: [i0.ɵɵNgOnChangesFeature],\n attrs: _c0,\n decls: 11,\n vars: 11,\n consts: [[\"aria-hidden\", \"true\"], [\"role\", \"row\"], [1, \"mat-calendar-body-hidden-label\", 3, \"id\"], [1, \"mat-calendar-body-label\"], [1, \"mat-calendar-body-label\", 3, \"paddingTop\", \"paddingBottom\"], [\"role\", \"gridcell\", 1, \"mat-calendar-body-cell-container\", 3, \"width\", \"paddingTop\", \"paddingBottom\"], [\"role\", \"gridcell\", 1, \"mat-calendar-body-cell-container\"], [\"type\", \"button\", 1, \"mat-calendar-body-cell\", 3, \"click\", \"focus\", \"ngClass\", \"tabindex\"], [1, \"mat-calendar-body-cell-content\", \"mat-focus-indicator\"], [\"aria-hidden\", \"true\", 1, \"mat-calendar-body-cell-preview\"]],\n template: function MatCalendarBody_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵtemplate(0, MatCalendarBody_Conditional_0_Template, 3, 6, \"tr\", 0);\n i0.ɵɵrepeaterCreate(1, MatCalendarBody_For_2_Template, 4, 1, \"tr\", 1, _forTrack0, true);\n i0.ɵɵelementStart(3, \"span\", 2);\n i0.ɵɵtext(4);\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(5, \"span\", 2);\n i0.ɵɵtext(6);\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(7, \"span\", 2);\n i0.ɵɵtext(8);\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(9, \"span\", 2);\n i0.ɵɵtext(10);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n i0.ɵɵconditional(ctx._firstRowOffset < ctx.labelMinRequiredCells ? 0 : -1);\n i0.ɵɵadvance();\n i0.ɵɵrepeater(ctx.rows);\n i0.ɵɵadvance(2);\n i0.ɵɵproperty(\"id\", ctx._startDateLabelId);\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate1(\" \", ctx.startDateAccessibleName, \"\\n\");\n i0.ɵɵadvance();\n i0.ɵɵproperty(\"id\", ctx._endDateLabelId);\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate1(\" \", ctx.endDateAccessibleName, \"\\n\");\n i0.ɵɵadvance();\n i0.ɵɵproperty(\"id\", ctx._comparisonStartDateLabelId);\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate2(\" \", ctx.comparisonDateAccessibleName, \" \", ctx.startDateAccessibleName, \"\\n\");\n i0.ɵɵadvance();\n i0.ɵɵproperty(\"id\", ctx._comparisonEndDateLabelId);\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate2(\" \", ctx.comparisonDateAccessibleName, \" \", ctx.endDateAccessibleName, \"\\n\");\n }\n },\n dependencies: [NgClass],\n styles: [\".mat-calendar-body{min-width:224px}.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border-color:var(--mat-datepicker-calendar-date-today-outline-color, var(--mat-sys-primary))}.mat-calendar-body-label{height:0;line-height:0;text-align:start;padding-left:4.7142857143%;padding-right:4.7142857143%;font-size:var(--mat-datepicker-calendar-body-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-datepicker-calendar-body-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mat-datepicker-calendar-body-label-text-color, var(--mat-sys-on-surface))}.mat-calendar-body-hidden-label{display:none}.mat-calendar-body-cell-container{position:relative;height:0;line-height:0}.mat-calendar-body-cell{position:absolute;top:0;left:0;width:100%;height:100%;background:none;text-align:center;outline:none;font-family:inherit;margin:0;font-family:var(--mat-datepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mat-datepicker-calendar-text-size, var(--mat-sys-body-medium-size));-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-calendar-body-cell::-moz-focus-inner{border:0}.mat-calendar-body-cell::before,.mat-calendar-body-cell::after,.mat-calendar-body-cell-preview{content:\\\"\\\";position:absolute;top:5%;left:0;z-index:0;box-sizing:border-box;display:block;height:90%;width:100%}.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,.mat-calendar-body-range-start::after,.mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,.mat-calendar-body-comparison-start::after,.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,[dir=rtl] .mat-calendar-body-range-start::after,[dir=rtl] .mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,[dir=rtl] .mat-calendar-body-comparison-start::after,[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:0;border-radius:0;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,.mat-calendar-body-range-end::after,.mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,.mat-calendar-body-comparison-end::after,.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}[dir=rtl] .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,[dir=rtl] .mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,[dir=rtl] .mat-calendar-body-comparison-end::after,[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{left:5%;border-radius:0;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,.mat-calendar-body-comparison-end.mat-calendar-body-range-start::after,[dir=rtl] .mat-calendar-body-comparison-end.mat-calendar-body-range-start::after{width:90%}.mat-calendar-body-in-preview{color:var(--mat-datepicker-calendar-date-preview-state-outline-color, var(--mat-sys-primary))}.mat-calendar-body-in-preview .mat-calendar-body-cell-preview{border-top:dashed 1px;border-bottom:dashed 1px}.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:dashed 1px}[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:0;border-right:dashed 1px}.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:dashed 1px}[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:0;border-left:dashed 1px}.mat-calendar-body-disabled{cursor:default}.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--mat-datepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-calendar-body-disabled>.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border-color:var(--mat-datepicker-calendar-date-today-disabled-state-outline-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media(forced-colors: active){.mat-calendar-body-disabled{opacity:.5}}.mat-calendar-body-cell-content{top:5%;left:5%;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-style:solid;border-radius:999px;color:var(--mat-datepicker-calendar-date-text-color, var(--mat-sys-on-surface));border-color:var(--mat-datepicker-calendar-date-outline-color, transparent)}.mat-calendar-body-cell-content.mat-focus-indicator{position:absolute}@media(forced-colors: active){.mat-calendar-body-cell-content{border:none}}.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-focus-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent))}@media(hover: hover){.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}}.mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color, var(--mat-sys-primary));color:var(--mat-datepicker-calendar-date-selected-state-text-color, var(--mat-sys-on-primary))}.mat-calendar-body-disabled>.mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-disabled-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-calendar-body-selected.mat-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mat-datepicker-calendar-date-today-selected-state-outline-color, var(--mat-sys-primary))}.mat-calendar-body-in-range::before{background:var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-sys-primary-container))}.mat-calendar-body-comparison-identical,.mat-calendar-body-in-comparison-range::before{background:var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container))}.mat-calendar-body-comparison-identical,.mat-calendar-body-in-comparison-range::before{background:var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container))}.mat-calendar-body-comparison-bridge-start::before,[dir=rtl] .mat-calendar-body-comparison-bridge-end::before{background:linear-gradient(to right, var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-sys-primary-container)) 50%, var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container)) 50%)}.mat-calendar-body-comparison-bridge-end::before,[dir=rtl] .mat-calendar-body-comparison-bridge-start::before{background:linear-gradient(to left, var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-sys-primary-container)) 50%, var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container)) 50%)}.mat-calendar-body-in-range>.mat-calendar-body-comparison-identical,.mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after{background:var(--mat-datepicker-calendar-date-in-overlap-range-state-background-color, var(--mat-sys-secondary-container))}.mat-calendar-body-comparison-identical.mat-calendar-body-selected,.mat-calendar-body-in-comparison-range>.mat-calendar-body-selected{background:var(--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color, var(--mat-sys-secondary))}@media(forced-colors: active){.mat-datepicker-popup:not(:empty),.mat-calendar-body-cell:not(.mat-calendar-body-in-range) .mat-calendar-body-selected{outline:solid 1px}.mat-calendar-body-today{outline:dotted 1px}.mat-calendar-body-cell::before,.mat-calendar-body-cell::after,.mat-calendar-body-selected{background:none}.mat-calendar-body-in-range::before,.mat-calendar-body-comparison-bridge-start::before,.mat-calendar-body-comparison-bridge-end::before{border-top:solid 1px;border-bottom:solid 1px}.mat-calendar-body-range-start::before{border-left:solid 1px}[dir=rtl] .mat-calendar-body-range-start::before{border-left:0;border-right:solid 1px}.mat-calendar-body-range-end::before{border-right:solid 1px}[dir=rtl] .mat-calendar-body-range-end::before{border-right:0;border-left:solid 1px}.mat-calendar-body-in-comparison-range::before{border-top:dashed 1px;border-bottom:dashed 1px}.mat-calendar-body-comparison-start::before{border-left:dashed 1px}[dir=rtl] .mat-calendar-body-comparison-start::before{border-left:0;border-right:dashed 1px}.mat-calendar-body-comparison-end::before{border-right:dashed 1px}[dir=rtl] .mat-calendar-body-comparison-end::before{border-right:0;border-left:dashed 1px}}\"],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatCalendarBody;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** Checks whether a node is a table cell element. */\nfunction isTableCell(node) {\n return node?.nodeName === 'TD';\n}\n/**\n * Gets the date table cell element that is or contains the specified element.\n * Or returns null if element is not part of a date cell.\n */\nfunction getCellElement(element) {\n let cell;\n if (isTableCell(element)) {\n cell = element;\n } else if (isTableCell(element.parentNode)) {\n cell = element.parentNode;\n } else if (isTableCell(element.parentNode?.parentNode)) {\n cell = element.parentNode.parentNode;\n }\n return cell?.getAttribute('data-mat-row') != null ? cell : null;\n}\n/** Checks whether a value is the start of a range. */\nfunction isStart(value, start, end) {\n return end !== null && start !== end && value < end && value === start;\n}\n/** Checks whether a value is the end of a range. */\nfunction isEnd(value, start, end) {\n return start !== null && start !== end && value >= start && value === end;\n}\n/** Checks whether a value is inside of a range. */\nfunction isInRange(value, start, end, rangeEnabled) {\n return rangeEnabled && start !== null && end !== null && start !== end && value >= start && value <= end;\n}\n/**\n * Extracts the element that actually corresponds to a touch event's location\n * (rather than the element that initiated the sequence of touch events).\n */\nfunction getActualTouchTarget(event) {\n const touchLocation = event.changedTouches[0];\n return document.elementFromPoint(touchLocation.clientX, touchLocation.clientY);\n}\n\n/** A class representing a range of dates. */\nclass DateRange {\n start;\n end;\n /**\n * Ensures that objects with a `start` and `end` property can't be assigned to a variable that\n * expects a `DateRange`\n */\n // tslint:disable-next-line:no-unused-variable\n _disableStructuralEquivalency;\n constructor(/** The start date of the range. */\n start, /** The end date of the range. */\n end) {\n this.start = start;\n this.end = end;\n }\n}\n/**\n * A selection model containing a date selection.\n * @docs-private\n */\nlet MatDateSelectionModel = /*#__PURE__*/(() => {\n class MatDateSelectionModel {\n selection;\n _adapter;\n _selectionChanged = new Subject();\n /** Emits when the selection has changed. */\n selectionChanged = this._selectionChanged;\n constructor(/** The current selection. */\n selection, _adapter) {\n this.selection = selection;\n this._adapter = _adapter;\n this.selection = selection;\n }\n /**\n * Updates the current selection in the model.\n * @param value New selection that should be assigned.\n * @param source Object that triggered the selection change.\n */\n updateSelection(value, source) {\n const oldValue = this.selection;\n this.selection = value;\n this._selectionChanged.next({\n selection: value,\n source,\n oldValue\n });\n }\n ngOnDestroy() {\n this._selectionChanged.complete();\n }\n _isValidDateInstance(date) {\n return this._adapter.isDateInstance(date) && this._adapter.isValid(date);\n }\n static ɵfac = function MatDateSelectionModel_Factory(__ngFactoryType__) {\n i0.ɵɵinvalidFactory();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: MatDateSelectionModel,\n factory: MatDateSelectionModel.ɵfac\n });\n }\n return MatDateSelectionModel;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * A selection model that contains a single date.\n * @docs-private\n */\nlet MatSingleDateSelectionModel = /*#__PURE__*/(() => {\n class MatSingleDateSelectionModel extends MatDateSelectionModel {\n constructor(adapter) {\n super(null, adapter);\n }\n /**\n * Adds a date to the current selection. In the case of a single date selection, the added date\n * simply overwrites the previous selection\n */\n add(date) {\n super.updateSelection(date, this);\n }\n /** Checks whether the current selection is valid. */\n isValid() {\n return this.selection != null && this._isValidDateInstance(this.selection);\n }\n /**\n * Checks whether the current selection is complete. In the case of a single date selection, this\n * is true if the current selection is not null.\n */\n isComplete() {\n return this.selection != null;\n }\n /** Clones the selection model. */\n clone() {\n const clone = new MatSingleDateSelectionModel(this._adapter);\n clone.updateSelection(this.selection, this);\n return clone;\n }\n static ɵfac = function MatSingleDateSelectionModel_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatSingleDateSelectionModel)(i0.ɵɵinject(i1.DateAdapter));\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: MatSingleDateSelectionModel,\n factory: MatSingleDateSelectionModel.ɵfac\n });\n }\n return MatSingleDateSelectionModel;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * A selection model that contains a date range.\n * @docs-private\n */\nlet MatRangeDateSelectionModel = /*#__PURE__*/(() => {\n class MatRangeDateSelectionModel extends MatDateSelectionModel {\n constructor(adapter) {\n super(new DateRange(null, null), adapter);\n }\n /**\n * Adds a date to the current selection. In the case of a date range selection, the added date\n * fills in the next `null` value in the range. If both the start and the end already have a date,\n * the selection is reset so that the given date is the new `start` and the `end` is null.\n */\n add(date) {\n let {\n start,\n end\n } = this.selection;\n if (start == null) {\n start = date;\n } else if (end == null) {\n end = date;\n } else {\n start = date;\n end = null;\n }\n super.updateSelection(new DateRange(start, end), this);\n }\n /** Checks whether the current selection is valid. */\n isValid() {\n const {\n start,\n end\n } = this.selection;\n // Empty ranges are valid.\n if (start == null && end == null) {\n return true;\n }\n // Complete ranges are only valid if both dates are valid and the start is before the end.\n if (start != null && end != null) {\n return this._isValidDateInstance(start) && this._isValidDateInstance(end) && this._adapter.compareDate(start, end) <= 0;\n }\n // Partial ranges are valid if the start/end is valid.\n return (start == null || this._isValidDateInstance(start)) && (end == null || this._isValidDateInstance(end));\n }\n /**\n * Checks whether the current selection is complete. In the case of a date range selection, this\n * is true if the current selection has a non-null `start` and `end`.\n */\n isComplete() {\n return this.selection.start != null && this.selection.end != null;\n }\n /** Clones the selection model. */\n clone() {\n const clone = new MatRangeDateSelectionModel(this._adapter);\n clone.updateSelection(this.selection, this);\n return clone;\n }\n static ɵfac = function MatRangeDateSelectionModel_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatRangeDateSelectionModel)(i0.ɵɵinject(i1.DateAdapter));\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: MatRangeDateSelectionModel,\n factory: MatRangeDateSelectionModel.ɵfac\n });\n }\n return MatRangeDateSelectionModel;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** @docs-private */\nfunction MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY(parent, adapter) {\n return parent || new MatSingleDateSelectionModel(adapter);\n}\n/**\n * Used to provide a single selection model to a component.\n * @docs-private\n */\nconst MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER = {\n provide: MatDateSelectionModel,\n deps: [[/*#__PURE__*/new Optional(), /*#__PURE__*/new SkipSelf(), MatDateSelectionModel], DateAdapter],\n useFactory: MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY\n};\n/** @docs-private */\nfunction MAT_RANGE_DATE_SELECTION_MODEL_FACTORY(parent, adapter) {\n return parent || new MatRangeDateSelectionModel(adapter);\n}\n/**\n * Used to provide a range selection model to a component.\n * @docs-private\n */\nconst MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER = {\n provide: MatDateSelectionModel,\n deps: [[/*#__PURE__*/new Optional(), /*#__PURE__*/new SkipSelf(), MatDateSelectionModel], DateAdapter],\n useFactory: MAT_RANGE_DATE_SELECTION_MODEL_FACTORY\n};\n\n/** Injection token used to customize the date range selection behavior. */\nconst MAT_DATE_RANGE_SELECTION_STRATEGY = /*#__PURE__*/new InjectionToken('MAT_DATE_RANGE_SELECTION_STRATEGY');\n/** Provides the default date range selection behavior. */\nlet DefaultMatCalendarRangeStrategy = /*#__PURE__*/(() => {\n class DefaultMatCalendarRangeStrategy {\n _dateAdapter;\n constructor(_dateAdapter) {\n this._dateAdapter = _dateAdapter;\n }\n selectionFinished(date, currentRange) {\n let {\n start,\n end\n } = currentRange;\n if (start == null) {\n start = date;\n } else if (end == null && date && this._dateAdapter.compareDate(date, start) >= 0) {\n end = date;\n } else {\n start = date;\n end = null;\n }\n return new DateRange(start, end);\n }\n createPreview(activeDate, currentRange) {\n let start = null;\n let end = null;\n if (currentRange.start && !currentRange.end && activeDate) {\n start = currentRange.start;\n end = activeDate;\n }\n return new DateRange(start, end);\n }\n createDrag(dragOrigin, originalRange, newDate) {\n let start = originalRange.start;\n let end = originalRange.end;\n if (!start || !end) {\n // Can't drag from an incomplete range.\n return null;\n }\n const adapter = this._dateAdapter;\n const isRange = adapter.compareDate(start, end) !== 0;\n const diffYears = adapter.getYear(newDate) - adapter.getYear(dragOrigin);\n const diffMonths = adapter.getMonth(newDate) - adapter.getMonth(dragOrigin);\n const diffDays = adapter.getDate(newDate) - adapter.getDate(dragOrigin);\n if (isRange && adapter.sameDate(dragOrigin, originalRange.start)) {\n start = newDate;\n if (adapter.compareDate(newDate, end) > 0) {\n end = adapter.addCalendarYears(end, diffYears);\n end = adapter.addCalendarMonths(end, diffMonths);\n end = adapter.addCalendarDays(end, diffDays);\n }\n } else if (isRange && adapter.sameDate(dragOrigin, originalRange.end)) {\n end = newDate;\n if (adapter.compareDate(newDate, start) < 0) {\n start = adapter.addCalendarYears(start, diffYears);\n start = adapter.addCalendarMonths(start, diffMonths);\n start = adapter.addCalendarDays(start, diffDays);\n }\n } else {\n start = adapter.addCalendarYears(start, diffYears);\n start = adapter.addCalendarMonths(start, diffMonths);\n start = adapter.addCalendarDays(start, diffDays);\n end = adapter.addCalendarYears(end, diffYears);\n end = adapter.addCalendarMonths(end, diffMonths);\n end = adapter.addCalendarDays(end, diffDays);\n }\n return new DateRange(start, end);\n }\n static ɵfac = function DefaultMatCalendarRangeStrategy_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || DefaultMatCalendarRangeStrategy)(i0.ɵɵinject(i1.DateAdapter));\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: DefaultMatCalendarRangeStrategy,\n factory: DefaultMatCalendarRangeStrategy.ɵfac\n });\n }\n return DefaultMatCalendarRangeStrategy;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** @docs-private */\nfunction MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY(parent, adapter) {\n return parent || new DefaultMatCalendarRangeStrategy(adapter);\n}\n/** @docs-private */\nconst MAT_CALENDAR_RANGE_STRATEGY_PROVIDER = {\n provide: MAT_DATE_RANGE_SELECTION_STRATEGY,\n deps: [[/*#__PURE__*/new Optional(), /*#__PURE__*/new SkipSelf(), MAT_DATE_RANGE_SELECTION_STRATEGY], DateAdapter],\n useFactory: MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY\n};\nconst DAYS_PER_WEEK = 7;\nlet uniqueIdCounter = 0;\n/**\n * An internal component used to display a single month in the datepicker.\n * @docs-private\n */\nlet MatMonthView = /*#__PURE__*/(() => {\n class MatMonthView {\n _changeDetectorRef = inject(ChangeDetectorRef);\n _dateFormats = inject(MAT_DATE_FORMATS, {\n optional: true\n });\n _dateAdapter = inject(DateAdapter, {\n optional: true\n });\n _dir = inject(Directionality, {\n optional: true\n });\n _rangeStrategy = inject(MAT_DATE_RANGE_SELECTION_STRATEGY, {\n optional: true\n });\n _rerenderSubscription = Subscription.EMPTY;\n /** Flag used to filter out space/enter keyup events that originated outside of the view. */\n _selectionKeyPressed;\n /**\n * The date to display in this month view (everything other than the month and year is ignored).\n */\n get activeDate() {\n return this._activeDate;\n }\n set activeDate(value) {\n const oldActiveDate = this._activeDate;\n const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();\n this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);\n if (!this._hasSameMonthAndYear(oldActiveDate, this._activeDate)) {\n this._init();\n }\n }\n _activeDate;\n /** The currently selected date. */\n get selected() {\n return this._selected;\n }\n set selected(value) {\n if (value instanceof DateRange) {\n this._selected = value;\n } else {\n this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n this._setRanges(this._selected);\n }\n _selected;\n /** The minimum selectable date. */\n get minDate() {\n return this._minDate;\n }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n _minDate;\n /** The maximum selectable date. */\n get maxDate() {\n return this._maxDate;\n }\n set maxDate(value) {\n this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n _maxDate;\n /** Function used to filter which dates are selectable. */\n dateFilter;\n /** Function that can be used to add custom CSS classes to dates. */\n dateClass;\n /** Start of the comparison range. */\n comparisonStart;\n /** End of the comparison range. */\n comparisonEnd;\n /** ARIA Accessible name of the `` */\n startDateAccessibleName;\n /** ARIA Accessible name of the `` */\n endDateAccessibleName;\n /** Origin of active drag, or null when dragging is not active. */\n activeDrag = null;\n /** Emits when a new date is selected. */\n selectedChange = new EventEmitter();\n /** Emits when any date is selected. */\n _userSelection = new EventEmitter();\n /** Emits when the user initiates a date range drag via mouse or touch. */\n dragStarted = new EventEmitter();\n /**\n * Emits when the user completes or cancels a date range drag.\n * Emits null when the drag was canceled or the newly selected date range if completed.\n */\n dragEnded = new EventEmitter();\n /** Emits when any date is activated. */\n activeDateChange = new EventEmitter();\n /** The body of calendar table */\n _matCalendarBody;\n /** The label for this month (e.g. \"January 2017\"). */\n _monthLabel;\n /** Grid of calendar cells representing the dates of the month. */\n _weeks;\n /** The number of blank cells in the first row before the 1st of the month. */\n _firstWeekOffset;\n /** Start value of the currently-shown date range. */\n _rangeStart;\n /** End value of the currently-shown date range. */\n _rangeEnd;\n /** Start value of the currently-shown comparison date range. */\n _comparisonRangeStart;\n /** End value of the currently-shown comparison date range. */\n _comparisonRangeEnd;\n /** Start of the preview range. */\n _previewStart;\n /** End of the preview range. */\n _previewEnd;\n /** Whether the user is currently selecting a range of dates. */\n _isRange;\n /** The date of the month that today falls on. Null if today is in another month. */\n _todayDate;\n /** The names of the weekdays. */\n _weekdays;\n constructor() {\n inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (!this._dateAdapter) {\n throw createMissingDateImplError('DateAdapter');\n }\n if (!this._dateFormats) {\n throw createMissingDateImplError('MAT_DATE_FORMATS');\n }\n }\n this._activeDate = this._dateAdapter.today();\n }\n ngAfterContentInit() {\n this._rerenderSubscription = this._dateAdapter.localeChanges.pipe(startWith(null)).subscribe(() => this._init());\n }\n ngOnChanges(changes) {\n const comparisonChange = changes['comparisonStart'] || changes['comparisonEnd'];\n if (comparisonChange && !comparisonChange.firstChange) {\n this._setRanges(this.selected);\n }\n if (changes['activeDrag'] && !this.activeDrag) {\n this._clearPreview();\n }\n }\n ngOnDestroy() {\n this._rerenderSubscription.unsubscribe();\n }\n /** Handles when a new date is selected. */\n _dateSelected(event) {\n const date = event.value;\n const selectedDate = this._getDateFromDayOfMonth(date);\n let rangeStartDate;\n let rangeEndDate;\n if (this._selected instanceof DateRange) {\n rangeStartDate = this._getDateInCurrentMonth(this._selected.start);\n rangeEndDate = this._getDateInCurrentMonth(this._selected.end);\n } else {\n rangeStartDate = rangeEndDate = this._getDateInCurrentMonth(this._selected);\n }\n if (rangeStartDate !== date || rangeEndDate !== date) {\n this.selectedChange.emit(selectedDate);\n }\n this._userSelection.emit({\n value: selectedDate,\n event: event.event\n });\n this._clearPreview();\n this._changeDetectorRef.markForCheck();\n }\n /**\n * Takes the index of a calendar body cell wrapped in an event as argument. For the date that\n * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with\n * that date.\n *\n * This function is used to match each component's model of the active date with the calendar\n * body cell that was focused. It updates its value of `activeDate` synchronously and updates the\n * parent's value asynchronously via the `activeDateChange` event. The child component receives an\n * updated value asynchronously via the `activeCell` Input.\n */\n _updateActiveDate(event) {\n const month = event.value;\n const oldActiveDate = this._activeDate;\n this.activeDate = this._getDateFromDayOfMonth(month);\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this._activeDate);\n }\n }\n /** Handles keydown events on the calendar body when calendar is in month view. */\n _handleCalendarBodyKeydown(event) {\n // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent\n // disabled ones from being selected. This may not be ideal, we should look into whether\n // navigation should skip over disabled dates, and if so, how to implement that efficiently.\n const oldActiveDate = this._activeDate;\n const isRtl = this._isRtl();\n switch (event.keyCode) {\n case LEFT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? 1 : -1);\n break;\n case RIGHT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, isRtl ? -1 : 1);\n break;\n case UP_ARROW:\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, -7);\n break;\n case DOWN_ARROW:\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 7);\n break;\n case HOME:\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, 1 - this._dateAdapter.getDate(this._activeDate));\n break;\n case END:\n this.activeDate = this._dateAdapter.addCalendarDays(this._activeDate, this._dateAdapter.getNumDaysInMonth(this._activeDate) - this._dateAdapter.getDate(this._activeDate));\n break;\n case PAGE_UP:\n this.activeDate = event.altKey ? this._dateAdapter.addCalendarYears(this._activeDate, -1) : this._dateAdapter.addCalendarMonths(this._activeDate, -1);\n break;\n case PAGE_DOWN:\n this.activeDate = event.altKey ? this._dateAdapter.addCalendarYears(this._activeDate, 1) : this._dateAdapter.addCalendarMonths(this._activeDate, 1);\n break;\n case ENTER:\n case SPACE:\n this._selectionKeyPressed = true;\n if (this._canSelect(this._activeDate)) {\n // Prevent unexpected default actions such as form submission.\n // Note that we only prevent the default action here while the selection happens in\n // `keyup` below. We can't do the selection here, because it can cause the calendar to\n // reopen if focus is restored immediately. We also can't call `preventDefault` on `keyup`\n // because it's too late (see #23305).\n event.preventDefault();\n }\n return;\n case ESCAPE:\n // Abort the current range selection if the user presses escape mid-selection.\n if (this._previewEnd != null && !hasModifierKey(event)) {\n this._clearPreview();\n // If a drag is in progress, cancel the drag without changing the\n // current selection.\n if (this.activeDrag) {\n this.dragEnded.emit({\n value: null,\n event\n });\n } else {\n this.selectedChange.emit(null);\n this._userSelection.emit({\n value: null,\n event\n });\n }\n event.preventDefault();\n event.stopPropagation(); // Prevents the overlay from closing.\n }\n return;\n default:\n // Don't prevent default or focus active cell on keys that we don't explicitly handle.\n return;\n }\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n this._focusActiveCellAfterViewChecked();\n }\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\n }\n /** Handles keyup events on the calendar body when calendar is in month view. */\n _handleCalendarBodyKeyup(event) {\n if (event.keyCode === SPACE || event.keyCode === ENTER) {\n if (this._selectionKeyPressed && this._canSelect(this._activeDate)) {\n this._dateSelected({\n value: this._dateAdapter.getDate(this._activeDate),\n event\n });\n }\n this._selectionKeyPressed = false;\n }\n }\n /** Initializes this month view. */\n _init() {\n this._setRanges(this.selected);\n this._todayDate = this._getCellCompareValue(this._dateAdapter.today());\n this._monthLabel = this._dateFormats.display.monthLabel ? this._dateAdapter.format(this.activeDate, this._dateFormats.display.monthLabel) : this._dateAdapter.getMonthNames('short')[this._dateAdapter.getMonth(this.activeDate)].toLocaleUpperCase();\n let firstOfMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), 1);\n this._firstWeekOffset = (DAYS_PER_WEEK + this._dateAdapter.getDayOfWeek(firstOfMonth) - this._dateAdapter.getFirstDayOfWeek()) % DAYS_PER_WEEK;\n this._initWeekdays();\n this._createWeekCells();\n this._changeDetectorRef.markForCheck();\n }\n /** Focuses the active cell after the microtask queue is empty. */\n _focusActiveCell(movePreview) {\n this._matCalendarBody._focusActiveCell(movePreview);\n }\n /** Focuses the active cell after change detection has run and the microtask queue is empty. */\n _focusActiveCellAfterViewChecked() {\n this._matCalendarBody._scheduleFocusActiveCellAfterViewChecked();\n }\n /** Called when the user has activated a new cell and the preview needs to be updated. */\n _previewChanged({\n event,\n value: cell\n }) {\n if (this._rangeStrategy) {\n // We can assume that this will be a range, because preview\n // events aren't fired for single date selections.\n const value = cell ? cell.rawValue : null;\n const previewRange = this._rangeStrategy.createPreview(value, this.selected, event);\n this._previewStart = this._getCellCompareValue(previewRange.start);\n this._previewEnd = this._getCellCompareValue(previewRange.end);\n if (this.activeDrag && value) {\n const dragRange = this._rangeStrategy.createDrag?.(this.activeDrag.value, this.selected, value, event);\n if (dragRange) {\n this._previewStart = this._getCellCompareValue(dragRange.start);\n this._previewEnd = this._getCellCompareValue(dragRange.end);\n }\n }\n // Note that here we need to use `detectChanges`, rather than `markForCheck`, because\n // the way `_focusActiveCell` is set up at the moment makes it fire at the wrong time\n // when navigating one month back using the keyboard which will cause this handler\n // to throw a \"changed after checked\" error when updating the preview state.\n this._changeDetectorRef.detectChanges();\n }\n }\n /**\n * Called when the user has ended a drag. If the drag/drop was successful,\n * computes and emits the new range selection.\n */\n _dragEnded(event) {\n if (!this.activeDrag) return;\n if (event.value) {\n // Propagate drag effect\n const dragDropResult = this._rangeStrategy?.createDrag?.(this.activeDrag.value, this.selected, event.value, event.event);\n this.dragEnded.emit({\n value: dragDropResult ?? null,\n event: event.event\n });\n } else {\n this.dragEnded.emit({\n value: null,\n event: event.event\n });\n }\n }\n /**\n * Takes a day of the month and returns a new date in the same month and year as the currently\n * active date. The returned date will have the same day of the month as the argument date.\n */\n _getDateFromDayOfMonth(dayOfMonth) {\n return this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), dayOfMonth);\n }\n /** Initializes the weekdays. */\n _initWeekdays() {\n const firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek();\n const narrowWeekdays = this._dateAdapter.getDayOfWeekNames('narrow');\n const longWeekdays = this._dateAdapter.getDayOfWeekNames('long');\n // Rotate the labels for days of the week based on the configured first day of the week.\n let weekdays = longWeekdays.map((long, i) => {\n return {\n long,\n narrow: narrowWeekdays[i],\n id: uniqueIdCounter++\n };\n });\n this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));\n }\n /** Creates MatCalendarCells for the dates in this month. */\n _createWeekCells() {\n const daysInMonth = this._dateAdapter.getNumDaysInMonth(this.activeDate);\n const dateNames = this._dateAdapter.getDateNames();\n this._weeks = [[]];\n for (let i = 0, cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) {\n if (cell == DAYS_PER_WEEK) {\n this._weeks.push([]);\n cell = 0;\n }\n const date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), i + 1);\n const enabled = this._shouldEnableDate(date);\n const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);\n const cellClasses = this.dateClass ? this.dateClass(date, 'month') : undefined;\n this._weeks[this._weeks.length - 1].push(new MatCalendarCell(i + 1, dateNames[i], ariaLabel, enabled, cellClasses, this._getCellCompareValue(date), date));\n }\n }\n /** Date filter for the month */\n _shouldEnableDate(date) {\n return !!date && (!this.minDate || this._dateAdapter.compareDate(date, this.minDate) >= 0) && (!this.maxDate || this._dateAdapter.compareDate(date, this.maxDate) <= 0) && (!this.dateFilter || this.dateFilter(date));\n }\n /**\n * Gets the date in this month that the given Date falls on.\n * Returns null if the given Date is in another month.\n */\n _getDateInCurrentMonth(date) {\n return date && this._hasSameMonthAndYear(date, this.activeDate) ? this._dateAdapter.getDate(date) : null;\n }\n /** Checks whether the 2 dates are non-null and fall within the same month of the same year. */\n _hasSameMonthAndYear(d1, d2) {\n return !!(d1 && d2 && this._dateAdapter.getMonth(d1) == this._dateAdapter.getMonth(d2) && this._dateAdapter.getYear(d1) == this._dateAdapter.getYear(d2));\n }\n /** Gets the value that will be used to one cell to another. */\n _getCellCompareValue(date) {\n if (date) {\n // We use the time since the Unix epoch to compare dates in this view, rather than the\n // cell values, because we need to support ranges that span across multiple months/years.\n const year = this._dateAdapter.getYear(date);\n const month = this._dateAdapter.getMonth(date);\n const day = this._dateAdapter.getDate(date);\n return new Date(year, month, day).getTime();\n }\n return null;\n }\n /** Determines whether the user has the RTL layout direction. */\n _isRtl() {\n return this._dir && this._dir.value === 'rtl';\n }\n /** Sets the current range based on a model value. */\n _setRanges(selectedValue) {\n if (selectedValue instanceof DateRange) {\n this._rangeStart = this._getCellCompareValue(selectedValue.start);\n this._rangeEnd = this._getCellCompareValue(selectedValue.end);\n this._isRange = true;\n } else {\n this._rangeStart = this._rangeEnd = this._getCellCompareValue(selectedValue);\n this._isRange = false;\n }\n this._comparisonRangeStart = this._getCellCompareValue(this.comparisonStart);\n this._comparisonRangeEnd = this._getCellCompareValue(this.comparisonEnd);\n }\n /** Gets whether a date can be selected in the month view. */\n _canSelect(date) {\n return !this.dateFilter || this.dateFilter(date);\n }\n /** Clears out preview state. */\n _clearPreview() {\n this._previewStart = this._previewEnd = null;\n }\n static ɵfac = function MatMonthView_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatMonthView)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatMonthView,\n selectors: [[\"mat-month-view\"]],\n viewQuery: function MatMonthView_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(MatCalendarBody, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._matCalendarBody = _t.first);\n }\n },\n inputs: {\n activeDate: \"activeDate\",\n selected: \"selected\",\n minDate: \"minDate\",\n maxDate: \"maxDate\",\n dateFilter: \"dateFilter\",\n dateClass: \"dateClass\",\n comparisonStart: \"comparisonStart\",\n comparisonEnd: \"comparisonEnd\",\n startDateAccessibleName: \"startDateAccessibleName\",\n endDateAccessibleName: \"endDateAccessibleName\",\n activeDrag: \"activeDrag\"\n },\n outputs: {\n selectedChange: \"selectedChange\",\n _userSelection: \"_userSelection\",\n dragStarted: \"dragStarted\",\n dragEnded: \"dragEnded\",\n activeDateChange: \"activeDateChange\"\n },\n exportAs: [\"matMonthView\"],\n features: [i0.ɵɵNgOnChangesFeature],\n decls: 8,\n vars: 14,\n consts: [[\"role\", \"grid\", 1, \"mat-calendar-table\"], [1, \"mat-calendar-table-header\"], [\"scope\", \"col\"], [\"aria-hidden\", \"true\"], [\"colspan\", \"7\", 1, \"mat-calendar-table-header-divider\"], [\"mat-calendar-body\", \"\", 3, \"selectedValueChange\", \"activeDateChange\", \"previewChange\", \"dragStarted\", \"dragEnded\", \"keyup\", \"keydown\", \"label\", \"rows\", \"todayValue\", \"startValue\", \"endValue\", \"comparisonStart\", \"comparisonEnd\", \"previewStart\", \"previewEnd\", \"isRange\", \"labelMinRequiredCells\", \"activeCell\", \"startDateAccessibleName\", \"endDateAccessibleName\"], [1, \"cdk-visually-hidden\"]],\n template: function MatMonthView_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"table\", 0)(1, \"thead\", 1)(2, \"tr\");\n i0.ɵɵrepeaterCreate(3, MatMonthView_For_4_Template, 5, 2, \"th\", 2, _forTrack1);\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(5, \"tr\", 3);\n i0.ɵɵelement(6, \"th\", 4);\n i0.ɵɵelementEnd()();\n i0.ɵɵelementStart(7, \"tbody\", 5);\n i0.ɵɵlistener(\"selectedValueChange\", function MatMonthView_Template_tbody_selectedValueChange_7_listener($event) {\n return ctx._dateSelected($event);\n })(\"activeDateChange\", function MatMonthView_Template_tbody_activeDateChange_7_listener($event) {\n return ctx._updateActiveDate($event);\n })(\"previewChange\", function MatMonthView_Template_tbody_previewChange_7_listener($event) {\n return ctx._previewChanged($event);\n })(\"dragStarted\", function MatMonthView_Template_tbody_dragStarted_7_listener($event) {\n return ctx.dragStarted.emit($event);\n })(\"dragEnded\", function MatMonthView_Template_tbody_dragEnded_7_listener($event) {\n return ctx._dragEnded($event);\n })(\"keyup\", function MatMonthView_Template_tbody_keyup_7_listener($event) {\n return ctx._handleCalendarBodyKeyup($event);\n })(\"keydown\", function MatMonthView_Template_tbody_keydown_7_listener($event) {\n return ctx._handleCalendarBodyKeydown($event);\n });\n i0.ɵɵelementEnd()();\n }\n if (rf & 2) {\n i0.ɵɵadvance(3);\n i0.ɵɵrepeater(ctx._weekdays);\n i0.ɵɵadvance(4);\n i0.ɵɵproperty(\"label\", ctx._monthLabel)(\"rows\", ctx._weeks)(\"todayValue\", ctx._todayDate)(\"startValue\", ctx._rangeStart)(\"endValue\", ctx._rangeEnd)(\"comparisonStart\", ctx._comparisonRangeStart)(\"comparisonEnd\", ctx._comparisonRangeEnd)(\"previewStart\", ctx._previewStart)(\"previewEnd\", ctx._previewEnd)(\"isRange\", ctx._isRange)(\"labelMinRequiredCells\", 3)(\"activeCell\", ctx._dateAdapter.getDate(ctx.activeDate) - 1)(\"startDateAccessibleName\", ctx.startDateAccessibleName)(\"endDateAccessibleName\", ctx.endDateAccessibleName);\n }\n },\n dependencies: [MatCalendarBody],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatMonthView;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nconst yearsPerPage = 24;\nconst yearsPerRow = 4;\n/**\n * An internal component used to display a year selector in the datepicker.\n * @docs-private\n */\nlet MatMultiYearView = /*#__PURE__*/(() => {\n class MatMultiYearView {\n _changeDetectorRef = inject(ChangeDetectorRef);\n _dateAdapter = inject(DateAdapter, {\n optional: true\n });\n _dir = inject(Directionality, {\n optional: true\n });\n _rerenderSubscription = Subscription.EMPTY;\n /** Flag used to filter out space/enter keyup events that originated outside of the view. */\n _selectionKeyPressed;\n /** The date to display in this multi-year view (everything other than the year is ignored). */\n get activeDate() {\n return this._activeDate;\n }\n set activeDate(value) {\n let oldActiveDate = this._activeDate;\n const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();\n this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);\n if (!isSameMultiYearView(this._dateAdapter, oldActiveDate, this._activeDate, this.minDate, this.maxDate)) {\n this._init();\n }\n }\n _activeDate;\n /** The currently selected date. */\n get selected() {\n return this._selected;\n }\n set selected(value) {\n if (value instanceof DateRange) {\n this._selected = value;\n } else {\n this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n this._setSelectedYear(value);\n }\n _selected;\n /** The minimum selectable date. */\n get minDate() {\n return this._minDate;\n }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n _minDate;\n /** The maximum selectable date. */\n get maxDate() {\n return this._maxDate;\n }\n set maxDate(value) {\n this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n _maxDate;\n /** A function used to filter which dates are selectable. */\n dateFilter;\n /** Function that can be used to add custom CSS classes to date cells. */\n dateClass;\n /** Emits when a new year is selected. */\n selectedChange = new EventEmitter();\n /** Emits the selected year. This doesn't imply a change on the selected date */\n yearSelected = new EventEmitter();\n /** Emits when any date is activated. */\n activeDateChange = new EventEmitter();\n /** The body of calendar table */\n _matCalendarBody;\n /** Grid of calendar cells representing the currently displayed years. */\n _years;\n /** The year that today falls on. */\n _todayYear;\n /** The year of the selected date. Null if the selected date is null. */\n _selectedYear;\n constructor() {\n if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw createMissingDateImplError('DateAdapter');\n }\n this._activeDate = this._dateAdapter.today();\n }\n ngAfterContentInit() {\n this._rerenderSubscription = this._dateAdapter.localeChanges.pipe(startWith(null)).subscribe(() => this._init());\n }\n ngOnDestroy() {\n this._rerenderSubscription.unsubscribe();\n }\n /** Initializes this multi-year view. */\n _init() {\n this._todayYear = this._dateAdapter.getYear(this._dateAdapter.today());\n // We want a range years such that we maximize the number of\n // enabled dates visible at once. This prevents issues where the minimum year\n // is the last item of a page OR the maximum year is the first item of a page.\n // The offset from the active year to the \"slot\" for the starting year is the\n // *actual* first rendered year in the multi-year view.\n const activeYear = this._dateAdapter.getYear(this._activeDate);\n const minYearOfPage = activeYear - getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate);\n this._years = [];\n for (let i = 0, row = []; i < yearsPerPage; i++) {\n row.push(minYearOfPage + i);\n if (row.length == yearsPerRow) {\n this._years.push(row.map(year => this._createCellForYear(year)));\n row = [];\n }\n }\n this._changeDetectorRef.markForCheck();\n }\n /** Handles when a new year is selected. */\n _yearSelected(event) {\n const year = event.value;\n const selectedYear = this._dateAdapter.createDate(year, 0, 1);\n const selectedDate = this._getDateFromYear(year);\n this.yearSelected.emit(selectedYear);\n this.selectedChange.emit(selectedDate);\n }\n /**\n * Takes the index of a calendar body cell wrapped in an event as argument. For the date that\n * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with\n * that date.\n *\n * This function is used to match each component's model of the active date with the calendar\n * body cell that was focused. It updates its value of `activeDate` synchronously and updates the\n * parent's value asynchronously via the `activeDateChange` event. The child component receives an\n * updated value asynchronously via the `activeCell` Input.\n */\n _updateActiveDate(event) {\n const year = event.value;\n const oldActiveDate = this._activeDate;\n this.activeDate = this._getDateFromYear(year);\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n }\n }\n /** Handles keydown events on the calendar body when calendar is in multi-year view. */\n _handleCalendarBodyKeydown(event) {\n const oldActiveDate = this._activeDate;\n const isRtl = this._isRtl();\n switch (event.keyCode) {\n case LEFT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? 1 : -1);\n break;\n case RIGHT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, isRtl ? -1 : 1);\n break;\n case UP_ARROW:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -yearsPerRow);\n break;\n case DOWN_ARROW:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerRow);\n break;\n case HOME:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, -getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate));\n break;\n case END:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, yearsPerPage - getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate) - 1);\n break;\n case PAGE_UP:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -yearsPerPage * 10 : -yearsPerPage);\n break;\n case PAGE_DOWN:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);\n break;\n case ENTER:\n case SPACE:\n // Note that we only prevent the default action here while the selection happens in\n // `keyup` below. We can't do the selection here, because it can cause the calendar to\n // reopen if focus is restored immediately. We also can't call `preventDefault` on `keyup`\n // because it's too late (see #23305).\n this._selectionKeyPressed = true;\n break;\n default:\n // Don't prevent default or focus active cell on keys that we don't explicitly handle.\n return;\n }\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n }\n this._focusActiveCellAfterViewChecked();\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\n }\n /** Handles keyup events on the calendar body when calendar is in multi-year view. */\n _handleCalendarBodyKeyup(event) {\n if (event.keyCode === SPACE || event.keyCode === ENTER) {\n if (this._selectionKeyPressed) {\n this._yearSelected({\n value: this._dateAdapter.getYear(this._activeDate),\n event\n });\n }\n this._selectionKeyPressed = false;\n }\n }\n _getActiveCell() {\n return getActiveOffset(this._dateAdapter, this.activeDate, this.minDate, this.maxDate);\n }\n /** Focuses the active cell after the microtask queue is empty. */\n _focusActiveCell() {\n this._matCalendarBody._focusActiveCell();\n }\n /** Focuses the active cell after change detection has run and the microtask queue is empty. */\n _focusActiveCellAfterViewChecked() {\n this._matCalendarBody._scheduleFocusActiveCellAfterViewChecked();\n }\n /**\n * Takes a year and returns a new date on the same day and month as the currently active date\n * The returned date will have the same year as the argument date.\n */\n _getDateFromYear(year) {\n const activeMonth = this._dateAdapter.getMonth(this.activeDate);\n const daysInMonth = this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, activeMonth, 1));\n const normalizedDate = this._dateAdapter.createDate(year, activeMonth, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth));\n return normalizedDate;\n }\n /** Creates an MatCalendarCell for the given year. */\n _createCellForYear(year) {\n const date = this._dateAdapter.createDate(year, 0, 1);\n const yearName = this._dateAdapter.getYearName(date);\n const cellClasses = this.dateClass ? this.dateClass(date, 'multi-year') : undefined;\n return new MatCalendarCell(year, yearName, yearName, this._shouldEnableYear(year), cellClasses);\n }\n /** Whether the given year is enabled. */\n _shouldEnableYear(year) {\n // disable if the year is greater than maxDate lower than minDate\n if (year === undefined || year === null || this.maxDate && year > this._dateAdapter.getYear(this.maxDate) || this.minDate && year < this._dateAdapter.getYear(this.minDate)) {\n return false;\n }\n // enable if it reaches here and there's no filter defined\n if (!this.dateFilter) {\n return true;\n }\n const firstOfYear = this._dateAdapter.createDate(year, 0, 1);\n // If any date in the year is enabled count the year as enabled.\n for (let date = firstOfYear; this._dateAdapter.getYear(date) == year; date = this._dateAdapter.addCalendarDays(date, 1)) {\n if (this.dateFilter(date)) {\n return true;\n }\n }\n return false;\n }\n /** Determines whether the user has the RTL layout direction. */\n _isRtl() {\n return this._dir && this._dir.value === 'rtl';\n }\n /** Sets the currently-highlighted year based on a model value. */\n _setSelectedYear(value) {\n this._selectedYear = null;\n if (value instanceof DateRange) {\n const displayValue = value.start || value.end;\n if (displayValue) {\n this._selectedYear = this._dateAdapter.getYear(displayValue);\n }\n } else if (value) {\n this._selectedYear = this._dateAdapter.getYear(value);\n }\n }\n static ɵfac = function MatMultiYearView_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatMultiYearView)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatMultiYearView,\n selectors: [[\"mat-multi-year-view\"]],\n viewQuery: function MatMultiYearView_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(MatCalendarBody, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._matCalendarBody = _t.first);\n }\n },\n inputs: {\n activeDate: \"activeDate\",\n selected: \"selected\",\n minDate: \"minDate\",\n maxDate: \"maxDate\",\n dateFilter: \"dateFilter\",\n dateClass: \"dateClass\"\n },\n outputs: {\n selectedChange: \"selectedChange\",\n yearSelected: \"yearSelected\",\n activeDateChange: \"activeDateChange\"\n },\n exportAs: [\"matMultiYearView\"],\n decls: 5,\n vars: 7,\n consts: [[\"role\", \"grid\", 1, \"mat-calendar-table\"], [\"aria-hidden\", \"true\", 1, \"mat-calendar-table-header\"], [\"colspan\", \"4\", 1, \"mat-calendar-table-header-divider\"], [\"mat-calendar-body\", \"\", 3, \"selectedValueChange\", \"activeDateChange\", \"keyup\", \"keydown\", \"rows\", \"todayValue\", \"startValue\", \"endValue\", \"numCols\", \"cellAspectRatio\", \"activeCell\"]],\n template: function MatMultiYearView_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"table\", 0)(1, \"thead\", 1)(2, \"tr\");\n i0.ɵɵelement(3, \"th\", 2);\n i0.ɵɵelementEnd()();\n i0.ɵɵelementStart(4, \"tbody\", 3);\n i0.ɵɵlistener(\"selectedValueChange\", function MatMultiYearView_Template_tbody_selectedValueChange_4_listener($event) {\n return ctx._yearSelected($event);\n })(\"activeDateChange\", function MatMultiYearView_Template_tbody_activeDateChange_4_listener($event) {\n return ctx._updateActiveDate($event);\n })(\"keyup\", function MatMultiYearView_Template_tbody_keyup_4_listener($event) {\n return ctx._handleCalendarBodyKeyup($event);\n })(\"keydown\", function MatMultiYearView_Template_tbody_keydown_4_listener($event) {\n return ctx._handleCalendarBodyKeydown($event);\n });\n i0.ɵɵelementEnd()();\n }\n if (rf & 2) {\n i0.ɵɵadvance(4);\n i0.ɵɵproperty(\"rows\", ctx._years)(\"todayValue\", ctx._todayYear)(\"startValue\", ctx._selectedYear)(\"endValue\", ctx._selectedYear)(\"numCols\", 4)(\"cellAspectRatio\", 4 / 7)(\"activeCell\", ctx._getActiveCell());\n }\n },\n dependencies: [MatCalendarBody],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatMultiYearView;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nfunction isSameMultiYearView(dateAdapter, date1, date2, minDate, maxDate) {\n const year1 = dateAdapter.getYear(date1);\n const year2 = dateAdapter.getYear(date2);\n const startingYear = getStartingYear(dateAdapter, minDate, maxDate);\n return Math.floor((year1 - startingYear) / yearsPerPage) === Math.floor((year2 - startingYear) / yearsPerPage);\n}\n/**\n * When the multi-year view is first opened, the active year will be in view.\n * So we compute how many years are between the active year and the *slot* where our\n * \"startingYear\" will render when paged into view.\n */\nfunction getActiveOffset(dateAdapter, activeDate, minDate, maxDate) {\n const activeYear = dateAdapter.getYear(activeDate);\n return euclideanModulo(activeYear - getStartingYear(dateAdapter, minDate, maxDate), yearsPerPage);\n}\n/**\n * We pick a \"starting\" year such that either the maximum year would be at the end\n * or the minimum year would be at the beginning of a page.\n */\nfunction getStartingYear(dateAdapter, minDate, maxDate) {\n let startingYear = 0;\n if (maxDate) {\n const maxYear = dateAdapter.getYear(maxDate);\n startingYear = maxYear - yearsPerPage + 1;\n } else if (minDate) {\n startingYear = dateAdapter.getYear(minDate);\n }\n return startingYear;\n}\n/** Gets remainder that is non-negative, even if first number is negative */\nfunction euclideanModulo(a, b) {\n return (a % b + b) % b;\n}\n\n/**\n * An internal component used to display a single year in the datepicker.\n * @docs-private\n */\nlet MatYearView = /*#__PURE__*/(() => {\n class MatYearView {\n _changeDetectorRef = inject(ChangeDetectorRef);\n _dateFormats = inject(MAT_DATE_FORMATS, {\n optional: true\n });\n _dateAdapter = inject(DateAdapter, {\n optional: true\n });\n _dir = inject(Directionality, {\n optional: true\n });\n _rerenderSubscription = Subscription.EMPTY;\n /** Flag used to filter out space/enter keyup events that originated outside of the view. */\n _selectionKeyPressed;\n /** The date to display in this year view (everything other than the year is ignored). */\n get activeDate() {\n return this._activeDate;\n }\n set activeDate(value) {\n let oldActiveDate = this._activeDate;\n const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();\n this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);\n if (this._dateAdapter.getYear(oldActiveDate) !== this._dateAdapter.getYear(this._activeDate)) {\n this._init();\n }\n }\n _activeDate;\n /** The currently selected date. */\n get selected() {\n return this._selected;\n }\n set selected(value) {\n if (value instanceof DateRange) {\n this._selected = value;\n } else {\n this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n this._setSelectedMonth(value);\n }\n _selected;\n /** The minimum selectable date. */\n get minDate() {\n return this._minDate;\n }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n _minDate;\n /** The maximum selectable date. */\n get maxDate() {\n return this._maxDate;\n }\n set maxDate(value) {\n this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n _maxDate;\n /** A function used to filter which dates are selectable. */\n dateFilter;\n /** Function that can be used to add custom CSS classes to date cells. */\n dateClass;\n /** Emits when a new month is selected. */\n selectedChange = new EventEmitter();\n /** Emits the selected month. This doesn't imply a change on the selected date */\n monthSelected = new EventEmitter();\n /** Emits when any date is activated. */\n activeDateChange = new EventEmitter();\n /** The body of calendar table */\n _matCalendarBody;\n /** Grid of calendar cells representing the months of the year. */\n _months;\n /** The label for this year (e.g. \"2017\"). */\n _yearLabel;\n /** The month in this year that today falls on. Null if today is in a different year. */\n _todayMonth;\n /**\n * The month in this year that the selected Date falls on.\n * Null if the selected Date is in a different year.\n */\n _selectedMonth;\n constructor() {\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (!this._dateAdapter) {\n throw createMissingDateImplError('DateAdapter');\n }\n if (!this._dateFormats) {\n throw createMissingDateImplError('MAT_DATE_FORMATS');\n }\n }\n this._activeDate = this._dateAdapter.today();\n }\n ngAfterContentInit() {\n this._rerenderSubscription = this._dateAdapter.localeChanges.pipe(startWith(null)).subscribe(() => this._init());\n }\n ngOnDestroy() {\n this._rerenderSubscription.unsubscribe();\n }\n /** Handles when a new month is selected. */\n _monthSelected(event) {\n const month = event.value;\n const selectedMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);\n this.monthSelected.emit(selectedMonth);\n const selectedDate = this._getDateFromMonth(month);\n this.selectedChange.emit(selectedDate);\n }\n /**\n * Takes the index of a calendar body cell wrapped in an event as argument. For the date that\n * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with\n * that date.\n *\n * This function is used to match each component's model of the active date with the calendar\n * body cell that was focused. It updates its value of `activeDate` synchronously and updates the\n * parent's value asynchronously via the `activeDateChange` event. The child component receives an\n * updated value asynchronously via the `activeCell` Input.\n */\n _updateActiveDate(event) {\n const month = event.value;\n const oldActiveDate = this._activeDate;\n this.activeDate = this._getDateFromMonth(month);\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n }\n }\n /** Handles keydown events on the calendar body when calendar is in year view. */\n _handleCalendarBodyKeydown(event) {\n // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent\n // disabled ones from being selected. This may not be ideal, we should look into whether\n // navigation should skip over disabled dates, and if so, how to implement that efficiently.\n const oldActiveDate = this._activeDate;\n const isRtl = this._isRtl();\n switch (event.keyCode) {\n case LEFT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, isRtl ? 1 : -1);\n break;\n case RIGHT_ARROW:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, isRtl ? -1 : 1);\n break;\n case UP_ARROW:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -4);\n break;\n case DOWN_ARROW:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 4);\n break;\n case HOME:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, -this._dateAdapter.getMonth(this._activeDate));\n break;\n case END:\n this.activeDate = this._dateAdapter.addCalendarMonths(this._activeDate, 11 - this._dateAdapter.getMonth(this._activeDate));\n break;\n case PAGE_UP:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? -10 : -1);\n break;\n case PAGE_DOWN:\n this.activeDate = this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);\n break;\n case ENTER:\n case SPACE:\n // Note that we only prevent the default action here while the selection happens in\n // `keyup` below. We can't do the selection here, because it can cause the calendar to\n // reopen if focus is restored immediately. We also can't call `preventDefault` on `keyup`\n // because it's too late (see #23305).\n this._selectionKeyPressed = true;\n break;\n default:\n // Don't prevent default or focus active cell on keys that we don't explicitly handle.\n return;\n }\n if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {\n this.activeDateChange.emit(this.activeDate);\n this._focusActiveCellAfterViewChecked();\n }\n // Prevent unexpected default actions such as form submission.\n event.preventDefault();\n }\n /** Handles keyup events on the calendar body when calendar is in year view. */\n _handleCalendarBodyKeyup(event) {\n if (event.keyCode === SPACE || event.keyCode === ENTER) {\n if (this._selectionKeyPressed) {\n this._monthSelected({\n value: this._dateAdapter.getMonth(this._activeDate),\n event\n });\n }\n this._selectionKeyPressed = false;\n }\n }\n /** Initializes this year view. */\n _init() {\n this._setSelectedMonth(this.selected);\n this._todayMonth = this._getMonthInCurrentYear(this._dateAdapter.today());\n this._yearLabel = this._dateAdapter.getYearName(this.activeDate);\n let monthNames = this._dateAdapter.getMonthNames('short');\n // First row of months only contains 5 elements so we can fit the year label on the same row.\n this._months = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]].map(row => row.map(month => this._createCellForMonth(month, monthNames[month])));\n this._changeDetectorRef.markForCheck();\n }\n /** Focuses the active cell after the microtask queue is empty. */\n _focusActiveCell() {\n this._matCalendarBody._focusActiveCell();\n }\n /** Schedules the matCalendarBody to focus the active cell after change detection has run */\n _focusActiveCellAfterViewChecked() {\n this._matCalendarBody._scheduleFocusActiveCellAfterViewChecked();\n }\n /**\n * Gets the month in this year that the given Date falls on.\n * Returns null if the given Date is in another year.\n */\n _getMonthInCurrentYear(date) {\n return date && this._dateAdapter.getYear(date) == this._dateAdapter.getYear(this.activeDate) ? this._dateAdapter.getMonth(date) : null;\n }\n /**\n * Takes a month and returns a new date in the same day and year as the currently active date.\n * The returned date will have the same month as the argument date.\n */\n _getDateFromMonth(month) {\n const normalizedDate = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);\n const daysInMonth = this._dateAdapter.getNumDaysInMonth(normalizedDate);\n return this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth));\n }\n /** Creates an MatCalendarCell for the given month. */\n _createCellForMonth(month, monthName) {\n const date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);\n const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.monthYearA11yLabel);\n const cellClasses = this.dateClass ? this.dateClass(date, 'year') : undefined;\n return new MatCalendarCell(month, monthName.toLocaleUpperCase(), ariaLabel, this._shouldEnableMonth(month), cellClasses);\n }\n /** Whether the given month is enabled. */\n _shouldEnableMonth(month) {\n const activeYear = this._dateAdapter.getYear(this.activeDate);\n if (month === undefined || month === null || this._isYearAndMonthAfterMaxDate(activeYear, month) || this._isYearAndMonthBeforeMinDate(activeYear, month)) {\n return false;\n }\n if (!this.dateFilter) {\n return true;\n }\n const firstOfMonth = this._dateAdapter.createDate(activeYear, month, 1);\n // If any date in the month is enabled count the month as enabled.\n for (let date = firstOfMonth; this._dateAdapter.getMonth(date) == month; date = this._dateAdapter.addCalendarDays(date, 1)) {\n if (this.dateFilter(date)) {\n return true;\n }\n }\n return false;\n }\n /**\n * Tests whether the combination month/year is after this.maxDate, considering\n * just the month and year of this.maxDate\n */\n _isYearAndMonthAfterMaxDate(year, month) {\n if (this.maxDate) {\n const maxYear = this._dateAdapter.getYear(this.maxDate);\n const maxMonth = this._dateAdapter.getMonth(this.maxDate);\n return year > maxYear || year === maxYear && month > maxMonth;\n }\n return false;\n }\n /**\n * Tests whether the combination month/year is before this.minDate, considering\n * just the month and year of this.minDate\n */\n _isYearAndMonthBeforeMinDate(year, month) {\n if (this.minDate) {\n const minYear = this._dateAdapter.getYear(this.minDate);\n const minMonth = this._dateAdapter.getMonth(this.minDate);\n return year < minYear || year === minYear && month < minMonth;\n }\n return false;\n }\n /** Determines whether the user has the RTL layout direction. */\n _isRtl() {\n return this._dir && this._dir.value === 'rtl';\n }\n /** Sets the currently-selected month based on a model value. */\n _setSelectedMonth(value) {\n if (value instanceof DateRange) {\n this._selectedMonth = this._getMonthInCurrentYear(value.start) || this._getMonthInCurrentYear(value.end);\n } else {\n this._selectedMonth = this._getMonthInCurrentYear(value);\n }\n }\n static ɵfac = function MatYearView_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatYearView)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatYearView,\n selectors: [[\"mat-year-view\"]],\n viewQuery: function MatYearView_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(MatCalendarBody, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._matCalendarBody = _t.first);\n }\n },\n inputs: {\n activeDate: \"activeDate\",\n selected: \"selected\",\n minDate: \"minDate\",\n maxDate: \"maxDate\",\n dateFilter: \"dateFilter\",\n dateClass: \"dateClass\"\n },\n outputs: {\n selectedChange: \"selectedChange\",\n monthSelected: \"monthSelected\",\n activeDateChange: \"activeDateChange\"\n },\n exportAs: [\"matYearView\"],\n decls: 5,\n vars: 9,\n consts: [[\"role\", \"grid\", 1, \"mat-calendar-table\"], [\"aria-hidden\", \"true\", 1, \"mat-calendar-table-header\"], [\"colspan\", \"4\", 1, \"mat-calendar-table-header-divider\"], [\"mat-calendar-body\", \"\", 3, \"selectedValueChange\", \"activeDateChange\", \"keyup\", \"keydown\", \"label\", \"rows\", \"todayValue\", \"startValue\", \"endValue\", \"labelMinRequiredCells\", \"numCols\", \"cellAspectRatio\", \"activeCell\"]],\n template: function MatYearView_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"table\", 0)(1, \"thead\", 1)(2, \"tr\");\n i0.ɵɵelement(3, \"th\", 2);\n i0.ɵɵelementEnd()();\n i0.ɵɵelementStart(4, \"tbody\", 3);\n i0.ɵɵlistener(\"selectedValueChange\", function MatYearView_Template_tbody_selectedValueChange_4_listener($event) {\n return ctx._monthSelected($event);\n })(\"activeDateChange\", function MatYearView_Template_tbody_activeDateChange_4_listener($event) {\n return ctx._updateActiveDate($event);\n })(\"keyup\", function MatYearView_Template_tbody_keyup_4_listener($event) {\n return ctx._handleCalendarBodyKeyup($event);\n })(\"keydown\", function MatYearView_Template_tbody_keydown_4_listener($event) {\n return ctx._handleCalendarBodyKeydown($event);\n });\n i0.ɵɵelementEnd()();\n }\n if (rf & 2) {\n i0.ɵɵadvance(4);\n i0.ɵɵproperty(\"label\", ctx._yearLabel)(\"rows\", ctx._months)(\"todayValue\", ctx._todayMonth)(\"startValue\", ctx._selectedMonth)(\"endValue\", ctx._selectedMonth)(\"labelMinRequiredCells\", 2)(\"numCols\", 4)(\"cellAspectRatio\", 4 / 7)(\"activeCell\", ctx._dateAdapter.getMonth(ctx.activeDate));\n }\n },\n dependencies: [MatCalendarBody],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatYearView;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Default header for MatCalendar */\nlet MatCalendarHeader = /*#__PURE__*/(() => {\n class MatCalendarHeader {\n _intl = inject(MatDatepickerIntl);\n calendar = inject(MatCalendar);\n _dateAdapter = inject(DateAdapter, {\n optional: true\n });\n _dateFormats = inject(MAT_DATE_FORMATS, {\n optional: true\n });\n constructor() {\n inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);\n const changeDetectorRef = inject(ChangeDetectorRef);\n this.calendar.stateChanges.subscribe(() => changeDetectorRef.markForCheck());\n }\n /** The display text for the current calendar view. */\n get periodButtonText() {\n if (this.calendar.currentView == 'month') {\n return this._dateAdapter.format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel).toLocaleUpperCase();\n }\n if (this.calendar.currentView == 'year') {\n return this._dateAdapter.getYearName(this.calendar.activeDate);\n }\n return this._intl.formatYearRange(...this._formatMinAndMaxYearLabels());\n }\n /** The aria description for the current calendar view. */\n get periodButtonDescription() {\n if (this.calendar.currentView == 'month') {\n return this._dateAdapter.format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel).toLocaleUpperCase();\n }\n if (this.calendar.currentView == 'year') {\n return this._dateAdapter.getYearName(this.calendar.activeDate);\n }\n // Format a label for the window of years displayed in the multi-year calendar view. Use\n // `formatYearRangeLabel` because it is TTS friendly.\n return this._intl.formatYearRangeLabel(...this._formatMinAndMaxYearLabels());\n }\n /** The `aria-label` for changing the calendar view. */\n get periodButtonLabel() {\n return this.calendar.currentView == 'month' ? this._intl.switchToMultiYearViewLabel : this._intl.switchToMonthViewLabel;\n }\n /** The label for the previous button. */\n get prevButtonLabel() {\n return {\n 'month': this._intl.prevMonthLabel,\n 'year': this._intl.prevYearLabel,\n 'multi-year': this._intl.prevMultiYearLabel\n }[this.calendar.currentView];\n }\n /** The label for the next button. */\n get nextButtonLabel() {\n return {\n 'month': this._intl.nextMonthLabel,\n 'year': this._intl.nextYearLabel,\n 'multi-year': this._intl.nextMultiYearLabel\n }[this.calendar.currentView];\n }\n /** Handles user clicks on the period label. */\n currentPeriodClicked() {\n this.calendar.currentView = this.calendar.currentView == 'month' ? 'multi-year' : 'month';\n }\n /** Handles user clicks on the previous button. */\n previousClicked() {\n this.calendar.activeDate = this.calendar.currentView == 'month' ? this._dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) : this._dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? -1 : -yearsPerPage);\n }\n /** Handles user clicks on the next button. */\n nextClicked() {\n this.calendar.activeDate = this.calendar.currentView == 'month' ? this._dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) : this._dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? 1 : yearsPerPage);\n }\n /** Whether the previous period button is enabled. */\n previousEnabled() {\n if (!this.calendar.minDate) {\n return true;\n }\n return !this.calendar.minDate || !this._isSameView(this.calendar.activeDate, this.calendar.minDate);\n }\n /** Whether the next period button is enabled. */\n nextEnabled() {\n return !this.calendar.maxDate || !this._isSameView(this.calendar.activeDate, this.calendar.maxDate);\n }\n /** Whether the two dates represent the same view in the current view mode (month or year). */\n _isSameView(date1, date2) {\n if (this.calendar.currentView == 'month') {\n return this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2) && this._dateAdapter.getMonth(date1) == this._dateAdapter.getMonth(date2);\n }\n if (this.calendar.currentView == 'year') {\n return this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2);\n }\n // Otherwise we are in 'multi-year' view.\n return isSameMultiYearView(this._dateAdapter, date1, date2, this.calendar.minDate, this.calendar.maxDate);\n }\n /**\n * Format two individual labels for the minimum year and maximum year available in the multi-year\n * calendar view. Returns an array of two strings where the first string is the formatted label\n * for the minimum year, and the second string is the formatted label for the maximum year.\n */\n _formatMinAndMaxYearLabels() {\n // The offset from the active year to the \"slot\" for the starting year is the\n // *actual* first rendered year in the multi-year view, and the last year is\n // just yearsPerPage - 1 away.\n const activeYear = this._dateAdapter.getYear(this.calendar.activeDate);\n const minYearOfPage = activeYear - getActiveOffset(this._dateAdapter, this.calendar.activeDate, this.calendar.minDate, this.calendar.maxDate);\n const maxYearOfPage = minYearOfPage + yearsPerPage - 1;\n const minYearLabel = this._dateAdapter.getYearName(this._dateAdapter.createDate(minYearOfPage, 0, 1));\n const maxYearLabel = this._dateAdapter.getYearName(this._dateAdapter.createDate(maxYearOfPage, 0, 1));\n return [minYearLabel, maxYearLabel];\n }\n _periodButtonLabelId = inject(_IdGenerator).getId('mat-calendar-period-label-');\n static ɵfac = function MatCalendarHeader_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatCalendarHeader)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatCalendarHeader,\n selectors: [[\"mat-calendar-header\"]],\n exportAs: [\"matCalendarHeader\"],\n ngContentSelectors: _c1,\n decls: 17,\n vars: 11,\n consts: [[1, \"mat-calendar-header\"], [1, \"mat-calendar-controls\"], [\"aria-live\", \"polite\", 1, \"cdk-visually-hidden\", 3, \"id\"], [\"mat-button\", \"\", \"type\", \"button\", 1, \"mat-calendar-period-button\", 3, \"click\"], [\"aria-hidden\", \"true\"], [\"viewBox\", \"0 0 10 5\", \"focusable\", \"false\", \"aria-hidden\", \"true\", 1, \"mat-calendar-arrow\"], [\"points\", \"0,0 5,5 10,0\"], [1, \"mat-calendar-spacer\"], [\"mat-icon-button\", \"\", \"type\", \"button\", 1, \"mat-calendar-previous-button\", 3, \"click\", \"disabled\"], [\"viewBox\", \"0 0 24 24\", \"focusable\", \"false\", \"aria-hidden\", \"true\"], [\"d\", \"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"], [\"mat-icon-button\", \"\", \"type\", \"button\", 1, \"mat-calendar-next-button\", 3, \"click\", \"disabled\"], [\"d\", \"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"]],\n template: function MatCalendarHeader_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef();\n i0.ɵɵelementStart(0, \"div\", 0)(1, \"div\", 1)(2, \"span\", 2);\n i0.ɵɵtext(3);\n i0.ɵɵelementEnd();\n i0.ɵɵelementStart(4, \"button\", 3);\n i0.ɵɵlistener(\"click\", function MatCalendarHeader_Template_button_click_4_listener() {\n return ctx.currentPeriodClicked();\n });\n i0.ɵɵelementStart(5, \"span\", 4);\n i0.ɵɵtext(6);\n i0.ɵɵelementEnd();\n i0.ɵɵnamespaceSVG();\n i0.ɵɵelementStart(7, \"svg\", 5);\n i0.ɵɵelement(8, \"polygon\", 6);\n i0.ɵɵelementEnd()();\n i0.ɵɵnamespaceHTML();\n i0.ɵɵelement(9, \"div\", 7);\n i0.ɵɵprojection(10);\n i0.ɵɵelementStart(11, \"button\", 8);\n i0.ɵɵlistener(\"click\", function MatCalendarHeader_Template_button_click_11_listener() {\n return ctx.previousClicked();\n });\n i0.ɵɵnamespaceSVG();\n i0.ɵɵelementStart(12, \"svg\", 9);\n i0.ɵɵelement(13, \"path\", 10);\n i0.ɵɵelementEnd()();\n i0.ɵɵnamespaceHTML();\n i0.ɵɵelementStart(14, \"button\", 11);\n i0.ɵɵlistener(\"click\", function MatCalendarHeader_Template_button_click_14_listener() {\n return ctx.nextClicked();\n });\n i0.ɵɵnamespaceSVG();\n i0.ɵɵelementStart(15, \"svg\", 9);\n i0.ɵɵelement(16, \"path\", 12);\n i0.ɵɵelementEnd()()()();\n }\n if (rf & 2) {\n i0.ɵɵadvance(2);\n i0.ɵɵproperty(\"id\", ctx._periodButtonLabelId);\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate(ctx.periodButtonDescription);\n i0.ɵɵadvance();\n i0.ɵɵattribute(\"aria-label\", ctx.periodButtonLabel)(\"aria-describedby\", ctx._periodButtonLabelId);\n i0.ɵɵadvance(2);\n i0.ɵɵtextInterpolate(ctx.periodButtonText);\n i0.ɵɵadvance();\n i0.ɵɵclassProp(\"mat-calendar-invert\", ctx.calendar.currentView !== \"month\");\n i0.ɵɵadvance(4);\n i0.ɵɵproperty(\"disabled\", !ctx.previousEnabled());\n i0.ɵɵattribute(\"aria-label\", ctx.prevButtonLabel);\n i0.ɵɵadvance(3);\n i0.ɵɵproperty(\"disabled\", !ctx.nextEnabled());\n i0.ɵɵattribute(\"aria-label\", ctx.nextButtonLabel);\n }\n },\n dependencies: [MatButton, MatIconButton],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatCalendarHeader;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** A calendar that is used as part of the datepicker. */\nlet MatCalendar = /*#__PURE__*/(() => {\n class MatCalendar {\n _dateAdapter = inject(DateAdapter, {\n optional: true\n });\n _dateFormats = inject(MAT_DATE_FORMATS, {\n optional: true\n });\n _changeDetectorRef = inject(ChangeDetectorRef);\n /** An input indicating the type of the header component, if set. */\n headerComponent;\n /** A portal containing the header component type for this calendar. */\n _calendarHeaderPortal;\n _intlChanges;\n /**\n * Used for scheduling that focus should be moved to the active cell on the next tick.\n * We need to schedule it, rather than do it immediately, because we have to wait\n * for Angular to re-evaluate the view children.\n */\n _moveFocusOnNextTick = false;\n /** A date representing the period (month or year) to start the calendar in. */\n get startAt() {\n return this._startAt;\n }\n set startAt(value) {\n this._startAt = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n _startAt;\n /** Whether the calendar should be started in month or year view. */\n startView = 'month';\n /** The currently selected date. */\n get selected() {\n return this._selected;\n }\n set selected(value) {\n if (value instanceof DateRange) {\n this._selected = value;\n } else {\n this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n }\n _selected;\n /** The minimum selectable date. */\n get minDate() {\n return this._minDate;\n }\n set minDate(value) {\n this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n _minDate;\n /** The maximum selectable date. */\n get maxDate() {\n return this._maxDate;\n }\n set maxDate(value) {\n this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n _maxDate;\n /** Function used to filter which dates are selectable. */\n dateFilter;\n /** Function that can be used to add custom CSS classes to dates. */\n dateClass;\n /** Start of the comparison range. */\n comparisonStart;\n /** End of the comparison range. */\n comparisonEnd;\n /** ARIA Accessible name of the `` */\n startDateAccessibleName;\n /** ARIA Accessible name of the `` */\n endDateAccessibleName;\n /** Emits when the currently selected date changes. */\n selectedChange = new EventEmitter();\n /**\n * Emits the year chosen in multiyear view.\n * This doesn't imply a change on the selected date.\n */\n yearSelected = new EventEmitter();\n /**\n * Emits the month chosen in year view.\n * This doesn't imply a change on the selected date.\n */\n monthSelected = new EventEmitter();\n /**\n * Emits when the current view changes.\n */\n viewChanged = new EventEmitter(true);\n /** Emits when any date is selected. */\n _userSelection = new EventEmitter();\n /** Emits a new date range value when the user completes a drag drop operation. */\n _userDragDrop = new EventEmitter();\n /** Reference to the current month view component. */\n monthView;\n /** Reference to the current year view component. */\n yearView;\n /** Reference to the current multi-year view component. */\n multiYearView;\n /**\n * The current active date. This determines which time period is shown and which date is\n * highlighted when using keyboard navigation.\n */\n get activeDate() {\n return this._clampedActiveDate;\n }\n set activeDate(value) {\n this._clampedActiveDate = this._dateAdapter.clampDate(value, this.minDate, this.maxDate);\n this.stateChanges.next();\n this._changeDetectorRef.markForCheck();\n }\n _clampedActiveDate;\n /** Whether the calendar is in month view. */\n get currentView() {\n return this._currentView;\n }\n set currentView(value) {\n const viewChangedResult = this._currentView !== value ? value : null;\n this._currentView = value;\n this._moveFocusOnNextTick = true;\n this._changeDetectorRef.markForCheck();\n if (viewChangedResult) {\n this.viewChanged.emit(viewChangedResult);\n }\n }\n _currentView;\n /** Origin of active drag, or null when dragging is not active. */\n _activeDrag = null;\n /**\n * Emits whenever there is a state change that the header may need to respond to.\n */\n stateChanges = new Subject();\n constructor() {\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (!this._dateAdapter) {\n throw createMissingDateImplError('DateAdapter');\n }\n if (!this._dateFormats) {\n throw createMissingDateImplError('MAT_DATE_FORMATS');\n }\n }\n this._intlChanges = inject(MatDatepickerIntl).changes.subscribe(() => {\n this._changeDetectorRef.markForCheck();\n this.stateChanges.next();\n });\n }\n ngAfterContentInit() {\n this._calendarHeaderPortal = new ComponentPortal(this.headerComponent || MatCalendarHeader);\n this.activeDate = this.startAt || this._dateAdapter.today();\n // Assign to the private property since we don't want to move focus on init.\n this._currentView = this.startView;\n }\n ngAfterViewChecked() {\n if (this._moveFocusOnNextTick) {\n this._moveFocusOnNextTick = false;\n this.focusActiveCell();\n }\n }\n ngOnDestroy() {\n this._intlChanges.unsubscribe();\n this.stateChanges.complete();\n }\n ngOnChanges(changes) {\n // Ignore date changes that are at a different time on the same day. This fixes issues where\n // the calendar re-renders when there is no meaningful change to [minDate] or [maxDate]\n // (#24435).\n const minDateChange = changes['minDate'] && !this._dateAdapter.sameDate(changes['minDate'].previousValue, changes['minDate'].currentValue) ? changes['minDate'] : undefined;\n const maxDateChange = changes['maxDate'] && !this._dateAdapter.sameDate(changes['maxDate'].previousValue, changes['maxDate'].currentValue) ? changes['maxDate'] : undefined;\n const changeRequiringRerender = minDateChange || maxDateChange || changes['dateFilter'];\n if (changeRequiringRerender && !changeRequiringRerender.firstChange) {\n const view = this._getCurrentViewComponent();\n if (view) {\n // Schedule focus to be moved to the active date since re-rendering\n // can blur the active cell. See #29265.\n this._moveFocusOnNextTick = true;\n // We need to `detectChanges` manually here, because the `minDate`, `maxDate` etc. are\n // passed down to the view via data bindings which won't be up-to-date when we call `_init`.\n this._changeDetectorRef.detectChanges();\n view._init();\n }\n }\n this.stateChanges.next();\n }\n /** Focuses the active date. */\n focusActiveCell() {\n this._getCurrentViewComponent()._focusActiveCell(false);\n }\n /** Updates today's date after an update of the active date */\n updateTodaysDate() {\n this._getCurrentViewComponent()._init();\n }\n /** Handles date selection in the month view. */\n _dateSelected(event) {\n const date = event.value;\n if (this.selected instanceof DateRange || date && !this._dateAdapter.sameDate(date, this.selected)) {\n this.selectedChange.emit(date);\n }\n this._userSelection.emit(event);\n }\n /** Handles year selection in the multiyear view. */\n _yearSelectedInMultiYearView(normalizedYear) {\n this.yearSelected.emit(normalizedYear);\n }\n /** Handles month selection in the year view. */\n _monthSelectedInYearView(normalizedMonth) {\n this.monthSelected.emit(normalizedMonth);\n }\n /** Handles year/month selection in the multi-year/year views. */\n _goToDateInView(date, view) {\n this.activeDate = date;\n this.currentView = view;\n }\n /** Called when the user starts dragging to change a date range. */\n _dragStarted(event) {\n this._activeDrag = event;\n }\n /**\n * Called when a drag completes. It may end in cancelation or in the selection\n * of a new range.\n */\n _dragEnded(event) {\n if (!this._activeDrag) return;\n if (event.value) {\n this._userDragDrop.emit(event);\n }\n this._activeDrag = null;\n }\n /** Returns the component instance that corresponds to the current calendar view. */\n _getCurrentViewComponent() {\n // The return type is explicitly written as a union to ensure that the Closure compiler does\n // not optimize calls to _init(). Without the explicit return type, TypeScript narrows it to\n // only the first component type. See https://github.com/angular/components/issues/22996.\n return this.monthView || this.yearView || this.multiYearView;\n }\n static ɵfac = function MatCalendar_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatCalendar)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatCalendar,\n selectors: [[\"mat-calendar\"]],\n viewQuery: function MatCalendar_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(MatMonthView, 5);\n i0.ɵɵviewQuery(MatYearView, 5);\n i0.ɵɵviewQuery(MatMultiYearView, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.monthView = _t.first);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.yearView = _t.first);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.multiYearView = _t.first);\n }\n },\n hostAttrs: [1, \"mat-calendar\"],\n inputs: {\n headerComponent: \"headerComponent\",\n startAt: \"startAt\",\n startView: \"startView\",\n selected: \"selected\",\n minDate: \"minDate\",\n maxDate: \"maxDate\",\n dateFilter: \"dateFilter\",\n dateClass: \"dateClass\",\n comparisonStart: \"comparisonStart\",\n comparisonEnd: \"comparisonEnd\",\n startDateAccessibleName: \"startDateAccessibleName\",\n endDateAccessibleName: \"endDateAccessibleName\"\n },\n outputs: {\n selectedChange: \"selectedChange\",\n yearSelected: \"yearSelected\",\n monthSelected: \"monthSelected\",\n viewChanged: \"viewChanged\",\n _userSelection: \"_userSelection\",\n _userDragDrop: \"_userDragDrop\"\n },\n exportAs: [\"matCalendar\"],\n features: [i0.ɵɵProvidersFeature([MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER]), i0.ɵɵNgOnChangesFeature],\n decls: 5,\n vars: 2,\n consts: [[3, \"cdkPortalOutlet\"], [\"cdkMonitorSubtreeFocus\", \"\", \"tabindex\", \"-1\", 1, \"mat-calendar-content\"], [3, \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\", \"comparisonStart\", \"comparisonEnd\", \"startDateAccessibleName\", \"endDateAccessibleName\", \"activeDrag\"], [3, \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\"], [3, \"activeDateChange\", \"_userSelection\", \"dragStarted\", \"dragEnded\", \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\", \"comparisonStart\", \"comparisonEnd\", \"startDateAccessibleName\", \"endDateAccessibleName\", \"activeDrag\"], [3, \"activeDateChange\", \"monthSelected\", \"selectedChange\", \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\"], [3, \"activeDateChange\", \"yearSelected\", \"selectedChange\", \"activeDate\", \"selected\", \"dateFilter\", \"maxDate\", \"minDate\", \"dateClass\"]],\n template: function MatCalendar_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵtemplate(0, MatCalendar_ng_template_0_Template, 0, 0, \"ng-template\", 0);\n i0.ɵɵelementStart(1, \"div\", 1);\n i0.ɵɵtemplate(2, MatCalendar_Case_2_Template, 1, 11, \"mat-month-view\", 2)(3, MatCalendar_Case_3_Template, 1, 6, \"mat-year-view\", 3)(4, MatCalendar_Case_4_Template, 1, 6, \"mat-multi-year-view\", 3);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n let tmp_1_0;\n i0.ɵɵproperty(\"cdkPortalOutlet\", ctx._calendarHeaderPortal);\n i0.ɵɵadvance(2);\n i0.ɵɵconditional((tmp_1_0 = ctx.currentView) === \"month\" ? 2 : tmp_1_0 === \"year\" ? 3 : tmp_1_0 === \"multi-year\" ? 4 : -1);\n }\n },\n dependencies: [CdkPortalOutlet, CdkMonitorFocus, MatMonthView, MatYearView, MatMultiYearView],\n styles: [\".mat-calendar{display:block;line-height:normal;font-family:var(--mat-datepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mat-datepicker-calendar-text-size, var(--mat-sys-body-medium-size))}.mat-calendar-header{padding:8px 8px 0 8px}.mat-calendar-content{padding:0 8px 8px 8px;outline:none}.mat-calendar-controls{display:flex;align-items:center;margin:5% calc(4.7142857143% - 16px)}.mat-calendar-spacer{flex:1 1 auto}.mat-calendar-period-button{min-width:0;margin:0 8px;font-size:var(--mat-datepicker-calendar-period-button-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-datepicker-calendar-period-button-text-weight, var(--mat-sys-title-small-weight));--mdc-text-button-label-text-color:var(--mat-datepicker-calendar-period-button-text-color, var(--mat-sys-on-surface-variant))}.mat-calendar-arrow{display:inline-block;width:10px;height:5px;margin:0 0 0 5px;vertical-align:middle;fill:var(--mat-datepicker-calendar-period-button-icon-color, var(--mat-sys-on-surface-variant))}.mat-calendar-arrow.mat-calendar-invert{transform:rotate(180deg)}[dir=rtl] .mat-calendar-arrow{margin:0 5px 0 0}@media(forced-colors: active){.mat-calendar-arrow{fill:CanvasText}}.mat-datepicker-content .mat-calendar-previous-button:not(.mat-mdc-button-disabled),.mat-datepicker-content .mat-calendar-next-button:not(.mat-mdc-button-disabled){color:var(--mat-datepicker-calendar-navigation-button-icon-color, var(--mat-sys-on-surface-variant))}[dir=rtl] .mat-calendar-previous-button,[dir=rtl] .mat-calendar-next-button{transform:rotate(180deg)}.mat-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mat-calendar-table-header th{text-align:center;padding:0 0 8px 0;color:var(--mat-datepicker-calendar-header-text-color, var(--mat-sys-on-surface-variant));font-size:var(--mat-datepicker-calendar-header-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-datepicker-calendar-header-text-weight, var(--mat-sys-title-small-weight))}.mat-calendar-table-header-divider{position:relative;height:1px}.mat-calendar-table-header-divider::after{content:\\\"\\\";position:absolute;top:0;left:-8px;right:-8px;height:1px;background:var(--mat-datepicker-calendar-header-divider-color, transparent)}.mat-calendar-body-cell-content::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 3px)*-1)}.mat-calendar-body-cell:focus .mat-focus-indicator::before{content:\\\"\\\"}\"],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatCalendar;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Animations used by the Material datepicker.\n * @docs-private\n */\nconst matDatepickerAnimations = {\n /** Transforms the height of the datepicker's calendar. */\n transformPanel: /*#__PURE__*/trigger('transformPanel', [/*#__PURE__*/transition('void => enter-dropdown', /*#__PURE__*/animate('120ms cubic-bezier(0, 0, 0.2, 1)', /*#__PURE__*/keyframes([/*#__PURE__*/style({\n opacity: 0,\n transform: 'scale(1, 0.8)'\n }), /*#__PURE__*/style({\n opacity: 1,\n transform: 'scale(1, 1)'\n })]))), /*#__PURE__*/transition('void => enter-dialog', /*#__PURE__*/animate('150ms cubic-bezier(0, 0, 0.2, 1)', /*#__PURE__*/keyframes([/*#__PURE__*/style({\n opacity: 0,\n transform: 'scale(0.7)'\n }), /*#__PURE__*/style({\n transform: 'none',\n opacity: 1\n })]))), /*#__PURE__*/transition('* => void', /*#__PURE__*/animate('100ms linear', /*#__PURE__*/style({\n opacity: 0\n })))]),\n /** Fades in the content of the calendar. */\n fadeInCalendar: /*#__PURE__*/trigger('fadeInCalendar', [/*#__PURE__*/state('void', /*#__PURE__*/style({\n opacity: 0\n })), /*#__PURE__*/state('enter', /*#__PURE__*/style({\n opacity: 1\n })),\n /*#__PURE__*/\n // TODO(crisbeto): this animation should be removed since it isn't quite on spec, but we\n // need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.\n transition('void => *', /*#__PURE__*/animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))])\n};\n\n/** Injection token that determines the scroll handling while the calendar is open. */\nconst MAT_DATEPICKER_SCROLL_STRATEGY = /*#__PURE__*/new InjectionToken('mat-datepicker-scroll-strategy', {\n providedIn: 'root',\n factory: () => {\n const overlay = inject(Overlay);\n return () => overlay.scrollStrategies.reposition();\n }\n});\n/** @docs-private */\nfunction MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY(overlay) {\n return () => overlay.scrollStrategies.reposition();\n}\n/** @docs-private */\nconst MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {\n provide: MAT_DATEPICKER_SCROLL_STRATEGY,\n deps: [Overlay],\n useFactory: MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY\n};\n/**\n * Component used as the content for the datepicker overlay. We use this instead of using\n * MatCalendar directly as the content so we can control the initial focus. This also gives us a\n * place to put additional features of the overlay that are not part of the calendar itself in the\n * future. (e.g. confirmation buttons).\n * @docs-private\n */\nlet MatDatepickerContent = /*#__PURE__*/(() => {\n class MatDatepickerContent {\n _elementRef = inject(ElementRef);\n _changeDetectorRef = inject(ChangeDetectorRef);\n _globalModel = inject(MatDateSelectionModel);\n _dateAdapter = inject(DateAdapter);\n _rangeSelectionStrategy = inject(MAT_DATE_RANGE_SELECTION_STRATEGY, {\n optional: true\n });\n _subscriptions = new Subscription();\n _model;\n /** Reference to the internal calendar component. */\n _calendar;\n /**\n * Theme color of the internal calendar. This API is supported in M2 themes\n * only, it has no effect in M3 themes.\n *\n * For information on applying color variants in M3, see\n * https://material.angular.io/guide/theming#using-component-color-variants.\n */\n color;\n /** Reference to the datepicker that created the overlay. */\n datepicker;\n /** Start of the comparison range. */\n comparisonStart;\n /** End of the comparison range. */\n comparisonEnd;\n /** ARIA Accessible name of the `` */\n startDateAccessibleName;\n /** ARIA Accessible name of the `` */\n endDateAccessibleName;\n /** Whether the datepicker is above or below the input. */\n _isAbove;\n /** Current state of the animation. */\n _animationState;\n /** Emits when an animation has finished. */\n _animationDone = new Subject();\n /** Whether there is an in-progress animation. */\n _isAnimating = false;\n /** Text for the close button. */\n _closeButtonText;\n /** Whether the close button currently has focus. */\n _closeButtonFocused;\n /** Portal with projected action buttons. */\n _actionsPortal = null;\n /** Id of the label for the `role=\"dialog\"` element. */\n _dialogLabelId;\n constructor() {\n inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);\n const intl = inject(MatDatepickerIntl);\n this._closeButtonText = intl.closeCalendarLabel;\n }\n ngOnInit() {\n this._animationState = this.datepicker.touchUi ? 'enter-dialog' : 'enter-dropdown';\n }\n ngAfterViewInit() {\n this._subscriptions.add(this.datepicker.stateChanges.subscribe(() => {\n this._changeDetectorRef.markForCheck();\n }));\n this._calendar.focusActiveCell();\n }\n ngOnDestroy() {\n this._subscriptions.unsubscribe();\n this._animationDone.complete();\n }\n _handleUserSelection(event) {\n const selection = this._model.selection;\n const value = event.value;\n const isRange = selection instanceof DateRange;\n // If we're selecting a range and we have a selection strategy, always pass the value through\n // there. Otherwise don't assign null values to the model, unless we're selecting a range.\n // A null value when picking a range means that the user cancelled the selection (e.g. by\n // pressing escape), whereas when selecting a single value it means that the value didn't\n // change. This isn't very intuitive, but it's here for backwards-compatibility.\n if (isRange && this._rangeSelectionStrategy) {\n const newSelection = this._rangeSelectionStrategy.selectionFinished(value, selection, event.event);\n this._model.updateSelection(newSelection, this);\n } else if (value && (isRange || !this._dateAdapter.sameDate(value, selection))) {\n this._model.add(value);\n }\n // Delegate closing the overlay to the actions.\n if ((!this._model || this._model.isComplete()) && !this._actionsPortal) {\n this.datepicker.close();\n }\n }\n _handleUserDragDrop(event) {\n this._model.updateSelection(event.value, this);\n }\n _startExitAnimation() {\n this._animationState = 'void';\n this._changeDetectorRef.markForCheck();\n }\n _handleAnimationEvent(event) {\n this._isAnimating = event.phaseName === 'start';\n if (!this._isAnimating) {\n this._animationDone.next();\n }\n }\n _getSelected() {\n return this._model.selection;\n }\n /** Applies the current pending selection to the global model. */\n _applyPendingSelection() {\n if (this._model !== this._globalModel) {\n this._globalModel.updateSelection(this._model.selection, this);\n }\n }\n /**\n * Assigns a new portal containing the datepicker actions.\n * @param portal Portal with the actions to be assigned.\n * @param forceRerender Whether a re-render of the portal should be triggered. This isn't\n * necessary if the portal is assigned during initialization, but it may be required if it's\n * added at a later point.\n */\n _assignActions(portal, forceRerender) {\n // If we have actions, clone the model so that we have the ability to cancel the selection,\n // otherwise update the global model directly. Note that we want to assign this as soon as\n // possible, but `_actionsPortal` isn't available in the constructor so we do it in `ngOnInit`.\n this._model = portal ? this._globalModel.clone() : this._globalModel;\n this._actionsPortal = portal;\n if (forceRerender) {\n this._changeDetectorRef.detectChanges();\n }\n }\n static ɵfac = function MatDatepickerContent_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDatepickerContent)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatDatepickerContent,\n selectors: [[\"mat-datepicker-content\"]],\n viewQuery: function MatDatepickerContent_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(MatCalendar, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._calendar = _t.first);\n }\n },\n hostAttrs: [1, \"mat-datepicker-content\"],\n hostVars: 5,\n hostBindings: function MatDatepickerContent_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵsyntheticHostListener(\"@transformPanel.start\", function MatDatepickerContent_animation_transformPanel_start_HostBindingHandler($event) {\n return ctx._handleAnimationEvent($event);\n })(\"@transformPanel.done\", function MatDatepickerContent_animation_transformPanel_done_HostBindingHandler($event) {\n return ctx._handleAnimationEvent($event);\n });\n }\n if (rf & 2) {\n i0.ɵɵsyntheticHostProperty(\"@transformPanel\", ctx._animationState);\n i0.ɵɵclassMap(ctx.color ? \"mat-\" + ctx.color : \"\");\n i0.ɵɵclassProp(\"mat-datepicker-content-touch\", ctx.datepicker.touchUi);\n }\n },\n inputs: {\n color: \"color\"\n },\n exportAs: [\"matDatepickerContent\"],\n decls: 5,\n vars: 27,\n consts: [[\"cdkTrapFocus\", \"\", \"role\", \"dialog\", 1, \"mat-datepicker-content-container\"], [3, \"yearSelected\", \"monthSelected\", \"viewChanged\", \"_userSelection\", \"_userDragDrop\", \"id\", \"startAt\", \"startView\", \"minDate\", \"maxDate\", \"dateFilter\", \"headerComponent\", \"selected\", \"dateClass\", \"comparisonStart\", \"comparisonEnd\", \"startDateAccessibleName\", \"endDateAccessibleName\"], [3, \"cdkPortalOutlet\"], [\"type\", \"button\", \"mat-raised-button\", \"\", 1, \"mat-datepicker-close-button\", 3, \"focus\", \"blur\", \"click\", \"color\"]],\n template: function MatDatepickerContent_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵelementStart(0, \"div\", 0)(1, \"mat-calendar\", 1);\n i0.ɵɵlistener(\"yearSelected\", function MatDatepickerContent_Template_mat_calendar_yearSelected_1_listener($event) {\n return ctx.datepicker._selectYear($event);\n })(\"monthSelected\", function MatDatepickerContent_Template_mat_calendar_monthSelected_1_listener($event) {\n return ctx.datepicker._selectMonth($event);\n })(\"viewChanged\", function MatDatepickerContent_Template_mat_calendar_viewChanged_1_listener($event) {\n return ctx.datepicker._viewChanged($event);\n })(\"_userSelection\", function MatDatepickerContent_Template_mat_calendar__userSelection_1_listener($event) {\n return ctx._handleUserSelection($event);\n })(\"_userDragDrop\", function MatDatepickerContent_Template_mat_calendar__userDragDrop_1_listener($event) {\n return ctx._handleUserDragDrop($event);\n });\n i0.ɵɵelementEnd();\n i0.ɵɵtemplate(2, MatDatepickerContent_ng_template_2_Template, 0, 0, \"ng-template\", 2);\n i0.ɵɵelementStart(3, \"button\", 3);\n i0.ɵɵlistener(\"focus\", function MatDatepickerContent_Template_button_focus_3_listener() {\n return ctx._closeButtonFocused = true;\n })(\"blur\", function MatDatepickerContent_Template_button_blur_3_listener() {\n return ctx._closeButtonFocused = false;\n })(\"click\", function MatDatepickerContent_Template_button_click_3_listener() {\n return ctx.datepicker.close();\n });\n i0.ɵɵtext(4);\n i0.ɵɵelementEnd()();\n }\n if (rf & 2) {\n let tmp_3_0;\n i0.ɵɵclassProp(\"mat-datepicker-content-container-with-custom-header\", ctx.datepicker.calendarHeaderComponent)(\"mat-datepicker-content-container-with-actions\", ctx._actionsPortal);\n i0.ɵɵattribute(\"aria-modal\", true)(\"aria-labelledby\", (tmp_3_0 = ctx._dialogLabelId) !== null && tmp_3_0 !== undefined ? tmp_3_0 : undefined);\n i0.ɵɵadvance();\n i0.ɵɵclassMap(ctx.datepicker.panelClass);\n i0.ɵɵproperty(\"id\", ctx.datepicker.id)(\"startAt\", ctx.datepicker.startAt)(\"startView\", ctx.datepicker.startView)(\"minDate\", ctx.datepicker._getMinDate())(\"maxDate\", ctx.datepicker._getMaxDate())(\"dateFilter\", ctx.datepicker._getDateFilter())(\"headerComponent\", ctx.datepicker.calendarHeaderComponent)(\"selected\", ctx._getSelected())(\"dateClass\", ctx.datepicker.dateClass)(\"comparisonStart\", ctx.comparisonStart)(\"comparisonEnd\", ctx.comparisonEnd)(\"@fadeInCalendar\", \"enter\")(\"startDateAccessibleName\", ctx.startDateAccessibleName)(\"endDateAccessibleName\", ctx.endDateAccessibleName);\n i0.ɵɵadvance();\n i0.ɵɵproperty(\"cdkPortalOutlet\", ctx._actionsPortal);\n i0.ɵɵadvance();\n i0.ɵɵclassProp(\"cdk-visually-hidden\", !ctx._closeButtonFocused);\n i0.ɵɵproperty(\"color\", ctx.color || \"primary\");\n i0.ɵɵadvance();\n i0.ɵɵtextInterpolate(ctx._closeButtonText);\n }\n },\n dependencies: [CdkTrapFocus, MatCalendar, CdkPortalOutlet, MatButton],\n styles: [\".mat-datepicker-content{display:block;border-radius:4px;background-color:var(--mat-datepicker-calendar-container-background-color, var(--mat-sys-surface-container-high));color:var(--mat-datepicker-calendar-container-text-color, var(--mat-sys-on-surface));box-shadow:var(--mat-datepicker-calendar-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));border-radius:var(--mat-datepicker-calendar-container-shape, var(--mat-sys-corner-large))}.mat-datepicker-content .mat-calendar{width:296px;height:354px}.mat-datepicker-content .mat-datepicker-content-container-with-custom-header .mat-calendar{height:auto}.mat-datepicker-content .mat-datepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mat-datepicker-content .mat-datepicker-close-button{display:none}.mat-datepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mat-datepicker-content-touch{display:block;max-height:80vh;box-shadow:var(--mat-datepicker-calendar-container-touch-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));border-radius:var(--mat-datepicker-calendar-container-touch-shape, var(--mat-sys-corner-extra-large));position:relative;overflow:visible}.mat-datepicker-content-touch .mat-datepicker-content-container{min-height:312px;max-height:788px;min-width:250px;max-width:750px}.mat-datepicker-content-touch .mat-calendar{width:100%;height:auto}@media all and (orientation: landscape){.mat-datepicker-content-touch .mat-datepicker-content-container{width:64vh;height:80vh}}@media all and (orientation: portrait){.mat-datepicker-content-touch .mat-datepicker-content-container{width:80vw;height:100vw}.mat-datepicker-content-touch .mat-datepicker-content-container-with-actions{height:115vw}}\"],\n encapsulation: 2,\n data: {\n animation: [matDatepickerAnimations.transformPanel, matDatepickerAnimations.fadeInCalendar]\n },\n changeDetection: 0\n });\n }\n return MatDatepickerContent;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/** Base class for a datepicker. */\nlet MatDatepickerBase = /*#__PURE__*/(() => {\n class MatDatepickerBase {\n _overlay = inject(Overlay);\n _viewContainerRef = inject(ViewContainerRef);\n _dateAdapter = inject(DateAdapter, {\n optional: true\n });\n _dir = inject(Directionality, {\n optional: true\n });\n _model = inject(MatDateSelectionModel);\n _scrollStrategy = inject(MAT_DATEPICKER_SCROLL_STRATEGY);\n _inputStateChanges = Subscription.EMPTY;\n _document = inject(DOCUMENT);\n /** An input indicating the type of the custom header component for the calendar, if set. */\n calendarHeaderComponent;\n /** The date to open the calendar to initially. */\n get startAt() {\n // If an explicit startAt is set we start there, otherwise we start at whatever the currently\n // selected value is.\n return this._startAt || (this.datepickerInput ? this.datepickerInput.getStartValue() : null);\n }\n set startAt(value) {\n this._startAt = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n }\n _startAt;\n /** The view that the calendar should start in. */\n startView = 'month';\n /**\n * Theme color of the datepicker's calendar. This API is supported in M2 themes only, it\n * has no effect in M3 themes.\n *\n * For information on applying color variants in M3, see\n * https://material.angular.io/guide/theming#using-component-color-variants.\n */\n get color() {\n return this._color || (this.datepickerInput ? this.datepickerInput.getThemePalette() : undefined);\n }\n set color(value) {\n this._color = value;\n }\n _color;\n /**\n * Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather\n * than a dropdown and elements have more padding to allow for bigger touch targets.\n */\n touchUi = false;\n /** Whether the datepicker pop-up should be disabled. */\n get disabled() {\n return this._disabled === undefined && this.datepickerInput ? this.datepickerInput.disabled : !!this._disabled;\n }\n set disabled(value) {\n if (value !== this._disabled) {\n this._disabled = value;\n this.stateChanges.next(undefined);\n }\n }\n _disabled;\n /** Preferred position of the datepicker in the X axis. */\n xPosition = 'start';\n /** Preferred position of the datepicker in the Y axis. */\n yPosition = 'below';\n /**\n * Whether to restore focus to the previously-focused element when the calendar is closed.\n * Note that automatic focus restoration is an accessibility feature and it is recommended that\n * you provide your own equivalent, if you decide to turn it off.\n */\n restoreFocus = true;\n /**\n * Emits selected year in multiyear view.\n * This doesn't imply a change on the selected date.\n */\n yearSelected = new EventEmitter();\n /**\n * Emits selected month in year view.\n * This doesn't imply a change on the selected date.\n */\n monthSelected = new EventEmitter();\n /**\n * Emits when the current view changes.\n */\n viewChanged = new EventEmitter(true);\n /** Function that can be used to add custom CSS classes to dates. */\n dateClass;\n /** Emits when the datepicker has been opened. */\n openedStream = new EventEmitter();\n /** Emits when the datepicker has been closed. */\n closedStream = new EventEmitter();\n /** Classes to be passed to the date picker panel. */\n get panelClass() {\n return this._panelClass;\n }\n set panelClass(value) {\n this._panelClass = coerceStringArray(value);\n }\n _panelClass;\n /** Whether the calendar is open. */\n get opened() {\n return this._opened;\n }\n set opened(value) {\n if (value) {\n this.open();\n } else {\n this.close();\n }\n }\n _opened = false;\n /** The id for the datepicker calendar. */\n id = inject(_IdGenerator).getId('mat-datepicker-');\n /** The minimum selectable date. */\n _getMinDate() {\n return this.datepickerInput && this.datepickerInput.min;\n }\n /** The maximum selectable date. */\n _getMaxDate() {\n return this.datepickerInput && this.datepickerInput.max;\n }\n _getDateFilter() {\n return this.datepickerInput && this.datepickerInput.dateFilter;\n }\n /** A reference to the overlay into which we've rendered the calendar. */\n _overlayRef;\n /** Reference to the component instance rendered in the overlay. */\n _componentRef;\n /** The element that was focused before the datepicker was opened. */\n _focusedElementBeforeOpen = null;\n /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */\n _backdropHarnessClass = `${this.id}-backdrop`;\n /** Currently-registered actions portal. */\n _actionsPortal;\n /** The input element this datepicker is associated with. */\n datepickerInput;\n /** Emits when the datepicker's state changes. */\n stateChanges = new Subject();\n _injector = inject(Injector);\n _changeDetectorRef = inject(ChangeDetectorRef);\n constructor() {\n if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw createMissingDateImplError('DateAdapter');\n }\n this._model.selectionChanged.subscribe(() => {\n this._changeDetectorRef.markForCheck();\n });\n }\n ngOnChanges(changes) {\n const positionChange = changes['xPosition'] || changes['yPosition'];\n if (positionChange && !positionChange.firstChange && this._overlayRef) {\n const positionStrategy = this._overlayRef.getConfig().positionStrategy;\n if (positionStrategy instanceof FlexibleConnectedPositionStrategy) {\n this._setConnectedPositions(positionStrategy);\n if (this.opened) {\n this._overlayRef.updatePosition();\n }\n }\n }\n this.stateChanges.next(undefined);\n }\n ngOnDestroy() {\n this._destroyOverlay();\n this.close();\n this._inputStateChanges.unsubscribe();\n this.stateChanges.complete();\n }\n /** Selects the given date */\n select(date) {\n this._model.add(date);\n }\n /** Emits the selected year in multiyear view */\n _selectYear(normalizedYear) {\n this.yearSelected.emit(normalizedYear);\n }\n /** Emits selected month in year view */\n _selectMonth(normalizedMonth) {\n this.monthSelected.emit(normalizedMonth);\n }\n /** Emits changed view */\n _viewChanged(view) {\n this.viewChanged.emit(view);\n }\n /**\n * Register an input with this datepicker.\n * @param input The datepicker input to register with this datepicker.\n * @returns Selection model that the input should hook itself up to.\n */\n registerInput(input) {\n if (this.datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('A MatDatepicker can only be associated with a single input.');\n }\n this._inputStateChanges.unsubscribe();\n this.datepickerInput = input;\n this._inputStateChanges = input.stateChanges.subscribe(() => this.stateChanges.next(undefined));\n return this._model;\n }\n /**\n * Registers a portal containing action buttons with the datepicker.\n * @param portal Portal to be registered.\n */\n registerActions(portal) {\n if (this._actionsPortal && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('A MatDatepicker can only be associated with a single actions row.');\n }\n this._actionsPortal = portal;\n this._componentRef?.instance._assignActions(portal, true);\n }\n /**\n * Removes a portal containing action buttons from the datepicker.\n * @param portal Portal to be removed.\n */\n removeActions(portal) {\n if (portal === this._actionsPortal) {\n this._actionsPortal = null;\n this._componentRef?.instance._assignActions(null, true);\n }\n }\n /** Open the calendar. */\n open() {\n // Skip reopening if there's an in-progress animation to avoid overlapping\n // sequences which can cause \"changed after checked\" errors. See #25837.\n if (this._opened || this.disabled || this._componentRef?.instance._isAnimating) {\n return;\n }\n if (!this.datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('Attempted to open an MatDatepicker with no associated input.');\n }\n this._focusedElementBeforeOpen = _getFocusedElementPierceShadowDom();\n this._openOverlay();\n this._opened = true;\n this.openedStream.emit();\n }\n /** Close the calendar. */\n close() {\n // Skip reopening if there's an in-progress animation to avoid overlapping\n // sequences which can cause \"changed after checked\" errors. See #25837.\n if (!this._opened || this._componentRef?.instance._isAnimating) {\n return;\n }\n const canRestoreFocus = this.restoreFocus && this._focusedElementBeforeOpen && typeof this._focusedElementBeforeOpen.focus === 'function';\n const completeClose = () => {\n // The `_opened` could've been reset already if\n // we got two events in quick succession.\n if (this._opened) {\n this._opened = false;\n this.closedStream.emit();\n }\n };\n if (this._componentRef) {\n const {\n instance,\n location\n } = this._componentRef;\n instance._startExitAnimation();\n instance._animationDone.pipe(take(1)).subscribe(() => {\n const activeElement = this._document.activeElement;\n // Since we restore focus after the exit animation, we have to check that\n // the user didn't move focus themselves inside the `close` handler.\n if (canRestoreFocus && (!activeElement || activeElement === this._document.activeElement || location.nativeElement.contains(activeElement))) {\n this._focusedElementBeforeOpen.focus();\n }\n this._focusedElementBeforeOpen = null;\n this._destroyOverlay();\n });\n }\n if (canRestoreFocus) {\n // Because IE moves focus asynchronously, we can't count on it being restored before we've\n // marked the datepicker as closed. If the event fires out of sequence and the element that\n // we're refocusing opens the datepicker on focus, the user could be stuck with not being\n // able to close the calendar at all. We work around it by making the logic, that marks\n // the datepicker as closed, async as well.\n setTimeout(completeClose);\n } else {\n completeClose();\n }\n }\n /** Applies the current pending selection on the overlay to the model. */\n _applyPendingSelection() {\n this._componentRef?.instance?._applyPendingSelection();\n }\n /** Forwards relevant values from the datepicker to the datepicker content inside the overlay. */\n _forwardContentValues(instance) {\n instance.datepicker = this;\n instance.color = this.color;\n instance._dialogLabelId = this.datepickerInput.getOverlayLabelId();\n instance._assignActions(this._actionsPortal, false);\n }\n /** Opens the overlay with the calendar. */\n _openOverlay() {\n this._destroyOverlay();\n const isDialog = this.touchUi;\n const portal = new ComponentPortal(MatDatepickerContent, this._viewContainerRef);\n const overlayRef = this._overlayRef = this._overlay.create(new OverlayConfig({\n positionStrategy: isDialog ? this._getDialogStrategy() : this._getDropdownStrategy(),\n hasBackdrop: true,\n backdropClass: [isDialog ? 'cdk-overlay-dark-backdrop' : 'mat-overlay-transparent-backdrop', this._backdropHarnessClass],\n direction: this._dir || 'ltr',\n scrollStrategy: isDialog ? this._overlay.scrollStrategies.block() : this._scrollStrategy(),\n panelClass: `mat-datepicker-${isDialog ? 'dialog' : 'popup'}`\n }));\n this._getCloseStream(overlayRef).subscribe(event => {\n if (event) {\n event.preventDefault();\n }\n this.close();\n });\n // The `preventDefault` call happens inside the calendar as well, however focus moves into\n // it inside a timeout which can give browsers a chance to fire off a keyboard event in-between\n // that can scroll the page (see #24969). Always block default actions of arrow keys for the\n // entire overlay so the page doesn't get scrolled by accident.\n overlayRef.keydownEvents().subscribe(event => {\n const keyCode = event.keyCode;\n if (keyCode === UP_ARROW || keyCode === DOWN_ARROW || keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW || keyCode === PAGE_UP || keyCode === PAGE_DOWN) {\n event.preventDefault();\n }\n });\n this._componentRef = overlayRef.attach(portal);\n this._forwardContentValues(this._componentRef.instance);\n // Update the position once the calendar has rendered. Only relevant in dropdown mode.\n if (!isDialog) {\n afterNextRender(() => {\n overlayRef.updatePosition();\n }, {\n injector: this._injector\n });\n }\n }\n /** Destroys the current overlay. */\n _destroyOverlay() {\n if (this._overlayRef) {\n this._overlayRef.dispose();\n this._overlayRef = this._componentRef = null;\n }\n }\n /** Gets a position strategy that will open the calendar as a dropdown. */\n _getDialogStrategy() {\n return this._overlay.position().global().centerHorizontally().centerVertically();\n }\n /** Gets a position strategy that will open the calendar as a dropdown. */\n _getDropdownStrategy() {\n const strategy = this._overlay.position().flexibleConnectedTo(this.datepickerInput.getConnectedOverlayOrigin()).withTransformOriginOn('.mat-datepicker-content').withFlexibleDimensions(false).withViewportMargin(8).withLockedPosition();\n return this._setConnectedPositions(strategy);\n }\n /** Sets the positions of the datepicker in dropdown mode based on the current configuration. */\n _setConnectedPositions(strategy) {\n const primaryX = this.xPosition === 'end' ? 'end' : 'start';\n const secondaryX = primaryX === 'start' ? 'end' : 'start';\n const primaryY = this.yPosition === 'above' ? 'bottom' : 'top';\n const secondaryY = primaryY === 'top' ? 'bottom' : 'top';\n return strategy.withPositions([{\n originX: primaryX,\n originY: secondaryY,\n overlayX: primaryX,\n overlayY: primaryY\n }, {\n originX: primaryX,\n originY: primaryY,\n overlayX: primaryX,\n overlayY: secondaryY\n }, {\n originX: secondaryX,\n originY: secondaryY,\n overlayX: secondaryX,\n overlayY: primaryY\n }, {\n originX: secondaryX,\n originY: primaryY,\n overlayX: secondaryX,\n overlayY: secondaryY\n }]);\n }\n /** Gets an observable that will emit when the overlay is supposed to be closed. */\n _getCloseStream(overlayRef) {\n const ctrlShiftMetaModifiers = ['ctrlKey', 'shiftKey', 'metaKey'];\n return merge(overlayRef.backdropClick(), overlayRef.detachments(), overlayRef.keydownEvents().pipe(filter(event => {\n // Closing on alt + up is only valid when there's an input associated with the datepicker.\n return event.keyCode === ESCAPE && !hasModifierKey(event) || this.datepickerInput && hasModifierKey(event, 'altKey') && event.keyCode === UP_ARROW && ctrlShiftMetaModifiers.every(modifier => !hasModifierKey(event, modifier));\n })));\n }\n static ɵfac = function MatDatepickerBase_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDatepickerBase)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatDatepickerBase,\n inputs: {\n calendarHeaderComponent: \"calendarHeaderComponent\",\n startAt: \"startAt\",\n startView: \"startView\",\n color: \"color\",\n touchUi: [2, \"touchUi\", \"touchUi\", booleanAttribute],\n disabled: [2, \"disabled\", \"disabled\", booleanAttribute],\n xPosition: \"xPosition\",\n yPosition: \"yPosition\",\n restoreFocus: [2, \"restoreFocus\", \"restoreFocus\", booleanAttribute],\n dateClass: \"dateClass\",\n panelClass: \"panelClass\",\n opened: [2, \"opened\", \"opened\", booleanAttribute]\n },\n outputs: {\n yearSelected: \"yearSelected\",\n monthSelected: \"monthSelected\",\n viewChanged: \"viewChanged\",\n openedStream: \"opened\",\n closedStream: \"closed\"\n },\n features: [i0.ɵɵInputTransformsFeature, i0.ɵɵNgOnChangesFeature]\n });\n }\n return MatDatepickerBase;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n// TODO(mmalerba): We use a component instead of a directive here so the user can use implicit\n// template reference variables (e.g. #d vs #d=\"matDatepicker\"). We can change this to a directive\n// if angular adds support for `exportAs: '$implicit'` on directives.\n/** Component responsible for managing the datepicker popup/dialog. */\nlet MatDatepicker = /*#__PURE__*/(() => {\n class MatDatepicker extends MatDatepickerBase {\n static ɵfac = /* @__PURE__ */(() => {\n let ɵMatDatepicker_BaseFactory;\n return function MatDatepicker_Factory(__ngFactoryType__) {\n return (ɵMatDatepicker_BaseFactory || (ɵMatDatepicker_BaseFactory = i0.ɵɵgetInheritedFactory(MatDatepicker)))(__ngFactoryType__ || MatDatepicker);\n };\n })();\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatDatepicker,\n selectors: [[\"mat-datepicker\"]],\n exportAs: [\"matDatepicker\"],\n features: [i0.ɵɵProvidersFeature([MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, {\n provide: MatDatepickerBase,\n useExisting: MatDatepicker\n }]), i0.ɵɵInheritDefinitionFeature],\n decls: 0,\n vars: 0,\n template: function MatDatepicker_Template(rf, ctx) {},\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatDatepicker;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * An event used for datepicker input and change events. We don't always have access to a native\n * input or change event because the event may have been triggered by the user clicking on the\n * calendar popup. For consistency, we always use MatDatepickerInputEvent instead.\n */\nclass MatDatepickerInputEvent {\n target;\n targetElement;\n /** The new value for the target datepicker input. */\n value;\n constructor(/** Reference to the datepicker input component that emitted the event. */\n target, /** Reference to the native input element associated with the datepicker input. */\n targetElement) {\n this.target = target;\n this.targetElement = targetElement;\n this.value = this.target.value;\n }\n}\n/** Base class for datepicker inputs. */\nlet MatDatepickerInputBase = /*#__PURE__*/(() => {\n class MatDatepickerInputBase {\n _elementRef = inject(ElementRef);\n _dateAdapter = inject(DateAdapter, {\n optional: true\n });\n _dateFormats = inject(MAT_DATE_FORMATS, {\n optional: true\n });\n /** Whether the component has been initialized. */\n _isInitialized;\n /** The value of the input. */\n get value() {\n return this._model ? this._getValueFromModel(this._model.selection) : this._pendingValue;\n }\n set value(value) {\n this._assignValueProgrammatically(value);\n }\n _model;\n /** Whether the datepicker-input is disabled. */\n get disabled() {\n return !!this._disabled || this._parentDisabled();\n }\n set disabled(value) {\n const newValue = value;\n const element = this._elementRef.nativeElement;\n if (this._disabled !== newValue) {\n this._disabled = newValue;\n this.stateChanges.next(undefined);\n }\n // We need to null check the `blur` method, because it's undefined during SSR.\n // In Ivy static bindings are invoked earlier, before the element is attached to the DOM.\n // This can cause an error to be thrown in some browsers (IE/Edge) which assert that the\n // element has been inserted.\n if (newValue && this._isInitialized && element.blur) {\n // Normally, native input elements automatically blur if they turn disabled. This behavior\n // is problematic, because it would mean that it triggers another change detection cycle,\n // which then causes a changed after checked error if the input element was focused before.\n element.blur();\n }\n }\n _disabled;\n /** Emits when a `change` event is fired on this ``. */\n dateChange = new EventEmitter();\n /** Emits when an `input` event is fired on this ``. */\n dateInput = new EventEmitter();\n /** Emits when the internal state has changed */\n stateChanges = new Subject();\n _onTouched = () => {};\n _validatorOnChange = () => {};\n _cvaOnChange = () => {};\n _valueChangesSubscription = Subscription.EMPTY;\n _localeSubscription = Subscription.EMPTY;\n /**\n * Since the value is kept on the model which is assigned in an Input,\n * we might get a value before we have a model. This property keeps track\n * of the value until we have somewhere to assign it.\n */\n _pendingValue;\n /** The form control validator for whether the input parses. */\n _parseValidator = () => {\n return this._lastValueValid ? null : {\n 'matDatepickerParse': {\n 'text': this._elementRef.nativeElement.value\n }\n };\n };\n /** The form control validator for the date filter. */\n _filterValidator = control => {\n const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));\n return !controlValue || this._matchesFilter(controlValue) ? null : {\n 'matDatepickerFilter': true\n };\n };\n /** The form control validator for the min date. */\n _minValidator = control => {\n const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));\n const min = this._getMinDate();\n return !min || !controlValue || this._dateAdapter.compareDate(min, controlValue) <= 0 ? null : {\n 'matDatepickerMin': {\n 'min': min,\n 'actual': controlValue\n }\n };\n };\n /** The form control validator for the max date. */\n _maxValidator = control => {\n const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));\n const max = this._getMaxDate();\n return !max || !controlValue || this._dateAdapter.compareDate(max, controlValue) >= 0 ? null : {\n 'matDatepickerMax': {\n 'max': max,\n 'actual': controlValue\n }\n };\n };\n /** Gets the base validator functions. */\n _getValidators() {\n return [this._parseValidator, this._minValidator, this._maxValidator, this._filterValidator];\n }\n /** Registers a date selection model with the input. */\n _registerModel(model) {\n this._model = model;\n this._valueChangesSubscription.unsubscribe();\n if (this._pendingValue) {\n this._assignValue(this._pendingValue);\n }\n this._valueChangesSubscription = this._model.selectionChanged.subscribe(event => {\n if (this._shouldHandleChangeEvent(event)) {\n const value = this._getValueFromModel(event.selection);\n this._lastValueValid = this._isValidValue(value);\n this._cvaOnChange(value);\n this._onTouched();\n this._formatValue(value);\n this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));\n this.dateChange.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));\n }\n });\n }\n /** Whether the last value set on the input was valid. */\n _lastValueValid = false;\n constructor() {\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n if (!this._dateAdapter) {\n throw createMissingDateImplError('DateAdapter');\n }\n if (!this._dateFormats) {\n throw createMissingDateImplError('MAT_DATE_FORMATS');\n }\n }\n // Update the displayed date when the locale changes.\n this._localeSubscription = this._dateAdapter.localeChanges.subscribe(() => {\n this._assignValueProgrammatically(this.value);\n });\n }\n ngAfterViewInit() {\n this._isInitialized = true;\n }\n ngOnChanges(changes) {\n if (dateInputsHaveChanged(changes, this._dateAdapter)) {\n this.stateChanges.next(undefined);\n }\n }\n ngOnDestroy() {\n this._valueChangesSubscription.unsubscribe();\n this._localeSubscription.unsubscribe();\n this.stateChanges.complete();\n }\n /** @docs-private */\n registerOnValidatorChange(fn) {\n this._validatorOnChange = fn;\n }\n /** @docs-private */\n validate(c) {\n return this._validator ? this._validator(c) : null;\n }\n // Implemented as part of ControlValueAccessor.\n writeValue(value) {\n this._assignValueProgrammatically(value);\n }\n // Implemented as part of ControlValueAccessor.\n registerOnChange(fn) {\n this._cvaOnChange = fn;\n }\n // Implemented as part of ControlValueAccessor.\n registerOnTouched(fn) {\n this._onTouched = fn;\n }\n // Implemented as part of ControlValueAccessor.\n setDisabledState(isDisabled) {\n this.disabled = isDisabled;\n }\n _onKeydown(event) {\n const ctrlShiftMetaModifiers = ['ctrlKey', 'shiftKey', 'metaKey'];\n const isAltDownArrow = hasModifierKey(event, 'altKey') && event.keyCode === DOWN_ARROW && ctrlShiftMetaModifiers.every(modifier => !hasModifierKey(event, modifier));\n if (isAltDownArrow && !this._elementRef.nativeElement.readOnly) {\n this._openPopup();\n event.preventDefault();\n }\n }\n _onInput(value) {\n const lastValueWasValid = this._lastValueValid;\n let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);\n this._lastValueValid = this._isValidValue(date);\n date = this._dateAdapter.getValidDateOrNull(date);\n const hasChanged = !this._dateAdapter.sameDate(date, this.value);\n // We need to fire the CVA change event for all\n // nulls, otherwise the validators won't run.\n if (!date || hasChanged) {\n this._cvaOnChange(date);\n } else {\n // Call the CVA change handler for invalid values\n // since this is what marks the control as dirty.\n if (value && !this.value) {\n this._cvaOnChange(date);\n }\n if (lastValueWasValid !== this._lastValueValid) {\n this._validatorOnChange();\n }\n }\n if (hasChanged) {\n this._assignValue(date);\n this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));\n }\n }\n _onChange() {\n this.dateChange.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));\n }\n /** Handles blur events on the input. */\n _onBlur() {\n // Reformat the input only if we have a valid value.\n if (this.value) {\n this._formatValue(this.value);\n }\n this._onTouched();\n }\n /** Formats a value and sets it on the input element. */\n _formatValue(value) {\n this._elementRef.nativeElement.value = value != null ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : '';\n }\n /** Assigns a value to the model. */\n _assignValue(value) {\n // We may get some incoming values before the model was\n // assigned. Save the value so that we can assign it later.\n if (this._model) {\n this._assignValueToModel(value);\n this._pendingValue = null;\n } else {\n this._pendingValue = value;\n }\n }\n /** Whether a value is considered valid. */\n _isValidValue(value) {\n return !value || this._dateAdapter.isValid(value);\n }\n /**\n * Checks whether a parent control is disabled. This is in place so that it can be overridden\n * by inputs extending this one which can be placed inside of a group that can be disabled.\n */\n _parentDisabled() {\n return false;\n }\n /** Programmatically assigns a value to the input. */\n _assignValueProgrammatically(value) {\n value = this._dateAdapter.deserialize(value);\n this._lastValueValid = this._isValidValue(value);\n value = this._dateAdapter.getValidDateOrNull(value);\n this._assignValue(value);\n this._formatValue(value);\n }\n /** Gets whether a value matches the current date filter. */\n _matchesFilter(value) {\n const filter = this._getDateFilter();\n return !filter || filter(value);\n }\n static ɵfac = function MatDatepickerInputBase_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDatepickerInputBase)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatDatepickerInputBase,\n inputs: {\n value: \"value\",\n disabled: [2, \"disabled\", \"disabled\", booleanAttribute]\n },\n outputs: {\n dateChange: \"dateChange\",\n dateInput: \"dateInput\"\n },\n features: [i0.ɵɵInputTransformsFeature, i0.ɵɵNgOnChangesFeature]\n });\n }\n return MatDatepickerInputBase;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n/**\n * Checks whether the `SimpleChanges` object from an `ngOnChanges`\n * callback has any changes, accounting for date objects.\n */\nfunction dateInputsHaveChanged(changes, adapter) {\n const keys = Object.keys(changes);\n for (let key of keys) {\n const {\n previousValue,\n currentValue\n } = changes[key];\n if (adapter.isDateInstance(previousValue) && adapter.isDateInstance(currentValue)) {\n if (!adapter.sameDate(previousValue, currentValue)) {\n return true;\n }\n } else {\n return true;\n }\n }\n return false;\n}\n\n/** @docs-private */\nconst MAT_DATEPICKER_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: /*#__PURE__*/forwardRef(() => MatDatepickerInput),\n multi: true\n};\n/** @docs-private */\nconst MAT_DATEPICKER_VALIDATORS = {\n provide: NG_VALIDATORS,\n useExisting: /*#__PURE__*/forwardRef(() => MatDatepickerInput),\n multi: true\n};\n/** Directive used to connect an input to a MatDatepicker. */\nlet MatDatepickerInput = /*#__PURE__*/(() => {\n class MatDatepickerInput extends MatDatepickerInputBase {\n _formField = inject(MAT_FORM_FIELD, {\n optional: true\n });\n _closedSubscription = Subscription.EMPTY;\n _openedSubscription = Subscription.EMPTY;\n /** The datepicker that this input is associated with. */\n set matDatepicker(datepicker) {\n if (datepicker) {\n this._datepicker = datepicker;\n this._ariaOwns.set(datepicker.opened ? datepicker.id : null);\n this._closedSubscription = datepicker.closedStream.subscribe(() => {\n this._onTouched();\n this._ariaOwns.set(null);\n });\n this._openedSubscription = datepicker.openedStream.subscribe(() => {\n this._ariaOwns.set(datepicker.id);\n });\n this._registerModel(datepicker.registerInput(this));\n }\n }\n _datepicker;\n /** The id of the panel owned by this input. */\n _ariaOwns = signal(null);\n /** The minimum valid date. */\n get min() {\n return this._min;\n }\n set min(value) {\n const validValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n if (!this._dateAdapter.sameDate(validValue, this._min)) {\n this._min = validValue;\n this._validatorOnChange();\n }\n }\n _min;\n /** The maximum valid date. */\n get max() {\n return this._max;\n }\n set max(value) {\n const validValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));\n if (!this._dateAdapter.sameDate(validValue, this._max)) {\n this._max = validValue;\n this._validatorOnChange();\n }\n }\n _max;\n /** Function that can be used to filter out dates within the datepicker. */\n get dateFilter() {\n return this._dateFilter;\n }\n set dateFilter(value) {\n const wasMatchingValue = this._matchesFilter(this.value);\n this._dateFilter = value;\n if (this._matchesFilter(this.value) !== wasMatchingValue) {\n this._validatorOnChange();\n }\n }\n _dateFilter;\n /** The combined form control validator for this input. */\n _validator;\n constructor() {\n super();\n this._validator = Validators.compose(super._getValidators());\n }\n /**\n * Gets the element that the datepicker popup should be connected to.\n * @return The element to connect the popup to.\n */\n getConnectedOverlayOrigin() {\n return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;\n }\n /** Gets the ID of an element that should be used a description for the calendar overlay. */\n getOverlayLabelId() {\n if (this._formField) {\n return this._formField.getLabelId();\n }\n return this._elementRef.nativeElement.getAttribute('aria-labelledby');\n }\n /** Returns the palette used by the input's form field, if any. */\n getThemePalette() {\n return this._formField ? this._formField.color : undefined;\n }\n /** Gets the value at which the calendar should start. */\n getStartValue() {\n return this.value;\n }\n ngOnDestroy() {\n super.ngOnDestroy();\n this._closedSubscription.unsubscribe();\n this._openedSubscription.unsubscribe();\n }\n /** Opens the associated datepicker. */\n _openPopup() {\n if (this._datepicker) {\n this._datepicker.open();\n }\n }\n _getValueFromModel(modelValue) {\n return modelValue;\n }\n _assignValueToModel(value) {\n if (this._model) {\n this._model.updateSelection(value, this);\n }\n }\n /** Gets the input's minimum date. */\n _getMinDate() {\n return this._min;\n }\n /** Gets the input's maximum date. */\n _getMaxDate() {\n return this._max;\n }\n /** Gets the input's date filtering function. */\n _getDateFilter() {\n return this._dateFilter;\n }\n _shouldHandleChangeEvent(event) {\n return event.source !== this;\n }\n static ɵfac = function MatDatepickerInput_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDatepickerInput)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatDatepickerInput,\n selectors: [[\"input\", \"matDatepicker\", \"\"]],\n hostAttrs: [1, \"mat-datepicker-input\"],\n hostVars: 6,\n hostBindings: function MatDatepickerInput_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵlistener(\"input\", function MatDatepickerInput_input_HostBindingHandler($event) {\n return ctx._onInput($event.target.value);\n })(\"change\", function MatDatepickerInput_change_HostBindingHandler() {\n return ctx._onChange();\n })(\"blur\", function MatDatepickerInput_blur_HostBindingHandler() {\n return ctx._onBlur();\n })(\"keydown\", function MatDatepickerInput_keydown_HostBindingHandler($event) {\n return ctx._onKeydown($event);\n });\n }\n if (rf & 2) {\n i0.ɵɵhostProperty(\"disabled\", ctx.disabled);\n i0.ɵɵattribute(\"aria-haspopup\", ctx._datepicker ? \"dialog\" : null)(\"aria-owns\", ctx._ariaOwns())(\"min\", ctx.min ? ctx._dateAdapter.toIso8601(ctx.min) : null)(\"max\", ctx.max ? ctx._dateAdapter.toIso8601(ctx.max) : null)(\"data-mat-calendar\", ctx._datepicker ? ctx._datepicker.id : null);\n }\n },\n inputs: {\n matDatepicker: \"matDatepicker\",\n min: \"min\",\n max: \"max\",\n dateFilter: [0, \"matDatepickerFilter\", \"dateFilter\"]\n },\n exportAs: [\"matDatepickerInput\"],\n features: [i0.ɵɵProvidersFeature([MAT_DATEPICKER_VALUE_ACCESSOR, MAT_DATEPICKER_VALIDATORS, {\n provide: MAT_INPUT_VALUE_ACCESSOR,\n useExisting: MatDatepickerInput\n }]), i0.ɵɵInheritDefinitionFeature]\n });\n }\n return MatDatepickerInput;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/** Can be used to override the icon of a `matDatepickerToggle`. */\nlet MatDatepickerToggleIcon = /*#__PURE__*/(() => {\n class MatDatepickerToggleIcon {\n static ɵfac = function MatDatepickerToggleIcon_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDatepickerToggleIcon)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: MatDatepickerToggleIcon,\n selectors: [[\"\", \"matDatepickerToggleIcon\", \"\"]]\n });\n }\n return MatDatepickerToggleIcon;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet MatDatepickerToggle = /*#__PURE__*/(() => {\n class MatDatepickerToggle {\n _intl = inject(MatDatepickerIntl);\n _changeDetectorRef = inject(ChangeDetectorRef);\n _stateChanges = Subscription.EMPTY;\n /** Datepicker instance that the button will toggle. */\n datepicker;\n /** Tabindex for the toggle. */\n tabIndex;\n /** Screen-reader label for the button. */\n ariaLabel;\n /** Whether the toggle button is disabled. */\n get disabled() {\n if (this._disabled === undefined && this.datepicker) {\n return this.datepicker.disabled;\n }\n return !!this._disabled;\n }\n set disabled(value) {\n this._disabled = value;\n }\n _disabled;\n /** Whether ripples on the toggle should be disabled. */\n disableRipple;\n /** Custom icon set by the consumer. */\n _customIcon;\n /** Underlying button element. */\n _button;\n constructor() {\n const defaultTabIndex = inject(new HostAttributeToken('tabindex'), {\n optional: true\n });\n const parsedTabIndex = Number(defaultTabIndex);\n this.tabIndex = parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;\n }\n ngOnChanges(changes) {\n if (changes['datepicker']) {\n this._watchStateChanges();\n }\n }\n ngOnDestroy() {\n this._stateChanges.unsubscribe();\n }\n ngAfterContentInit() {\n this._watchStateChanges();\n }\n _open(event) {\n if (this.datepicker && !this.disabled) {\n this.datepicker.open();\n event.stopPropagation();\n }\n }\n _watchStateChanges() {\n const datepickerStateChanged = this.datepicker ? this.datepicker.stateChanges : of();\n const inputStateChanged = this.datepicker && this.datepicker.datepickerInput ? this.datepicker.datepickerInput.stateChanges : of();\n const datepickerToggled = this.datepicker ? merge(this.datepicker.openedStream, this.datepicker.closedStream) : of();\n this._stateChanges.unsubscribe();\n this._stateChanges = merge(this._intl.changes, datepickerStateChanged, inputStateChanged, datepickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());\n }\n static ɵfac = function MatDatepickerToggle_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || MatDatepickerToggle)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: MatDatepickerToggle,\n selectors: [[\"mat-datepicker-toggle\"]],\n contentQueries: function MatDatepickerToggle_ContentQueries(rf, ctx, dirIndex) {\n if (rf & 1) {\n i0.ɵɵcontentQuery(dirIndex, MatDatepickerToggleIcon, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._customIcon = _t.first);\n }\n },\n viewQuery: function MatDatepickerToggle_Query(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵviewQuery(_c2, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._button = _t.first);\n }\n },\n hostAttrs: [1, \"mat-datepicker-toggle\"],\n hostVars: 8,\n hostBindings: function MatDatepickerToggle_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵlistener(\"click\", function MatDatepickerToggle_click_HostBindingHandler($event) {\n return ctx._open($event);\n });\n }\n if (rf & 2) {\n i0.ɵɵattribute(\"tabindex\", null)(\"data-mat-calendar\", ctx.datepicker ? ctx.datepicker.id : null);\n i0.ɵɵclassProp(\"mat-datepicker-toggle-active\", ctx.datepicker && ctx.datepicker.opened)(\"mat-accent\", ctx.datepicker && ctx.datepicker.color === \"accent\")(\"mat-warn\", ctx.datepicker && ctx.datepicker.color === \"warn\");\n }\n },\n inputs: {\n datepicker: [0, \"for\", \"datepicker\"],\n tabIndex: \"tabIndex\",\n ariaLabel: [0, \"aria-label\", \"ariaLabel\"],\n disabled: [2, \"disabled\", \"disabled\", booleanAttribute],\n disableRipple: \"disableRipple\"\n },\n exportAs: [\"matDatepickerToggle\"],\n features: [i0.ɵɵInputTransformsFeature, i0.ɵɵNgOnChangesFeature],\n ngContentSelectors: _c4,\n decls: 4,\n vars: 6,\n consts: [[\"button\", \"\"], [\"mat-icon-button\", \"\", \"type\", \"button\", 3, \"disabled\", \"disableRipple\"], [\"viewBox\", \"0 0 24 24\", \"width\", \"24px\", \"height\", \"24px\", \"fill\", \"currentColor\", \"focusable\", \"false\", \"aria-hidden\", \"true\", 1, \"mat-datepicker-toggle-default-icon\"], [\"d\", \"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"]],\n template: function MatDatepickerToggle_Template(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵprojectionDef(_c3);\n i0.ɵɵelementStart(0, \"button\", 1, 0);\n i0.ɵɵtemplate(2, MatDatepickerToggle_Conditional_2_Template, 2, 0, \":svg:svg\", 2);\n i0.ɵɵprojection(3);\n i0.ɵɵelementEnd();\n }\n if (rf & 2) {\n i0.ɵɵproperty(\"disabled\", ctx.disabled)(\"disableRipple\", ctx.disableRipple);\n i0.ɵɵattribute(\"aria-haspopup\", ctx.datepicker ? \"dialog\" : null)(\"aria-label\", ctx.ariaLabel || ctx._intl.openCalendarLabel)(\"tabindex\", ctx.disabled ? -1 : ctx.tabIndex);\n i0.ɵɵadvance(2);\n i0.ɵɵconditional(!ctx._customIcon ? 2 : -1);\n }\n },\n dependencies: [MatIconButton],\n styles: [\".mat-datepicker-toggle{pointer-events:auto;color:var(--mat-datepicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mat-datepicker-toggle-active{color:var(--mat-datepicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media(forced-colors: active){.mat-datepicker-toggle-default-icon{color:CanvasText}}\"],\n encapsulation: 2,\n changeDetection: 0\n });\n }\n return MatDatepickerToggle;\n})();\n/*#__PURE__*/(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n// This file contains the `_computeAriaAccessibleName` function, which computes what the *expected*\n// ARIA accessible name would be for a given element. Implements a subset of ARIA specification\n// [Accessible Name and Description Computation 1.2](https://www.w3.org/TR/accname-1.2/).\n//\n// Specification accname-1.2 can be summarized by returning the result of the first method\n// available.\n//\n// 1. `aria-labelledby` attribute\n// ```\n// \n// \n// \n// ```\n// 2. `aria-label` attribute (e.g. ``)\n// 3. Label with `for`/`id`\n// ```\n// \n// \n// \n// ```\n// 4. `placeholder` attribute (e.g. ``)\n// 5. `title` attribute (e.g. ``)\n// 6. text content\n// ```\n// \n// \n// \n// ```\n/**\n * Computes the *expected* ARIA accessible name for argument element based on [accname-1.2\n * specification](https://www.w3.org/TR/accname-1.2/). Implements a subset of accname-1.2,\n * and should only be used for the Datepicker's specific use case.\n *\n * Intended use:\n * This is not a general use implementation. Only implements the parts of accname-1.2 that are\n * required for the Datepicker's specific use case. This function is not intended for any other\n * use.\n *\n * Limitations:\n * - Only covers the needs of `matStartDate` and `matEndDate`. Does not support other use cases.\n * - See NOTES's in implementation for specific details on what parts of the accname-1.2\n * specification are not implemented.\n *\n * @param element {HTMLInputElement} native <input/> element of `matStartDate` or\n * `matEndDate` component. Corresponds to the 'Root Element' from accname-1.2\n *\n * @return expected ARIA accessible name of argument <input/>\n */\nfunction _computeAriaAccessibleName(element) {\n return _computeAriaAccessibleNameInternal(element, true);\n}\n/**\n * Determine if argument node is an Element based on `nodeType` property. This function is safe to\n * use with server-side rendering.\n */\nfunction ssrSafeIsElement(node) {\n return node.nodeType === Node.ELEMENT_NODE;\n}\n/**\n * Determine if argument node is an HTMLInputElement based on `nodeName` property. This funciton is\n * safe to use with server-side rendering.\n */\nfunction ssrSafeIsHTMLInputElement(node) {\n return node.nodeName === 'INPUT';\n}\n/**\n * Determine if argument node is an HTMLTextAreaElement based on `nodeName` property. This\n * funciton is safe to use with server-side rendering.\n */\nfunction ssrSafeIsHTMLTextAreaElement(node) {\n return node.nodeName === 'TEXTAREA';\n}\n/**\n * Calculate the expected ARIA accessible name for given DOM Node. Given DOM Node may be either the\n * \"Root node\" passed to `_computeAriaAccessibleName` or \"Current node\" as result of recursion.\n *\n * @return the accessible name of argument DOM Node\n *\n * @param currentNode node to determine accessible name of\n * @param isDirectlyReferenced true if `currentNode` is the root node to calculate ARIA accessible\n * name of. False if it is a result of recursion.\n */\nfunction _computeAriaAccessibleNameInternal(currentNode, isDirectlyReferenced) {\n // NOTE: this differs from accname-1.2 specification.\n // - Does not implement Step 1. of accname-1.2: '''If `currentNode`'s role prohibits naming,\n // return the empty string (\"\")'''.\n // - Does not implement Step 2.A. of accname-1.2: '''if current node is hidden and not directly\n // referenced by aria-labelledby... return the empty string.'''\n // acc-name-1.2 Step 2.B.: aria-labelledby\n if (ssrSafeIsElement(currentNode) && isDirectlyReferenced) {\n const labelledbyIds = currentNode.getAttribute?.('aria-labelledby')?.split(/\\s+/g) || [];\n const validIdRefs = labelledbyIds.reduce((validIds, id) => {\n const elem = document.getElementById(id);\n if (elem) {\n validIds.push(elem);\n }\n return validIds;\n }, []);\n if (validIdRefs.length) {\n return validIdRefs.map(idRef => {\n return _computeAriaAccessibleNameInternal(idRef, false);\n }).join(' ');\n }\n }\n // acc-name-1.2 Step 2.C.: aria-label\n if (ssrSafeIsElement(currentNode)) {\n const ariaLabel = currentNode.getAttribute('aria-label')?.trim();\n if (ariaLabel) {\n return ariaLabel;\n }\n }\n // acc-name-1.2 Step 2.D. attribute or element that defines a text alternative\n //\n // NOTE: this differs from accname-1.2 specification.\n // Only implements Step 2.D. for `