| /** |
| * @license |
| * Copyright Google LLC All Rights Reserved. |
| * |
| * Use of this source code is governed by an MIT-style license that can be |
| * found in the LICENSE file at https://angular.io/license |
| */ |
| import { Directive, ElementRef, Injectable, Optional, 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 |
| * @suppress {checkTypes,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 {?} |
| */ |
| const INLINE = 'inline'; |
| /** @type {?} */ |
| const 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) { |
| let [direction, wrap, isInline] = validateValue(value); |
| 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() : ''; |
| let [direction, wrap, inline] = value.split(' '); |
| // First value must be the `flex-direction` |
| if (!LAYOUT_VALUES.find((/** |
| * @param {?} x |
| * @return {?} |
| */ |
| x => 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) { |
| let [flow,] = validateValue(value); |
| 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 = null, inline = false) { |
| return { |
| 'display': inline ? 'inline-flex' : 'flex', |
| 'box-sizing': 'border-box', |
| 'flex-direction': direction, |
| 'flex-wrap': !!wrap ? wrap : null |
| }; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| class LayoutStyleBuilder extends StyleBuilder { |
| /** |
| * @param {?} input |
| * @return {?} |
| */ |
| buildStyles(input) { |
| return buildLayoutCSS(input); |
| } |
| } |
| LayoutStyleBuilder.decorators = [ |
| { type: Injectable, args: [{ providedIn: 'root' },] }, |
| ]; |
| /** @nocollapse */ LayoutStyleBuilder.ngInjectableDef = ɵɵdefineInjectable({ factory: function LayoutStyleBuilder_Factory() { return new LayoutStyleBuilder(); }, token: LayoutStyleBuilder, providedIn: "root" }); |
| /** @type {?} */ |
| const 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 {?} */ |
| const selector = ` |
| [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 { |
| /** |
| * @param {?} elRef |
| * @param {?} styleUtils |
| * @param {?} styleBuilder |
| * @param {?} marshal |
| */ |
| constructor(elRef, styleUtils, styleBuilder, marshal) { |
| super(elRef, styleBuilder, styleUtils, marshal); |
| this.elRef = elRef; |
| this.styleUtils = styleUtils; |
| this.styleBuilder = styleBuilder; |
| this.marshal = marshal; |
| this.DIRECTIVE_KEY = 'layout'; |
| this.styleCache = layoutCache; |
| this.init(); |
| } |
| } |
| /** @nocollapse */ |
| LayoutDirective.ctorParameters = () => [ |
| { type: ElementRef }, |
| { type: StyleUtils }, |
| { type: LayoutStyleBuilder, decorators: [{ type: Optional }] }, |
| { type: MediaMarshaller } |
| ]; |
| class DefaultLayoutDirective extends LayoutDirective { |
| constructor() { |
| super(...arguments); |
| this.inputs = inputs; |
| } |
| } |
| DefaultLayoutDirective.decorators = [ |
| { type: Directive, args: [{ selector, inputs },] }, |
| ]; |
| /** @type {?} */ |
| const layoutCache = new Map(); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| const CLEAR_MARGIN_CSS = { |
| 'margin-left': null, |
| 'margin-right': null, |
| 'margin-top': null, |
| 'margin-bottom': null |
| }; |
| class LayoutGapStyleBuilder extends StyleBuilder { |
| /** |
| * @param {?} _styler |
| */ |
| constructor(_styler) { |
| super(); |
| this._styler = _styler; |
| } |
| /** |
| * @param {?} gapValue |
| * @param {?} parent |
| * @return {?} |
| */ |
| 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 {}; |
| } |
| } |
| /** |
| * @param {?} gapValue |
| * @param {?} _styles |
| * @param {?} parent |
| * @return {?} |
| */ |
| sideEffect(gapValue, _styles, parent) { |
| /** @type {?} */ |
| const items = parent.items; |
| if (gapValue.endsWith(GRID_SPECIFIER)) { |
| gapValue = gapValue.slice(0, gapValue.indexOf(GRID_SPECIFIER)); |
| // For each `element` children, set the padding |
| /** @type {?} */ |
| const paddingStyles = buildGridPadding(gapValue, parent.directionality); |
| this._styler.applyStyleToElements(paddingStyles, parent.items); |
| } |
| else { |
| /** @type {?} */ |
| const lastItem = (/** @type {?} */ (items.pop())); |
| // For each `element` children EXCEPT the last, |
| // set the margin right/bottom styles... |
| /** @type {?} */ |
| 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.decorators = [ |
| { type: Injectable, args: [{ providedIn: 'root' },] }, |
| ]; |
| /** @nocollapse */ |
| LayoutGapStyleBuilder.ctorParameters = () => [ |
| { type: StyleUtils } |
| ]; |
| /** @nocollapse */ LayoutGapStyleBuilder.ngInjectableDef = ɵɵdefineInjectable({ factory: function LayoutGapStyleBuilder_Factory() { return new LayoutGapStyleBuilder(ɵɵinject(StyleUtils)); }, token: LayoutGapStyleBuilder, providedIn: "root" }); |
| /** @type {?} */ |
| const 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 {?} */ |
| const selector$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] |
| `; |
| /** |
| * 'layout-padding' styling directive |
| * Defines padding of child elements in a layout container |
| */ |
| class LayoutGapDirective extends BaseDirective2 { |
| /** |
| * @param {?} elRef |
| * @param {?} zone |
| * @param {?} directionality |
| * @param {?} styleUtils |
| * @param {?} styleBuilder |
| * @param {?} marshal |
| */ |
| constructor(elRef, zone, directionality, styleUtils, styleBuilder, marshal) { |
| super(elRef, styleBuilder, styleUtils, marshal); |
| this.elRef = elRef; |
| this.zone = zone; |
| this.directionality = directionality; |
| this.styleUtils = styleUtils; |
| this.styleBuilder = styleBuilder; |
| this.marshal = marshal; |
| this.layout = 'row'; // default flex-direction |
| // default flex-direction |
| this.DIRECTIVE_KEY = 'layout-gap'; |
| this.observerSubject = new Subject(); |
| /** @type {?} */ |
| 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 |
| * @protected |
| * @return {?} |
| */ |
| get childrenNodes() { |
| /** @type {?} */ |
| const obj = this.nativeElement.children; |
| /** @type {?} */ |
| const buffer = []; |
| // iterate backwards ensuring that length is an UInt32 |
| for (let i = obj.length; i--;) { |
| buffer[i] = obj[i]; |
| } |
| return buffer; |
| } |
| // ********************************************* |
| // Lifecycle Methods |
| // ********************************************* |
| /** |
| * @return {?} |
| */ |
| ngAfterContentInit() { |
| this.buildChildObservable(); |
| this.triggerUpdate(); |
| } |
| /** |
| * @return {?} |
| */ |
| ngOnDestroy() { |
| super.ngOnDestroy(); |
| if (this.observer) { |
| this.observer.disconnect(); |
| } |
| } |
| // ********************************************* |
| // Protected methods |
| // ********************************************* |
| /** |
| * Cache the parent container 'flex-direction' and update the 'margin' styles |
| * @protected |
| * @param {?} matcher |
| * @return {?} |
| */ |
| onLayoutChange(matcher) { |
| /** @type {?} */ |
| const layout = matcher.value; |
| // Make sure to filter out 'wrap' option |
| /** @type {?} */ |
| const direction = layout.split(' '); |
| this.layout = direction[0]; |
| if (!LAYOUT_VALUES.find((/** |
| * @param {?} x |
| * @return {?} |
| */ |
| x => x === this.layout))) { |
| this.layout = 'row'; |
| } |
| this.triggerUpdate(); |
| } |
| /** |
| * |
| * @protected |
| * @param {?} value |
| * @return {?} |
| */ |
| updateWithValue(value) { |
| // Gather all non-hidden Element nodes |
| /** @type {?} */ |
| const items = this.childrenNodes |
| .filter((/** |
| * @param {?} el |
| * @return {?} |
| */ |
| el => el.nodeType === 1 && this.willDisplay(el))) |
| .sort((/** |
| * @param {?} a |
| * @param {?} b |
| * @return {?} |
| */ |
| (a, b) => { |
| /** @type {?} */ |
| const orderA = +this.styler.lookupStyle(a, 'order'); |
| /** @type {?} */ |
| 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) { |
| /** @type {?} */ |
| const directionality = this.directionality.value; |
| /** @type {?} */ |
| 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 |
| * @protected |
| * @return {?} |
| */ |
| clearStyles() { |
| /** @type {?} */ |
| const gridMode = Object.keys(this.mru).length > 0; |
| /** @type {?} */ |
| 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 |
| * @protected |
| * @param {?} source |
| * @return {?} |
| */ |
| willDisplay(source) { |
| /** @type {?} */ |
| const value = this.marshal.getValue(source, 'show-hide'); |
| return value === true || |
| (value === undefined && this.styleUtils.lookupStyle(source, 'display') !== 'none'); |
| } |
| /** |
| * @protected |
| * @return {?} |
| */ |
| buildChildObservable() { |
| this.zone.runOutsideAngular((/** |
| * @return {?} |
| */ |
| () => { |
| if (typeof MutationObserver !== 'undefined') { |
| this.observer = new MutationObserver((/** |
| * @param {?} mutations |
| * @return {?} |
| */ |
| (mutations) => { |
| /** @type {?} */ |
| const validatedChanges = (/** |
| * @param {?} it |
| * @return {?} |
| */ |
| (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 }); |
| } |
| })); |
| } |
| } |
| /** @nocollapse */ |
| LayoutGapDirective.ctorParameters = () => [ |
| { type: ElementRef }, |
| { type: NgZone }, |
| { type: Directionality }, |
| { type: StyleUtils }, |
| { type: LayoutGapStyleBuilder, decorators: [{ type: Optional }] }, |
| { type: MediaMarshaller } |
| ]; |
| class DefaultLayoutGapDirective extends LayoutGapDirective { |
| constructor() { |
| super(...arguments); |
| this.inputs = inputs$1; |
| } |
| } |
| DefaultLayoutGapDirective.decorators = [ |
| { type: Directive, args: [{ selector: selector$1, inputs: inputs$1 },] }, |
| ]; |
| /** @type {?} */ |
| const layoutGapCacheRowRtl = new Map(); |
| /** @type {?} */ |
| const layoutGapCacheColumnRtl = new Map(); |
| /** @type {?} */ |
| const layoutGapCacheRowLtr = new Map(); |
| /** @type {?} */ |
| const layoutGapCacheColumnLtr = new Map(); |
| /** @type {?} */ |
| const GRID_SPECIFIER = ' grid'; |
| /** |
| * @param {?} value |
| * @param {?} directionality |
| * @return {?} |
| */ |
| function buildGridPadding(value, directionality) { |
| /** @type {?} */ |
| let paddingTop = '0px'; |
| /** @type {?} */ |
| let paddingRight = '0px'; |
| /** @type {?} */ |
| let paddingBottom = value; |
| /** @type {?} */ |
| let 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 {?} */ |
| let marginTop = '0px'; |
| /** @type {?} */ |
| let marginRight = '0px'; |
| /** @type {?} */ |
| let marginBottom = '-' + value; |
| /** @type {?} */ |
| let 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 {?} */ |
| const key = getMarginType(parent.directionality, parent.layout); |
| /** @type {?} */ |
| const margins = Object.assign({}, CLEAR_MARGIN_CSS); |
| margins[key] = gapValue; |
| return margins; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,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, ...sources) { |
| if (dest == null) { |
| throw TypeError('Cannot convert undefined or null to object'); |
| } |
| for (let source of sources) { |
| if (source != null) { |
| for (let key in source) { |
| if (source.hasOwnProperty(key)) { |
| dest[key] = source[key]; |
| } |
| } |
| } |
| } |
| return dest; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| class FlexStyleBuilder extends StyleBuilder { |
| /** |
| * @param {?} layoutConfig |
| */ |
| constructor(layoutConfig) { |
| super(); |
| this.layoutConfig = layoutConfig; |
| } |
| /** |
| * @param {?} input |
| * @param {?} parent |
| * @return {?} |
| */ |
| buildStyles(input, parent) { |
| let [grow, shrink, ...basisParts] = input.split(' '); |
| /** @type {?} */ |
| let basis = basisParts.join(' '); |
| // The flex-direction of this element's flex container. Defaults to 'row'. |
| /** @type {?} */ |
| const direction = (parent.direction.indexOf('column') > -1) ? 'column' : 'row'; |
| /** @type {?} */ |
| const max = isFlowHorizontal(direction) ? 'max-width' : 'max-height'; |
| /** @type {?} */ |
| const min = isFlowHorizontal(direction) ? 'min-width' : 'min-height'; |
| /** @type {?} */ |
| const hasCalc = String(basis).indexOf('calc') > -1; |
| /** @type {?} */ |
| const usingCalc = hasCalc || (basis === 'auto'); |
| /** @type {?} */ |
| const isPercent = String(basis).indexOf('%') > -1 && !hasCalc; |
| /** @type {?} */ |
| 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; |
| /** @type {?} */ |
| 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 |
| /** @type {?} */ |
| const isFixed = !grow && !shrink; |
| /** @type {?} */ |
| 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. |
| /** @type {?} */ |
| const clearStyles = { |
| 'max-width': null, |
| 'max-height': null, |
| 'min-width': null, |
| 'min-height': null |
| }; |
| switch (basis || '') { |
| case '': |
| /** @type {?} */ |
| 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((/** @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 = () => [ |
| { type: undefined, decorators: [{ type: Inject, args: [LAYOUT_CONFIG,] }] } |
| ]; |
| /** @nocollapse */ FlexStyleBuilder.ngInjectableDef = ɵɵdefineInjectable({ factory: function FlexStyleBuilder_Factory() { return new FlexStyleBuilder(ɵɵinject(LAYOUT_CONFIG)); }, token: FlexStyleBuilder, providedIn: "root" }); |
| /** @type {?} */ |
| const 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 {?} */ |
| const selector$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] |
| `; |
| /** |
| * 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 { |
| /** |
| * @param {?} elRef |
| * @param {?} styleUtils |
| * @param {?} layoutConfig |
| * @param {?} styleBuilder |
| * @param {?} marshal |
| */ |
| constructor(elRef, styleUtils, layoutConfig, styleBuilder, marshal) { |
| super(elRef, styleBuilder, styleUtils, marshal); |
| this.elRef = elRef; |
| this.styleUtils = styleUtils; |
| this.layoutConfig = layoutConfig; |
| this.styleBuilder = styleBuilder; |
| this.marshal = marshal; |
| 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 {?} |
| */ |
| get shrink() { return this.flexShrink; } |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| set shrink(value) { |
| this.flexShrink = value || '1'; |
| this.triggerReflow(); |
| } |
| /** |
| * @return {?} |
| */ |
| get grow() { return this.flexGrow; } |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| set grow(value) { |
| this.flexGrow = value || '1'; |
| this.triggerReflow(); |
| } |
| /** |
| * 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 {?} |
| */ |
| onLayoutChange(matcher) { |
| /** @type {?} */ |
| const layout = matcher.value; |
| /** @type {?} */ |
| 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 |
| * @protected |
| * @param {?} value |
| * @return {?} |
| */ |
| updateWithValue(value) { |
| /** @type {?} */ |
| const addFlexToParent = this.layoutConfig.addFlexToParent !== false; |
| if (!this.direction) { |
| this.direction = this.getFlexFlowDirection((/** @type {?} */ (this.parentElement)), addFlexToParent); |
| } |
| /** @type {?} */ |
| const direction = this.direction; |
| /** @type {?} */ |
| const isHorizontal = direction.startsWith('row'); |
| /** @type {?} */ |
| 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; |
| } |
| /** @type {?} */ |
| const basis = String(value).replace(';', ''); |
| /** @type {?} */ |
| 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 |
| * @protected |
| * @return {?} |
| */ |
| triggerReflow() { |
| /** @type {?} */ |
| const activatedValue = this.activatedValue; |
| if (activatedValue !== undefined) { |
| /** @type {?} */ |
| const parts = validateBasis(activatedValue, this.flexGrow, this.flexShrink); |
| this.marshal.updateElement(this.nativeElement, this.DIRECTIVE_KEY, parts.join(' ')); |
| } |
| } |
| } |
| /** @nocollapse */ |
| FlexDirective.ctorParameters = () => [ |
| { 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',] }] |
| }; |
| class DefaultFlexDirective extends FlexDirective { |
| constructor() { |
| super(...arguments); |
| this.inputs = inputs$2; |
| } |
| } |
| DefaultFlexDirective.decorators = [ |
| { type: Directive, args: [{ inputs: inputs$2, selector: selector$2 },] }, |
| ]; |
| /** @type {?} */ |
| const flexRowCache = new Map(); |
| /** @type {?} */ |
| const flexColumnCache = new Map(); |
| /** @type {?} */ |
| const flexRowWrapCache = new Map(); |
| /** @type {?} */ |
| const flexColumnWrapCache = new Map(); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| class FlexOrderStyleBuilder extends StyleBuilder { |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| buildStyles(value) { |
| return { order: (value && parseInt(value, 10)) || '' }; |
| } |
| } |
| FlexOrderStyleBuilder.decorators = [ |
| { type: Injectable, args: [{ providedIn: 'root' },] }, |
| ]; |
| /** @nocollapse */ FlexOrderStyleBuilder.ngInjectableDef = ɵɵdefineInjectable({ factory: function FlexOrderStyleBuilder_Factory() { return new FlexOrderStyleBuilder(); }, token: FlexOrderStyleBuilder, providedIn: "root" }); |
| /** @type {?} */ |
| 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' |
| ]; |
| /** @type {?} */ |
| 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 { |
| /** |
| * @param {?} elRef |
| * @param {?} styleUtils |
| * @param {?} styleBuilder |
| * @param {?} marshal |
| */ |
| constructor(elRef, styleUtils, styleBuilder, marshal) { |
| super(elRef, styleBuilder, styleUtils, marshal); |
| this.elRef = elRef; |
| this.styleUtils = styleUtils; |
| this.styleBuilder = styleBuilder; |
| this.marshal = marshal; |
| this.DIRECTIVE_KEY = 'flex-order'; |
| this.styleCache = flexOrderCache; |
| this.init(); |
| } |
| } |
| /** @nocollapse */ |
| FlexOrderDirective.ctorParameters = () => [ |
| { type: ElementRef }, |
| { type: StyleUtils }, |
| { type: FlexOrderStyleBuilder, decorators: [{ type: Optional }] }, |
| { type: MediaMarshaller } |
| ]; |
| /** @type {?} */ |
| const flexOrderCache = new Map(); |
| class DefaultFlexOrderDirective extends FlexOrderDirective { |
| constructor() { |
| super(...arguments); |
| this.inputs = inputs$3; |
| } |
| } |
| DefaultFlexOrderDirective.decorators = [ |
| { type: Directive, args: [{ selector: selector$3, inputs: inputs$3 },] }, |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| class FlexOffsetStyleBuilder extends StyleBuilder { |
| /** |
| * @param {?} offset |
| * @param {?} parent |
| * @return {?} |
| */ |
| buildStyles(offset, parent) { |
| if (offset === '') { |
| offset = '0'; |
| } |
| /** @type {?} */ |
| const isPercent = String(offset).indexOf('%') > -1; |
| /** @type {?} */ |
| const isPx = String(offset).indexOf('px') > -1; |
| if (!isPx && !isPercent && !isNaN(+offset)) { |
| offset = offset + '%'; |
| } |
| /** @type {?} */ |
| const horizontalLayoutKey = parent.isRtl ? 'margin-right' : 'margin-left'; |
| /** @type {?} */ |
| const styles = isFlowHorizontal(parent.layout) ? |
| { [horizontalLayoutKey]: `${offset}` } : { 'margin-top': `${offset}` }; |
| return styles; |
| } |
| } |
| FlexOffsetStyleBuilder.decorators = [ |
| { type: Injectable, args: [{ providedIn: 'root' },] }, |
| ]; |
| /** @nocollapse */ FlexOffsetStyleBuilder.ngInjectableDef = ɵɵdefineInjectable({ factory: function FlexOffsetStyleBuilder_Factory() { return new FlexOffsetStyleBuilder(); }, token: FlexOffsetStyleBuilder, providedIn: "root" }); |
| /** @type {?} */ |
| const 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 {?} */ |
| const selector$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] |
| `; |
| /** |
| * 'flex-offset' flexbox styling directive |
| * Configures the 'margin-left' of the element in a layout container |
| */ |
| class FlexOffsetDirective extends BaseDirective2 { |
| /** |
| * @param {?} elRef |
| * @param {?} directionality |
| * @param {?} styleBuilder |
| * @param {?} marshal |
| * @param {?} styler |
| */ |
| constructor(elRef, directionality, styleBuilder, marshal, styler) { |
| super(elRef, styleBuilder, styler, marshal); |
| this.elRef = elRef; |
| this.directionality = directionality; |
| this.styleBuilder = styleBuilder; |
| this.marshal = marshal; |
| this.styler = styler; |
| 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. |
| * @protected |
| * @param {?=} value |
| * @return {?} |
| */ |
| updateWithValue(value = '') { |
| // The flex-direction of this element's flex container. Defaults to 'row'. |
| /** @type {?} */ |
| const layout = this.getFlexFlowDirection((/** @type {?} */ (this.parentElement)), true); |
| /** @type {?} */ |
| 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 }); |
| } |
| } |
| /** @nocollapse */ |
| FlexOffsetDirective.ctorParameters = () => [ |
| { type: ElementRef }, |
| { type: Directionality }, |
| { type: FlexOffsetStyleBuilder, decorators: [{ type: Optional }] }, |
| { type: MediaMarshaller }, |
| { type: StyleUtils } |
| ]; |
| class DefaultFlexOffsetDirective extends FlexOffsetDirective { |
| constructor() { |
| super(...arguments); |
| this.inputs = inputs$4; |
| } |
| } |
| DefaultFlexOffsetDirective.decorators = [ |
| { type: Directive, args: [{ selector: selector$4, inputs: inputs$4 },] }, |
| ]; |
| /** @type {?} */ |
| const flexOffsetCacheRowRtl = new Map(); |
| /** @type {?} */ |
| const flexOffsetCacheColumnRtl = new Map(); |
| /** @type {?} */ |
| const flexOffsetCacheRowLtr = new Map(); |
| /** @type {?} */ |
| const flexOffsetCacheColumnLtr = new Map(); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| class FlexAlignStyleBuilder extends StyleBuilder { |
| /** |
| * @param {?} input |
| * @return {?} |
| */ |
| buildStyles(input) { |
| input = input || 'stretch'; |
| /** @type {?} */ |
| 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.decorators = [ |
| { type: Injectable, args: [{ providedIn: 'root' },] }, |
| ]; |
| /** @nocollapse */ FlexAlignStyleBuilder.ngInjectableDef = ɵɵdefineInjectable({ factory: function FlexAlignStyleBuilder_Factory() { return new FlexAlignStyleBuilder(); }, token: FlexAlignStyleBuilder, providedIn: "root" }); |
| /** @type {?} */ |
| const 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 {?} */ |
| const selector$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] |
| `; |
| /** |
| * '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 { |
| /** |
| * @param {?} elRef |
| * @param {?} styleUtils |
| * @param {?} styleBuilder |
| * @param {?} marshal |
| */ |
| constructor(elRef, styleUtils, styleBuilder, marshal) { |
| super(elRef, styleBuilder, styleUtils, marshal); |
| this.elRef = elRef; |
| this.styleUtils = styleUtils; |
| this.styleBuilder = styleBuilder; |
| this.marshal = marshal; |
| this.DIRECTIVE_KEY = 'flex-align'; |
| this.styleCache = flexAlignCache; |
| this.init(); |
| } |
| } |
| /** @nocollapse */ |
| FlexAlignDirective.ctorParameters = () => [ |
| { type: ElementRef }, |
| { type: StyleUtils }, |
| { type: FlexAlignStyleBuilder, decorators: [{ type: Optional }] }, |
| { type: MediaMarshaller } |
| ]; |
| /** @type {?} */ |
| const flexAlignCache = new Map(); |
| class DefaultFlexAlignDirective extends FlexAlignDirective { |
| constructor() { |
| super(...arguments); |
| this.inputs = inputs$5; |
| } |
| } |
| DefaultFlexAlignDirective.decorators = [ |
| { type: Directive, args: [{ selector: selector$5, inputs: inputs$5 },] }, |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| const FLEX_FILL_CSS = { |
| 'margin': 0, |
| 'width': '100%', |
| 'height': '100%', |
| 'min-width': '100%', |
| 'min-height': '100%' |
| }; |
| class FlexFillStyleBuilder extends StyleBuilder { |
| /** |
| * @param {?} _input |
| * @return {?} |
| */ |
| buildStyles(_input) { |
| return FLEX_FILL_CSS; |
| } |
| } |
| FlexFillStyleBuilder.decorators = [ |
| { type: Injectable, args: [{ providedIn: 'root' },] }, |
| ]; |
| /** @nocollapse */ FlexFillStyleBuilder.ngInjectableDef = ɵɵdefineInjectable({ factory: function FlexFillStyleBuilder_Factory() { return new FlexFillStyleBuilder(); }, token: FlexFillStyleBuilder, 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 { |
| /** |
| * @param {?} elRef |
| * @param {?} styleUtils |
| * @param {?} styleBuilder |
| * @param {?} marshal |
| */ |
| constructor(elRef, styleUtils, styleBuilder, marshal) { |
| super(elRef, styleBuilder, styleUtils, marshal); |
| this.elRef = elRef; |
| this.styleUtils = styleUtils; |
| this.styleBuilder = styleBuilder; |
| this.marshal = marshal; |
| this.styleCache = flexFillCache; |
| this.addStyles(''); |
| } |
| } |
| FlexFillDirective.decorators = [ |
| { type: Directive, args: [{ selector: `[fxFill], [fxFlexFill]` },] }, |
| ]; |
| /** @nocollapse */ |
| FlexFillDirective.ctorParameters = () => [ |
| { type: ElementRef }, |
| { type: StyleUtils }, |
| { type: FlexFillStyleBuilder }, |
| { type: MediaMarshaller } |
| ]; |
| /** @type {?} */ |
| const flexFillCache = new Map(); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| class LayoutAlignStyleBuilder extends StyleBuilder { |
| /** |
| * @param {?} align |
| * @param {?} parent |
| * @return {?} |
| */ |
| buildStyles(align, parent) { |
| /** @type {?} */ |
| const css = {}; |
| const [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'; |
| break; |
| case 'center': |
| css['align-items'] = css['align-content'] = 'center'; |
| break; |
| case 'end': |
| case 'flex-end': |
| css['align-items'] = css['align-content'] = 'flex-end'; |
| break; |
| case 'space-between': |
| css['align-content'] = 'space-between'; |
| css['align-items'] = 'stretch'; |
| break; |
| case 'space-around': |
| css['align-content'] = 'space-around'; |
| css['align-items'] = 'stretch'; |
| break; |
| case 'baseline': |
| css['align-content'] = 'stretch'; |
| css['align-items'] = 'baseline'; |
| break; |
| case 'stretch': |
| default: // 'stretch' |
| css['align-items'] = css['align-content'] = 'stretch'; // default cross axis |
| break; |
| } |
| return (/** @type {?} */ (extendObject(css, { |
| 'display': parent.inline ? 'inline-flex' : 'flex', |
| 'flex-direction': parent.layout, |
| 'box-sizing': 'border-box', |
| 'max-width': crossAxis === 'stretch' ? |
| !isFlowHorizontal(parent.layout) ? '100%' : null : null, |
| 'max-height': crossAxis === 'stretch' ? |
| isFlowHorizontal(parent.layout) ? '100%' : null : null, |
| }))); |
| } |
| } |
| LayoutAlignStyleBuilder.decorators = [ |
| { type: Injectable, args: [{ providedIn: 'root' },] }, |
| ]; |
| /** @nocollapse */ LayoutAlignStyleBuilder.ngInjectableDef = ɵɵdefineInjectable({ factory: function LayoutAlignStyleBuilder_Factory() { return new LayoutAlignStyleBuilder(); }, token: LayoutAlignStyleBuilder, providedIn: "root" }); |
| /** @type {?} */ |
| const inputs$6 = [ |
| 'fxLayoutAlign', 'fxLayoutAlign.xs', 'fxLayoutAlign.sm', 'fxLayoutAlign.md', |
| 'fxLayoutAlign.lg', 'fxLayoutAlign.xl', 'fxLayoutAlign.lt-sm', 'fxLayoutAlign.lt-md', |
| 'fxLayoutAlign.lt-lg', 'fxLayoutAlign.lt-xl', 'fxLayoutAlign.gt-xs', 'fxLayoutAlign.gt-sm', |
| 'fxLayoutAlign.gt-md', 'fxLayoutAlign.gt-lg' |
| ]; |
| /** @type {?} */ |
| const selector$6 = ` |
| [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], |
| [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], |
| [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], |
| [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg] |
| `; |
| /** |
| * 'layout-align' flexbox styling directive |
| * Defines positioning of child elements along main and cross axis in a layout container |
| * Optional values: {main-axis} values or {main-axis cross-axis} value pairs |
| * |
| * @see https://css-tricks.com/almanac/properties/j/justify-content/ |
| * @see https://css-tricks.com/almanac/properties/a/align-items/ |
| * @see https://css-tricks.com/almanac/properties/a/align-content/ |
| */ |
| class LayoutAlignDirective extends BaseDirective2 { |
| // default inline value |
| /** |
| * @param {?} elRef |
| * @param {?} styleUtils |
| * @param {?} styleBuilder |
| * @param {?} marshal |
| */ |
| constructor(elRef, styleUtils, styleBuilder, marshal) { |
| super(elRef, styleBuilder, styleUtils, marshal); |
| this.elRef = elRef; |
| this.styleUtils = styleUtils; |
| this.styleBuilder = styleBuilder; |
| this.marshal = marshal; |
| this.DIRECTIVE_KEY = 'layout-align'; |
| this.layout = 'row'; // default flex-direction |
| // default flex-direction |
| this.inline = false; // default inline value |
| this.init(); |
| this.marshal.trackValue(this.nativeElement, 'layout') |
| .pipe(takeUntil(this.destroySubject)) |
| .subscribe(this.onLayoutChange.bind(this)); |
| } |
| // ********************************************* |
| // Protected methods |
| // ********************************************* |
| /** |
| * |
| * @protected |
| * @param {?} value |
| * @return {?} |
| */ |
| updateWithValue(value) { |
| /** @type {?} */ |
| const layout = this.layout || 'row'; |
| /** @type {?} */ |
| const inline = this.inline; |
| if (layout === 'row' && inline) { |
| this.styleCache = layoutAlignHorizontalInlineCache; |
| } |
| else if (layout === 'row' && !inline) { |
| this.styleCache = layoutAlignHorizontalCache; |
| } |
| else if (layout === 'row-reverse' && inline) { |
| this.styleCache = layoutAlignHorizontalRevInlineCache; |
| } |
| else if (layout === 'row-reverse' && !inline) { |
| this.styleCache = layoutAlignHorizontalRevCache; |
| } |
| else if (layout === 'column' && inline) { |
| this.styleCache = layoutAlignVerticalInlineCache; |
| } |
| else if (layout === 'column' && !inline) { |
| this.styleCache = layoutAlignVerticalCache; |
| } |
| else if (layout === 'column-reverse' && inline) { |
| this.styleCache = layoutAlignVerticalRevInlineCache; |
| } |
| else if (layout === 'column-reverse' && !inline) { |
| this.styleCache = layoutAlignVerticalRevCache; |
| } |
| this.addStyles(value, { layout, inline }); |
| } |
| /** |
| * Cache the parent container 'flex-direction' and update the 'flex' styles |
| * @protected |
| * @param {?} matcher |
| * @return {?} |
| */ |
| onLayoutChange(matcher) { |
| /** @type {?} */ |
| const layoutKeys = matcher.value.split(' '); |
| this.layout = layoutKeys[0]; |
| this.inline = matcher.value.includes('inline'); |
| if (!LAYOUT_VALUES.find((/** |
| * @param {?} x |
| * @return {?} |
| */ |
| x => x === this.layout))) { |
| this.layout = 'row'; |
| } |
| this.triggerUpdate(); |
| } |
| } |
| /** @nocollapse */ |
| LayoutAlignDirective.ctorParameters = () => [ |
| { type: ElementRef }, |
| { type: StyleUtils }, |
| { type: LayoutAlignStyleBuilder, decorators: [{ type: Optional }] }, |
| { type: MediaMarshaller } |
| ]; |
| class DefaultLayoutAlignDirective extends LayoutAlignDirective { |
| constructor() { |
| super(...arguments); |
| this.inputs = inputs$6; |
| } |
| } |
| DefaultLayoutAlignDirective.decorators = [ |
| { type: Directive, args: [{ selector: selector$6, inputs: inputs$6 },] }, |
| ]; |
| /** @type {?} */ |
| const layoutAlignHorizontalCache = new Map(); |
| /** @type {?} */ |
| const layoutAlignVerticalCache = new Map(); |
| /** @type {?} */ |
| const layoutAlignHorizontalRevCache = new Map(); |
| /** @type {?} */ |
| const layoutAlignVerticalRevCache = new Map(); |
| /** @type {?} */ |
| const layoutAlignHorizontalInlineCache = new Map(); |
| /** @type {?} */ |
| const layoutAlignVerticalInlineCache = new Map(); |
| /** @type {?} */ |
| const layoutAlignHorizontalRevInlineCache = new Map(); |
| /** @type {?} */ |
| const layoutAlignVerticalRevInlineCache = new Map(); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| /** @type {?} */ |
| const ALL_DIRECTIVES = [ |
| DefaultLayoutDirective, |
| DefaultLayoutGapDirective, |
| DefaultLayoutAlignDirective, |
| DefaultFlexOrderDirective, |
| DefaultFlexOffsetDirective, |
| FlexFillDirective, |
| DefaultFlexAlignDirective, |
| DefaultFlexDirective, |
| ]; |
| /** |
| * ***************************************************************** |
| * Define module for the Flex API |
| * ***************************************************************** |
| */ |
| class FlexModule { |
| } |
| FlexModule.decorators = [ |
| { type: NgModule, args: [{ |
| imports: [CoreModule, BidiModule], |
| declarations: [...ALL_DIRECTIVES], |
| exports: [...ALL_DIRECTIVES] |
| },] }, |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc |
| */ |
| |
| export { FlexModule, FlexStyleBuilder, FlexDirective, DefaultFlexDirective, FlexAlignStyleBuilder, FlexAlignDirective, DefaultFlexAlignDirective, FlexFillStyleBuilder, FlexFillDirective, FlexOffsetStyleBuilder, FlexOffsetDirective, DefaultFlexOffsetDirective, FlexOrderStyleBuilder, FlexOrderDirective, DefaultFlexOrderDirective, LayoutStyleBuilder, LayoutDirective, DefaultLayoutDirective, LayoutAlignStyleBuilder, LayoutAlignDirective, DefaultLayoutAlignDirective, LayoutGapStyleBuilder, LayoutGapDirective, DefaultLayoutGapDirective }; |
| //# sourceMappingURL=flex.js.map |
