@greg-md/ng-flex-css-layout
Version:
Flex-CSS-Layout is an alternative behaviour of Flex-Layout directives, that will still work with Angular Universal and App Shell.
150 lines (149 loc) • 11.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @param {?} align
* @return {?}
*/
export function normalizeLayoutAlignValue(align) {
align = align || 'start stretch';
let [mainAxis, crossAxis] = align.split(' ');
switch (mainAxis) {
case 'center':
case 'space-around':
case 'space-between':
case 'space-evenly':
break;
case 'end':
case 'flex-end':
mainAxis = 'flex-end';
break;
case 'start':
case 'flex-start':
default:
mainAxis = 'flex-start'; // default main axis
break;
}
switch (crossAxis) {
case 'start':
case 'flex-start':
crossAxis = 'flex-start';
break;
case 'baseline':
case 'center':
crossAxis = 'center';
break;
case 'end':
case 'flex-end':
crossAxis = 'flex-end';
break;
case 'stretch':
default:
// 'stretch'
crossAxis = 'stretch'; // default cross axis
break;
}
return [mainAxis, crossAxis];
}
/**
* @param {?} direction
* @param {?} wrap
* @param {?} isInline
* @param {?} breakpoint
* @return {?}
*/
export function generateLayoutClassName(direction, wrap, isInline, breakpoint) {
return 'fcLayout'
+ (breakpoint !== 'all' ? '--' + breakpoint : '')
+ '--' + direction + (wrap ? '-' + wrap : '') + (isInline ? '-inline' : '');
}
/**
* @param {?} mainAxis
* @param {?} crossAxis
* @param {?} breakpoint
* @return {?}
*/
export function generateLayoutAlignClassName(mainAxis, crossAxis, breakpoint) {
return 'fcLayoutAlign'
+ (breakpoint !== 'all' ? '--' + breakpoint : '')
+ '--' + mainAxis + '-' + crossAxis;
}
/**
* @param {?} value
* @param {?} breakpoint
* @return {?}
*/
export function generateLayoutGapClassName(value, breakpoint) {
return 'fcLayoutGap'
+ (breakpoint !== 'all' ? '--' + breakpoint : '')
+ '--' + valueToClassName(value);
}
/**
* @param {?} grow
* @param {?} shrink
* @param {?} basis
* @param {?} breakpoint
* @return {?}
*/
export function generateFlexClassName(grow, shrink, basis, breakpoint) {
return 'fcFlex'
+ (breakpoint !== 'all' ? '--' + breakpoint : '')
+ '--' + valueToClassName(grow) + '-' + valueToClassName(shrink) + (basis ? '-' + valueToClassName(basis) : '');
}
/**
* @param {?} order
* @param {?} breakpoint
* @return {?}
*/
export function generateFlexOrderClassName(order, breakpoint) {
return 'fcFlexOrder'
+ (breakpoint !== 'all' ? '--' + breakpoint : '')
+ '--' + valueToClassName(order);
}
/**
* @param {?} offset
* @param {?} breakpoint
* @return {?}
*/
export function generateFlexOffsetClassName(offset, breakpoint) {
return 'fcFlexOffset'
+ (breakpoint !== 'all' ? '--' + breakpoint : '')
+ '--' + valueToClassName(offset);
}
/**
* @param {?} align
* @param {?} breakpoint
* @return {?}
*/
export function generateFlexAlignClassName(align, breakpoint) {
return 'fcFlexAlign'
+ (breakpoint !== 'all' ? '--' + breakpoint : '')
+ '--' + valueToClassName(align);
}
/**
* @return {?}
*/
export function generateFlexFillClassName() {
return 'fcFlexFill';
}
/**
* @param {?} display
* @param {?} show
* @param {?} breakpoint
* @return {?}
*/
export function generateFlexShowHideClassName(display, show, breakpoint) {
return 'fcShow'
+ (breakpoint !== 'all' ? '--' + breakpoint : '')
+ '--' + valueToClassName(display)
+ '--' + (show ? 'show' : 'hide');
}
/**
* @param {?} value
* @return {?}
*/
export function valueToClassName(value) {
return String(value).replace(/[^a-zA-Z0-9-]/, '-');
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVscGVycy5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BncmVnLW1kL25nLWZsZXgtY3NzLWxheW91dC8iLCJzb3VyY2VzIjpbImxpYi9oZWxwZXJzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUEsTUFBTSxvQ0FBb0MsS0FBYTtJQUNyRCxLQUFLLEdBQUcsS0FBSyxJQUFJLGVBQWUsQ0FBQztJQUVqQyxJQUFJLENBQUMsUUFBUSxFQUFFLFNBQVMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7SUFFN0MsTUFBTSxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQztRQUNqQixLQUFLLFFBQVEsQ0FBQztRQUNkLEtBQUssY0FBYyxDQUFDO1FBQ3BCLEtBQUssZUFBZSxDQUFDO1FBQ3JCLEtBQUssY0FBYztZQUNqQixLQUFLLENBQUM7UUFDUixLQUFLLEtBQUssQ0FBQztRQUNYLEtBQUssVUFBVTtZQUNiLFFBQVEsR0FBRyxVQUFVLENBQUM7WUFDdEIsS0FBSyxDQUFDO1FBQ1IsS0FBSyxPQUFPLENBQUM7UUFDYixLQUFLLFlBQVksQ0FBQztRQUNsQjtZQUNFLFFBQVEsR0FBRyxZQUFZLENBQUM7WUFDeEIsS0FBSyxDQUFDO0tBQ1Q7SUFFRCxNQUFNLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDO1FBQ2xCLEtBQUssT0FBTyxDQUFDO1FBQ2IsS0FBSyxZQUFZO1lBQ2YsU0FBUyxHQUFHLFlBQVksQ0FBQztZQUN6QixLQUFLLENBQUM7UUFDUixLQUFLLFVBQVUsQ0FBQztRQUNoQixLQUFLLFFBQVE7WUFDWCxTQUFTLEdBQUcsUUFBUSxDQUFDO1lBQ3JCLEtBQUssQ0FBQztRQUNSLEtBQUssS0FBSyxDQUFDO1FBQ1gsS0FBSyxVQUFVO1lBQ2IsU0FBUyxHQUFHLFVBQVUsQ0FBQztZQUN2QixLQUFLLENBQUM7UUFDUixLQUFLLFNBQVMsQ0FBQztRQUNmOztZQUNFLFNBQVMsR0FBRyxTQUFTLENBQUM7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LFFBQVE7VUFDWCxDQUFDLFVBQVUsS0FBSyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksR0FBRyxVQUFVLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztVQUMvQyxJQUFJLEdBQUcsZ0JBQWdCLENBQUMsT0FBTyxDQUFDO1VBQ2hDLElBQUksR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQztDQUNyQzs7Ozs7QUFFRCxNQUFNLDJCQUEyQixLQUFLO0lBQ3BDLE1BQU0sQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUMsT0FBTyxDQUFDLGVBQWUsRUFBRSxHQUFHLENBQUMsQ0FBQztDQUNwRCIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBmdW5jdGlvbiBub3JtYWxpemVMYXlvdXRBbGlnblZhbHVlKGFsaWduOiBzdHJpbmcpIHtcbiAgYWxpZ24gPSBhbGlnbiB8fCAnc3RhcnQgc3RyZXRjaCc7XG5cbiAgbGV0IFttYWluQXhpcywgY3Jvc3NBeGlzXSA9IGFsaWduLnNwbGl0KCcgJyk7XG5cbiAgc3dpdGNoIChtYWluQXhpcykge1xuICAgIGNhc2UgJ2NlbnRlcic6XG4gICAgY2FzZSAnc3BhY2UtYXJvdW5kJzpcbiAgICBjYXNlICdzcGFjZS1iZXR3ZWVuJzpcbiAgICBjYXNlICdzcGFjZS1ldmVubHknOlxuICAgICAgYnJlYWs7XG4gICAgY2FzZSAnZW5kJzpcbiAgICBjYXNlICdmbGV4LWVuZCc6XG4gICAgICBtYWluQXhpcyA9ICdmbGV4LWVuZCc7XG4gICAgICBicmVhaztcbiAgICBjYXNlICdzdGFydCc6XG4gICAgY2FzZSAnZmxleC1zdGFydCc6XG4gICAgZGVmYXVsdCA6XG4gICAgICBtYWluQXhpcyA9ICdmbGV4LXN0YXJ0JzsgIC8vIGRlZmF1bHQgbWFpbiBheGlzXG4gICAgICBicmVhaztcbiAgfVxuXG4gIHN3aXRjaCAoY3Jvc3NBeGlzKSB7XG4gICAgY2FzZSAnc3RhcnQnOlxuICAgIGNhc2UgJ2ZsZXgtc3RhcnQnOlxuICAgICAgY3Jvc3NBeGlzID0gJ2ZsZXgtc3RhcnQnO1xuICAgICAgYnJlYWs7XG4gICAgY2FzZSAnYmFzZWxpbmUnOlxuICAgIGNhc2UgJ2NlbnRlcic6XG4gICAgICBjcm9zc0F4aXMgPSAnY2VudGVyJztcbiAgICAgIGJyZWFrO1xuICAgIGNhc2UgJ2VuZCc6XG4gICAgY2FzZSAnZmxleC1lbmQnOlxuICAgICAgY3Jvc3NBeGlzID0gJ2ZsZXgtZW5kJztcbiAgICAgIGJyZWFrO1xuICAgIGNhc2UgJ3N0cmV0Y2gnOlxuICAgIGRlZmF1bHQgOiAvLyAnc3RyZXRjaCdcbiAgICAgIGNyb3NzQXhpcyA9ICdzdHJldGNoJzsgICAvLyBkZWZhdWx0IGNyb3NzIGF4aXNcbiAgICAgIGJyZWFrO1xuICB9XG5cbiAgcmV0dXJuIFttYWluQXhpcywgY3Jvc3NBeGlzXTtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIGdlbmVyYXRlTGF5b3V0Q2xhc3NOYW1lKGRpcmVjdGlvbjogc3RyaW5nLCB3cmFwOiBzdHJpbmcsIGlzSW5saW5lOiBib29sZWFuLCBicmVha3BvaW50OiBzdHJpbmcpIHtcbiAgcmV0dXJuICdmY0xheW91dCdcbiAgICArIChicmVha3BvaW50ICE9PSAnYWxsJyA/ICctLScgKyBicmVha3BvaW50IDogJycpXG4gICAgKyAnLS0nICsgZGlyZWN0aW9uICsgKHdyYXAgPyAnLScgKyB3cmFwIDogJycpICsgKGlzSW5saW5lID8gJy1pbmxpbmUnIDogJycpO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gZ2VuZXJhdGVMYXlvdXRBbGlnbkNsYXNzTmFtZShtYWluQXhpczogc3RyaW5nLCBjcm9zc0F4aXM6IHN0cmluZywgYnJlYWtwb2ludDogc3RyaW5nKSB7XG4gIHJldHVybiAnZmNMYXlvdXRBbGlnbidcbiAgICArIChicmVha3BvaW50ICE9PSAnYWxsJyA/ICctLScgKyBicmVha3BvaW50IDogJycpXG4gICAgKyAnLS0nICsgbWFpbkF4aXMgKyAnLScgKyBjcm9zc0F4aXM7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBnZW5lcmF0ZUxheW91dEdhcENsYXNzTmFtZSh2YWx1ZTogc3RyaW5nLCBicmVha3BvaW50OiBzdHJpbmcpIHtcbiAgcmV0dXJuICdmY0xheW91dEdhcCdcbiAgICArIChicmVha3BvaW50ICE9PSAnYWxsJyA/ICctLScgKyBicmVha3BvaW50IDogJycpXG4gICAgKyAnLS0nICsgdmFsdWVUb0NsYXNzTmFtZSh2YWx1ZSk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBnZW5lcmF0ZUZsZXhDbGFzc05hbWUoZ3Jvdywgc2hyaW5rLCBiYXNpcywgYnJlYWtwb2ludDogc3RyaW5nKSB7XG4gIHJldHVybiAnZmNGbGV4J1xuICAgICsgKGJyZWFrcG9pbnQgIT09ICdhbGwnID8gJy0tJyArIGJyZWFrcG9pbnQgOiAnJylcbiAgICArICctLScgKyB2YWx1ZVRvQ2xhc3NOYW1lKGdyb3cpICsgJy0nICsgdmFsdWVUb0NsYXNzTmFtZShzaHJpbmspICsgKGJhc2lzID8gJy0nICsgdmFsdWVUb0NsYXNzTmFtZShiYXNpcykgOiAnJyk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBnZW5lcmF0ZUZsZXhPcmRlckNsYXNzTmFtZShvcmRlciwgYnJlYWtwb2ludDogc3RyaW5nKSB7XG4gIHJldHVybiAnZmNGbGV4T3JkZXInXG4gICAgKyAoYnJlYWtwb2ludCAhPT0gJ2FsbCcgPyAnLS0nICsgYnJlYWtwb2ludCA6ICcnKVxuICAgICsgJy0tJyArIHZhbHVlVG9DbGFzc05hbWUob3JkZXIpO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gZ2VuZXJhdGVGbGV4T2Zmc2V0Q2xhc3NOYW1lKG9mZnNldCwgYnJlYWtwb2ludDogc3RyaW5nKSB7XG4gIHJldHVybiAnZmNGbGV4T2Zmc2V0J1xuICAgICsgKGJyZWFrcG9pbnQgIT09ICdhbGwnID8gJy0tJyArIGJyZWFrcG9pbnQgOiAnJylcbiAgICArICctLScgKyB2YWx1ZVRvQ2xhc3NOYW1lKG9mZnNldCk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBnZW5lcmF0ZUZsZXhBbGlnbkNsYXNzTmFtZShhbGlnbiwgYnJlYWtwb2ludDogc3RyaW5nKSB7XG4gIHJldHVybiAnZmNGbGV4QWxpZ24nXG4gICAgKyAoYnJlYWtwb2ludCAhPT0gJ2FsbCcgPyAnLS0nICsgYnJlYWtwb2ludCA6ICcnKVxuICAgICsgJy0tJyArIHZhbHVlVG9DbGFzc05hbWUoYWxpZ24pO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gZ2VuZXJhdGVGbGV4RmlsbENsYXNzTmFtZSgpIHtcbiAgcmV0dXJuICdmY0ZsZXhGaWxsJztcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIGdlbmVyYXRlRmxleFNob3dIaWRlQ2xhc3NOYW1lKGRpc3BsYXksIHNob3c6IGJvb2xlYW4sIGJyZWFrcG9pbnQ6IHN0cmluZykge1xuICByZXR1cm4gJ2ZjU2hvdydcbiAgICArIChicmVha3BvaW50ICE9PSAnYWxsJyA/ICctLScgKyBicmVha3BvaW50IDogJycpXG4gICAgKyAnLS0nICsgdmFsdWVUb0NsYXNzTmFtZShkaXNwbGF5KVxuICAgICsgJy0tJyArIChzaG93ID8gJ3Nob3cnIDogJ2hpZGUnKTtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIHZhbHVlVG9DbGFzc05hbWUodmFsdWUpIHtcbiAgcmV0dXJuIFN0cmluZyh2YWx1ZSkucmVwbGFjZSgvW15hLXpBLVowLTktXS8sICctJyk7XG59XG4iXX0=