@angular/flex-layout/fesm2015/angular-flex-layout-core.mjs.map

Angular Flex-Layout =======

{"version":3,"file":"angular-flex-layout-core.mjs","sources":["../../../../projects/libs/flex-layout/core/browser-provider.ts","../../../../projects/libs/flex-layout/core/module.ts","../../../../projects/libs/flex-layout/core/media-change.ts","../../../../projects/libs/flex-layout/core/stylesheet-map/stylesheet-map.ts","../../../../projects/libs/flex-layout/core/stylesheet-map/index.ts","../../../../projects/libs/flex-layout/core/tokens/library-config.ts","../../../../projects/libs/flex-layout/core/tokens/server-token.ts","../../../../projects/libs/flex-layout/core/tokens/breakpoint-token.ts","../../../../projects/libs/flex-layout/core/tokens/index.ts","../../../../projects/libs/flex-layout/core/add-alias.ts","../../../../projects/libs/flex-layout/core/style-builder/style-builder.ts","../../../../projects/libs/flex-layout/core/style-utils/style-utils.ts","../../../../projects/libs/flex-layout/core/utils/sort.ts","../../../../projects/libs/flex-layout/core/match-media/match-media.ts","../../../../projects/libs/flex-layout/core/breakpoints/data/break-points.ts","../../../../projects/libs/flex-layout/core/breakpoints/data/orientation-break-points.ts","../../../../projects/libs/flex-layout/core/breakpoints/breakpoint-tools.ts","../../../../projects/libs/flex-layout/core/breakpoints/break-points-token.ts","../../../../projects/libs/flex-layout/core/breakpoints/break-point-registry.ts","../../../../projects/libs/flex-layout/core/media-marshaller/print-hook.ts","../../../../projects/libs/flex-layout/core/media-marshaller/media-marshaller.ts","../../../../projects/libs/flex-layout/core/base/base2.ts","../../../../projects/libs/flex-layout/core/base/index.ts","../../../../projects/libs/flex-layout/core/breakpoints/index.ts","../../../../projects/libs/flex-layout/core/match-media/mock/mock-match-media.ts","../../../../projects/libs/flex-layout/core/match-media/index.ts","../../../../projects/libs/flex-layout/core/utils/array.ts","../../../../projects/libs/flex-layout/core/media-observer/media-observer.ts","../../../../projects/libs/flex-layout/core/media-observer/index.ts","../../../../projects/libs/flex-layout/core/media-trigger/media-trigger.ts","../../../../projects/libs/flex-layout/core/media-trigger/index.ts","../../../../projects/libs/flex-layout/core/utils/index.ts","../../../../projects/libs/flex-layout/core/basis-validator/basis-validator.ts","../../../../projects/libs/flex-layout/core/multiply/multiplier.ts","../../../../projects/libs/flex-layout/core/public-api.ts","../../../../projects/libs/flex-layout/core/angular-flex-layout-core.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 */\nimport {APP_BOOTSTRAP_LISTENER, PLATFORM_ID, InjectionToken} from '@angular/core';\nimport {DOCUMENT, isPlatformBrowser} from '@angular/common';\n\n/**\n * Find all of the server-generated stylings, if any, and remove them\n * This will be in the form of inline classes and the style block in the\n * head of the DOM\n */\nexport function removeStyles(_document: Document, platformId: Object) {\n  return () => {\n    if (isPlatformBrowser(platformId)) {\n      const elements = Array.from(_document.querySelectorAll(`[class*=${CLASS_NAME}]`));\n\n      // RegExp constructor should only be used if passing a variable to the constructor.\n      // When using static regular expression it is more performant to use reg exp literal.\n      // This is also needed to provide Safari 9 compatibility, please see\n      // https://stackoverflow.com/questions/37919802 for more discussion.\n      const classRegex = /\\bflex-layout-.+?\\b/g;\n      elements.forEach(el => {\n        el.classList.contains(`${CLASS_NAME}ssr`) && el.parentNode ?\n          el.parentNode.removeChild(el) : el.className.replace(classRegex, '');\n      });\n    }\n  };\n}\n\n/**\n *  Provider to remove SSR styles on the browser\n */\nexport const BROWSER_PROVIDER = {\n  provide: <InjectionToken<(() => void)[]>>APP_BOOTSTRAP_LISTENER,\n  useFactory: removeStyles,\n  deps: [DOCUMENT, PLATFORM_ID],\n  multi: true\n};\n\nexport const CLASS_NAME = 'flex-layout-';\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 */\nimport {NgModule} from '@angular/core';\n\nimport {BROWSER_PROVIDER} from './browser-provider';\n\n\n/**\n * *****************************************************************\n * Define module for common Angular Layout utilities\n * *****************************************************************\n */\n@NgModule({\n  providers: [BROWSER_PROVIDER]\n})\nexport class CoreModule {\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 */\nexport type MediaQuerySubscriber = (changes: MediaChange) => void;\n\n/**\n * Class instances emitted [to observers] for each mql notification\n */\nexport class MediaChange {\n  property: string = '';\n  value: any;\n\n  /**\n   * @param matches whether the mediaQuery is currently activated\n   * @param mediaQuery e.g. (min-width: 600px) and (max-width: 959px)\n   * @param mqAlias e.g. gt-sm, md, gt-lg\n   * @param suffix e.g. GtSM, Md, GtLg\n   * @param priority the priority of activation for the given breakpoint\n   */\n  constructor(public matches = false,\n              public mediaQuery = 'all',\n              public mqAlias = '',\n              public suffix = '',\n              public priority = 0) {\n  }\n\n  /** Create an exact copy of the MediaChange */\n  clone(): MediaChange {\n    return new MediaChange(this.matches, this.mediaQuery, this.mqAlias, this.suffix);\n  }\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 */\nimport {Injectable} from '@angular/core';\n\n/**\n * Utility to emulate a CSS stylesheet\n *\n * This utility class stores all of the styles for a given HTML element\n * as a readonly `stylesheet` map.\n */\n@Injectable({providedIn: 'root'})\nexport class StylesheetMap {\n\n  readonly stylesheet = new Map<HTMLElement, Map<string, string|number>>();\n\n  /**\n   * Add an individual style to an HTML element\n   */\n  addStyleToElement(element: HTMLElement, style: string, value: string|number) {\n    const stylesheet = this.stylesheet.get(element);\n    if (stylesheet) {\n      stylesheet.set(style, value);\n    } else {\n      this.stylesheet.set(element, new Map([[style, value]]));\n    }\n  }\n\n  /**\n   * Clear the virtual stylesheet\n   */\n  clearStyles() {\n    this.stylesheet.clear();\n  }\n\n  /**\n   * Retrieve a given style for an HTML element\n   */\n  getStyleForElement(el: HTMLElement, styleName: string): string {\n    const styles = this.stylesheet.get(el);\n    let value = '';\n    if (styles) {\n      const style = styles.get(styleName);\n      if (typeof style === 'number' || typeof style === 'string') {\n        value = style + '';\n      }\n    }\n    return value;\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\nexport * from './stylesheet-map';\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 */\nimport {InjectionToken} from '@angular/core';\nimport {Multiplier} from '../multiply/multiplier';\n\n/** a set of configuration options for FlexLayoutModule */\nexport interface LayoutConfigOptions {\n  addFlexToParent?: boolean;\n  addOrientationBps?: boolean;\n  disableDefaultBps?: boolean;\n  disableVendorPrefixes?: boolean;\n  serverLoaded?: boolean;\n  useColumnBasisZero?: boolean;\n  printWithBreakpoints?: string[];\n  mediaTriggerAutoRestore?: boolean;\n  ssrObserveBreakpoints?: string[];\n  multiplier?: Multiplier;\n  defaultUnit?: string;\n  detectLayoutDisplay?: boolean;\n}\n\nexport const DEFAULT_CONFIG: Required<LayoutConfigOptions> = {\n  addFlexToParent: true,\n  addOrientationBps: false,\n  disableDefaultBps: false,\n  disableVendorPrefixes: false,\n  serverLoaded: false,\n  useColumnBasisZero: true,\n  printWithBreakpoints: [],\n  mediaTriggerAutoRestore: true,\n  ssrObserveBreakpoints: [],\n  // This is disabled by default because otherwise the multiplier would\n  // run for all users, regardless of whether they're using this feature.\n  // Instead, we disable it by default, which requires this ugly cast.\n  multiplier: undefined as unknown as Multiplier,\n  defaultUnit: 'px',\n  detectLayoutDisplay: false,\n};\n\nexport const LAYOUT_CONFIG = new InjectionToken<LayoutConfigOptions>(\n    'Flex Layout token, config options for the library', {\n      providedIn: 'root',\n      factory: () => DEFAULT_CONFIG\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 */\nimport {InjectionToken} from '@angular/core';\n\n/**\n * Token that is provided to tell whether the FlexLayoutServerModule\n * has been included in the bundle\n *\n * NOTE: This can be manually provided to disable styles when using SSR\n */\nexport const SERVER_TOKEN = new InjectionToken<boolean>(\n  'FlexLayoutServerLoaded', {\n    providedIn: 'root',\n    factory: () => false\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 */\nimport {InjectionToken} from '@angular/core';\nimport {BreakPoint} from '../breakpoints/break-point';\n\nexport const BREAKPOINT = new InjectionToken<BreakPoint|BreakPoint[]|null>(\n  'Flex Layout token, collect all breakpoints into one provider', {\n    providedIn: 'root',\n    factory: () => null\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\nexport * from './library-config';\nexport * from './server-token';\nexport * from './breakpoint-token';\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 */\nimport {MediaChange} from './media-change';\nimport {OptionalBreakPoint} from './breakpoints';\n\n/**\n * For the specified MediaChange, make sure it contains the breakpoint alias\n * and suffix (if available).\n */\nexport function mergeAlias(dest: MediaChange, source: OptionalBreakPoint): MediaChange {\n  dest = dest?.clone() ?? new MediaChange();\n  if (source) {\n    dest.mqAlias = source.alias;\n    dest.mediaQuery = source.mediaQuery;\n    dest.suffix = source.suffix as string;\n    dest.priority = source.priority as number;\n  }\n  return dest;\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 */\nimport {StyleDefinition} from '../style-utils/style-utils';\n\n/** A class that encapsulates CSS style generation for common directives */\nexport abstract class StyleBuilder {\n\n  /** Whether to cache the generated output styles */\n  shouldCache = true;\n\n  /** Build the styles given an input string and configuration object from a host */\n  abstract buildStyles(input: string, parent?: Object): StyleDefinition;\n\n  /**\n   * Run a side effect computation given the input string and the computed styles\n   * from the build task and the host configuration object\n   * NOTE: This should be a no-op unless an algorithm is provided in a subclass\n   */\n  sideEffect(_input: string, _styles: StyleDefinition, _parent?: Object) {\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 */\nimport {Inject, Injectable, PLATFORM_ID} from '@angular/core';\nimport {isPlatformBrowser, isPlatformServer} from '@angular/common';\n\nimport {applyCssPrefixes} from '@angular/flex-layout/_private-utils';\nimport {StylesheetMap} from '../stylesheet-map/stylesheet-map';\nimport {SERVER_TOKEN} from '../tokens/server-token';\nimport {LAYOUT_CONFIG, LayoutConfigOptions} from '../tokens/library-config';\n\n@Injectable({providedIn: 'root'})\nexport class StyleUtils {\n\n  constructor(private _serverStylesheet: StylesheetMap,\n              @Inject(SERVER_TOKEN) private _serverModuleLoaded: boolean,\n              @Inject(PLATFORM_ID) private _platformId: Object,\n              @Inject(LAYOUT_CONFIG) private layoutConfig: LayoutConfigOptions) {}\n\n  /**\n   * Applies styles given via string pair or object map to the directive element\n   */\n  applyStyleToElement(element: HTMLElement,\n                      style: StyleDefinition | string,\n                      value: string | number | null = null) {\n    let styles: StyleDefinition = {};\n    if (typeof style === 'string') {\n      styles[style] = value;\n      style = styles;\n    }\n    styles = this.layoutConfig.disableVendorPrefixes ? style : applyCssPrefixes(style);\n    this._applyMultiValueStyleToElement(styles, element);\n  }\n\n  /**\n   * Applies styles given via string pair or object map to the directive's element\n   */\n  applyStyleToElements(style: StyleDefinition, elements: HTMLElement[] = []) {\n    const styles = this.layoutConfig.disableVendorPrefixes ? style : applyCssPrefixes(style);\n    elements.forEach(el => {\n      this._applyMultiValueStyleToElement(styles, el);\n    });\n  }\n\n  /**\n   * Determine the DOM element's Flexbox flow (flex-direction)\n   *\n   * Check inline style first then check computed (stylesheet) style\n   */\n  getFlowDirection(target: HTMLElement): [string, string] {\n    const query = 'flex-direction';\n    let value = this.lookupStyle(target, query);\n    const hasInlineValue = this.lookupInlineStyle(target, query) ||\n    (isPlatformServer(this._platformId) && this._serverModuleLoaded) ? value : '';\n\n    return [value || 'row', hasInlineValue];\n  }\n\n  hasWrap(target: HTMLElement): boolean {\n    const query = 'flex-wrap';\n    return this.lookupStyle(target, query) === 'wrap';\n  }\n\n  /**\n   * Find the DOM element's raw attribute value (if any)\n   */\n  lookupAttributeValue(element: HTMLElement, attribute: string): string {\n    return element.getAttribute(attribute) ?? '';\n  }\n\n  /**\n   * Find the DOM element's inline style value (if any)\n   */\n  lookupInlineStyle(element: HTMLElement, styleName: string): string {\n    return isPlatformBrowser(this._platformId) ?\n      element.style.getPropertyValue(styleName) : getServerStyle(element, styleName);\n  }\n\n  /**\n   * Determine the inline or inherited CSS style\n   * NOTE: platform-server has no implementation for getComputedStyle\n   */\n  lookupStyle(element: HTMLElement, styleName: string, inlineOnly = false): string {\n    let value = '';\n    if (element) {\n      let immediateValue = value = this.lookupInlineStyle(element, styleName);\n      if (!immediateValue) {\n        if (isPlatformBrowser(this._platformId)) {\n          if (!inlineOnly) {\n            value = getComputedStyle(element).getPropertyValue(styleName);\n          }\n        } else {\n          if (this._serverModuleLoaded) {\n            value = this._serverStylesheet.getStyleForElement(element, styleName);\n          }\n        }\n      }\n    }\n\n    // Note: 'inline' is the default of all elements, unless UA stylesheet overrides;\n    //       in which case getComputedStyle() should determine a valid value.\n    return value ? value.trim() : '';\n  }\n\n  /**\n   * Applies the styles to the element. The styles object map may contain an array of values\n   * Each value will be added as element style\n   * Keys are sorted to add prefixed styles (like -webkit-x) first, before the standard ones\n   */\n  private _applyMultiValueStyleToElement(styles: StyleDefinition,\n                                         element: HTMLElement) {\n    Object.keys(styles).sort().forEach(key => {\n      const el = styles[key];\n      const values: (string | number | null)[] = Array.isArray(el) ? el : [el];\n      values.sort();\n      for (let value of values) {\n        value = value ? value + '' : '';\n        if (isPlatformBrowser(this._platformId) || !this._serverModuleLoaded) {\n          isPlatformBrowser(this._platformId) ?\n            element.style.setProperty(key, value) : setServerStyle(element, key, value);\n        } else {\n          this._serverStylesheet.addStyleToElement(element, key, value);\n        }\n      }\n    });\n  }\n}\n\nfunction getServerStyle(element: any, styleName: string): string {\n  const styleMap = readStyleAttribute(element);\n  return styleMap[styleName] ?? '';\n}\n\nfunction setServerStyle(element: any, styleName: string, styleValue?: string|null) {\n  styleName = styleName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n  const styleMap = readStyleAttribute(element);\n  styleMap[styleName] = styleValue ?? '';\n  writeStyleAttribute(element, styleMap);\n}\n\nfunction writeStyleAttribute(element: any, styleMap: {[name: string]: string}) {\n  let styleAttrValue = '';\n  for (const key in styleMap) {\n    const newValue = styleMap[key];\n    if (newValue) {\n      styleAttrValue += `${key}:${styleMap[key]};`;\n    }\n  }\n  element.setAttribute('style', styleAttrValue);\n}\n\nfunction readStyleAttribute(element: any): {[name: string]: string} {\n  const styleMap: {[name: string]: string} = {};\n  const styleAttribute = element.getAttribute('style');\n  if (styleAttribute) {\n    const styleList = styleAttribute.split(/;+/g);\n    for (let i = 0; i < styleList.length; i++) {\n      const style = styleList[i].trim();\n      if (style.length > 0) {\n        const colonIndex = style.indexOf(':');\n        if (colonIndex === -1) {\n          throw new Error(`Invalid CSS style: ${style}`);\n        }\n        const name = style.substr(0, colonIndex).trim();\n        styleMap[name] = style.substr(colonIndex + 1).trim();\n      }\n    }\n  }\n  return styleMap;\n}\n\n/**\n * Definition of a css style. Either a property name (e.g. \"flex-basis\") or an object\n * map of property name and value (e.g. {display: 'none', flex-order: 5})\n */\nexport type StyleDefinition = { [property: string]: string | number | null };\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\ninterface WithPriority {\n  priority?: number;\n}\n\n/** HOF to sort the breakpoints by descending priority */\nexport function sortDescendingPriority<T extends WithPriority>(a: T | null, b: T | null): number {\n  const priorityA = a ? a.priority || 0 : 0;\n  const priorityB = b ? b.priority || 0 : 0;\n  return priorityB - priorityA;\n}\n\n/** HOF to sort the breakpoints by ascending priority */\nexport function sortAscendingPriority<T extends WithPriority>(a: T, b: T): number {\n  const pA = a.priority || 0;\n  const pB = b.priority || 0;\n  return pA - pB;\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 */\nimport {Inject, Injectable, NgZone, OnDestroy, PLATFORM_ID} from '@angular/core';\nimport {DOCUMENT, isPlatformBrowser} from '@angular/common';\nimport {BehaviorSubject, Observable, merge, Observer} from 'rxjs';\nimport {filter} from 'rxjs/operators';\n\nimport {MediaChange} from '../media-change';\n\n/**\n * MediaMonitor configures listeners to mediaQuery changes and publishes an Observable facade to\n * convert mediaQuery change callbacks to subscriber notifications. These notifications will be\n * performed within the ng Zone to trigger change detections and component updates.\n *\n * NOTE: both mediaQuery activations and de-activations are announced in notifications\n */\n@Injectable({providedIn: 'root'})\nexport class MatchMedia implements OnDestroy {\n  /** Initialize source with 'all' so all non-responsive APIs trigger style updates */\n  readonly source = new BehaviorSubject<MediaChange>(new MediaChange(true));\n  registry = new Map<string, MediaQueryList>();\n  private readonly pendingRemoveListenerFns: Array<() => void> = [];\n\n  constructor(protected _zone: NgZone,\n              @Inject(PLATFORM_ID) protected _platformId: Object,\n              @Inject(DOCUMENT) protected _document: any) {\n  }\n\n  /**\n   * Publish list of all current activations\n   */\n  get activations(): string[] {\n    const results: string[] = [];\n    this.registry.forEach((mql: MediaQueryList, key: string) => {\n      if (mql.matches) {\n        results.push(key);\n      }\n    });\n    return results;\n  }\n\n  /**\n   * For the specified mediaQuery?\n   */\n  isActive(mediaQuery: string): boolean {\n    const mql = this.registry.get(mediaQuery);\n    return mql?.matches ?? this.registerQuery(mediaQuery).some(m => m.matches);\n  }\n\n  /**\n   * External observers can watch for all (or a specific) mql changes.\n   *\n   * If a mediaQuery is not specified, then ALL mediaQuery activations will\n   * be announced.\n   */\n  observe(): Observable<MediaChange>;\n  observe(mediaQueries: string[]): Observable<MediaChange>;\n  observe(mediaQueries: string[], filterOthers: boolean): Observable<MediaChange>;\n\n  /**\n   * External observers can watch for all (or a specific) mql changes.\n   * Typically used by the MediaQueryAdaptor; optionally available to components\n   * who wish to use the MediaMonitor as mediaMonitor$ observable service.\n   *\n   * Use deferred registration process to register breakpoints only on subscription\n   * This logic also enforces logic to register all mediaQueries BEFORE notify\n   * subscribers of notifications.\n   */\n  observe(mqList?: string[], filterOthers = false): Observable<MediaChange> {\n    if (mqList && mqList.length) {\n      const matchMedia$: Observable<MediaChange> = this._observable$.pipe(\n          filter((change: MediaChange) =>\n            !filterOthers ? true : (mqList.indexOf(change.mediaQuery) > -1))\n      );\n      const registration$: Observable<MediaChange> = new Observable((observer: Observer<MediaChange>) => {  // tslint:disable-line:max-line-length\n        const matches: Array<MediaChange> = this.registerQuery(mqList);\n        if (matches.length) {\n          const lastChange = matches.pop()!;\n          matches.forEach((e: MediaChange) => {\n            observer.next(e);\n          });\n          this.source.next(lastChange); // last match is cached\n        }\n        observer.complete();\n      });\n      return merge(registration$, matchMedia$);\n    }\n\n    return this._observable$;\n  }\n\n  /**\n   * Based on the BreakPointRegistry provider, register internal listeners for each unique\n   * mediaQuery. Each listener emits specific MediaChange data to observers\n   */\n  registerQuery(mediaQuery: string | string[]) {\n    const list = Array.isArray(mediaQuery) ? mediaQuery : [mediaQuery];\n    const matches: MediaChange[] = [];\n\n    buildQueryCss(list, this._document);\n\n    list.forEach((query: string) => {\n      const onMQLEvent = (e: MediaQueryListEvent) => {\n        this._zone.run(() => this.source.next(new MediaChange(e.matches, query)));\n      };\n\n      let mql = this.registry.get(query);\n      if (!mql) {\n        mql = this.buildMQL(query);\n        mql.addListener(onMQLEvent);\n        this.pendingRemoveListenerFns.push(() => mql!.removeListener(onMQLEvent));\n        this.registry.set(query, mql);\n      }\n\n      if (mql.matches) {\n        matches.push(new MediaChange(true, query));\n      }\n    });\n\n    return matches;\n  }\n\n  ngOnDestroy(): void {\n    let fn;\n    while (fn = this.pendingRemoveListenerFns.pop()) {\n      fn();\n    }\n  }\n\n  /**\n   * Call window.matchMedia() to build a MediaQueryList; which\n   * supports 0..n listeners for activation/deactivation\n   */\n  protected buildMQL(query: string): MediaQueryList {\n    return constructMql(query, isPlatformBrowser(this._platformId));\n  }\n\n  protected _observable$ = this.source.asObservable();\n}\n\n/**\n * Private global registry for all dynamically-created, injected style tags\n * @see prepare(query)\n */\nconst ALL_STYLES: { [key: string]: any } = {};\n\n/**\n * For Webkit engines that only trigger the MediaQueryList Listener\n * when there is at least one CSS selector for the respective media query.\n *\n * @param mediaQueries\n * @param _document\n */\nfunction buildQueryCss(mediaQueries: string[], _document: Document) {\n  const list = mediaQueries.filter(it => !ALL_STYLES[it]);\n  if (list.length > 0) {\n    const query = list.join(', ');\n\n    try {\n      const styleEl = _document.createElement('style');\n\n      styleEl.setAttribute('type', 'text/css');\n      if (!(styleEl as any).styleSheet) {\n        const cssText = `\n/*\n  @angular/flex-layout - workaround for possible browser quirk with mediaQuery listeners\n  see http://bit.ly/2sd4HMP\n*/\n@media ${query} {.fx-query-test{ }}\n`;\n        styleEl.appendChild(_document.createTextNode(cssText));\n      }\n\n      _document.head!.appendChild(styleEl);\n\n      // Store in private global registry\n      list.forEach(mq => ALL_STYLES[mq] = styleEl);\n\n    } catch (e) {\n      console.error(e);\n    }\n  }\n}\n\nfunction buildMockMql(query: string) {\n  const et: any = new EventTarget();\n  et.matches = query === 'all' || query === '';\n  et.media = query;\n  et.addListener = () => {};\n  et.removeListener = () => {};\n  et.addEventListener = () => {};\n  et.dispatchEvent = () => false;\n  et.onchange = null;\n\n  return et as MediaQueryList;\n}\n\nfunction constructMql(query: string, isBrowser: boolean): MediaQueryList {\n  const canListen = isBrowser && !!(<Window>window).matchMedia('all').addListener;\n\n  return canListen ? (<Window>window).matchMedia(query) : buildMockMql(query);\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 */\nimport {BreakPoint} from '../break-point';\n\n/**\n * NOTE: Smaller ranges have HIGHER priority since the match is more specific\n */\nexport const DEFAULT_BREAKPOINTS: BreakPoint[] = [\n  {\n    alias: 'xs',\n    mediaQuery: 'screen and (min-width: 0px) and (max-width: 599.98px)',\n    priority: 1000,\n  },\n  {\n    alias: 'sm',\n    mediaQuery: 'screen and (min-width: 600px) and (max-width: 959.98px)',\n    priority: 900,\n  },\n  {\n    alias: 'md',\n    mediaQuery: 'screen and (min-width: 960px) and (max-width: 1279.98px)',\n    priority: 800,\n  },\n  {\n    alias: 'lg',\n    mediaQuery: 'screen and (min-width: 1280px) and (max-width: 1919.98px)',\n    priority: 700,\n  },\n  {\n    alias: 'xl',\n    mediaQuery: 'screen and (min-width: 1920px) and (max-width: 4999.98px)',\n    priority: 600,\n  },\n  {\n    alias: 'lt-sm',\n    overlapping: true,\n    mediaQuery: 'screen and (max-width: 599.98px)',\n    priority: 950,\n  },\n  {\n    alias: 'lt-md',\n    overlapping: true,\n    mediaQuery: 'screen and (max-width: 959.98px)',\n    priority: 850,\n  },\n  {\n    alias: 'lt-lg',\n    overlapping: true,\n    mediaQuery: 'screen and (max-width: 1279.98px)',\n    priority: 750,\n  },\n  {\n    alias: 'lt-xl',\n    overlapping: true,\n    priority: 650,\n    mediaQuery: 'screen and (max-width: 1919.98px)',\n  },\n  {\n    alias: 'gt-xs',\n    overlapping: true,\n    mediaQuery: 'screen and (min-width: 600px)',\n    priority: -950,\n  },\n  {\n    alias: 'gt-sm',\n    overlapping: true,\n    mediaQuery: 'screen and (min-width: 960px)',\n    priority: -850,\n  }, {\n    alias: 'gt-md',\n    overlapping: true,\n    mediaQuery: 'screen and (min-width: 1280px)',\n    priority: -750,\n  },\n  {\n    alias: 'gt-lg',\n    overlapping: true,\n    mediaQuery: 'screen and (min-width: 1920px)',\n    priority: -650,\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 {BreakPoint} from '../break-point';\n\n/* tslint:disable */\nconst HANDSET_PORTRAIT  = '(orientation: portrait) and (max-width: 599.98px)';\nconst HANDSET_LANDSCAPE = '(orientation: landscape) and (max-width: 959.98px)';\n\nconst TABLET_PORTRAIT   = '(orientation: portrait) and (min-width: 600px) and (max-width: 839.98px)';\nconst TABLET_LANDSCAPE  = '(orientation: landscape) and (min-width: 960px) and (max-width: 1279.98px)';\n\nconst WEB_PORTRAIT      = '(orientation: portrait) and (min-width: 840px)';\nconst WEB_LANDSCAPE     = '(orientation: landscape) and (min-width: 1280px)';\n\nexport const ScreenTypes = {\n  'HANDSET'           : `${HANDSET_PORTRAIT}, ${HANDSET_LANDSCAPE}`,\n  'TABLET'            : `${TABLET_PORTRAIT} , ${TABLET_LANDSCAPE}`,\n  'WEB'               : `${WEB_PORTRAIT}, ${WEB_LANDSCAPE} `,\n\n  'HANDSET_PORTRAIT'  : `${HANDSET_PORTRAIT}`,\n  'TABLET_PORTRAIT'   : `${TABLET_PORTRAIT} `,\n  'WEB_PORTRAIT'      : `${WEB_PORTRAIT}`,\n\n  'HANDSET_LANDSCAPE' : `${HANDSET_LANDSCAPE}`,\n  'TABLET_LANDSCAPE'  : `${TABLET_LANDSCAPE}`,\n  'WEB_LANDSCAPE'     : `${WEB_LANDSCAPE}`\n};\n\n/**\n * Extended Breakpoints for handset/tablets with landscape or portrait orientations\n */\nexport const ORIENTATION_BREAKPOINTS : BreakPoint[] = [\n  {'alias': 'handset',            priority: 2000, 'mediaQuery': ScreenTypes.HANDSET},\n  {'alias': 'handset.landscape',  priority: 2000, 'mediaQuery': ScreenTypes.HANDSET_LANDSCAPE},\n  {'alias': 'handset.portrait',   priority: 2000, 'mediaQuery': ScreenTypes.HANDSET_PORTRAIT},\n\n  {'alias': 'tablet',             priority: 2100, 'mediaQuery': ScreenTypes.TABLET},\n  {'alias': 'tablet.landscape',   priority: 2100, 'mediaQuery': ScreenTypes.TABLET_LANDSCAPE},\n  {'alias': 'tablet.portrait',    priority: 2100, 'mediaQuery': ScreenTypes.TABLET_PORTRAIT},\n\n  {'alias': 'web',                priority: 2200, 'mediaQuery': ScreenTypes.WEB, overlapping : true },\n  {'alias': 'web.landscape',      priority: 2200, 'mediaQuery': ScreenTypes.WEB_LANDSCAPE, overlapping : true },\n  {'alias': 'web.portrait',       priority: 2200, 'mediaQuery': ScreenTypes.WEB_PORTRAIT, overlapping : true }\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 */\nimport {BreakPoint} from './break-point';\nimport {extendObject} from '@angular/flex-layout/_private-utils';\n\nconst ALIAS_DELIMITERS = /(\\.|-|_)/g;\nfunction firstUpperCase(part: string) {\n  let first = part.length > 0 ? part.charAt(0) : '';\n  let remainder = (part.length > 1) ? part.slice(1) : '';\n  return first.toUpperCase() + remainder;\n}\n\n/**\n * Converts snake-case to SnakeCase.\n * @param name Text to UpperCamelCase\n */\nfunction camelCase(name: string): string {\n  return name\n      .replace(ALIAS_DELIMITERS, '|')\n      .split('|')\n      .map(firstUpperCase)\n      .join('');\n}\n\n/**\n * For each breakpoint, ensure that a Suffix is defined;\n * fallback to UpperCamelCase the unique Alias value\n */\nexport function validateSuffixes(list: BreakPoint[]): BreakPoint[] {\n  list.forEach((bp: BreakPoint) => {\n    if (!bp.suffix) {\n      bp.suffix = camelCase(bp.alias);   // create Suffix value based on alias\n      bp.overlapping = !!bp.overlapping; // ensure default value\n    }\n  });\n  return list;\n}\n\n/**\n * Merge a custom breakpoint list with the default list based on unique alias values\n *  - Items are added if the alias is not in the default list\n *  - Items are merged with the custom override if the alias exists in the default list\n */\nexport function mergeByAlias(defaults: BreakPoint[], custom: BreakPoint[] = []): BreakPoint[] {\n  const dict: {[key: string]: BreakPoint} = {};\n  defaults.forEach(bp => {\n    dict[bp.alias] = bp;\n  });\n  // Merge custom breakpoints\n  custom.forEach((bp: BreakPoint) => {\n    if (dict[bp.alias]) {\n      extendObject(dict[bp.alias], bp);\n    } else {\n      dict[bp.alias] = bp;\n    }\n  });\n\n  return validateSuffixes(Object.keys(dict).map(k => dict[k]));\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 {inject, InjectionToken} from '@angular/core';\nimport {BreakPoint} from './break-point';\nimport {BREAKPOINT} from '../tokens/breakpoint-token';\nimport {DEFAULT_BREAKPOINTS} from '../breakpoints/data/break-points';\nimport {ORIENTATION_BREAKPOINTS} from '../breakpoints/data/orientation-break-points';\nimport {mergeByAlias} from '../breakpoints/breakpoint-tools';\nimport {LAYOUT_CONFIG} from '../tokens/library-config';\n\n/**\n *  Injection token unique to the flex-layout library.\n *  Use this token when build a custom provider (see below).\n */\nexport const BREAKPOINTS =\n  new InjectionToken<BreakPoint[]>('Token (@angular/flex-layout) Breakpoints', {\n    providedIn: 'root',\n    factory: () => {\n      const breakpoints: any = inject(BREAKPOINT);\n      const layoutConfig = inject(LAYOUT_CONFIG);\n      const bpFlattenArray: BreakPoint[] = [].concat.apply([], (breakpoints || [])\n        .map((v: BreakPoint | BreakPoint[]) => Array.isArray(v) ? v : [v]));\n      const builtIns = (layoutConfig.disableDefaultBps ? [] : DEFAULT_BREAKPOINTS)\n        .concat(layoutConfig.addOrientationBps ? ORIENTATION_BREAKPOINTS : []);\n\n      return mergeByAlias(builtIns, bpFlattenArray);\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 */\nimport {Injectable, Inject} from '@angular/core';\n\nimport {BreakPoint} from './break-point';\nimport {BREAKPOINTS} from './break-points-token';\nimport {sortAscendingPriority} from '../utils/sort';\n\nexport type OptionalBreakPoint = BreakPoint | null;\n\n/**\n * Registry of 1..n MediaQuery breakpoint ranges\n * This is published as a provider and may be overridden from custom, application-specific ranges\n *\n */\n@Injectable({providedIn: 'root'})\nexport class BreakPointRegistry {\n  readonly items: BreakPoint[];\n\n  constructor(@Inject(BREAKPOINTS) list: BreakPoint[]) {\n    this.items = [...list].sort(sortAscendingPriority);\n  }\n\n  /**\n   * Search breakpoints by alias (e.g. gt-xs)\n   */\n  findByAlias(alias: string): OptionalBreakPoint {\n    return !alias ? null : this.findWithPredicate(alias, (bp) => bp.alias === alias);\n  }\n\n  findByQuery(query: string): OptionalBreakPoint {\n    return this.findWithPredicate(query, (bp) => bp.mediaQuery === query);\n  }\n\n  /**\n   * Get all the breakpoints whose ranges could overlapping `normal` ranges;\n   * e.g. gt-sm overlaps md, lg, and xl\n   */\n  get overlappings(): BreakPoint[] {\n    return this.items.filter(it => it.overlapping);\n  }\n\n  /**\n   * Get list of all registered (non-empty) breakpoint aliases\n   */\n  get aliases(): string[] {\n    return this.items.map(it => it.alias);\n  }\n\n  /**\n   * Aliases are mapped to properties using suffixes\n   * e.g.  'gt-sm' for property 'layout'  uses suffix 'GtSm'\n   * for property layoutGtSM.\n   */\n  get suffixes(): string[] {\n    return this.items.map(it => it?.suffix ?? '');\n  }\n\n  /**\n   * Memoized lookup using custom predicate function\n   */\n  private findWithPredicate(key: string,\n      searchFn: (bp: BreakPoint) => boolean): OptionalBreakPoint {\n    let response = this.findByMap.get(key);\n    if (!response) {\n      response = this.items.find(searchFn) ?? null;\n      this.findByMap.set(key, response);\n    }\n    return response ?? null;\n\n  }\n\n  /**\n   * Memoized BreakPoint Lookups\n   */\n  private readonly findByMap = new Map<String, OptionalBreakPoint>();\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 */\nimport {Inject, Injectable, OnDestroy} from '@angular/core';\n\nimport {mergeAlias} from '../add-alias';\nimport {MediaChange} from '../media-change';\nimport {BreakPoint} from '../breakpoints/break-point';\nimport {LAYOUT_CONFIG, LayoutConfigOptions} from '../tokens/library-config';\nimport {BreakPointRegistry, OptionalBreakPoint} from '../breakpoints/break-point-registry';\nimport {sortDescendingPriority} from '../utils/sort';\nimport {DOCUMENT} from '@angular/common';\n\n/**\n * Interface to apply PrintHook to call anonymous `target.updateStyles()`\n */\nexport interface HookTarget {\n  activatedBreakpoints: BreakPoint[];\n  updateStyles(): void;\n}\n\nconst PRINT = 'print';\nexport const BREAKPOINT_PRINT = {\n  alias: PRINT,\n  mediaQuery: PRINT,\n  priority: 1000\n};\n\n/**\n * PrintHook - Use to intercept print MediaQuery activations and force\n *             layouts to render with the specified print alias/breakpoint\n *\n * Used in MediaMarshaller and MediaObserver\n */\n@Injectable({providedIn: 'root'})\nexport class PrintHook implements OnDestroy {\n  constructor(\n      protected breakpoints: BreakPointRegistry,\n      @Inject(LAYOUT_CONFIG) protected layoutConfig: LayoutConfigOptions,\n      @Inject(DOCUMENT) protected _document: any) {\n  }\n\n  /** Add 'print' mediaQuery: to listen for matchMedia activations */\n  withPrintQuery(queries: string[]): string[] {\n    return [...queries, PRINT];\n  }\n\n  /** Is the MediaChange event for any 'print' @media */\n  isPrintEvent(e: MediaChange): boolean {\n    return e.mediaQuery.startsWith(PRINT);\n  }\n\n  /** What is the desired mqAlias to use while printing? */\n  get printAlias(): string[] {\n    return [...(this.layoutConfig.printWithBreakpoints ?? [])];\n  }\n\n  /** Lookup breakpoints associated with print aliases. */\n  get printBreakPoints(): BreakPoint[] {\n    return this.printAlias\n        .map(alias => this.breakpoints.findByAlias(alias))\n        .filter(bp => bp !== null) as BreakPoint[];\n  }\n\n  /** Lookup breakpoint associated with mediaQuery */\n  getEventBreakpoints({mediaQuery}: MediaChange): BreakPoint[] {\n    const bp = this.breakpoints.findByQuery(mediaQuery);\n    const list = bp ? [...this.printBreakPoints, bp] : this.printBreakPoints;\n\n    return list.sort(sortDescendingPriority);\n  }\n\n  /** Update event with printAlias mediaQuery information */\n  updateEvent(event: MediaChange): MediaChange {\n    let bp: OptionalBreakPoint = this.breakpoints.findByQuery(event.mediaQuery);\n\n    if (this.isPrintEvent(event)) {\n      // Reset from 'print' to first (highest priority) print breakpoint\n      bp = this.getEventBreakpoints(event)[0];\n      event.mediaQuery = bp?.mediaQuery ?? '';\n    }\n\n    return mergeAlias(event, bp);\n  }\n\n\n  // registeredBeforeAfterPrintHooks tracks if we registered the `beforeprint`\n  //  and `afterprint` event listeners.\n  private registeredBeforeAfterPrintHooks = false;\n\n  // isPrintingBeforeAfterEvent is used to track if we are printing from within\n  // a `beforeprint` event handler. This prevents the typical `stopPrinting`\n  // form `interceptEvents` so that printing is not stopped while the dialog\n  // is still open. This is an extension of the `isPrinting` property on\n  // browsers which support `beforeprint` and `afterprint` events.\n  private isPrintingBeforeAfterEvent = false;\n\n  private beforePrintEventListeners: Function[] = [];\n  private afterPrintEventListeners: Function[] = [];\n\n  private formerActivations: Array<BreakPoint> | null = null;\n\n  // registerBeforeAfterPrintHooks registers a `beforeprint` event hook so we can\n  // trigger print styles synchronously and apply proper layout styles.\n  // It is a noop if the hooks have already been registered or if the document's\n  // `defaultView` is not available.\n  registerBeforeAfterPrintHooks(target: HookTarget) {\n    // `defaultView` may be null when rendering on the server or in other contexts.\n    if (!this._document.defaultView || this.registeredBeforeAfterPrintHooks) {\n      return;\n    }\n\n    this.registeredBeforeAfterPrintHooks = true;\n\n    const beforePrintListener = () => {\n      // If we aren't already printing, start printing and update the styles as\n      // if there was a regular print `MediaChange`(from matchMedia).\n      if (!this.isPrinting) {\n        this.isPrintingBeforeAfterEvent = true;\n        this.startPrinting(target, this.getEventBreakpoints(new MediaChange(true, PRINT)));\n        target.updateStyles();\n      }\n    };\n\n    const afterPrintListener = () => {\n      // If we aren't already printing, start printing and update the styles as\n      // if there was a regular print `MediaChange`(from matchMedia).\n      this.isPrintingBeforeAfterEvent = false;\n      if (this.isPrinting) {\n        this.stopPrinting(target);\n        target.updateStyles();\n      }\n    };\n\n    // Could we have teardown logic to remove if there are no print listeners being used?\n    this._document.defaultView.addEventListener('beforeprint', beforePrintListener);\n    this._document.defaultView.addEventListener('afterprint', afterPrintListener);\n\n    this.beforePrintEventListeners.push(beforePrintListener);\n    this.afterPrintEventListeners.push(afterPrintListener);\n  }\n\n  /**\n   * Prepare RxJS tap operator with partial application\n   * @return pipeable tap predicate\n   */\n  interceptEvents(target: HookTarget) {\n    return (event: MediaChange) => {\n      if (this.isPrintEvent(event)) {\n        if (event.matches && !this.isPrinting) {\n          this.startPrinting(target, this.getEventBreakpoints(event));\n          target.updateStyles();\n        } else if (!event.matches && this.isPrinting && !this.isPrintingBeforeAfterEvent) {\n          this.stopPrinting(target);\n          target.updateStyles();\n        }\n\n        return;\n      }\n\n      this.collectActivations(target, event);\n    };\n  }\n\n  /** Stop mediaChange event propagation in event streams */\n  blockPropagation() {\n    return (event: MediaChange): boolean => {\n      return !(this.isPrinting || this.isPrintEvent(event));\n    };\n  }\n\n  /**\n   * Save current activateBreakpoints (for later restore)\n   * and substitute only the printAlias breakpoint\n   */\n  protected startPrinting(target: HookTarget, bpList: OptionalBreakPoint[]) {\n    this.isPrinting = true;\n    this.formerActivations = target.activatedBreakpoints;\n    target.activatedBreakpoints = this.queue.addPrintBreakpoints(bpList);\n  }\n\n  /** For any print de-activations, reset the entire print queue */\n  protected stopPrinting(target: HookTarget) {\n    target.activatedBreakpoints = this.deactivations;\n    this.deactivations = [];\n    this.formerActivations = null;\n    this.queue.clear();\n    this.isPrinting = false;\n  }\n\n  /**\n   * To restore pre-Print Activations, we must capture the proper\n   * list of breakpoint activations BEFORE print starts. OnBeforePrint()\n   * is supported; so 'print' mediaQuery activations are used as a fallback\n   * in browsers without `beforeprint` support.\n   *\n   * >  But activated breakpoints are deactivated BEFORE 'print' activation.\n   *\n   * Let's capture all de-activations using the following logic:\n   *\n   *  When not printing:\n   *    - clear cache when activating non-print breakpoint\n   *    - update cache (and sort) when deactivating\n   *\n   *  When printing:\n   *    - sort and save when starting print\n   *    - restore as activatedTargets and clear when stop printing\n   */\n  collectActivations(target: HookTarget, event: MediaChange) {\n    if (!this.isPrinting || this.isPrintingBeforeAfterEvent) {\n      if (!this.isPrintingBeforeAfterEvent) {\n        // Only clear deactivations if we aren't printing from a `beforeprint` event.\n        // Otherwise, this will clear before `stopPrinting()` is called to restore\n        // the pre-Print Activations.\n        this.deactivations = [];\n\n        return;\n      }\n\n      if (!event.matches) {\n        const bp = this.breakpoints.findByQuery(event.mediaQuery);\n        // Deactivating a breakpoint\n        if (bp) {\n          const hasFormerBp = this.formerActivations && this.formerActivations.includes(bp);\n          const wasActivated = !this.formerActivations && target.activatedBreakpoints.includes(bp);\n          const shouldDeactivate = hasFormerBp || wasActivated;\n          if (shouldDeactivate) {\n            this.deactivations.push(bp);\n            this.deactivations.sort(sortDescendingPriority);\n          }\n        }\n      }\n    }\n  }\n\n  /** Teardown logic for the service. */\n  ngOnDestroy() {\n    if (this._document.defaultView) {\n      this.beforePrintEventListeners.forEach(l => this._document.defaultView.removeEventListener('beforeprint', l));\n      this.afterPrintEventListeners.forEach(l => this._document.defaultView.removeEventListener('afterprint', l));\n    }\n  }\n\n  // Is this service currently in print mode\n  private isPrinting = false;\n  private queue = new PrintQueue();\n  private deactivations: BreakPoint[] = [];\n}\n\n// ************************************************************************\n// Internal Utility class 'PrintQueue'\n// ************************************************************************\n\n/**\n * Utility class to manage print breakpoints + activatedBreakpoints\n * with correct sorting WHILE printing\n */\nclass PrintQueue {\n  /** Sorted queue with prioritized print breakpoints */\n  printBreakpoints: BreakPoint[] = [];\n\n  addPrintBreakpoints(bpList: OptionalBreakPoint[]): BreakPoint[] {\n    bpList.push(BREAKPOINT_PRINT);\n    bpList.sort(sortDescendingPriority);\n    bpList.forEach(bp => this.addBreakpoint(bp));\n\n    return this.printBreakpoints;\n  }\n\n  /** Add Print breakpoint to queue */\n  addBreakpoint(bp: OptionalBreakPoint) {\n    if (!!bp) {\n      const bpInList = this.printBreakpoints.find(it => it.mediaQuery === bp.mediaQuery);\n\n      if (bpInList === undefined) {\n        // If this is a `printAlias` breakpoint, then append. If a true 'print' breakpoint,\n        // register as highest priority in the queue\n        this.printBreakpoints = isPrintBreakPoint(bp) ? [bp, ...this.printBreakpoints]\n            : [...this.printBreakpoints, bp];\n      }\n    }\n  }\n\n  /** Restore original activated breakpoints and clear internal caches */\n  clear() {\n    this.printBreakpoints = [];\n  }\n}\n\n// ************************************************************************\n// Internal Utility methods\n// ************************************************************************\n\n/** Only support intercept queueing if the Breakpoint is a print @media query */\nfunction isPrintBreakPoint(bp: OptionalBreakPoint): boolean {\n  return bp?.mediaQuery.startsWith(PRINT) ?? false;\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 */\nimport {Injectable} from '@angular/core';\n\nimport {merge, Observable, Subject, Subscription} from 'rxjs';\nimport {filter, tap} from 'rxjs/operators';\n\nimport {BreakPoint} from '../breakpoints/break-point';\nimport {sortDescendingPriority} from '../utils/sort';\nimport {BreakPointRegistry} from '../breakpoints/break-point-registry';\nimport {MatchMedia} from '../match-media/match-media';\nimport {MediaChange} from '../media-change';\n\nimport {PrintHook, HookTarget} from './print-hook';\nimport {mergeAlias} from '../add-alias';\n\ntype ClearCallback = () => void;\ntype UpdateCallback = (val: any) => void;\ntype Builder = UpdateCallback | ClearCallback;\n\ntype ValueMap = Map<string, string>;\ntype BreakpointMap = Map<string, ValueMap>;\ntype ElementMap = Map<HTMLElement, BreakpointMap>;\ntype ElementKeyMap = WeakMap<HTMLElement, Set<string>>;\ntype SubscriptionMap = Map<string, Subscription>;\ntype WatcherMap = WeakMap<HTMLElement, SubscriptionMap>;\ntype BuilderMap = WeakMap<HTMLElement, Map<string, Builder>>;\n\nexport interface ElementMatcher {\n  element: HTMLElement;\n  key: string;\n  value: any;\n}\n\n/**\n * MediaMarshaller - register responsive values from directives and\n *                   trigger them based on media query events\n */\n@Injectable({providedIn: 'root'})\nexport class MediaMarshaller {\n  private _useFallbacks = true;\n  private _activatedBreakpoints: BreakPoint[] = [];\n  private elementMap: ElementMap = new Map();\n  private elementKeyMap: ElementKeyMap = new WeakMap();\n  private watcherMap: WatcherMap = new WeakMap();     // special triggers to update elements\n  private updateMap: