@ngbracket/ngx-layout/fesm2022/ngbracket-ngx-layout-flex.mjs.map

ngbracket/ngx-layout =======

{"version":3,"file":"ngbracket-ngx-layout-flex.mjs","sources":["../../../../projects/libs/flex-layout/flex/flex-align/flex-align.ts","../../../../projects/libs/flex-layout/flex/flex-fill/flex-fill.ts","../../../../projects/libs/flex-layout/flex/flex-offset/flex-offset.ts","../../../../projects/libs/flex-layout/flex/flex-order/flex-order.ts","../../../../projects/libs/flex-layout/flex/flex/flex.ts","../../../../projects/libs/flex-layout/flex/layout-align/layout-align.ts","../../../../projects/libs/flex-layout/flex/layout-gap/layout-gap.ts","../../../../projects/libs/flex-layout/flex/layout/layout.ts","../../../../projects/libs/flex-layout/flex/module.ts","../../../../projects/libs/flex-layout/flex/public-api.ts","../../../../projects/libs/flex-layout/flex/ngbracket-ngx-layout-flex.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { Directive, ElementRef, Injectable } from '@angular/core';\nimport {\n  BaseDirective2,\n  MediaMarshaller,\n  StyleBuilder,\n  StyleDefinition,\n  StyleUtils,\n} from '@ngbracket/ngx-layout/core';\n\n@Injectable({ providedIn: 'root' })\nexport class FlexAlignStyleBuilder extends StyleBuilder {\n  buildStyles(input: string) {\n    input = input || 'stretch';\n    const styles: StyleDefinition = {};\n\n    // Cross-axis\n    switch (input) {\n      case 'start':\n        styles['align-self'] = 'flex-start';\n        break;\n      case 'end':\n        styles['align-self'] = 'flex-end';\n        break;\n      default:\n        styles['align-self'] = input;\n        break;\n    }\n\n    return styles;\n  }\n}\n\nconst inputs = [\n  'fxFlexAlign',\n  'fxFlexAlign.xs',\n  'fxFlexAlign.sm',\n  'fxFlexAlign.md',\n  'fxFlexAlign.lg',\n  'fxFlexAlign.xl',\n  'fxFlexAlign.lt-sm',\n  'fxFlexAlign.lt-md',\n  'fxFlexAlign.lt-lg',\n  'fxFlexAlign.lt-xl',\n  'fxFlexAlign.gt-xs',\n  'fxFlexAlign.gt-sm',\n  'fxFlexAlign.gt-md',\n  'fxFlexAlign.gt-lg',\n];\nconst selector = `\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`;\n\n/**\n * 'flex-align' flexbox styling directive\n * Allows element-specific overrides for cross-axis alignments in a layout container\n * @see https://css-tricks.com/almanac/properties/a/align-self/\n */\n@Directive()\nexport class FlexAlignDirective extends BaseDirective2 {\n  protected override DIRECTIVE_KEY = 'flex-align';\n\n  constructor(\n    elRef: ElementRef,\n    styleUtils: StyleUtils,\n    styleBuilder: FlexAlignStyleBuilder,\n    marshal: MediaMarshaller\n  ) {\n    super(elRef, styleBuilder, styleUtils, marshal);\n    this.init();\n  }\n\n  protected override styleCache = flexAlignCache;\n}\n\nconst flexAlignCache: Map<string, StyleDefinition> = new Map();\n\n@Directive({ selector, inputs })\nexport class DefaultFlexAlignDirective extends FlexAlignDirective {\n  protected override inputs = inputs;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { Directive, ElementRef, Injectable } from '@angular/core';\nimport {\n  BaseDirective2,\n  MediaMarshaller,\n  StyleBuilder,\n  StyleDefinition,\n  StyleUtils,\n} from '@ngbracket/ngx-layout/core';\n\nconst FLEX_FILL_CSS = {\n  margin: 0,\n  width: '100%',\n  height: '100%',\n  'min-width': '100%',\n  'min-height': '100%',\n};\n\n@Injectable({ providedIn: 'root' })\nexport class FlexFillStyleBuilder extends StyleBuilder {\n  buildStyles(_input: string) {\n    return FLEX_FILL_CSS;\n  }\n}\n\n/**\n * 'fxFill' flexbox styling directive\n *  Maximizes width and height of element in a layout container\n *\n *  NOTE: fxFill is NOT responsive API!!\n */\n@Directive({ selector: `[fxFill], [fxFlexFill]` })\nexport class FlexFillDirective extends BaseDirective2 {\n  constructor(\n    elRef: ElementRef,\n    styleUtils: StyleUtils,\n    styleBuilder: FlexFillStyleBuilder,\n    marshal: MediaMarshaller\n  ) {\n    super(elRef, styleBuilder, styleUtils, marshal);\n    this.addStyles('');\n  }\n\n  protected override styleCache = flexFillCache;\n}\n\nconst flexFillCache: Map<string, StyleDefinition> = new Map();\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { Directionality } from '@angular/cdk/bidi';\nimport {\n  Directive,\n  ElementRef,\n  Inject,\n  Injectable,\n  OnChanges,\n} from '@angular/core';\nimport {\n  BaseDirective2,\n  LayoutConfigOptions,\n  LAYOUT_CONFIG,\n  MediaMarshaller,\n  StyleBuilder,\n  StyleDefinition,\n  StyleUtils,\n  ɵmultiply as multiply,\n} from '@ngbracket/ngx-layout/core';\nimport { isFlowHorizontal } from '@ngbracket/ngx-layout/_private-utils';\nimport { takeUntil } from 'rxjs/operators';\n\nexport interface FlexOffsetParent {\n  layout: string;\n  isRtl: boolean;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class FlexOffsetStyleBuilder extends StyleBuilder {\n  constructor(@Inject(LAYOUT_CONFIG) private _config: LayoutConfigOptions) {\n    super();\n  }\n\n  buildStyles(offset: string, parent: FlexOffsetParent) {\n    offset ||= '0';\n    offset = multiply(offset, this._config.multiplier);\n    const isPercent = String(offset).indexOf('%') > -1;\n    const isPx = String(offset).indexOf('px') > -1;\n    if (!isPx && !isPercent && !isNaN(+offset)) {\n      offset = `${offset}%`;\n    }\n    const horizontalLayoutKey = parent.isRtl ? 'margin-right' : 'margin-left';\n    const styles: StyleDefinition = isFlowHorizontal(parent.layout)\n      ? { [horizontalLayoutKey]: offset }\n      : { 'margin-top': offset };\n\n    return styles;\n  }\n}\n\nconst inputs = [\n  'fxFlexOffset',\n  'fxFlexOffset.xs',\n  'fxFlexOffset.sm',\n  'fxFlexOffset.md',\n  'fxFlexOffset.lg',\n  'fxFlexOffset.xl',\n  'fxFlexOffset.lt-sm',\n  'fxFlexOffset.lt-md',\n  'fxFlexOffset.lt-lg',\n  'fxFlexOffset.lt-xl',\n  'fxFlexOffset.gt-xs',\n  'fxFlexOffset.gt-sm',\n  'fxFlexOffset.gt-md',\n  'fxFlexOffset.gt-lg',\n];\nconst selector = `\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`;\n\n/**\n * 'flex-offset' flexbox styling directive\n * Configures the 'margin-left' of the element in a layout container\n */\n@Directive()\nexport class FlexOffsetDirective extends BaseDirective2 implements OnChanges {\n  protected override DIRECTIVE_KEY = 'flex-offset';\n\n  constructor(\n    elRef: ElementRef,\n    protected directionality: Directionality,\n    styleBuilder: FlexOffsetStyleBuilder,\n    marshal: MediaMarshaller,\n    styler: StyleUtils\n  ) {\n    super(elRef, styleBuilder, styler, marshal);\n    this.init([this.directionality.change]);\n    // Parent DOM `layout-gap` with affect the nested child with `flex-offset`\n    if (this.parentElement) {\n      this.marshal\n        .trackValue(this.parentElement, 'layout-gap')\n        .pipe(takeUntil(this.destroySubject))\n        .subscribe(this.triggerUpdate.bind(this));\n    }\n  }\n\n  // *********************************************\n  // Protected methods\n  // *********************************************\n\n  /**\n   * Using the current fxFlexOffset value, update the inline CSS\n   * NOTE: this will assign `margin-left` if the parent flex-direction == 'row',\n   *       otherwise `margin-top` is used for the offset.\n   */\n  protected override updateWithValue(value: string | number = ''): void {\n    // The flex-direction of this element's flex container. Defaults to 'row'.\n    const layout = this.getFlexFlowDirection(this.parentElement!, true);\n    const isRtl = this.directionality.value === 'rtl';\n    if (layout === 'row' && isRtl) {\n      this.styleCache = flexOffsetCacheRowRtl;\n    } else if (layout === 'row' && !isRtl) {\n      this.styleCache = flexOffsetCacheRowLtr;\n    } else if (layout === 'column' && isRtl) {\n      this.styleCache = flexOffsetCacheColumnRtl;\n    } else if (layout === 'column' && !isRtl) {\n      this.styleCache = flexOffsetCacheColumnLtr;\n    }\n    this.addStyles(value + '', { layout, isRtl });\n  }\n}\n\n@Directive({ selector, inputs })\nexport class DefaultFlexOffsetDirective extends FlexOffsetDirective {\n  protected override inputs = inputs;\n}\n\nconst flexOffsetCacheRowRtl: Map<string, StyleDefinition> = new Map();\nconst flexOffsetCacheColumnRtl: Map<string, StyleDefinition> = new Map();\nconst flexOffsetCacheRowLtr: Map<string, StyleDefinition> = new Map();\nconst flexOffsetCacheColumnLtr: Map<string, StyleDefinition> = new Map();\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { Directive, ElementRef, Injectable, OnChanges } from '@angular/core';\nimport {\n  BaseDirective2,\n  MediaMarshaller,\n  StyleBuilder,\n  StyleDefinition,\n  StyleUtils,\n} from '@ngbracket/ngx-layout/core';\n\n@Injectable({ providedIn: 'root' })\nexport class FlexOrderStyleBuilder extends StyleBuilder {\n  buildStyles(value: string) {\n    return { order: (value && parseInt(value, 10)) || '' };\n  }\n}\n\nconst inputs = [\n  'fxFlexOrder',\n  'fxFlexOrder.xs',\n  'fxFlexOrder.sm',\n  'fxFlexOrder.md',\n  'fxFlexOrder.lg',\n  'fxFlexOrder.xl',\n  'fxFlexOrder.lt-sm',\n  'fxFlexOrder.lt-md',\n  'fxFlexOrder.lt-lg',\n  'fxFlexOrder.lt-xl',\n  'fxFlexOrder.gt-xs',\n  'fxFlexOrder.gt-sm',\n  'fxFlexOrder.gt-md',\n  'fxFlexOrder.gt-lg',\n];\nconst selector = `\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`;\n\n/**\n * 'flex-order' flexbox styling directive\n * Configures the positional ordering of the element in a sorted layout container\n * @see https://css-tricks.com/almanac/properties/o/order/\n */\n@Directive()\nexport class FlexOrderDirective extends BaseDirective2 implements OnChanges {\n  protected override DIRECTIVE_KEY = 'flex-order';\n\n  constructor(\n    elRef: ElementRef,\n    styleUtils: StyleUtils,\n    styleBuilder: FlexOrderStyleBuilder,\n    marshal: MediaMarshaller\n  ) {\n    super(elRef, styleBuilder, styleUtils, marshal);\n    this.init();\n  }\n\n  protected override styleCache = flexOrderCache;\n\n  override updateWithValue(input: string) {\n    super.updateWithValue(input);\n\n    if (this.parentElement) {\n      this.marshal.triggerUpdate(this.parentElement, 'layout-gap');\n    }\n  }\n}\n\nconst flexOrderCache: Map<string, StyleDefinition> = new Map();\n\n@Directive({ selector, inputs })\nexport class DefaultFlexOrderDirective extends FlexOrderDirective {\n  protected override inputs = inputs;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {\n  Directive,\n  ElementRef,\n  Inject,\n  Injectable,\n  Input,\n  OnInit,\n} from '@angular/core';\nimport {\n  BaseDirective2,\n  ElementMatcher,\n  LayoutConfigOptions,\n  LAYOUT_CONFIG,\n  MediaMarshaller,\n  StyleBuilder,\n  StyleDefinition,\n  StyleUtils,\n  validateBasis,\n} from '@ngbracket/ngx-layout/core';\nimport { takeUntil } from 'rxjs/operators';\n\nimport {\n  extendObject,\n  isFlowHorizontal,\n} from '@ngbracket/ngx-layout/_private-utils';\n\ninterface FlexBuilderParent {\n  direction: string;\n  hasWrap: boolean;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class FlexStyleBuilder extends StyleBuilder {\n  constructor(\n    @Inject(LAYOUT_CONFIG) protected layoutConfig: LayoutConfigOptions\n  ) {\n    super();\n  }\n  buildStyles(input: string, parent: FlexBuilderParent) {\n    let [grow, shrink, ...basisParts]: (string | number)[] = input.split(' ');\n    let basis = basisParts.join(' ');\n\n    // The flex-direction of this element's flex container. Defaults to 'row'.\n    const direction =\n      parent.direction.indexOf('column') > -1 ? 'column' : 'row';\n\n    const max = isFlowHorizontal(direction) ? 'max-width' : 'max-height';\n    const min = isFlowHorizontal(direction) ? 'min-width' : 'min-height';\n\n    const hasCalc = String(basis).indexOf('calc') > -1;\n    const usingCalc = hasCalc || basis === 'auto';\n    const isPercent = String(basis).indexOf('%') > -1 && !hasCalc;\n    const hasUnits =\n      String(basis).indexOf('px') > -1 ||\n      String(basis).indexOf('rem') > -1 ||\n      String(basis).indexOf('em') > -1 ||\n      String(basis).indexOf('vw') > -1 ||\n      String(basis).indexOf('vh') > -1;\n\n    let isValue = hasCalc || hasUnits;\n\n    grow = grow == '0' ? 0 : grow;\n    shrink = shrink == '0' ? 0 : shrink;\n\n    // make box inflexible when shrink and grow are both zero\n    // should not set a min when the grow is zero\n    // should not set a max when the shrink is zero\n    const isFixed = !grow && !shrink;\n\n    let css: { [key: string]: string | number | null } = {};\n\n    // flex-basis allows you to specify the initial/starting main-axis size of the element,\n    // before anything else is computed. It can either be a percentage or an absolute value.\n    // It is, however, not the breaking point for flex-grow/shrink properties\n    //\n    // flex-grow can be seen as this:\n    //   0: Do not stretch. Either size to element's content width, or obey 'flex-basis'.\n    //   1: (Default value). Stretch; will be the same size to all other flex items on\n    //       the same row since they have a default value of 1.\n    //   ≥2 (integer n): Stretch. Will be n times the size of other elements\n    //      with 'flex-grow: 1' on the same row.\n\n    // Use `null` to clear existing styles.\n    const clearStyles = {\n      'max-width': null,\n      'max-height': null,\n      'min-width': null,\n      'min-height': null,\n    };\n    switch (basis || '') {\n      case '':\n        const useColumnBasisZero =\n          this.layoutConfig.useColumnBasisZero !== false;\n        basis =\n          direction === 'row'\n            ? '0%'\n            : useColumnBasisZero\n            ? '0.000000001px'\n            : 'auto';\n        break;\n      case 'initial': // default\n      case 'nogrow':\n        grow = 0;\n        basis = 'auto';\n        break;\n      case 'grow':\n        basis = '100%';\n        break;\n      case 'noshrink':\n        shrink = 0;\n        basis = 'auto';\n        break;\n      case 'auto':\n        break;\n      case 'none':\n        grow = 0;\n        shrink = 0;\n        basis = 'auto';\n        break;\n      default:\n        // Defaults to percentage sizing unless `px` is explicitly set\n        if (!isValue && !isPercent && !isNaN(basis as any)) {\n          basis = basis + '%';\n        }\n\n        // Fix for issue 280\n        if (basis === '0%') {\n          isValue = true;\n        }\n\n        if (basis === '0px') {\n          basis = '0%';\n        }\n\n        // fix issue #5345\n        if (hasCalc) {\n          css = extendObject(clearStyles, {\n            'flex-grow': grow,\n            'flex-shrink': shrink,\n            'flex-basis': isValue ? basis : '100%',\n          });\n        } else {\n          css = extendObject(clearStyles, {\n            flex: `${grow} ${shrink} ${isValue ? basis : '100%'}`,\n          });\n        }\n\n        break;\n    }\n\n    if (!(css['flex'] || css['flex-grow'])) {\n      if (hasCalc) {\n        css = extendObject(clearStyles, {\n          'flex-grow': grow,\n          'flex-shrink': shrink,\n          'flex-basis': basis,\n        });\n      } else {\n        css = extendObject(clearStyles, {\n          flex: `${grow} ${shrink} ${basis}`,\n        });\n      }\n    }\n\n    // Fix for issues 277, 534, and 728\n    if (\n      basis !== '0%' &&\n      basis !== '0px' &&\n      basis !== '0.000000001px' &&\n      basis !== 'auto'\n    ) {\n      css[min] = isFixed || (isValue && grow) ? basis : null;\n      css[max] = isFixed || (!usingCalc && shrink) ? basis : null;\n    }\n\n    // Fix for issue 528\n    if (!css[min] && !css[max]) {\n      if (hasCalc) {\n        css = extendObject(clearStyles, {\n          'flex-grow': grow,\n          'flex-shrink': shrink,\n          'flex-basis': basis,\n        });\n      } else {\n        css = extendObject(clearStyles, {\n          flex: `${grow} ${shrink} ${basis}`,\n        });\n      }\n    } else {\n      // Fix for issue 660\n      if (parent.hasWrap) {\n        css[hasCalc ? 'flex-basis' : 'flex'] = css[max]\n          ? hasCalc\n            ? css[max]\n            : `${grow} ${shrink} ${css[max]}`\n          : hasCalc\n          ? css[min]\n          : `${grow} ${shrink} ${css[min]}`;\n      }\n    }\n\n    return extendObject(css, { 'box-sizing': 'border-box' }) as StyleDefinition;\n  }\n}\n\nconst inputs = [\n  'fxFlex',\n  'fxFlex.xs',\n  'fxFlex.sm',\n  'fxFlex.md',\n  'fxFlex.lg',\n  'fxFlex.xl',\n  'fxFlex.lt-sm',\n  'fxFlex.lt-md',\n  'fxFlex.lt-lg',\n  'fxFlex.lt-xl',\n  'fxFlex.gt-xs',\n  'fxFlex.gt-sm',\n  'fxFlex.gt-md',\n  'fxFlex.gt-lg',\n];\nconst selector = `\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`;\n\n/**\n * Directive to control the size of a flex item using flex-basis, flex-grow, and flex-shrink.\n * Corresponds to the css `flex` shorthand property.\n *\n * @see https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n */\n@Directive()\nexport class FlexDirective extends BaseDirective2 implements OnInit {\n  protected override DIRECTIVE_KEY = 'flex';\n  protected direction?: string = undefined;\n  protected wrap?: boolean = undefined;\n\n  @Input('fxShrink')\n  get shrink(): string {\n    return this.flexShrink;\n  }\n  set shrink(value: string) {\n    this.flexShrink = value || '1';\n    this.triggerReflow();\n  }\n\n  @Input('fxGrow')\n  get grow(): string {\n    return this.flexGrow;\n  }\n  set grow(value: string) {\n    this.flexGrow = value || '1';\n    this.triggerReflow();\n  }\n\n  protected flexGrow = '1';\n  protected flexShrink = '1';\n\n  constructor(\n    elRef: ElementRef,\n    styleUtils: StyleUtils,\n    @Inject(LAYOUT_CONFIG) protected layoutConfig: LayoutConfigOptions,\n    styleBuilder: FlexStyleBuilder,\n    protected override marshal: MediaMarshaller\n  ) {\n    super(elRef, styleBuilder, styleUtils, marshal);\n    this.init();\n  }\n\n  ngOnInit() {\n    if (this.parentElement) {\n      this.marshal\n        .trackValue(this.parentElement, 'layout')\n        .pipe(takeUntil(this.destroySubject))\n        .subscribe(this.onLayoutChange.bind(this));\n      this.marshal\n        .trackValue(this.nativeElement, 'layout-align')\n        .pipe(takeUntil(this.destroySubject))\n        .subscribe(this.triggerReflow.bind(this));\n    }\n  }\n\n  /**\n   * Caches the parent container's 'flex-direction' and updates the element's style.\n   * Used as a handler for layout change events from the parent flex container.\n   */\n  protected onLayoutChange(matcher: ElementMatcher) {\n    const layout: string = matcher.value;\n    const layoutParts = layout.split(' ');\n    this.direction = layoutParts[0];\n    this.wrap = layoutParts[1] !== undefined && layoutParts[1] === 'wrap';\n    this.triggerUpdate();\n  }\n\n  /** Input to this is exclusively the basis input value */\n  protected override updateWithValue(value: string) {\n    const addFlexToParent = this.layoutConfig.addFlexToParent !== false;\n    if (this.direction === undefined) {\n      this.direction = this.getFlexFlowDirection(\n        this.parentElement!,\n        addFlexToParent\n      );\n    }\n    if (this.wrap === undefined) {\n      this.wrap = this.hasWrap(this.parentElement!);\n    }\n    const direction = this.direction;\n    const isHorizontal = direction.startsWith('row');\n    const hasWrap = this.wrap;\n    if (isHorizontal && hasWrap) {\n      this.styleCache = flexRowWrapCache;\n    } else if (isHorizontal && !hasWrap) {\n      this.styleCache = flexRowCache;\n    } else if (!isHorizontal && hasWrap) {\n      this.styleCache = flexColumnWrapCache;\n    } else if (!isHorizontal && !hasWrap) {\n      this.styleCache = flexColumnCache;\n    }\n    const basis = String(value).replace(';', '');\n    const parts = validateBasis(basis, this.flexGrow, this.flexShrink);\n    this.addStyles(parts.join(' '), { direction, hasWrap });\n  }\n\n  /** Trigger a style reflow, usually based on a shrink/grow input event */\n  protected triggerReflow() {\n    const activatedValue = this.activatedValue;\n    if (activatedValue !== undefined) {\n      const parts = validateBasis(\n        activatedValue + '',\n        this.flexGrow,\n        this.flexShrink\n      );\n      this.marshal.updateElement(\n        this.nativeElement,\n        this.DIRECTIVE_KEY,\n        parts.join(' ')\n      );\n    }\n  }\n}\n\n@Directive({ inputs, selector })\nexport class DefaultFlexDirective extends FlexDirective {\n  protected override inputs = inputs;\n}\n\nconst flexRowCache: Map<string, StyleDefinition> = new Map();\nconst flexColumnCache: Map<string, StyleDefinition> = new Map();\nconst flexRowWrapCache: Map<string, StyleDefinition> = new Map();\nconst flexColumnWrapCache: Map<string, StyleDefinition> = new Map();\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { Directive, ElementRef, Injectable } from '@angular/core';\nimport {\n  BaseDirective2,\n  ElementMatcher,\n  MediaMarshaller,\n  StyleBuilder,\n  StyleDefinition,\n  StyleUtils,\n} from '@ngbracket/ngx-layout/core';\nimport { takeUntil } from 'rxjs/operators';\n\nimport {\n  extendObject,\n  isFlowHorizontal,\n  LAYOUT_VALUES,\n} from '@ngbracket/ngx-layout/_private-utils';\n\nexport interface LayoutAlignParent {\n  layout: string;\n  inline: boolean;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class LayoutAlignStyleBuilder extends StyleBuilder {\n  buildStyles(align: string, parent: LayoutAlignParent) {\n    const css: StyleDefinition = {},\n      [mainAxis, crossAxis] = align.split(' ');\n\n    // Main axis\n    switch (mainAxis) {\n      case 'center':\n        css['justify-content'] = 'center';\n        break;\n      case 'space-around':\n        css['justify-content'] = 'space-around';\n        break;\n      case 'space-between':\n        css['justify-content'] = 'space-between';\n        break;\n      case 'space-evenly':\n        css['justify-content'] = 'space-evenly';\n        break;\n      case 'end':\n      case 'flex-end':\n        css['justify-content'] = 'flex-end';\n        break;\n      case 'start':\n      case 'flex-start':\n      default: // default main axis\n        css['justify-content'] = 'flex-start';\n        break;\n    }\n\n    // Cross-axis\n    switch (crossAxis) {\n      case 'start':\n      case 'flex-start':\n        css['align-items'] = css['align-content'] = 'flex-start';\n        break;\n      case 'center':\n        css['align-items'] = css['align-content'] = 'center';\n        break;\n      case 'end':\n      case 'flex-end':\n        css['align-items'] = css['align-content'] = 'flex-end';\n        break;\n      case 'space-between':\n        css['align-content'] = 'space-between';\n        css['align-items'] = 'stretch';\n        break;\n      case 'space-around':\n        css['align-content'] = 'space-around';\n        css['align-items'] = 'stretch';\n        break;\n      case 'baseline':\n        css['align-content'] = 'stretch';\n        css['align-items'] = 'baseline';\n        break;\n      case 'stretch':\n      default: // 'stretch'\n        // default cross axis\n        css['align-items'] = css['align-content'] = 'stretch';\n        break;\n    }\n\n    return extendObject(css, {\n      display: parent.inline ? 'inline-flex' : 'flex',\n      'flex-direction': parent.layout,\n      'box-sizing': 'border-box',\n      'max-width':\n        crossAxis === 'stretch'\n          ? !isFlowHorizontal(parent.layout)\n            ? '100%'\n            : null\n          : null,\n      'max-height':\n        crossAxis === 'stretch'\n          ? isFlowHorizontal(parent.layout)\n            ? '100%'\n            : null\n          : null,\n    }) as StyleDefinition;\n  }\n}\n\nconst inputs = [\n  'fxLayoutAlign',\n  'fxLayoutAlign.xs',\n  'fxLayoutAlign.sm',\n  'fxLayoutAlign.md',\n  'fxLayoutAlign.lg',\n  'fxLayoutAlign.xl',\n  'fxLayoutAlign.lt-sm',\n  'fxLayoutAlign.lt-md',\n  'fxLayoutAlign.lt-lg',\n  'fxLayoutAlign.lt-xl',\n  'fxLayoutAlign.gt-xs',\n  'fxLayoutAlign.gt-sm',\n  'fxLayoutAlign.gt-md',\n  'fxLayoutAlign.gt-lg',\n];\nconst selector = `\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`;\n\n/**\n * 'layout-align' flexbox styling directive\n *  Defines positioning of child elements along main and cross axis in a layout container\n *  Optional values: {main-axis} values or {main-axis cross-axis} value pairs\n *\n *  @see https://css-tricks.com/almanac/properties/j/justify-content/\n *  @see https://css-tricks.com/almanac/properties/a/align-items/\n *  @see https://css-tricks.com/almanac/properties/a/align-content/\n */\n@Directive()\nexport class LayoutAlignDirective extends BaseDirective2 {\n  protected override DIRECTIVE_KEY = 'layout-align';\n  protected layout = 'row'; // default flex-direction\n  protected inline = false; // default inline value\n\n  constructor(\n    elRef: ElementRef,\n    styleUtils: StyleUtils,\n    styleBuilder: LayoutAlignStyleBuilder,\n    marshal: MediaMarshaller\n  ) {\n    super(elRef, styleBuilder, styleUtils, marshal);\n    this.init();\n    this.marshal\n      .trackValue(this.nativeElement, 'layout')\n      .pipe(takeUntil(this.destroySubject))\n      .subscribe(this.onLayoutChange.bind(this));\n  }\n\n  // *********************************************\n  // Protected methods\n  // *********************************************\n\n  /**\n   *\n   */\n  protected override updateWithValue(value: string) {\n    const layout = this.layout || 'row';\n    const inline = this.inline;\n    if (layout === 'row' && inline) {\n      this.styleCache = layoutAlignHorizontalInlineCache;\n    } else if (layout === 'row' && !inline) {\n      this.styleCache = layoutAlignHorizontalCache;\n    } else if (layout === 'row-reverse' && inline) {\n      this.styleCache = layoutAlignHorizontalRevInlineCache;\n    } else if (layout === 'row-reverse' && !inline) {\n      this.styleCache = layoutAlignHorizontalRevCache;\n    } else if (layout === 'column' && inline) {\n      this.styleCache = layoutAlignVerticalInlineCache;\n    } else if (layout === 'column' && !inline) {\n      this.styleCache = layoutAlignVerticalCache;\n    } else if (layout === 'column-reverse' && inline) {\n      this.styleCache = layoutAlignVerticalRevInlineCache;\n    } else if (layout === 'column-reverse' && !inline) {\n      this.styleCache = layoutAlignVerticalRevCache;\n    }\n    this.addStyles(value, { layout, inline });\n  }\n\n  /**\n   * Cache the parent container 'flex-direction' and update the 'flex' styles\n   */\n  protected onLayoutChange(matcher: ElementMatcher) {\n    const layoutKeys: string[] = matcher.value.split(' ');\n    this.layout = layoutKeys[0];\n    this.inline = matcher.value.includes('inline');\n    if (!LAYOUT_VALUES.find((x) => x === this.layout)) {\n      this.layout = 'row';\n    }\n    this.triggerUpdate();\n  }\n}\n\n@Directive({ selector, inputs })\nexport class DefaultLayoutAlignDirective extends LayoutAlignDirective {\n  protected override inputs = inputs;\n}\n\nconst layoutAlignHorizontalCache: Map<string, StyleDefinition> = new Map();\nconst layoutAlignVerticalCache: Map<string, StyleDefinition> = new Map();\nconst layoutAlignHorizontalRevCache: Map<string, StyleDefinition> = new Map();\nconst layoutAlignVerticalRevCache: Map<string, StyleDefinition> = new Map();\nconst layoutAlignHorizontalInlineCache: Map<string, StyleDefinition> =\n  new Map();\nconst layoutAlignVerticalInlineCache: Map<string, StyleDefinition> = new Map();\nconst layoutAlignHorizontalRevInlineCache: Map<string, StyleDefinition> =\n  new Map();\nconst layoutAlignVerticalRevInlineCache: Map<string, StyleDefinition> =\n  new Map();\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { Directionality } from '@angular/cdk/bidi';\nimport {\n  AfterContentInit,\n  Directive,\n  ElementRef,\n  Inject,\n  Injectable,\n  NgZone,\n  OnDestroy,\n} from '@angular/core';\nimport { LAYOUT_VALUES } from '@ngbracket/ngx-layout/_private-utils';\nimport {\n  BaseDirective2,\n  ElementMatcher,\n  LAYOUT_CONFIG,\n  LayoutConfigOptions,\n  MediaMarshaller,\n  StyleBuilder,\n  StyleDefinition,\n  StyleUtils,\n  ɵmultiply as multiply,\n} from '@ngbracket/ngx-layout/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nexport interface LayoutGapParent {\n  directionality: string;\n  items: HTMLElement[];\n  layout: string;\n}\n\nconst CLEAR_MARGIN_CSS = {\n  'margin-left': null,\n  'margin-right': null,\n  'margin-top': null,\n  'margin-bottom': null,\n};\n\n@Injectable({ providedIn: 'root' })\nexport class LayoutGapStyleBuilder extends StyleBuilder {\n  constructor(\n    private _styler: StyleUtils,\n    @Inject(LAYOUT_CONFIG) private _config: LayoutConfigOptions\n  ) {\n    super();\n  }\n\n  buildStyles(gapValue: string, parent: LayoutGapParent) {\n    if (gapValue.endsWith(GRID_SPECIFIER)) {\n      gapValue = gapValue.slice(0, gapValue.indexOf(GRID_SPECIFIER));\n      gapValue = multiply(gapValue, this._config.multiplier);\n\n      // Add the margin to the host element\n      return buildGridMargin(gapValue, parent.directionality);\n    } else {\n      return {};\n    }\n  }\n\n  override sideEffect(\n    gapValue: string,\n    _styles: StyleDefinition,\n    parent: LayoutGapParent\n  ) {\n    const items = parent.items;\n    if (gapValue.endsWith(GRID_SPECIFIER)) {\n      gapValue = gapValue.slice(0, gapValue.indexOf(GRID_SPECIFIER));\n      gapValue = multiply(gapValue, this._config.multiplier);\n      // For each `element` children, set the padding\n      const paddingStyles = buildGridPadding(gapValue, parent.directionality);\n      this._styler.applyStyleToElements(paddingStyles, parent.items);\n    } else {\n      gapValue = multiply(gapValue, this._config.multiplier);\n      gapValue = this.addFallbackUnit(gapValue);\n\n      const lastItem = items.pop()!;\n\n      // For each `element` children EXCEPT the last,\n      // set the margin right/bottom styles...\n      const gapCss = buildGapCSS(gapValue, parent);\n      this._styler.applyStyleToElements(gapCss, items);\n\n      // Clear all gaps for all visible elements\n      this._styler.applyStyleToElements(CLEAR_MARGIN_CSS, [lastItem]);\n    }\n  }\n\n  private addFallbackUnit(value: string) {\n    return !isNaN(+value) ? `${value}${this._config.defaultUnit}` : value;\n  }\n}\n\nconst inputs = [\n  'fxLayoutGap',\n  'fxLayoutGap.xs',\n  'fxLayoutGap.sm',\n  'fxLayoutGap.md',\n  'fxLayoutGap.lg',\n  'fxLayoutGap.xl',\n  'fxLayoutGap.lt-sm',\n  'fxLayoutGap.lt-md',\n  'fxLayoutGap.lt-lg',\n  'fxLayoutGap.lt-xl',\n  'fxLayoutGap.gt-xs',\n  'fxLayoutGap.gt-sm',\n  'fxLayoutGap.gt-md',\n  'fxLayoutGap.gt-lg',\n];\nconst selector = `\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`;\n\n/**\n * 'layout-padding' styling directive\n *  Defines padding of child elements in a layout container\n */\n@Directive()\nexport class LayoutGapDirective\n  extends BaseDirective2\n  implements AfterContentInit, OnDestroy\n{\n  protected layout = 'row'; // default flex-direction\n  protected override DIRECTIVE_KEY = 'layout-gap';\n  protected observerSubject = new Subject<void>();\n\n  /** Special accessor to query for all child 'element' nodes regardless of type, class, etc */\n  protected get childrenNodes(): HTMLElement[] {\n    const obj = this.nativeElement.children;\n    const buffer: any[] = [];\n\n    // iterate backwards ensuring that length is an UInt32\n    for (let i = obj.length; i--; ) {\n      buffer[i] = obj[i];\n    }\n    return buffer;\n  }\n\n  constructor(\n    elRef: ElementRef,\n    protected zone: NgZone,\n    protected directionality: Directionality,\n    protected styleUtils: StyleUtils,\n    styleBuilder: LayoutGapStyleBuilder,\n    marshal: MediaMarshaller\n  ) {\n    super(elRef, styleBuilder, styleUtils, marshal);\n    const extraTriggers = [\n      this.directionality.change,\n      this.observerSubject.asObservable(),\n    ];\n    this.init(extraTriggers);\n    this.marshal\n      .trackValue(this.nativeElement, 'layout')\n      .pipe(takeUntil(this.destroySubject))\n      .subscribe(this.onLayoutChange.bind(this));\n  }\n\n  // *********************************************\n  // Lifecycle Methods\n  // *********************************************\n\n  ngAfterContentInit() {\n    this.buildChildObservable();\n    this.triggerUpdate();\n  }\n\n  override ngOnDestroy() {\n    super.ngOnDestroy();\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  // *********************************************\n  // Protected methods\n  // *********************************************\n\n  /**\n   * Cache the parent container 'flex-direction' and update the 'margin' styles\n   */\n  protected onLayoutChange(matcher: ElementMatcher) {\n    const layout: string = matcher.value;\n\n    // Make sure to filter out 'wrap' option\n    let newDirection = layout.split(' ')[0];\n\n    if (!LAYOUT_VALUES.find((x) => x === newDirection)) {\n      newDirection = 'row';\n    }\n\n    // Clear the previous style before we change the layout\n    if (this.layout && this.layout !== newDirection) {\n      this.clearStyles();\n    }\n\n    this.layout = newDirection;\n    this.triggerUpdate();\n  }\n\n  /**\n   *\n   */\n  protected override updateWithValue(value: string) {\n    // Gather all non-hidden Element nodes\n    const items = this.childrenNodes\n      .filter((el) => el.nodeType === 1 && this.willDisplay(el))\n      .sort((a, b) => {\n        const orderA = +this.styler.lookupStyle(a, 'order');\n        const orderB = +this.styler.lookupStyle(b, 'order');\n        if (isNaN(orderA) || isNaN(orderB) || orderA === orderB) {\n          return 0;\n        } else {\n          return orderA > orderB ? 1 : -1;\n        }\n      });\n\n    if (items.length > 0) {\n      const directionality = this.directionality.value;\n      const layout = this.layout;\n      if (layout === 'row' && directionality === 'rtl') {\n        this.styleCache = layoutGapCacheRowRtl;\n      } else if (layout === 'row' && directionality !== 'rtl') {\n        this.styleCache = layoutGapCacheRowLtr;\n      } else if (layout === 'column' && directionality === 'rtl') {\n        this.styleCache = layoutGapCacheColumnRtl;\n      } else if (layout === 'column' && directionality !== 'rtl') {\n        this.styleCache = layoutGapCacheColumnLtr;\n      }\n      this.addStyles(value, { directionality, items, layout });\n    }\n  }\n\n  /** We need to override clearStyles because in most cases mru isn't populated */\n  protected override clearStyles() {\n    const gridMode = Object.keys(this.mru).length > 0;\n    const childrenStyle = gridMode\n      ? 'padding'\n      : getMarginType(this.directionality.value, this.layout);\n\n    // If there are styles on the parent remove them\n    if (gridMode) {\n      super.clearStyles();\n    }\n\n    // Then remove the children styles too\n    this.styleUtils.applyStyleToElements(\n      { [childrenStyle]: '' },\n      this.childrenNodes\n    );\n  }\n\n  /** Determine if an element will show or hide based on current activation */\n  protected willDisplay(source: HTMLElement): boolean {\n    const value = this.marshal.getValue(source, 'show-hide');\n    return (\n      value === true ||\n      (value === undefined &&\n        this.styleUtils.lookupStyle(source, 'display') !== 'none')\n    );\n  }\n\n  protected buildChildObservable(): void {\n    this.zone.runOutsideAngular(() => {\n      if (typeof MutationObserver !== 'undefined') {\n        this.observer = new MutationObserver((mutations: MutationRecord[]) => {\n          const validatedChanges = (it: MutationRecord): boolean => {\n            return (\n              (it.addedNodes && it.addedNodes.length > 0) ||\n              (it.removedNodes && it.removedNodes.length > 0)\n            );\n          };\n\n          // update gap styles only for child 'added' or 'removed' events\n          if (mutations.some(validatedChanges)) {\n            this.observerSubject.next();\n          }\n        });\n        this.observer.observe(this.nativeElement, { childList: true });\n      }\n    });\n  }\n\n  protected observer?: MutationObserver;\n}\n\n@Directive({ selector, inputs })\nexport class DefaultLayoutGapDirective extends LayoutGapDirective {\n  protected override inputs = inputs;\n}\n\nconst layoutGapCacheRowRtl: Map<string, StyleDefinition> = new Map();\nconst layoutGapCacheColumnRtl: Map<string, StyleDefinition> = new Map();\nconst layoutGapCacheRowLtr: Map<string, StyleDefinition> = new Map();\nconst layoutGapCacheColumnLtr: Map<string, StyleDefinition> = new Map();\n\nconst GRID_SPECIFIER = ' grid';\n\nfunction buildGridPadding(\n  value: string,\n  directionality: string\n): StyleDefinition {\n  const [between, below] = value.split(' ');\n  const bottom = below ?? between;\n  let paddingRight = '0px',\n    paddingBottom = bottom,\n    paddingLeft = '0px';\n\n  if (directionality === 'rtl') {\n    paddingLeft = between;\n  } else {\n    paddingRight = between;\n  }\n\n  return { padding: `0px ${paddingRight} ${paddingBottom} ${paddingLeft}` };\n}\n\nfunction buildGridMargin(\n  value: string,\n  directionality: string\n): StyleDefinition {\n  const [between, below] = value.split(' ');\n  const bottom = below ?? between;\n  const minus = (str: string) => `-${str}`;\n  let marginRight = '0px',\n    marginBottom = minus(bottom),\n    marginLeft = '0px';\n\n  if (directionality === 'rtl') {\n    marginLeft = minus(between);\n  } else {\n    marginRight = minus(between);\n  }\n\n  return { margin: `0px ${marginRight} ${marginBottom} ${marginLeft}` };\n}\n\nfunction getMarginType(directionality: string, layout: string) {\n  switch (layout) {\n    case 'column':\n      return 'margin-bottom';\n    case 'column-reverse':\n      return 'margin-top';\n    case 'row':\n      return directionality === 'rtl' ? 'margin-left' : 'margin-right';\n    case 'row-reverse':\n      return directionality === 'rtl' ? 'margin-right' : 'margin-left';\n    default:\n      return directionality === 'rtl' ? 'margin-left' : 'margin-right';\n  }\n}\n\nfunction buildGapCSS(\n  gapValue: string,\n  parent: { directionality: string; layout: string }\n): StyleDefinition {\n  const key = getMarginType(parent.directionality, parent.layout);\n  const margins: { [key: string]: string | null } = { ...CLEAR_MARGIN_CSS };\n  margins[key] = gapValue;\n  return margins;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {\n  Directive,\n  ElementRef,\n  Inject,\n  Injectable,\n  OnChanges,\n} from '@angular/core';\nimport {\n  BaseDirective2,\n  LayoutConfigOptions,\n  LAYOUT_CONFIG,\n  MediaMarshaller,\n  StyleBuilder,\n  StyleDefinition,\n  StyleUtils,\n} from '@ngbracket/ngx-layout/core';\n\nimport { buildLayoutCSS } from '@ngbracket/ngx-layout/_private-utils';\n\nexport interface LayoutStyleDisplay {\n  readonly display: string;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class LayoutStyleBuilder extends StyleBuilder {\n  buildStyles(input: string, { display }: LayoutStyleDisplay) {\n    const css = buildLayoutCSS(input);\n    return {\n      ...css,\n      display: display === 'none' ? display : css.display,\n    };\n  }\n}\n\nconst inputs = [\n  'fxLayout',\n  'fxLayout.xs',\n  'fxLayout.sm',\n  'fxLayout.md',\n  'fxLayout.lg',\n  'fxLayout.xl',\n  'fxLayout.lt-sm',\n  'fxLayout.lt-md',\n  'fxLayout.lt-lg',\n  'fxLayout.lt-xl',\n  'fxLayout.gt-xs',\n  'fxLayout.gt-sm',\n  'fxLayout.gt-md',\n  'fxLayout.gt-lg',\n];\nconst 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`;\n\n/**\n * 'layout' flexbox styling directive\n * Defines the positioning flow direction for the child elements: row or column\n * Optional values: column or row (default)\n * @see https://css-tricks.com/almanac/properties/f/flex-direction/\n *\n */\n@Directive()\nexport class LayoutDirective extends BaseDirective2 implements OnChanges {\n  protected override DIRECTIVE_KEY = 'layout';\n\n  constructor(\n    elRef: ElementRef,\n    styleUtils: StyleUtils,\n    styleBuilder: LayoutStyleBuilder,\n    marshal: MediaMarshaller,\n    @Inject(LAYOUT_CONFIG) private _config: LayoutConfigOptions\n  ) {\n    super(elRef, styleBuilder, styleUtils, marshal);\n    this.init();\n  }\n\n  protected override updateWithValue(input: string) {\n    const detectLayoutDisplay = this._config.detectLayoutDisplay;\n    const display = detectLayoutDisplay\n      ? this.styler.lookupStyle(this.nativeElement, 'display')\n      : '';\n    this.styleCache = cacheMap.get(display) ?? new Map();\n    cacheMap.set(display, this.styleCache);\n\n    if (this.currentValue !== input) {\n      this.addStyles(input, { display });\n      this.currentValue = input;\n    }\n  }\n}\n\n@Directive({ selector, inputs })\nexport class DefaultLayoutDirective extends LayoutDirective {\n  protected override inputs = inputs;\n}\n\ntype CacheMap = Map<string, StyleDefinition>;\nconst cacheMap = new Map<string, CacheMap>();\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport { BidiModule } from '@angular/cdk/bidi';\nimport { NgModule } from '@angular/core';\nimport { CoreModule } from '@ngbracket/ngx-layout/core';\n\nimport { DefaultFlexAlignDirective } from './flex-align/flex-align';\nimport { FlexFillDirective } from './flex-fill/flex-fill';\nimport { DefaultFlexOffsetDirective } from './flex-offset/flex-offset';\nimport { DefaultFlexOrderDirective } from './flex-order/flex-order';\nimport { DefaultFlexDirective } from './flex/flex';\nimport { DefaultLayoutAlignDirective } from './layout-align/layout-align';\nimport { DefaultLayoutGapDirective } from './layout-gap/layout-gap';\nimport { DefaultLayoutDirective } from './layout/layout';\n\nconst ALL_DIRECTIVES = [\n  DefaultLayoutDirective,\n  DefaultLayoutGapDirective,\n  DefaultLayoutAlignDirective,\n  DefaultFlexOrderDirective,\n  DefaultFlexOffsetDirective,\n  FlexFillDirective,\n  DefaultFlexAlignDirective,\n  DefaultFlexDirective,\n];\n\n/**\n * *****************************************************************\n * Define module for the Flex API\n * *****************************************************************\n */\n\n@NgModule({\n  imports: [CoreModule, BidiModule],\n  declarations: [...ALL_DIRECTIVES],\n  exports: [...ALL_DIRECTIVES],\n})\nexport class FlexModule {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './module';\n\nexport * from './flex/flex';\nexport * from './flex-align/flex-align';\nexport * from './flex-fill/flex-fill';\nexport * from './flex-offset/flex-offset';\nexport * from './flex-order/flex-order';\nexport * from './layout/layout';\nexport * from './layout-align/layout-align';\nexport * from './layout-gap/layout-gap';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["inputs","selector","multiply","i1","i2"],"mappings":"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