define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Stack", "office-ui-fabric-react/lib/Text", "@uifabric/experiments/lib/MenuButton", "@uifabric/experiments/lib/SplitButton"], function (require, exports, tslib_1, React, Stack_1, Text_1, MenuButton_1, SplitButton_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var menuProps = {
        items: [
            {
                key: 'a',
                name: 'Item a',
            },
            {
                key: 'b',
                name: 'Item b',
            },
        ],
    };
    var RibbonMenuButtonTokens = {
        backgroundColorExpanded: '#C8C6C4',
        backgroundColorHovered: '#C8C6C4',
        backgroundColorExpandedHovered: '#C8C6C4',
        backgroundColorPressed: '#C8C6C4',
        backgroundColorExpandedPressed: '#C8C6C4',
        childrenGap: 0,
        height: '100%',
    };
    var RibbonMenuButtonVerticalTokens = tslib_1.__assign(tslib_1.__assign({}, RibbonMenuButtonTokens), { contentPadding: '2px 4px 0px', iconSize: '32px', textSize: '12px', minHeight: 0 });
    var RibbonMenuButtonVerticalStyles = {
        root: {
            flexDirection: 'column',
        },
        icon: {
            marginBottom: 4,
            padding: 4,
        },
        content: {
            marginBottom: '-4px',
        },
        menuIcon: {
            fontSize: '6px',
        },
    };
    var RibbonMenuButton = function (props) {
        var mergedProps = props.vertical
            ? tslib_1.__assign(tslib_1.__assign({}, props), { menuIcon: 'ChevronDownSmall', styles: RibbonMenuButtonVerticalStyles, tokens: RibbonMenuButtonVerticalTokens }) : tslib_1.__assign(tslib_1.__assign({}, props), { tokens: RibbonMenuButtonTokens });
        return React.createElement(MenuButton_1.MenuButton, tslib_1.__assign({}, mergedProps));
    };
    var SplitMenuButtonVerticalTokens = tslib_1.__assign(tslib_1.__assign({}, RibbonMenuButtonTokens), { contentPadding: 4, secondaryPadding: '0px 4px', iconSize: '32px', textSize: '12px' });
    var SplitMenuButtonVerticalStyles = function (props, theme, tokens) {
        return {
            button: {
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 0,
                borderTopLeftRadius: tokens.borderRadius,
                borderTopRightRadius: tokens.borderRadius,
                borderBottomWidth: tokens.borderWidth,
                borderLeftWidth: tokens.borderWidth,
                borderRightWidth: tokens.borderWidth,
                borderTopWidth: tokens.borderWidth,
                width: '100%',
            },
            menuButton: {
                borderBottomLeftRadius: tokens.borderRadius,
                borderBottomRightRadius: tokens.borderRadius,
                borderTopLeftRadius: 0,
                borderTopRightRadius: 0,
                borderBottomWidth: tokens.borderWidth,
                borderLeftWidth: tokens.borderWidth,
                borderRightWidth: tokens.borderWidth,
                borderTopWidth: 0,
            },
            splitDividerContainer: {
                borderWidth: 0,
            },
        };
    };
    var SplitMenuButtonVerticalSlots = {
        menuButton: {
            component: RibbonMenuButton,
        },
        splitDivider: { render: function () { return null; } },
    };
    var RibbonSplitMenuButton = function (props) {
        var content = props.content, vertical = props.vertical, rest = tslib_1.__rest(props, ["content", "vertical"]);
        var rootProps = {
            style: {
                alignItems: 'center',
                flexDirection: 'column',
            },
        };
        // TODO: This cast is required because menu is required in IMenuButtonSlots. However, it's provided by the top level
        // props of ISplitRibbonMenuButton props, so it shouldn't be required in multiple places.
        // Should menu be made optional in IMenuButtonSlots?
        var verticalMenuButtonProps = {
            content: props.content,
            vertical: true,
        };
        // Move content to menu button when vertical.
        var mergedProps = vertical
            ? tslib_1.__assign(tslib_1.__assign({}, rest), { root: rootProps, menuButton: verticalMenuButtonProps, styles: SplitMenuButtonVerticalStyles, tokens: SplitMenuButtonVerticalTokens, slots: SplitMenuButtonVerticalSlots }) : tslib_1.__assign(tslib_1.__assign({}, rest), { content: content, tokens: RibbonMenuButtonTokens });
        return React.createElement(SplitButton_1.SplitButton, tslib_1.__assign({}, mergedProps));
    };
    var ButtonSlotsExample = /** @class */ (function (_super) {
        tslib_1.__extends(ButtonSlotsExample, _super);
        function ButtonSlotsExample() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        ButtonSlotsExample.prototype.render = function () {
            var stackTokens = { childrenGap: 10 };
            return (React.createElement(Stack_1.Stack, { tokens: stackTokens },
                React.createElement(Text_1.Text, null, "Horizontal Buttons"),
                React.createElement(Stack_1.Stack, { horizontal: true, tokens: stackTokens },
                    React.createElement(RibbonSplitMenuButton, { icon: "Microphone", content: "Dictate", menu: menuProps }),
                    React.createElement(RibbonMenuButton, { icon: "MarkAsProtected", content: "Sensitivity", menu: menuProps })),
                React.createElement(Text_1.Text, null, "Vertical Buttons"),
                React.createElement(Stack_1.Stack, { horizontal: true, verticalAlign: "stretch", tokens: stackTokens },
                    React.createElement(RibbonSplitMenuButton, { vertical: true, icon: "Microphone", content: "Dictate", menu: menuProps }),
                    React.createElement(RibbonMenuButton, { vertical: true, icon: "MarkAsProtected", content: "Sensitivity", menu: menuProps }))));
        };
        return ButtonSlotsExample;
    }(React.Component));
    exports.ButtonSlotsExample = ButtonSlotsExample;
});
//# sourceMappingURL=Button.Slots.Example.js.map