@platform/css/lib/css/css.js

Helpers for working with inline CSS.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var common_1 = require("../common");
var util_1 = require("./util");
tslib_1.__exportStar(require("./util"), exports);
exports.MEDIA_QUERY_RETINA = "@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
exports.image = function (image1x, image2x, options) {
    if (options === void 0) { options = { width: 10, height: 10 }; }
    if (!image1x) {
        throw new Error('Must have at least a 1x image.');
    }
    var width = options.width, height = options.height;
    var result = {
        width: width,
        height: height,
        backgroundImage: "url(" + image1x + ")",
        backgroundSize: width + "px " + height + "px",
        backgroundRepeat: 'no-repeat',
    };
    if (image2x) {
        result[exports.MEDIA_QUERY_RETINA] = {
            backgroundImage: "url(" + image2x + ")",
        };
    }
    return result;
};
var mergeAndReplace = function (key, value, target) {
    Object.assign(target, value);
    delete target[key];
    return target;
};
var formatImage = function (key, value, target) {
    var image1x = value[0], image2x = value[1], width = value[2], height = value[3];
    if (typeof image2x === 'number') {
        height = width;
        width = image2x;
        image2x = undefined;
    }
    var options = {
        width: width,
        height: height,
    };
    var style = exports.image(image1x, image2x, options);
    mergeAndReplace(key, style, target);
};
exports.toPositionEdges = function (key, value) {
    if (value === void 0) { value = undefined; }
    var edges = util_1.toEdges(value);
    if (common_1.R.isEmpty(edges)) {
        return undefined;
    }
    var left = edges.left, top = edges.top, right = edges.right, bottom = edges.bottom;
    if (top === undefined && right === undefined && bottom === undefined && left === undefined) {
        return undefined;
    }
    return {
        position: key.toLowerCase(),
        top: top,
        right: right,
        bottom: bottom,
        left: left,
    };
};
exports.formatPositionEdges = function (key, target) {
    var styles = exports.toPositionEdges(key, target[key]);
    mergeAndReplace(key, styles, target);
};
var formatAbsoluteCenter = function (key, value, target) {
    if (value === true) {
        value = 'xy';
    }
    if (value === false || value === undefined || value === null) {
        return;
    }
    var styles = {
        position: 'absolute',
        left: target.left,
        top: target.top,
        transform: '',
    };
    var stringValue = value
        .toString()
        .trim()
        .toLowerCase();
    if (stringValue.includes('x')) {
        styles.left = '50%';
    }
    if (stringValue.includes('y')) {
        styles.top = '50%';
    }
    var transform;
    switch (value) {
        case 'yx':
        case 'xy':
            transform = 'translate(-50%, -50%)';
            break;
        case 'x':
            transform = 'translateX(-50%)';
            break;
        case 'y':
            transform = 'translateY(-50%)';
            break;
        default:
            throw new Error("AbsoluteCenter value '" + value + "' not supported.");
    }
    styles.transform = ((target.transform || '') + " " + transform).trim();
    mergeAndReplace(key, styles, target);
};
function formatSpacingPlane(plane, prefix, key, value, target) {
    var styles = {};
    var edges = util_1.toEdges(value);
    if (edges && plane.includes('x')) {
        styles[prefix + "Left"] = edges.left;
        styles[prefix + "Right"] = edges.right;
    }
    if (edges && plane.includes('y')) {
        styles[prefix + "Top"] = edges.top;
        styles[prefix + "Bottom"] = edges.bottom;
    }
    mergeAndReplace(key, styles, target);
}
function formatScroll(key, value, target) {
    if (value === true) {
        var styles = {
            overflowX: 'hidden',
            overflowY: 'scroll',
            WebkitOverflowScrolling: 'touch',
        };
        mergeAndReplace(key, styles, target);
    }
    if (value === false) {
        var styles = {
            overflow: 'hidden',
        };
        mergeAndReplace(key, styles, target);
    }
}
var AlignMap = {
    center: 'center',
    left: 'flex-start',
    top: 'flex-start',
    start: 'flex-start',
    right: 'flex-end',
    bottom: 'flex-end',
    end: 'flex-end',
    full: 'stretch',
    stretch: 'stretch',
    baseline: 'baseline',
};
function convertCrossAlignToFlex(token) {
    return AlignMap[token] || undefined;
}
var MainAlignMap = {
    center: 'center',
    left: 'flex-start',
    top: 'flex-start',
    start: 'flex-start',
    right: 'flex-end',
    bottom: 'flex-end',
    end: 'flex-end',
    spaceBetween: 'space-between',
    spaceAround: 'space-around',
    spaceEvenly: 'space-evenly',
};
function convertMainAlignToFlex(token) {
    return MainAlignMap[token] || undefined;
}
function formatFlexPosition(key, value, target) {
    var direction;
    var mainAlignment;
    var crossAlignment;
    var tokens = value.split('-').map(function (token) { return token.trim(); });
    tokens.map(function (token) {
        var tokenIsOneOf = function (options) { return options.includes(token); };
        if (direction == null && tokenIsOneOf(['horizontal', 'vertical'])) {
            direction = token === 'vertical' ? 'column' : 'row';
            return;
        }
        if (tokenIsOneOf(['center', 'start', 'end', 'left', 'right', 'top', 'bottom', 'full', 'baseline'])) {
            if (crossAlignment == null) {
                if (direction == null && tokenIsOneOf(['left', 'right'])) {
                    direction = 'column';
                }
                if (direction == null && tokenIsOneOf(['top', 'bottom'])) {
                    direction = 'row';
                }
                crossAlignment = convertCrossAlignToFlex(token);
                return;
            }
            mainAlignment = convertMainAlignToFlex(token);
            return;
        }
        if (tokenIsOneOf(['spaceAround', 'spaceBetween', 'spaceEvenly'])) {
            mainAlignment = convertMainAlignToFlex(token);
            return;
        }
    });
    var styles = {
        display: 'flex',
        flexDirection: direction,
        alignItems: crossAlignment,
        justifyContent: mainAlignment,
    };
    mergeAndReplace(key, styles, target);
}
exports.transform = function (style) {
    if (style === void 0) { style = {}; }
    if (style == null) {
        return {};
    }
    if (style === false) {
        return {};
    }
    if (typeof style !== 'object') {
        return style;
    }
    Object.keys(style).forEach(function (key) {
        var value = style[key];
        if (value === false || value === null || value === undefined) {
            delete style[key];
        }
        else if (common_1.valueUtil.isPlainObject(value)) {
            style[key] = exports.transform(value);
        }
        else {
            switch (key) {
                case 'Image':
                    formatImage(key, value, style);
                    break;
                case 'Absolute':
                    exports.formatPositionEdges(key, style);
                    break;
                case 'Fixed':
                    exports.formatPositionEdges(key, style);
                    break;
                case 'AbsoluteCenter':
                    formatAbsoluteCenter(key, value, style);
                    break;
                case 'Margin':
                    formatSpacingPlane('xy', 'margin', key, value, style);
                    break;
                case 'MarginX':
                    formatSpacingPlane('x', 'margin', key, value, style);
                    break;
                case 'MarginY':
                    formatSpacingPlane('y', 'margin', key, value, style);
                    break;
                case 'Padding':
                    formatSpacingPlane('xy', 'padding', key, value, style);
                    break;
                case 'PaddingX':
                    formatSpacingPlane('x', 'padding', key, value, style);
                    break;
                case 'PaddingY':
                    formatSpacingPlane('y', 'padding', key, value, style);
                    break;
                case 'Flex':
                    formatFlexPosition(key, value, style);
                    break;
                case 'Scroll':
                    formatScroll(key, value, style);
                    break;
                default:
            }
        }
    });
    return style;
};
var formatCss = function () {
    var styles = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        styles[_i] = arguments[_i];
    }
    return common_1.jss.css.apply(common_1.jss, styles.map(exports.transform));
};
formatCss.image = exports.image;
exports.format = formatCss;