@angular/flex-layout
Version:
Angular Flex-Layout =======
193 lines (187 loc) • 6.01 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
*/
/**
* Applies CSS prefixes to appropriate style keys.
*
* Note: `-ms-`, `-moz` and `-webkit-box` are no longer supported. e.g.
* {
* display: -webkit-flex; NEW - Safari 6.1+. iOS 7.1+, BB10
* display: flex; NEW, Spec - Firefox, Chrome, Opera
* // display: -webkit-box; OLD - iOS 6-, Safari 3.1-6, BB7
* // display: -ms-flexbox; TWEENER - IE 10
* // display: -moz-flexbox; OLD - Firefox
* }
*/
function applyCssPrefixes(target) {
for (let key in target) {
let value = target[key] || '';
switch (key) {
case 'display':
if (value === 'flex') {
target['display'] = [
'-webkit-flex',
'flex'
];
}
else if (value === 'inline-flex') {
target['display'] = [
'-webkit-inline-flex',
'inline-flex'
];
}
else {
target['display'] = value;
}
break;
case 'align-items':
case 'align-self':
case 'align-content':
case 'flex':
case 'flex-basis':
case 'flex-flow':
case 'flex-grow':
case 'flex-shrink':
case 'flex-wrap':
case 'justify-content':
target['-webkit-' + key] = value;
break;
case 'flex-direction':
value = value || 'row';
target['-webkit-flex-direction'] = value;
target['flex-direction'] = value;
break;
case 'order':
target['order'] = target['-webkit-' + key] = isNaN(+value) ? '0' : value;
break;
}
}
return target;
}
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
const INLINE = 'inline';
const LAYOUT_VALUES = ['row', 'column', 'row-reverse', 'column-reverse'];
/**
* Validate the direction|'direction wrap' value and then update the host's inline flexbox styles
*/
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'
*/
function validateValue(value) {
value = value ? value.toLowerCase() : '';
let [direction, wrap, inline] = value.split(' ');
// First value must be the `flex-direction`
if (!LAYOUT_VALUES.find(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.
*/
function isFlowHorizontal(value) {
let [flow,] = validateValue(value);
return flow.indexOf('row') > -1;
}
/**
* Convert layout-wrap='<value>' to expected flex-wrap style
*/
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.
*/
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
};
}
/**
* @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
*/
/**
* 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.
*/
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;
}
/**
* @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
*/
/**
* Generated bundle index. Do not edit.
*/
export { INLINE, LAYOUT_VALUES, applyCssPrefixes, buildLayoutCSS, extendObject, isFlowHorizontal, validateValue, validateWrapValue };
//# sourceMappingURL=angular-flex-layout-_private-utils.mjs.map