"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var experiments_1 = require("@uifabric/experiments");
var Breadcrumb_1 = require("office-ui-fabric-react/lib-commonjs/Breadcrumb");
var Icon_1 = require("office-ui-fabric-react/lib-commonjs/Icon");
var Tooltip_1 = require("office-ui-fabric-react/lib-commonjs/Tooltip");
var Utilities_1 = require("office-ui-fabric-react/lib-commonjs/Utilities");
var Styling_1 = require("office-ui-fabric-react/lib-commonjs/Styling");
var SAMPLE_URL = 'https://contoso.sharepoint.com';
var chevronStyle = Styling_1.mergeStyles({
    fontSize: 8,
    paddingLeft: 3,
    paddingRight: 3,
});
var descriptionStyle = Styling_1.mergeStyles({
    fontSize: 12,
    fontWeight: Styling_1.FontWeights.semibold,
    lineHeight: 14,
    textAlign: 'left',
    color: '#797671',
    maxWidth: '100%',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
});
var Divider = function () { return React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? 'ChevronLeft' : 'ChevronRightSmall', className: chevronStyle }); };
var ChicletBreadcrumbExample = /** @class */ (function (_super) {
    tslib_1.__extends(ChicletBreadcrumbExample, _super);
    function ChicletBreadcrumbExample(props) {
        return _super.call(this, props) || this;
    }
    ChicletBreadcrumbExample.prototype.render = function () {
        var breadcrumb = (React.createElement(Breadcrumb_1.Breadcrumb, { items: [
                { text: 'Files', key: 'Files' },
                { text: 'OneDrive Design', key: 'OneDrive Design' },
                { text: 'Emails', key: 'Emails' },
                { text: 'Campaigns', key: 'Campaigns' },
            ], className: descriptionStyle, onRenderItem: this._onRenderItem, dividerAs: Divider }));
        return (React.createElement(experiments_1.Chiclet, { url: SAMPLE_URL, title: "Quarterly Results.docx", image: "https://static2.sharepointonline.com/files/fabric/assets/item-types/96/docx.svg", size: experiments_1.ChicletSize.medium, description: breadcrumb }));
    };
    ChicletBreadcrumbExample.prototype._onRenderItem = function (item) {
        return (React.createElement(Tooltip_1.TooltipHost, { overflowMode: Tooltip_1.TooltipOverflowMode.Parent, className: descriptionStyle }, item.text));
    };
    return ChicletBreadcrumbExample;
}(React.Component));
exports.ChicletBreadcrumbExample = ChicletBreadcrumbExample;
//# sourceMappingURL=Chiclet.Breadcrumb.Example.js.map