starface-outlook-sync-addin/node_modules/@fluentui/react/lib/components/Stack/Stack.styles.js

import { __assign } from "tslib";
import { getGlobalClassNames } from '../../Styling';
import { GlobalClassNames as StackItemGlobalClassNames } from './StackItem/StackItem.styles';
import { parseGap, parsePadding } from './StackUtils';
var nameMap = {
    start: 'flex-start',
    end: 'flex-end',
};
export var GlobalClassNames = {
    root: 'ms-Stack',
    inner: 'ms-Stack-inner',
    child: 'ms-Stack-child',
};
export var styles = function (props, theme, tokens) {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
    var className = props.className, disableShrink = props.disableShrink, enableScopedSelectors = props.enableScopedSelectors, grow = props.grow, horizontal = props.horizontal, horizontalAlign = props.horizontalAlign, reversed = props.reversed, verticalAlign = props.verticalAlign, verticalFill = props.verticalFill, wrap = props.wrap;
    var classNames = getGlobalClassNames(GlobalClassNames, theme);
    /*  eslint-disable @typescript-eslint/no-deprecated */
    var childrenGap = tokens && tokens.childrenGap ? tokens.childrenGap : props.gap;
    var maxHeight = tokens && tokens.maxHeight ? tokens.maxHeight : props.maxHeight;
    var maxWidth = tokens && tokens.maxWidth ? tokens.maxWidth : props.maxWidth;
    var padding = tokens && tokens.padding ? tokens.padding : props.padding;
    /* eslint-enable @typescript-eslint/no-deprecated */
    var _p = parseGap(childrenGap, theme), rowGap = _p.rowGap, columnGap = _p.columnGap;
    var horizontalMargin = "".concat(-0.5 * columnGap.value).concat(columnGap.unit);
    var verticalMargin = "".concat(-0.5 * rowGap.value).concat(rowGap.unit);
    // styles to be applied to all direct children regardless of wrap or direction
    var childStyles = {
        textOverflow: 'ellipsis',
    };
    var childSelector = '> ' + (enableScopedSelectors ? '.' + GlobalClassNames.child : '*');
    var disableShrinkStyles = (_a = {},
        // flexShrink styles are applied by the StackItem
        _a["".concat(childSelector, ":not(.").concat(StackItemGlobalClassNames.root, ")")] = {
            flexShrink: 0,
        },
        _a);
    if (wrap) {
        return {
            root: [
                classNames.root,
                {
                    flexWrap: 'wrap',
                    maxWidth: maxWidth,
                    maxHeight: maxHeight,
                    width: 'auto',
                    overflow: 'visible',
                    height: '100%',
                },
                horizontalAlign && (_b = {},
                    _b[horizontal ? 'justifyContent' : 'alignItems'] = nameMap[horizontalAlign] || horizontalAlign,
                    _b),
                verticalAlign && (_c = {},
                    _c[horizontal ? 'alignItems' : 'justifyContent'] = nameMap[verticalAlign] || verticalAlign,
                    _c),
                className,
                {
                    // not allowed to be overridden by className
                    // since this is necessary in order to prevent collapsing margins
                    display: 'flex',
                },
                horizontal && {
                    height: verticalFill ? '100%' : 'auto',
                },
            ],
            inner: [
                classNames.inner,
                (_d = {
                        display: 'flex',
                        flexWrap: 'wrap',
                        marginLeft: horizontalMargin,
                        marginRight: horizontalMargin,
                        marginTop: verticalMargin,
                        marginBottom: verticalMargin,
                        overflow: 'visible',
                        boxSizing: 'border-box',
                        padding: parsePadding(padding, theme),
                        // avoid unnecessary calc() calls if horizontal gap is 0
                        width: columnGap.value === 0 ? '100%' : "calc(100% + ".concat(columnGap.value).concat(columnGap.unit, ")"),
                        maxWidth: '100vw'
                    },
                    _d[childSelector] = __assign({ margin: "".concat(0.5 * rowGap.value).concat(rowGap.unit, " ").concat(0.5 * columnGap.value).concat(columnGap.unit) }, childStyles),
                    _d),
                disableShrink && disableShrinkStyles,
                horizontalAlign && (_e = {},
                    _e[horizontal ? 'justifyContent' : 'alignItems'] = nameMap[horizontalAlign] || horizontalAlign,
                    _e),
                verticalAlign && (_f = {},
                    _f[horizontal ? 'alignItems' : 'justifyContent'] = nameMap[verticalAlign] || verticalAlign,
                    _f),
                horizontal && (_g = {
                        flexDirection: reversed ? 'row-reverse' : 'row',
                        // avoid unnecessary calc() calls if vertical gap is 0
                        height: rowGap.value === 0 ? '100%' : "calc(100% + ".concat(rowGap.value).concat(rowGap.unit, ")")
                    },
                    _g[childSelector] = {
                        maxWidth: columnGap.value === 0 ? '100%' : "calc(100% - ".concat(columnGap.value).concat(columnGap.unit, ")"),
                    },
                    _g),
                !horizontal && (_h = {
                        flexDirection: reversed ? 'column-reverse' : 'column',
                        height: "calc(100% + ".concat(rowGap.value).concat(rowGap.unit, ")")
                    },
                    _h[childSelector] = {
                        maxHeight: rowGap.value === 0 ? '100%' : "calc(100% - ".concat(rowGap.value).concat(rowGap.unit, ")"),
                    },
                    _h),
            ],
        };
    }
    return {
        root: [
            classNames.root,
            (_j = {
                    display: 'flex',
                    flexDirection: horizontal ? (reversed ? 'row-reverse' : 'row') : reversed ? 'column-reverse' : 'column',
                    flexWrap: 'nowrap',
                    width: 'auto',
                    height: verticalFill ? '100%' : 'auto',
                    maxWidth: maxWidth,
                    maxHeight: maxHeight,
                    padding: parsePadding(padding, theme),
                    boxSizing: 'border-box'
                },
                _j[childSelector] = childStyles,
                _j),
            disableShrink && disableShrinkStyles,
            grow && {
                flexGrow: grow === true ? 1 : grow,
            },
            horizontalAlign && (_k = {},
                _k[horizontal ? 'justifyContent' : 'alignItems'] = nameMap[horizontalAlign] || horizontalAlign,
                _k),
            verticalAlign && (_l = {},
                _l[horizontal ? 'alignItems' : 'justifyContent'] = nameMap[verticalAlign] || verticalAlign,
                _l),
            horizontal &&
                columnGap.value > 0 && (_m = {},
                // apply gap margin to every direct child except the first direct child if the direction is not reversed,
                // and the last direct one if it is
                _m[reversed ? "".concat(childSelector, ":not(:last-child)") : "".concat(childSelector, ":not(:first-child)")] = {
                    marginLeft: "".concat(columnGap.value).concat(columnGap.unit),
                },
                _m),
            !horizontal &&
                rowGap.value > 0 && (_o = {},
                // apply gap margin to every direct child except the first direct child if the direction is not reversed,
                // and the last direct one if it is
                _o[reversed ? "".concat(childSelector, ":not(:last-child)") : "".concat(childSelector, ":not(:first-child)")] = {
                    marginTop: "".concat(rowGap.value).concat(rowGap.unit),
                },
                _o),
            className,
        ],
        // TODO: this cast may be hiding some potential issues with styling and name
        //        lookups and should be removed
    };
};
//# sourceMappingURL=Stack.styles.js.map