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
   */
  (function (global, factory) {
  	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/flex-layout/core'), require('@angular/cdk/bidi'), require('rxjs'), require('rxjs/operators')) :
  	typeof define === 'function' && define.amd ? define('@angular/flex-layout/flex', ['exports', '@angular/core', '@angular/flex-layout/core', '@angular/cdk/bidi', 'rxjs', 'rxjs/operators'], factory) :
  	(factory((global.ng = global.ng || {}, global.ng.flexLayout = global.ng.flexLayout || {}, global.ng.flexLayout.flex = {}),global.ng.core,global.ng.flexLayout.core,global.ng.cdk.bidi,global.rxjs,global.rxjs.operators));
  }(this, (function (exports,core,core$1,bidi,rxjs,operators) { 'use strict';
  
  /*! *****************************************************************************
  Copyright (c) Microsoft Corporation.
  
  Permission to use, copy, modify, and/or distribute this software for any
  purpose with or without fee is hereby granted.
  
  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
  PERFORMANCE OF THIS SOFTWARE.
  ***************************************************************************** */
  /* global Reflect, Promise */
  
  var extendStatics = function(d, b) {
      extendStatics = Object.setPrototypeOf ||
          ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
          function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
      return extendStatics(d, b);
  };
  
  function __extends(d, b) {
      if (typeof b !== "function" && b !== null)
          throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
      extendStatics(d, b);
      function __() { this.constructor = d; }
      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  }
  
  var __assign = function() {
      __assign = Object.assign || function __assign(t) {
          for (var s, i = 1, n = arguments.length; i < n; i++) {
              s = arguments[i];
              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
          }
          return t;
      };
      return __assign.apply(this, arguments);
  };
  
  function __spreadArray(to, from) {
      for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
          to[j] = from[i];
      return to;
  }
  
  /**
   * @fileoverview added by tsickle
   * Generated from: utils/layout-validator.ts
   * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
   */
  /**
   * @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
   * @type {?}
   */
  var INLINE = 'inline';
  /** @type {?} */
  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], isInline = _a[2];
      return buildCSS(direction, wrap, isInline);
  }
  /**
   * 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], inline = _a[2];
      // First value must be the `flex-direction`
      if (!LAYOUT_VALUES.find((/**
       * @param {?} x
       * @return {?}
       */
      function (x) { return x === direction; }))) {
          direction = LAYOUT_VALUES[0];
      }
      if (wrap === INLINE) {
          wrap = (inline !== INLINE) ? inline : '';
          inline = INLINE;
      }
      return [direction, validateWrapValue(wrap), !!inline];
  }
  /**
   * Determine if the validated, flex-direction value specifies
   * a horizontal/row flow.
   * @param {?} value
   * @return {?}
   */
  function isFlowHorizontal(value) {
      var flow = validateValue(value)[0];
      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
   * @param {?=} inline
   * @return {?}
   */
  function buildCSS(direction, wrap, inline) {
      if (wrap === void 0) { wrap = null; }
      if (inline === void 0) { inline = false; }
      return {
          'display': inline ? 'inline-flex' : 'flex',
          'box-sizing': 'border-box',
          'flex-direction': direction,
          'flex-wrap': !!wrap ? wrap : null
      };
  }
  
  /**
   * @fileoverview added by tsickle
   * Generated from: flex/layout/layout.ts
   * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
   */
  var LayoutStyleBuilder = /** @class */ (function (_super) {
      __extends(LayoutStyleBuilder, _super);
      function LayoutStyleBuilder() {
          return _super !== null && _super.apply(this, arguments) || this;
      }
      /**
       * @param {?} input
       * @return {?}
       */
      LayoutStyleBuilder.prototype.buildStyles = /**
       * @param {?} input
       * @return {?}
       */
      function (input) {
          return buildLayoutCSS(input);
      };
      /** @nocollapse */ LayoutStyleBuilder.ɵprov = core.ɵɵdefineInjectable({ factory: function LayoutStyleBuilder_Factory() { return new LayoutStyleBuilder(); }, token: LayoutStyleBuilder, providedIn: "root" });
      LayoutStyleBuilder.decorators = [
          { type: core.Injectable, args: [{ providedIn: 'root' },] }
      ];
      return LayoutStyleBuilder;
  }(core$1.StyleBuilder));
  /** @type {?} */
  var inputs = [
      'fxLayout', 'fxLayout.xs', 'fxLayout.sm', 'fxLayout.md',
      'fxLayout.lg', 'fxLayout.xl', 'fxLayout.lt-sm', 'fxLayout.lt-md',
      'fxLayout.lt-lg', 'fxLayout.lt-xl', 'fxLayout.gt-xs', 'fxLayout.gt-sm',
      'fxLayout.gt-md', 'fxLayout.gt-lg'
  ];
  /** @type {?} */
  var selector = "\n  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],\n  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],\n  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],\n  [fxLayout.gt-md], [fxLayout.gt-lg]\n";
  /**
   * '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 = /** @class */ (function (_super) {
      __extends(LayoutDirective, _super);
      function LayoutDirective(elRef, styleUtils, styleBuilder, marshal) {
          var _this = _super.call(this, elRef, styleBuilder, styleUtils, marshal) || this;
          _this.DIRECTIVE_KEY = 'layout';
          _this.styleCache = layoutCache;
          _this.init();
          return _this;
      }
      LayoutDirective.decorators = [
          { type: core.Directive }
      ];
      /** @nocollapse */
      LayoutDirective.ctorParameters = function () { return [
          { type: core.ElementRef },
          { type: core$1.StyleUtils },
          { type: LayoutStyleBuilder },
          { type: core$1.MediaMarshaller }
      ]; };
      return LayoutDirective;
  }(core$1.BaseDirective2));
  var DefaultLayoutDirective = /** @class */ (function (_super) {
      __extends(DefaultLayoutDirective, _super);
      function DefaultLayoutDirective() {
          var _this = _super !== null && _super.apply(this, arguments) || this;
          _this.inputs = inputs;
          return _this;
      }
      DefaultLayoutDirective.decorators = [
          { type: core.Directive, args: [{ selector: selector, inputs: inputs },] }
      ];
      return DefaultLayoutDirective;
  }(LayoutDirective));
  /** @type {?} */
  var layoutCache = new Map();
  
  /**
   * @fileoverview added by tsickle
   * Generated from: flex/layout-gap/layout-gap.ts
   * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
   */
  /** @type {?} */
  var CLEAR_MARGIN_CSS = {
      'margin-left': null,
      'margin-right': null,
      'margin-top': null,
      'margin-bottom': null
  };
  var LayoutGapStyleBuilder = /** @class */ (function (_super) {
      __extends(LayoutGapStyleBuilder, _super);
      function LayoutGapStyleBuilder(_styler) {
          var _this = _super.call(this) || this;
          _this._styler = _styler;
          return _this;
      }
      /**
       * @param {?} gapValue
       * @param {?} parent
       * @return {?}
       */
      LayoutGapStyleBuilder.prototype.buildStyles = /**
       * @param {?} gapValue
       * @param {?} parent
       * @return {?}
       */
      function (gapValue, parent) {
          if (gapValue.endsWith(GRID_SPECIFIER)) {
              gapValue = gapValue.slice(0, gapValue.indexOf(GRID_SPECIFIER));
              // Add the margin to the host element
              return buildGridMargin(gapValue, parent.directionality);
          }
          else {
              return {};
          }
      };
      /**
       * @param {?} gapValue
       * @param {?} _styles
       * @param {?} parent
       * @return {?}
       */
      LayoutGapStyleBuilder.prototype.sideEffect = /**
       * @param {?} gapValue
       * @param {?} _styles
       * @param {?} parent
       * @return {?}
       */
      function (gapValue, _styles, parent) {
          /** @type {?} */
          var items = parent.items;
          if (gapValue.endsWith(GRID_SPECIFIER)) {
              gapValue = gapValue.slice(0, gapValue.indexOf(GRID_SPECIFIER));
              // For each `element` children, set the padding
              /** @type {?} */
              var paddingStyles = buildGridPadding(gapValue, parent.directionality);
              this._styler.applyStyleToElements(paddingStyles, parent.items);
          }
          else {
              /** @type {?} */
              var lastItem = (/** @type {?} */ (items.pop()));
              // For each `element` children EXCEPT the last,
              // set the margin right/bottom styles...
              /** @type {?} */
              var gapCss = buildGapCSS(gapValue, parent);
              this._styler.applyStyleToElements(gapCss, items);
              // Clear all gaps for all visible elements
              this._styler.applyStyleToElements(CLEAR_MARGIN_CSS, [lastItem]);
          }
      };
      /** @nocollapse */ LayoutGapStyleBuilder.ɵprov = core.ɵɵdefineInjectable({ factory: function LayoutGapStyleBuilder_Factory() { return new LayoutGapStyleBuilder(core.ɵɵinject(core$1.StyleUtils)); }, token: LayoutGapStyleBuilder, providedIn: "root" });
      LayoutGapStyleBuilder.decorators = [
          { type: core.Injectable, args: [{ providedIn: 'root' },] }
      ];
      /** @nocollapse */
      LayoutGapStyleBuilder.ctorParameters = function () { return [
          { type: core$1.StyleUtils }
      ]; };
      return LayoutGapStyleBuilder;
  }(core$1.StyleBuilder));
  /** @type {?} */
  var inputs$1 = [
      'fxLayoutGap', 'fxLayoutGap.xs', 'fxLayoutGap.sm', 'fxLayoutGap.md',
      'fxLayoutGap.lg', 'fxLayoutGap.xl', 'fxLayoutGap.lt-sm', 'fxLayoutGap.lt-md',
      'fxLayoutGap.lt-lg', 'fxLayoutGap.lt-xl', 'fxLayoutGap.gt-xs', 'fxLayoutGap.gt-sm',
      'fxLayoutGap.gt-md', 'fxLayoutGap.gt-lg'
  ];
  /** @type {?} */
  var selector$1 = "\n  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],\n  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],\n  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],\n  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]\n";
  /**
   * 'layout-padding' styling directive
   *  Defines padding of child elements in a layout container
   */
  var LayoutGapDirective = /** @class */ (function (_super) {
      __extends(LayoutGapDirective, _super);
      function LayoutGapDirective(elRef, zone, directionality, styleUtils, styleBuilder, marshal) {
          var _this = _super.call(this, elRef, styleBuilder, styleUtils, marshal) || this;
          _this.zone = zone;
          _this.directionality = directionality;
          _this.styleUtils = styleUtils;
          _this.layout = 'row'; // default flex-direction
          // default flex-direction
          _this.DIRECTIVE_KEY = 'layout-gap';
          _this.observerSubject = new rxjs.Subject();
          /** @type {?} */
          var extraTriggers = [_this.directionality.change, _this.observerSubject.asObservable()];
          _this.init(extraTriggers);
          _this.marshal
              .trackValue(_this.nativeElement, 'layout')
              .pipe(operators.takeUntil(_this.destroySubject))
              .subscribe(_this.onLayoutChange.bind(_this));
          return _this;
      }
      Object.defineProperty(LayoutGapDirective.prototype, "childrenNodes", {
          /** Special accessor to query for all child 'element' nodes regardless of type, class, etc */
          get: /**
           * Special accessor to query for all child 'element' nodes regardless of type, class, etc
           * @protected
           * @return {?}
           */
          function () {
              /** @type {?} */
              var obj = this.nativeElement.children;
              /** @type {?} */
              var buffer = [];
              // iterate backwards ensuring that length is an UInt32
              for (var i = obj.length; i--;) {
                  buffer[i] = obj[i];
              }
              return buffer;
          },
          enumerable: false,
          configurable: true
      });
      // *********************************************
      // Lifecycle Methods
      // *********************************************
      // *********************************************
      // Lifecycle Methods
      // *********************************************
      /**
       * @return {?}
       */
      LayoutGapDirective.prototype.ngAfterContentInit = 
      // *********************************************
      // Lifecycle Methods
      // *********************************************
      /**
       * @return {?}
       */
      function () {
          this.buildChildObservable();
          this.triggerUpdate();
      };
      /**
       * @return {?}
       */
      LayoutGapDirective.prototype.ngOnDestroy = /**
       * @return {?}
       */
      function () {
          _super.prototype.ngOnDestroy.call(this);
          if (this.observer) {
              this.observer.disconnect();
          }
      };
      // *********************************************
      // Protected methods
      // *********************************************
      /**
       * Cache the parent container 'flex-direction' and update the 'margin' styles
       */
      // *********************************************
      // Protected methods
      // *********************************************
      /**
       * Cache the parent container 'flex-direction' and update the 'margin' styles
       * @protected
       * @param {?} matcher
       * @return {?}
       */
      LayoutGapDirective.prototype.onLayoutChange = 
      // *********************************************
      // Protected methods
      // *********************************************
      /**
       * Cache the parent container 'flex-direction' and update the 'margin' styles
       * @protected
       * @param {?} matcher
       * @return {?}
       */
      function (matcher) {
          var _this = this;
          /** @type {?} */
          var layout = matcher.value;
          // Make sure to filter out 'wrap' option
          /** @type {?} */
          var direction = layout.split(' ');
          this.layout = direction[0];
          if (!LAYOUT_VALUES.find((/**
           * @param {?} x
           * @return {?}
           */
          function (x) { return x === _this.layout; }))) {
              this.layout = 'row';
          }
          this.triggerUpdate();
      };
      /**
       *
       */
      /**
       *
       * @protected
       * @param {?} value
       * @return {?}
       */
      LayoutGapDirective.prototype.updateWithValue = /**
       *
       * @protected
       * @param {?} value
       * @return {?}
       */
      function (value) {
          var _this = this;
          // Gather all non-hidden Element nodes
          /** @type {?} */
          var items = this.childrenNodes
              .filter((/**
           * @param {?} el
           * @return {?}
           */
          function (el) { return el.nodeType === 1 && _this.willDisplay(el); }))
              .sort((/**
           * @param {?} a
           * @param {?} b
           * @return {?}
           */
          function (a, b) {
              /** @type {?} */
              var orderA = +_this.styler.lookupStyle(a, 'order');
              /** @type {?} */
              var orderB = +_this.styler.lookupStyle(b, 'order');
              if (isNaN(orderA) || isNaN(orderB) || orderA === orderB) {
                  return 0;
              }
              else {
                  return orderA > orderB ? 1 : -1;
              }
          }));
          if (items.length > 0) {
              /** @type {?} */
              var directionality = this.directionality.value;
              /** @type {?} */
              var layout = this.layout;
              if (layout === 'row' && directionality === 'rtl') {
                  this.styleCache = layoutGapCacheRowRtl;
              }
              else if (layout === 'row' && directionality !== 'rtl') {
                  this.styleCache = layoutGapCacheRowLtr;
              }
              else if (layout === 'column' && directionality === 'rtl') {
                  this.styleCache = layoutGapCacheColumnRtl;
              }
              else if (layout === 'column' && directionality !== 'rtl') {
                  this.styleCache = layoutGapCacheColumnLtr;
              }
              this.addStyles(value, { directionality: directionality, items: items, layout: layout });
          }
      };
      /** We need to override clearStyles because in most cases mru isn't populated */
      /**
       * We need to override clearStyles because in most cases mru isn't populated
       * @protected
       * @return {?}
       */
      LayoutGapDirective.prototype.clearStyles = /**
       * We need to override clearStyles because in most cases mru isn't populated
       * @protected
       * @return {?}
       */
      function () {
          var _a;
          /** @type {?} */
          var gridMode = Object.keys(this.mru).length > 0;
          /** @type {?} */
          var childrenStyle = gridMode ? 'padding' :
              getMarginType(this.directionality.value, this.layout);
          // If there are styles on the parent remove them
          if (gridMode) {
              _super.prototype.clearStyles.call(this);
          }
          // Then remove the children styles too
          this.styleUtils.applyStyleToElements((_a = {}, _a[childrenStyle] = '', _a), this.childrenNodes);
      };
      /** Determine if an element will show or hide based on current activation */
      /**
       * Determine if an element will show or hide based on current activation
       * @protected
       * @param {?} source
       * @return {?}
       */
      LayoutGapDirective.prototype.willDisplay = /**
       * Determine if an element will show or hide based on current activation
       * @protected
       * @param {?} source
       * @return {?}
       */
      function (source) {
          /** @type {?} */
          var value = this.marshal.getValue(source, 'show-hide');
          return value === true ||
              (value === undefined && this.styleUtils.lookupStyle(source, 'display') !== 'none');
      };
      /**
       * @protected
       * @return {?}
       */
      LayoutGapDirective.prototype.buildChildObservable = /**
       * @protected
       * @return {?}
       */
      function () {
          var _this = this;
          this.zone.runOutsideAngular((/**
           * @return {?}
           */
          function () {
              if (typeof MutationObserver !== 'undefined') {
                  _this.observer = new MutationObserver((/**
                   * @param {?} mutations
                   * @return {?}
                   */
                  function (mutations) {
                      /** @type {?} */
                      var validatedChanges = (/**
                       * @param {?} it
                       * @return {?}
                       */
                      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.observerSubject.next();
                      }
                  }));
                  _this.observer.observe(_this.nativeElement, { childList: true });
              }
          }));
      };
      LayoutGapDirective.decorators = [
          { type: core.Directive }
      ];
      /** @nocollapse */
      LayoutGapDirective.ctorParameters = function () { return [
          { type: core.ElementRef },
          { type: core.NgZone },
          { type: bidi.Directionality },
          { type: core$1.StyleUtils },
          { type: LayoutGapStyleBuilder },
          { type: core$1.MediaMarshaller }
      ]; };
      return LayoutGapDirective;
  }(core$1.BaseDirective2));
  var DefaultLayoutGapDirective = /** @class */ (function (_super) {
      __extends(DefaultLayoutGapDirective, _super);
      function DefaultLayoutGapDirective() {
          var _this = _super !== null && _super.apply(this, arguments) || this;
          _this.inputs = inputs$1;
          return _this;
      }
      DefaultLayoutGapDirective.decorators = [
          { type: core.Directive, args: [{ selector: selector$1, inputs: inputs$1 },] }
      ];
      return DefaultLayoutGapDirective;
  }(LayoutGapDirective));
  /** @type {?} */
  var layoutGapCacheRowRtl = new Map();
  /** @type {?} */
  var layoutGapCacheColumnRtl = new Map();
  /** @type {?} */
  var layoutGapCacheRowLtr = new Map();
  /** @type {?} */
  var layoutGapCacheColumnLtr = new Map();
  /** @type {?} */
  var GRID_SPECIFIER = ' grid';
  /**
   * @param {?} value
   * @param {?} directionality
   * @return {?}
   */
  function buildGridPadding(value, directionality) {
      var _a = value.split(' '), between = _a[0], below = _a[1];
      /** @type {?} */
      var bottom = below || between;
      /** @type {?} */
      var paddingRight = '0px';
      /** @type {?} */
      var paddingBottom = bottom;
      /** @type {?} */
      var paddingLeft = '0px';
      if (directionality === 'rtl') {
          paddingLeft = between;
      }
      else {
          paddingRight = between;
      }
      return { 'padding': "0px " + paddingRight + " " + paddingBottom + " " + paddingLeft };
  }
  /**
   * @param {?} value
   * @param {?} directionality
   * @return {?}
   */
  function buildGridMargin(value, directionality) {
      var _a = value.split(' '), between = _a[0], below = _a[1];
      /** @type {?} */
      var bottom = below || between;
      /** @type {?} */
      var minus = (/**
       * @param {?} str
       * @return {?}
       */
      function (str) { return "-" + str; });
      /** @type {?} */
      var marginRight = '0px';
      /** @type {?} */
      var marginBottom = minus(bottom);
      /** @type {?} */
      var marginLeft = '0px';
      if (directionality === 'rtl') {
          marginLeft = minus(between);
      }
      else {
          marginRight = minus(between);
      }
      return { 'margin': "0px " + marginRight + " " + marginBottom + " " + marginLeft };
  }
  /**
   * @param {?} directionality
   * @param {?} layout
   * @return {?}
   */
  function getMarginType(directionality, layout) {
      switch (layout) {
          case 'column':
              return 'margin-bottom';
          case 'column-reverse':
              return 'margin-top';
          case 'row':
              return directionality === 'rtl' ? 'margin-left' : 'margin-right';
          case 'row-reverse':
              return directionality === 'rtl' ? 'margin-right' : 'margin-left';
          default:
              return directionality === 'rtl' ? 'margin-left' : 'margin-right';
      }
  }
  /**
   * @param {?} gapValue
   * @param {?} parent
   * @return {?}
   */
  function buildGapCSS(gapValue, parent) {
      /** @type {?} */
      var key = getMarginType(parent.directionality, parent.layout);
      /** @type {?} */
      var margins = __assign({}, CLEAR_MARGIN_CSS);
      margins[key] = gapValue;
      return margins;
  }
  
  /**
   * @fileoverview added by tsickle
   * Generated from: utils/object-extend.ts
   * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
   */
  
  /**
   * 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 key in source) {
                  if (source.hasOwnProperty(key)) {
                      dest[key] = source[key];
                  }
              }
          }
      }
      return dest;
  }
  
  /**
   * @fileoverview added by tsickle
   * Generated from: flex/flex/flex.ts
   * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
   */
  var FlexStyleBuilder = /** @class */ (function (_super) {
      __extends(FlexStyleBuilder, _super);
      function FlexStyleBuilder(layoutConfig) {
          var _this = _super.call(this) || this;
          _this.layoutConfig = layoutConfig;
          return _this;
      }
      /**
       * @param {?} input
       * @param {?} parent
       * @return {?}
       */
      FlexStyleBuilder.prototype.buildStyles = /**
       * @param {?} input
       * @param {?} parent
       * @return {?}
       */
      function (input, parent) {
          var _a = input.split(' '), grow = _a[0], shrink = _a[1], basisParts = _a.slice(2);
          /** @type {?} */
          var basis = basisParts.join(' ');
          // The flex-direction of this element's flex container. Defaults to 'row'.
          /** @type {?} */
          var direction = (parent.direction.indexOf('column') > -1) ? 'column' : 'row';
          /** @type {?} */
          var max = isFlowHorizontal(direction) ? 'max-width' : 'max-height';
          /** @type {?} */
          var min = isFlowHorizontal(direction) ? 'min-width' : 'min-height';
          /** @type {?} */
          var hasCalc = String(basis).indexOf('calc') > -1;
          /** @type {?} */
          var usingCalc = hasCalc || (basis === 'auto');
          /** @type {?} */
          var isPercent = String(basis).indexOf('%') > -1 && !hasCalc;
          /** @type {?} */
          var hasUnits = String(basis).indexOf('px') > -1 || String(basis).indexOf('rem') > -1 ||
              String(basis).indexOf('em') > -1 || String(basis).indexOf('vw') > -1 ||
              String(basis).indexOf('vh') > -1;
          /** @type {?} */
          var isValue = (hasCalc || hasUnits);
          grow = (grow == '0') ? 0 : grow;
          shrink = (shrink == '0') ? 0 : shrink;
          // 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
          /** @type {?} */
          var isFixed = !grow && !shrink;
          /** @type {?} */
          var css = {};
          // 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.
          /** @type {?} */
          var clearStyles = {
              'max-width': null,
              'max-height': null,
              'min-width': null,
              'min-height': null
          };
          switch (basis || '') {
              case '':
                  /** @type {?} */
                  var useColumnBasisZero = this.layoutConfig.useColumnBasisZero !== false;
                  basis = direction === 'row' ? '0%' : (useColumnBasisZero ? '0.000000001px' : 'auto');
                  break;
              case 'initial': // default
              case 'nogrow':
                  grow = 0;
                  basis = 'auto';
                  break;
              case 'grow':
                  basis = '100%';
                  break;
              case 'noshrink':
                  shrink = 0;
                  basis = 'auto';
                  break;
              case 'auto':
                  break;
              case 'none':
                  grow = 0;
                  shrink = 0;
                  basis = 'auto';
                  break;
              default:
                  // Defaults to percentage sizing unless `px` is explicitly set
                  if (!isValue && !isPercent && !isNaN((/** @type {?} */ (basis)))) {
                      basis = basis + '%';
                  }
                  // Fix for issue 280
                  if (basis === '0%') {
                      isValue = true;
                  }
                  if (basis === '0px') {
                      basis = '0%';
                  }
                  // fix issue #5345
                  if (hasCalc) {
                      css = extendObject(clearStyles, {
                          'flex-grow': grow,
                          'flex-shrink': shrink,
                          'flex-basis': isValue ? basis : '100%'
                      });
                  }
                  else {
                      css = extendObject(clearStyles, {
                          'flex': grow + " " + shrink + " " + (isValue ? basis : '100%')
                      });
                  }
                  break;
          }
          if (!(css['flex'] || css['flex-grow'])) {
              if (hasCalc) {
                  css = extendObject(clearStyles, {
                      'flex-grow': grow,
                      'flex-shrink': shrink,
                      'flex-basis': basis
                  });
              }
              else {
                  css = extendObject(clearStyles, {
                      'flex': grow + " " + shrink + " " + basis
                  });
              }
          }
          // Fix for issues 277, 534, and 728
          if (basis !== '0%' && basis !== '0px' && basis !== '0.000000001px' && basis !== 'auto') {
              css[min] = isFixed || (isValue && grow) ? basis : null;
              css[max] = isFixed || (!usingCalc && shrink) ? basis : null;
          }
          // Fix for issue 528
          if (!css[min] && !css[max]) {
              if (hasCalc) {
                  css = extendObject(clearStyles, {
                      'flex-grow': grow,
                      'flex-shrink': shrink,
                      'flex-basis': basis
                  });
              }
              else {
                  css = extendObject(clearStyles, {
                      'flex': grow + " " + shrink + " " + basis
                  });
              }
          }
          else {
              // Fix for issue 660
              if (parent.hasWrap) {
                  css[hasCalc ? 'flex-basis' : 'flex'] = css[max] ?
                      (hasCalc ? css[max] : grow + " " + shrink + " " + css[max]) :
                      (hasCalc ? css[min] : grow + " " + shrink + " " + css[min]);
              }
          }
          return (/** @type {?} */ (extendObject(css, { 'box-sizing': 'border-box' })));
      };
      /** @nocollapse */ FlexStyleBuilder.ɵprov = core.ɵɵdefineInjectable({ factory: function FlexStyleBuilder_Factory() { return new FlexStyleBuilder(core.ɵɵinject(core$1.LAYOUT_CONFIG)); }, token: FlexStyleBuilder, providedIn: "root" });
      FlexStyleBuilder.decorators = [
          { type: core.Injectable, args: [{ providedIn: 'root' },] }
      ];
      /** @nocollapse */
      FlexStyleBuilder.ctorParameters = function () { return [
          { type: undefined, decorators: [{ type: core.Inject, args: [core$1.LAYOUT_CONFIG,] }] }
      ]; };
      return FlexStyleBuilder;
  }(core$1.StyleBuilder));
  /** @type {?} */
  var inputs$2 = [
      'fxFlex', 'fxFlex.xs', 'fxFlex.sm', 'fxFlex.md',
      'fxFlex.lg', 'fxFlex.xl', 'fxFlex.lt-sm', 'fxFlex.lt-md',
      'fxFlex.lt-lg', 'fxFlex.lt-xl', 'fxFlex.gt-xs', 'fxFlex.gt-sm',
      'fxFlex.gt-md', 'fxFlex.gt-lg'
  ];
  /** @type {?} */
  var selector$2 = "\n  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],\n  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],\n  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],\n  [fxFlex.gt-md], [fxFlex.gt-lg]\n";
  /**
   * 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 = /** @class */ (function (_super) {
      __extends(FlexDirective, _super);
      function FlexDirective(elRef, styleUtils, layoutConfig, styleBuilder, marshal) {
          var _this = _super.call(this, elRef, styleBuilder, styleUtils, marshal) || this;
          _this.layoutConfig = layoutConfig;
          _this.marshal = marshal;
          _this.DIRECTIVE_KEY = 'flex';
          _this.direction = undefined;
          _this.wrap = undefined;
          _this.flexGrow = '1';
          _this.flexShrink = '1';
          _this.init();
          return _this;
      }
      Object.defineProperty(FlexDirective.prototype, "shrink", {
          get: /**
           * @return {?}
           */
          function () { return this.flexShrink; },
          set: /**
           * @param {?} value
           * @return {?}
           */
          function (value) {
              this.flexShrink = value || '1';
              this.triggerReflow();
          },
          enumerable: false,
          configurable: true
      });
      Object.defineProperty(FlexDirective.prototype, "grow", {
          get: /**
           * @return {?}
           */
          function () { return this.flexGrow; },
          set: /**
           * @param {?} value
           * @return {?}
           */
          function (value) {
              this.flexGrow = value || '1';
              this.triggerReflow();
          },
          enumerable: false,
          configurable: true
      });
      /**
       * @return {?}
       */
      FlexDirective.prototype.ngOnInit = /**
       * @return {?}
       */
      function () {
          if (this.parentElement) {
              this.marshal.trackValue(this.parentElement, 'layout')
                  .pipe(operators.takeUntil(this.destroySubject))
                  .subscribe(this.onLayoutChange.bind(this));
              this.marshal.trackValue(this.nativeElement, 'layout-align')
                  .pipe(operators.takeUntil(this.destroySubject))
                  .subscribe(this.triggerReflow.bind(this));
          }
      };
      /**
       * 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.
       */
      /**
       * 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.
       * @protected
       * @param {?} matcher
       * @return {?}
       */
      FlexDirective.prototype.onLayoutChange = /**
       * 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.
       * @protected
       * @param {?} matcher
       * @return {?}
       */
      function (matcher) {
          /** @type {?} */
          var layout = matcher.value;
          /** @type {?} */
          var layoutParts = layout.split(' ');
          this.direction = layoutParts[0];
          this.wrap = layoutParts[1] !== undefined && layoutParts[1] === 'wrap';
          this.triggerUpdate();
      };
      /** Input to this is exclusively the basis input value */
      /**
       * Input to this is exclusively the basis input value
       * @protected
       * @param {?} value
       * @return {?}
       */
      FlexDirective.prototype.updateWithValue = /**
       * Input to this is exclusively the basis input value
       * @protected
       * @param {?} value
       * @return {?}
       */
      function (value) {
          /** @type {?} */
          var addFlexToParent = this.layoutConfig.addFlexToParent !== false;
          if (this.direction === undefined) {
              this.direction = this.getFlexFlowDirection((/** @type {?} */ (this.parentElement)), addFlexToParent);
          }
          if (this.wrap === undefined) {
              this.wrap = this.hasWrap((/** @type {?} */ (this.parentElement)));
          }
          /** @type {?} */
          var direction = this.direction;
          /** @type {?} */
          var isHorizontal = direction.startsWith('row');
          /** @type {?} */
          var hasWrap = this.wrap;
          if (isHorizontal && hasWrap) {
              this.styleCache = flexRowWrapCache;
          }
          else if (isHorizontal && !hasWrap) {
              this.styleCache = flexRowCache;
          }
          else if (!isHorizontal && hasWrap) {
              this.styleCache = flexColumnWrapCache;
          }
          else if (!isHorizontal && !hasWrap) {
              this.styleCache = flexColumnCache;
          }
          /** @type {?} */
          var basis = String(value).replace(';', '');
          /** @type {?} */
          var parts = core$1.validateBasis(basis, this.flexGrow, this.flexShrink);
          this.addStyles(parts.join(' '), { direction: direction, hasWrap: hasWrap });
      };
      /** Trigger a style reflow, usually based on a shrink/grow input event */
      /**
       * Trigger a style reflow, usually based on a shrink/grow input event
       * @protected
       * @return {?}
       */
      FlexDirective.prototype.triggerReflow = /**
       * Trigger a style reflow, usually based on a shrink/grow input event
       * @protected
       * @return {?}
       */
      function () {
          /** @type {?} */
          var activatedValue = this.activatedValue;
          if (activatedValue !== undefined) {
              /** @type {?} */
              var parts = core$1.validateBasis(activatedValue + '', this.flexGrow, this.flexShrink);
              this.marshal.updateElement(this.nativeElement, this.DIRECTIVE_KEY, parts.join(' '));
          }
      };
      FlexDirective.decorators = [
          { type: core.Directive }
      ];
      /** @nocollapse */
      FlexDirective.ctorParameters = function () { return [
          { type: core.ElementRef },
          { type: core$1.StyleUtils },
          { type: undefined, decorators: [{ type: core.Inject, args: [core$1.LAYOUT_CONFIG,] }] },
          { type: FlexStyleBuilder },
          { type: core$1.MediaMarshaller }
      ]; };
      FlexDirective.propDecorators = {
          shrink: [{ type: core.Input, args: ['fxShrink',] }],
          grow: [{ type: core.Input, args: ['fxGrow',] }]
      };
      return FlexDirective;
  }(core$1.BaseDirective2));
  var DefaultFlexDirective = /** @class */ (function (_super) {
      __extends(DefaultFlexDirective, _super);
      function DefaultFlexDirective() {
          var _this = _super !== null && _super.apply(this, arguments) || this;
          _this.inputs = inputs$2;
          return _this;
      }
      DefaultFlexDirective.decorators = [
          { type: core.Directive, args: [{ inputs: inputs$2, selector: selector$2 },] }
      ];
      return DefaultFlexDirective;
  }(FlexDirective));
  /** @type {?} */
  var flexRowCache = new Map();
  /** @type {?} */
  var flexColumnCache = new Map();
  /** @type {?} */
  var flexRowWrapCache = new Map();
  /** @type {?} */
  var flexColumnWrapCache = new Map();
  
  /**
   * @fileoverview added by tsickle
   * Generated from: flex/flex-order/flex-order.ts
   * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
   */
  var FlexOrderStyleBuilder = /** @class */ (function (_super) {
      __extends(FlexOrderStyleBuilder, _super);
      function FlexOrderStyleBuilder() {
          return _super !== null && _super.apply(this, arguments) || this;
      }
      /**
       * @param {?} value
       * @return {?}
       */
      FlexOrderStyleBuilder.prototype.buildStyles = /**
       * @param {?} value
       * @return {?}
       */
      function (value) {
          return { order: (value && parseInt(value, 10)) || '' };
      };
      /** @nocollapse */ FlexOrderStyleBuilder.ɵprov = core.ɵɵdefineInjectable({ factory: function FlexOrderStyleBuilder_Factory() { return new FlexOrderStyleBuilder(); }, token: FlexOrderStyleBuilder, providedIn: "root" });
      FlexOrderStyleBuilder.decorators = [
          { type: core.Injectable, args: [{ providedIn: 'root' },] }
      ];
      return FlexOrderStyleBuilder;
  }(core$1.StyleBuilder));
  /** @type {?} */
  var inputs$3 = [
      'fxFlexOrder', 'fxFlexOrder.xs', 'fxFlexOrder.sm', 'fxFlexOrder.md',
      'fxFlexOrder.lg', 'fxFlexOrder.xl', 'fxFlexOrder.lt-sm', 'fxFlexOrder.lt-md',
      'fxFlexOrder.lt-lg', 'fxFlexOrder.lt-xl', 'fxFlexOrder.gt-xs', 'fxFlexOrder.gt-sm',
      'fxFlexOrder.gt-md', 'fxFlexOrder.gt-lg'
  ];
  /** @type {?} */
  var selector$3 = "\n  [fxFlexOrder], [fxFlexOrder.xs], [fxFlexOrder.sm], [fxFlexOrder.md],\n  [fxFlexOrder.lg], [fxFlexOrder.xl], [fxFlexOrder.lt-sm], [fxFlexOrder.lt-md],\n  [fxFlexOrder.lt-lg], [fxFlexOrder.lt-xl], [fxFlexOrder.gt-xs], [fxFlexOrder.gt-sm],\n  [fxFlexOrder.gt-md], [fxFlexOrder.gt-lg]\n";
  /**
   * '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 = /** @class */ (function (_super) {
      __extends(FlexOrderDirective, _super);
      function FlexOrderDirective(elRef, styleUtils, styleBuilder, marshal) {
          var _this = _super.call(this, elRef, styleBuilder, styleUtils, marshal) || this;
          _this.DIRECTIVE_KEY = 'flex-order';
          _this.styleCache = flexOrderCache;
          _this.init();
          return _this;
      }
      FlexOrderDirective.decorators = [
          { type: core.Directive }
      ];
      /** @nocollapse */
      FlexOrderDirective.ctorParameters = function () { return [
          { type: core.ElementRef },
          { type: core$1.StyleUtils },
          { type: FlexOrderStyleBuilder },
          { type: core$1.MediaMarshaller }
      ]; };
      return FlexOrderDirective;
  }(core$1.BaseDirective2));
  /** @type {?} */
  var flexOrderCache = new Map();
  var DefaultFlexOrderDirective = /** @class */ (function (_super) {
      __extends(DefaultFlexOrderDirective, _super);
      function DefaultFlexOrderDirective() {
          var _this = _super !== null && _super.apply(this, arguments) || this;
          _this.inputs = inputs$3;
          return _this;
      }
      DefaultFlexOrderDirective.decorators = [
          { type: core.Directive, args: [{ selector: selector$3, inputs: inputs$3 },] }
      ];
      return DefaultFlexOrderDirective;
  }(FlexOrderDirective));
  
  /**
   * @fileoverview added by tsickle
   * Generated from: flex/flex-offset/flex-offset.ts
   * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
   */
  var FlexOffsetStyleBuilder = /** @class */ (function (_super) {
      __extends(FlexOffsetStyleBuilder, _super);
      function FlexOffsetStyleBuilder() {
          return _super !== null && _super.apply(this, arguments) || this;
      }
      /**
       * @param {?} offset
       * @param {?} parent
       * @return {?}
       */
      FlexOffsetStyleBuilder.prototype.buildStyles = /**
       * @param {?} offset
       * @param {?} parent
       * @return {?}
       */
      function (offset, parent) {
          var _a;
          if (offset === '') {
              offset = '0';
          }
          /** @type {?} */
          var isPercent = String(offset).indexOf('%') > -1;
          /** @type {?} */
          var isPx = String(offset).indexOf('px') > -1;
          if (!isPx && !isPercent && !isNaN(+offset)) {
              offset = offset + '%';
          }
          /** @type {?} */
          var horizontalLayoutKey = parent.isRtl ? 'margin-right' : 'margin-left';
          /** @type {?} */
          var styles = isFlowHorizontal(parent.layout) ? (_a = {}, _a[horizontalLayoutKey] = "" + offset, _a) : { 'margin-top': "" + offset };
          return styles;
      };
      /** @nocollapse */ FlexOffsetStyleBuilder.ɵprov = core.ɵɵdefineInjectable({ factory: function FlexOffsetStyleBuilder_Factory() { return new FlexOffsetStyleBuilder(); }, token: FlexOffsetStyleBuilder, providedIn: "root" });
      FlexOffsetStyleBuilder.decorators = [
          { type: core.Injectable, args: [{ providedIn: 'root' },] }
      ];
      return FlexOffsetStyleBuilder;
  }(core$1.StyleBuilder));
  /** @type {?} */
  var inputs$4 = [
      'fxFlexOffset', 'fxFlexOffset.xs', 'fxFlexOffset.sm', 'fxFlexOffset.md',
      'fxFlexOffset.lg', 'fxFlexOffset.xl', 'fxFlexOffset.lt-sm', 'fxFlexOffset.lt-md',
      'fxFlexOffset.lt-lg', 'fxFlexOffset.lt-xl', 'fxFlexOffset.gt-xs', 'fxFlexOffset.gt-sm',
      'fxFlexOffset.gt-md', 'fxFlexOffset.gt-lg'
  ];
  /** @type {?} */
  var selector$4 = "\n  [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md],\n  [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md],\n  [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm],\n  [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]\n";
  /**
   * 'flex-offset' flexbox styling directive
   * Configures the 'margin-left' of the element in a layout container
   */
  var FlexOffsetDirective = /** @class */ (function (_super) {
      __extends(FlexOffsetDirective, _super);
      function FlexOffsetDirective(elRef, directionality, styleBuilder, marshal, styler) {
          var _this = _super.call(this, elRef, styleBuilder, styler, marshal) || this;
          _this.directionality = directionality;
          _this.DIRECTIVE_KEY = 'flex-offset';
          _this.init([_this.directionality.change]);
          // Parent DOM `layout-gap` with affect the nested child with `flex-offset`
          if (_this.parentElement) {
              _this.marshal
                  .trackValue(_this.parentElement, 'layout-gap')
                  .pipe(operators.takeUntil(_this.destroySubject))
                  .subscribe(_this.triggerUpdate.bind(_this));
          }
          return _this;
      }
      // *********************************************
      // Protected methods
      // *********************************************
      /**
       * 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.
       */
      // *********************************************
      // Protected methods
      // *********************************************
      /**
       * 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.
       * @protected
       * @param {?=} value
       * @return {?}
       */
      FlexOffsetDirective.prototype.updateWithValue = 
      // *********************************************
      // Protected methods
      // *********************************************
      /**
       * 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.
       * @protected
       * @param {?=} value
       * @return {?}
       */
      function (value) {
          if (value === void 0) { value = ''; }
          // The flex-direction of this element's flex container. Defaults to 'row'.
          /** @type {?} */
          var layout = this.getFlexFlowDirection((/** @type {?} */ (this.parentElement)), true);
          /** @type {?} */
          var isRtl = this.directionality.value === 'rtl';
          if (layout === 'row' && isRtl) {
              this.styleCache = flexOffsetCacheRowRtl;
          }
          else if (layout === 'row' && !isRtl) {
              this.styleCache = flexOffsetCacheRowLtr;
          }
          else if (layout === 'column' && isRtl) {
              this.styleCache = flexOffsetCacheColumnRtl;
          }
          else if (layout === 'column' && !isRtl) {
              this.styleCache = flexOffsetCacheColumnLtr;
          }
          this.addStyles(value + '', { layout: layout, isRtl: isRtl });
      };
      FlexOffsetDirective.decorators = [
          { type: core.Directive }
      ];
      /** @nocollapse */
      FlexOffsetDirective.ctorParameters = function () { return [
          { type: core.ElementRef },
          { type: bidi.Directionality },
          { type: FlexOffsetStyleBuilder },
          { type: core$1.MediaMarshaller },
          { type: core$1.StyleUtils }
      ]; };
      return FlexOffsetDirective;
  }(core$1.BaseDirective2));
  var DefaultFlexOffsetDirective = /** @class */ (function (_super) {
      __extends(DefaultFlexOffsetDirective, _super);
      function DefaultFlexOffsetDirective() {
          var _this = _super !== null && _super.apply(this, arguments) || this;
          _this.inputs = inputs$4;
          return _this;
      }
      DefaultFlexOffsetDirective.decorators = [
          { type: core.Directive, args: [{ selector: selector$4, inputs: inputs$4 },] }
      ];
      return DefaultFlexOffsetDirective;
  }(FlexOffsetDirective));
  /** @type {?} */
  var flexOffsetCacheRowRtl = new Map();
  /** @type {?} */
  var flexOffsetCacheColumnRtl = new Map();
  /** @type {?} */
  var flexOffsetCacheRowLtr = new Map();
  /** @type {?} */
  var flexOffsetCacheColumnLtr = new Map();
  
  /**
   * @fileoverview added by tsickle
   * Generated from: flex/flex-align/flex-align.ts
   * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
   */
  var FlexAlignStyleBuilder = /** @class */ (function (_super) {
      __extends(FlexAlignStyleBuilder, _super);
      function FlexAlignStyleBuilder() {
          return _super !== null && _super.apply(this, arguments) || this;
      }
      /**
       * @param {?} input
       * @return {?}
       */
      FlexAlignStyleBuilder.prototype.buildStyles = /**
       * @param {?} input
       * @return {?}
       */
      function (input) {
          input = input || 'stretch';
          /** @type {?} */
          var styles = {};
          // Cross-axis
          switch (input) {
              case 'start':
                  styles['align-self'] = 'flex-start';
                  break;
              case 'end':
                  styles['align-self'] = 'flex-end';
                  break;
              default:
                  styles['align-self'] = input;
                  break;
          }
          return styles;
      };
      /** @nocollapse */ FlexAlignStyleBuilder.ɵprov = core.ɵɵdefineInjectable({ factory: function FlexAlignStyleBuilder_Factory() { return new FlexAlignStyleBuilder(); }, token: FlexAlignStyleBuilder, providedIn: "root" });
      FlexAlignStyleBuilder.decorators = [
          { type: core.Injectable, args: [{ providedIn: 'root' },] }
      ];
      return FlexAlignStyleBuilder;
  }(core$1.StyleBuilder));
  /** @type {?} */
  var inputs$5 = [
      'fxFlexAlign', 'fxFlexAlign.xs', 'fxFlexAlign.sm', 'fxFlexAlign.md',
      'fxFlexAlign.lg', 'fxFlexAlign.xl', 'fxFlexAlign.lt-sm', 'fxFlexAlign.lt-md',
      'fxFlexAlign.lt-lg', 'fxFlexAlign.lt-xl', 'fxFlexAlign.gt-xs', 'fxFlexAlign.gt-sm',
      'fxFlexAlign.gt-md', 'fxFlexAlign.gt-lg'
  ];
  /** @type {?} */
  var selector$5 = "\n  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],\n  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],\n  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],\n  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]\n";
  /**
   * '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 = /** @class */ (function (_super) {
      __extends(FlexAlignDirective, _super);
      function FlexAlignDirective(elRef, styleUtils, styleBuilder, marshal) {
          var _this = _super.call(this, elRef, styleBuilder, styleUtils, marshal) || this;
          _this.DIRECTIVE_KEY = 'flex-align';
          _this.styleCache = flexAlignCache;
          _this.init();
          return _this;
      }
      FlexAlignDirective.decorators = [
          { type: core.Directive }
      ];
      /** @nocollapse */
      FlexAlignDirective.ctorParameters = function () { return [
          { type: core.ElementRef },
          { type: core$1.StyleUtils },
          { type: FlexAlignStyleBuilder },
          { type: core$1.MediaMarshaller }
      ]; };
      return FlexAlignDirective;
  }(core$1.BaseDirective2));
  /** @type {?} */
  var flexAlignCache = new Map();
  var DefaultFlexAlignDirective = /** @class */ (function (_super) {
      __extends(DefaultFlexAlignDirective, _super);
      function DefaultFlexAlignDirective() {
          var _this = _super !== null && _super.apply(this, arguments) || this;
          _this.inputs = inputs$5;
          return _this;
      }
      DefaultFlexAlignDirective.decorators = [
          { type: core.Directive, args: [{ selector: selector$5, inputs: inputs$5 },] }
      ];
      return DefaultFlexAlignDirective;
  }(FlexAlignDirective));
  
  /**
   * @fileoverview added by tsickle
   * Generated from: flex/flex-fill/flex-fill.ts
   * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
   */
  /** @type {?} */
  var FLEX_FILL_CSS = {
      'margin': 0,
      'width': '100%',
      'height': '100%',
      'min-width': '100%',
      'min-height': '100%'
  };
  var FlexFillStyleBuilder = /** @class */ (function (_super) {
      __extends(FlexFillStyleBuilder, _super);
      function FlexFillStyleBuilder() {
          return _super !== null && _super.apply(this, arguments) || this;
      }
      /**
       * @param {?} _input
       * @return {?}
       */
      FlexFillStyleBuilder.prototype.buildStyles = /**
       * @param {?} _input
       * @return {?}
       */
      function (_input) {
          return FLEX_FILL_CSS;
      };
      /** @nocollapse */ FlexFillStyleBuilder.ɵprov = core.ɵɵdefineInjectable({ factory: function FlexFillStyleBuilder_Factory() { return new FlexFillStyleBuilder(); }, token: FlexFillStyleBuilder, providedIn: "root" });
      FlexFillStyleBuilder.decorators = [
          { type: core.Injectable, args: [{ providedIn: 'root' },] }
      ];
      return FlexFillStyleBuilder;
  }(core$1.StyleBuilder));
  /**
   * 'fxFill' flexbox styling directive
   *  Maximizes width and height of element in a layout container
   *
   *  NOTE: fxFill is NOT responsive API!!
   */
  var FlexFillDirective = /** @class */ (function (_super) {
      __extends(FlexFillDirective, _super);
      function FlexFillDirective(elRef, styleUtils, styleBuilder, marshal) {
          var _this = _super.call(this, elRef, styleBuilder, styleUtils, marshal) || this;
          _this.styleCache = flexFillCache;
          _this.addStyles('');
          return _this;
      }
      FlexFillDirective.decorators = [
          { type: core.Directive, args: [{ selector: "[fxFill], [fxFlexFill]" },] }
      ];
      /** @nocollapse */
      FlexFillDirective.ctorParameters = function () { return [
          { type: core.ElementRef },
          { type: core$1.StyleUtils },
          { type: FlexFillStyleBuilder },
          { type: core$1.MediaMarshaller }
      ]; };
      return FlexFillDirective;
  }(core$1.BaseDirective2));
  /** @type {?} */
  var flexFillCache = new Map();
  
  /**
   * @fileoverview added by tsickle
   * Generated from: flex/layout-align/layout-align.ts
   * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
   */
  var LayoutAlignStyleBuilder = /** @class */ (function (_super) {
      __extends(LayoutAlignStyleBuilder, _super);
      function LayoutAlignStyleBuilder() {
          return _super !== null && _super.apply(this, arguments) || this;
      }
      /**
       * @param {?} align
       * @param {?} parent
       * @return {?}
       */
      LayoutAlignStyleBuilder.prototype.buildStyles = /**
       * @param {?} align
       * @param {?} parent
       * @return {?}
       */
      function (align, parent) {
          /** @type {?} */
          var css = {};
          var _a = align.split(' '), mainAxis = _a[0], crossAxis = _a[1];
          // Main axis
          switch (mainAxis) {
              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 (crossAxis) {
              case 'start':
              case 'flex-start':
                  css['align-items'] = css['align-content'] = 'flex-start';
                  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 'space-between':
                  css['align-content'] = 'space-between';
                  css['align-items'] = 'stretch';
                  break;
              case 'space-around':
                  css['align-content'] = 'space-around';
                  css['align-items'] = 'stretch';
                  break;
              case 'baseline':
                  css['align-content'] = 'stretch';
                  css['align-items'] = 'baseline';
                  break;
              case 'stretch':
              default: // 'stretch'
                  css['align-items'] = css['align-content'] = 'stretch'; // default cross axis
                  break;
          }
          return (/** @type {?} */ (extendObject(css, {
              'display': parent.inline ? 'inline-flex' : 'flex',
              'flex-direction': parent.layout,
              'box-sizing': 'border-box',
              'max-width': crossAxis === 'stretch' ?
                  !isFlowHorizontal(parent.layout) ? '100%' : null : null,
              'max-height': crossAxis === 'stretch' ?
                  isFlowHorizontal(parent.layout) ? '100%' : null : null,
          })));
      };
      /** @nocollapse */ LayoutAlignStyleBuilder.ɵprov = core.ɵɵdefineInjectable({ factory: function LayoutAlignStyleBuilder_Factory() { return new LayoutAlignStyleBuilder(); }, token: LayoutAlignStyleBuilder, providedIn: "root" });
      LayoutAlignStyleBuilder.decorators = [
          { type: core.Injectable, args: [{ providedIn: 'root' },] }
      ];
      return LayoutAlignStyleBuilder;
  }(core$1.StyleBuilder));
  /** @type {?} */
  var inputs$6 = [
      'fxLayoutAlign', 'fxLayoutAlign.xs', 'fxLayoutAlign.sm', 'fxLayoutAlign.md',
      'fxLayoutAlign.lg', 'fxLayoutAlign.xl', 'fxLayoutAlign.lt-sm', 'fxLayoutAlign.lt-md',
      'fxLayoutAlign.lt-lg', 'fxLayoutAlign.lt-xl', 'fxLayoutAlign.gt-xs', 'fxLayoutAlign.gt-sm',
      'fxLayoutAlign.gt-md', 'fxLayoutAlign.gt-lg'
  ];
  /** @type {?} */
  var selector$6 = "\n  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],\n  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],\n  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],\n  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]\n";
  /**
   * '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 = /** @class */ (function (_super) {
      __extends(LayoutAlignDirective, _super);
      function LayoutAlignDirective(elRef, styleUtils, styleBuilder, marshal) {
          var _this = _super.call(this, elRef, styleBuilder, styleUtils, marshal) || this;
          _this.DIRECTIVE_KEY = 'layout-align';
          _this.layout = 'row'; // default flex-direction
          // default flex-direction
          _this.inline = false; // default inline value
          _this.init();
          _this.marshal.trackValue(_this.nativeElement, 'layout')
              .pipe(operators.takeUntil(_this.destroySubject))
              .subscribe(_this.onLayoutChange.bind(_this));
          return _this;
      }
      // *********************************************
      // Protected methods
      // *********************************************
      /**
       *
       */
      // *********************************************
      // Protected methods
      // *********************************************
      /**
       *
       * @protected
       * @param {?} value
       * @return {?}
       */
      LayoutAlignDirective.prototype.updateWithValue = 
      // *********************************************
      // Protected methods
      // *********************************************
      /**
       *
       * @protected
       * @param {?} value
       * @return {?}
       */
      function (value) {
          /** @type {?} */
          var layout = this.layout || 'row';
          /** @type {?} */
          var inline = this.inline;
          if (layout === 'row' && inline) {
              this.styleCache = layoutAlignHorizontalInlineCache;
          }
          else if (layout === 'row' && !inline) {
              this.styleCache = layoutAlignHorizontalCache;
          }
          else if (layout === 'row-reverse' && inline) {
              this.styleCache = layoutAlignHorizontalRevInlineCache;
          }
          else if (layout === 'row-reverse' && !inline) {
              this.styleCache = layoutAlignHorizontalRevCache;
          }
          else if (layout === 'column' && inline) {
              this.styleCache = layoutAlignVerticalInlineCache;
          }
          else if (layout === 'column' && !inline) {
              this.styleCache = layoutAlignVerticalCache;
          }
          else if (layout === 'column-reverse' && inline) {
              this.styleCache = layoutAlignVerticalRevInlineCache;
          }
          else if (layout === 'column-reverse' && !inline) {
              this.styleCache = layoutAlignVerticalRevCache;
          }
          this.addStyles(value, { layout: layout, inline: inline });
      };
      /**
       * Cache the parent container 'flex-direction' and update the 'flex' styles
       */
      /**
       * Cache the parent container 'flex-direction' and update the 'flex' styles
       * @protected
       * @param {?} matcher
       * @return {?}
       */
      LayoutAlignDirective.prototype.onLayoutChange = /**
       * Cache the parent container 'flex-direction' and update the 'flex' styles
       * @protected
       * @param {?} matcher
       * @return {?}
       */
      function (matcher) {
          var _this = this;
          /** @type {?} */
          var layoutKeys = matcher.value.split(' ');
          this.layout = layoutKeys[0];
          this.inline = matcher.value.includes('inline');
          if (!LAYOUT_VALUES.find((/**
           * @param {?} x
           * @return {?}
           */
          function (x) { return x === _this.layout; }))) {
              this.layout = 'row';
          }
          this.triggerUpdate();
      };
      LayoutAlignDirective.decorators = [
          { type: core.Directive }
      ];
      /** @nocollapse */
      LayoutAlignDirective.ctorParameters = function () { return [
          { type: core.ElementRef },
          { type: core$1.StyleUtils },
          { type: LayoutAlignStyleBuilder },
          { type: core$1.MediaMarshaller }
      ]; };
      return LayoutAlignDirective;
  }(core$1.BaseDirective2));
  var DefaultLayoutAlignDirective = /** @class */ (function (_super) {
      __extends(DefaultLayoutAlignDirective, _super);
      function DefaultLayoutAlignDirective() {
          var _this = _super !== null && _super.apply(this, arguments) || this;
          _this.inputs = inputs$6;
          return _this;
      }
      DefaultLayoutAlignDirective.decorators = [
          { type: core.Directive, args: [{ selector: selector$6, inputs: inputs$6 },] }
      ];
      return DefaultLayoutAlignDirective;
  }(LayoutAlignDirective));
  /** @type {?} */
  var layoutAlignHorizontalCache = new Map();
  /** @type {?} */
  var layoutAlignVerticalCache = new Map();
  /** @type {?} */
  var layoutAlignHorizontalRevCache = new Map();
  /** @type {?} */
  var layoutAlignVerticalRevCache = new Map();
  /** @type {?} */
  var layoutAlignHorizontalInlineCache = new Map();
  /** @type {?} */
  var layoutAlignVerticalInlineCache = new Map();
  /** @type {?} */
  var layoutAlignHorizontalRevInlineCache = new Map();
  /** @type {?} */
  var layoutAlignVerticalRevInlineCache = new Map();
  
  /**
   * @fileoverview added by tsickle
   * Generated from: flex/module.ts
   * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
   */
  /** @type {?} */
  var ALL_DIRECTIVES = [
      DefaultLayoutDirective,
      DefaultLayoutGapDirective,
      DefaultLayoutAlignDirective,
      DefaultFlexOrderDirective,
      DefaultFlexOffsetDirective,
      FlexFillDirective,
      DefaultFlexAlignDirective,
      DefaultFlexDirective,
  ];
  /**
   * *****************************************************************
   * Define module for the Flex API
   * *****************************************************************
   */
  var FlexModule = /** @class */ (function () {
      function FlexModule() {
      }
      FlexModule.decorators = [
          { type: core.NgModule, args: [{
                      imports: [core$1.CoreModule, bidi.BidiModule],
                      declarations: __spreadArray([], ALL_DIRECTIVES),
                      exports: __spreadArray([], ALL_DIRECTIVES)
                  },] }
      ];
      return FlexModule;
  }());
  
  exports.FlexModule = FlexModule;
  exports.FlexStyleBuilder = FlexStyleBuilder;
  exports.FlexDirective = FlexDirective;
  exports.DefaultFlexDirective = DefaultFlexDirective;
  exports.FlexAlignStyleBuilder = FlexAlignStyleBuilder;
  exports.FlexAlignDirective = FlexAlignDirective;
  exports.DefaultFlexAlignDirective = DefaultFlexAlignDirective;
  exports.FlexFillStyleBuilder = FlexFillStyleBuilder;
  exports.FlexFillDirective = FlexFillDirective;
  exports.FlexOffsetStyleBuilder = FlexOffsetStyleBuilder;
  exports.FlexOffsetDirective = FlexOffsetDirective;
  exports.DefaultFlexOffsetDirective = DefaultFlexOffsetDirective;
  exports.FlexOrderStyleBuilder = FlexOrderStyleBuilder;
  exports.FlexOrderDirective = FlexOrderDirective;
  exports.DefaultFlexOrderDirective = DefaultFlexOrderDirective;
  exports.LayoutStyleBuilder = LayoutStyleBuilder;
  exports.LayoutDirective = LayoutDirective;
  exports.DefaultLayoutDirective = DefaultLayoutDirective;
  exports.LayoutAlignStyleBuilder = LayoutAlignStyleBuilder;
  exports.LayoutAlignDirective = LayoutAlignDirective;
  exports.DefaultLayoutAlignDirective = DefaultLayoutAlignDirective;
  exports.LayoutGapStyleBuilder = LayoutGapStyleBuilder;
  exports.LayoutGapDirective = LayoutGapDirective;
  exports.DefaultLayoutGapDirective = DefaultLayoutGapDirective;
  
  Object.defineProperty(exports, '__esModule', { value: true });
  
  })));
  //# sourceMappingURL=flex-layout-flex.umd.js.map
  