define(["require", "exports", "tslib", "react", "@uifabric/experiments/lib/Chiclet", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/Icon", "office-ui-fabric-react/lib/Text", "office-ui-fabric-react/lib/Styling"], function (require, exports, tslib_1, React, Chiclet_1, Button_1, Icon_1, Text_1, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var SAMPLE_URL = 'https://contoso.sharepoint.com';
    var footerStyle = Styling_1.mergeStyles({
        display: 'flex',
    });
    var activitiesStyle = Styling_1.mergeStyles({
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        width: 190,
        fontSize: 12,
        lineHeight: 1.83,
        letterSpacing: 'normal',
    });
    var attachStyle = Styling_1.mergeStyles({
        height: '24px',
        width: '16px',
        fontSize: '16px',
        marginTop: '6px',
        marginLeft: '6px',
        backgroundColor: 'white',
        color: '#0078d7',
    });
    var sizeStyle = Styling_1.mergeStyles({
        width: 34,
        alignSelf: 'center',
        lineHeight: 1.83,
        letterSpacing: 'normal',
    });
    exports.ChicletXsmallFooterExample = function () {
        var footerButtonProps = [
            { iconProps: { iconName: 'More' } },
            { iconProps: { iconName: 'CloudUpload' } },
        ];
        var attachIconProp = { iconName: 'Attach' };
        var footer = React.createElement(FooterComponent, { buttonProps: footerButtonProps, attachProps: attachIconProp });
        return (React.createElement(Chiclet_1.Chiclet, { url: SAMPLE_URL, title: "Quarterly Results.docx", image: "https://static2.sharepointonline.com/files/fabric/assets/item-types/48/docx.svg", itemType: "docx", size: Chiclet_1.ChicletSize.xSmall, footer: footer }));
    };
    var FooterComponent = /** @class */ (function (_super) {
        tslib_1.__extends(FooterComponent, _super);
        function FooterComponent() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        FooterComponent.prototype.render = function () {
            var _a = this.props, buttonProps = _a.buttonProps, attachProps = _a.attachProps;
            return _renderFooter(buttonProps, attachProps);
        };
        return FooterComponent;
    }(React.Component));
    function _renderFooter(buttonProps, attachProps) {
        return (React.createElement("div", { className: footerStyle },
            React.createElement(Icon_1.Icon, tslib_1.__assign({}, attachProps, { className: attachStyle })),
            React.createElement(Text_1.Text, { variant: "small", className: sizeStyle }, '4MB'),
            React.createElement("div", { className: activitiesStyle }, buttonProps &&
                buttonProps.map(function (buttonProp, index) {
                    return (React.createElement("div", { key: index },
                        React.createElement(Button_1.IconButton, tslib_1.__assign({}, buttonProp))));
                }))));
    }
});
//# sourceMappingURL=Chiclet.Xsmall.Footer.Example.js.map