fractal-core/core/style.js

A minimalist and well crafted app, content or component is our conviction

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const typestyle_1 = require("typestyle");
const fun_1 = require("../utils/fun");
const view_1 = require("../interfaces/view");
exports.getStyles = typestyle_1.getStyles;
/* istanbul ignore next */
function styleGroup(instance, stylesObj, moduleName) {
    let classes = {};
    for (let key in stylesObj) {
        if (moduleName !== undefined) {
            classes[key] = instance.style(stylesObj[key], { $debugName: `_${moduleName}_${key}__` });
        }
        else {
            classes[key] = instance.style(stylesObj[key]);
        }
    }
    return classes;
}
exports.styleGroup = styleGroup;
/* istanbul ignore next */
function hasBaseObject(obj) {
    for (let key in obj) {
        if (obj[key] !== null && typeof obj[key] === 'object' && key == 'base') {
            return true;
        }
    }
    return false;
}
exports.hasBaseObject = hasBaseObject;
// function for ngClass with one dynamic property
/* istanbul ignore next */
function c(className, condition) {
    return {
        [className]: condition,
    };
}
exports.c = c;
/* istanbul ignore next */
function mergeStyles(group1, group2) {
    let mergedGroup = { base: {} };
    for (let i = 0, keys = Object.keys(group1), len = keys.length; i < len; i++) {
        mergedGroup[keys[i]] = group1[keys[i]];
    }
    for (let i = 0, keys = Object.keys(group2), len = keys.length; i < len; i++) {
        if (mergedGroup[keys[i]] && typeof mergedGroup[keys[i]] === 'object') {
            mergedGroup[keys[i]] = fun_1.deepmerge(mergedGroup[keys[i]], group2[keys[i]]);
        }
        else {
            mergedGroup[keys[i]] = group2[keys[i]];
        }
    }
    return mergedGroup;
}
exports.mergeStyles = mergeStyles;
exports.getStyle = (F) => {
    const style = F.ctx.groups.style;
    return (...args) => {
        let obj = {};
        for (let i = 0, len = args.length, arg; i < len; i += 2) {
            arg = args[i + 1];
            obj[style[args[i]]] = arg === undefined ? true : arg;
        }
        return obj;
    };
};
exports.placeholderColor = (color) => ({
    $nest: {
        '&::-webkit-input-placeholder': {
            $unique: true,
            color: color,
        },
        '&::-moz-placeholder': {
            $unique: true,
            color: color,
            opacity: 1,
        },
        '&:-ms-input-placeholder': {
            $unique: true,
            color: color,
        },
    },
});
exports.absoluteCenter = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
};
exports.clickable = {
    cursor: 'pointer',
    userSelect: 'none',
    '-moz-user-select': 'none',
};
exports.obfuscator = {
    position: 'absolute',
    top: '0px',
    left: '0px',
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0,0,0,0.5)',
    display: 'none',
};
// Evaluate deprecation
exports.imageRenderingContrast = {
    'imageRendering': [
        'optimizeSpeed',
        '-moz-crisp-edges',
        '-o-crisp-edges',
        '-webkit-optimize-contrast',
        'optimize-contrast',
    ],
    '-ms-interpolation-mode': 'nearest-neighbor',
};
exports.iconView = (iconName, options = {}) => view_1.h('svg', fun_1.deepmerge({ class: { ['svg_' + iconName]: true } }, options), [
    view_1.h('use', { attrs: { 'xlink:href': 'assets/icons-bundle.min.svg#' + iconName } }),
]);
//# sourceMappingURL=style.js.map