import { __extends } from "tslib";
import * as React from 'react';
import { Chiclet, ChicletSize } from '@fluentui/react-experiments';
import { Breadcrumb } from '@fluentui/react/lib/Breadcrumb';
import { Icon } from '@fluentui/react/lib/Icon';
import { TooltipHost, TooltipOverflowMode } from '@fluentui/react/lib/Tooltip';
import { getRTL } from '@fluentui/react/lib/Utilities';
import { mergeStyles, FontWeights } from '@fluentui/react/lib/Styling';
var SAMPLE_URL = 'https://contoso.sharepoint.com';
var chevronStyle = mergeStyles({
    fontSize: 8,
    paddingLeft: 3,
    paddingRight: 3,
});
var descriptionStyle = mergeStyles({
    fontSize: 12,
    fontWeight: FontWeights.semibold,
    lineHeight: 14,
    textAlign: 'left',
    color: '#797671',
    maxWidth: '100%',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
});
var Divider = function () { return React.createElement(Icon, { iconName: getRTL() ? 'ChevronLeft' : 'ChevronRightSmall', className: chevronStyle }); };
var ChicletBreadcrumbExample = /** @class */ (function (_super) {
    __extends(ChicletBreadcrumbExample, _super);
    function ChicletBreadcrumbExample(props) {
        return _super.call(this, props) || this;
    }
    ChicletBreadcrumbExample.prototype.render = function () {
        var breadcrumb = (React.createElement(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(Chiclet, { url: SAMPLE_URL, title: "Quarterly Results.docx", image: "https://static2.sharepointonline.com/files/fabric/assets/item-types/96/docx.svg", size: ChicletSize.medium, description: breadcrumb }));
    };
    ChicletBreadcrumbExample.prototype._onRenderItem = function (item) {
        return (React.createElement(TooltipHost, { overflowMode: TooltipOverflowMode.Parent, className: descriptionStyle }, item.text));
    };
    return ChicletBreadcrumbExample;
}(React.Component));
export { ChicletBreadcrumbExample };
//# sourceMappingURL=Chiclet.Breadcrumb.Example.js.map