@angular/flex-layout
Version:
Angular Flex-Layout
1,365 lines (1,356 loc) • 65.5 kB
JavaScript
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import { __extends, __assign, __spreadArrays } from 'tslib';
import { Directive, ElementRef, Injectable, NgModule, NgZone, Inject, Input, ɵɵdefineInjectable, ɵɵinject } from '@angular/core';
import { BaseDirective2, StyleBuilder, StyleUtils, MediaMarshaller, CoreModule, LAYOUT_CONFIG, validateBasis } from '@angular/flex-layout/core';
import { Directionality, BidiModule } from '@angular/cdk/bidi';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
/**
* @fileoverview added by tsickle
* Generated from: utils/layout-validator.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,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,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);
};
LayoutStyleBuilder.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */ LayoutStyleBuilder.ɵprov = ɵɵdefineInjectable({ factory: function LayoutStyleBuilder_Factory() { return new LayoutStyleBuilder(); }, token: LayoutStyleBuilder, providedIn: "root" });
return LayoutStyleBuilder;
}(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: Directive },
];
/** @nocollapse */
LayoutDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: StyleUtils },
{ type: LayoutStyleBuilder },
{ type: MediaMarshaller }
]; };
return LayoutDirective;
}(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: 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,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]);
}
};
LayoutGapStyleBuilder.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */
LayoutGapStyleBuilder.ctorParameters = function () { return [
{ type: StyleUtils }
]; };
/** @nocollapse */ LayoutGapStyleBuilder.ɵprov = ɵɵdefineInjectable({ factory: function LayoutGapStyleBuilder_Factory() { return new LayoutGapStyleBuilder(ɵɵinject(StyleUtils)); }, token: LayoutGapStyleBuilder, providedIn: "root" });
return LayoutGapStyleBuilder;
}(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 Subject();
/** @type {?} */
var 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));
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: true,
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: Directive },
];
/** @nocollapse */
LayoutGapDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: NgZone },
{ type: Directionality },
{ type: StyleUtils },
{ type: LayoutGapStyleBuilder },
{ type: MediaMarshaller }
]; };
return LayoutGapDirective;
}(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: 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) {
/** @type {?} */
var paddingTop = '0px';
/** @type {?} */
var paddingRight = '0px';
/** @type {?} */
var paddingBottom = value;
/** @type {?} */
var paddingLeft = '0px';
if (directionality === 'rtl') {
paddingLeft = value;
}
else {
paddingRight = value;
}
return { 'padding': paddingTop + " " + paddingRight + " " + paddingBottom + " " + paddingLeft };
}
/**
* @param {?} value
* @param {?} directionality
* @return {?}
*/
function buildGridMargin(value, directionality) {
/** @type {?} */
var marginTop = '0px';
/** @type {?} */
var marginRight = '0px';
/** @type {?} */
var marginBottom = '-' + value;
/** @type {?} */
var marginLeft = '0px';
if (directionality === 'rtl') {
marginLeft = '-' + value;
}
else {
marginRight = '-' + value;
}
return { 'margin': marginTop + " " + 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,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,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' })));
};
FlexStyleBuilder.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */
FlexStyleBuilder.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: Inject, args: [LAYOUT_CONFIG,] }] }
]; };
/** @nocollapse */ FlexStyleBuilder.ɵprov = ɵɵdefineInjectable({ factory: function FlexStyleBuilder_Factory() { return new FlexStyleBuilder(ɵɵinject(LAYOUT_CONFIG)); }, token: FlexStyleBuilder, providedIn: "root" });
return FlexStyleBuilder;
}(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.DIRECTIVE_KEY = 'flex';
_this.direction = '';
_this.wrap = false;
_this.flexGrow = '1';
_this.flexShrink = '1';
_this.init();
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));
}
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: true,
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: true,
configurable: true
});
/**
* 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) {
this.direction = this.getFlexFlowDirection((/** @type {?} */ (this.parentElement)), addFlexToParent);
}
/** @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 = 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 = validateBasis(activatedValue + '', this.flexGrow, this.flexShrink);
this.marshal.updateElement(this.nativeElement, this.DIRECTIVE_KEY, parts.join(' '));
}
};
FlexDirective.decorators = [
{ type: Directive },
];
/** @nocollapse */
FlexDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: StyleUtils },
{ type: undefined, decorators: [{ type: Inject, args: [LAYOUT_CONFIG,] }] },
{ type: FlexStyleBuilder },
{ type: MediaMarshaller }
]; };
FlexDirective.propDecorators = {
shrink: [{ type: Input, args: ['fxShrink',] }],
grow: [{ type: Input, args: ['fxGrow',] }]
};
return FlexDirective;
}(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: 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,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)) || '' };
};
FlexOrderStyleBuilder.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */ FlexOrderStyleBuilder.ɵprov = ɵɵdefineInjectable({ factory: function FlexOrderStyleBuilder_Factory() { return new FlexOrderStyleBuilder(); }, token: FlexOrderStyleBuilder, providedIn: "root" });
return FlexOrderStyleBuilder;
}(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: Directive },
];
/** @nocollapse */
FlexOrderDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: StyleUtils },
{ type: FlexOrderStyleBuilder },
{ type: MediaMarshaller }
]; };
return FlexOrderDirective;
}(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: 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,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;
};
FlexOffsetStyleBuilder.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */ FlexOffsetStyleBuilder.ɵprov = ɵɵdefineInjectable({ factory: function FlexOffsetStyleBuilder_Factory() { return new FlexOffsetStyleBuilder(); }, token: FlexOffsetStyleBuilder, providedIn: "root" });
return FlexOffsetStyleBuilder;
}(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(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: Directive },
];
/** @nocollapse */
FlexOffsetDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Directionality },
{ type: FlexOffsetStyleBuilder },
{ type: MediaMarshaller },
{ type: StyleUtils }
]; };
return FlexOffsetDirective;
}(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: 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,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;
};
FlexAlignStyleBuilder.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] },
];
/** @nocollapse */ FlexAlignStyleBuilder.ɵprov = ɵɵdefineInjectable({ factory: function FlexAlignStyleBuilder_Factory() { return new FlexAlignStyleBuilder(); }, token: FlexAlignStyleBuilder, providedIn: "root" });
return FlexAlignStyleBuilder;
}(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.