text: /**
   * @license
   * Copyright Google LLC All Rights Reserved.
   *
   * Use of this source code is governed by an MIT-style license that can be
   * found in the LICENSE file at https://angular.io/license
   */
  import { Directive, ElementRef, Inject, Injectable, InjectionToken, Input, IterableDiffers, KeyValueDiffers, NgModule, NgZone, Optional, Renderer2, SecurityContext, Self, SimpleChange, SkipSelf, Version } from '@angular/core';
  import { DomSanitizer, ɵgetDOM } from '@angular/platform-browser';
  import { filter, map } from 'rxjs/operators';
  import { __extends } from 'tslib';
  import * as tslib_1 from 'tslib';
  import { DOCUMENT, NgClass, NgStyle } from '@angular/common';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  import { ReplaySubject } from 'rxjs/ReplaySubject';
  
  /**
   * Current version of Angular Flex-Layout.
   */
  var VERSION = new Version('2.0.0-beta.10-4905443');
  
  var LAYOUT_VALUES = ['row', 'column', 'row-reverse', 'column-reverse'];
  /**
   * Validate the direction|'direction wrap' value and then update the host's inline flexbox styles
   * @param {?} value
   * @return {?}
   */
  function buildLayoutCSS(value) {
      var _a = validateValue(value), direction = _a[0], wrap = _a[1];
      return buildCSS(direction, wrap);
  }
  /**
   * Validate the value to be one of the acceptable value options
   * Use default fallback of 'row'
   * @param {?} value
   * @return {?}
   */
  function validateValue(value) {
      value = value ? value.toLowerCase() : '';
      var _a = value.split(' '), direction = _a[0], wrap = _a[1];
      if (!LAYOUT_VALUES.find(function (x) { return x === direction; })) {
          direction = LAYOUT_VALUES[0];
      }
      return [direction, validateWrapValue(wrap)];
  }
  /**
   * Determine if the validated, flex-direction value specifies
   * a horizontal/row flow.
   * @param {?} value
   * @return {?}
   */
  function isFlowHorizontal(value) {
      var _a = validateValue(value), flow = _a[0], _ = _a[1];
      return flow.indexOf('row') > -1;
  }
  /**
   * Convert layout-wrap='<value>' to expected flex-wrap style
   * @param {?} value
   * @return {?}
   */
  function validateWrapValue(value) {
      if (!!value) {
          switch (value.toLowerCase()) {
              case 'reverse':
              case 'wrap-reverse':
              case 'reverse-wrap':
                  value = 'wrap-reverse';
                  break;
              case 'no':
              case 'none':
              case 'nowrap':
                  value = 'nowrap';
                  break;
              // All other values fallback to 'wrap'
              default:
                  value = 'wrap';
                  break;
          }
      }
      return value;
  }
  /**
   * Build the CSS that should be assigned to the element instance
   * BUG:
   *   1) min-height on a column flex container won’t apply to its flex item children in IE 10-11.
   *      Use height instead if possible; height : <xxx>vh;
   *
   *  This way any padding or border specified on the child elements are
   *  laid out and drawn inside that element's specified width and height.
   * @param {?} direction
   * @param {?=} wrap
   * @return {?}
   */
  function buildCSS(direction, wrap) {
      if (wrap === void 0) { wrap = null; }
      return {
          'display': 'flex',
          'box-sizing': 'border-box',
          'flex-direction': direction,
          'flex-wrap': !!wrap ? wrap : null
      };
  }
  
  /**
   * Applies CSS prefixes to appropriate style keys.
   *
   * Note: `-ms-`, `-moz` and `-webkit-box` are no longer supported. e.g.
   *    {
   *      display: -webkit-flex;     NEW - Safari 6.1+. iOS 7.1+, BB10
   *      display: flex;             NEW, Spec - Firefox, Chrome, Opera
   *      // display: -webkit-box;   OLD - iOS 6-, Safari 3.1-6, BB7
   *      // display: -ms-flexbox;   TWEENER - IE 10
   *      // display: -moz-flexbox;  OLD - Firefox
   *    }
   * @param {?} target
   * @return {?}
   */
  function applyCssPrefixes(target) {
      for (var /** @type {?} */ key in target) {
          var /** @type {?} */ value = target[key] || '';
          switch (key) {
              case 'display':
                  if (value === 'flex') {
                      target['display'] = [
                          '-webkit-flex',
                          'flex'
                      ];
                  }
                  else if (value === 'inline-flex') {
                      target['display'] = [
                          '-webkit-inline-flex',
                          'inline-flex'
                      ];
                  }
                  else {
                      target['display'] = value;
                  }
                  break;
              case 'align-items':
              case 'align-self':
              case 'align-content':
              case 'flex':
              case 'flex-basis':
              case 'flex-flow':
              case 'flex-grow':
              case 'flex-shrink':
              case 'flex-wrap':
              case 'justify-content':
                  target['-webkit-' + key] = value;
                  break;
              case 'flex-direction':
                  value = value || 'row';
                  target['-webkit-flex-direction'] = value;
                  target['flex-direction'] = value;
                  break;
              case 'order':
                  target['order'] = target['-webkit-' + key] = isNaN(value) ? '0' : value;
                  break;
          }
      }
      return target;
  }
  
  /**
   * Applies styles given via string pair or object map to the directive element.
   * @param {?} renderer
   * @param {?} element
   * @param {?} style
   * @param {?=} value
   * @return {?}
   */
  function applyStyleToElement(renderer, element, style, value) {
      var /** @type {?} */ styles = {};
      if (typeof style === 'string') {
          styles[style] = value;
          style = styles;
      }
      styles = applyCssPrefixes(style);
      applyMultiValueStyleToElement(styles, element, renderer);
  }
  /**
   * Applies styles given via string pair or object map to the directive's element.
   * @param {?} renderer
   * @param {?} style
   * @param {?} elements
   * @return {?}
   */
  function applyStyleToElements(renderer, style, elements) {
      var /** @type {?} */ styles = applyCssPrefixes(style);
      elements.forEach(function (el) {
          applyMultiValueStyleToElement(styles, el, renderer);
      });
  }
  /**
   * Applies the styles to the element. The styles object map may contain an array of values.
   * Each value will be added as element style.
   * Keys are sorted to add prefixed styles (like -webkit-x) first, before the standard ones.
   * @param {?} styles
   * @param {?} element
   * @param {?} renderer
   * @return {?}
   */
  function applyMultiValueStyleToElement(styles, element, renderer) {
      Object.keys(styles).sort().forEach(function (key) {
          var /** @type {?} */ values = Array.isArray(styles[key]) ? styles[key] : [styles[key]];
          for (var _i = 0, values_1 = values; _i < values_1.length; _i++) {
              var value = values_1[_i];
              renderer.setStyle(element, key, value);
          }
      });
  }
  /**
   * Find the DOM element's raw attribute value (if any)
   * @param {?} element
   * @param {?} attribute
   * @return {?}
   */
  function lookupAttributeValue(element, attribute) {
      return ɵgetDOM().getAttribute(element, attribute) || '';
  }
  /**
   * Find the DOM element's inline style value (if any)
   * @param {?} element
   * @param {?} styleName
   * @return {?}
   */
  function lookupInlineStyle(element, styleName) {
      return ɵgetDOM().getStyle(element, styleName);
  }
  /**
   * Determine the inline or inherited CSS style
   * @param {?} element
   * @param {?} styleName
   * @param {?=} inlineOnly
   * @return {?}
   */
  function lookupStyle(element, styleName, inlineOnly) {
      if (inlineOnly === void 0) { inlineOnly = false; }
      var /** @type {?} */ value = '';
      if (element) {
          try {
              var /** @type {?} */ immediateValue = value = lookupInlineStyle(element, styleName);
              if (!inlineOnly) {
                  value = immediateValue || ɵgetDOM().getComputedStyle(element).getPropertyValue(styleName);
              }
          }
          catch (e) {
              // TODO: platform-server throws an exception for getComputedStyle, will be fixed by PR 18362
          }
      }
      // Note: 'inline' is the default of all elements, unless UA stylesheet overrides;
      //       in which case getComputedStyle() should determine a valid value.
      return value ? value.trim() : 'block';
  }
  
  /**
   * Extends an object with the *enumerable* and *own* properties of one or more source objects,
   * similar to Object.assign.
   *
   * @param {?} dest The object which will have properties copied to it.
   * @param {...?} sources The source objects from which properties will be copied.
   * @return {?}
   */
  function extendObject(dest) {
      var sources = [];
      for (var _i = 1; _i < arguments.length; _i++) {
          sources[_i - 1] = arguments[_i];
      }
      if (dest == null) {
          throw TypeError('Cannot convert undefined or null to object');
      }
      for (var _a = 0, sources_1 = sources; _a < sources_1.length; _a++) {
          var source = sources_1[_a];
          if (source != null) {
              for (var /** @type {?} */ key in source) {
                  if (source.hasOwnProperty(key)) {
                      dest[key] = source[key];
                  }
              }
          }
      }
      return dest;
  }
  
  var KeyOptions = (function () {
      /**
       * @param {?} baseKey
       * @param {?} defaultValue
       * @param {?} inputKeys
       */
      function KeyOptions(baseKey, defaultValue, inputKeys) {
          this.baseKey = baseKey;
          this.defaultValue = defaultValue;
          this.inputKeys = inputKeys;
      }
      return KeyOptions;
  }());
  /**
   * ResponsiveActivation acts as a proxy between the MonitorMedia service (which emits mediaQuery
   * changes) and the fx API directives. The MQA proxies mediaQuery change events and notifies the
   * directive via the specified callback.
   *
   * - The MQA also determines which directive property should be used to determine the
   *   current change 'value'... BEFORE the original `onMediaQueryChanges()` method is called.
   * - The `ngOnDestroy()` method is also head-hooked to enable auto-unsubscribe from the
   *   MediaQueryServices.
   *
   * NOTE: these interceptions enables the logic in the fx API directives to remain terse and clean.
   */
  var ResponsiveActivation = (function () {
      /**
       * Constructor
       * @param {?} _options
       * @param {?} _mediaMonitor
       * @param {?} _onMediaChanges
       */
      function ResponsiveActivation(_options, _mediaMonitor, _onMediaChanges) {
          this._options = _options;
          this._mediaMonitor = _mediaMonitor;
          this._onMediaChanges = _onMediaChanges;
          this._subscribers = [];
          this._registryMap = this._buildRegistryMap();
          this._subscribers = this._configureChangeObservers();
      }
      Object.defineProperty(ResponsiveActivation.prototype, "registryFromLargest", {
          /**
           * Get a readonly sorted list of the breakpoints corresponding to the directive properties
           * defined in the HTML markup: the sorting is done from largest to smallest. The order is
           * important when several media queries are 'registered' and from which, the browser uses the
           * first matching media query.
           * @return {?}
           */
          get: function () {
              return this._registryMap.slice().reverse();
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ResponsiveActivation.prototype, "mediaMonitor", {
          /**
           * Accessor to the DI'ed directive property
           * Each directive instance has a reference to the MediaMonitor which is
           * used HERE to subscribe to mediaQuery change notifications.
           * @return {?}
           */
          get: function () {
              return this._mediaMonitor;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ResponsiveActivation.prototype, "activatedInputKey", {
          /**
           * Determine which directive \@Input() property is currently active (for the viewport size):
           * The key must be defined (in use) or fallback to the 'closest' overlapping property key
           * that is defined; otherwise the default property key will be used.
           * e.g.
           *      if `<div fxHide fxHide.gt-sm="false">` is used but the current activated mediaQuery alias
           *      key is `.md` then `.gt-sm` should be used instead
           * @return {?}
           */
          get: function () {
              return this._activatedInputKey || this._options.baseKey;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ResponsiveActivation.prototype, "activatedInput", {
          /**
           * Get the currently activated \@Input value or the fallback default \@Input value
           * @return {?}
           */
          get: function () {
              var /** @type {?} */ key = this.activatedInputKey;
              return this.hasKeyValue(key) ? this._lookupKeyValue(key) : this._options.defaultValue;
          },
          enumerable: true,
          configurable: true
      });
      /**
       * Fast validator for presence of attribute on the host element
       * @param {?} key
       * @return {?}
       */
      ResponsiveActivation.prototype.hasKeyValue = function (key) {
          var /** @type {?} */ value = this._options.inputKeys[key];
          return typeof value !== 'undefined';
      };
      /**
       * Remove interceptors, restore original functions, and forward the onDestroy() call
       * @return {?}
       */
      ResponsiveActivation.prototype.destroy = function () {
          this._subscribers.forEach(function (link) {
              link.unsubscribe();
          });
          this._subscribers = [];
      };
      /**
       * For each *defined* API property, register a callback to `_onMonitorEvents( )`
       * Cache 1..n subscriptions for internal auto-unsubscribes when the the directive destructs
       * @return {?}
       */
      ResponsiveActivation.prototype._configureChangeObservers = function () {
          var _this = this;
          var /** @type {?} */ subscriptions = [];
          this._registryMap.forEach(function (bp) {
              if (_this._keyInUse(bp.key)) {
                  // Inject directive default property key name: to let onMediaChange() calls
                  // know which property is being triggered...
                  var /** @type {?} */ buildChanges = function (change) {
                      change = change.clone();
                      change.property = _this._options.baseKey;
                      return change;
                  };
                  subscriptions.push(_this.mediaMonitor.observe(bp.alias).pipe(map(buildChanges))
                      .subscribe(function (change) {
                      _this._onMonitorEvents(change);
                  }));
              }
          });
          return subscriptions;
      };
      /**
       * Build mediaQuery key-hashmap; only for the directive properties that are actually defined/used
       * in the HTML markup
       * @return {?}
       */
      ResponsiveActivation.prototype._buildRegistryMap = function () {
          var _this = this;
          return this.mediaMonitor.breakpoints
              .map(function (bp) {
              return (extendObject({}, bp, {
                  baseKey: _this._options.baseKey,
                  key: _this._options.baseKey + bp.suffix // e.g.  layoutGtSm, layoutMd, layoutGtLg
              }));
          })
              .filter(function (bp) { return _this._keyInUse(bp.key); });
      };
      /**
       * Synchronizes change notifications with the current mq-activated \@Input and calculates the
       * mq-activated input value or the default value
       * @param {?} change
       * @return {?}
       */
      ResponsiveActivation.prototype._onMonitorEvents = function (change) {
          if (change.property == this._options.baseKey) {
              change.value = this._calculateActivatedValue(change);
              this._onMediaChanges(change);
          }
      };
      /**
       * Has the key been specified in the HTML markup and thus is intended
       * to participate in activation processes.
       * @param {?} key
       * @return {?}
       */
      ResponsiveActivation.prototype._keyInUse = function (key) {
          return this._lookupKeyValue(key) !== undefined;
      };
      /**
       *  Map input key associated with mediaQuery activation to closest defined input key
       *  then return the values associated with the targeted input property
       *
       *  !! change events may arrive out-of-order (activate before deactivate)
       *     so make sure the deactivate is used ONLY when the keys match
       *     (since a different activate may be in use)
       * @param {?} current
       * @return {?}
       */
      ResponsiveActivation.prototype._calculateActivatedValue = function (current) {
          var /** @type {?} */ currentKey = this._options.baseKey + current.suffix; // e.g. suffix == 'GtSm',
          var /** @type {?} */ newKey = this._activatedInputKey; // e.g. newKey == hideGtSm
          newKey = current.matches ? currentKey : ((newKey == currentKey) ? '' : newKey);
          this._activatedInputKey = this._validateInputKey(newKey);
          return this.activatedInput;
      };
      /**
       * For the specified input property key, validate it is defined (used in the markup)
       * If not see if a overlapping mediaQuery-related input key fallback has been defined
       *
       * NOTE: scans in the order defined by activeOverLaps (largest viewport ranges -> smallest ranges)
       * @param {?} inputKey
       * @return {?}
       */
      ResponsiveActivation.prototype._validateInputKey = function (inputKey) {
          var _this = this;
          var /** @type {?} */ isMissingKey = function (key) { return !_this._keyInUse(key); };
          if (isMissingKey(inputKey)) {
              this.mediaMonitor.activeOverlaps.some(function (bp) {
                  var /** @type {?} */ key = _this._options.baseKey + bp.suffix;
                  if (!isMissingKey(key)) {
                      inputKey = key;
                      return true; // exit .some()
                  }
                  return false;
              });
          }
          return inputKey;
      };
      /**
       * Get the value (if any) for the directive instances \@Input property (aka key)
       * @param {?} key
       * @return {?}
       */
      ResponsiveActivation.prototype._lookupKeyValue = function (key) {
          return this._options.inputKeys[key];
      };
      return ResponsiveActivation;
  }());
  
  /**
   * Abstract base class for the Layout API styling directives.
   * @abstract
   */
  var BaseFxDirective = (function () {
      /**
       * Constructor
       * @param {?} _mediaMonitor
       * @param {?} _elementRef
       * @param {?} _renderer
       */
      function BaseFxDirective(_mediaMonitor, _elementRef, _renderer) {
          this._mediaMonitor = _mediaMonitor;
          this._elementRef = _elementRef;
          this._renderer = _renderer;
          /**
           *  Dictionary of input keys with associated values
           */
          this._inputMap = {};
          /**
           * Has the `ngOnInit()` method fired
           *
           * Used to allow *ngFor tasks to finish and support queries like
           * getComputedStyle() during ngOnInit().
           */
          this._hasInitialized = false;
      }
      Object.defineProperty(BaseFxDirective.prototype, "hasMediaQueryListener", {
          /**
           * @return {?}
           */
          get: function () {
              return !!this._mqActivation;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(BaseFxDirective.prototype, "activatedValue", {
          /**
           * Imperatively determine the current activated [input] value;
           * if called before ngOnInit() this will return `undefined`
           * @return {?}
           */
          get: function () {
              return this._mqActivation ? this._mqActivation.activatedInput : undefined;
          },
          /**
           * Change the currently activated input value and force-update
           * the injected CSS (by-passing change detection).
           *
           * NOTE: Only the currently activated input value will be modified;
           *       other input values will NOT be affected.
           * @param {?} value
           * @return {?}
           */
          set: function (value) {
              var /** @type {?} */ key = 'baseKey', /** @type {?} */ previousVal;
              if (this._mqActivation) {
                  key = this._mqActivation.activatedInputKey;
                  previousVal = this._inputMap[key];
                  this._inputMap[key] = value;
              }
              var /** @type {?} */ change = new SimpleChange(previousVal, value, false);
              this.ngOnChanges(/** @type {?} */ (_a = {}, _a[key] = change, _a));
              var _a;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(BaseFxDirective.prototype, "parentElement", {
          /**
           * Access to host element's parent DOM node
           * @return {?}
           */
          get: function () {
              return this._elementRef.nativeElement.parentNode;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(BaseFxDirective.prototype, "nativeElement", {
          /**
           * @return {?}
           */
          get: function () {
              return this._elementRef.nativeElement;
          },
          enumerable: true,
          configurable: true
      });
      /**
       * Access the current value (if any) of the \@Input property.
       * @param {?} key
       * @return {?}
       */
      BaseFxDirective.prototype._queryInput = function (key) {
          return this._inputMap[key];
      };
      /**
       * Use post-component-initialization event to perform extra
       * querying such as computed Display style
       * @return {?}
       */
      BaseFxDirective.prototype.ngOnInit = function () {
          this._display = this._getDisplayStyle();
          this._hasInitialized = true;
      };
      /**
       * @param {?} change
       * @return {?}
       */
      BaseFxDirective.prototype.ngOnChanges = function (change) {
          throw new Error("BaseFxDirective::ngOnChanges should be overridden in subclass: " + change);
      };
      /**
       * @return {?}
       */
      BaseFxDirective.prototype.ngOnDestroy = function () {
          if (this._mqActivation) {
              this._mqActivation.destroy();
          }
          this._mediaMonitor = null;
      };
      /**
       * Was the directive's default selector used ?
       * If not, use the fallback value!
       * @param {?} key
       * @param {?} fallbackVal
       * @return {?}
       */
      BaseFxDirective.prototype._getDefaultVal = function (key, fallbackVal) {
          var /** @type {?} */ val = this._queryInput(key);
          var /** @type {?} */ hasDefaultVal = (val !== undefined && val !== null);
          return (hasDefaultVal && val !== '') ? val : fallbackVal;
      };
      /**
       * Quick accessor to the current HTMLElement's `display` style
       * Note: this allows use to preserve the original style
       * and optional restore it when the mediaQueries deactivate
       * @param {?=} source
       * @return {?}
       */
      BaseFxDirective.prototype._getDisplayStyle = function (source) {
          if (source === void 0) { source = this.nativeElement; }
          return lookupStyle(source || this.nativeElement, 'display');
      };
      /**
       * Quick accessor to raw attribute value on the target DOM element
       * @param {?} attribute
       * @param {?=} source
       * @return {?}
       */
      BaseFxDirective.prototype._getAttributeValue = function (attribute, source) {
          if (source === void 0) { source = this.nativeElement; }
          return lookupAttributeValue(source || this.nativeElement, attribute);
      };
      /**
       * Determine the DOM element's Flexbox flow (flex-direction).
       *
       * Check inline style first then check computed (stylesheet) style.
       * And optionally add the flow value to element's inline style.
       * @param {?} target
       * @param {?=} addIfMissing
       * @return {?}
       */
      BaseFxDirective.prototype._getFlowDirection = function (target, addIfMissing) {
          if (addIfMissing === void 0) { addIfMissing = false; }
          var /** @type {?} */ value = 'row';
          if (target) {
              value = lookupStyle(target, 'flex-direction') || 'row';
              var /** @type {?} */ hasInlineValue = lookupInlineStyle(target, 'flex-direction');
              if (!hasInlineValue && addIfMissing) {
                  applyStyleToElements(this._renderer, buildLayoutCSS(value), [target]);
              }
          }
          return value.trim();
      };
      /**
       * Applies styles given via string pair or object map to the directive element.
       * @param {?} style
       * @param {?=} value
       * @param {?=} nativeElement
       * @return {?}
       */
      BaseFxDirective.prototype._applyStyleToElement = function (style, value, nativeElement) {
          if (nativeElement === void 0) { nativeElement = this.nativeElement; }
          var /** @type {?} */ element = nativeElement || this.nativeElement;
          applyStyleToElement(this._renderer, element, style, value);
      };
      /**
       * Applies styles given via string pair or object map to the directive's element.
       * @param {?} style
       * @param {?} elements
       * @return {?}
       */
      BaseFxDirective.prototype._applyStyleToElements = function (style, elements) {
          applyStyleToElements(this._renderer, style, elements || []);
      };
      /**
       *  Save the property value; which may be a complex object.
       *  Complex objects support property chains
       * @param {?=} key
       * @param {?=} source
       * @return {?}
       */
      BaseFxDirective.prototype._cacheInput = function (key, source) {
          if (typeof source === 'object') {
              for (var /** @type {?} */ prop in source) {
                  this._inputMap[prop] = source[prop];
              }
          }
          else {
              if (!!key) {
                  this._inputMap[key] = source;
              }
          }
      };
      /**
       *  Build a ResponsiveActivation object used to manage subscriptions to mediaChange notifications
       *  and intelligent lookup of the directive's property value that corresponds to that mediaQuery
       *  (or closest match).
       * @param {?} key
       * @param {?} defaultValue
       * @param {?} onMediaQueryChange
       * @return {?}
       */
      BaseFxDirective.prototype._listenForMediaQueryChanges = function (key, defaultValue, onMediaQueryChange) {
          if (!this._mqActivation) {
              var /** @type {?} */ keyOptions = new KeyOptions(key, defaultValue, this._inputMap);
              this._mqActivation = new ResponsiveActivation(keyOptions, this._mediaMonitor, function (change) { return onMediaQueryChange(change); });
          }
          return this._mqActivation;
      };
      Object.defineProperty(BaseFxDirective.prototype, "childrenNodes", {
          /**
           * Special accessor to query for all child 'element' nodes regardless of type, class, etc.
           * @return {?}
           */
          get: function () {
              var /** @type {?} */ obj = this.nativeElement.children;
              var /** @type {?} */ buffer = [];
              // iterate backwards ensuring that length is an UInt32
              for (var /** @type {?} */ i = obj.length; i--;) {
                  buffer[i] = obj[i];
              }
              return buffer;
          },
          enumerable: true,
          configurable: true
      });
      /**
       * Does this directive have 1 or more responsive keys defined
       * Note: we exclude the 'baseKey' key (which is NOT considered responsive)
       * @param {?} baseKey
       * @return {?}
       */
      BaseFxDirective.prototype.hasResponsiveAPI = function (baseKey) {
          var /** @type {?} */ totalKeys = Object.keys(this._inputMap).length;
          var /** @type {?} */ baseValue = this._inputMap[baseKey];
          return (totalKeys - (!!baseValue ? 1 : 0)) > 0;
      };
      /**
       * Fast validator for presence of attribute on the host element
       * @param {?} key
       * @return {?}
       */
      BaseFxDirective.prototype.hasKeyValue = function (key) {
          return this._mqActivation.hasKeyValue(key);
      };
      Object.defineProperty(BaseFxDirective.prototype, "hasInitialized", {
          /**
           * @return {?}
           */
          get: function () {
              return this._hasInitialized;
          },
          enumerable: true,
          configurable: true
      });
      return BaseFxDirective;
  }());
  
  /**
   * Adapter to the BaseFxDirective abstract class so it can be used via composition.
   * @see BaseFxDirective
   */
  var BaseFxDirectiveAdapter = (function (_super) {
      __extends(BaseFxDirectiveAdapter, _super);
      /**
       * BaseFxDirectiveAdapter constructor
       * @param {?} _baseKey
       * @param {?} _mediaMonitor
       * @param {?} _elementRef
       * @param {?} _renderer
       */
      function BaseFxDirectiveAdapter(_baseKey, // non-responsive @Input property name
          _mediaMonitor, _elementRef, _renderer) {
          var _this = _super.call(this, _mediaMonitor, _elementRef, _renderer) || this;
          _this._baseKey = _baseKey;
          _this._mediaMonitor = _mediaMonitor;
          _this._elementRef = _elementRef;
          _this._renderer = _renderer;
          return _this;
      }
      Object.defineProperty(BaseFxDirectiveAdapter.prototype, "activeKey", {
          /**
           * Accessor to determine which \@Input property is "active"
           * e.g. which property value will be used.
           * @return {?}
           */
          get: function () {
              var /** @type {?} */ mqa = this._mqActivation;
              var /** @type {?} */ key = mqa ? mqa.activatedInputKey : this._baseKey;
              // Note: ClassDirective::SimpleChanges uses 'klazz' instead of 'class' as a key
              return (key === 'class') ? 'klazz' : key;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(BaseFxDirectiveAdapter.prototype, "inputMap", {
          /**
           * Hash map of all \@Input keys/values defined/used
           * @return {?}
           */
          get: function () {
              return this._inputMap;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(BaseFxDirectiveAdapter.prototype, "mqActivation", {
          /**
           * @see BaseFxDirective._mqActivation
           * @return {?}
           */
          get: function () {
              return this._mqActivation;
          },
          enumerable: true,
          configurable: true
      });
      /**
       * Does this directive have 1 or more responsive keys defined
       * Note: we exclude the 'baseKey' key (which is NOT considered responsive)
       * @return {?}
       */
      BaseFxDirectiveAdapter.prototype.hasResponsiveAPI = function () {
          return _super.prototype.hasResponsiveAPI.call(this, this._baseKey);
      };
      /**
       * @see BaseFxDirective._queryInput
       * @param {?} key
       * @return {?}
       */
      BaseFxDirectiveAdapter.prototype.queryInput = function (key) {
          return key ? this._queryInput(key) : undefined;
      };
      /**
       *  Save the property value.
       * @param {?=} key
       * @param {?=} source
       * @param {?=} cacheRaw
       * @return {?}
       */
      BaseFxDirectiveAdapter.prototype.cacheInput = function (key, source, cacheRaw) {
          if (cacheRaw === void 0) { cacheRaw = false; }
          if (cacheRaw) {
              this._cacheInputRaw(key, source);
          }
          else if (Array.isArray(source)) {
              this._cacheInputArray(key, source);
          }
          else if (typeof source === 'object') {
              this._cacheInputObject(key, source);
          }
          else if (typeof source === 'string') {
              this._cacheInputString(key, source);
          }
          else {
              throw new Error("Invalid class value '" + key + "' provided. Did you want to cache the raw value?");
          }
      };
      /**
       * @see BaseFxDirective._listenForMediaQueryChanges
       * @param {?} key
       * @param {?} defaultValue
       * @param {?} onMediaQueryChange
       * @return {?}
       */
      BaseFxDirectiveAdapter.prototype.listenForMediaQueryChanges = function (key, defaultValue, onMediaQueryChange) {
          return this._listenForMediaQueryChanges(key, defaultValue, onMediaQueryChange);
      };
      /**
       * No implicit transforms of the source.
       * Required when caching values expected later for KeyValueDiffers
       * @param {?=} key
       * @param {?=} source
       * @return {?}
       */
      BaseFxDirectiveAdapter.prototype._cacheInputRaw = function (key, source) {
          this._inputMap[key] = source;
      };
      /**
       *  Save the property value for Array values.
       * @param {?=} key
       * @param {?=} source
       * @return {?}
       */
      BaseFxDirectiveAdapter.prototype._cacheInputArray = function (key, source) {
          if (key === void 0) { key = ''; }
          this._inputMap[key] = source.join(' ');
      };
      /**
       *  Save the property value for key/value pair values.
       * @param {?=} key
       * @param {?=} source
       * @return {?}
       */
      BaseFxDirectiveAdapter.prototype._cacheInputObject = function (key, source) {
          if (key === void 0) { key = ''; }
          var /** @type {?} */ classes = [];
          for (var /** @type {?} */ prop in source) {
              if (!!source[prop]) {
                  classes.push(prop);
              }
          }
          this._inputMap[key] = classes.join(' ');
      };
      /**
       *  Save the property value for string values.
       * @param {?=} key
       * @param {?=} source
       * @return {?}
       */
      BaseFxDirectiveAdapter.prototype._cacheInputString = function (key, source) {
          if (key === void 0) { key = ''; }
          this._inputMap[key] = source;
      };
      return BaseFxDirectiveAdapter;
  }(BaseFxDirective));
  
  // @TODO - remove after updating to TS v2.4
  // tslint:disable:no-unused-variable
  /**
   *  Injection token unique to the flex-layout library.
   *  Use this token when build a custom provider (see below).
   */
  var BREAKPOINTS = new InjectionToken('Token (@angular/flex-layout) Breakpoints');
  
  /**
   * Registry of 1..n MediaQuery breakpoint ranges
   * This is published as a provider and may be overriden from custom, application-specific ranges
   *
   */
  var BreakPointRegistry = (function () {
      /**
       * @param {?} _registry
       */
      function BreakPointRegistry(_registry) {
          this._registry = _registry;
      }
      Object.defineProperty(BreakPointRegistry.prototype, "items", {
          /**
           * Accessor to raw list
           * @return {?}
           */
          get: function () {
              return this._registry.slice();
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(BreakPointRegistry.prototype, "sortedItems", {
          /**
           * Accessor to sorted list used for registration with matchMedia API
           *
           * NOTE: During breakpoint registration, we want to register the overlaps FIRST
           *       so the non-overlaps will trigger the MatchMedia:BehaviorSubject last!
           *       And the largest, non-overlap, matching breakpoint should be the lastReplay value
           * @return {?}
           */
          get: function () {
              var /** @type {?} */ overlaps = this._registry.filter(function (it) { return it.overlapping === true; });
              var /** @type {?} */ nonOverlaps = this._registry.filter(function (it) { return it.overlapping !== true; });
              return overlaps.concat(nonOverlaps);
          },
          enumerable: true,
          configurable: true
      });
      /**
       * Search breakpoints by alias (e.g. gt-xs)
       * @param {?} alias
       * @return {?}
       */
      BreakPointRegistry.prototype.findByAlias = function (alias) {
          return this._registry.find(function (bp) { return bp.alias == alias; }) || null;
      };
      /**
       * @param {?} query
       * @return {?}
       */
      BreakPointRegistry.prototype.findByQuery = function (query) {
          return this._registry.find(function (bp) { return bp.mediaQuery == query; }) || null;
      };
      Object.defineProperty(BreakPointRegistry.prototype, "overlappings", {
          /**
           * Get all the breakpoints whose ranges could overlapping `normal` ranges;
           * e.g. gt-sm overlaps md, lg, and xl
           * @return {?}
           */
          get: function () {
              return this._registry.filter(function (it) { return it.overlapping == true; });
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(BreakPointRegistry.prototype, "aliases", {
          /**
           * Get list of all registered (non-empty) breakpoint aliases
           * @return {?}
           */
          get: function () {
              return this._registry.map(function (it) { return it.alias; });
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(BreakPointRegistry.prototype, "suffixes", {
          /**
           * Aliases are mapped to properties using suffixes
           * e.g.  'gt-sm' for property 'layout'  uses suffix 'GtSm'
           * for property layoutGtSM.
           * @return {?}
           */
          get: function () {
              return this._registry.map(function (it) { return !!it.suffix ? it.suffix : ''; });
          },
          enumerable: true,
          configurable: true
      });
      BreakPointRegistry.decorators = [
          { type: Injectable },
      ];
      /**
       * @nocollapse
       */
      BreakPointRegistry.ctorParameters = function () { return [
          { type: Array, decorators: [{ type: Inject, args: [BREAKPOINTS,] },] },
      ]; };
      return BreakPointRegistry;
  }());
  
  /**
   * Class instances emitted [to observers] for each mql notification
   */
  var MediaChange = (function () {
      /**
       * @param {?=} matches
       * @param {?=} mediaQuery
       * @param {?=} mqAlias
       * @param {?=} suffix
       */
      function MediaChange(matches, mediaQuery, mqAlias, suffix // e.g.   GtSM, Md, GtLg
      ) {
          if (matches === void 0) { matches = false; }
          if (mediaQuery === void 0) { mediaQuery = 'all'; }
          if (mqAlias === void 0) { mqAlias = ''; }
          if (suffix === void 0) { suffix = ''; } // e.g.   GtSM, Md, GtLg
          this.matches = matches;
          this.mediaQuery = mediaQuery;
          this.mqAlias = mqAlias;
          this.suffix = suffix; // e.g.   GtSM, Md, GtLg
      }
      /**
       * @return {?}
       */
      MediaChange.prototype.clone = function () {
          return new MediaChange(this.matches, this.mediaQuery, this.mqAlias, this.suffix);
      };
      return MediaChange;
  }());
  
  /**
   * MediaMonitor configures listeners to mediaQuery changes and publishes an Observable facade to
   * convert mediaQuery change callbacks to subscriber notifications. These notifications will be
   * performed within the ng Zone to trigger change detections and component updates.
   *
   * NOTE: both mediaQuery activations and de-activations are announced in notifications
   */
  var MatchMedia = (function () {
      /**
       * @param {?} _zone
       * @param {?} _document
       */
      function MatchMedia(_zone, _document) {
          this._zone = _zone;
          this._document = _document;
          this._registry = new Map();
          this._source = new BehaviorSubject(new MediaChange(true));
          this._observable$ = this._source.asObservable();
      }
      /**
       * For the specified mediaQuery?
       * @param {?} mediaQuery
       * @return {?}
       */
      MatchMedia.prototype.isActive = function (mediaQuery) {
          var /** @type {?} */ mql = this._registry.get(mediaQuery);
          return !!mql ? mql.matches : false;
      };
      /**
       * External observers can watch for all (or a specific) mql changes.
       * Typically used by the MediaQueryAdaptor; optionally available to components
       * who wish to use the MediaMonitor as mediaMonitor$ observable service.
       *
       * NOTE: if a mediaQuery is not specified, then ALL mediaQuery activations will
       *       be announced.
       * @param {?=} mediaQuery
       * @return {?}
       */
      MatchMedia.prototype.observe = function (mediaQuery) {
          if (mediaQuery) {
              this.registerQuery(mediaQuery);
          }
          return this._observable$.pipe(filter(function (change) {
              return mediaQuery ? (change.mediaQuery === mediaQuery) : true;
          }));
      };
      /**
       * Based on the BreakPointRegistry provider, register internal listeners for each unique
       * mediaQuery. Each listener emits specific MediaChange data to observers
       * @param {?} mediaQuery
       * @return {?}
       */
      MatchMedia.prototype.registerQuery = function (mediaQuery) {
          var _this = this;
          var /** @type {?} */ list = normalizeQuery(mediaQuery);
          if (list.length > 0) {
              prepareQueryCSS(list, this._document);
              list.forEach(function (query) {
                  var /** @type {?} */ mql = _this._registry.get(query);
                  var /** @type {?} */ onMQLEvent = function (e) {
                      _this._zone.run(function () {
                          var /** @type {?} */ change = new MediaChange(e.matches, query);
                          _this._source.next(change);
                      });
                  };
                  if (!mql) {
                      mql = _this._buildMQL(query);
                      mql.addListener(onMQLEvent);
                      _this._registry.set(query, mql);
                  }
                  if (mql.matches) {
                      onMQLEvent(mql); // Announce activate range for initial subscribers
                  }
              });
          }
      };
      /**
       * Call window.matchMedia() to build a MediaQueryList; which
       * supports 0..n listeners for activation/deactivation
       * @param {?} query
       * @return {?}
       */
      MatchMedia.prototype._buildMQL = function (query) {
          var /** @type {?} */ canListen = isBrowser() && !!((window)).matchMedia('all').addListener;
          return canListen ? ((window)).matchMedia(query) : ({
              matches: query === 'all' || query === '',
              media: query,
              addListener: function () {
              },
              removeListener: function () {
              }
          });
      };
      MatchMedia.decorators = [
          { type: Injectable },
      ];
      /**
       * @nocollapse
       */
      MatchMedia.ctorParameters = function () { return [
          { type: NgZone, },
          { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] },] },
      ]; };
      return MatchMedia;
  }());
  /**
   * Determine if SSR or Browser rendering.
   * @return {?}
   */
  function isBrowser() {
      return ɵgetDOM().supportsDOMEvents();
  }
  /**
   * Private global registry for all dynamically-created, injected style tags
   * @see prepare(query)
   */
  var ALL_STYLES = {};
  /**
   * For Webkit engines that only trigger the MediaQueryList Listener
   * when there is at least one CSS selector for the respective media query.
   *
   * @param {?} mediaQueries
   * @param {?} _document
   * @return {?}
   */
  function prepareQueryCSS(mediaQueries, _document) {
      var /** @type {?} */ list = mediaQueries.filter(function (it) { return !ALL_STYLES[it]; });
      if (list.length > 0) {
          var /** @type {?} */ query = list.join(', ');
          try {
              var /** @type {?} */ styleEl_1 = ɵgetDOM().createElement('style');
              ɵgetDOM().setAttribute(styleEl_1, 'type', 'text/css');
              if (!styleEl_1['styleSheet']) {
                  var /** @type {?} */ cssText = "/*\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{ }}";
                  ɵgetDOM().appendChild(styleEl_1, ɵgetDOM().createTextNode(cssText));
              }
              ɵgetDOM().appendChild(_document.head, styleEl_1);
              // Store in private global registry
              list.forEach(function (mq) { return ALL_STYLES[mq] = styleEl_1; });
          }
          catch (e) {
              console.error(e);
          }
      }
  }
  /**
   * Always convert to unique list of queries; for iteration in ::registerQuery()
   * @param {?} mediaQuery
   * @return {?}
   */
  function normalizeQuery(mediaQuery) {
      return (typeof mediaQuery === 'undefined') ? [] :
          (typeof mediaQuery === 'string') ? [mediaQuery] : unique(/** @type {?} */ (mediaQuery));
  }
  /**
   * Filter duplicate mediaQueries in the list
   * @param {?} list
   * @return {?}
   */
  function unique(list) {
      var /** @type {?} */ seen = {};
      return list.filter(function (item) {
          return seen.hasOwnProperty(item) ? false : (seen[item] = true);
      });
  }
  
  /**
   * For the specified MediaChange, make sure it contains the breakpoint alias
   * and suffix (if available).
   * @param {?} dest
   * @param {?} source
   * @return {?}
   */
  function mergeAlias(dest, source) {
      return extendObject(dest, source ? {
          mqAlias: source.alias,
          suffix: source.suffix
      } : {});
  }
  
  /**
   * MediaMonitor uses the MatchMedia service to observe mediaQuery changes (both activations and
   * deactivations). These changes are are published as MediaChange notifications.
   *
   * Note: all notifications will be performed within the
   * ng Zone to trigger change detections and component updates.
   *
   * It is the MediaMonitor that:
   *  - auto registers all known breakpoints
   *  - injects alias information into each raw MediaChange event
   *  - provides accessor to the currently active BreakPoint
   *  - publish list of overlapping BreakPoint(s); used by ResponsiveActivation
   */
  var MediaMonitor = (function () {
      /**
       * @param {?} _breakpoints
       * @param {?} _matchMedia
       */
      function MediaMonitor(_breakpoints, _matchMedia) {
          this._breakpoints = _breakpoints;
          this._matchMedia = _matchMedia;
          this._registerBreakpoints();
      }
      Object.defineProperty(MediaMonitor.prototype, "breakpoints", {
          /**
           * Read-only accessor to the list of breakpoints configured in the BreakPointRegistry provider
           * @return {?}
           */
          get: function () {
              return this._breakpoints.items.slice();
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(MediaMonitor.prototype, "activeOverlaps", {
          /**
           * @return {?}
           */
          get: function () {
              var _this = this;
              var /** @type {?} */ items = this._breakpoints.overlappings.reverse();
              return items.filter(function (bp) {
                  return _this._matchMedia.isActive(bp.mediaQuery);
              });
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(MediaMonitor.prototype, "active", {
          /**
           * @return {?}
           */
          get: function () {
              var _this = this;
              var /** @type {?} */ found = null, /** @type {?} */ items = this.breakpoints.reverse();
              items.forEach(function (bp) {
                  if (bp.alias !== '') {
                      if (!found && _this._matchMedia.isActive(bp.mediaQuery)) {
                          found = bp;
                      }
                  }
              });
              var /** @type {?} */ first = this.breakpoints[0];
              return found || (this._matchMedia.isActive(first.mediaQuery) ? first : null);
          },
          enumerable: true,
          configurable: true
      });
      /**
       * For the specified mediaQuery alias, is the mediaQuery range active?
       * @param {?} alias
       * @return {?}
       */
      MediaMonitor.prototype.isActive = function (alias) {
          var /** @type {?} */ bp = this._breakpoints.findByAlias(alias) || this._breakpoints.findByQuery(alias);
          return this._matchMedia.isActive(bp ? bp.mediaQuery : alias);
      };
      /**
       * External observers can watch for all (or a specific) mql changes.
       * If specific breakpoint is observed, only return *activated* events
       * otherwise return all events for BOTH activated + deactivated changes.
       * @param {?=} alias
       * @return {?}
       */
      MediaMonitor.prototype.observe = function (alias) {
          var /** @type {?} */ bp = this._breakpoints.findByAlias(alias || '') ||
              this._breakpoints.findByQuery(alias || '');
          var /** @type {?} */ hasAlias = function (change) { return (bp ? change.mqAlias !== '' : true); };
          // Note: the raw MediaChange events [from MatchMedia] do not contain important alias information
          var /** @type {?} */ media$ = this._matchMedia.observe(bp ? bp.mediaQuery : alias);
          return media$.pipe(map(function (change) { return mergeAlias(change, bp); }), filter(hasAlias));
      };
      /**
       * Immediate calls to matchMedia() to establish listeners
       * and prepare for immediate subscription notifications
       * @return {?}
       */
      MediaMonitor.prototype._registerBreakpoints = function () {
          var /** @type {?} */ queries = this._breakpoints.sortedItems.map(function (bp) { return bp.mediaQuery; });
          this._matchMedia.registerQuery(queries);
      };
      MediaMonitor.decorators = [
          { type: Injectable },
      ];
      /**
       * @nocollapse
       */
      MediaMonitor.ctorParameters = function () { return [
          { type: BreakPointRegistry, },
          { type: MatchMedia, },
      ]; };
      return MediaMonitor;
  }());
  
  /**
   * 'layout' flexbox styling directive
   * Defines the positioning flow direction for the child elements: row or column
   * Optional values: column or row (default)
   * @see https://css-tricks.com/almanac/properties/f/flex-direction/
   *
   */
  var LayoutDirective = (function (_super) {
      __extends(LayoutDirective, _super);
      /**
       *
       * @param {?} monitor
       * @param {?} elRef
       * @param {?} renderer
       */
      function LayoutDirective(monitor, elRef, renderer) {
          var _this = _super.call(this, monitor, elRef, renderer) || this;
          _this._announcer = new ReplaySubject(1);
          _this.layout$ = _this._announcer.asObservable();
          return _this;
      }
      Object.defineProperty(LayoutDirective.prototype, "layout", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('layout', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutDirective.prototype, "layoutXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('layoutXs', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutDirective.prototype, "layoutSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('layoutSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutDirective.prototype, "layoutMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('layoutMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutDirective.prototype, "layoutLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('layoutLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutDirective.prototype, "layoutXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('layoutXl', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutDirective.prototype, "layoutGtXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('layoutGtXs', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutDirective.prototype, "layoutGtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('layoutGtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutDirective.prototype, "layoutGtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('layoutGtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutDirective.prototype, "layoutGtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('layoutGtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutDirective.prototype, "layoutLtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('layoutLtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutDirective.prototype, "layoutLtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('layoutLtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutDirective.prototype, "layoutLtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('layoutLtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutDirective.prototype, "layoutLtXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('layoutLtXl', val); },
          enumerable: true,
          configurable: true
      });
      
      /**
       * On changes to any \@Input properties...
       * Default to use the non-responsive Input value ('fxLayout')
       * Then conditionally override with the mq-activated Input's current value
       * @param {?} changes
       * @return {?}
       */
      LayoutDirective.prototype.ngOnChanges = function (changes) {
          if (changes['layout'] != null || this._mqActivation) {
              this._updateWithDirection();
          }
      };
      /**
       * After the initial onChanges, build an mqActivation object that bridges
       * mql change events to onMediaQueryChange handlers
       * @return {?}
       */
      LayoutDirective.prototype.ngOnInit = function () {
          var _this = this;
          _super.prototype.ngOnInit.call(this);
          this._listenForMediaQueryChanges('layout', 'row', function (changes) {
              _this._updateWithDirection(changes.value);
          });
          this._updateWithDirection();
      };
      /**
       * Validate the direction value and then update the host's inline flexbox styles
       * @param {?=} value
       * @return {?}
       */
      LayoutDirective.prototype._updateWithDirection = function (value) {
          value = value || this._queryInput('layout') || 'row';
          if (this._mqActivation) {
              value = this._mqActivation.activatedInput;
          }
          // Update styles and announce to subscribers the *new* direction
          var /** @type {?} */ css = buildLayoutCSS(!!value ? value : '');
          this._applyStyleToElement(css);
          this._announcer.next(css['flex-direction']);
      };
      LayoutDirective.decorators = [
          { type: Directive, args: [{ selector: "\n  [fxLayout],\n  [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl],\n  [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl],\n  [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]\n" },] },
      ];
      /**
       * @nocollapse
       */
      LayoutDirective.ctorParameters = function () { return [
          { type: MediaMonitor, },
          { type: ElementRef, },
          { type: Renderer2, },
      ]; };
      LayoutDirective.propDecorators = {
          'layout': [{ type: Input, args: ['fxLayout',] },],
          'layoutXs': [{ type: Input, args: ['fxLayout.xs',] },],
          'layoutSm': [{ type: Input, args: ['fxLayout.sm',] },],
          'layoutMd': [{ type: Input, args: ['fxLayout.md',] },],
          'layoutLg': [{ type: Input, args: ['fxLayout.lg',] },],
          'layoutXl': [{ type: Input, args: ['fxLayout.xl',] },],
          'layoutGtXs': [{ type: Input, args: ['fxLayout.gt-xs',] },],
          'layoutGtSm': [{ type: Input, args: ['fxLayout.gt-sm',] },],
          'layoutGtMd': [{ type: Input, args: ['fxLayout.gt-md',] },],
          'layoutGtLg': [{ type: Input, args: ['fxLayout.gt-lg',] },],
          'layoutLtSm': [{ type: Input, args: ['fxLayout.lt-sm',] },],
          'layoutLtMd': [{ type: Input, args: ['fxLayout.lt-md',] },],
          'layoutLtLg': [{ type: Input, args: ['fxLayout.lt-lg',] },],
          'layoutLtXl': [{ type: Input, args: ['fxLayout.lt-xl',] },],
      };
      return LayoutDirective;
  }(BaseFxDirective));
  
  /**
   * 'layout-align' flexbox styling directive
   *  Defines positioning of child elements along main and cross axis in a layout container
   *  Optional values: {main-axis} values or {main-axis cross-axis} value pairs
   *
   *  \@see https://css-tricks.com/almanac/properties/j/justify-content/
   *  \@see https://css-tricks.com/almanac/properties/a/align-items/
   *  \@see https://css-tricks.com/almanac/properties/a/align-content/
   */
  var LayoutAlignDirective = (function (_super) {
      __extends(LayoutAlignDirective, _super);
      /**
       * @param {?} monitor
       * @param {?} elRef
       * @param {?} renderer
       * @param {?} container
       */
      function LayoutAlignDirective(monitor, elRef, renderer, container) {
          var _this = _super.call(this, monitor, elRef, renderer) || this;
          _this._layout = 'row'; // default flex-direction
          if (container) {
              _this._layoutWatcher = container.layout$.subscribe(_this._onLayoutChange.bind(_this));
          }
          return _this;
      }
      Object.defineProperty(LayoutAlignDirective.prototype, "align", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('align', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(LayoutAlignDirective.prototype, "alignXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignXs', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(LayoutAlignDirective.prototype, "alignSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutAlignDirective.prototype, "alignMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutAlignDirective.prototype, "alignLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutAlignDirective.prototype, "alignXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignXl', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutAlignDirective.prototype, "alignGtXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignGtXs', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutAlignDirective.prototype, "alignGtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignGtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutAlignDirective.prototype, "alignGtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignGtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutAlignDirective.prototype, "alignGtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignGtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutAlignDirective.prototype, "alignLtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignLtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutAlignDirective.prototype, "alignLtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignLtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutAlignDirective.prototype, "alignLtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignLtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutAlignDirective.prototype, "alignLtXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignLtXl', val); },
          enumerable: true,
          configurable: true
      });
      
      /**
       * @param {?} changes
       * @return {?}
       */
      LayoutAlignDirective.prototype.ngOnChanges = function (changes) {
          if (changes['align'] != null || this._mqActivation) {
              this._updateWithValue();
          }
      };
      /**
       * After the initial onChanges, build an mqActivation object that bridges
       * mql change events to onMediaQueryChange handlers
       * @return {?}
       */
      LayoutAlignDirective.prototype.ngOnInit = function () {
          var _this = this;
          _super.prototype.ngOnInit.call(this);
          this._listenForMediaQueryChanges('align', 'start stretch', function (changes) {
              _this._updateWithValue(changes.value);
          });
          this._updateWithValue();
      };
      /**
       * @return {?}
       */
      LayoutAlignDirective.prototype.ngOnDestroy = function () {
          _super.prototype.ngOnDestroy.call(this);
          if (this._layoutWatcher) {
              this._layoutWatcher.unsubscribe();
          }
      };
      /**
       *
       * @param {?=} value
       * @return {?}
       */
      LayoutAlignDirective.prototype._updateWithValue = function (value) {
          value = value || this._queryInput('align') || 'start stretch';
          if (this._mqActivation) {
              value = this._mqActivation.activatedInput;
          }
          this._applyStyleToElement(this._buildCSS(value));
          this._allowStretching(value, !this._layout ? 'row' : this._layout);
      };
      /**
       * Cache the parent container 'flex-direction' and update the 'flex' styles
       * @param {?} direction
       * @return {?}
       */
      LayoutAlignDirective.prototype._onLayoutChange = function (direction) {
          var _this = this;
          this._layout = (direction || '').toLowerCase();
          if (!LAYOUT_VALUES.find(function (x) { return x === _this._layout; })) {
              this._layout = 'row';
          }
          var /** @type {?} */ value = this._queryInput('align') || 'start stretch';
          if (this._mqActivation) {
              value = this._mqActivation.activatedInput;
          }
          this._allowStretching(value, this._layout || 'row');
      };
      /**
       * @param {?} align
       * @return {?}
       */
      LayoutAlignDirective.prototype._buildCSS = function (align) {
          var /** @type {?} */ css = {}, _a = align.split(' '), main_axis = _a[0], cross_axis = _a[1]; // tslint:disable-line:variable-name
          // Main axis
          switch (main_axis) {
              case 'center':
                  css['justify-content'] = 'center';
                  break;
              case 'space-around':
                  css['justify-content'] = 'space-around';
                  break;
              case 'space-between':
                  css['justify-content'] = 'space-between';
                  break;
              case 'space-evenly':
                  css['justify-content'] = 'space-evenly';
                  break;
              case 'end':
              case 'flex-end':
                  css['justify-content'] = 'flex-end';
                  break;
              case 'start':
              case 'flex-start':
              default:
                  css['justify-content'] = 'flex-start'; // default main axis
                  break;
          }
          // Cross-axis
          switch (cross_axis) {
              case 'start':
              case 'flex-start':
                  css['align-items'] = css['align-content'] = 'flex-start';
                  break;
              case 'baseline':
                  css['align-items'] = 'baseline';
                  break;
              case 'center':
                  css['align-items'] = css['align-content'] = 'center';
                  break;
              case 'end':
              case 'flex-end':
                  css['align-items'] = css['align-content'] = 'flex-end';
                  break;
              case 'stretch':
              default:// 'stretch'
                  css['align-items'] = css['align-content'] = 'stretch'; // default cross axis
                  break;
          }
          return extendObject(css, {
              'display': 'flex',
              'flex-direction': this._layout || 'row',
              'box-sizing': 'border-box'
          });
      };
      /**
       * Update container element to 'stretch' as needed...
       * NOTE: this is only done if the crossAxis is explicitly set to 'stretch'
       * @param {?} align
       * @param {?} layout
       * @return {?}
       */
      LayoutAlignDirective.prototype._allowStretching = function (align, layout) {
          var _a = align.split(' '), cross_axis = _a[1]; // tslint:disable-line:variable-name
          if (cross_axis == 'stretch') {
              // Use `null` values to remove style
              this._applyStyleToElement({
                  'box-sizing': 'border-box',
                  'max-width': !isFlowHorizontal(layout) ? '100%' : null,
                  'max-height': isFlowHorizontal(layout) ? '100%' : null
              });
          }
      };
      LayoutAlignDirective.decorators = [
          { type: Directive, args: [{ selector: "\n  [fxLayoutAlign],\n  [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg],[fxLayoutAlign.xl],\n  [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl],\n  [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]\n" },] },
      ];
      /**
       * @nocollapse
       */
      LayoutAlignDirective.ctorParameters = function () { return [
          { type: MediaMonitor, },
          { type: ElementRef, },
          { type: Renderer2, },
          { type: LayoutDirective, decorators: [{ type: Optional }, { type: Self },] },
      ]; };
      LayoutAlignDirective.propDecorators = {
          'align': [{ type: Input, args: ['fxLayoutAlign',] },],
          'alignXs': [{ type: Input, args: ['fxLayoutAlign.xs',] },],
          'alignSm': [{ type: Input, args: ['fxLayoutAlign.sm',] },],
          'alignMd': [{ type: Input, args: ['fxLayoutAlign.md',] },],
          'alignLg': [{ type: Input, args: ['fxLayoutAlign.lg',] },],
          'alignXl': [{ type: Input, args: ['fxLayoutAlign.xl',] },],
          'alignGtXs': [{ type: Input, args: ['fxLayoutAlign.gt-xs',] },],
          'alignGtSm': [{ type: Input, args: ['fxLayoutAlign.gt-sm',] },],
          'alignGtMd': [{ type: Input, args: ['fxLayoutAlign.gt-md',] },],
          'alignGtLg': [{ type: Input, args: ['fxLayoutAlign.gt-lg',] },],
          'alignLtSm': [{ type: Input, args: ['fxLayoutAlign.lt-sm',] },],
          'alignLtMd': [{ type: Input, args: ['fxLayoutAlign.lt-md',] },],
          'alignLtLg': [{ type: Input, args: ['fxLayoutAlign.lt-lg',] },],
          'alignLtXl': [{ type: Input, args: ['fxLayoutAlign.lt-xl',] },],
      };
      return LayoutAlignDirective;
  }(BaseFxDirective));
  
  /**
   * 'layout-padding' styling directive
   *  Defines padding of child elements in a layout container
   */
  var LayoutGapDirective = (function (_super) {
      __extends(LayoutGapDirective, _super);
      /**
       * @param {?} monitor
       * @param {?} elRef
       * @param {?} renderer
       * @param {?} container
       * @param {?} _zone
       */
      function LayoutGapDirective(monitor, elRef, renderer, container, _zone) {
          var _this = _super.call(this, monitor, elRef, renderer) || this;
          _this._zone = _zone;
          _this._layout = 'row'; // default flex-direction
          if (container) {
              _this._layoutWatcher = container.layout$.subscribe(_this._onLayoutChange.bind(_this));
          }
          return _this;
      }
      Object.defineProperty(LayoutGapDirective.prototype, "gap", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('gap', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(LayoutGapDirective.prototype, "gapXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('gapXs', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(LayoutGapDirective.prototype, "gapSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('gapSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutGapDirective.prototype, "gapMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('gapMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutGapDirective.prototype, "gapLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('gapLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutGapDirective.prototype, "gapXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('gapXl', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutGapDirective.prototype, "gapGtXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('gapGtXs', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutGapDirective.prototype, "gapGtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('gapGtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutGapDirective.prototype, "gapGtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('gapGtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutGapDirective.prototype, "gapGtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('gapGtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutGapDirective.prototype, "gapLtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('gapLtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutGapDirective.prototype, "gapLtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('gapLtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutGapDirective.prototype, "gapLtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('gapLtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutGapDirective.prototype, "gapLtXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('gapLtXl', val); },
          enumerable: true,
          configurable: true
      });
      
      /**
       * @param {?} changes
       * @return {?}
       */
      LayoutGapDirective.prototype.ngOnChanges = function (changes) {
          if (changes['gap'] != null || this._mqActivation) {
              this._updateWithValue();
          }
      };
      /**
       * After the initial onChanges, build an mqActivation object that bridges
       * mql change events to onMediaQueryChange handlers
       * @return {?}
       */
      LayoutGapDirective.prototype.ngAfterContentInit = function () {
          var _this = this;
          this._watchContentChanges();
          this._listenForMediaQueryChanges('gap', '0', function (changes) {
              _this._updateWithValue(changes.value);
          });
          this._updateWithValue();
      };
      /**
       * @return {?}
       */
      LayoutGapDirective.prototype.ngOnDestroy = function () {
          _super.prototype.ngOnDestroy.call(this);
          if (this._layoutWatcher) {
              this._layoutWatcher.unsubscribe();
          }
          if (this._observer) {
              this._observer.disconnect();
          }
      };
      /**
       * Watch for child nodes to be added... and apply the layout gap styles to each.
       * NOTE: this does NOT! differentiate between viewChildren and contentChildren
       * @return {?}
       */
      LayoutGapDirective.prototype._watchContentChanges = function () {
          var _this = this;
          this._zone.runOutsideAngular(function () {
              if (typeof MutationObserver !== 'undefined') {
                  _this._observer = new MutationObserver(function (mutations) {
                      var /** @type {?} */ validatedChanges = function (it) {
                          return (it.addedNodes && it.addedNodes.length > 0) ||
                              (it.removedNodes && it.removedNodes.length > 0);
                      };
                      // update gap styles only for child 'added' or 'removed' events
                      if (mutations.some(validatedChanges)) {
                          _this._updateWithValue();
                      }
                  });
                  _this._observer.observe(_this.nativeElement, { childList: true });
              }
          });
      };
      /**
       * Cache the parent container 'flex-direction' and update the 'margin' styles
       * @param {?} direction
       * @return {?}
       */
      LayoutGapDirective.prototype._onLayoutChange = function (direction) {
          var _this = this;
          this._layout = (direction || '').toLowerCase();
          if (!LAYOUT_VALUES.find(function (x) { return x === _this._layout; })) {
              this._layout = 'row';
          }
          this._updateWithValue();
      };
      /**
       *
       * @param {?=} value
       * @return {?}
       */
      LayoutGapDirective.prototype._updateWithValue = function (value) {
          var _this = this;
          value = value || this._queryInput('gap') || '0';
          if (this._mqActivation) {
              value = this._mqActivation.activatedInput;
          }
          // Gather all non-hidden Element nodes
          var /** @type {?} */ items = this.childrenNodes
              .filter(function (el) { return el.nodeType === 1 && _this._getDisplayStyle(el) != 'none'; });
          var /** @type {?} */ numItems = items.length;
          if (numItems > 0) {
              var /** @type {?} */ lastItem = items[numItems - 1];
              // For each `element` children EXCEPT the last,
              // set the margin right/bottom styles...
              items = items.filter(function (_, j) { return j < numItems - 1; });
              this._applyStyleToElements(this._buildCSS(value), items);
              // Clear all gaps for all visible elements
              this._applyStyleToElements(this._buildCSS(), [lastItem]);
          }
      };
      /**
       * Prepare margin CSS, remove any previous explicitly
       * assigned margin assignments
       * @param {?=} value
       * @return {?}
       */
      LayoutGapDirective.prototype._buildCSS = function (value) {
          if (value === void 0) { value = null; }
          var /** @type {?} */ key, /** @type {?} */ margins = {
              'margin-left': null,
              'margin-right': null,
              'margin-top': null,
              'margin-bottom': null
          };
          switch (this._layout) {
              case 'column':
              case 'column-reverse':
                  key = 'margin-bottom';
                  break;
              case 'row':
              case 'row-reverse':
              default:
                  key = 'margin-right';
                  break;
          }
          margins[key] = value;
          return margins;
      };
      LayoutGapDirective.decorators = [
          { type: Directive, args: [{
                      selector: "\n  [fxLayoutGap],\n  [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl],\n  [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl],\n  [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]\n"
                  },] },
      ];
      /**
       * @nocollapse
       */
      LayoutGapDirective.ctorParameters = function () { return [
          { type: MediaMonitor, },
          { type: ElementRef, },
          { type: Renderer2, },
          { type: LayoutDirective, decorators: [{ type: Optional }, { type: Self },] },
          { type: NgZone, },
      ]; };
      LayoutGapDirective.propDecorators = {
          'gap': [{ type: Input, args: ['fxLayoutGap',] },],
          'gapXs': [{ type: Input, args: ['fxLayoutGap.xs',] },],
          'gapSm': [{ type: Input, args: ['fxLayoutGap.sm',] },],
          'gapMd': [{ type: Input, args: ['fxLayoutGap.md',] },],
          'gapLg': [{ type: Input, args: ['fxLayoutGap.lg',] },],
          'gapXl': [{ type: Input, args: ['fxLayoutGap.xl',] },],
          'gapGtXs': [{ type: Input, args: ['fxLayoutGap.gt-xs',] },],
          'gapGtSm': [{ type: Input, args: ['fxLayoutGap.gt-sm',] },],
          'gapGtMd': [{ type: Input, args: ['fxLayoutGap.gt-md',] },],
          'gapGtLg': [{ type: Input, args: ['fxLayoutGap.gt-lg',] },],
          'gapLtSm': [{ type: Input, args: ['fxLayoutGap.lt-sm',] },],
          'gapLtMd': [{ type: Input, args: ['fxLayoutGap.lt-md',] },],
          'gapLtLg': [{ type: Input, args: ['fxLayoutGap.lt-lg',] },],
          'gapLtXl': [{ type: Input, args: ['fxLayoutGap.lt-xl',] },],
      };
      return LayoutGapDirective;
  }(BaseFxDirective));
  
  /**
   * @deprecated
   * This functionality is now part of the `fxLayout` API
   *
   * 'layout-wrap' flexbox styling directive
   * Defines wrapping of child elements in layout container
   * Optional values: reverse, wrap-reverse, none, nowrap, wrap (default)]
   *
   *
   * @see https://css-tricks.com/almanac/properties/f/flex-wrap/
   */
  var LayoutWrapDirective = (function (_super) {
      __extends(LayoutWrapDirective, _super);
      /**
       * @param {?} monitor
       * @param {?} elRef
       * @param {?} renderer
       * @param {?} container
       */
      function LayoutWrapDirective(monitor, elRef, renderer, container) {
          var _this = _super.call(this, monitor, elRef, renderer) || this;
          _this._layout = 'row'; // default flex-direction
          if (container) {
              _this._layoutWatcher = container.layout$.subscribe(_this._onLayoutChange.bind(_this));
          }
          return _this;
      }
      Object.defineProperty(LayoutWrapDirective.prototype, "wrap", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('wrap', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(LayoutWrapDirective.prototype, "wrapXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('wrapXs', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(LayoutWrapDirective.prototype, "wrapSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('wrapSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutWrapDirective.prototype, "wrapMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('wrapMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutWrapDirective.prototype, "wrapLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('wrapLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutWrapDirective.prototype, "wrapXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('wrapXl', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutWrapDirective.prototype, "wrapGtXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('wrapGtXs', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutWrapDirective.prototype, "wrapGtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('wrapGtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutWrapDirective.prototype, "wrapGtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('wrapGtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutWrapDirective.prototype, "wrapGtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('wrapGtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutWrapDirective.prototype, "wrapLtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('wrapLtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutWrapDirective.prototype, "wrapLtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('wrapLtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutWrapDirective.prototype, "wrapLtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('wrapLtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(LayoutWrapDirective.prototype, "wrapLtXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('wrapLtXl', val); },
          enumerable: true,
          configurable: true
      });
      
      /**
       * @param {?} changes
       * @return {?}
       */
      LayoutWrapDirective.prototype.ngOnChanges = function (changes) {
          if (changes['wrap'] != null || this._mqActivation) {
              this._updateWithValue();
          }
      };
      /**
       * After the initial onChanges, build an mqActivation object that bridges
       * mql change events to onMediaQueryChange handlers
       * @return {?}
       */
      LayoutWrapDirective.prototype.ngOnInit = function () {
          var _this = this;
          _super.prototype.ngOnInit.call(this);
          this._listenForMediaQueryChanges('wrap', 'wrap', function (changes) {
              _this._updateWithValue(changes.value);
          });
          this._updateWithValue();
      };
      /**
       * @return {?}
       */
      LayoutWrapDirective.prototype.ngOnDestroy = function () {
          _super.prototype.ngOnDestroy.call(this);
          if (this._layoutWatcher) {
              this._layoutWatcher.unsubscribe();
          }
      };
      /**
       * Cache the parent container 'flex-direction' and update the 'flex' styles
       * @param {?} direction
       * @return {?}
       */
      LayoutWrapDirective.prototype._onLayoutChange = function (direction) {
          var _this = this;
          this._layout = (direction || '').toLowerCase().replace('-reverse', '');
          if (!LAYOUT_VALUES.find(function (x) { return x === _this._layout; })) {
              this._layout = 'row';
          }
          this._updateWithValue();
      };
      /**
       * @param {?=} value
       * @return {?}
       */
      LayoutWrapDirective.prototype._updateWithValue = function (value) {
          value = value || this._queryInput('wrap');
          if (this._mqActivation) {
              value = this._mqActivation.activatedInput;
          }
          value = validateWrapValue(value || 'wrap');
          this._applyStyleToElement(this._buildCSS(value));
      };
      /**
       * Build the CSS that should be assigned to the element instance
       * @param {?} value
       * @return {?}
       */
      LayoutWrapDirective.prototype._buildCSS = function (value) {
          return {
              'display': 'flex',
              'flex-wrap': value,
              'flex-direction': this.flowDirection
          };
      };
      Object.defineProperty(LayoutWrapDirective.prototype, "flowDirection", {
          /**
           * @return {?}
           */
          get: function () {
              var _this = this;
              var /** @type {?} */ computeFlowDirection = function () { return _this._getFlowDirection(_this.nativeElement); };
              return this._layoutWatcher ? this._layout : computeFlowDirection();
          },
          enumerable: true,
          configurable: true
      });
      LayoutWrapDirective.decorators = [
          { type: Directive, args: [{ selector: "\n  [fxLayoutWrap], [fxLayoutWrap.xs], [fxLayoutWrap.sm], [fxLayoutWrap.lg], [fxLayoutWrap.xl],\n  [fxLayoutWrap.gt-xs], [fxLayoutWrap.gt-sm], [fxLayoutWrap.gt-md], [fxLayoutWrap.gt-lg],\n  [fxLayoutWrap.lt-xs], [fxLayoutWrap.lt-sm], [fxLayoutWrap.lt-md], [fxLayoutWrap.lt-lg]\n" },] },
      ];
      /**
       * @nocollapse
       */
      LayoutWrapDirective.ctorParameters = function () { return [
          { type: MediaMonitor, },
          { type: ElementRef, },
          { type: Renderer2, },
          { type: LayoutDirective, decorators: [{ type: Optional }, { type: Self },] },
      ]; };
      LayoutWrapDirective.propDecorators = {
          'wrap': [{ type: Input, args: ['fxLayoutWrap',] },],
          'wrapXs': [{ type: Input, args: ['fxLayoutWrap.xs',] },],
          'wrapSm': [{ type: Input, args: ['fxLayoutWrap.sm',] },],
          'wrapMd': [{ type: Input, args: ['fxLayoutWrap.md',] },],
          'wrapLg': [{ type: Input, args: ['fxLayoutWrap.lg',] },],
          'wrapXl': [{ type: Input, args: ['fxLayoutWrap.xl',] },],
          'wrapGtXs': [{ type: Input, args: ['fxLayoutWrap.gt-xs',] },],
          'wrapGtSm': [{ type: Input, args: ['fxLayoutWrap.gt-sm',] },],
          'wrapGtMd': [{ type: Input, args: ['fxLayoutWrap.gt-md',] },],
          'wrapGtLg': [{ type: Input, args: ['fxLayoutWrap.gt-lg',] },],
          'wrapLtSm': [{ type: Input, args: ['fxLayoutWrap.lt-sm',] },],
          'wrapLtMd': [{ type: Input, args: ['fxLayoutWrap.lt-md',] },],
          'wrapLtLg': [{ type: Input, args: ['fxLayoutWrap.lt-lg',] },],
          'wrapLtXl': [{ type: Input, args: ['fxLayoutWrap.lt-xl',] },],
      };
      return LayoutWrapDirective;
  }(BaseFxDirective));
  
  /**
   * The flex API permits 3 or 1 parts of the value:
   *    - `flex-grow flex-shrink flex-basis`, or
   *    - `flex-basis`
   * @param {?} basis
   * @param {?=} grow
   * @param {?=} shrink
   * @return {?}
   */
  function validateBasis(basis, grow, shrink) {
      if (grow === void 0) { grow = '1'; }
      if (shrink === void 0) { shrink = '1'; }
      var /** @type {?} */ parts = [grow, shrink, basis];
      var /** @type {?} */ j = basis.indexOf('calc');
      if (j > 0) {
          parts[2] = _validateCalcValue(basis.substring(j).trim());
          var /** @type {?} */ matches = basis.substr(0, j).trim().split(' ');
          if (matches.length == 2) {
              parts[0] = matches[0];
              parts[1] = matches[1];
          }
      }
      else if (j == 0) {
          parts[2] = _validateCalcValue(basis.trim());
      }
      else {
          var /** @type {?} */ matches = basis.split(' ');
          parts = (matches.length === 3) ? matches : [
              grow, shrink, basis
          ];
      }
      return parts;
  }
  /**
   * Calc expressions require whitespace before & after any expression operators
   * This is a simple, crude whitespace padding solution.
   *   - '3 3 calc(15em + 20px)'
   *   - calc(100% / 7 * 2)
   *   - 'calc(15em + 20px)'
   *   - 'calc(15em+20px)'
   *   - '37px'
   *   = '43%'
   * @param {?} calc
   * @return {?}
   */
  function _validateCalcValue(calc) {
      return calc.replace(/[\s]/g, '').replace(/[\/\*\+\-]/g, ' $& ');
  }
  
  /**
   * Directive to control the size of a flex item using flex-basis, flex-grow, and flex-shrink.
   * Corresponds to the css `flex` shorthand property.
   *
   * @see https://css-tricks.com/snippets/css/a-guide-to-flexbox/
   */
  var FlexDirective = (function (_super) {
      __extends(FlexDirective, _super);
      /**
       * @param {?} monitor
       * @param {?} elRef
       * @param {?} renderer
       * @param {?} _container
       * @param {?} _wrap
       */
      function FlexDirective(monitor, elRef, renderer, _container, _wrap) {
          var _this = _super.call(this, monitor, elRef, renderer) || this;
          _this._container = _container;
          _this._wrap = _wrap;
          _this._cacheInput('flex', '');
          _this._cacheInput('shrink', 1);
          _this._cacheInput('grow', 1);
          if (_container) {
              // If this flex item is inside of a flex container marked with
              // Subscribe to layout immediate parent direction changes
              _this._layoutWatcher = _container.layout$.subscribe(function (direction) {
                  // `direction` === null if parent container does not have a `fxLayout`
                  _this._onLayoutChange(direction);
              });
          }
          return _this;
      }
      Object.defineProperty(FlexDirective.prototype, "shrink", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('shrink', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexDirective.prototype, "grow", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('grow', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexDirective.prototype, "flex", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('flex', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexDirective.prototype, "flexXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('flexXs', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexDirective.prototype, "flexSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('flexSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexDirective.prototype, "flexMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('flexMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexDirective.prototype, "flexLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('flexLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexDirective.prototype, "flexXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('flexXl', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexDirective.prototype, "flexGtXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('flexGtXs', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexDirective.prototype, "flexGtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('flexGtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexDirective.prototype, "flexGtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('flexGtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexDirective.prototype, "flexGtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('flexGtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexDirective.prototype, "flexLtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('flexLtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexDirective.prototype, "flexLtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('flexLtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexDirective.prototype, "flexLtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('flexLtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexDirective.prototype, "flexLtXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('flexLtXl', val); },
          enumerable: true,
          configurable: true
      });
      
      /**
       * For \@Input changes on the current mq activation property, see onMediaQueryChanges()
       * @param {?} changes
       * @return {?}
       */
      FlexDirective.prototype.ngOnChanges = function (changes) {
          if (changes['flex'] != null || this._mqActivation) {
              this._updateStyle();
          }
      };
      /**
       * After the initial onChanges, build an mqActivation object that bridges
       * mql change events to onMediaQueryChange handlers
       * @return {?}
       */
      FlexDirective.prototype.ngOnInit = function () {
          var _this = this;
          _super.prototype.ngOnInit.call(this);
          this._listenForMediaQueryChanges('flex', '', function (changes) {
              _this._updateStyle(changes.value);
          });
          this._updateStyle();
      };
      /**
       * @return {?}
       */
      FlexDirective.prototype.ngOnDestroy = function () {
          _super.prototype.ngOnDestroy.call(this);
          if (this._layoutWatcher) {
              this._layoutWatcher.unsubscribe();
          }
      };
      /**
       * Caches the parent container's 'flex-direction' and updates the element's style.
       * Used as a handler for layout change events from the parent flex container.
       * @param {?=} direction
       * @return {?}
       */
      FlexDirective.prototype._onLayoutChange = function (direction) {
          this._layout = direction || this._layout || 'row';
          this._updateStyle();
      };
      /**
       * @param {?=} value
       * @return {?}
       */
      FlexDirective.prototype._updateStyle = function (value) {
          var /** @type {?} */ flexBasis = value || this._queryInput('flex') || '';
          if (this._mqActivation) {
              flexBasis = this._mqActivation.activatedInput;
          }
          var /** @type {?} */ basis = String(flexBasis).replace(';', '');
          var /** @type {?} */ parts = validateBasis(basis, this._queryInput('grow'), this._queryInput('shrink'));
          this._applyStyleToElement(this._validateValue.apply(this, parts));
      };
      /**
       * Validate the value to be one of the acceptable value options
       * Use default fallback of 'row'
       * @param {?} grow
       * @param {?} shrink
       * @param {?} basis
       * @return {?}
       */
      FlexDirective.prototype._validateValue = function (grow, shrink, basis) {
          // The flex-direction of this element's flex container. Defaults to 'row'.
          var /** @type {?} */ layout = this._getFlowDirection(this.parentElement, true);
          var /** @type {?} */ direction = (layout.indexOf('column') > -1) ? 'column' : 'row';
          var /** @type {?} */ css, /** @type {?} */ isValue;
          grow = (grow == '0') ? 0 : grow;
          shrink = (shrink == '0') ? 0 : shrink;
          // flex-basis allows you to specify the initial/starting main-axis size of the element,
          // before anything else is computed. It can either be a percentage or an absolute value.
          // It is, however, not the breaking point for flex-grow/shrink properties
          //
          // flex-grow can be seen as this:
          //   0: Do not stretch. Either size to element's content width, or obey 'flex-basis'.
          //   1: (Default value). Stretch; will be the same size to all other flex items on
          //       the same row since they have a default value of 1.
          //   ≥2 (integer n): Stretch. Will be n times the size of other elements
          //      with 'flex-grow: 1' on the same row.
          // Use `null` to clear existing styles.
          var /** @type {?} */ clearStyles = {
              'max-width': null,
              'max-height': null,
              'min-width': null,
              'min-height': null
          };
          switch (basis || '') {
              case '':
                  css = extendObject(clearStyles, { 'flex': grow + " " + shrink + " 0.000000001px" });
                  break;
              case 'initial': // default
              case 'nogrow':
                  grow = 0;
                  css = extendObject(clearStyles, { 'flex': '0 1 auto' });
                  break;
              case 'grow':
                  css = extendObject(clearStyles, { 'flex': '1 1 100%' });
                  break;
              case 'noshrink':
                  shrink = 0;
                  css = extendObject(clearStyles, { 'flex': '1 0 auto' });
                  break;
              case 'auto':
                  css = extendObject(clearStyles, { 'flex': grow + " " + shrink + " auto" });
                  break;
              case 'none':
                  grow = 0;
                  shrink = 0;
                  css = extendObject(clearStyles, { 'flex': '0 0 auto' });
                  break;
              default:
                  var /** @type {?} */ hasCalc = String(basis).indexOf('calc') > -1;
                  var /** @type {?} */ isPercent = String(basis).indexOf('%') > -1 && !hasCalc;
                  isValue = hasCalc ||
                      String(basis).indexOf('px') > -1 ||
                      String(basis).indexOf('em') > -1 ||
                      String(basis).indexOf('vw') > -1 ||
                      String(basis).indexOf('vh') > -1;
                  // Defaults to percentage sizing unless `px` is explicitly set
                  if (!isValue && !isPercent && !isNaN(/** @type {?} */ (basis))) {
                      basis = basis + '%';
                  }
                  if (basis === '0px') {
                      basis = '0%';
                  }
                  // Set max-width = basis if using layout-wrap
                  // tslint:disable-next-line:max-line-length
                  // @see https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items
                  css = extendObject(clearStyles, {
                      'flex-grow': "" + grow,
                      'flex-shrink': "" + shrink,
                      'flex-basis': (isValue || this._wrap) ? "" + basis : '100%'
                  });
                  break;
          }
          var /** @type {?} */ max = isFlowHorizontal(direction) ? 'max-width' : 'max-height';
          var /** @type {?} */ min = isFlowHorizontal(direction) ? 'min-width' : 'min-height';
          var /** @type {?} */ usingCalc = (String(basis).indexOf('calc') > -1) || (basis == 'auto');
          var /** @type {?} */ isPx = String(basis).indexOf('px') > -1 || usingCalc;
          // make box inflexible when shrink and grow are both zero
          // should not set a min when the grow is zero
          // should not set a max when the shrink is zero
          var /** @type {?} */ isFixed = !grow && !shrink;
          css[min] = (basis == '0%') ? 0 : isFixed || (isPx && grow) ? basis : null;
          css[max] = (basis == '0%') ? 0 : isFixed || (!usingCalc && shrink) ? basis : null;
          return extendObject(css, { 'box-sizing': 'border-box' });
      };
      FlexDirective.decorators = [
          { type: Directive, args: [{ selector: "\n  [fxFlex],\n  [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl],\n  [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl],\n  [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg],\n"
                  },] },
      ];
      /**
       * @nocollapse
       */
      FlexDirective.ctorParameters = function () { return [
          { type: MediaMonitor, },
          { type: ElementRef, },
          { type: Renderer2, },
          { type: LayoutDirective, decorators: [{ type: Optional }, { type: SkipSelf },] },
          { type: LayoutWrapDirective, decorators: [{ type: Optional }, { type: SkipSelf },] },
      ]; };
      FlexDirective.propDecorators = {
          'shrink': [{ type: Input, args: ['fxShrink',] },],
          'grow': [{ type: Input, args: ['fxGrow',] },],
          'flex': [{ type: Input, args: ['fxFlex',] },],
          'flexXs': [{ type: Input, args: ['fxFlex.xs',] },],
          'flexSm': [{ type: Input, args: ['fxFlex.sm',] },],
          'flexMd': [{ type: Input, args: ['fxFlex.md',] },],
          'flexLg': [{ type: Input, args: ['fxFlex.lg',] },],
          'flexXl': [{ type: Input, args: ['fxFlex.xl',] },],
          'flexGtXs': [{ type: Input, args: ['fxFlex.gt-xs',] },],
          'flexGtSm': [{ type: Input, args: ['fxFlex.gt-sm',] },],
          'flexGtMd': [{ type: Input, args: ['fxFlex.gt-md',] },],
          'flexGtLg': [{ type: Input, args: ['fxFlex.gt-lg',] },],
          'flexLtSm': [{ type: Input, args: ['fxFlex.lt-sm',] },],
          'flexLtMd': [{ type: Input, args: ['fxFlex.lt-md',] },],
          'flexLtLg': [{ type: Input, args: ['fxFlex.lt-lg',] },],
          'flexLtXl': [{ type: Input, args: ['fxFlex.lt-xl',] },],
      };
      return FlexDirective;
  }(BaseFxDirective));
  
  /**
   * 'flex-align' flexbox styling directive
   * Allows element-specific overrides for cross-axis alignments in a layout container
   * @see https://css-tricks.com/almanac/properties/a/align-self/
   */
  var FlexAlignDirective = (function (_super) {
      __extends(FlexAlignDirective, _super);
      /**
       * @param {?} monitor
       * @param {?} elRef
       * @param {?} renderer
       */
      function FlexAlignDirective(monitor, elRef, renderer) {
          return _super.call(this, monitor, elRef, renderer) || this;
      }
      Object.defineProperty(FlexAlignDirective.prototype, "align", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('align', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexAlignDirective.prototype, "alignXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignXs', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexAlignDirective.prototype, "alignSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexAlignDirective.prototype, "alignMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexAlignDirective.prototype, "alignLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexAlignDirective.prototype, "alignXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignXl', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexAlignDirective.prototype, "alignLtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignLtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexAlignDirective.prototype, "alignLtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignLtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexAlignDirective.prototype, "alignLtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignLtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexAlignDirective.prototype, "alignLtXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignLtXl', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexAlignDirective.prototype, "alignGtXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignGtXs', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexAlignDirective.prototype, "alignGtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignGtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexAlignDirective.prototype, "alignGtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignGtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexAlignDirective.prototype, "alignGtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('alignGtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      /**
       * For \@Input changes on the current mq activation property, see onMediaQueryChanges()
       * @param {?} changes
       * @return {?}
       */
      FlexAlignDirective.prototype.ngOnChanges = function (changes) {
          if (changes['align'] != null || this._mqActivation) {
              this._updateWithValue();
          }
      };
      /**
       * After the initial onChanges, build an mqActivation object that bridges
       * mql change events to onMediaQueryChange handlers
       * @return {?}
       */
      FlexAlignDirective.prototype.ngOnInit = function () {
          var _this = this;
          _super.prototype.ngOnInit.call(this);
          this._listenForMediaQueryChanges('align', 'stretch', function (changes) {
              _this._updateWithValue(changes.value);
          });
          this._updateWithValue();
      };
      /**
       * @param {?=} value
       * @return {?}
       */
      FlexAlignDirective.prototype._updateWithValue = function (value) {
          value = value || this._queryInput('align') || 'stretch';
          if (this._mqActivation) {
              value = this._mqActivation.activatedInput;
          }
          this._applyStyleToElement(this._buildCSS(value));
      };
      /**
       * @param {?} align
       * @return {?}
       */
      FlexAlignDirective.prototype._buildCSS = function (align) {
          var /** @type {?} */ css = {};
          // Cross-axis
          switch (align) {
              case 'start':
                  css['align-self'] = 'flex-start';
                  break;
              case 'end':
                  css['align-self'] = 'flex-end';
                  break;
              default:
                  css['align-self'] = align;
                  break;
          }
          return css;
      };
      FlexAlignDirective.decorators = [
          { type: Directive, args: [{
                      selector: "\n  [fxFlexAlign],\n  [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md], [fxFlexAlign.lg], [fxFlexAlign.xl],\n  [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md], [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl],\n  [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm], [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]\n"
                  },] },
      ];
      /**
       * @nocollapse
       */
      FlexAlignDirective.ctorParameters = function () { return [
          { type: MediaMonitor, },
          { type: ElementRef, },
          { type: Renderer2, },
      ]; };
      FlexAlignDirective.propDecorators = {
          'align': [{ type: Input, args: ['fxFlexAlign',] },],
          'alignXs': [{ type: Input, args: ['fxFlexAlign.xs',] },],
          'alignSm': [{ type: Input, args: ['fxFlexAlign.sm',] },],
          'alignMd': [{ type: Input, args: ['fxFlexAlign.md',] },],
          'alignLg': [{ type: Input, args: ['fxFlexAlign.lg',] },],
          'alignXl': [{ type: Input, args: ['fxFlexAlign.xl',] },],
          'alignLtSm': [{ type: Input, args: ['fxFlexAlign.lt-sm',] },],
          'alignLtMd': [{ type: Input, args: ['fxFlexAlign.lt-md',] },],
          'alignLtLg': [{ type: Input, args: ['fxFlexAlign.lt-lg',] },],
          'alignLtXl': [{ type: Input, args: ['fxFlexAlign.lt-xl',] },],
          'alignGtXs': [{ type: Input, args: ['fxFlexAlign.gt-xs',] },],
          'alignGtSm': [{ type: Input, args: ['fxFlexAlign.gt-sm',] },],
          'alignGtMd': [{ type: Input, args: ['fxFlexAlign.gt-md',] },],
          'alignGtLg': [{ type: Input, args: ['fxFlexAlign.gt-lg',] },],
      };
      return FlexAlignDirective;
  }(BaseFxDirective));
  
  var FLEX_FILL_CSS = {
      'margin': 0,
      'width': '100%',
      'height': '100%',
      'min-width': '100%',
      'min-height': '100%'
  };
  /**
   * 'fxFill' flexbox styling directive
   *  Maximizes width and height of element in a layout container
   *
   *  NOTE: fxFill is NOT responsive API!!
   */
  var FlexFillDirective = (function (_super) {
      __extends(FlexFillDirective, _super);
      /**
       * @param {?} monitor
       * @param {?} elRef
       * @param {?} renderer
       */
      function FlexFillDirective(monitor, elRef, renderer) {
          var _this = _super.call(this, monitor, elRef, renderer) || this;
          _this.elRef = elRef;
          _this.renderer = renderer;
          _this._applyStyleToElement(FLEX_FILL_CSS);
          return _this;
      }
      FlexFillDirective.decorators = [
          { type: Directive, args: [{ selector: "\n  [fxFill],\n  [fxFlexFill]\n" },] },
      ];
      /**
       * @nocollapse
       */
      FlexFillDirective.ctorParameters = function () { return [
          { type: MediaMonitor, },
          { type: ElementRef, },
          { type: Renderer2, },
      ]; };
      return FlexFillDirective;
  }(BaseFxDirective));
  
  /**
   * 'flex-offset' flexbox styling directive
   * Configures the 'margin-left' of the element in a layout container
   */
  var FlexOffsetDirective = (function (_super) {
      __extends(FlexOffsetDirective, _super);
      /**
       * @param {?} monitor
       * @param {?} elRef
       * @param {?} renderer
       * @param {?} _container
       */
      function FlexOffsetDirective(monitor, elRef, renderer, _container) {
          var _this = _super.call(this, monitor, elRef, renderer) || this;
          _this._container = _container;
          /**
           * The flex-direction of this element's host container. Defaults to 'row'.
           */
          _this._layout = 'row';
          _this.watchParentFlow();
          return _this;
      }
      Object.defineProperty(FlexOffsetDirective.prototype, "offset", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('offset', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(FlexOffsetDirective.prototype, "offsetXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('offsetXs', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(FlexOffsetDirective.prototype, "offsetSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('offsetSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOffsetDirective.prototype, "offsetMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('offsetMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOffsetDirective.prototype, "offsetLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('offsetLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOffsetDirective.prototype, "offsetXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('offsetXl', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOffsetDirective.prototype, "offsetLtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('offsetLtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOffsetDirective.prototype, "offsetLtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('offsetLtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOffsetDirective.prototype, "offsetLtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('offsetLtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOffsetDirective.prototype, "offsetLtXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('offsetLtXl', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOffsetDirective.prototype, "offsetGtXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('offsetGtXs', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOffsetDirective.prototype, "offsetGtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('offsetGtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOffsetDirective.prototype, "offsetGtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('offsetGtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOffsetDirective.prototype, "offsetGtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('offsetGtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      /**
       * For \@Input changes on the current mq activation property, see onMediaQueryChanges()
       * @param {?} changes
       * @return {?}
       */
      FlexOffsetDirective.prototype.ngOnChanges = function (changes) {
          if (changes['offset'] != null || this._mqActivation) {
              this._updateWithValue();
          }
      };
      /**
       * Cleanup
       * @return {?}
       */
      FlexOffsetDirective.prototype.ngOnDestroy = function () {
          _super.prototype.ngOnDestroy.call(this);
          if (this._layoutWatcher) {
              this._layoutWatcher.unsubscribe();
          }
      };
      /**
       * After the initial onChanges, build an mqActivation object that bridges
       * mql change events to onMediaQueryChange handlers
       * @return {?}
       */
      FlexOffsetDirective.prototype.ngOnInit = function () {
          var _this = this;
          _super.prototype.ngOnInit.call(this);
          this._listenForMediaQueryChanges('offset', 0, function (changes) {
              _this._updateWithValue(changes.value);
          });
      };
      /**
       * If parent flow-direction changes, then update the margin property
       * used to offset
       * @return {?}
       */
      FlexOffsetDirective.prototype.watchParentFlow = function () {
          var _this = this;
          if (this._container) {
              // Subscribe to layout immediate parent direction changes (if any)
              this._layoutWatcher = this._container.layout$.subscribe(function (direction) {
                  // `direction` === null if parent container does not have a `fxLayout`
                  _this._onLayoutChange(direction);
              });
          }
      };
      /**
       * Caches the parent container's 'flex-direction' and updates the element's style.
       * Used as a handler for layout change events from the parent flex container.
       * @param {?=} direction
       * @return {?}
       */
      FlexOffsetDirective.prototype._onLayoutChange = function (direction) {
          this._layout = direction || this._layout || 'row';
          this._updateWithValue();
      };
      /**
       * Using the current fxFlexOffset value, update the inline CSS
       * NOTE: this will assign `margin-left` if the parent flex-direction == 'row',
       *       otherwise `margin-top` is used for the offset.
       * @param {?=} value
       * @return {?}
       */
      FlexOffsetDirective.prototype._updateWithValue = function (value) {
          value = value || this._queryInput('offset') || 0;
          if (this._mqActivation) {
              value = this._mqActivation.activatedInput;
          }
          this._applyStyleToElement(this._buildCSS(value));
      };
      /**
       * @param {?} offset
       * @return {?}
       */
      FlexOffsetDirective.prototype._buildCSS = function (offset) {
          var /** @type {?} */ isPercent = String(offset).indexOf('%') > -1;
          var /** @type {?} */ isPx = String(offset).indexOf('px') > -1;
          if (!isPx && !isPercent && !isNaN(offset)) {
              offset = offset + '%';
          }
          // The flex-direction of this element's flex container. Defaults to 'row'.
          var /** @type {?} */ layout = this._getFlowDirection(this.parentElement, true);
          return isFlowHorizontal(layout) ? { 'margin-left': "" + offset } : { 'margin-top': "" + offset };
      };
      FlexOffsetDirective.decorators = [
          { type: Directive, args: [{ selector: "\n  [fxFlexOffset],\n  [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md], [fxFlexOffset.lg], [fxFlexOffset.xl],\n  [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md], [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl],\n  [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm], [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]\n" },] },
      ];
      /**
       * @nocollapse
       */
      FlexOffsetDirective.ctorParameters = function () { return [
          { type: MediaMonitor, },
          { type: ElementRef, },
          { type: Renderer2, },
          { type: LayoutDirective, decorators: [{ type: Optional }, { type: SkipSelf },] },
      ]; };
      FlexOffsetDirective.propDecorators = {
          'offset': [{ type: Input, args: ['fxFlexOffset',] },],
          'offsetXs': [{ type: Input, args: ['fxFlexOffset.xs',] },],
          'offsetSm': [{ type: Input, args: ['fxFlexOffset.sm',] },],
          'offsetMd': [{ type: Input, args: ['fxFlexOffset.md',] },],
          'offsetLg': [{ type: Input, args: ['fxFlexOffset.lg',] },],
          'offsetXl': [{ type: Input, args: ['fxFlexOffset.xl',] },],
          'offsetLtSm': [{ type: Input, args: ['fxFlexOffset.lt-sm',] },],
          'offsetLtMd': [{ type: Input, args: ['fxFlexOffset.lt-md',] },],
          'offsetLtLg': [{ type: Input, args: ['fxFlexOffset.lt-lg',] },],
          'offsetLtXl': [{ type: Input, args: ['fxFlexOffset.lt-xl',] },],
          'offsetGtXs': [{ type: Input, args: ['fxFlexOffset.gt-xs',] },],
          'offsetGtSm': [{ type: Input, args: ['fxFlexOffset.gt-sm',] },],
          'offsetGtMd': [{ type: Input, args: ['fxFlexOffset.gt-md',] },],
          'offsetGtLg': [{ type: Input, args: ['fxFlexOffset.gt-lg',] },],
      };
      return FlexOffsetDirective;
  }(BaseFxDirective));
  
  /**
   * 'flex-order' flexbox styling directive
   * Configures the positional ordering of the element in a sorted layout container
   * @see https://css-tricks.com/almanac/properties/o/order/
   */
  var FlexOrderDirective = (function (_super) {
      __extends(FlexOrderDirective, _super);
      /**
       * @param {?} monitor
       * @param {?} elRef
       * @param {?} renderer
       */
      function FlexOrderDirective(monitor, elRef, renderer) {
          return _super.call(this, monitor, elRef, renderer) || this;
      }
      Object.defineProperty(FlexOrderDirective.prototype, "order", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('order', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(FlexOrderDirective.prototype, "orderXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('orderXs', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(FlexOrderDirective.prototype, "orderSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('orderSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOrderDirective.prototype, "orderMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('orderMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOrderDirective.prototype, "orderLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('orderLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOrderDirective.prototype, "orderXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('orderXl', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOrderDirective.prototype, "orderGtXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('orderGtXs', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOrderDirective.prototype, "orderGtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('orderGtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOrderDirective.prototype, "orderGtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('orderGtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOrderDirective.prototype, "orderGtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('orderGtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOrderDirective.prototype, "orderLtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('orderLtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOrderDirective.prototype, "orderLtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('orderLtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOrderDirective.prototype, "orderLtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('orderLtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(FlexOrderDirective.prototype, "orderLtXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('orderLtXl', val); },
          enumerable: true,
          configurable: true
      });
      
      /**
       * For \@Input changes on the current mq activation property, see onMediaQueryChanges()
       * @param {?} changes
       * @return {?}
       */
      FlexOrderDirective.prototype.ngOnChanges = function (changes) {
          if (changes['order'] != null || this._mqActivation) {
              this._updateWithValue();
          }
      };
      /**
       * After the initial onChanges, build an mqActivation object that bridges
       * mql change events to onMediaQueryChange handlers
       * @return {?}
       */
      FlexOrderDirective.prototype.ngOnInit = function () {
          var _this = this;
          _super.prototype.ngOnInit.call(this);
          this._listenForMediaQueryChanges('order', '0', function (changes) {
              _this._updateWithValue(changes.value);
          });
          this._updateWithValue();
      };
      /**
       * @param {?=} value
       * @return {?}
       */
      FlexOrderDirective.prototype._updateWithValue = function (value) {
          value = value || this._queryInput('order') || '0';
          if (this._mqActivation) {
              value = this._mqActivation.activatedInput;
          }
          this._applyStyleToElement(this._buildCSS(value));
      };
      /**
       * @param {?} value
       * @return {?}
       */
      FlexOrderDirective.prototype._buildCSS = function (value) {
          value = parseInt(value, 10);
          return { order: isNaN(value) ? 0 : value };
      };
      FlexOrderDirective.decorators = [
          { type: Directive, args: [{ selector: "\n  [fxFlexOrder],\n  [fxFlexOrder.xs], [fxFlexOrder.sm], [fxFlexOrder.md], [fxFlexOrder.lg], [fxFlexOrder.xl],\n  [fxFlexOrder.lt-sm], [fxFlexOrder.lt-md], [fxFlexOrder.lt-lg], [fxFlexOrder.lt-xl],\n  [fxFlexOrder.gt-xs], [fxFlexOrder.gt-sm], [fxFlexOrder.gt-md], [fxFlexOrder.gt-lg]\n" },] },
      ];
      /**
       * @nocollapse
       */
      FlexOrderDirective.ctorParameters = function () { return [
          { type: MediaMonitor, },
          { type: ElementRef, },
          { type: Renderer2, },
      ]; };
      FlexOrderDirective.propDecorators = {
          'order': [{ type: Input, args: ['fxFlexOrder',] },],
          'orderXs': [{ type: Input, args: ['fxFlexOrder.xs',] },],
          'orderSm': [{ type: Input, args: ['fxFlexOrder.sm',] },],
          'orderMd': [{ type: Input, args: ['fxFlexOrder.md',] },],
          'orderLg': [{ type: Input, args: ['fxFlexOrder.lg',] },],
          'orderXl': [{ type: Input, args: ['fxFlexOrder.xl',] },],
          'orderGtXs': [{ type: Input, args: ['fxFlexOrder.gt-xs',] },],
          'orderGtSm': [{ type: Input, args: ['fxFlexOrder.gt-sm',] },],
          'orderGtMd': [{ type: Input, args: ['fxFlexOrder.gt-md',] },],
          'orderGtLg': [{ type: Input, args: ['fxFlexOrder.gt-lg',] },],
          'orderLtSm': [{ type: Input, args: ['fxFlexOrder.lt-sm',] },],
          'orderLtMd': [{ type: Input, args: ['fxFlexOrder.lt-md',] },],
          'orderLtLg': [{ type: Input, args: ['fxFlexOrder.lt-lg',] },],
          'orderLtXl': [{ type: Input, args: ['fxFlexOrder.lt-xl',] },],
      };
      return FlexOrderDirective;
  }(BaseFxDirective));
  
  /**
   * Adapts the 'deprecated' Angular Renderer v1 API to use the new Renderer2 instance
   * This is required for older versions of NgStyle and NgClass that require
   * the v1 API (but should use the v2 instances)
   */
  var RendererAdapter = (function () {
      /**
       * @param {?} _renderer
       */
      function RendererAdapter(_renderer) {
          this._renderer = _renderer;
      }
      /**
       * @param {?} el
       * @param {?} className
       * @param {?} isAdd
       * @return {?}
       */
      RendererAdapter.prototype.setElementClass = function (el, className, isAdd) {
          if (isAdd) {
              this._renderer.addClass(el, className);
          }
          else {
              this._renderer.removeClass(el, className);
          }
      };
      /**
       * @param {?} el
       * @param {?} styleName
       * @param {?} styleValue
       * @return {?}
       */
      RendererAdapter.prototype.setElementStyle = function (el, styleName, styleValue) {
          if (styleValue) {
              this._renderer.setStyle(el, styleName, styleValue);
          }
          else {
              this._renderer.removeStyle(el, styleName);
          }
      };
      /**
       * @param {?} el
       * @param {?} name
       * @return {?}
       */
      RendererAdapter.prototype.addClass = function (el, name) {
          this._renderer.addClass(el, name);
      };
      /**
       * @param {?} el
       * @param {?} name
       * @return {?}
       */
      RendererAdapter.prototype.removeClass = function (el, name) {
          this._renderer.removeClass(el, name);
      };
      /**
       * @param {?} el
       * @param {?} style
       * @param {?} value
       * @param {?=} flags
       * @return {?}
       */
      RendererAdapter.prototype.setStyle = function (el, style, value, flags) {
          this._renderer.setStyle(el, style, value, flags);
      };
      /**
       * @param {?} el
       * @param {?} style
       * @param {?=} flags
       * @return {?}
       */
      RendererAdapter.prototype.removeStyle = function (el, style, flags) {
          this._renderer.removeStyle(el, style, flags);
      };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.animate = function () { throw _notImplemented('animate'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.attachViewAfter = function () { throw _notImplemented('attachViewAfter'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.detachView = function () { throw _notImplemented('detachView'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.destroyView = function () { throw _notImplemented('destroyView'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.createElement = function () { throw _notImplemented('createElement'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.createViewRoot = function () { throw _notImplemented('createViewRoot'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.createTemplateAnchor = function () { throw _notImplemented('createTemplateAnchor'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.createText = function () { throw _notImplemented('createText'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.invokeElementMethod = function () { throw _notImplemented('invokeElementMethod'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.projectNodes = function () { throw _notImplemented('projectNodes'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.selectRootElement = function () { throw _notImplemented('selectRootElement'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.setBindingDebugInfo = function () { throw _notImplemented('setBindingDebugInfo'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.setElementProperty = function () { throw _notImplemented('setElementProperty'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.setElementAttribute = function () { throw _notImplemented('setElementAttribute'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.setText = function () { throw _notImplemented('setText'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.listen = function () { throw _notImplemented('listen'); };
      /**
       * @return {?}
       */
      RendererAdapter.prototype.listenGlobal = function () { throw _notImplemented('listenGlobal'); };
      return RendererAdapter;
  }());
  /**
   * @param {?} methodName
   * @return {?}
   */
  function _notImplemented(methodName) {
      return new Error("The method RendererAdapter::" + methodName + "() has not been implemented");
  }
  
  /**
   * Directive to add responsive support for ngClass.
   * This maintains the core functionality of 'ngClass' and adds responsive API
   *
   */
  var ClassDirective = (function (_super) {
      __extends(ClassDirective, _super);
      /**
       * @param {?} monitor
       * @param {?} _iterableDiffers
       * @param {?} _keyValueDiffers
       * @param {?} _ngEl
       * @param {?} _renderer
       * @param {?} _ngClassInstance
       */
      function ClassDirective(monitor, _iterableDiffers, _keyValueDiffers, _ngEl, _renderer, _ngClassInstance) {
          var _this = _super.call(this, monitor, _ngEl, _renderer) || this;
          _this.monitor = monitor;
          _this._iterableDiffers = _iterableDiffers;
          _this._keyValueDiffers = _keyValueDiffers;
          _this._ngEl = _ngEl;
          _this._renderer = _renderer;
          _this._ngClassInstance = _ngClassInstance;
          _this._configureAdapters();
          return _this;
      }
      Object.defineProperty(ClassDirective.prototype, "ngClassBase", {
          /**
           * Intercept ngClass assignments so we cache the default classes
           * which are merged with activated styles or used as fallbacks.
           * Note: Base ngClass values are applied during ngDoCheck()
           * @param {?} val
           * @return {?}
           */
          set: function (val) {
              var /** @type {?} */ key = 'ngClass';
              this._base.cacheInput(key, val, true);
              this._ngClassInstance.ngClass = this._base.queryInput(key);
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ClassDirective.prototype, "klazz", {
          /**
           * Capture class assignments so we cache the default classes
           * which are merged with activated styles and used as fallbacks.
           * @param {?} val
           * @return {?}
           */
          set: function (val) {
              var /** @type {?} */ key = 'class';
              this._base.cacheInput(key, val);
              this._ngClassInstance.klass = val;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ClassDirective.prototype, "ngClassXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngClassXs', val, true); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ClassDirective.prototype, "ngClassSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngClassSm', val, true); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ClassDirective.prototype, "ngClassMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngClassMd', val, true); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ClassDirective.prototype, "ngClassLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngClassLg', val, true); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ClassDirective.prototype, "ngClassXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngClassXl', val, true); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ClassDirective.prototype, "ngClassLtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngClassLtSm', val, true); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ClassDirective.prototype, "ngClassLtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngClassLtMd', val, true); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ClassDirective.prototype, "ngClassLtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngClassLtLg', val, true); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ClassDirective.prototype, "ngClassLtXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngClassLtXl', val, true); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ClassDirective.prototype, "ngClassGtXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngClassGtXs', val, true); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ClassDirective.prototype, "ngClassGtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngClassGtSm', val, true); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ClassDirective.prototype, "ngClassGtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngClassGtMd', val, true); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ClassDirective.prototype, "ngClassGtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngClassGtLg', val, true); },
          enumerable: true,
          configurable: true
      });
      /**
       * For \@Input changes on the current mq activation property
       * @param {?} changes
       * @return {?}
       */
      ClassDirective.prototype.ngOnChanges = function (changes) {
          if (this._base.activeKey in changes) {
              this._ngClassInstance.ngClass = this._base.mqActivation.activatedInput || '';
          }
      };
      /**
       * @return {?}
       */
      ClassDirective.prototype.ngOnInit = function () {
          this._configureMQListener();
      };
      /**
       * For ChangeDetectionStrategy.onPush and ngOnChanges() updates
       * @return {?}
       */
      ClassDirective.prototype.ngDoCheck = function () {
          this._ngClassInstance.ngDoCheck();
      };
      /**
       * @return {?}
       */
      ClassDirective.prototype.ngOnDestroy = function () {
          this._base.ngOnDestroy();
          this._ngClassInstance = null;
      };
      /**
       * Configure adapters (that delegate to an internal ngClass instance) if responsive
       * keys have been defined.
       * @return {?}
       */
      ClassDirective.prototype._configureAdapters = function () {
          this._base = new BaseFxDirectiveAdapter('ngClass', this.monitor, this._ngEl, this._renderer);
          if (!this._ngClassInstance) {
              // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been defined on
              // the same host element; since the responsive variations may be defined...
              var /** @type {?} */ adapter = new RendererAdapter(this._renderer);
              this._ngClassInstance = new NgClass(this._iterableDiffers, this._keyValueDiffers, this._ngEl, /** @type {?} */ (adapter));
          }
      };
      /**
       * Build an mqActivation object that bridges mql change events to onMediaQueryChange handlers
       * NOTE: We delegate subsequent activity to the NgClass logic
       *       Identify the activated input value and update the ngClass iterables...
       *       Use ngDoCheck() to actually apply the values to the element
       * @param {?=} baseKey
       * @return {?}
       */
      ClassDirective.prototype._configureMQListener = function (baseKey) {
          var _this = this;
          if (baseKey === void 0) { baseKey = 'ngClass'; }
          var /** @type {?} */ fallbackValue = this._base.queryInput(baseKey);
          this._base.listenForMediaQueryChanges(baseKey, fallbackValue, function (changes) {
              _this._ngClassInstance.ngClass = changes.value || '';
              _this._ngClassInstance.ngDoCheck();
          });
      };
      ClassDirective.decorators = [
          { type: Directive, args: [{
                      selector: "\n    [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],\n    [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],\n    [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]\n  "
                  },] },
      ];
      /**
       * @nocollapse
       */
      ClassDirective.ctorParameters = function () { return [
          { type: MediaMonitor, },
          { type: IterableDiffers, },
          { type: KeyValueDiffers, },
          { type: ElementRef, },
          { type: Renderer2, },
          { type: NgClass, decorators: [{ type: Optional }, { type: Self },] },
      ]; };
      ClassDirective.propDecorators = {
          'ngClassBase': [{ type: Input, args: ['ngClass',] },],
          'klazz': [{ type: Input, args: ['class',] },],
          'ngClassXs': [{ type: Input, args: ['ngClass.xs',] },],
          'ngClassSm': [{ type: Input, args: ['ngClass.sm',] },],
          'ngClassMd': [{ type: Input, args: ['ngClass.md',] },],
          'ngClassLg': [{ type: Input, args: ['ngClass.lg',] },],
          'ngClassXl': [{ type: Input, args: ['ngClass.xl',] },],
          'ngClassLtSm': [{ type: Input, args: ['ngClass.lt-sm',] },],
          'ngClassLtMd': [{ type: Input, args: ['ngClass.lt-md',] },],
          'ngClassLtLg': [{ type: Input, args: ['ngClass.lt-lg',] },],
          'ngClassLtXl': [{ type: Input, args: ['ngClass.lt-xl',] },],
          'ngClassGtXs': [{ type: Input, args: ['ngClass.gt-xs',] },],
          'ngClassGtSm': [{ type: Input, args: ['ngClass.gt-sm',] },],
          'ngClassGtMd': [{ type: Input, args: ['ngClass.gt-md',] },],
          'ngClassGtLg': [{ type: Input, args: ['ngClass.gt-lg',] },],
      };
      return ClassDirective;
  }(BaseFxDirective));
  
  /**
   * NgStyle allowed inputs
   */
  var NgStyleKeyValue = (function () {
      /**
       * @param {?} key
       * @param {?} value
       * @param {?=} noQuotes
       */
      function NgStyleKeyValue(key, value, noQuotes) {
          if (noQuotes === void 0) { noQuotes = true; }
          this.key = key;
          this.value = value;
          this.key = noQuotes ? key.replace(/['"]/g, '').trim() : key.trim();
          this.value = noQuotes ? value.replace(/['"]/g, '').trim() : value.trim();
          this.value = this.value.replace(/;/, '');
      }
      return NgStyleKeyValue;
  }());
  /**
   * Transform Operators for \@angular/flex-layout NgStyle Directive
   */
  var ngStyleUtils = {
      getType: getType,
      buildRawList: buildRawList,
      buildMapFromList: buildMapFromList,
      buildMapFromSet: buildMapFromSet
  };
  /**
   * @param {?} target
   * @return {?}
   */
  function getType(target) {
      var /** @type {?} */ what = typeof target;
      if (what === 'object') {
          return (target.constructor === Array) ? 'array' :
              (target.constructor === Set) ? 'set' : 'object';
      }
      return what;
  }
  /**
   * Split string of key:value pairs into Array of k-v pairs
   * e.g.  'key:value; key:value; key:value;' -> ['key:value',...]
   * @param {?} source
   * @param {?=} delimiter
   * @return {?}
   */
  function buildRawList(source, delimiter) {
      if (delimiter === void 0) { delimiter = ';'; }
      return String(source)
          .trim()
          .split(delimiter)
          .map(function (val) { return val.trim(); })
          .filter(function (val) { return val !== ''; });
  }
  /**
   * Convert array of key:value strings to a iterable map object
   * @param {?} styles
   * @param {?=} sanitize
   * @return {?}
   */
  function buildMapFromList(styles, sanitize) {
      var /** @type {?} */ sanitizeValue = function (it) {
          if (sanitize) {
              it.value = sanitize(it.value);
          }
          return it;
      };
      return styles
          .map(stringToKeyValue)
          .filter(function (entry) { return !!entry; })
          .map(sanitizeValue)
          .reduce(keyValuesToMap, {});
  }
  /**
   * Convert Set<string> or raw Object to an iterable NgStyleMap
   * @param {?} source
   * @param {?=} sanitize
   * @return {?}
   */
  function buildMapFromSet(source, sanitize) {
      var /** @type {?} */ list = new Array();
      if (getType(source) == 'set') {
          source.forEach(function (entry) { return list.push(entry); });
      }
      else {
          Object.keys(source).forEach(function (key) {
              list.push(key + ":" + source[key]);
          });
      }
      return buildMapFromList(list, sanitize);
  }
  /**
   * Convert 'key:value' -> [key, value]
   * @param {?} it
   * @return {?}
   */
  function stringToKeyValue(it) {
      var _a = it.split(':'), key = _a[0], val = _a[1];
      return val ? new NgStyleKeyValue(key, val) : null;
  }
  /**
   * Convert [ [key,value] ] -> { key : value }
   * @param {?} map
   * @param {?} entry
   * @return {?}
   */
  function keyValuesToMap(map$$1, entry) {
      if (!!entry.key) {
          map$$1[entry.key] = entry.value;
      }
      return map$$1;
  }
  
  /**
   * Directive to add responsive support for ngStyle.
   *
   */
  var StyleDirective = (function (_super) {
      __extends(StyleDirective, _super);
      /**
       *  Constructor for the ngStyle subclass; which adds selectors and
       *  a MediaQuery Activation Adapter
       * @param {?} monitor
       * @param {?} _sanitizer
       * @param {?} _ngEl
       * @param {?} _renderer
       * @param {?} _differs
       * @param {?} _ngStyleInstance
       */
      function StyleDirective(monitor, _sanitizer, _ngEl, _renderer, _differs, _ngStyleInstance) {
          var _this = _super.call(this, monitor, _ngEl, _renderer) || this;
          _this.monitor = monitor;
          _this._sanitizer = _sanitizer;
          _this._ngEl = _ngEl;
          _this._renderer = _renderer;
          _this._differs = _differs;
          _this._ngStyleInstance = _ngStyleInstance;
          _this._configureAdapters();
          return _this;
      }
      Object.defineProperty(StyleDirective.prototype, "ngStyleBase", {
          /**
           * Intercept ngStyle assignments so we cache the default styles
           * which are merged with activated styles or used as fallbacks.
           * @param {?} val
           * @return {?}
           */
          set: function (val) {
              var /** @type {?} */ key = 'ngStyle';
              this._base.cacheInput(key, val, true); // convert val to hashmap
              this._ngStyleInstance.ngStyle = this._base.queryInput(key);
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(StyleDirective.prototype, "ngStyleXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngStyleXs', val, true); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(StyleDirective.prototype, "ngStyleSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngStyleSm', val, true); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(StyleDirective.prototype, "ngStyleMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngStyleMd', val, true); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(StyleDirective.prototype, "ngStyleLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngStyleLg', val, true); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(StyleDirective.prototype, "ngStyleXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngStyleXl', val, true); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(StyleDirective.prototype, "ngStyleLtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngStyleLtSm', val, true); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(StyleDirective.prototype, "ngStyleLtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngStyleLtMd', val, true); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(StyleDirective.prototype, "ngStyleLtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngStyleLtLg', val, true); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(StyleDirective.prototype, "ngStyleLtXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngStyleLtXl', val, true); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(StyleDirective.prototype, "ngStyleGtXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngStyleGtXs', val, true); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(StyleDirective.prototype, "ngStyleGtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngStyleGtSm', val, true); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(StyleDirective.prototype, "ngStyleGtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngStyleGtMd', val, true); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(StyleDirective.prototype, "ngStyleGtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._base.cacheInput('ngStyleGtLg', val, true); },
          enumerable: true,
          configurable: true
      });
      
      /**
       * For \@Input changes on the current mq activation property
       * @param {?} changes
       * @return {?}
       */
      StyleDirective.prototype.ngOnChanges = function (changes) {
          if (this._base.activeKey in changes) {
              this._ngStyleInstance.ngStyle = this._base.mqActivation.activatedInput || '';
          }
      };
      /**
       * @return {?}
       */
      StyleDirective.prototype.ngOnInit = function () {
          this._configureMQListener();
      };
      /**
       * For ChangeDetectionStrategy.onPush and ngOnChanges() updates
       * @return {?}
       */
      StyleDirective.prototype.ngDoCheck = function () {
          this._ngStyleInstance.ngDoCheck();
      };
      /**
       * @return {?}
       */
      StyleDirective.prototype.ngOnDestroy = function () {
          this._base.ngOnDestroy();
          this._ngStyleInstance = null;
      };
      /**
       * Configure adapters (that delegate to an internal ngClass instance) if responsive
       * keys have been defined.
       * @return {?}
       */
      StyleDirective.prototype._configureAdapters = function () {
          this._base = new BaseFxDirectiveAdapter('ngStyle', this.monitor, this._ngEl, this._renderer);
          if (!this._ngStyleInstance) {
              // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been
              // defined on the same host element; since the responsive variations may be defined...
              var /** @type {?} */ adapter = new RendererAdapter(this._renderer);
              this._ngStyleInstance = new NgStyle(this._differs, this._ngEl, /** @type {?} */ (adapter));
          }
          this._buildCacheInterceptor();
          this._fallbackToStyle();
      };
      /**
       * Build an mqActivation object that bridges
       * mql change events to onMediaQueryChange handlers
       * @param {?=} baseKey
       * @return {?}
       */
      StyleDirective.prototype._configureMQListener = function (baseKey) {
          var _this = this;
          if (baseKey === void 0) { baseKey = 'ngStyle'; }
          var /** @type {?} */ fallbackValue = this._base.queryInput(baseKey);
          this._base.listenForMediaQueryChanges(baseKey, fallbackValue, function (changes) {
              _this._ngStyleInstance.ngStyle = changes.value || '';
              _this._ngStyleInstance.ngDoCheck();
          });
      };
      /**
       * Build intercept to convert raw strings to ngStyleMap
       * @return {?}
       */
      StyleDirective.prototype._buildCacheInterceptor = function () {
          var _this = this;
          var /** @type {?} */ cacheInput = this._base.cacheInput.bind(this._base);
          this._base.cacheInput = function (key, source, cacheRaw, merge) {
              if (cacheRaw === void 0) { cacheRaw = false; }
              if (merge === void 0) { merge = true; }
              var /** @type {?} */ styles = _this._buildStyleMap(source);
              if (merge) {
                  styles = extendObject({}, _this._base.inputMap['ngStyle'], styles);
              }
              cacheInput(key, styles, cacheRaw);
          };
      };
      /**
       * Convert raw strings to ngStyleMap; which is required by ngStyle
       * NOTE: Raw string key-value pairs MUST be delimited by `;`
       *       Comma-delimiters are not supported due to complexities of
       *       possible style values such as `rgba(x,x,x,x)` and others
       * @param {?} styles
       * @return {?}
       */
      StyleDirective.prototype._buildStyleMap = function (styles) {
          var _this = this;
          var /** @type {?} */ sanitizer = function (val) {
              // Always safe-guard (aka sanitize) style property values
              return _this._sanitizer.sanitize(SecurityContext.STYLE, val);
          };
          if (styles) {
              switch (ngStyleUtils.getType(styles)) {
                  case 'string': return ngStyleUtils.buildMapFromList(ngStyleUtils.buildRawList(styles), sanitizer);
                  case 'array': return ngStyleUtils.buildMapFromList(/** @type {?} */ (styles), sanitizer);
                  case 'set': return ngStyleUtils.buildMapFromSet(styles, sanitizer);
                  default: return ngStyleUtils.buildMapFromSet(styles, sanitizer);
              }
          }
          return styles;
      };
      /**
       * Initial lookup of raw 'class' value (if any)
       * @return {?}
       */
      StyleDirective.prototype._fallbackToStyle = function () {
          if (!this._base.queryInput('ngStyle')) {
              this.ngStyleBase = this._getAttributeValue('style') || '';
          }
      };
      StyleDirective.decorators = [
          { type: Directive, args: [{
                      selector: "\n    [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],\n    [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],\n    [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]\n  "
                  },] },
      ];
      /**
       * @nocollapse
       */
      StyleDirective.ctorParameters = function () { return [
          { type: MediaMonitor, },
          { type: DomSanitizer, },
          { type: ElementRef, },
          { type: Renderer2, },
          { type: KeyValueDiffers, },
          { type: NgStyle, decorators: [{ type: Optional }, { type: Self },] },
      ]; };
      StyleDirective.propDecorators = {
          'ngStyleBase': [{ type: Input, args: ['ngStyle',] },],
          'ngStyleXs': [{ type: Input, args: ['ngStyle.xs',] },],
          'ngStyleSm': [{ type: Input, args: ['ngStyle.sm',] },],
          'ngStyleMd': [{ type: Input, args: ['ngStyle.md',] },],
          'ngStyleLg': [{ type: Input, args: ['ngStyle.lg',] },],
          'ngStyleXl': [{ type: Input, args: ['ngStyle.xl',] },],
          'ngStyleLtSm': [{ type: Input, args: ['ngStyle.lt-sm',] },],
          'ngStyleLtMd': [{ type: Input, args: ['ngStyle.lt-md',] },],
          'ngStyleLtLg': [{ type: Input, args: ['ngStyle.lt-lg',] },],
          'ngStyleLtXl': [{ type: Input, args: ['ngStyle.lt-xl',] },],
          'ngStyleGtXs': [{ type: Input, args: ['ngStyle.gt-xs',] },],
          'ngStyleGtSm': [{ type: Input, args: ['ngStyle.gt-sm',] },],
          'ngStyleGtMd': [{ type: Input, args: ['ngStyle.gt-md',] },],
          'ngStyleGtLg': [{ type: Input, args: ['ngStyle.gt-lg',] },],
      };
      return StyleDirective;
  }(BaseFxDirective));
  
  var FALSY = ['false', false, 0];
  /**
   * For fxHide selectors, we invert the 'value'
   * and assign to the equivalent fxShow selector cache
   *  - When 'hide' === '' === true, do NOT show the element
   *  - When 'hide' === false or 0... we WILL show the element
   * @param {?} hide
   * @return {?}
   */
  function negativeOf(hide) {
      return (hide === '') ? false :
          ((hide === 'false') || (hide === 0)) ? true : !hide;
  }
  /**
   * 'show' Layout API directive
   *
   */
  var ShowHideDirective = (function (_super) {
      __extends(ShowHideDirective, _super);
      /**
       *
       * @param {?} monitor
       * @param {?} _layout
       * @param {?} elRef
       * @param {?} renderer
       */
      function ShowHideDirective(monitor, _layout, elRef, renderer) {
          var _this = _super.call(this, monitor, elRef, renderer) || this;
          _this._layout = _layout;
          _this.elRef = elRef;
          _this.renderer = renderer;
          if (_layout) {
              /**
               * The Layout can set the display:flex (and incorrectly affect the Hide/Show directives.
               * Whenever Layout [on the same element] resets its CSS, then update the Hide/Show CSS
               */
              _this._layoutWatcher = _layout.layout$.subscribe(function () { return _this._updateWithValue(); });
          }
          return _this;
      }
      Object.defineProperty(ShowHideDirective.prototype, "show", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('show', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ShowHideDirective.prototype, "showXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showXs', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ShowHideDirective.prototype, "showSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "showMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "showLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "showXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showXl', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "showLtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showLtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "showLtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showLtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "showLtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showLtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "showLtXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showLtXl', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "showGtXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showGtXs', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "showGtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showGtSm', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "showGtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showGtMd', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "showGtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showGtLg', val); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "hide", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('show', negativeOf(val)); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ShowHideDirective.prototype, "hideXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showXs', negativeOf(val)); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ShowHideDirective.prototype, "hideSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showSm', negativeOf(val)); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "hideMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showMd', negativeOf(val)); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "hideLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showLg', negativeOf(val)); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "hideXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showXl', negativeOf(val)); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "hideLtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showLtSm', negativeOf(val)); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "hideLtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showLtMd', negativeOf(val)); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "hideLtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showLtLg', negativeOf(val)); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "hideLtXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showLtXl', negativeOf(val)); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "hideGtXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showGtXs', negativeOf(val)); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "hideGtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showGtSm', negativeOf(val)); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "hideGtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showGtMd', negativeOf(val)); },
          enumerable: true,
          configurable: true
      });
      
      Object.defineProperty(ShowHideDirective.prototype, "hideGtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('showGtLg', negativeOf(val)); },
          enumerable: true,
          configurable: true
      });
      
      /**
       * Override accessor to the current HTMLElement's `display` style
       * Note: Show/Hide will not change the display to 'flex' but will set it to 'block'
       * unless it was already explicitly specified inline or in a CSS stylesheet.
       * @return {?}
       */
      ShowHideDirective.prototype._getDisplayStyle = function () {
          return this._layout ? 'flex' : _super.prototype._getDisplayStyle.call(this);
      };
      /**
       * On changes to any \@Input properties...
       * Default to use the non-responsive Input value ('fxShow')
       * Then conditionally override with the mq-activated Input's current value
       * @param {?} changes
       * @return {?}
       */
      ShowHideDirective.prototype.ngOnChanges = function (changes) {
          if (this.hasInitialized && (changes['show'] != null || this._mqActivation)) {
              this._updateWithValue();
          }
      };
      /**
       * After the initial onChanges, build an mqActivation object that bridges
       * mql change events to onMediaQueryChange handlers
       * @return {?}
       */
      ShowHideDirective.prototype.ngOnInit = function () {
          var _this = this;
          _super.prototype.ngOnInit.call(this);
          var /** @type {?} */ value = this._getDefaultVal('show', true);
          // Build _mqActivation controller
          this._listenForMediaQueryChanges('show', value, function (changes) {
              _this._updateWithValue(changes.value);
          });
          this._updateWithValue();
      };
      /**
       * @return {?}
       */
      ShowHideDirective.prototype.ngOnDestroy = function () {
          _super.prototype.ngOnDestroy.call(this);
          if (this._layoutWatcher) {
              this._layoutWatcher.unsubscribe();
          }
      };
      /**
       * Validate the visibility value and then update the host's inline display style
       * @param {?=} value
       * @return {?}
       */
      ShowHideDirective.prototype._updateWithValue = function (value) {
          value = value || this._getDefaultVal('show', true);
          if (this._mqActivation) {
              value = this._mqActivation.activatedInput;
          }
          var /** @type {?} */ shouldShow = this._validateTruthy(value);
          this._applyStyleToElement(this._buildCSS(shouldShow));
      };
      /**
       * Build the CSS that should be assigned to the element instance
       * @param {?} show
       * @return {?}
       */
      ShowHideDirective.prototype._buildCSS = function (show) {
          return { 'display': show ? this._display : 'none' };
      };
      /**
       * Validate the to be not FALSY
       * @param {?} show
       * @return {?}
       */
      ShowHideDirective.prototype._validateTruthy = function (show) {
          return (FALSY.indexOf(show) == -1);
      };
      ShowHideDirective.decorators = [
          { type: Directive, args: [{
                      selector: "\n  [fxShow],\n  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],\n  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],\n  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],\n  [fxHide],\n  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],\n  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],\n  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]\n"
                  },] },
      ];
      /**
       * @nocollapse
       */
      ShowHideDirective.ctorParameters = function () { return [
          { type: MediaMonitor, },
          { type: LayoutDirective, decorators: [{ type: Optional }, { type: Self },] },
          { type: ElementRef, },
          { type: Renderer2, },
      ]; };
      ShowHideDirective.propDecorators = {
          'show': [{ type: Input, args: ['fxShow',] },],
          'showXs': [{ type: Input, args: ['fxShow.xs',] },],
          'showSm': [{ type: Input, args: ['fxShow.sm',] },],
          'showMd': [{ type: Input, args: ['fxShow.md',] },],
          'showLg': [{ type: Input, args: ['fxShow.lg',] },],
          'showXl': [{ type: Input, args: ['fxShow.xl',] },],
          'showLtSm': [{ type: Input, args: ['fxShow.lt-sm',] },],
          'showLtMd': [{ type: Input, args: ['fxShow.lt-md',] },],
          'showLtLg': [{ type: Input, args: ['fxShow.lt-lg',] },],
          'showLtXl': [{ type: Input, args: ['fxShow.lt-xl',] },],
          'showGtXs': [{ type: Input, args: ['fxShow.gt-xs',] },],
          'showGtSm': [{ type: Input, args: ['fxShow.gt-sm',] },],
          'showGtMd': [{ type: Input, args: ['fxShow.gt-md',] },],
          'showGtLg': [{ type: Input, args: ['fxShow.gt-lg',] },],
          'hide': [{ type: Input, args: ['fxHide',] },],
          'hideXs': [{ type: Input, args: ['fxHide.xs',] },],
          'hideSm': [{ type: Input, args: ['fxHide.sm',] },],
          'hideMd': [{ type: Input, args: ['fxHide.md',] },],
          'hideLg': [{ type: Input, args: ['fxHide.lg',] },],
          'hideXl': [{ type: Input, args: ['fxHide.xl',] },],
          'hideLtSm': [{ type: Input, args: ['fxHide.lt-sm',] },],
          'hideLtMd': [{ type: Input, args: ['fxHide.lt-md',] },],
          'hideLtLg': [{ type: Input, args: ['fxHide.lt-lg',] },],
          'hideLtXl': [{ type: Input, args: ['fxHide.lt-xl',] },],
          'hideGtXs': [{ type: Input, args: ['fxHide.gt-xs',] },],
          'hideGtSm': [{ type: Input, args: ['fxHide.gt-sm',] },],
          'hideGtMd': [{ type: Input, args: ['fxHide.gt-md',] },],
          'hideGtLg': [{ type: Input, args: ['fxHide.gt-lg',] },],
      };
      return ShowHideDirective;
  }(BaseFxDirective));
  
  /**
   * This directive provides a responsive API for the HTML <img> 'src' attribute
   * and will update the img.src property upon each responsive activation.
   *
   * e.g.
   *      <img src="defaultScene.jpg" src.xs="mobileScene.jpg"></img>
   *
   * @see https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-src/
   */
  var ImgSrcDirective = (function (_super) {
      __extends(ImgSrcDirective, _super);
      /**
       * @param {?} elRef
       * @param {?} renderer
       * @param {?} monitor
       */
      function ImgSrcDirective(elRef, renderer, monitor) {
          var _this = _super.call(this, monitor, elRef, renderer) || this;
          _this._cacheInput('src', elRef.nativeElement.getAttribute('src') || '');
          return _this;
      }
      Object.defineProperty(ImgSrcDirective.prototype, "srcBase", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this.cacheDefaultSrc(val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ImgSrcDirective.prototype, "srcXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('srcXs', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ImgSrcDirective.prototype, "srcSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('srcSm', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ImgSrcDirective.prototype, "srcMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('srcMd', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ImgSrcDirective.prototype, "srcLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('srcLg', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ImgSrcDirective.prototype, "srcXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('srcXl', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ImgSrcDirective.prototype, "srcLtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('srcLtSm', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ImgSrcDirective.prototype, "srcLtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('srcLtMd', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ImgSrcDirective.prototype, "srcLtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('srcLtLg', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ImgSrcDirective.prototype, "srcLtXl", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('srcLtXl', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ImgSrcDirective.prototype, "srcGtXs", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('srcGtXs', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ImgSrcDirective.prototype, "srcGtSm", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('srcGtSm', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ImgSrcDirective.prototype, "srcGtMd", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('srcGtMd', val); },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ImgSrcDirective.prototype, "srcGtLg", {
          /**
           * @param {?} val
           * @return {?}
           */
          set: function (val) { this._cacheInput('srcGtLg', val); },
          enumerable: true,
          configurable: true
      });
      /**
       * Listen for responsive changes to update the img.src attribute
       * @return {?}
       */
      ImgSrcDirective.prototype.ngOnInit = function () {
          var _this = this;
          _super.prototype.ngOnInit.call(this);
          if (this.hasResponsiveKeys) {
              // Listen for responsive changes
              this._listenForMediaQueryChanges('src', this.defaultSrc, function () {
                  _this._updateSrcFor();
              });
          }
          this._updateSrcFor();
      };
      /**
       * Update the 'src' property of the host <img> element
       * @return {?}
       */
      ImgSrcDirective.prototype.ngOnChanges = function () {
          if (this.hasInitialized) {
              this._updateSrcFor();
          }
      };
      /**
       * Use the [responsively] activated input value to update
       * the host img src attribute or assign a default `img.src=''`
       * if the src has not been defined.
       *
       * Do nothing to standard `<img src="">` usages, only when responsive
       * keys are present do we actually call `setAttribute()`
       * @return {?}
       */
      ImgSrcDirective.prototype._updateSrcFor = function () {
          if (this.hasResponsiveKeys) {
              var /** @type {?} */ url = this.activatedValue || this.defaultSrc;
              this._renderer.setAttribute(this.nativeElement, 'src', String(url));
          }
      };
      /**
       * Cache initial value of 'src', this will be used as fallback when breakpoint
       * activations change.
       * NOTE: The default 'src' property is not bound using \@Input(), so perform
       * a post-ngOnInit() lookup of the default src value (if any).
       * @param {?=} value
       * @return {?}
       */
      ImgSrcDirective.prototype.cacheDefaultSrc = function (value) {
          this._cacheInput('src', value || '');
      };
      Object.defineProperty(ImgSrcDirective.prototype, "defaultSrc", {
          /**
           * Empty values are maintained, undefined values are exposed as ''
           * @return {?}
           */
          get: function () {
              return this._queryInput('src') || '';
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ImgSrcDirective.prototype, "hasResponsiveKeys", {
          /**
           * Does the <img> have 1 or more src.<xxx> responsive inputs
           * defined... these will be mapped to activated breakpoints.
           * @return {?}
           */
          get: function () {
              return Object.keys(this._inputMap).length > 1;
          },
          enumerable: true,
          configurable: true
      });
      ImgSrcDirective.decorators = [
          { type: Directive, args: [{
                      selector: "\n  img[src.xs],    img[src.sm],    img[src.md],    img[src.lg],   img[src.xl],\n  img[src.lt-sm], img[src.lt-md], img[src.lt-lg], img[src.lt-xl],\n  img[src.gt-xs], img[src.gt-sm], img[src.gt-md], img[src.gt-lg]\n"
                  },] },
      ];
      /**
       * @nocollapse
       */
      ImgSrcDirective.ctorParameters = function () { return [
          { type: ElementRef, },
          { type: Renderer2, },
          { type: MediaMonitor, },
      ]; };
      ImgSrcDirective.propDecorators = {
          'srcBase': [{ type: Input, args: ['src',] },],
          'srcXs': [{ type: Input, args: ['src.xs',] },],
          'srcSm': [{ type: Input, args: ['src.sm',] },],
          'srcMd': [{ type: Input, args: ['src.md',] },],
          'srcLg': [{ type: Input, args: ['src.lg',] },],
          'srcXl': [{ type: Input, args: ['src.xl',] },],
          'srcLtSm': [{ type: Input, args: ['src.lt-sm',] },],
          'srcLtMd': [{ type: Input, args: ['src.lt-md',] },],
          'srcLtLg': [{ type: Input, args: ['src.lt-lg',] },],
          'srcLtXl': [{ type: Input, args: ['src.lt-xl',] },],
          'srcGtXs': [{ type: Input, args: ['src.gt-xs',] },],
          'srcGtSm': [{ type: Input, args: ['src.gt-sm',] },],
          'srcGtMd': [{ type: Input, args: ['src.gt-md',] },],
          'srcGtLg': [{ type: Input, args: ['src.gt-lg',] },],
      };
      return ImgSrcDirective;
  }(BaseFxDirective));
  
  var RESPONSIVE_ALIASES = [
      'xs', 'gt-xs', 'sm', 'gt-sm', 'md', 'gt-md', 'lg', 'gt-lg', 'xl'
  ];
  var DEFAULT_BREAKPOINTS = [
      {
          alias: 'xs',
          mediaQuery: '(min-width: 0px) and (max-width: 599px)'
      },
      {
          alias: 'gt-xs',
          overlapping: true,
          mediaQuery: '(min-width: 600px)'
      },
      {
          alias: 'lt-sm',
          overlapping: true,
          mediaQuery: '(max-width: 599px)'
      },
      {
          alias: 'sm',
          mediaQuery: '(min-width: 600px) and (max-width: 959px)'
      },
      {
          alias: 'gt-sm',
          overlapping: true,
          mediaQuery: '(min-width: 960px)'
      },
      {
          alias: 'lt-md',
          overlapping: true,
          mediaQuery: '(max-width: 959px)'
      },
      {
          alias: 'md',
          mediaQuery: '(min-width: 960px) and (max-width: 1279px)'
      },
      {
          alias: 'gt-md',
          overlapping: true,
          mediaQuery: '(min-width: 1280px)'
      },
      {
          alias: 'lt-lg',
          overlapping: true,
          mediaQuery: '(max-width: 1279px)'
      },
      {
          alias: 'lg',
          mediaQuery: '(min-width: 1280px) and (max-width: 1919px)'
      },
      {
          alias: 'gt-lg',
          overlapping: true,
          mediaQuery: '(min-width: 1920px)'
      },
      {
          alias: 'lt-xl',
          overlapping: true,
          mediaQuery: '(max-width: 1920px)'
      },
      {
          alias: 'xl',
          mediaQuery: '(min-width: 1920px) and (max-width: 5000px)'
      }
  ];
  
  /* tslint:disable */
  var HANDSET_PORTRAIT = '(orientations: portrait) and (max-width: 599px)';
  var HANDSET_LANDSCAPE = '(orientations: landscape) and (max-width: 959px)';
  var TABLET_LANDSCAPE = '(orientations: landscape) and (min-width: 960px) and (max-width: 1279px)';
  var TABLET_PORTRAIT = '(orientations: portrait) and (min-width: 600px) and (max-width: 839px)';
  var WEB_PORTRAIT = '(orientations: portrait) and (min-width: 840px)';
  var WEB_LANDSCAPE = '(orientations: landscape) and (min-width: 1280px)';
  var ScreenTypes = {
      'HANDSET': HANDSET_PORTRAIT + ", " + HANDSET_LANDSCAPE,
      'TABLET': TABLET_PORTRAIT + " , " + TABLET_LANDSCAPE,
      'WEB': WEB_PORTRAIT + ", " + WEB_LANDSCAPE + " ",
      'HANDSET_PORTRAIT': "" + HANDSET_PORTRAIT,
      'TABLET_PORTRAIT': TABLET_PORTRAIT + " ",
      'WEB_PORTRAIT': "" + WEB_PORTRAIT,
      'HANDSET_LANDSCAPE': HANDSET_LANDSCAPE + "]",
      'TABLET_LANDSCAPE': "" + TABLET_LANDSCAPE,
      'WEB_LANDSCAPE': "" + WEB_LANDSCAPE
  };
  /**
   * Extended Breakpoints for handset/tablets with landscape or portrait orientations
   */
  var ORIENTATION_BREAKPOINTS = [
      { 'alias': 'handset', 'mediaQuery': ScreenTypes.HANDSET },
      { 'alias': 'handset.landscape', 'mediaQuery': ScreenTypes.HANDSET_LANDSCAPE },
      { 'alias': 'handset.portrait', 'mediaQuery': ScreenTypes.HANDSET_PORTRAIT },
      { 'alias': 'tablet', 'mediaQuery': ScreenTypes.TABLET },
      { 'alias': 'tablet.landscape', 'mediaQuery': ScreenTypes.TABLET },
      { 'alias': 'tablet.portrait', 'mediaQuery': ScreenTypes.TABLET_PORTRAIT },
      { 'alias': 'web', 'mediaQuery': ScreenTypes.WEB, overlapping: true },
      { 'alias': 'web.landscape', 'mediaQuery': ScreenTypes.WEB_LANDSCAPE, overlapping: true },
      { 'alias': 'web.portrait', 'mediaQuery': ScreenTypes.WEB_PORTRAIT, overlapping: true }
  ];
  
  /**
   * Base class for MediaService and pseudo-token for
   * @abstract
   */
  var ObservableMedia = (function () {
      function ObservableMedia() {
      }
      /**
       * @abstract
       * @param {?} query
       * @return {?}
       */
      ObservableMedia.prototype.isActive = function (query) { };
      /**
       * @abstract
       * @return {?}
       */
      ObservableMedia.prototype.asObservable = function () { };
      /**
       * @abstract
       * @param {?=} next
       * @param {?=} error
       * @param {?=} complete
       * @return {?}
       */
      ObservableMedia.prototype.subscribe = function (next, error, complete) { };
      return ObservableMedia;
  }());
  /**
   * Class internalizes a MatchMedia service and exposes an Subscribable and Observable interface.
   * This an Observable with that exposes a feature to subscribe to mediaQuery
   * changes and a validator method (`isActive(<alias>)`) to test if a mediaQuery (or alias) is
   * currently active.
   *
   * !! Only mediaChange activations (not de-activations) are announced by the ObservableMedia
   *
   * This class uses the BreakPoint Registry to inject alias information into the raw MediaChange
   * notification. For custom mediaQuery notifications, alias information will not be injected and
   * those fields will be ''.
   *
   * !! This is not an actual Observable. It is a wrapper of an Observable used to publish additional
   * methods like `isActive(<alias>). To access the Observable and use RxJS operators, use
   * `.asObservable()` with syntax like media.asObservable().map(....).
   *
   *  \@usage
   *
   *  // RxJS
   *  import 'rxjs/add/operator/filter';
   *  import { ObservableMedia } from '\@angular/flex-layout';
   *
   *  \@Component({ ... })
   *  export class AppComponent {
   *    status : string = '';
   *
   *    constructor(  media:ObservableMedia ) {
   *      let onChange = (change:MediaChange) => {
   *        this.status = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
   *      };
   *
   *      // Subscribe directly or access observable to use filter/map operators
   *      // e.g.
   *      //      media.subscribe(onChange);
   *
   *      media.asObservable()
   *        .filter((change:MediaChange) => true)   // silly noop filter
   *        .subscribe(onChange);
   *    }
   *  }
   */
  var MediaService = (function () {
      /**
       * @param {?} breakpoints
       * @param {?} mediaWatcher
       */
      function MediaService(breakpoints, mediaWatcher) {
          this.breakpoints = breakpoints;
          this.mediaWatcher = mediaWatcher;
          /**
           * Should we announce gt-<xxx> breakpoint activations ?
           */
          this.filterOverlaps = true;
          this._registerBreakPoints();
          this.observable$ = this._buildObservable();
      }
      /**
       * Test if specified query/alias is active.
       * @param {?} alias
       * @return {?}
       */
      MediaService.prototype.isActive = function (alias) {
          var /** @type {?} */ query = this._toMediaQuery(alias);
          return this.mediaWatcher.isActive(query);
      };
      /**
       * Proxy to the Observable subscribe method
       * @param {?=} next
       * @param {?=} error
       * @param {?=} complete
       * @return {?}
       */
      MediaService.prototype.subscribe = function (next, error, complete) {
          return this.observable$.subscribe(next, error, complete);
      };
      /**
       * Access to observable for use with operators like
       * .filter(), .map(), etc.
       * @return {?}
       */
      MediaService.prototype.asObservable = function () {
          return this.observable$;
      };
      /**
       * Register all the mediaQueries registered in the BreakPointRegistry
       * This is needed so subscribers can be auto-notified of all standard, registered
       * mediaQuery activations
       * @return {?}
       */
      MediaService.prototype._registerBreakPoints = function () {
          var /** @type {?} */ queries = this.breakpoints.sortedItems.map(function (bp) { return bp.mediaQuery; });
          this.mediaWatcher.registerQuery(queries);
      };
      /**
       * Prepare internal observable
       *
       * NOTE: the raw MediaChange events [from MatchMedia] do not
       *       contain important alias information; as such this info
       *       must be injected into the MediaChange
       * @return {?}
       */
      MediaService.prototype._buildObservable = function () {
          var _this = this;
          var /** @type {?} */ self = this;
          var /** @type {?} */ media$ = this.mediaWatcher.observe();
          var /** @type {?} */ activationsOnly = function (change) {
              return change.matches === true;
          };
          var /** @type {?} */ addAliasInformation = function (change) {
              return mergeAlias(change, _this._findByQuery(change.mediaQuery));
          };
          var /** @type {?} */ excludeOverlaps = function (change) {
              var /** @type {?} */ bp = _this.breakpoints.findByQuery(change.mediaQuery);
              return !bp ? true : !(self.filterOverlaps && bp.overlapping);
          };
          /**
           * Only pass/announce activations (not de-activations)
           * Inject associated (if any) alias information into the MediaChange event
           * Exclude mediaQuery activations for overlapping mQs. List bounded mQ ranges only
           */
          return media$.pipe(filter(activationsOnly), filter(excludeOverlaps), map(addAliasInformation));
      };
      /**
       * Breakpoint locator by alias
       * @param {?} alias
       * @return {?}
       */
      MediaService.prototype._findByAlias = function (alias) {
          return this.breakpoints.findByAlias(alias);
      };
      /**
       * Breakpoint locator by mediaQuery
       * @param {?} query
       * @return {?}
       */
      MediaService.prototype._findByQuery = function (query) {
          return this.breakpoints.findByQuery(query);
      };
      /**
       * Find associated breakpoint (if any)
       * @param {?} query
       * @return {?}
       */
      MediaService.prototype._toMediaQuery = function (query) {
          var /** @type {?} */ bp = this._findByAlias(query) || this._findByQuery(query);
          return bp ? bp.mediaQuery : query;
      };
      MediaService.decorators = [
          { type: Injectable },
      ];
      /**
       * @nocollapse
       */
      MediaService.ctorParameters = function () { return [
          { type: BreakPointRegistry, },
          { type: MatchMedia, },
      ]; };
      return MediaService;
  }());
  
  var ALIAS_DELIMITERS = /(\.|-|_)/g;
  /**
   * @param {?} part
   * @return {?}
   */
  function firstUpperCase(part) {
      var /** @type {?} */ first = part.length > 0 ? part.charAt(0) : '';
      var /** @type {?} */ remainder = (part.length > 1) ? part.slice(1) : '';
      return first.toUpperCase() + remainder;
  }
  /**
   * Converts snake-case to SnakeCase.
   * @param {?} name Text to UpperCamelCase
   * @return {?}
   */
  function camelCase(name) {
      return name
          .replace(ALIAS_DELIMITERS, '|')
          .split('|')
          .map(firstUpperCase)
          .join('');
  }
  /**
   * For each breakpoint, ensure that a Suffix is defined;
   * fallback to UpperCamelCase the unique Alias value
   * @param {?} list
   * @return {?}
   */
  function validateSuffixes(list) {
      list.forEach(function (bp) {
          if (!bp.suffix || bp.suffix === '') {
              bp.suffix = camelCase(bp.alias); // create Suffix value based on alias
              bp.overlapping = bp.overlapping || false; // ensure default value
          }
      });
      return list;
  }
  /**
   * Merge a custom breakpoint list with the default list based on unique alias values
   *  - Items are added if the alias is not in the default list
   *  - Items are merged with the custom override if the alias exists in the default list
   * @param {?} defaults
   * @param {?=} custom
   * @return {?}
   */
  function mergeByAlias(defaults, custom) {
      if (custom === void 0) { custom = []; }
      var /** @type {?} */ merged = defaults.map(function (bp) { return extendObject({}, bp); });
      var /** @type {?} */ findByAlias = function (alias) { return merged.reduce(function (result, bp) {
          return result || ((bp.alias === alias) ? bp : null);
      }, null); };
      // Merge custom breakpoints
      custom.forEach(function (bp) {
          var /** @type {?} */ target = findByAlias(bp.alias);
          if (target) {
              extendObject(target, bp);
          }
          else {
              merged.push(bp);
          }
      });
      return validateSuffixes(merged);
  }
  
  /**
   * Add new custom items to the default list or override existing default with custom overrides
   * @param {?=} _custom
   * @param {?=} options
   * @return {?}
   */
  function buildMergedBreakPoints(_custom, options) {
      options = extendObject({}, {
          defaults: true,
          orientation: false // exclude pre-configured, internal orientations breakpoints
      }, options || {});
      return function () {
          // Order so the defaults are loaded last; so ObservableMedia will report these last!
          var /** @type {?} */ defaults = options.orientations ? ORIENTATION_BREAKPOINTS.concat(DEFAULT_BREAKPOINTS) :
              DEFAULT_BREAKPOINTS;
          return options.defaults ? mergeByAlias(defaults, _custom || []) : mergeByAlias(_custom);
      };
  }
  /**
   *  Ensure that only a single global BreakPoint list is instantiated...
   * @return {?}
   */
  function DEFAULT_BREAKPOINTS_PROVIDER_FACTORY() {
      return validateSuffixes(DEFAULT_BREAKPOINTS);
  }
  /**
   * Default Provider that does not support external customization nor provide
   * the extra extended breakpoints:   "handset", "tablet", and "web"
   *
   *  NOTE: !! breakpoints are considered to have unique 'alias' properties,
   *        custom breakpoints matching existing breakpoints will override the properties
   *        of the existing (and not be added as an extra breakpoint entry).
   *        [xs, gt-xs, sm, gt-sm, md, gt-md, lg, gt-lg, xl]
   */
  var DEFAULT_BREAKPOINTS_PROVIDER = {
      provide: BREAKPOINTS,
      useFactory: DEFAULT_BREAKPOINTS_PROVIDER_FACTORY
  };
  /**
   * Use with FlexLayoutModule.CUSTOM_BREAKPOINTS_PROVIDER_FACTORY!
   * @param {?=} _custom
   * @param {?=} options
   * @return {?}
   */
  function CUSTOM_BREAKPOINTS_PROVIDER_FACTORY(_custom, options) {
      return {
          provide: BREAKPOINTS,
          useFactory: buildMergedBreakPoints(_custom, options)
      };
  }
  
  /**
   * Ensure a single global ObservableMedia service provider
   * @param {?} parentService
   * @param {?} matchMedia
   * @param {?} breakpoints
   * @return {?}
   */
  function OBSERVABLE_MEDIA_PROVIDER_FACTORY(parentService, matchMedia, breakpoints) {
      return parentService || new MediaService(breakpoints, matchMedia);
  }
  /**
   *  Provider to return global service for observable service for all MediaQuery activations
   */
  var OBSERVABLE_MEDIA_PROVIDER = {
      provide: ObservableMedia,
      deps: [
          [new Optional(), new SkipSelf(), ObservableMedia],
          MatchMedia,
          BreakPointRegistry
      ],
      useFactory: OBSERVABLE_MEDIA_PROVIDER_FACTORY
  };
  
  /**
   * Ensure a single global service provider
   * @param {?} parentMonitor
   * @param {?} breakpoints
   * @param {?} matchMedia
   * @return {?}
   */
  function MEDIA_MONITOR_PROVIDER_FACTORY(parentMonitor, breakpoints, matchMedia) {
      return parentMonitor || new MediaMonitor(breakpoints, matchMedia);
  }
  /**
   * Export provider that uses a global service factory (above)
   */
  var MEDIA_MONITOR_PROVIDER = {
      provide: MediaMonitor,
      deps: [
          [new Optional(), new SkipSelf(), MediaMonitor],
          BreakPointRegistry,
          MatchMedia,
      ],
      useFactory: MEDIA_MONITOR_PROVIDER_FACTORY
  };
  
  /**
   * *****************************************************************
   * Define module for the MediaQuery API
   * *****************************************************************
   */
  var MediaQueriesModule = (function () {
      function MediaQueriesModule() {
      }
      MediaQueriesModule.decorators = [
          { type: NgModule, args: [{
                      providers: [
                          DEFAULT_BREAKPOINTS_PROVIDER,
                          BreakPointRegistry,
                          MatchMedia,
                          MediaMonitor,
                          OBSERVABLE_MEDIA_PROVIDER // easy subscription injectable `media$` matchMedia observable
                      ]
                  },] },
      ];
      /**
       * @nocollapse
       */
      MediaQueriesModule.ctorParameters = function () { return []; };
      return MediaQueriesModule;
  }());
  
  /**
   * Since the equivalent results are easily achieved with a css class attached to each
   * layout child, these have been deprecated and removed from the API.
   *
   *  import {LayoutPaddingDirective} from './api/flexbox/layout-padding';
   *  import {LayoutMarginDirective} from './api/flexbox/layout-margin';
   */
  var ALL_DIRECTIVES = [
      LayoutDirective,
      LayoutWrapDirective,
      LayoutGapDirective,
      LayoutAlignDirective,
      FlexDirective,
      FlexOrderDirective,
      FlexOffsetDirective,
      FlexFillDirective,
      FlexAlignDirective,
      ShowHideDirective,
      ClassDirective,
      StyleDirective,
      ImgSrcDirective
  ];
  /**
   *
   */
  var FlexLayoutModule = (function () {
      function FlexLayoutModule() {
      }
      /**
       * External uses can easily add custom breakpoints AND include internal orientations
       * breakpoints; which are not available by default.
       *
       * !! Selector aliases are not auto-configured. Developers must subclass
       * the API directives to support extra selectors for the orientations breakpoints !!
       * @param {?} breakpoints
       * @param {?=} options
       * @return {?}
       */
      FlexLayoutModule.provideBreakPoints = function (breakpoints, options) {
          return {
              ngModule: FlexLayoutModule,
              providers: [
                  CUSTOM_BREAKPOINTS_PROVIDER_FACTORY(breakpoints, options || { orientations: false })
              ]
          };
      };
      FlexLayoutModule.decorators = [
          { type: NgModule, args: [{
                      imports: [MediaQueriesModule],
                      exports: [MediaQueriesModule].concat(ALL_DIRECTIVES),
                      declarations: ALL_DIRECTIVES.slice(),
                      providers: [
                          MEDIA_MONITOR_PROVIDER,
                          DEFAULT_BREAKPOINTS_PROVIDER,
                          OBSERVABLE_MEDIA_PROVIDER
                      ]
                  },] },
      ];
      /**
       * @nocollapse
       */
      FlexLayoutModule.ctorParameters = function () { return []; };
      return FlexLayoutModule;
  }());
  
  /**
   * Generated bundle index. Do not edit.
   */
  
  export { VERSION, BaseFxDirective, BaseFxDirectiveAdapter, KeyOptions, ResponsiveActivation, LayoutDirective, LayoutAlignDirective, LayoutGapDirective, LayoutWrapDirective, FlexDirective, FlexAlignDirective, FlexFillDirective, FlexOffsetDirective, FlexOrderDirective, ClassDirective, StyleDirective, negativeOf, ShowHideDirective, ImgSrcDirective, RESPONSIVE_ALIASES, DEFAULT_BREAKPOINTS, ScreenTypes, ORIENTATION_BREAKPOINTS, BREAKPOINTS, BreakPointRegistry, ObservableMedia, MediaService, MatchMedia, isBrowser, MediaChange, MediaMonitor, buildMergedBreakPoints, DEFAULT_BREAKPOINTS_PROVIDER_FACTORY, DEFAULT_BREAKPOINTS_PROVIDER, CUSTOM_BREAKPOINTS_PROVIDER_FACTORY, OBSERVABLE_MEDIA_PROVIDER_FACTORY, OBSERVABLE_MEDIA_PROVIDER, MEDIA_MONITOR_PROVIDER_FACTORY, MEDIA_MONITOR_PROVIDER, MediaQueriesModule, mergeAlias, applyCssPrefixes, validateBasis, LAYOUT_VALUES, buildLayoutCSS, validateValue, isFlowHorizontal, validateWrapValue, validateSuffixes, mergeByAlias, extendObject, NgStyleKeyValue, ngStyleUtils, FlexLayoutModule };
  //# sourceMappingURL=flex-layout.es5.js.map
  