(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[6],{

/***/ "../core-ui-fabric-samples/lib/component/NavigationView.js":
/*!*****************************************************************!*\
  !*** ../core-ui-fabric-samples/lib/component/NavigationView.js ***!
  \*****************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = __webpack_require__(/*! react */ "../../node_modules/react/index.js");
var NavigationView_1 = __webpack_require__(/*! @twii/core-ui-fabric/lib/component/NavigationView */ "../core-ui-fabric/lib/component/NavigationView.js");
var Checkbox_1 = __webpack_require__(/*! office-ui-fabric-react/lib/Checkbox */ "../../node_modules/office-ui-fabric-react/lib/Checkbox.js");
var NavigationViewSample = /** @class */ (function (_super) {
    __extends(NavigationViewSample, _super);
    function NavigationViewSample(props) {
        var _this = _super.call(this, props) || this;
        _this._onClickHello = function () {
        };
        _this._onClickGoodbye = function () {
        };
        _this._onMenuInlineChange = function (e, checked) {
            _this.setState({ menuInline: checked });
        };
        _this.state = { menuInline: false };
        return _this;
    }
    NavigationViewSample.prototype.render = function () {
        var items = [
            {
                key: "hello",
                name: "Hello",
                onClick: this._onClickHello
            },
            {
                key: "subMenu",
                name: "Sub Menu",
                iconProps: { iconName: "ContextMenu" },
                subMenuProps: {
                    items: [
                        {
                            key: "goodbye",
                            name: "Goodbye",
                            onClick: this._onClickGoodbye
                        }
                    ]
                }
            }
        ];
        return (React.createElement(NavigationView_1.NavigationView, { title: "Sample Navigation View", items: items, menuInline: this.state.menuInline },
            React.createElement("div", { style: { padding: 8 } },
                React.createElement("h2", null, "Navigation View Sample"),
                React.createElement("div", { style: { padding: 8 } },
                    React.createElement(Checkbox_1.Checkbox, { label: "Inline", checked: this.state.menuInline, onChange: this._onMenuInlineChange })))));
    };
    return NavigationViewSample;
}(React.Component));
exports.NavigationViewSample = NavigationViewSample;
exports.default = NavigationViewSample;


/***/ }),

/***/ "../core-ui-fabric/lib/component/NavigationView.classNames.js":
/*!********************************************************************!*\
  !*** ../core-ui-fabric/lib/component/NavigationView.classNames.js ***!
  \********************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

Object.defineProperty(exports, "__esModule", { value: true });
var styling_1 = __webpack_require__(/*! @uifabric/styling */ "../../node_modules/@uifabric/styling/lib/index.js");
var utilities_1 = __webpack_require__(/*! @uifabric/utilities */ "../../node_modules/@uifabric/utilities/lib/index.js");
var getClassNames = utilities_1.memoizeFunction(function (styles, className) {
    return {
        root: styling_1.mergeStyles("navigation-view", className, styles.root),
        menu: styling_1.mergeStyles("navigation-view-menu", styles.menu),
        menuGlass: styling_1.mergeStyles("navigation-view-menu-glass", styles.menuGlass),
        menuContent: styling_1.mergeStyles("navigation-view-menu-content", styles.menuContent),
        title: styling_1.mergeStyles("navigation-view-title", styles.title),
        menuContentNear: styling_1.mergeStyles("navigation-view-menu-content-near", styles.menuContentNear),
        menuContentFar: styling_1.mergeStyles("navigation-view-menu-far", styles.menuContentFar),
        menuItemContainer: styling_1.mergeStyles("navigation-view-menu-item-container", styles.menuItemContainer),
        menuItem: styling_1.mergeStyles("navigation-view-menu-item", styles.menuItem),
        menuItemTitleContainer: styling_1.mergeStyles("navigation-view-menu-item-title-container", styles.menuItemTitleContainer),
        menuItemIconContainer: styling_1.mergeStyles("navigation-view-menu-item-icon-container", styles.menuItemIconContainer),
        menuItemIconAlt: styling_1.mergeStyles("navigation-view-menu-item-icon-alt", styles.menuItemIconAlt),
        main: styling_1.mergeStyles("navigation-view-main", styles.main)
    };
});
exports.getClassNames = getClassNames;


/***/ }),

/***/ "../core-ui-fabric/lib/component/NavigationView.js":
/*!*********************************************************!*\
  !*** ../core-ui-fabric/lib/component/NavigationView.js ***!
  \*********************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __webpack_require__(/*! react */ "../../node_modules/react/index.js");
var Icon_1 = __webpack_require__(/*! office-ui-fabric-react/lib/Icon */ "../../node_modules/office-ui-fabric-react/lib/Icon.js");
var ContextualMenu_1 = __webpack_require__(/*! office-ui-fabric-react/lib/ContextualMenu */ "../../node_modules/office-ui-fabric-react/lib/ContextualMenu.js");
var css_1 = __webpack_require__(/*! @uifabric/utilities/lib/css */ "../../node_modules/@uifabric/utilities/lib/css.js");
var NavigationView_styles_1 = __webpack_require__(/*! ./NavigationView.styles */ "../core-ui-fabric/lib/component/NavigationView.styles.js");
var NavigationView_classNames_1 = __webpack_require__(/*! ./NavigationView.classNames */ "../core-ui-fabric/lib/component/NavigationView.classNames.js");
var NavigationViewMenuItem = /** @class */ (function (_super) {
    __extends(NavigationViewMenuItem, _super);
    function NavigationViewMenuItem(props) {
        var _this = _super.call(this, props) || this;
        _this._onClick = function (e) {
            if (_this.props.item.onClick) {
                _this.props.item.onClick(e, _this.props.item);
                if (_this.props.onClickItem) {
                    _this.props.onClickItem(e, _this.props.item);
                }
            }
            else if (_this.props.item.subMenuProps) {
                _this.setState({ menuOpen: !_this.state.menuOpen });
            }
        };
        _this._onRef = function (ref) {
            _this._ref = ref;
        };
        _this._onDismiss = function () {
            _this.setState({ menuOpen: false });
        };
        _this.state = { menuOpen: false };
        return _this;
    }
    NavigationViewMenuItem.prototype.render = function () {
        var item = this.props.item;
        return (React.createElement("div", { role: "menuitem", className: this.props.classNames.menuItemContainer, ref: this._onRef },
            React.createElement("button", { key: item.key, type: "button", disabled: item.disabled, className: css_1.css(this.props.classNames.menuItem, { active: item.checked }), title: this.props.open ? undefined : item.name, onClick: this._onClick },
                React.createElement("div", { className: this.props.classNames.menuItemIconContainer }, item.iconProps ? React.createElement(Icon_1.Icon, __assign({}, item.iconProps)) : !this.props.open ? React.createElement("div", { className: this.props.classNames.menuItemIconAlt }, item.name) : undefined),
                this.props.open && (React.createElement("div", { className: this.props.classNames.menuItemTitleContainer }, item.name))),
            this.state.menuOpen && (React.createElement(ContextualMenu_1.ContextualMenu, __assign({}, this.props.item.subMenuProps, { isBeakVisible: true, directionalHint: 12 /* rightCenter */, target: this._ref, onDismiss: this._onDismiss })))));
    };
    return NavigationViewMenuItem;
}(React.Component));
var NavigationViewMenuControl = /** @class */ (function (_super) {
    __extends(NavigationViewMenuControl, _super);
    function NavigationViewMenuControl() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    NavigationViewMenuControl.prototype.render = function () {
        return (React.createElement("button", { type: "button", className: this.props.classNames.menuItem, onClick: this.props.onClick, title: this.props.open ? "Close Menu" : "Open Menu" },
            React.createElement("div", { className: this.props.classNames.menuItemIconContainer },
                React.createElement(Icon_1.Icon, { iconName: "GlobalNavButton" })),
            this.props.open && (React.createElement("div", { className: this.props.classNames.menuItemTitleContainer }, this.props.title))));
    };
    return NavigationViewMenuControl;
}(React.Component));
var NavigationView = /** @class */ (function (_super) {
    __extends(NavigationView, _super);
    function NavigationView(props) {
        var _this = _super.call(this, props) || this;
        _this._onMainMouseDown = function () {
            if (_this.menuOpen) {
                _this.menuOpen = false;
            }
        };
        _this._onClickControl = function () {
            _this.menuOpen = !_this.menuOpen;
        };
        _this._onMenuItemClicked = function (e, item) {
        };
        _this._renderMenuItem = function (item, idx) {
            return React.createElement(NavigationViewMenuItem, { item: item, key: item.key, open: _this.state.menuOpen, classNames: _this._classNames, onClickItem: _this._onMenuItemClicked });
        };
        _this._notifyMenuOpenChange = function () {
            if (_this.props.onMenuOpenChange && !_this.state.menuTransition && !_this.state.mainTransition) {
                _this.props.onMenuOpenChange(_this.state.menuOpen);
            }
        };
        _this._onMenuTransitionEnd = function () {
            _this.setState({ menuTransition: false }, _this._notifyMenuOpenChange);
        };
        _this._onMainTransitionEnd = function () {
            _this.setState({ mainTransition: false }, _this._notifyMenuOpenChange);
        };
        _this.state = { menuOpen: _this.props.menuOpen !== undefined ? _this.props.menuOpen : false, menuTransition: false, mainTransition: false };
        return _this;
    }
    NavigationView.prototype.componentWillReceiveProps = function (nextProps) {
        if (nextProps.menuOpen !== undefined && nextProps.menuOpen !== this.state.menuOpen) {
            this.menuOpen = nextProps.menuOpen;
        }
    };
    Object.defineProperty(NavigationView.prototype, "menuOpen", {
        get: function () {
            return this.state.menuOpen;
        },
        set: function (value) {
            this.setState({ menuOpen: value, menuTransition: true, mainTransition: this.props.menuInline ? true : false });
        },
        enumerable: true,
        configurable: true
    });
    NavigationView.prototype._renderMenuControl = function () {
        return React.createElement(NavigationViewMenuControl, { open: this.state.menuOpen, title: this.props.title, classNames: this._classNames, onClick: this._onClickControl });
    };
    NavigationView.prototype._renderMenuContentNear = function () {
        var items = this.props.items;
        if (items && items.length > 0) {
            var itemViews = items.map(this._renderMenuItem);
            return (React.createElement("div", { className: this._classNames.menuContentNear }, itemViews));
        }
        return null;
    };
    NavigationView.prototype._renderMenuContentFar = function () {
        var items = this.props.farItems;
        if (items && items.length > 0) {
            var itemViews = items.map(this._renderMenuItem);
            return (React.createElement("div", { className: this._classNames.menuContentFar }, itemViews));
        }
        return null;
    };
    Object.defineProperty(NavigationView.prototype, "hasMenu", {
        get: function () {
            return (this.props.items && this.props.items.length > 0) || (this.props.farItems && this.props.farItems.length > 0);
        },
        enumerable: true,
        configurable: true
    });
    NavigationView.prototype._renderMenu = function () {
        if (this.hasMenu) {
            return (React.createElement("nav", { role: "menubar", className: css_1.css(this._classNames.menu, { open: this.state.menuOpen, inline: this.props.menuInline, rootView: this.props.root }), onTransitionEnd: this._onMenuTransitionEnd, "aria-expanded": this.state.menuOpen && !this.state.menuTransition },
                React.createElement("div", { className: this._classNames.menuGlass }),
                React.createElement("div", { className: css_1.css(this._classNames.menuContent) },
                    this._renderMenuControl(),
                    this._renderMenuContentNear(),
                    this._renderMenuContentFar())));
        }
        return null;
    };
    NavigationView.prototype._renderMain = function () {
        return (React.createElement("div", { role: "main", className: css_1.css(this._classNames.main, { menuInlineOffset: this.state.menuOpen && this.props.menuInline, hasMenu: this.hasMenu, rootView: this.props.root }), onMouseDown: !this.props.menuInline ? this._onMainMouseDown : undefined, onTransitionEnd: this.props.menuInline ? this._onMainTransitionEnd : undefined }, this.props.children));
    };
    NavigationView.prototype.render = function () {
        this._classNames = NavigationView_classNames_1.getClassNames(NavigationView_styles_1.getStyles(null, this.props.styles), this.props.className);
        return (React.createElement("div", { className: css_1.css(this._classNames.root, { menuOpen: this.state.menuOpen, rootView: this.props.root }) },
            this._renderMenu(),
            this._renderMain()));
    };
    return NavigationView;
}(React.Component));
exports.NavigationView = NavigationView;


/***/ }),

/***/ "../core-ui-fabric/lib/component/NavigationView.styles.js":
/*!****************************************************************!*\
  !*** ../core-ui-fabric/lib/component/NavigationView.styles.js ***!
  \****************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

Object.defineProperty(exports, "__esModule", { value: true });
var styling_1 = __webpack_require__(/*! @uifabric/styling */ "../../node_modules/@uifabric/styling/lib/index.js");
var utilities_1 = __webpack_require__(/*! @uifabric/utilities */ "../../node_modules/@uifabric/utilities/lib/index.js");
var defaultStyles = function (theme) {
    return {
        root: {
            position: "absolute",
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        },
        menu: {
            zIndex: 2,
            width: 40,
            left: 0,
            top: 0,
            bottom: 0,
            position: "absolute",
            display: "flex",
            justifyContent: "flex-start",
            alignItems: "center",
            transition: "width 0.2s",
            backgroundColor: theme.palette.neutralDark,
            selectors: {
                "&.open": {
                    width: 200,
                    backgroundColor: theme.palette.neutralDark,
                    boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.4)"
                },
                "&.inline": {
                    boxShadow: "none"
                }
            }
        },
        menuGlass: {
            position: "absolute",
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
            zIndex: 1,
            background: "transparent"
        },
        menuContent: {
            position: "absolute",
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
            zIndex: 2,
            background: "transparent"
        },
        menuContentNear: {
            position: "absolute",
            top: 40,
            left: 0,
            right: 0
        },
        menuContentFar: {
            position: "absolute",
            left: 0,
            right: 0,
            bottom: 0,
            display: "flex",
            justifyContent: "flex-end",
            alignItems: "center"
        },
        menuItemContainer: {},
        menuItem: {
            outline: "none",
            border: "none",
            padding: 0,
            margin: 0,
            background: "transparent",
            display: "flex",
            justifyContent: "flex-start",
            alignItems: "center",
            minHeight: 40,
            width: "100%",
            overflow: "hidden",
            color: theme.palette.white,
            cursor: "pointer",
            selectors: {
                ":hover": {
                    backgroundColor: theme.palette.neutralPrimary
                },
                "&.active": {
                    backgroundColor: theme.palette.neutralPrimary
                }
            }
        },
        menuItemTitleContainer: {
            overflow: "hidden",
            whiteSpace: "nowrap"
        },
        menuItemIconContainer: {
            width: 40,
            minWidth: 40,
            height: 40,
            minHeight: 40,
            display: "flex",
            justifyContent: "center",
            alignItems: "center"
        },
        menuItemIconAlt: Object.assign({}, theme.fonts.tiny),
        main: {
            zIndex: 1,
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            overflow: "auto",
            transition: "left 0.2s",
            selectors: {
                "&.hasMenu": {
                    left: 40
                },
                "&.menuInlineOffset": {
                    left: 200
                }
            }
        }
    };
};
exports.defaultStyles = defaultStyles;
var Defaults = {
    styles: defaultStyles
};
exports.Defaults = Defaults;
var getStyles = utilities_1.memoizeFunction(function (theme, customStyles) {
    return styling_1.concatStyleSets(Defaults.styles(theme || styling_1.getTheme()), customStyles);
});
exports.getStyles = getStyles;


/***/ })

}]);
//# sourceMappingURL=6.js.map