@angular/flex-layout
Version:
Angular Flex-Layout =======
957 lines (949 loc) • 61.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Directive, Inject, Input, NgModule } from '@angular/core';
import * as i2 from '@angular/cdk/bidi';
import { BidiModule } from '@angular/cdk/bidi';
import * as i1 from '@angular/flex-layout/core';
import { StyleBuilder, BaseDirective2, LAYOUT_CONFIG, validateBasis, CoreModule } from '@angular/flex-layout/core';
import { buildLayoutCSS, LAYOUT_VALUES, isFlowHorizontal, extendObject } from '@angular/flex-layout/_private-utils';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
/**
* @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
*/
class LayoutStyleBuilder extends StyleBuilder {
buildStyles(input) {
return buildLayoutCSS(input);
}
}
LayoutStyleBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LayoutStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
LayoutStyleBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LayoutStyleBuilder, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LayoutStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
const inputs$6 = [
'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'
];
const selector$6 = `
[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]
`;
/**
* '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/
*
*/
class LayoutDirective extends BaseDirective2 {
constructor(elRef, styleUtils, styleBuilder, marshal) {
super(elRef, styleBuilder, styleUtils, marshal);
this.DIRECTIVE_KEY = 'layout';
this.styleCache = layoutCache;
this.init();
}
}
LayoutDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LayoutDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtils }, { token: LayoutStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive });
LayoutDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: LayoutDirective, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LayoutDirective, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.StyleUtils }, { type: LayoutStyleBuilder }, { type: i1.MediaMarshaller }]; } });
class DefaultLayoutDirective extends LayoutDirective {
constructor() {
super(...arguments);
this.inputs = inputs$6;
}
}
DefaultLayoutDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DefaultLayoutDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
DefaultLayoutDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: DefaultLayoutDirective, 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", inputs: { fxLayout: "fxLayout", "fxLayout.xs": "fxLayout.xs", "fxLayout.sm": "fxLayout.sm", "fxLayout.md": "fxLayout.md", "fxLayout.lg": "fxLayout.lg", "fxLayout.xl": "fxLayout.xl", "fxLayout.lt-sm": "fxLayout.lt-sm", "fxLayout.lt-md": "fxLayout.lt-md", "fxLayout.lt-lg": "fxLayout.lt-lg", "fxLayout.lt-xl": "fxLayout.lt-xl", "fxLayout.gt-xs": "fxLayout.gt-xs", "fxLayout.gt-sm": "fxLayout.gt-sm", "fxLayout.gt-md": "fxLayout.gt-md", "fxLayout.gt-lg": "fxLayout.gt-lg" }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DefaultLayoutDirective, decorators: [{
type: Directive,
args: [{ selector: selector$6, inputs: inputs$6 }]
}] });
const layoutCache = new Map();
/**
* @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
*/
const CLEAR_MARGIN_CSS = {
'margin-left': null,
'margin-right': null,
'margin-top': null,
'margin-bottom': null
};
class LayoutGapStyleBuilder extends StyleBuilder {
constructor(_styler) {
super();
this._styler = _styler;
}
buildStyles(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 {};
}
}
sideEffect(gapValue, _styles, parent) {
const items = parent.items;
if (gapValue.endsWith(GRID_SPECIFIER)) {
gapValue = gapValue.slice(0, gapValue.indexOf(GRID_SPECIFIER));
// For each `element` children, set the padding
const paddingStyles = buildGridPadding(gapValue, parent.directionality);
this._styler.applyStyleToElements(paddingStyles, parent.items);
}
else {
const lastItem = items.pop();
// For each `element` children EXCEPT the last,
// set the margin right/bottom styles...
const gapCss = buildGapCSS(gapValue, parent);
this._styler.applyStyleToElements(gapCss, items);
// Clear all gaps for all visible elements
this._styler.applyStyleToElements(CLEAR_MARGIN_CSS, [lastItem]);
}
}
}
LayoutGapStyleBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LayoutGapStyleBuilder, deps: [{ token: i1.StyleUtils }], target: i0.ɵɵFactoryTarget.Injectable });
LayoutGapStyleBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LayoutGapStyleBuilder, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LayoutGapStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: function () { return [{ type: i1.StyleUtils }]; } });
const inputs$5 = [
'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'
];
const selector$5 = `
[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]
`;
/**
* 'layout-padding' styling directive
* Defines padding of child elements in a layout container
*/
class LayoutGapDirective extends BaseDirective2 {
constructor(elRef, zone, directionality, styleUtils, styleBuilder, marshal) {
super(elRef, styleBuilder, styleUtils, marshal);
this.zone = zone;
this.directionality = directionality;
this.styleUtils = styleUtils;
this.layout = 'row'; // default flex-direction
this.DIRECTIVE_KEY = 'layout-gap';
this.observerSubject = new Subject();
const extraTriggers = [this.directionality.change, this.observerSubject.asObservable()];
this.init(extraTriggers);
this.marshal
.trackValue(this.nativeElement, 'layout')
.pipe(takeUntil(this.destroySubject))
.subscribe(this.onLayoutChange.bind(this));
}
/** Special accessor to query for all child 'element' nodes regardless of type, class, etc */
get childrenNodes() {
const obj = this.nativeElement.children;
const buffer = [];
// iterate backwards ensuring that length is an UInt32
for (let i = obj.length; i--;) {
buffer[i] = obj[i];
}
return buffer;
}
// *********************************************
// Lifecycle Methods
// *********************************************
ngAfterContentInit() {
this.buildChildObservable();
this.triggerUpdate();
}
ngOnDestroy() {
super.ngOnDestroy();
if (this.observer) {
this.observer.disconnect();
}
}
// *********************************************
// Protected methods
// *********************************************
/**
* Cache the parent container 'flex-direction' and update the 'margin' styles
*/
onLayoutChange(matcher) {
const layout = matcher.value;
// Make sure to filter out 'wrap' option
const direction = layout.split(' ');
this.layout = direction[0];
if (!LAYOUT_VALUES.find(x => x === this.layout)) {
this.layout = 'row';
}
this.triggerUpdate();
}
/**
*
*/
updateWithValue(value) {
// Gather all non-hidden Element nodes
const items = this.childrenNodes
.filter(el => el.nodeType === 1 && this.willDisplay(el))
.sort((a, b) => {
const orderA = +this.styler.lookupStyle(a, 'order');
const 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) {
const directionality = this.directionality.value;
const 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, items, layout });
}
}
/** We need to override clearStyles because in most cases mru isn't populated */
clearStyles() {
const gridMode = Object.keys(this.mru).length > 0;
const childrenStyle = gridMode ? 'padding' :
getMarginType(this.directionality.value, this.layout);
// If there are styles on the parent remove them
if (gridMode) {
super.clearStyles();
}
// Then remove the children styles too
this.styleUtils.applyStyleToElements({ [childrenStyle]: '' }, this.childrenNodes);
}
/** Determine if an element will show or hide based on current activation */
willDisplay(source) {
const value = this.marshal.getValue(source, 'show-hide');
return value === true ||
(value === undefined && this.styleUtils.lookupStyle(source, 'display') !== 'none');
}
buildChildObservable() {
this.zone.runOutsideAngular(() => {
if (typeof MutationObserver !== 'undefined') {
this.observer = new MutationObserver((mutations) => {
const validatedChanges = (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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LayoutGapDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i2.Directionality }, { token: i1.StyleUtils }, { token: LayoutGapStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive });
LayoutGapDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: LayoutGapDirective, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LayoutGapDirective, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i2.Directionality }, { type: i1.StyleUtils }, { type: LayoutGapStyleBuilder }, { type: i1.MediaMarshaller }]; } });
class DefaultLayoutGapDirective extends LayoutGapDirective {
constructor() {
super(...arguments);
this.inputs = inputs$5;
}
}
DefaultLayoutGapDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DefaultLayoutGapDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
DefaultLayoutGapDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: DefaultLayoutGapDirective, 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", inputs: { fxLayoutGap: "fxLayoutGap", "fxLayoutGap.xs": "fxLayoutGap.xs", "fxLayoutGap.sm": "fxLayoutGap.sm", "fxLayoutGap.md": "fxLayoutGap.md", "fxLayoutGap.lg": "fxLayoutGap.lg", "fxLayoutGap.xl": "fxLayoutGap.xl", "fxLayoutGap.lt-sm": "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md": "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg": "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl": "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs": "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm": "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md": "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg": "fxLayoutGap.gt-lg" }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DefaultLayoutGapDirective, decorators: [{
type: Directive,
args: [{ selector: selector$5, inputs: inputs$5 }]
}] });
const layoutGapCacheRowRtl = new Map();
const layoutGapCacheColumnRtl = new Map();
const layoutGapCacheRowLtr = new Map();
const layoutGapCacheColumnLtr = new Map();
const GRID_SPECIFIER = ' grid';
function buildGridPadding(value, directionality) {
const [between, below] = value.split(' ');
const bottom = below || between;
let paddingRight = '0px', paddingBottom = bottom, paddingLeft = '0px';
if (directionality === 'rtl') {
paddingLeft = between;
}
else {
paddingRight = between;
}
return { 'padding': `0px ${paddingRight} ${paddingBottom} ${paddingLeft}` };
}
function buildGridMargin(value, directionality) {
const [between, below] = value.split(' ');
const bottom = below || between;
const minus = (str) => `-${str}`;
let marginRight = '0px', marginBottom = minus(bottom), marginLeft = '0px';
if (directionality === 'rtl') {
marginLeft = minus(between);
}
else {
marginRight = minus(between);
}
return { 'margin': `0px ${marginRight} ${marginBottom} ${marginLeft}` };
}
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';
}
}
function buildGapCSS(gapValue, parent) {
const key = getMarginType(parent.directionality, parent.layout);
const margins = Object.assign({}, CLEAR_MARGIN_CSS);
margins[key] = gapValue;
return margins;
}
/**
* @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
*/
class FlexStyleBuilder extends StyleBuilder {
constructor(layoutConfig) {
super();
this.layoutConfig = layoutConfig;
}
buildStyles(input, parent) {
let [grow, shrink, ...basisParts] = input.split(' ');
let basis = basisParts.join(' ');
// The flex-direction of this element's flex container. Defaults to 'row'.
const direction = (parent.direction.indexOf('column') > -1) ? 'column' : 'row';
const max = isFlowHorizontal(direction) ? 'max-width' : 'max-height';
const min = isFlowHorizontal(direction) ? 'min-width' : 'min-height';
const hasCalc = String(basis).indexOf('calc') > -1;
const usingCalc = hasCalc || (basis === 'auto');
const isPercent = String(basis).indexOf('%') > -1 && !hasCalc;
const 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;
let 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
const isFixed = !grow && !shrink;
let 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.
const clearStyles = {
'max-width': null,
'max-height': null,
'min-width': null,
'min-height': null
};
switch (basis || '') {
case '':
const 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(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 extendObject(css, { 'box-sizing': 'border-box' });
}
}
FlexStyleBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexStyleBuilder, deps: [{ token: LAYOUT_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
FlexStyleBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexStyleBuilder, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: function () {
return [{ type: undefined, decorators: [{
type: Inject,
args: [LAYOUT_CONFIG]
}] }];
} });
const inputs$4 = [
'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'
];
const selector$4 = `
[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]
`;
/**
* 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/
*/
class FlexDirective extends BaseDirective2 {
constructor(elRef, styleUtils, layoutConfig, styleBuilder, marshal) {
super(elRef, styleBuilder, styleUtils, marshal);
this.layoutConfig = layoutConfig;
this.marshal = marshal;
this.DIRECTIVE_KEY = 'flex';
this.direction = undefined;
this.wrap = undefined;
this.flexGrow = '1';
this.flexShrink = '1';
this.init();
}
get shrink() { return this.flexShrink; }
set shrink(value) {
this.flexShrink = value || '1';
this.triggerReflow();
}
get grow() { return this.flexGrow; }
set grow(value) {
this.flexGrow = value || '1';
this.triggerReflow();
}
ngOnInit() {
if (this.parentElement) {
this.marshal.trackValue(this.parentElement, 'layout')
.pipe(takeUntil(this.destroySubject))
.subscribe(this.onLayoutChange.bind(this));
this.marshal.trackValue(this.nativeElement, 'layout-align')
.pipe(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.
*/
onLayoutChange(matcher) {
const layout = matcher.value;
const 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 */
updateWithValue(value) {
const addFlexToParent = this.layoutConfig.addFlexToParent !== false;
if (this.direction === undefined) {
this.direction = this.getFlexFlowDirection(this.parentElement, addFlexToParent);
}
if (this.wrap === undefined) {
this.wrap = this.hasWrap(this.parentElement);
}
const direction = this.direction;
const isHorizontal = direction.startsWith('row');
const 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;
}
const basis = String(value).replace(';', '');
const parts = validateBasis(basis, this.flexGrow, this.flexShrink);
this.addStyles(parts.join(' '), { direction, hasWrap });
}
/** Trigger a style reflow, usually based on a shrink/grow input event */
triggerReflow() {
const activatedValue = this.activatedValue;
if (activatedValue !== undefined) {
const parts = validateBasis(activatedValue + '', this.flexGrow, this.flexShrink);
this.marshal.updateElement(this.nativeElement, this.DIRECTIVE_KEY, parts.join(' '));
}
}
}
FlexDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtils }, { token: LAYOUT_CONFIG }, { token: FlexStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive });
FlexDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: FlexDirective, inputs: { shrink: ["fxShrink", "shrink"], grow: ["fxGrow", "grow"] }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexDirective, decorators: [{
type: Directive
}], ctorParameters: function () {
return [{ type: i0.ElementRef }, { type: i1.StyleUtils }, { type: undefined, decorators: [{
type: Inject,
args: [LAYOUT_CONFIG]
}] }, { type: FlexStyleBuilder }, { type: i1.MediaMarshaller }];
}, propDecorators: { shrink: [{
type: Input,
args: ['fxShrink']
}], grow: [{
type: Input,
args: ['fxGrow']
}] } });
class DefaultFlexDirective extends FlexDirective {
constructor() {
super(...arguments);
this.inputs = inputs$4;
}
}
DefaultFlexDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DefaultFlexDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
DefaultFlexDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: DefaultFlexDirective, 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", inputs: { fxFlex: "fxFlex", "fxFlex.xs": "fxFlex.xs", "fxFlex.sm": "fxFlex.sm", "fxFlex.md": "fxFlex.md", "fxFlex.lg": "fxFlex.lg", "fxFlex.xl": "fxFlex.xl", "fxFlex.lt-sm": "fxFlex.lt-sm", "fxFlex.lt-md": "fxFlex.lt-md", "fxFlex.lt-lg": "fxFlex.lt-lg", "fxFlex.lt-xl": "fxFlex.lt-xl", "fxFlex.gt-xs": "fxFlex.gt-xs", "fxFlex.gt-sm": "fxFlex.gt-sm", "fxFlex.gt-md": "fxFlex.gt-md", "fxFlex.gt-lg": "fxFlex.gt-lg" }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DefaultFlexDirective, decorators: [{
type: Directive,
args: [{ inputs: inputs$4, selector: selector$4 }]
}] });
const flexRowCache = new Map();
const flexColumnCache = new Map();
const flexRowWrapCache = new Map();
const flexColumnWrapCache = new Map();
/**
* @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
*/
class FlexOrderStyleBuilder extends StyleBuilder {
buildStyles(value) {
return { order: (value && parseInt(value, 10)) || '' };
}
}
FlexOrderStyleBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexOrderStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
FlexOrderStyleBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexOrderStyleBuilder, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexOrderStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
const 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'
];
const selector$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]
`;
/**
* '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/
*/
class FlexOrderDirective extends BaseDirective2 {
constructor(elRef, styleUtils, styleBuilder, marshal) {
super(elRef, styleBuilder, styleUtils, marshal);
this.DIRECTIVE_KEY = 'flex-order';
this.styleCache = flexOrderCache;
this.init();
}
}
FlexOrderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexOrderDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtils }, { token: FlexOrderStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive });
FlexOrderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: FlexOrderDirective, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexOrderDirective, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.StyleUtils }, { type: FlexOrderStyleBuilder }, { type: i1.MediaMarshaller }]; } });
const flexOrderCache = new Map();
class DefaultFlexOrderDirective extends FlexOrderDirective {
constructor() {
super(...arguments);
this.inputs = inputs$3;
}
}
DefaultFlexOrderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DefaultFlexOrderDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
DefaultFlexOrderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: DefaultFlexOrderDirective, 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", inputs: { fxFlexOrder: "fxFlexOrder", "fxFlexOrder.xs": "fxFlexOrder.xs", "fxFlexOrder.sm": "fxFlexOrder.sm", "fxFlexOrder.md": "fxFlexOrder.md", "fxFlexOrder.lg": "fxFlexOrder.lg", "fxFlexOrder.xl": "fxFlexOrder.xl", "fxFlexOrder.lt-sm": "fxFlexOrder.lt-sm", "fxFlexOrder.lt-md": "fxFlexOrder.lt-md", "fxFlexOrder.lt-lg": "fxFlexOrder.lt-lg", "fxFlexOrder.lt-xl": "fxFlexOrder.lt-xl", "fxFlexOrder.gt-xs": "fxFlexOrder.gt-xs", "fxFlexOrder.gt-sm": "fxFlexOrder.gt-sm", "fxFlexOrder.gt-md": "fxFlexOrder.gt-md", "fxFlexOrder.gt-lg": "fxFlexOrder.gt-lg" }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DefaultFlexOrderDirective, decorators: [{
type: Directive,
args: [{ selector: selector$3, inputs: inputs$3 }]
}] });
/**
* @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
*/
class FlexOffsetStyleBuilder extends StyleBuilder {
buildStyles(offset, parent) {
if (offset === '') {
offset = '0';
}
const isPercent = String(offset).indexOf('%') > -1;
const isPx = String(offset).indexOf('px') > -1;
if (!isPx && !isPercent && !isNaN(+offset)) {
offset = offset + '%';
}
const horizontalLayoutKey = parent.isRtl ? 'margin-right' : 'margin-left';
const styles = isFlowHorizontal(parent.layout) ?
{ [horizontalLayoutKey]: `${offset}` } : { 'margin-top': `${offset}` };
return styles;
}
}
FlexOffsetStyleBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexOffsetStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
FlexOffsetStyleBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexOffsetStyleBuilder, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexOffsetStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
const inputs$2 = [
'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'
];
const selector$2 = `
[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]
`;
/**
* 'flex-offset' flexbox styling directive
* Configures the 'margin-left' of the element in a layout container
*/
class FlexOffsetDirective extends BaseDirective2 {
constructor(elRef, directionality, styleBuilder, marshal, styler) {
super(elRef, styleBuilder, styler, marshal);
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(takeUntil(this.destroySubject))
.subscribe(this.triggerUpdate.bind(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.
*/
updateWithValue(value = '') {
// The flex-direction of this element's flex container. Defaults to 'row'.
const layout = this.getFlexFlowDirection(this.parentElement, true);
const 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, isRtl });
}
}
FlexOffsetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexOffsetDirective, deps: [{ token: i0.ElementRef }, { token: i2.Directionality }, { token: FlexOffsetStyleBuilder }, { token: i1.MediaMarshaller }, { token: i1.StyleUtils }], target: i0.ɵɵFactoryTarget.Directive });
FlexOffsetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: FlexOffsetDirective, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexOffsetDirective, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2.Directionality }, { type: FlexOffsetStyleBuilder }, { type: i1.MediaMarshaller }, { type: i1.StyleUtils }]; } });
class DefaultFlexOffsetDirective extends FlexOffsetDirective {
constructor() {
super(...arguments);
this.inputs = inputs$2;
}
}
DefaultFlexOffsetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DefaultFlexOffsetDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
DefaultFlexOffsetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: DefaultFlexOffsetDirective, 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", inputs: { fxFlexOffset: "fxFlexOffset", "fxFlexOffset.xs": "fxFlexOffset.xs", "fxFlexOffset.sm": "fxFlexOffset.sm", "fxFlexOffset.md": "fxFlexOffset.md", "fxFlexOffset.lg": "fxFlexOffset.lg", "fxFlexOffset.xl": "fxFlexOffset.xl", "fxFlexOffset.lt-sm": "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md": "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg": "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl": "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs": "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm": "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md": "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg": "fxFlexOffset.gt-lg" }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DefaultFlexOffsetDirective, decorators: [{
type: Directive,
args: [{ selector: selector$2, inputs: inputs$2 }]
}] });
const flexOffsetCacheRowRtl = new Map();
const flexOffsetCacheColumnRtl = new Map();
const flexOffsetCacheRowLtr = new Map();
const flexOffsetCacheColumnLtr = new Map();
/**
* @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
*/
class FlexAlignStyleBuilder extends StyleBuilder {
buildStyles(input) {
input = input || 'stretch';
const 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;
}
}
FlexAlignStyleBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexAlignStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
FlexAlignStyleBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexAlignStyleBuilder, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexAlignStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
const inputs$1 = [
'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'
];
const selector$1 = `
[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]
`;
/**
* '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/
*/
class FlexAlignDirective extends BaseDirective2 {
constructor(elRef, styleUtils, styleBuilder, marshal) {
super(elRef, styleBuilder, styleUtils, marshal);
this.DIRECTIVE_KEY = 'flex-align';
this.styleCache = flexAlignCache;
this.init();
}
}
FlexAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexAlignDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtils }, { token: FlexAlignStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive });
FlexAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: FlexAlignDirective, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexAlignDirective, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.StyleUtils }, { type: FlexAlignStyleBuilder }, { type: i1.MediaMarshaller }]; } });
const flexAlignCache = new Map();
class DefaultFlexAlignDirective extends FlexAlignDirective {
constructor() {
super(...arguments);
this.inputs = inputs$1;
}
}
DefaultFlexAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DefaultFlexAlignDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
DefaultFlexAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: DefaultFlexAlignDirective, 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", inputs: { fxFlexAlign: "fxFlexAlign", "fxFlexAlign.xs": "fxFlexAlign.xs", "fxFlexAlign.sm": "fxFlexAlign.sm", "fxFlexAlign.md": "fxFlexAlign.md", "fxFlexAlign.lg": "fxFlexAlign.lg", "fxFlexAlign.xl": "fxFlexAlign.xl", "fxFlexAlign.lt-sm": "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md": "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg": "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl": "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs": "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm": "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md": "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg": "fxFlexAlign.gt-lg" }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DefaultFlexAlignDirective, decorators: [{
type: Directive,
args: [{ selector: selector$1, inputs: inputs$1 }]
}] });
/**
* @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
*/
const FLEX_FILL_CSS = {
'margin': 0,
'width': '100%',
'height': '100%',
'min-width': '100%',
'min-height': '100%'
};
class FlexFillStyleBuilder extends StyleBuilder {
buildStyles(_input) {
return FLEX_FILL_CSS;
}
}
FlexFillStyleBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexFillStyleBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
FlexFillStyleBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexFillStyleBuilder, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexFillStyleBuilder, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
/**
* 'fxFill' flexbox styling directive
* Maximizes width and height of element in a layout container
*
* NOTE: fxFill is NOT responsive API!!
*/
class FlexFillDirective extends BaseDirective2 {
constructor(elRef, styleUtils, styleBuilder, marshal) {
super(elRef, styleBuilder, styleUtils, marshal);
this.styleCache = flexFillCache;
this.addStyles('');
}
}
FlexFillDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexFillDirective, deps: [{ token: i0.ElementRef }, { token: i1.StyleUtils }, { token: FlexFillStyleBuilder }, { token: i1.MediaMarshaller }], target: i0.ɵɵFactoryTarget.Directive });
FlexFillDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: FlexFillDirective, selector: "[fxFill], [fxFlexFill]", usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FlexFillDirective, decorators: [{
type: Directive,
args: [{ selector: `[fxFill], [fxFlexFill]` }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.StyleUtils }, { type: FlexFillStyleBuilder }, { type: i1.MediaMarshaller }]; } });
const flexFillCache = new Map();
/**
* @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
*/
class LayoutAlignStyleBuilder extends StyleBuilder {
buildStyles(align, parent) {
const css = {}, [mainAxis, crossAxis] = align.split(' ');
// 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';
br