@angular/cdk/fesm2015/a11y.mjs.map

Angular Material Component Development Kit

{"version":3,"file":"a11y.mjs","sources":["../../../../../../src/cdk/a11y/aria-describer/aria-reference.ts","../../../../../../src/cdk/a11y/aria-describer/aria-describer.ts","../../../../../../src/cdk/a11y/key-manager/list-key-manager.ts","../../../../../../src/cdk/a11y/key-manager/activedescendant-key-manager.ts","../../../../../../src/cdk/a11y/key-manager/focus-key-manager.ts","../../../../../../src/cdk/a11y/interactivity-checker/interactivity-checker.ts","../../../../../../src/cdk/a11y/focus-trap/focus-trap.ts","../../../../../../src/cdk/a11y/focus-trap/configurable-focus-trap.ts","../../../../../../src/cdk/a11y/focus-trap/focus-trap-inert-strategy.ts","../../../../../../src/cdk/a11y/focus-trap/event-listener-inert-strategy.ts","../../../../../../src/cdk/a11y/focus-trap/focus-trap-manager.ts","../../../../../../src/cdk/a11y/focus-trap/configurable-focus-trap-factory.ts","../../../../../../src/cdk/a11y/fake-event-detection.ts","../../../../../../src/cdk/a11y/input-modality/input-modality-detector.ts","../../../../../../src/cdk/a11y/live-announcer/live-announcer-tokens.ts","../../../../../../src/cdk/a11y/live-announcer/live-announcer.ts","../../../../../../src/cdk/a11y/focus-monitor/focus-monitor.ts","../../../../../../src/cdk/a11y/high-contrast-mode/high-contrast-mode-detector.ts","../../../../../../src/cdk/a11y/a11y-module.ts","../../../../../../src/cdk/a11y/public-api.ts","../../../../../../src/cdk/a11y/index.ts","../../../../../../src/cdk/a11y/a11y_public_index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** IDs are delimited by an empty space, as per the spec. */\nconst ID_DELIMITER = ' ';\n\n/**\n * Adds the given ID to the specified ARIA attribute on an element.\n * Used for attributes such as aria-labelledby, aria-owns, etc.\n */\nexport function addAriaReferencedId(el: Element, attr: string, id: string) {\n  const ids = getAriaReferenceIds(el, attr);\n  if (ids.some(existingId => existingId.trim() == id.trim())) {\n    return;\n  }\n  ids.push(id.trim());\n\n  el.setAttribute(attr, ids.join(ID_DELIMITER));\n}\n\n/**\n * Removes the given ID from the specified ARIA attribute on an element.\n * Used for attributes such as aria-labelledby, aria-owns, etc.\n */\nexport function removeAriaReferencedId(el: Element, attr: string, id: string) {\n  const ids = getAriaReferenceIds(el, attr);\n  const filteredIds = ids.filter(val => val != id.trim());\n\n  if (filteredIds.length) {\n    el.setAttribute(attr, filteredIds.join(ID_DELIMITER));\n  } else {\n    el.removeAttribute(attr);\n  }\n}\n\n/**\n * Gets the list of IDs referenced by the given ARIA attribute on an element.\n * Used for attributes such as aria-labelledby, aria-owns, etc.\n */\nexport function getAriaReferenceIds(el: Element, attr: string): string[] {\n  // Get string array of all individual ids (whitespace delimited) in the attribute value\n  return (el.getAttribute(attr) || '').match(/\\S+/g) || [];\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {DOCUMENT} from '@angular/common';\nimport {Inject, Injectable, OnDestroy} from '@angular/core';\nimport {Platform} from '@angular/cdk/platform';\nimport {addAriaReferencedId, getAriaReferenceIds, removeAriaReferencedId} from './aria-reference';\n\n/**\n * Interface used to register message elements and keep a count of how many registrations have\n * the same message and the reference to the message element used for the `aria-describedby`.\n */\nexport interface RegisteredMessage {\n  /** The element containing the message. */\n  messageElement: Element;\n\n  /** The number of elements that reference this message element via `aria-describedby`. */\n  referenceCount: number;\n}\n\n/**\n * ID used for the body container where all messages are appended.\n * @deprecated No longer being used. To be removed.\n * @breaking-change 14.0.0\n */\nexport const MESSAGES_CONTAINER_ID = 'cdk-describedby-message-container';\n\n/**\n * ID prefix used for each created message element.\n * @deprecated To be turned into a private variable.\n * @breaking-change 14.0.0\n */\nexport const CDK_DESCRIBEDBY_ID_PREFIX = 'cdk-describedby-message';\n\n/**\n * Attribute given to each host element that is described by a message element.\n * @deprecated To be turned into a private variable.\n * @breaking-change 14.0.0\n */\nexport const CDK_DESCRIBEDBY_HOST_ATTRIBUTE = 'cdk-describedby-host';\n\n/** Global incremental identifier for each registered message element. */\nlet nextId = 0;\n\n/**\n * Utility that creates visually hidden elements with a message content. Useful for elements that\n * want to use aria-describedby to further describe themselves without adding additional visual\n * content.\n */\n@Injectable({providedIn: 'root'})\nexport class AriaDescriber implements OnDestroy {\n  private _document: Document;\n\n  /** Map of all registered message elements that have been placed into the document. */\n  private _messageRegistry = new Map<string | Element, RegisteredMessage>();\n\n  /** Container for all registered messages. */\n  private _messagesContainer: HTMLElement | null = null;\n\n  /** Unique ID for the service. */\n  private readonly _id = `${nextId++}`;\n\n  constructor(\n    @Inject(DOCUMENT) _document: any,\n    /**\n     * @deprecated To be turned into a required parameter.\n     * @breaking-change 14.0.0\n     */\n    private _platform?: Platform,\n  ) {\n    this._document = _document;\n  }\n\n  /**\n   * Adds to the host element an aria-describedby reference to a hidden element that contains\n   * the message. If the same message has already been registered, then it will reuse the created\n   * message element.\n   */\n  describe(hostElement: Element, message: string, role?: string): void;\n\n  /**\n   * Adds to the host element an aria-describedby reference to an already-existing message element.\n   */\n  describe(hostElement: Element, message: HTMLElement): void;\n\n  describe(hostElement: Element, message: string | HTMLElement, role?: string): void {\n    if (!this._canBeDescribed(hostElement, message)) {\n      return;\n    }\n\n    const key = getKey(message, role);\n\n    if (typeof message !== 'string') {\n      // We need to ensure that the element has an ID.\n      setMessageId(message);\n      this._messageRegistry.set(key, {messageElement: message, referenceCount: 0});\n    } else if (!this._messageRegistry.has(key)) {\n      this._createMessageElement(message, role);\n    }\n\n    if (!this._isElementDescribedByMessage(hostElement, key)) {\n      this._addMessageReference(hostElement, key);\n    }\n  }\n\n  /** Removes the host element's aria-describedby reference to the message. */\n  removeDescription(hostElement: Element, message: string, role?: string): void;\n\n  /** Removes the host element's aria-describedby reference to the message element. */\n  removeDescription(hostElement: Element, message: HTMLElement): void;\n\n  removeDescription(hostElement: Element, message: string | HTMLElement, role?: string): void {\n    if (!message || !this._isElementNode(hostElement)) {\n      return;\n    }\n\n    const key = getKey(message, role);\n\n    if (this._isElementDescribedByMessage(hostElement, key)) {\n      this._removeMessageReference(hostElement, key);\n    }\n\n    // If the message is a string, it means that it's one that we created for the\n    // consumer so we can remove it safely, otherwise we should leave it in place.\n    if (typeof message === 'string') {\n      const registeredMessage = this._messageRegistry.get(key);\n      if (registeredMessage && registeredMessage.referenceCount === 0) {\n        this._deleteMessageElement(key);\n      }\n    }\n\n    if (this._messagesContainer?.childNodes.length === 0) {\n      this._messagesContainer.remove();\n      this._messagesContainer = null;\n    }\n  }\n\n  /** Unregisters all created message elements and removes the message container. */\n  ngOnDestroy() {\n    const describedElements = this._document.querySelectorAll(\n      `[${CDK_DESCRIBEDBY_HOST_ATTRIBUTE}=\"${this._id}\"]`,\n    );\n\n    for (let i = 0; i < describedElements.length; i++) {\n      this._removeCdkDescribedByReferenceIds(describedElements[i]);\n      describedElements[i].removeAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE);\n    }\n\n    this._messagesContainer?.remove();\n    this._messagesContainer = null;\n    this._messageRegistry.clear();\n  }\n\n  /**\n   * Creates a new element in the visually hidden message container element with the message\n   * as its content and adds it to the message registry.\n   */\n  private _createMessageElement(message: string, role?: string) {\n    const messageElement = this._document.createElement('div');\n    setMessageId(messageElement);\n    messageElement.textContent = message;\n\n    if (role) {\n      messageElement.setAttribute('role', role);\n    }\n\n    this._createMessagesContainer();\n    this._messagesContainer!.appendChild(messageElement);\n    this._messageRegistry.set(getKey(message, role), {messageElement, referenceCount: 0});\n  }\n\n  /** Deletes the message element from the global messages container. */\n  private _deleteMessageElement(key: string | Element) {\n    this._messageRegistry.get(key)?.messageElement?.remove();\n    this._messageRegistry.delete(key);\n  }\n\n  /** Creates the global container for all aria-describedby messages. */\n  private _createMessagesContainer() {\n    if (this._messagesContainer) {\n      return;\n    }\n\n    const containerClassName = 'cdk-describedby-message-container';\n    const serverContainers = this._document.querySelectorAll(\n      `.${containerClassName}[platform=\"server\"]`,\n    );\n\n    for (let i = 0; i < serverContainers.length; i++) {\n      // When going from the server to the client, we may end up in a situation where there's\n      // already a container on the page, but we don't have a reference to it. Clear the\n      // old container so we don't get duplicates. Doing this, instead of emptying the previous\n      // container, should be slightly faster.\n      serverContainers[i].remove();\n    }\n\n    const messagesContainer = this._document.createElement('div');\n\n    // We add `visibility: hidden` in order to prevent text in this container from\n    // being searchable by the browser's Ctrl + F functionality.\n    // Screen-readers will still read the description for elements with aria-describedby even\n    // when the description element is not visible.\n    messagesContainer.style.visibility = 'hidden';\n    // Even though we use `visibility: hidden`, we still apply `cdk-visually-hidden` so that\n    // the description element doesn't impact page layout.\n    messagesContainer.classList.add(containerClassName);\n    messagesContainer.classList.add('cdk-visually-hidden');\n\n    // @breaking-change 14.0.0 Remove null check for `_platform`.\n    if (this._platform && !this._platform.isBrowser) {\n      messagesContainer.setAttribute('platform', 'server');\n    }\n\n    this._document.body.appendChild(messagesContainer);\n    this._messagesContainer = messagesContainer;\n  }\n\n  /** Removes all cdk-describedby messages that are hosted through the element. */\n  private _removeCdkDescribedByReferenceIds(element: Element) {\n    // Remove all aria-describedby reference IDs that are prefixed by CDK_DESCRIBEDBY_ID_PREFIX\n    const originalReferenceIds = getAriaReferenceIds(element, 'aria-describedby').filter(\n      id => id.indexOf(CDK_DESCRIBEDBY_ID_PREFIX) != 0,\n    );\n    element.setAttribute('aria-describedby', originalReferenceIds.join(' '));\n  }\n\n  /**\n   * Adds a message reference to the element using aria-describedby and increments the registered\n   * message's reference count.\n   */\n  private _addMessageReference(element: Element, key: string | Element) {\n    const registeredMessage = this._messageRegistry.get(key)!;\n\n    // Add the aria-describedby reference and set the\n    // describedby_host attribute to mark the element.\n    addAriaReferencedId(element, 'aria-describedby', registeredMessage.messageElement.id);\n    element.setAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE, this._id);\n    registeredMessage.referenceCount++;\n  }\n\n  /**\n   * Removes a message reference from the element using aria-describedby\n   * and decrements the registered message's reference count.\n   */\n  private _removeMessageReference(element: Element, key: string | Element) {\n    const registeredMessage = this._messageRegistry.get(key)!;\n    registeredMessage.referenceCount--;\n\n    removeAriaReferencedId(element, 'aria-describedby', registeredMessage.messageElement.id);\n    element.removeAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE);\n  }\n\n  /** Returns true if the element has been described by the provided message ID. */\n  private _isElementDescribedByMessage(element: Element, key: string | Element): boolean {\n    const referenceIds = getAriaReferenceIds(element, 'aria-describedby');\n    const registeredMessage = this._messageRegistry.get(key);\n    const messageId = registeredMessage && registeredMessage.messageElement.id;\n\n    return !!messageId && referenceIds.indexOf(messageId) != -1;\n  }\n\n  /** Determines whether a message can be described on a particular element. */\n  private _canBeDescribed(element: Element, message: string | HTMLElement | void): boolean {\n    if (!this._isElementNode(element)) {\n      return false;\n    }\n\n    if (message && typeof message === 'object') {\n      // We'd have to make some assumptions about the description element's text, if the consumer\n      // passed in an element. Assume that if an element is passed in, the consumer has verified\n      // that it can be used as a description.\n      return true;\n    }\n\n    const trimmedMessage = message == null ? '' : `${message}`.trim();\n    const ariaLabel = element.getAttribute('aria-label');\n\n    // We shouldn't set descriptions if they're exactly the same as the `aria-label` of the\n    // element, because screen readers will end up reading out the same text twice in a row.\n    return trimmedMessage ? !ariaLabel || ariaLabel.trim() !== trimmedMessage : false;\n  }\n\n  /** Checks whether a node is an Element node. */\n  private _isElementNode(element: Node): element is Element {\n    return element.nodeType === this._document.ELEMENT_NODE;\n  }\n}\n\n/** Gets a key that can be used to look messages up in the registry. */\nfunction getKey(message: string | Element, role?: string): string | Element {\n  return typeof message === 'string' ? `${role || ''}/${message}` : message;\n}\n\n/** Assigns a unique ID to an element, if it doesn't have one already. */\nfunction setMessageId(element: HTMLElement) {\n  if (!element.id) {\n    element.id = `${CDK_DESCRIBEDBY_ID_PREFIX}-${nextId++}`;\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {QueryList} from '@angular/core';\nimport {Subject, Subscription} from 'rxjs';\nimport {\n  UP_ARROW,\n  DOWN_ARROW,\n  LEFT_ARROW,\n  RIGHT_ARROW,\n  TAB,\n  A,\n  Z,\n  ZERO,\n  NINE,\n  hasModifierKey,\n  HOME,\n  END,\n} from '@angular/cdk/keycodes';\nimport {debounceTime, filter, map, tap} from 'rxjs/operators';\n\n/** This interface is for items that can be passed to a ListKeyManager. */\nexport interface ListKeyManagerOption {\n  /** Whether the option is disabled. */\n  disabled?: boolean;\n\n  /** Gets the label for this option. */\n  getLabel?(): string;\n}\n\n/** Modifier keys handled by the ListKeyManager. */\nexport type ListKeyManagerModifierKey = 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey';\n\n/**\n * This class manages keyboard events for selectable lists. If you pass it a query list\n * of items, it will set the active item correctly when arrow events occur.\n */\nexport class ListKeyManager<T extends ListKeyManagerOption> {\n  private _activeItemIndex = -1;\n  private _activeItem: T | null = null;\n  private _wrap = false;\n  private readonly _letterKeyStream = new Subject<string>();\n  private _typeaheadSubscription = Subscription.EMPTY;\n  private _vertical = true;\n  private _horizontal: 'ltr' | 'rtl' | null;\n  private _allowedModifierKeys: ListKeyManagerModifierKey[] = [];\n  private _homeAndEnd = false;\n\n  /**\n   * Predicate function that can be used to check whether an item should be skipped\n   * by the key manager. By default, disabled items are skipped.\n   */\n  private _skipPredicateFn = (item: T) => item.disabled;\n\n  // Buffer for the letters that the user has pressed when the typeahead option is turned on.\n  private _pressedLetters: string[] = [];\n\n  constructor(private _items: QueryList<T> | T[]) {\n    // We allow for the items to be an array because, in some cases, the consumer may\n    // not have access to a QueryList of the items they want to manage (e.g. when the\n    // items aren't being collected via `ViewChildren` or `ContentChildren`).\n    if (_items instanceof QueryList) {\n      _items.changes.subscribe((newItems: QueryList<T>) => {\n        if (this._activeItem) {\n          const itemArray = newItems.toArray();\n          const newIndex = itemArray.indexOf(this._activeItem);\n\n          if (newIndex > -1 && newIndex !== this._activeItemIndex) {\n            this._activeItemIndex = newIndex;\n          }\n        }\n      });\n    }\n  }\n\n  /**\n   * Stream that emits any time the TAB key is pressed, so components can react\n   * when focus is shifted off of the list.\n   */\n  readonly tabOut = new Subject<void>();\n\n  /** Stream that emits whenever the active item of the list manager changes. */\n  readonly change = new Subject<number>();\n\n  /**\n   * Sets the predicate function that determines which items should be skipped by the\n   * list key manager.\n   * @param predicate Function that determines whether the given item should be skipped.\n   */\n  skipPredicate(predicate: (item: T) => boolean): this {\n    this._skipPredicateFn = predicate;\n    return this;\n  }\n\n  /**\n   * Configures wrapping mode, which determines whether the active item will wrap to\n   * the other end of list when there are no more items in the given direction.\n   * @param shouldWrap Whether the list should wrap when reaching the end.\n   */\n  withWrap(shouldWrap = true): this {\n    this._wrap = shouldWrap;\n    return this;\n  }\n\n  /**\n   * Configures whether the key manager should be able to move the selection vertically.\n   * @param enabled Whether vertical selection should be enabled.\n   */\n  withVerticalOrientation(enabled: boolean = true): this {\n    this._vertical = enabled;\n    return this;\n  }\n\n  /**\n   * Configures the key manager to move the selection horizontally.\n   * Passing in `null` will disable horizontal movement.\n   * @param direction Direction in which the selection can be moved.\n   */\n  withHorizontalOrientation(direction: 'ltr' | 'rtl' | null): this {\n    this._horizontal = direction;\n    return this;\n  }\n\n  /**\n   * Modifier keys which are allowed to be held down and whose default actions will be prevented\n   * as the user is pressing the arrow keys. Defaults to not allowing any modifier keys.\n   */\n  withAllowedModifierKeys(keys: ListKeyManagerModifierKey[]): this {\n    this._allowedModifierKeys = keys;\n    return this;\n  }\n\n  /**\n   * Turns on typeahead mode which allows users to set the active item by typing.\n   * @param debounceInterval Time to wait after the last keystroke before setting the active item.\n   */\n  withTypeAhead(debounceInterval: number = 200): this {\n    if (\n      (typeof ngDevMode === 'undefined' || ngDevMode) &&\n      this._items.length &&\n      this._items.some(item => typeof item.getLabel !== 'function')\n    ) {\n      throw Error('ListKeyManager items in typeahead mode must implement the `getLabel` method.');\n    }\n\n    this._typeaheadSubscription.unsubscribe();\n\n    // Debounce the presses of non-navigational keys, collect the ones that correspond to letters\n    // and convert those letters back into a string. Afterwards find the first item that starts\n    // with that string and select it.\n    this._typeaheadSubscription = this._letterKeyStream\n      .pipe(\n        tap(letter => this._pressedLetters.push(letter)),\n        debounceTime(debounceInterval),\n        filter(() => this._pressedLetters.length > 0),\n        map(() => this._pressedLetters.join('')),\n      )\n      .subscribe(inputString => {\n        const items = this._getItemsArray();\n\n        // Start at 1 because we want to start searching at the item immediately\n        // following the current active item.\n        for (let i = 1; i < items.length + 1; i++) {\n          const index = (this._activeItemIndex + i) % items.length;\n          const item = items[index];\n\n          if (\n            !this._skipPredicateFn(item) &&\n            item.getLabel!().toUpperCase().trim().indexOf(inputString) === 0\n          ) {\n            this.setActiveItem(index);\n            break;\n          }\n        }\n\n        this._pressedLetters = [];\n      });\n\n    return this;\n  }\n\n  /**\n   * Configures the key manager to activate the first and last items\n   * respectively when the Home or End key is pressed.\n   * @param enabled Whether pressing the Home or End key activates the first/last item.\n   */\n  withHomeAndEnd(enabled: boolean = true): this {\n    this._homeAndEnd = enabled;\n    return this;\n  }\n\n  /**\n   * Sets the active item to the item at the index specified.\n   * @param index The index of the item to be set as active.\n   */\n  setActiveItem(index: number): void;\n\n  /**\n   * Sets the active item to the specified item.\n   * @param item The item to be set as active.\n   */\n  setActiveItem(item: T): void;\n\n  setActiveItem(item: any): void {\n    const previousActiveItem = this._activeItem;\n\n    this.updateActiveItem(item);\n\n    if (this._activeItem !== previousActiveItem) {\n      this.change.next(this._activeItemIndex);\n    }\n  }\n\n  /**\n   * Sets the active item depending on the key event passed in.\n   * @param event Keyboard event to be used for determining which element should be active.\n   */\n  onKeydown(event: KeyboardEvent): void {\n    const keyCode = event.keyCode;\n    const modifiers: ListKeyManagerModifierKey[] = ['altKey', 'ctrlKey', 'metaKey', 'shiftKey'];\n    const isModifierAllowed = modifiers.every(modifier => {\n      return !event[modifier] || this._allowedModifierKeys.indexOf(modifier) > -1;\n    });\n\n    switch (keyCode) {\n      case TAB:\n        this.tabOut.next();\n        return;\n\n      case DOWN_ARROW:\n        if (this._vertical && isModifierAllowed) {\n          this.setNextItemActive();\n          break;\n        } else {\n          return;\n        }\n\n      case UP_ARROW:\n        if (this._vertical && isModifierAllowed) {\n          this.setPreviousItemActive();\n          break;\n        } else {\n          return;\n        }\n\n      case RIGHT_ARROW:\n        if (this._horizontal && isModifierAllowed) {\n          this._horizontal === 'rtl' ? this.setPreviousItemActive() : this.setNextItemActive();\n          break;\n        } else {\n          return;\n        }\n\n      case LEFT_ARROW:\n        if (this._horizontal && isModifierAllowed) {\n          this._horizontal === 'rtl' ? this.setNextItemActive() : this.setPreviousItemActive();\n          break;\n        } else {\n          return;\n        }\n\n      case HOME:\n        if (this._homeAndEnd && isModifierAllowed) {\n          this.setFirstItemActive();\n          break;\n        } else {\n          return;\n        }\n\n      case END:\n        if (this._homeAndEnd && isModifierAllowed) {\n          this.setLastItemActive();\n          break;\n        } else {\n          return;\n        }\n\n      default:\n        if (isModifierAllowed || hasModifierKey(event, 'shiftKey')) {\n          // Attempt to use the `event.key` which also maps it to the user's keyboard language,\n          // otherwise fall back to resolving alphanumeric characters via the keyCode.\n          if (event.key && event.key.length === 1) {\n            this._letterKeyStream.next(event.key.toLocaleUpperCase());\n          } else if ((keyCode >= A && keyCode <= Z) || (keyCode >= ZERO && keyCode <= NINE)) {\n            this._letterKeyStream.next(String.fromCharCode(keyCode));\n          }\n        }\n\n        // Note that we return here, in order to avoid preventing\n        // the default action of non-navigational keys.\n        return;\n    }\n\n    this._pressedLetters = [];\n    event.preventDefault();\n  }\n\n  /** Index of the currently active item. */\n  get activeItemIndex(): number | null {\n    return this._activeItemIndex;\n  }\n\n  /** The active item. */\n  get activeItem(): T | null {\n    return this._activeItem;\n  }\n\n  /** Gets whether the user is currently typing into the manager using the typeahead feature. */\n  isTyping(): boolean {\n    return this._pressedLetters.length > 0;\n  }\n\n  /** Sets the active item to the first enabled item in the list. */\n  setFirstItemActive(): void {\n    this._setActiveItemByIndex(0, 1);\n  }\n\n  /** Sets the active item to the last enabled item in the list. */\n  setLastItemActive(): void {\n    this._setActiveItemByIndex(this._items.length - 1, -1);\n  }\n\n  /** Sets the active item to the next enabled item in the list. */\n  setNextItemActive(): void {\n    this._activeItemIndex < 0 ? this.setFirstItemActive() : this._setActiveItemByDelta(1);\n  }\n\n  /** Sets the active item to a previous enabled item in the list. */\n  setPreviousItemActive(): void {\n    this._activeItemIndex < 0 && this._wrap\n      ? this.setLastItemActive()\n      : this._setActiveItemByDelta(-1);\n  }\n\n  /**\n   * Allows setting the active without any other effects.\n   * @param index Index of the item to be set as active.\n   */\n  updateActiveItem(index: number): void;\n\n  /**\n   * Allows setting the active item without any other effects.\n   * @param item Item to be set as active.\n   */\n  updateActiveItem(item: T): void;\n\n  updateActiveItem(item: any): void {\n    const itemArray = this._getItemsArray();\n    const index = typeof item === 'number' ? item : itemArray.indexOf(item);\n    const activeItem = itemArray[index];\n\n    // Explicitly check for `null` and `undefined` because other falsy values are valid.\n    this._activeItem = activeItem == null ? null : activeItem;\n    this._activeItemIndex = index;\n  }\n\n  /**\n   * This method sets the active item, given a list of items and the delta between the\n   * currently active item and the new active item. It will calculate differently\n   * depending on whether wrap mode is turned on.\n   */\n  private _setActiveItemByDelta(delta: -1 | 1): void {\n    this._wrap ? this._setActiveInWrapMode(delta) : this._setActiveInDefaultMode(delta);\n  }\n\n  /**\n   * Sets the active item properly given \"wrap\" mode. In other words, it will continue to move\n   * down the list until it finds an item that is not disabled, and it will wrap if it\n   * encounters either end of the list.\n   */\n  private _setActiveInWrapMode(delta: -1 | 1): void {\n    const items = this._getItemsArray();\n\n    for (let i = 1; i <= items.length; i++) {\n      const index = (this._activeItemIndex + delta * i + items.length) % items.length;\n      const item = items[index];\n\n      if (!this._skipPredicateFn(item)) {\n        this.setActiveItem(index);\n        return;\n      }\n    }\n  }\n\n  /**\n   * Sets the active item properly given the default mode. In other words, it will\n   * continue to move down the list until it finds an item that is not disabled. If\n   * it encounters either end of the list, it will stop and not wrap.\n   */\n  private _setActiveInDefaultMode(delta: -1 | 1): void {\n    this._setActiveItemByIndex(this._activeItemIndex + delta, delta);\n  }\n\n  /**\n   * Sets the active item to the first enabled item starting at the index specified. If the\n   * item is disabled, it will move in the fallbackDelta direction until it either\n   * finds an enabled item or encounters the end of the list.\n   */\n  private _setActiveItemByIndex(index: number, fallbackDelta: -1 | 1): void {\n    const items = this._getItemsArray();\n\n    if (!items[index]) {\n      return;\n    }\n\n    while (this._skipPredicateFn(items[index])) {\n      index += fallbackDelta;\n\n      if (!items[index]) {\n        return;\n      }\n    }\n\n    this.setActiveItem(index);\n  }\n\n  /** Returns the items as an array. */\n  private _getItemsArray(): T[] {\n    return this._items instanceof QueryList ? this._items.toArray() : this._items;\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {ListKeyManager, ListKeyManagerOption} from './list-key-manager';\n\n/**\n * This is the interface for highlightable items (used by the ActiveDescendantKeyManager).\n * Each item must know how to style itself as active or inactive and whether or not it is\n * currently disabled.\n */\nexport interface Highlightable extends ListKeyManagerOption {\n  /** Applies the styles for an active item to this item. */\n  setActiveStyles(): void;\n\n  /** Applies the styles for an inactive item to this item. */\n  setInactiveStyles(): void;\n}\n\nexport class ActiveDescendantKeyManager<T> extends ListKeyManager<Highlightable & T> {\n  /**\n   * Sets the active item to the item at the specified index and adds the\n   * active styles to the newly active item. Also removes active styles\n   * from the previously active item.\n   * @param index Index of the item to be set as active.\n   */\n  override setActiveItem(index: number): void;\n\n  /**\n   * Sets the active item to the item to the specified one and adds the\n   * active styles to the it. Also removes active styles from the\n   * previously active item.\n   * @param item Item to be set as active.\n   */\n  override setActiveItem(item: T): void;\n\n  override setActiveItem(index: any): void {\n    if (this.activeItem) {\n      this.activeItem.setInactiveStyles();\n    }\n    super.setActiveItem(index);\n    if (this.activeItem) {\n      this.activeItem.setActiveStyles();\n    }\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {ListKeyManager, ListKeyManagerOption} from './list-key-manager';\nimport {FocusOrigin} from '../focus-monitor/focus-monitor';\n\n/**\n * This is the interface for focusable items (used by the FocusKeyManager).\n * Each item must know how to focus itself, whether or not it is currently disabled\n * and be able to supply its label.\n */\nexport interface FocusableOption extends ListKeyManagerOption {\n  /** Focuses the `FocusableOption`. */\n  focus(origin?: FocusOrigin): void;\n}\n\nexport class FocusKeyManager<T> extends ListKeyManager<FocusableOption & T> {\n  private _origin: FocusOrigin = 'program';\n\n  /**\n   * Sets the focus origin that will be passed in to the items for any subsequent `focus` calls.\n   * @param origin Focus origin to be used when focusing items.\n   */\n  setFocusOrigin(origin: FocusOrigin): this {\n    this._origin = origin;\n    return this;\n  }\n\n  /**\n   * Sets the active item to the item at the specified\n   * index and focuses the newly active item.\n   * @param index Index of the item to be set as active.\n   */\n  override setActiveItem(index: number): void;\n\n  /**\n   * Sets the active item to the item that is specified and focuses it.\n   * @param item Item to be set as active.\n   */\n  override setActiveItem(item: T): void;\n\n  override setActiveItem(item: any): void {\n    super.setActiveItem(item);\n\n    if (this.activeItem) {\n      this.activeItem.focus(this._origin);\n    }\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Platform} from '@angular/cdk/platform';\nimport {Injectable} from '@angular/core';\n\n/**\n * Configuration for the isFocusable method.\n */\nexport class IsFocusableConfig {\n  /**\n   * Whether to count an element as focusable even if it is not currently visible.\n   */\n  ignoreVisibility: boolean = false;\n}\n\n// The InteractivityChecker leans heavily on the ally.js accessibility utilities.\n// Methods like `isTabbable` are only covering specific edge-cases for the browsers which are\n// supported.\n\n/**\n * Utility for checking the interactivity of an element, such as whether is is focusable or\n * tabbable.\n */\n@Injectable({providedIn: 'root'})\nexport class InteractivityChecker {\n  constructor(private _platform: Platform) {}\n\n  /**\n   * Gets whether an element is disabled.\n   *\n   * @param element Element to be checked.\n   * @returns Whether the element is disabled.\n   */\n  isDisabled(element: HTMLElement): boolean {\n    // This does not capture some cases, such as a non-form control with a disabled attribute or\n    // a form control inside of a disabled form, but should capture the most common cases.\n    return element.hasAttribute('disabled');\n  }\n\n  /**\n   * Gets whether an element is visible for the purposes of interactivity.\n   *\n   * This will capture states like `display: none` and `visibility: hidden`, but not things like\n   * being clipped by an `overflow: hidden` parent or being outside the viewport.\n   *\n   * @returns Whether the element is visible.\n   */\n  isVisible(element: HTMLElement): boolean {\n    return hasGeometry(element) && getComputedStyle(element).visibility === 'visible';\n  }\n\n  /**\n   * Gets whether an element can be reached via Tab key.\n   * Assumes that the element has already been checked with isFocusable.\n   *\n   * @param element Element to be checked.\n   * @returns Whether the element is tabbable.\n   */\n  isTabbable(element: HTMLElement): boolean {\n    // Nothing is tabbable on the server 😎\n    if (!this._platform.isBrowser) {\n      return false;\n    }\n\n    const frameElement = getFrameElement(getWindow(element));\n\n    if (frameElement) {\n      // Frame elements inherit their tabindex onto all child elements.\n      if (getTabIndexValue(frameElement) === -1) {\n        return false;\n      }\n\n      // Browsers disable tabbing to an element inside of an invisible frame.\n      if (!this.isVisible(frameElement)) {\n        return false;\n      }\n    }\n\n    let nodeName = element.nodeName.toLowerCase();\n    let tabIndexValue = getTabIndexValue(element);\n\n    if (element.hasAttribute('contenteditable')) {\n      return tabIndexValue !== -1;\n    }\n\n    if (nodeName === 'iframe' || nodeName === 'object') {\n      // The frame or object's content may be tabbable depending on the content, but it's\n      // not possibly to reliably detect the content of the frames. We always consider such\n      // elements as non-tabbable.\n      return false;\n    }\n\n    // In iOS, the browser only considers some specific elements as tabbable.\n    if (this._platform.WEBKIT && this._platform.IOS && !isPotentiallyTabbableIOS(element)) {\n      return false;\n    }\n\n    if (nodeName === 'audio') {\n      // Audio elements without controls enabled are never tabbable, regardless\n      // of the tabindex attribute explicitly being set.\n      if (!element.hasAttribute('controls')) {\n        return false;\n      }\n      // Audio elements with controls are by default tabbable unless the\n      // tabindex attribute is set to `-1` explicitly.\n      return tabIndexValue !== -1;\n    }\n\n    if (nodeName === 'video') {\n      // For all video elements, if the tabindex attribute is set to `-1`, the video\n      // is not tabbable. Note: We cannot rely on the default `HTMLElement.tabIndex`\n      // property as that one is set to `-1` in Chrome, Edge and Safari v13.1. The\n      // tabindex attribute is the source of truth here.\n      if (tabIndexValue === -1) {\n        return false;\n      }\n      // If the tabindex is explicitly set, and not `-1` (as per check before), the\n      // video element is always tabbable (regardless of whether it has controls or not).\n      if (tabIndexValue !== null) {\n        return true;\n      }\n      // Otherwise (when no explicit tabindex is set), a video is only tabbable if it\n      // has controls enabled. Firefox is special as videos are always tabbable regardless\n      // of whether there are controls or not.\n      return this._platform.FIREFOX || element.hasAttribute('controls');\n    }\n\n    return element.tabIndex >= 0;\n  }\n\n  /**\n   * Gets whether an element can be focused by the user.\n   *\n   * @param element Element to be checked.\n   * @param config The config object with options to customize this method's behavior\n   * @returns Whether the element is focusable.\n   */\n  isFocusable(element: HTMLElement, config?: IsFocusableConfig): boolean {\n    // Perform checks in order of left to most expensive.\n    // Again, naive approach that does not capture many edge cases and browser quirks.\n    return (\n      isPotentiallyFocusable(element) &&\n      !this.isDisabled(element) &&\n      (config?.ignoreVisibility || this.isVisible(element))\n    );\n  }\n}\n\n/**\n * Returns the frame element from a window object. Since browsers like MS Edge throw errors if\n * the frameElement property is being accessed from a different host address, this property\n * should be accessed carefully.\n */\nfunction getFrameElement(window: Window) {\n  try {\n    return window.frameElement as HTMLElement;\n  } catch {\n    return null;\n  }\n}\n\n/** Checks whether the specified element has any geometry / rectangles. */\nfunction hasGeometry(element: HTMLElement): boolean {\n  // Use logic from jQuery to check for an invisible element.\n  // See https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js#L12\n  return !!(\n    element.offsetWidth ||\n    element.offsetHeight ||\n    (typeof element.getClientRects === 'function' && element.getClientRects().length)\n  );\n}\n\n/** Gets whether an element's  */\nfunction isNativeFormElement(element: Node) {\n  let nodeName = element.nodeName.toLowerCase();\n  return (\n    nodeName === 'input' ||\n    nodeName === 'select' ||\n    nodeName === 'button' ||\n    nodeName === 'textarea'\n  );\n}\n\n/** Gets whether an element is an `<input type=\"hidden\">`. */\nfunction isHiddenInput(element: HTMLElement): boolean {\n  return isInputElement(element) && element.type == 'hidden';\n}\n\n/** Gets whether an element is an anchor that has an href attribute. */\nfunction isAnchorWithHref(element: HTMLElement): boolean {\n  return isAnchorElement(element) && element.hasAttribute('href');\n}\n\n/** Gets whether an element is an input element. */\nfunction isInputElement(element: HTMLElement): element is HTMLInputElement {\n  return element.nodeName.toLowerCase() == 'input';\n}\n\n/** Gets whether an element is an anchor element. */\nfunction isAnchorElement(element: HTMLElement): element is HTMLAnchorElement {\n  return element.nodeName.toLowerCase() == 'a';\n}\n\n/** Gets whether an element has a valid tabindex. */\nfunction hasValidTabIndex(element: HTMLElement): boolean {\n  if (!element.hasAttribute('tabindex') || element.tabIndex === undefined) {\n    return false;\n  }\n\n  let tabIndex = element.getAttribute('tabindex');\n  return !!(tabIndex && !isNaN(parseInt(tabIndex, 10)));\n}\n\n/**\n * Returns the parsed tabindex from the element attributes instead of returning the\n * evaluated tabindex from the browsers defaults.\n */\nfunction getTabIndexValue(element: HTMLElement): number | null {\n  if (!hasValidTabIndex(element)) {\n    return null;\n  }\n\n  // See browser issue in Gecko https://bugzilla.mozilla.org/show_bug.cgi?id=1128054\n  const tabIndex = parseInt(element.getAttribute('tabindex') || '', 10);\n\n  return isNaN(tabIndex) ? -1 : tabIndex;\n}\n\n/** Checks whether the specified element is potentially tabbable on iOS */\nfunction isPotentiallyTabbableIOS(element: HTMLElement): boolean {\n  let nodeName = element.nodeName.toLowerCase();\n  let inputType = nodeName === 'input' && (element as HTMLInputElement).type;\n\n  return (\n    inputType === 'text' ||\n    inputType === 'password' ||\n    nodeName === 'select' ||\n    nodeName === 'textarea'\n  );\n}\n\n/**\n * Gets whether an element is potentially focusable without taking current visible/disabled state\n * into account.\n */\nfunction isPotentiallyFocusable(element: HTMLElement): boolean {\n  // Inputs are potentially focusable *unless* they're type=\"hidden\".\n  if (isHiddenInput(element)) {\n    return false;\n  }\n\n  return (\n    isNativeFormElement(element) ||\n    isAnchorWithHref(element) ||\n    element.hasAttribute('contenteditable') ||\n    hasValidTabIndex(element)\n  );\n}\n\n/** Gets the parent window of a DOM node with regards of being inside of an iframe. */\nfunction getWindow(node: HTMLElement): Window {\n  // ownerDocument is null if `node` itself *is* a document.\n  return (node.ownerDocument && node.ownerDocument.defaultView) || window;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';\nimport {DOCUMENT} from '@angular/common';\nimport {\n  AfterContentInit,\n  Directive,\n  ElementRef,\n  Inject,\n  Injectable,\n  Input,\n  NgZone,\n  OnDestroy,\n  DoCheck,\n  SimpleChanges,\n  OnChanges,\n} from '@angular/core';\nimport {take} from 'rxjs/operators';\nimport {InteractivityChecker} from '../interactivity-checker/interactivity-checker';\n\n/**\n * Class that allows for trapping focus within a DOM element.\n *\n * This class currently uses a relatively simple approach to focus trapping.\n * It assumes that the tab order is the same as DOM order, which is not necessarily true.\n * Things like `tabIndex > 0`, flex `order`, and shadow roots can cause the two to be misaligned.\n *\n * @deprecated Use `ConfigurableFocusTrap` instead.\n * @breaking-change 11.0.0\n */\nexport class FocusTrap {\n  private _startAnchor: HTMLElement | null;\n  private _endAnchor: HTMLElement | null;\n  private _hasAttached = false;\n\n  // Event listeners for the anchors. Need to be regular functions so that we can unbind them later.\n  protected startAnchorListener = () => this.focusLastTabbableElement();\n  protected endAnchorListener = () => this.focusFirstTabbableElement();\n\n  /** Whether the focus trap is active. */\n  get enabled(): boolean {\n    return this._enabled;\n  }\n  set enabled(value: boolean) {\n    this._enabled = value;\n\n    if (this._startAnchor && this._endAnchor) {\n      this._toggleAnchorTabIndex(value, this._startAnchor);\n      this._toggleAnchorTabIndex(value, this._endAnchor);\n    }\n  }\n  protected _enabled: boolean = true;\n\n  constructor(\n    readonly _element: HTMLElement,\n    private _checker: InteractivityChecker,\n    readonly _ngZone: NgZone,\n    readonly _document: Document,\n    deferAnchors = false,\n  ) {\n    if (!deferAnchors) {\n      this.attachAnchors();\n    }\n  }\n\n  /** Destroys the focus trap by cleaning up the anchors. */\n  destroy() {\n    const startAnchor = this._startAnchor;\n    const endAnchor = this._endAnchor;\n\n    if (startAnchor) {\n      startAnchor.removeEventListener('focus', this.startAnchorListener);\n      startAnchor.remove();\n    }\n\n    if (endAnchor) {\n      endAnchor.removeEventListener('focus', this.endAnchorListener);\n      endAnchor.remove();\n    }\n\n    this._startAnchor = this._endAnchor = null;\n    this._hasAttached = false;\n  }\n\n  /**\n   * Inserts the anchors into the DOM. This is usually done automatically\n   * in the constructor, but can be deferred for cases like directives with `*ngIf`.\n   * @returns Whether the focus trap managed to attach successfully. This may not be the case\n   * if the target element isn't currently in the DOM.\n   */\n  attachAnchors(): boolean {\n    // If we're not on the browser, there can be no focus to trap.\n    if (this._hasAttached) {\n      return true;\n    }\n\n    this._ngZone.runOutsideAngular(() => {\n      if (!this._startAnchor) {\n        this._startAnchor = this._createAnchor();\n        this._startAnchor!.addEventListener('focus', this.startAnchorListener);\n      }\n\n      if (!this._endAnchor) {\n        this._endAnchor = this._createAnchor();\n        this._endAnchor!.addEventListener('focus', this.endAnchorListener);\n      }\n    });\n\n    if (this._element.parentNode) {\n      this._element.parentNode.insertBefore(this._startAnchor!, this._element);\n      this._element.parentNode.insertBefore(this._endAnchor!, this._element.nextSibling);\n      this._hasAttached = true;\n    }\n\n    return this._hasAttached;\n  }\n\n  /**\n   * Waits for the zone to stabilize, then focuses the first tabbable element.\n   * @returns Returns a promise that resolves with a boolean, depending\n   * on whether focus was moved successfully.\n   */\n  focusInitialElementWhenReady(options?: FocusOptions): Promise<boolean> {\n    return new Promise<boolean>(resolve => {\n      this._executeOnStable(() => resolve(this.focusInitialElement(options)));\n    });\n  }\n\n  /**\n   * Waits for the zone to stabilize, then focuses\n   * the first tabbable element within the focus trap region.\n   * @returns Returns a promise that resolves with a boolean, depending\n   * on whether focus was moved successfully.\n   */\n  focusFirstTabbableElementWhenReady(options?: FocusOptions): Promise<boolean> {\n    return new Promise<boolean>(resolve => {\n      this._executeOnStable(() => resolve(this.focusFirstTabbableElement(options)));\n    });\n  }\n\n  /**\n   * Waits for the zone to stabilize, then focuses\n   * the last tabbable element within the focus trap region.\n   * @returns Returns a promise that resolves with a boolean, depending\n   * on whether focus was moved successfully.\n   */\n  focusLastTabbableElementWhenReady(options?: FocusOptions): Promise<boolean> {\n    return new Promise<boolean>(resolve => {\n      this._executeOnStable(() => resolve(this.focusLastTabbableElement(options)));\n    });\n  }\n\n  /**\n   * Get the specified boundary element of the trapped region.\n   * @param bound The boundary to get (start or end of trapped region).\n   * @returns The boundary element.\n   */\n  private _getRegionBoundary(bound: 'start' | 'end'): HTMLElement | null {\n    // Contains the deprecated version of selector, for temporary backwards comparability.\n    const markers = this._element.querySelectorAll(\n      `[cdk-focus-region-${bound}], ` + `[cdkFocusRegion${bound}], ` + `[cdk-focus-${bound}]`,\n    ) as NodeListOf<HTMLElement>;\n\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      for (let i = 0; i < markers.length; i++) {\n        // @breaking-change 8.0.0\n        if (markers[i].hasAttribute(`cdk-focus-${bound}`)) {\n          console.warn(\n            `Found use of deprecated attribute 'cdk-focus-${bound}', ` +\n              `use 'cdkFocusRegion${bound}' instead. The deprecated ` +\n              `attribute will be removed in 8.0.0.`,\n            markers[i],\n          );\n        } else if (markers[i].hasAttribute(`cdk-focus-region-${bound}`)) {\n          console.warn(\n            `Found use of deprecated attribute 'cdk-focus-region-${bound}', ` +\n              `use 'cdkFocusRegion${bound}' instead. The deprecated attribute ` +\n              `will be removed in 8.0.0.`,\n            markers[i],\n          );\n        }\n      }\n    }\n\n    if (bound == 'start') {\n      return markers.length ? markers[0] : this._getFirstTabbableElement(this._element);\n    }\n    return markers.length\n      ? markers[markers.length - 1]\n      : this._getLastTabbableElement(this._element);\n  }\n\n  /**\n   * Focuses the element that should be focused when the focus trap is initialized.\n   * @returns Whether focus was moved successfully.\n   */\n  focusInitialElement(options?: FocusOptions): boolean {\n    // Contains the deprecated version of selector, for temporary backwards comparability.\n    const redirectToElement = this._element.querySelector(\n      `[cdk-focus-initial], ` + `[cdkFocusInitial]`,\n    ) as HTMLElement;\n\n    if (redirectToElement) {\n      // @breaking-change 8.0.0\n      if (\n        (typeof ngDevMode === 'undefined' || ngDevMode) &&\n        redirectToElement.hasAttribute(`cdk-focus-initial`)\n      ) {\n        console.warn(\n          `Found use of deprecated attribute 'cdk-focus-initial', ` +\n            `use 'cdkFocusInitial' instead. The deprecated attribute ` +\n            `will be removed in 8.0.0`,\n          redirectToElement,\n        );\n      }\n\n      // Warn the consumer if the element they've pointed to\n      // isn't focusable, when not in production mode.\n      if (\n        (typeof ngDevMode === 'undefined' || ngDevMode) &&\n        !this._checker.isFocusable(redirectToElement)\n      ) {\n        console.warn(`Element matching