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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = exports.getArrowButtonStyles = void 0;
var tslib_1 = require("tslib");
var Styling_1 = require("../../Styling");
var Utilities_1 = require("../../Utilities");
var Positioning_1 = require("../../Positioning");
var ARROW_BUTTON_WIDTH = 23;
var ARROW_BUTTON_ICON_SIZE = 8;
var DEFAULT_HEIGHT = 32;
var DEFAULT_MIN_WIDTH = 86;
var LABEL_MARGIN = 10;
var getDisabledStyles = (0, Utilities_1.memoizeFunction)(function (theme) {
    var _a;
    var semanticColors = theme.semanticColors;
    var SpinButtonTextColorDisabled = semanticColors.disabledText;
    var SpinButtonBackgroundColorDisabled = semanticColors.disabledBackground;
    return {
        backgroundColor: SpinButtonBackgroundColorDisabled,
        pointerEvents: 'none',
        cursor: 'default',
        color: SpinButtonTextColorDisabled,
        selectors: (_a = {
                ':after': {
                    borderColor: SpinButtonBackgroundColorDisabled,
                }
            },
            _a[Styling_1.HighContrastSelector] = {
                color: 'GrayText',
            },
            _a),
    };
});
exports.getArrowButtonStyles = (0, Utilities_1.memoizeFunction)(function (theme, isUpArrow, customSpecificArrowStyles) {
    var _a, _b, _c;
    var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects;
    // TODO: after updating the semanticColor slots all this need to be reevaluated.
    var ArrowButtonTextColor = palette.neutralSecondary;
    var ArrowButtonTextColorHovered = semanticColors.buttonText;
    var ArrowButtonTextColorPressed = semanticColors.buttonText;
    var ArrowButtonBackgroundHovered = semanticColors.buttonBackgroundHovered;
    var ArrowButtonBackgroundPressed = semanticColors.buttonBackgroundPressed;
    var defaultArrowButtonStyles = {
        root: {
            outline: 'none',
            display: 'block',
            height: '50%',
            width: ARROW_BUTTON_WIDTH,
            padding: 0,
            backgroundColor: 'transparent',
            textAlign: 'center',
            cursor: 'default',
            color: ArrowButtonTextColor,
            selectors: {
                '&.ms-DownButton': {
                    borderRadius: "0 0 ".concat(effects.roundedCorner2, " 0"),
                },
                '&.ms-UpButton': {
                    borderRadius: "0 ".concat(effects.roundedCorner2, " 0 0"),
                },
            },
        },
        rootHovered: {
            backgroundColor: ArrowButtonBackgroundHovered,
            color: ArrowButtonTextColorHovered,
        },
        rootChecked: {
            backgroundColor: ArrowButtonBackgroundPressed,
            color: ArrowButtonTextColorPressed,
            selectors: (_a = {},
                _a[Styling_1.HighContrastSelector] = {
                    backgroundColor: 'Highlight',
                    color: 'HighlightText',
                },
                _a),
        },
        rootPressed: {
            backgroundColor: ArrowButtonBackgroundPressed,
            color: ArrowButtonTextColorPressed,
            selectors: (_b = {},
                _b[Styling_1.HighContrastSelector] = {
                    backgroundColor: 'Highlight',
                    color: 'HighlightText',
                },
                _b),
        },
        rootDisabled: {
            opacity: 0.5,
            selectors: (_c = {},
                _c[Styling_1.HighContrastSelector] = {
                    color: 'GrayText',
                    opacity: 1,
                },
                _c),
        },
        icon: {
            fontSize: ARROW_BUTTON_ICON_SIZE,
            marginTop: 0,
            marginRight: 0,
            marginBottom: 0,
            marginLeft: 0,
        },
    };
    // No specific styles needed as of now.
    var defaultUpArrowButtonStyles = {};
    var defaultDownArrowButtonStyles = {};
    return (0, Styling_1.concatStyleSets)(defaultArrowButtonStyles, isUpArrow ? defaultUpArrowButtonStyles : defaultDownArrowButtonStyles, customSpecificArrowStyles);
});
var getStyles = function (props) {
    var _a, _b, _c, _d;
    var theme = props.theme, className = props.className, labelPosition = props.labelPosition, disabled = props.disabled, isFocused = props.isFocused;
    var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
    var SpinButtonRootBorderColor = semanticColors.inputBorder;
    var SpinButtonRootBackgroundColor = semanticColors.inputBackground;
    var SpinButtonRootBorderColorHovered = semanticColors.inputBorderHovered;
    var SpinButtonRootBorderColorFocused = semanticColors.inputFocusBorderAlt;
    var SpinButtonInputTextColor = semanticColors.inputText;
    var SpinButtonInputTextColorSelected = palette.white;
    var SpinButtonInputBackgroundColorSelected = semanticColors.inputBackgroundChecked;
    var SpinButtonIconDisabledColor = semanticColors.disabledText;
    return {
        root: [
            fonts.medium,
            {
                outline: 'none',
                width: '100%',
                minWidth: DEFAULT_MIN_WIDTH,
            },
            className,
        ],
        labelWrapper: [
            {
                display: 'inline-flex',
                alignItems: 'center',
            },
            labelPosition === Positioning_1.Position.start && {
                height: DEFAULT_HEIGHT,
                float: 'left',
                marginRight: LABEL_MARGIN,
            },
            labelPosition === Positioning_1.Position.end && {
                height: DEFAULT_HEIGHT,
                float: 'right',
                marginLeft: LABEL_MARGIN,
            },
            labelPosition === Positioning_1.Position.top && {
                // Due to the lineHeight set on the label (below), the height of the wrapper (contains icon+label)
                // ends up 1px taller than a standard label height, causing the vertical alignment to be off when
                // the SpinButton is displayed with the label on top next to other form fields.
                // Decrease the wrapper's effective height slightly to compensate.
                marginBottom: -1,
            },
        ],
        icon: [
            {
                padding: '0 5px',
                fontSize: Styling_1.IconFontSizes.large,
            },
            disabled && {
                color: SpinButtonIconDisabledColor,
            },
        ],
        label: {
            pointerEvents: 'none',
            // centering the label with the icon by forcing the exact same height as the icon.
            lineHeight: Styling_1.IconFontSizes.large,
        },
        spinButtonWrapper: [
            tslib_1.__assign(tslib_1.__assign({ display: 'flex', position: 'relative', boxSizing: 'border-box', height: DEFAULT_HEIGHT, minWidth: DEFAULT_MIN_WIDTH }, (0, Styling_1.getInputFocusStyle)(SpinButtonRootBorderColor, effects.roundedCorner2, 'border', 0)), { ':after': (_a = {
                        borderWidth: '1px'
                    },
                    _a[Styling_1.HighContrastSelector] = {
                        borderColor: 'GrayText',
                    },
                    _a) }),
            (labelPosition === Positioning_1.Position.top || labelPosition === Positioning_1.Position.bottom) && {
                width: '100%',
            },
            !disabled && [
                {
                    ':hover:after': (_b = {
                            borderColor: SpinButtonRootBorderColorHovered
                        },
                        _b[Styling_1.HighContrastSelector] = {
                            borderColor: 'Highlight',
                        },
                        _b),
                },
                isFocused && {
                    ':hover:after, :after': (_c = {
                            borderColor: SpinButtonRootBorderColorFocused,
                            borderWidth: '2px'
                        },
                        _c[Styling_1.HighContrastSelector] = {
                            borderColor: 'Highlight',
                        },
                        _c),
                },
            ],
            disabled && getDisabledStyles(theme),
        ],
        input: [
            'ms-spinButton-input',
            {
                boxSizing: 'border-box',
                boxShadow: 'none',
                borderStyle: 'none',
                flex: 1,
                margin: 0,
                fontSize: fonts.medium.fontSize,
                fontFamily: 'inherit',
                color: SpinButtonInputTextColor,
                backgroundColor: SpinButtonRootBackgroundColor,
                height: '100%',
                padding: '0 8px 0 9px',
                outline: 0,
                display: 'block',
                minWidth: DEFAULT_MIN_WIDTH - ARROW_BUTTON_WIDTH - 2,
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                overflow: 'hidden',
                cursor: 'text',
                userSelect: 'text',
                borderRadius: "".concat(effects.roundedCorner2, " 0 0 ").concat(effects.roundedCorner2),
            },
            !disabled && {
                selectors: {
                    '::selection': {
                        backgroundColor: SpinButtonInputBackgroundColorSelected,
                        color: SpinButtonInputTextColorSelected,
                        selectors: (_d = {},
                            _d[Styling_1.HighContrastSelector] = {
                                backgroundColor: 'Highlight',
                                borderColor: 'Highlight',
                                color: 'HighlightText',
                            },
                            _d),
                    },
                },
            },
            disabled && getDisabledStyles(theme),
        ],
        arrowButtonsContainer: [
            {
                display: 'block',
                height: '100%',
                cursor: 'default',
            },
            disabled && getDisabledStyles(theme),
        ],
    };
};
exports.getStyles = getStyles;
//# sourceMappingURL=SpinButton.styles.js.map