define("7dd7cf1a-0201-4ecb-87d1-df26ee53ba5f_0.0.1", ["@microsoft/sp-core-library","react","react-dom","@microsoft/sp-webpart-base","@microsoft/sp-http","trendingInTheSitesIFollowStrings"], function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_378__, __WEBPACK_EXTERNAL_MODULE_382__) { return /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) /******/ return installedModules[moduleId].exports; /******/ /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ exports: {}, /******/ id: moduleId, /******/ loaded: false /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // Flag the module as loaded /******/ module.loaded = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ function(module, exports, __webpack_require__) { "use strict"; var __extends = (this && this.__extends) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; var sp_core_library_1 = __webpack_require__(1); var React = __webpack_require__(2); var ReactDom = __webpack_require__(3); var sp_webpart_base_1 = __webpack_require__(4); var strings = __webpack_require__(382); var TrendingInTheSitesIFollow_1 = __webpack_require__(383); var TrendingInTheSitesIFollowWebPart = (function (_super) { __extends(TrendingInTheSitesIFollowWebPart, _super); function TrendingInTheSitesIFollowWebPart(context) { return _super.call(this) || this; } TrendingInTheSitesIFollowWebPart.prototype.render = function () { var element = React.createElement(TrendingInTheSitesIFollow_1.default, { title: this.properties.title, numberOfDocuments: this.properties.numberOfDocuments, httpClient: this.context.spHttpClient, siteUrl: this.context.pageContext.web.absoluteUrl }); ReactDom.render(element, this.domElement); }; Object.defineProperty(TrendingInTheSitesIFollowWebPart.prototype, "dataVersion", { get: function () { return sp_core_library_1.Version.parse('1.0'); }, enumerable: true, configurable: true }); TrendingInTheSitesIFollowWebPart.prototype.getPropertyPaneConfiguration = function () { return { pages: [ { header: { description: strings.PropertyPaneDescription }, groups: [ { groupName: strings.ViewGroupName, groupFields: [ sp_webpart_base_1.PropertyPaneTextField('title', { label: strings.TitleFieldLabel }), sp_webpart_base_1.PropertyPaneSlider('numberOfDocuments', { label: strings.NumberOfDocumentsFieldLabel, min: 1, max: 10, step: 1 }) ] } ] } ] }; }; return TrendingInTheSitesIFollowWebPart; }(sp_webpart_base_1.BaseClientSideWebPart)); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = TrendingInTheSitesIFollowWebPart; /***/ }, /* 1 */ /***/ function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE_1__; /***/ }, /* 2 */ /***/ function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE_2__; /***/ }, /* 3 */ /***/ function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE_3__; /***/ }, /* 4 */ /***/ function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE_4__; /***/ }, /* 5 */, /* 6 */ /***/ function(module, exports, __webpack_require__) { /** * WARNING: This entry should NOT be imported for production purposes. This entry forces every control to be * parsed and available at load time, which is not necessary for most cases. */ "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(7)); __export(__webpack_require__(154)); __export(__webpack_require__(171)); __export(__webpack_require__(59)); __export(__webpack_require__(180)); __export(__webpack_require__(184)); __export(__webpack_require__(194)); __export(__webpack_require__(206)); __export(__webpack_require__(54)); __export(__webpack_require__(210)); __export(__webpack_require__(214)); __export(__webpack_require__(256)); __export(__webpack_require__(274)); __export(__webpack_require__(290)); __export(__webpack_require__(135)); __export(__webpack_require__(300)); __export(__webpack_require__(305)); __export(__webpack_require__(50)); __export(__webpack_require__(235)); __export(__webpack_require__(141)); __export(__webpack_require__(187)); __export(__webpack_require__(189)); __export(__webpack_require__(132)); __export(__webpack_require__(150)); __export(__webpack_require__(248)); __export(__webpack_require__(306)); __export(__webpack_require__(311)); __export(__webpack_require__(314)); __export(__webpack_require__(265)); __export(__webpack_require__(294)); __export(__webpack_require__(318)); __export(__webpack_require__(281)); __export(__webpack_require__(334)); __export(__webpack_require__(340)); __export(__webpack_require__(344)); __export(__webpack_require__(349)); __export(__webpack_require__(353)); __export(__webpack_require__(242)); __export(__webpack_require__(68)); __export(__webpack_require__(357)); __export(__webpack_require__(197)); __export(__webpack_require__(362)); __export(__webpack_require__(366)); __export(__webpack_require__(10)); /***/ }, /* 7 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(8)); /***/ }, /* 8 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(9)); /***/ }, /* 9 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var FocusZone_1 = __webpack_require__(50); var ContextualMenu_1 = __webpack_require__(54); var Link_1 = __webpack_require__(150); var Icon_1 = __webpack_require__(141); var Button_1 = __webpack_require__(154); var DirectionalHint_1 = __webpack_require__(58); var stylesImport = __webpack_require__(170); var styles = stylesImport; var OVERFLOW_KEY = 'overflow'; var OVERFLOW_WIDTH = 44; var Breadcrumb = (function (_super) { __extends(Breadcrumb, _super); function Breadcrumb(props) { var _this = _super.call(this, props) || this; _this._id = Utilities_1.getId('Breadcrumb'); _this.state = _this._getStateFromProps(props); return _this; } Breadcrumb.prototype.componentDidMount = function () { this._updateItemMeasurements(); this._updateRenderedItems(); this._events.on(window, 'resize', this._updateRenderedItems); }; Breadcrumb.prototype.componentWillReceiveProps = function (nextProps) { this.setState(this._getStateFromProps(nextProps)); this._breadcrumbItemWidths = null; }; Breadcrumb.prototype.componentDidUpdate = function (prevProps, prevStates) { if (!this._breadcrumbItemWidths) { this._updateItemMeasurements(); this._updateRenderedItems(); } }; Breadcrumb.prototype.render = function () { var _this = this; var _a = this.props, className = _a.className, ariaLabel = _a.ariaLabel; var _b = this.state, isOverflowOpen = _b.isOverflowOpen, overflowAnchor = _b.overflowAnchor, renderedItems = _b.renderedItems, renderedOverflowItems = _b.renderedOverflowItems; var overflowMenuId = this._id + '-overflow'; var _c = this.props.onRenderItem, onRenderItem = _c === void 0 ? this._onRenderItem : _c; return (React.createElement("div", { className: Utilities_1.css('ms-Breadcrumb', className, styles.root), ref: 'renderingArea', role: 'navigation', "aria-label": ariaLabel }, React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal }, React.createElement("ol", { className: Utilities_1.css('ms-Breadcrumb-list', styles.list) }, renderedOverflowItems && renderedOverflowItems.length ? (React.createElement("li", { className: Utilities_1.css('ms-Breadcrumb-overflow', styles.overflow), key: OVERFLOW_KEY, ref: OVERFLOW_KEY }, React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Breadcrumb-overflowButton', styles.overflowButton), iconProps: { iconName: 'more' }, onClick: this._onOverflowClicked, role: 'button', "aria-haspopup": 'true', "aria-owns": isOverflowOpen ? overflowMenuId : null }), React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Breadcrumb-chevron', styles.chevron), iconName: Utilities_1.getRTL() ? 'ChevronLeft' : 'ChevronRight' }))) : (null), renderedItems.map(function (item, index) { return (React.createElement("li", { className: Utilities_1.css('ms-Breadcrumb-listItem', styles.listItem), key: item.key || String(index), ref: item.key || String(index) }, onRenderItem(item, _this._defaultRenderItem), React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Breadcrumb-chevron', styles.chevron), iconName: Utilities_1.getRTL() ? 'ChevronLeft' : 'ChevronRight' }))); }))), isOverflowOpen ? (React.createElement(ContextualMenu_1.ContextualMenu, { targetElement: overflowAnchor, isBeakVisible: true, items: renderedOverflowItems.map(function (item, index) { return ({ name: item.text, key: item.key, onClick: item.onClick ? _this._onBreadcrumbClicked.bind(_this, item) : null, href: item.href }); }), id: overflowMenuId, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._onOverflowDismissed })) : (null))); }; Breadcrumb.prototype._onRenderItem = function (item, defaultRender) { return this._defaultRenderItem(item); }; Breadcrumb.prototype._defaultRenderItem = function (item) { if (item.onClick || item.href) { return (React.createElement(Link_1.Link, { className: Utilities_1.css('ms-Breadcrumb-itemLink', styles.itemLink), href: item.href, "aria-current": item.isCurrentItem ? 'page' : null, onClick: this._onBreadcrumbClicked.bind(this, item) }, item.text)); } else { return (React.createElement("span", { className: Utilities_1.css('ms-Breadcrumb-item', styles.item) }, item.text)); } }; Breadcrumb.prototype._onOverflowClicked = function (ev) { this.setState({ 'isOverflowOpen': !this.state.isOverflowOpen, 'overflowAnchor': ev.currentTarget }); }; Breadcrumb.prototype._onOverflowDismissed = function (ev) { this.setState({ 'isOverflowOpen': false, 'overflowAnchor': null }); }; Breadcrumb.prototype._onBreadcrumbClicked = function (item, ev) { if (item.onClick) { item.onClick(ev, item); } this.setState({ 'isOverflowOpen': false }); }; Breadcrumb.prototype._updateItemMeasurements = function () { var items = this.props.items; if (!this._breadcrumbItemWidths) { this._breadcrumbItemWidths = {}; } for (var i = 0; i < items.length; i++) { var item = items[i]; if (!this._breadcrumbItemWidths[item.key]) { var el = this.refs[item.key]; this._breadcrumbItemWidths[item.key] = el.getBoundingClientRect().width; } } }; Breadcrumb.prototype._updateRenderedItems = function () { var _a = this.props, items = _a.items, maxDisplayedItems = _a.maxDisplayedItems; var renderingArea = this.refs.renderingArea; var renderedItems = []; var renderedOverflowItems = [].concat(items); var consumedWidth = 0; var style = window.getComputedStyle(renderingArea); var availableWidth = renderingArea.clientWidth - parseInt(style.marginLeft, 10) - parseInt(style.marginRight, 10); availableWidth -= OVERFLOW_WIDTH; var i; var minIndex = Math.max(0, renderedOverflowItems.length - maxDisplayedItems); for (i = renderedOverflowItems.length - 1; i >= minIndex; i--) { var item = renderedOverflowItems[i]; var itemWidth = this._breadcrumbItemWidths[item.key]; if ((consumedWidth + itemWidth) >= availableWidth) { break; } else { consumedWidth += itemWidth; } } renderedItems = renderedOverflowItems.splice(i + 1); this.setState({ isOverflowOpen: this.state.isOverflowOpen, overflowAnchor: this.state.overflowAnchor, renderedItems: renderedItems, renderedOverflowItems: renderedOverflowItems, }); }; Breadcrumb.prototype._getStateFromProps = function (nextProps) { return { isOverflowOpen: false, overflowAnchor: null, renderedItems: nextProps.items || [], renderedOverflowItems: null }; }; return Breadcrumb; }(Utilities_1.BaseComponent)); Breadcrumb.defaultProps = { items: [], maxDisplayedItems: 999 }; __decorate([ Utilities_1.autobind ], Breadcrumb.prototype, "_onRenderItem", null); __decorate([ Utilities_1.autobind ], Breadcrumb.prototype, "_defaultRenderItem", null); __decorate([ Utilities_1.autobind ], Breadcrumb.prototype, "_onOverflowClicked", null); __decorate([ Utilities_1.autobind ], Breadcrumb.prototype, "_onOverflowDismissed", null); __decorate([ Utilities_1.autobind ], Breadcrumb.prototype, "_onBreadcrumbClicked", null); exports.Breadcrumb = Breadcrumb; /***/ }, /* 10 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(11)); /***/ }, /* 11 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(12)); __export(__webpack_require__(13)); __export(__webpack_require__(19)); __export(__webpack_require__(21)); __export(__webpack_require__(32)); __export(__webpack_require__(14)); __export(__webpack_require__(33)); __export(__webpack_require__(34)); __export(__webpack_require__(35)); __export(__webpack_require__(36)); __export(__webpack_require__(37)); __export(__webpack_require__(38)); __export(__webpack_require__(16)); __export(__webpack_require__(39)); __export(__webpack_require__(40)); __export(__webpack_require__(41)); __export(__webpack_require__(42)); __export(__webpack_require__(43)); __export(__webpack_require__(31)); __export(__webpack_require__(44)); __export(__webpack_require__(45)); __export(__webpack_require__(46)); __export(__webpack_require__(47)); __export(__webpack_require__(15)); __export(__webpack_require__(48)); __export(__webpack_require__(20)); __export(__webpack_require__(49)); /***/ }, /* 12 */ /***/ function(module, exports) { /** * Bugs often appear in async code when stuff gets disposed, but async operations don't get canceled. * This Async helper class solves these issues by tying async code to the lifetime of a disposable object. * * Usage: Anything class extending from BaseModel can access this helper via this.async. Otherwise create a * new instance of the class and remember to call dispose() during your code's dispose handler. */ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Async = (function () { function Async(parent, onError) { this._timeoutIds = null; this._immediateIds = null; this._intervalIds = null; this._animationFrameIds = null; this._isDisposed = false; this._parent = parent || null; this._onErrorHandler = onError; this._noop = function () { }; } /** * Dispose function, clears all async operations. */ Async.prototype.dispose = function () { var id; this._isDisposed = true; this._parent = null; // Clear timeouts. if (this._timeoutIds) { for (id in this._timeoutIds) { if (this._timeoutIds.hasOwnProperty(id)) { this.clearTimeout(id); } } this._timeoutIds = null; } // Clear immediates. if (this._immediateIds) { for (id in this._immediateIds) { if (this._immediateIds.hasOwnProperty(id)) { this.clearImmediate(id); } } this._immediateIds = null; } // Clear intervals. if (this._intervalIds) { for (id in this._intervalIds) { if (this._intervalIds.hasOwnProperty(id)) { this.clearInterval(id); } } this._intervalIds = null; } // Clear animation frames. if (this._animationFrameIds) { for (id in this._animationFrameIds) { if (this._animationFrameIds.hasOwnProperty(id)) { this.cancelAnimationFrame(id); } } this._animationFrameIds = null; } }; /** * SetTimeout override, which will auto cancel the timeout during dispose. * @param callback - Callback to execute. * @param duration - Duration in milliseconds. * @returns The setTimeout id. */ Async.prototype.setTimeout = function (callback, duration) { var _this = this; var timeoutId = 0; if (!this._isDisposed) { if (!this._timeoutIds) { this._timeoutIds = {}; } /* tslint:disable:ban-native-functions */ timeoutId = setTimeout(function () { // Time to execute the timeout, enqueue it as a foreground task to be executed. try { // Now delete the record and call the callback. delete _this._timeoutIds[timeoutId]; callback.apply(_this._parent); } catch (e) { if (_this._onErrorHandler) { _this._onErrorHandler(e); } } }, duration); /* tslint:enable:ban-native-functions */ this._timeoutIds[timeoutId] = true; } return timeoutId; }; /** * Clears the timeout. * @param id - Id to cancel. */ Async.prototype.clearTimeout = function (id) { if (this._timeoutIds && this._timeoutIds[id]) { /* tslint:disable:ban-native-functions */ clearTimeout(id); delete this._timeoutIds[id]; /* tslint:enable:ban-native-functions */ } }; /** * SetImmediate override, which will auto cancel the immediate during dispose. * @param callback - Callback to execute. * @returns The setTimeout id. */ Async.prototype.setImmediate = function (callback) { var _this = this; var immediateId = 0; if (!this._isDisposed) { if (!this._immediateIds) { this._immediateIds = {}; } /* tslint:disable:ban-native-functions */ var setImmediateCallback = function () { // Time to execute the timeout, enqueue it as a foreground task to be executed. try { // Now delete the record and call the callback. delete _this._immediateIds[immediateId]; callback.apply(_this._parent); } catch (e) { _this._logError(e); } }; immediateId = window.setImmediate ? window.setImmediate(setImmediateCallback) : window.setTimeout(setImmediateCallback, 0); /* tslint:enable:ban-native-functions */ this._immediateIds[immediateId] = true; } return immediateId; }; /** * Clears the immediate. * @param id - Id to cancel. */ Async.prototype.clearImmediate = function (id) { if (this._immediateIds && this._immediateIds[id]) { /* tslint:disable:ban-native-functions */ window.clearImmediate ? window.clearImmediate(id) : window.clearTimeout(id); delete this._immediateIds[id]; /* tslint:enable:ban-native-functions */ } }; /** * SetInterval override, which will auto cancel the timeout during dispose. * @param callback - Callback to execute. * @param duration - Duration in milliseconds. * @returns The setTimeout id. */ Async.prototype.setInterval = function (callback, duration) { var _this = this; var intervalId = 0; if (!this._isDisposed) { if (!this._intervalIds) { this._intervalIds = {}; } /* tslint:disable:ban-native-functions */ intervalId = setInterval(function () { // Time to execute the interval callback, enqueue it as a foreground task to be executed. try { callback.apply(_this._parent); } catch (e) { _this._logError(e); } }, duration); /* tslint:enable:ban-native-functions */ this._intervalIds[intervalId] = true; } return intervalId; }; /** * Clears the interval. * @param id - Id to cancel. */ Async.prototype.clearInterval = function (id) { if (this._intervalIds && this._intervalIds[id]) { /* tslint:disable:ban-native-functions */ clearInterval(id); delete this._intervalIds[id]; /* tslint:enable:ban-native-functions */ } }; /** * Creates a function that, when executed, will only call the func function at most once per * every wait milliseconds. Provide an options object to indicate that func should be invoked * on the leading and/or trailing edge of the wait timeout. Subsequent calls to the throttled * function will return the result of the last func call. * * Note: If leading and trailing options are true func will be called on the trailing edge of * the timeout only if the the throttled function is invoked more than once during the wait timeout. * * @param func - The function to throttle. * @param wait - The number of milliseconds to throttle executions to. Defaults to 0. * @param options - The options object. * @returns The new throttled function. */ Async.prototype.throttle = function (func, wait, options) { var _this = this; if (this._isDisposed) { return this._noop; } var waitMS = wait || 0; var leading = true; var trailing = true; var lastExecuteTime = 0; var lastResult; var lastArgs; var timeoutId = null; if (options && typeof (options.leading) === 'boolean') { leading = options.leading; } if (options && typeof (options.trailing) === 'boolean') { trailing = options.trailing; } var callback = function (userCall) { var now = (new Date).getTime(); var delta = now - lastExecuteTime; var waitLength = leading ? waitMS - delta : waitMS; if (delta >= waitMS && (!userCall || leading)) { lastExecuteTime = now; if (timeoutId) { _this.clearTimeout(timeoutId); timeoutId = null; } lastResult = func.apply(_this._parent, lastArgs); } else if (timeoutId === null && trailing) { timeoutId = _this.setTimeout(callback, waitLength); } return lastResult; }; var resultFunction = function () { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } lastArgs = args; return callback(true); }; return resultFunction; }; /** * Creates a function that will delay the execution of func until after wait milliseconds have * elapsed since the last time it was invoked. Provide an options object to indicate that func * should be invoked on the leading and/or trailing edge of the wait timeout. Subsequent calls * to the debounced function will return the result of the last func call. * * Note: If leading and trailing options are true func will be called on the trailing edge of * the timeout only if the the debounced function is invoked more than once during the wait * timeout. * * @param func - The function to debounce. * @param wait - The number of milliseconds to delay. * @param options - The options object. * @returns The new debounced function. */ Async.prototype.debounce = function (func, wait, options) { var _this = this; if (this._isDisposed) { return this._noop; } var waitMS = wait || 0; var leading = false; var trailing = true; var maxWait = null; var lastCallTime = 0; var lastExecuteTime = (new Date).getTime(); var lastResult; var lastArgs; var timeoutId = null; if (options && typeof (options.leading) === 'boolean') { leading = options.leading; } if (options && typeof (options.trailing) === 'boolean') { trailing = options.trailing; } if (options && typeof (options.maxWait) === 'number' && !isNaN(options.maxWait)) { maxWait = options.maxWait; } var callback = function (userCall) { var now = (new Date).getTime(); var executeImmediately = false; if (userCall) { if (leading && now - lastCallTime >= waitMS) { executeImmediately = true; } lastCallTime = now; } var delta = now - lastCallTime; var waitLength = waitMS - delta; var maxWaitDelta = now - lastExecuteTime; var maxWaitExpired = false; if (maxWait !== null) { // maxWait only matters when there is a pending callback if (maxWaitDelta >= maxWait && timeoutId) { maxWaitExpired = true; } else { waitLength = Math.min(waitLength, maxWait - maxWaitDelta); } } if (delta >= waitMS || maxWaitExpired || executeImmediately) { if (timeoutId) { _this.clearTimeout(timeoutId); timeoutId = null; } lastExecuteTime = now; lastResult = func.apply(_this._parent, lastArgs); } else if ((timeoutId === null || !userCall) && trailing) { timeoutId = _this.setTimeout(callback, waitLength); } return lastResult; }; var resultFunction = function () { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } lastArgs = args; return callback(true); }; return resultFunction; }; Async.prototype.requestAnimationFrame = function (callback) { var _this = this; var animationFrameId = 0; if (!this._isDisposed) { if (!this._animationFrameIds) { this._animationFrameIds = {}; } /* tslint:disable:ban-native-functions */ var animationFrameCallback = function () { try { // Now delete the record and call the callback. delete _this._animationFrameIds[animationFrameId]; callback.apply(_this._parent); } catch (e) { _this._logError(e); } }; animationFrameId = window.requestAnimationFrame ? window.requestAnimationFrame(animationFrameCallback) : window.setTimeout(animationFrameCallback, 0); /* tslint:enable:ban-native-functions */ this._animationFrameIds[animationFrameId] = true; } return animationFrameId; }; Async.prototype.cancelAnimationFrame = function (id) { if (this._animationFrameIds && this._animationFrameIds[id]) { /* tslint:disable:ban-native-functions */ window.cancelAnimationFrame ? window.cancelAnimationFrame(id) : window.clearTimeout(id); /* tslint:enable:ban-native-functions */ delete this._animationFrameIds[id]; } }; Async.prototype._logError = function (e) { if (this._onErrorHandler) { this._onErrorHandler(e); } }; return Async; }()); exports.Async = Async; /***/ }, /* 13 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var EventGroup_1 = __webpack_require__(14); var scroll_1 = __webpack_require__(15); var dom_1 = __webpack_require__(16); var SCROLL_ITERATION_DELAY = 16; var SCROLL_GUTTER_HEIGHT = 100; var MAX_SCROLL_VELOCITY = 15; /** * AutoScroll simply hooks up mouse events given a parent element, and scrolls the container * up/down depending on how close the mouse is to the top/bottom of the container. * * Once you don't want autoscroll any more, just dispose the helper and it will unhook events. */ var AutoScroll = (function () { function AutoScroll(element) { this._events = new EventGroup_1.EventGroup(this); this._scrollableParent = scroll_1.findScrollableParent(element); this._incrementScroll = this._incrementScroll.bind(this); this._scrollRect = dom_1.getRect(this._scrollableParent); if (this._scrollableParent === window) { this._scrollableParent = document.body; } if (this._scrollableParent) { this._events.on(window, 'mousemove', this._onMouseMove, true); this._events.on(window, 'touchmove', this._onTouchMove, true); } } AutoScroll.prototype.dispose = function () { this._events.dispose(); this._stopScroll(); }; AutoScroll.prototype._onMouseMove = function (ev) { this._computeScrollVelocity(ev.clientY); }; AutoScroll.prototype._onTouchMove = function (ev) { if (ev.touches.length > 0) { this._computeScrollVelocity(ev.touches[0].clientY); } }; AutoScroll.prototype._computeScrollVelocity = function (clientY) { var scrollRectTop = this._scrollRect.top; var scrollClientBottom = scrollRectTop + this._scrollRect.height - SCROLL_GUTTER_HEIGHT; if (clientY < (scrollRectTop + SCROLL_GUTTER_HEIGHT)) { this._scrollVelocity = Math.max(-MAX_SCROLL_VELOCITY, -MAX_SCROLL_VELOCITY * ((SCROLL_GUTTER_HEIGHT - (clientY - scrollRectTop)) / SCROLL_GUTTER_HEIGHT)); } else if (clientY > scrollClientBottom) { this._scrollVelocity = Math.min(MAX_SCROLL_VELOCITY, MAX_SCROLL_VELOCITY * ((clientY - scrollClientBottom) / SCROLL_GUTTER_HEIGHT)); } else { this._scrollVelocity = 0; } if (this._scrollVelocity) { this._startScroll(); } else { this._stopScroll(); } }; AutoScroll.prototype._startScroll = function () { if (!this._timeoutId) { this._incrementScroll(); } }; AutoScroll.prototype._incrementScroll = function () { this._scrollableParent.scrollTop += Math.round(this._scrollVelocity); this._timeoutId = setTimeout(this._incrementScroll, SCROLL_ITERATION_DELAY); }; AutoScroll.prototype._stopScroll = function () { if (this._timeoutId) { clearTimeout(this._timeoutId); delete this._timeoutId; } }; return AutoScroll; }()); exports.AutoScroll = AutoScroll; /***/ }, /* 14 */ /***/ function(module, exports) { /* tslint:disable:no-string-literal */ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** An instance of EventGroup allows anything with a handle to it to trigger events on it. * If the target is an HTMLElement, the event will be attached to the element and can be * triggered as usual (like clicking for onclick). * The event can be triggered by calling EventGroup.raise() here. If the target is an * HTMLElement, the event gets raised and is handled by the browser. Otherwise, it gets * handled here in EventGroup, and the handler is called in the context of the parent * (which is passed in in the constructor). */ var EventGroup = (function () { /** parent: the context in which events attached to non-HTMLElements are called */ function EventGroup(parent) { this._id = EventGroup._uniqueId++; this._parent = parent; this._eventRecords = []; } /** For IE8, bubbleEvent is ignored here and must be dealt with by the handler. * Events raised here by default have bubbling set to false and cancelable set to true. * This applies also to built-in events being raised manually here on HTMLElements, * which may lead to unexpected behavior if it differs from the defaults. */ EventGroup.raise = function (target, eventName, eventArgs, bubbleEvent) { var retVal; if (EventGroup._isElement(target)) { if (document.createEvent) { var ev = document.createEvent('HTMLEvents'); ev.initEvent(eventName, bubbleEvent, true); ev['args'] = eventArgs; retVal = target.dispatchEvent(ev); } else if (document['createEventObject']) { var evObj = document['createEventObject'](eventArgs); // cannot set cancelBubble on evObj, fireEvent will overwrite it target.fireEvent('on' + eventName, evObj); } } else { while (target && retVal !== false) { var events = target.__events__; var eventRecords = events ? events[eventName] : null; for (var id in eventRecords) { if (eventRecords.hasOwnProperty(id)) { var eventRecordList = eventRecords[id]; for (var listIndex = 0; retVal !== false && listIndex < eventRecordList.length; listIndex++) { var record = eventRecordList[listIndex]; if (record.objectCallback) { retVal = record.objectCallback.call(record.parent, eventArgs); } } } } // If the target has a parent, bubble the event up. target = bubbleEvent ? target.parent : null; } } return retVal; }; EventGroup.isObserved = function (target, eventName) { var events = target && target.__events__; return !!events && !!events[eventName]; }; /** Check to see if the target has declared support of the given event. */ EventGroup.isDeclared = function (target, eventName) { var declaredEvents = target && target.__declaredEvents; return !!declaredEvents && !!declaredEvents[eventName]; }; EventGroup.stopPropagation = function (event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } }; EventGroup._isElement = function (target) { return !!target && (target.addEventListener || target instanceof HTMLElement); }; EventGroup.prototype.dispose = function () { if (!this._isDisposed) { this._isDisposed = true; this.off(); this._parent = null; } }; /** On the target, attach a set of events, where the events object is a name to function mapping. */ EventGroup.prototype.onAll = function (target, events, useCapture) { for (var eventName in events) { if (events.hasOwnProperty(eventName)) { this.on(target, eventName, events[eventName], useCapture); } } }; /** On the target, attach an event whose handler will be called in the context of the parent * of this instance of EventGroup. */ EventGroup.prototype.on = function (target, eventName, callback, useCapture) { var _this = this; if (eventName.indexOf(',') > -1) { var events = eventName.split(/[ ,]+/); for (var i = 0; i < events.length; i++) { this.on(target, events[i], callback, useCapture); } } else { var parent_1 = this._parent; var eventRecord = { target: target, eventName: eventName, parent: parent_1, callback: callback, objectCallback: null, elementCallback: null, useCapture: useCapture }; // Initialize and wire up the record on the target, so that it can call the callback if the event fires. var events = (target.__events__ = target.__events__ || {}); events[eventName] = events[eventName] || { count: 0 }; events[eventName][this._id] = events[eventName][this._id] || []; events[eventName][this._id].push(eventRecord); events[eventName].count++; if (EventGroup._isElement(target)) { var processElementEvent = function () { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } if (_this._isDisposed) { return; } var result; try { result = callback.apply(parent_1, args); if (result === false && args[0]) { var e = args[0]; if (e.preventDefault) { e.preventDefault(); } if (e.stopPropagation) { e.stopPropagation(); } e.cancelBubble = true; } } catch (e) { /* ErrorHelper.log(e); */ } return result; }; eventRecord.elementCallback = processElementEvent; if (target.addEventListener) { /* tslint:disable:ban-native-functions */ target.addEventListener(eventName, processElementEvent, useCapture); /* tslint:enable:ban-native-functions */ } else if (target.attachEvent) { target.attachEvent('on' + eventName, processElementEvent); } } else { var processObjectEvent = function () { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } if (_this._isDisposed) { return; } return callback.apply(parent_1, args); }; eventRecord.objectCallback = processObjectEvent; } // Remember the record locally, so that it can be removed. this._eventRecords.push(eventRecord); } }; EventGroup.prototype.off = function (target, eventName, callback, useCapture) { for (var i = 0; i < this._eventRecords.length; i++) { var eventRecord = this._eventRecords[i]; if ((!target || target === eventRecord.target) && (!eventName || eventName === eventRecord.eventName) && (!callback || callback === eventRecord.callback) && ((typeof useCapture !== 'boolean') || useCapture === eventRecord.useCapture)) { var events = eventRecord.target.__events__; var targetArrayLookup = events[eventRecord.eventName]; var targetArray = targetArrayLookup ? targetArrayLookup[this._id] : null; // We may have already target's entries, so check for null. if (targetArray) { if (targetArray.length === 1 || !callback) { targetArrayLookup.count -= targetArray.length; delete events[eventRecord.eventName][this._id]; } else { targetArrayLookup.count--; targetArray.splice(targetArray.indexOf(eventRecord), 1); } if (!targetArrayLookup.count) { delete events[eventRecord.eventName]; } } if (eventRecord.elementCallback) { if (eventRecord.target.removeEventListener) { eventRecord.target.removeEventListener(eventRecord.eventName, eventRecord.elementCallback, eventRecord.useCapture); } else if (eventRecord.target.detachEvent) { eventRecord.target.detachEvent('on' + eventRecord.eventName, eventRecord.elementCallback); } } this._eventRecords.splice(i--, 1); } } }; /** Trigger the given event in the context of this instance of EventGroup. */ EventGroup.prototype.raise = function (eventName, eventArgs, bubbleEvent) { return EventGroup.raise(this._parent, eventName, eventArgs, bubbleEvent); }; /** Declare an event as being supported by this instance of EventGroup. */ EventGroup.prototype.declare = function (event) { var declaredEvents = this._parent.__declaredEvents = this._parent.__declaredEvents || {}; if (typeof event === 'string') { declaredEvents[event] = true; } else { for (var i = 0; i < event.length; i++) { declaredEvents[event[i]] = true; } } }; return EventGroup; }()); EventGroup._uniqueId = 0; exports.EventGroup = EventGroup; /***/ }, /* 15 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var dom_1 = __webpack_require__(16); var scroll_scss_1 = __webpack_require__(17); var _scrollbarWidth; var _bodyScrollDisabledCount = 0; exports.DATA_IS_SCROLLABLE_ATTRIBUTE = 'data-is-scrollable'; function disableBodyScroll() { var doc = dom_1.getDocument(); if (doc && doc.body && !_bodyScrollDisabledCount) { doc.body.classList.add(scroll_scss_1.default.msFabricScrollDisabled); } _bodyScrollDisabledCount++; } exports.disableBodyScroll = disableBodyScroll; function enableBodyScroll() { if (_bodyScrollDisabledCount > 0) { var doc = dom_1.getDocument(); if (doc && doc.body && _bodyScrollDisabledCount === 1) { doc.body.classList.remove(scroll_scss_1.default.msFabricScrollDisabled); } _bodyScrollDisabledCount--; } } exports.enableBodyScroll = enableBodyScroll; /** Calculates the width of a scrollbar for the browser/os. */ function getScrollbarWidth() { if (_scrollbarWidth === undefined) { var scrollDiv = document.createElement('div'); scrollDiv.style.setProperty('width', '100px'); scrollDiv.style.setProperty('height', '100px'); scrollDiv.style.setProperty('overflow', 'scroll'); scrollDiv.style.setProperty('position', 'absolute'); scrollDiv.style.setProperty('top', '-9999px'); document.body.appendChild(scrollDiv); // Get the scrollbar width _scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; // Delete the DIV document.body.removeChild(scrollDiv); } return _scrollbarWidth; } exports.getScrollbarWidth = getScrollbarWidth; /** * Traverses up the DOM for the element with the data-is-scrollable=true attribute, or returns * document.body. */ function findScrollableParent(startingElement) { var el = startingElement; // First do a quick scan for the scrollable attribute. while (el && el !== document.body) { if (el.getAttribute(exports.DATA_IS_SCROLLABLE_ATTRIBUTE) === 'true') { return el; } el = el.parentElement; } // If we haven't found it, the use the slower method: compute styles to evaluate if overflow is set. el = startingElement; while (el && el !== document.body) { if (el.getAttribute(exports.DATA_IS_SCROLLABLE_ATTRIBUTE) !== 'false') { var styles_1 = getComputedStyle(el); var overflowY = styles_1 ? styles_1.getPropertyValue('overflow-y') : ''; if (overflowY && (overflowY === 'scroll' || overflowY === 'auto')) { return el; } } el = el.parentElement; } // Fall back to window scroll. if (!el || el === document.body) { el = window; } return el; } exports.findScrollableParent = findScrollableParent; /***/ }, /* 16 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * Sets the virtual parent of an element. * Pass `undefined` as the `parent` to clear the virtual parent. */ function setVirtualParent(child, parent) { var virtualChild = child; var virtualParent = parent; if (!virtualChild._virtual) { virtualChild._virtual = { children: [] }; } var oldParent = virtualChild._virtual.parent; if (oldParent && oldParent !== parent) { // Remove the child from its old parent. var index = oldParent._virtual.children.indexOf(virtualChild); if (index > -1) { oldParent._virtual.children.splice(index, 1); } } virtualChild._virtual.parent = virtualParent || undefined; if (virtualParent) { if (!virtualParent._virtual) { virtualParent._virtual = { children: [] }; } virtualParent._virtual.children.push(virtualChild); } } exports.setVirtualParent = setVirtualParent; function getVirtualParent(child) { var parent; if (child && isVirtualElement(child)) { parent = child._virtual.parent; } return parent; } exports.getVirtualParent = getVirtualParent; /** * Gets the element which is the parent of a given element. * If `allowVirtuaParents` is `true`, this method prefers the virtual parent over * real DOM parent when present. */ function getParent(child, allowVirtualParents) { if (allowVirtualParents === void 0) { allowVirtualParents = true; } return child && (allowVirtualParents && getVirtualParent(child) || child.parentNode && child.parentNode); } exports.getParent = getParent; /** * Determines whether or not a parent element contains a given child element. * If `allowVirtualParents` is true, this method may return `true` if the child * has the parent in its virtual element hierarchy. */ function elementContains(parent, child, allowVirtualParents) { if (allowVirtualParents === void 0) { allowVirtualParents = true; } var isContained = false; if (parent && child) { if (allowVirtualParents) { isContained = false; while (child) { var nextParent = getParent(child); if (nextParent === parent) { isContained = true; break; } child = nextParent; } } else if (parent.contains) { isContained = parent.contains(child); } } return isContained; } exports.elementContains = elementContains; var _isSSR = false; /** * Helper to set ssr mode to simulate no window object returned from getWindow helper. */ function setSSR(isEnabled) { _isSSR = isEnabled; } exports.setSSR = setSSR; /** Helper to get the window object. */ function getWindow(rootElement) { if (_isSSR) { return undefined; } else { return (rootElement && rootElement.ownerDocument && rootElement.ownerDocument.defaultView ? rootElement.ownerDocument.defaultView : window); } } exports.getWindow = getWindow; /** * Helper to get the document object. */ function getDocument(rootElement) { if (_isSSR) { return undefined; } else { return rootElement && rootElement.ownerDocument ? rootElement.ownerDocument : document; } } exports.getDocument = getDocument; /** * Helper to get bounding client rect, works with window. */ function getRect(element) { var rect; if (element) { if (element === window) { rect = { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight, right: window.innerWidth, bottom: window.innerHeight }; } else if (element.getBoundingClientRect) { rect = element.getBoundingClientRect(); } } return rect; } exports.getRect = getRect; /** * Determines whether or not an element has the virtual hierarchy extension. */ function isVirtualElement(element) { return element && !!element._virtual; } /***/ }, /* 17 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { msFabricScrollDisabled: 'msFabricScrollDisabled_23e3aef2', }; exports.default = styles; load_themed_styles_1.loadStyles([{ "rawString": ".msFabricScrollDisabled_23e3aef2{overflow:hidden!important}" }]); /* tslint:enable */ /***/ }, /* 18 */ /***/ function(module, exports) { /* WEBPACK VAR INJECTION */(function(global) {/** * An IThemingInstruction can specify a rawString to be preserved or a theme slot and a default value * to use if that slot is not specified by the theme. */ "use strict"; // IE needs to inject styles using cssText. However, we need to evaluate this lazily, so this // value will initialize as undefined, and later will be set once on first loadStyles injection. var _injectStylesWithCssText; // Store the theming state in __themeState__ global scope for reuse in the case of duplicate // load-themed-styles hosted on the page. var _root = (typeof window === 'undefined') ? global : window; // tslint:disable-line:no-any var _themeState = _root.__themeState__ = _root.__themeState__ || { theme: undefined, lastStyleElement: undefined, registeredStyles: [] }; /** * Matches theming tokens. For example, "[theme: themeSlotName, default: #FFF]" (including the quotes). */ /* tslint:disable: max-line-length */ var _themeTokenRegex = /[\'\"]\[theme:\s*(\w+)\s*(?:\,\s*default:\s*([\\"\']?[\.\,\(\)\#\-\s\w]*[\.\,\(\)\#\-\w][\"\']?))?\s*\][\'\"]/g; /* tslint:enable: max-line-length */ /** Maximum style text length, for supporting IE style restrictions. */ var MAX_STYLE_CONTENT_SIZE = 10000; /** * Loads a set of style text. If it is registered too early, we will register it when the window.load * event is fired. * @param {string | ThemableArray} styles Themable style text to register. */ function loadStyles(styles) { var styleParts = Array.isArray(styles) ? styles : splitStyles(styles); if (_injectStylesWithCssText === undefined) { _injectStylesWithCssText = shouldUseCssText(); } applyThemableStyles(styleParts); } exports.loadStyles = loadStyles; /** * Allows for customizable loadStyles logic. e.g. for server side rendering application * @param {(styles: string) => void} a loadStyles callback that gets called when styles are loaded or reloaded */ function configureLoadStyles(callback) { _themeState.loadStyles = callback; } exports.configureLoadStyles = configureLoadStyles; /** * Loads a set of style text. If it is registered too early, we will register it when the window.load event * is fired. * @param {string} styleText Style to register. * @param {IStyleRecord} styleRecord Existing style record to re-apply. */ function applyThemableStyles(stylesArray, styleRecord) { if (_themeState.loadStyles) { var styles = resolveThemableArray(stylesArray); _themeState.loadStyles(styles); } else { _injectStylesWithCssText ? registerStylesIE(stylesArray, styleRecord) : registerStyles(stylesArray, styleRecord); } } /** * Registers a set theme tokens to find and replace. If styles were already registered, they will be * replaced. * @param {theme} theme JSON object of theme tokens to values. */ function loadTheme(theme) { _themeState.theme = theme; // reload styles. reloadStyles(); } exports.loadTheme = loadTheme; /** * Reloads styles. */ function reloadStyles() { if (_themeState.theme) { for (var _i = 0, _a = _themeState.registeredStyles; _i < _a.length; _i++) { var styleRecord = _a[_i]; applyThemableStyles(styleRecord.themableStyle, styleRecord); } } } /** * Find theme tokens and replaces them with provided theme values. * @param {string} styles Tokenized styles to fix. */ function detokenize(styles) { if (styles) { styles = resolveThemableArray(splitStyles(styles)); } return styles; } exports.detokenize = detokenize; /** * Resolves ThemingInstruction objects in an array and joins the result into a string. * @param {ThemableArray} splitStyleArray ThemableArray to resolve and join. */ function resolveThemableArray(splitStyleArray) { var theme = _themeState.theme; var resolvedCss; if (splitStyleArray) { // Resolve the array of theming instructions to an array of strings. // Then join the array to produce the final CSS string. var resolvedArray = splitStyleArray.map(function (currentValue) { var themeSlot = currentValue.theme; if (themeSlot) { // A theming annotation. Resolve it. var themedValue = theme ? theme[themeSlot] : undefined; var defaultValue = currentValue.defaultValue; // Warn to console if we hit an unthemed value even when themes are provided. // Allow the themedValue to be undefined to explicitly request the default value. if (theme && !themedValue && console && !(themeSlot in theme)) { /* tslint:disable: max-line-length */ console.warn("Theming value not provided for \"" + themeSlot + "\". Falling back to \"" + (defaultValue || 'inherit') + "\"."); } return themedValue || defaultValue || 'inherit'; } else { // A non-themable string. Preserve it. return currentValue.rawString; } }); resolvedCss = resolvedArray.join(''); } return resolvedCss; } /** * Split tokenized CSS into an array of strings and theme specification objects * @param {string} styles Tokenized styles to split. */ function splitStyles(styles) { var result = []; if (styles) { var pos = 0; // Current position in styles. var tokenMatch = void 0; while (tokenMatch = _themeTokenRegex.exec(styles)) { var matchIndex = tokenMatch.index; if (matchIndex > pos) { result.push({ rawString: styles.substring(pos, matchIndex) }); } result.push({ theme: tokenMatch[1], defaultValue: tokenMatch[2] // May be undefined }); // index of the first character after the current match pos = _themeTokenRegex.lastIndex; } // Push the rest of the string after the last match. result.push({ rawString: styles.substring(pos) }); } return result; } exports.splitStyles = splitStyles; /** * Registers a set of style text. If it is registered too early, we will register it when the * window.load event is fired. * @param {ThemableArray} styleArray Array of IThemingInstruction objects to register. * @param {IStyleRecord} styleRecord May specify a style Element to update. */ function registerStyles(styleArray, styleRecord) { var head = document.getElementsByTagName('head')[0]; var styleElement = document.createElement('style'); styleElement.type = 'text/css'; styleElement.appendChild(document.createTextNode(resolveThemableArray(styleArray))); if (styleRecord) { head.replaceChild(styleElement, styleRecord.styleElement); styleRecord.styleElement = styleElement; } else { head.appendChild(styleElement); } if (!styleRecord) { _themeState.registeredStyles.push({ styleElement: styleElement, themableStyle: styleArray }); } } /** * Registers a set of style text, for IE 9 and below, which has a ~30 style element limit so we need * to register slightly differently. * @param {ThemableArray} styleArray Array of IThemingInstruction objects to register. * @param {IStyleRecord} styleRecord May specify a style Element to update. */ function registerStylesIE(styleArray, styleRecord) { var head = document.getElementsByTagName('head')[0]; var lastStyleElement = _themeState.lastStyleElement, registeredStyles = _themeState.registeredStyles; var stylesheet = lastStyleElement ? lastStyleElement.styleSheet : undefined; var lastStyleContent = stylesheet ? stylesheet.cssText : ''; var lastRegisteredStyle = registeredStyles[registeredStyles.length - 1]; var resolvedStyleText = resolveThemableArray(styleArray); if (!lastStyleElement || (lastStyleContent.length + resolvedStyleText.length) > MAX_STYLE_CONTENT_SIZE) { lastStyleElement = document.createElement('style'); lastStyleElement.type = 'text/css'; if (styleRecord) { head.replaceChild(lastStyleElement, styleRecord.styleElement); styleRecord.styleElement = lastStyleElement; } else { head.appendChild(lastStyleElement); } if (!styleRecord) { lastRegisteredStyle = { styleElement: lastStyleElement, themableStyle: styleArray }; registeredStyles.push(lastRegisteredStyle); } } lastStyleElement.styleSheet.cssText += detokenize(resolvedStyleText); Array.prototype.push.apply(lastRegisteredStyle.themableStyle, styleArray); // concat in-place // Preserve the theme state. _themeState.lastStyleElement = lastStyleElement; } /** * Checks to see if styleSheet exists as a property off of a style element. * This will determine if style registration should be done via cssText (<= IE9) or not */ function shouldUseCssText() { var useCSSText = false; if (typeof document !== 'undefined') { var emptyStyle = document.createElement('style'); emptyStyle.type = 'text/css'; useCSSText = !!emptyStyle.styleSheet; } return useCSSText; } /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()))) /***/ }, /* 19 */ /***/ 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__(2); var Async_1 = __webpack_require__(12); var EventGroup_1 = __webpack_require__(14); var warn_1 = __webpack_require__(20); var BaseComponent = (function (_super) { __extends(BaseComponent, _super); /** * BaseComponent constructor * @param props - The props for the component. * @param context - The context for the component. */ function BaseComponent(props, context) { var _this = _super.call(this, props, context) || this; _this.props = props; _this._shouldUpdateComponentRef = true; _makeAllSafe(_this, BaseComponent.prototype, [ 'componentWillMount', 'componentDidMount', 'shouldComponentUpdate', 'componentWillUpdate', 'componentWillReceiveProps', 'render', 'componentDidUpdate', 'componentWillUnmount' ]); return _this; } /** * When the component will receive props, make sure the componentRef is updated. */ BaseComponent.prototype.componentWillReceiveProps = function (newProps, newContext) { this._updateComponentRef(this.props, newProps); }; /** * When the component has mounted, update the componentRef. */ BaseComponent.prototype.componentDidMount = function () { this._updateComponentRef(undefined, this.props); }; /** * If we have disposables, dispose them automatically on unmount. */ BaseComponent.prototype.componentWillUnmount = function () { if (this.__disposables) { for (var i = 0, len = this._disposables.length; i < len; i++) { var disposable = this.__disposables[i]; if (disposable.dispose) { disposable.dispose(); } } this.__disposables = null; } }; Object.defineProperty(BaseComponent.prototype, "className", { /** * Gets the object's class name. */ get: function () { if (!this.__className) { var funcNameRegex = /function (.{1,})\(/; var results = (funcNameRegex).exec((this).constructor.toString()); this.__className = (results && results.length > 1) ? results[1] : ''; } return this.__className; }, enumerable: true, configurable: true }); Object.defineProperty(BaseComponent.prototype, "_disposables", { /** * Allows subclasses to push things to this._disposables to be auto disposed. */ get: function () { if (!this.__disposables) { this.__disposables = []; } return this.__disposables; }, enumerable: true, configurable: true }); Object.defineProperty(BaseComponent.prototype, "_async", { /** * Gets the async instance associated with the component, created on demand. The async instance gives * subclasses a way to execute setTimeout/setInterval async calls safely, where the callbacks * will be cleared/ignored automatically after unmounting. The helpers within the async object also * preserve the this pointer so that you don't need to "bind" the callbacks. */ get: function () { if (!this.__async) { this.__async = new Async_1.Async(this); this._disposables.push(this.__async); } return this.__async; }, enumerable: true, configurable: true }); Object.defineProperty(BaseComponent.prototype, "_events", { /** * Gets the event group instance assocaited with the component, created on demand. The event instance * provides on/off methods for listening to DOM (or regular javascript object) events. The event callbacks * will be automatically disconnected after unmounting. The helpers within the events object also * preserve the this reference so that you don't need to "bind" the callbacks. */ get: function () { if (!this.__events) { this.__events = new EventGroup_1.EventGroup(this); this._disposables.push(this.__events); } return this.__events; }, enumerable: true, configurable: true }); /** * Helper to return a memoized ref resolver function. * @param refName - Name of the member to assign the ref to. * @returns A function instance keyed from the given refname. */ BaseComponent.prototype._resolveRef = function (refName) { var _this = this; if (!this.__resolves) { this.__resolves = {}; } if (!this.__resolves[refName]) { this.__resolves[refName] = function (ref) { return _this[refName] = ref; }; } return this.__resolves[refName]; }; /** * Updates the componentRef (by calling it with "this" when necessary.) */ BaseComponent.prototype._updateComponentRef = function (currentProps, newProps) { if (newProps === void 0) { newProps = {}; } if (this._shouldUpdateComponentRef && ((!currentProps && newProps.componentRef) || (currentProps && currentProps.componentRef !== newProps.componentRef))) { if (currentProps && currentProps.componentRef) { currentProps.componentRef(null); } if (newProps.componentRef) { newProps.componentRef(this); } } }; /** * Warns when a deprecated props are being used. * * @param deprecationMap - The map of deprecations, where key is the prop name and the value is * either null or a replacement prop name. */ BaseComponent.prototype._warnDeprecations = function (deprecationMap) { warn_1.warnDeprecations(this.className, this.props, deprecationMap); }; /** * Warns when props which are mutually exclusive with each other are both used. * * @param mutuallyExclusiveMap - The map of mutually exclusive props. */ BaseComponent.prototype._warnMutuallyExclusive = function (mutuallyExclusiveMap) { warn_1.warnMutuallyExclusive(this.className, this.props, mutuallyExclusiveMap); }; return BaseComponent; }(React.Component)); exports.BaseComponent = BaseComponent; /** * Helper to override a given method with a wrapper method that can try/catch the original, but also * ensures that the BaseComponent's methods are called before the subclass's. This ensures that * componentWillUnmount in the base is called and that things in the _disposables array are disposed. */ function _makeAllSafe(obj, prototype, methodNames) { for (var i = 0, len = methodNames.length; i < len; i++) { _makeSafe(obj, prototype, methodNames[i]); } } function _makeSafe(obj, prototype, methodName) { var classMethod = obj[methodName]; var prototypeMethod = prototype[methodName]; if (classMethod || prototypeMethod) { obj[methodName] = function () { var retVal; try { if (prototypeMethod) { retVal = prototypeMethod.apply(this, arguments); } if (classMethod !== prototypeMethod) { retVal = classMethod.apply(this, arguments); } } catch (e) { var errorMessage = "Exception in " + obj.className + "." + methodName + "(): " + (typeof e === 'string' ? e : e.stack); if (BaseComponent.onError) { BaseComponent.onError(errorMessage, e); } } return retVal; }; } } BaseComponent.onError = function (errorMessage) { console.error(errorMessage); throw errorMessage; }; /** * Simple constant function for returning null, used to render empty templates in JSX. */ function nullRender() { return null; } exports.nullRender = nullRender; /***/ }, /* 20 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _warningCallback = warn; /** * Warns when a deprecated props are being used. * * @param componentName - The name of the component being used. * @param props - The props passed into the component. * @param deprecationMap - The map of deprecations, where key is the prop name and the value is * either null or a replacement prop name. */ function warnDeprecations(componentName, props, deprecationMap) { for (var propName in deprecationMap) { if (props && propName in props) { var deprecationMessage = componentName + " property '" + propName + "' was used but has been deprecated."; var replacementPropName = deprecationMap[propName]; if (replacementPropName) { deprecationMessage += " Use '" + replacementPropName + "' instead."; } _warningCallback(deprecationMessage); } } } exports.warnDeprecations = warnDeprecations; /** * Warns when two props which are mutually exclusive are both being used. * * @param componentName - The name of the component being used. * @param props - The props passed into the component. * @param exclusiveMap - A map where the key is a parameter, and the value is the other parameter. */ function warnMutuallyExclusive(componentName, props, exclusiveMap) { for (var propName in exclusiveMap) { if (props && propName in props && exclusiveMap[propName] in props) { _warningCallback(componentName + " property '" + propName + "' is mutually exclusive with '" + exclusiveMap[propName] + "'. Use one or the other."); } } } exports.warnMutuallyExclusive = warnMutuallyExclusive; /** * Sends a warning to console, if the api is present. * @param message - Warning message. */ function warn(message) { if (console && console.warn) { console.warn(message); } } exports.warn = warn; /** * Configures the warning callback. Passing in undefined will reset it to use the default * console.warn function. * * @param warningCallback - Callback to override the generated warnings. */ function setWarningCallback(warningCallback) { _warningCallback = warningCallback === undefined ? warn : warningCallback; } exports.setWarningCallback = setWarningCallback; /***/ }, /* 21 */ /***/ 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__(2); var PropTypes = __webpack_require__(22); var BaseComponent_1 = __webpack_require__(19); var object_1 = __webpack_require__(31); /** * The Customizer component allows for default props to be mixed into components which * are decorated with the customizable() decorator. This enables injection scenarios like: * * 1. render svg icons instead of the icon font within all buttons * 2. inject a custom theme object into a component * * Props are provided via the settings prop, which should be a json map where the key is * the name of the customizable component, and the value is are the props to pass in. */ var Customizer = (function (_super) { __extends(Customizer, _super); function Customizer(props, context) { var _this = _super.call(this, props) || this; _this.state = _this._getInjectedProps(props, context); return _this; } Customizer.prototype.getChildContext = function () { return this.state; }; Customizer.prototype.componentWillReceiveProps = function (newProps, newContext) { this.setState(this._getInjectedProps(newProps, newContext)); }; Customizer.prototype.render = function () { return React.Children.only(this.props.children); }; Customizer.prototype._getInjectedProps = function (props, context) { var _a = props.settings, injectedPropsFromSettings = _a === void 0 ? {} : _a; var _b = context.injectedProps, injectedPropsFromContext = _b === void 0 ? {} : _b; return { injectedProps: object_1.assign({}, injectedPropsFromContext, injectedPropsFromSettings) }; }; return Customizer; }(BaseComponent_1.BaseComponent)); Customizer.contextTypes = { injectedProps: PropTypes.object }; Customizer.childContextTypes = Customizer.contextTypes; exports.Customizer = Customizer; /***/ }, /* 22 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {/** * Copyright 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. */ if (process.env.NODE_ENV !== 'production') { var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.element')) || 0xeac7; var isValidElement = function(object) { return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE; }; // By explicitly using `prop-types` you are opting into new development behavior. // http://fb.me/prop-types-in-prod var throwOnDirectAccess = true; module.exports = __webpack_require__(24)(isValidElement, throwOnDirectAccess); } else { // By explicitly using `prop-types` you are opting into new production behavior. // http://fb.me/prop-types-in-prod module.exports = __webpack_require__(30)(); } /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23))) /***/ }, /* 23 */ /***/ function(module, exports) { // shim for using process in browser var process = module.exports = {}; // cached from whatever global is present so that test runners that stub it // don't break things. But we need to wrap it in a try catch in case it is // wrapped in strict mode code which doesn't define any globals. It's inside a // function because try/catches deoptimize in certain engines. var cachedSetTimeout; var cachedClearTimeout; function defaultSetTimout() { throw new Error('setTimeout has not been defined'); } function defaultClearTimeout () { throw new Error('clearTimeout has not been defined'); } (function () { try { if (typeof setTimeout === 'function') { cachedSetTimeout = setTimeout; } else { cachedSetTimeout = defaultSetTimout; } } catch (e) { cachedSetTimeout = defaultSetTimout; } try { if (typeof clearTimeout === 'function') { cachedClearTimeout = clearTimeout; } else { cachedClearTimeout = defaultClearTimeout; } } catch (e) { cachedClearTimeout = defaultClearTimeout; } } ()) function runTimeout(fun) { if (cachedSetTimeout === setTimeout) { //normal enviroments in sane situations return setTimeout(fun, 0); } // if setTimeout wasn't available but was latter defined if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) { cachedSetTimeout = setTimeout; return setTimeout(fun, 0); } try { // when when somebody has screwed with setTimeout but no I.E. maddness return cachedSetTimeout(fun, 0); } catch(e){ try { // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally return cachedSetTimeout.call(null, fun, 0); } catch(e){ // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error return cachedSetTimeout.call(this, fun, 0); } } } function runClearTimeout(marker) { if (cachedClearTimeout === clearTimeout) { //normal enviroments in sane situations return clearTimeout(marker); } // if clearTimeout wasn't available but was latter defined if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) { cachedClearTimeout = clearTimeout; return clearTimeout(marker); } try { // when when somebody has screwed with setTimeout but no I.E. maddness return cachedClearTimeout(marker); } catch (e){ try { // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally return cachedClearTimeout.call(null, marker); } catch (e){ // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error. // Some versions of I.E. have different rules for clearTimeout vs setTimeout return cachedClearTimeout.call(this, marker); } } } var queue = []; var draining = false; var currentQueue; var queueIndex = -1; function cleanUpNextTick() { if (!draining || !currentQueue) { return; } draining = false; if (currentQueue.length) { queue = currentQueue.concat(queue); } else { queueIndex = -1; } if (queue.length) { drainQueue(); } } function drainQueue() { if (draining) { return; } var timeout = runTimeout(cleanUpNextTick); draining = true; var len = queue.length; while(len) { currentQueue = queue; queue = []; while (++queueIndex < len) { if (currentQueue) { currentQueue[queueIndex].run(); } } queueIndex = -1; len = queue.length; } currentQueue = null; draining = false; runClearTimeout(timeout); } process.nextTick = function (fun) { var args = new Array(arguments.length - 1); if (arguments.length > 1) { for (var i = 1; i < arguments.length; i++) { args[i - 1] = arguments[i]; } } queue.push(new Item(fun, args)); if (queue.length === 1 && !draining) { runTimeout(drainQueue); } }; // v8 likes predictible objects function Item(fun, array) { this.fun = fun; this.array = array; } Item.prototype.run = function () { this.fun.apply(null, this.array); }; process.title = 'browser'; process.browser = true; process.env = {}; process.argv = []; process.version = ''; // empty string to avoid regexp issues process.versions = {}; function noop() {} process.on = noop; process.addListener = noop; process.once = noop; process.off = noop; process.removeListener = noop; process.removeAllListeners = noop; process.emit = noop; process.prependListener = noop; process.prependOnceListener = noop; process.listeners = function (name) { return [] } process.binding = function (name) { throw new Error('process.binding is not supported'); }; process.cwd = function () { return '/' }; process.chdir = function (dir) { throw new Error('process.chdir is not supported'); }; process.umask = function() { return 0; }; /***/ }, /* 24 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {/** * Copyright 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. */ 'use strict'; var emptyFunction = __webpack_require__(25); var invariant = __webpack_require__(26); var warning = __webpack_require__(27); var ReactPropTypesSecret = __webpack_require__(28); var checkPropTypes = __webpack_require__(29); module.exports = function(isValidElement, throwOnDirectAccess) { /* global Symbol */ var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator; var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec. /** * Returns the iterator method function contained on the iterable object. * * Be sure to invoke the function with the iterable as context: * * var iteratorFn = getIteratorFn(myIterable); * if (iteratorFn) { * var iterator = iteratorFn.call(myIterable); * ... * } * * @param {?object} maybeIterable * @return {?function} */ function getIteratorFn(maybeIterable) { var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]); if (typeof iteratorFn === 'function') { return iteratorFn; } } /** * Collection of methods that allow declaration and validation of props that are * supplied to React components. Example usage: * * var Props = require('ReactPropTypes'); * var MyArticle = React.createClass({ * propTypes: { * // An optional string prop named "description". * description: Props.string, * * // A required enum prop named "category". * category: Props.oneOf(['News','Photos']).isRequired, * * // A prop named "dialog" that requires an instance of Dialog. * dialog: Props.instanceOf(Dialog).isRequired * }, * render: function() { ... } * }); * * A more formal specification of how these methods are used: * * type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...) * decl := ReactPropTypes.{type}(.isRequired)? * * Each and every declaration produces a function with the same signature. This * allows the creation of custom validation functions. For example: * * var MyLink = React.createClass({ * propTypes: { * // An optional string or URI prop named "href". * href: function(props, propName, componentName) { * var propValue = props[propName]; * if (propValue != null && typeof propValue !== 'string' && * !(propValue instanceof URI)) { * return new Error( * 'Expected a string or an URI for ' + propName + ' in ' + * componentName * ); * } * } * }, * render: function() {...} * }); * * @internal */ var ANONYMOUS = '<<anonymous>>'; // Important! // Keep this list in sync with production version in `./factoryWithThrowingShims.js`. var ReactPropTypes = { array: createPrimitiveTypeChecker('array'), bool: createPrimitiveTypeChecker('boolean'), func: createPrimitiveTypeChecker('function'), number: createPrimitiveTypeChecker('number'), object: createPrimitiveTypeChecker('object'), string: createPrimitiveTypeChecker('string'), symbol: createPrimitiveTypeChecker('symbol'), any: createAnyTypeChecker(), arrayOf: createArrayOfTypeChecker, element: createElementTypeChecker(), instanceOf: createInstanceTypeChecker, node: createNodeChecker(), objectOf: createObjectOfTypeChecker, oneOf: createEnumTypeChecker, oneOfType: createUnionTypeChecker, shape: createShapeTypeChecker }; /** * inlined Object.is polyfill to avoid requiring consumers ship their own * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is */ /*eslint-disable no-self-compare*/ function is(x, y) { // SameValue algorithm if (x === y) { // Steps 1-5, 7-10 // Steps 6.b-6.e: +0 != -0 return x !== 0 || 1 / x === 1 / y; } else { // Step 6.a: NaN == NaN return x !== x && y !== y; } } /*eslint-enable no-self-compare*/ /** * We use an Error-like object for backward compatibility as people may call * PropTypes directly and inspect their output. However, we don't use real * Errors anymore. We don't inspect their stack anyway, and creating them * is prohibitively expensive if they are created too often, such as what * happens in oneOfType() for any type before the one that matched. */ function PropTypeError(message) { this.message = message; this.stack = ''; } // Make `instanceof Error` still work for returned errors. PropTypeError.prototype = Error.prototype; function createChainableTypeChecker(validate) { if (process.env.NODE_ENV !== 'production') { var manualPropTypeCallCache = {}; var manualPropTypeWarningCount = 0; } function checkType(isRequired, props, propName, componentName, location, propFullName, secret) { componentName = componentName || ANONYMOUS; propFullName = propFullName || propName; if (secret !== ReactPropTypesSecret) { if (throwOnDirectAccess) { // New behavior only for users of `prop-types` package invariant( false, 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 'Use `PropTypes.checkPropTypes()` to call them. ' + 'Read more at http://fb.me/use-check-prop-types' ); } else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') { // Old behavior for people using React.PropTypes var cacheKey = componentName + ':' + propName; if ( !manualPropTypeCallCache[cacheKey] && // Avoid spamming the console because they are often not actionable except for lib authors manualPropTypeWarningCount < 3 ) { warning( false, 'You are manually calling a React.PropTypes validation ' + 'function for the `%s` prop on `%s`. This is deprecated ' + 'and will throw in the standalone `prop-types` package. ' + 'You may be seeing this warning due to a third-party PropTypes ' + 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.', propFullName, componentName ); manualPropTypeCallCache[cacheKey] = true; manualPropTypeWarningCount++; } } } if (props[propName] == null) { if (isRequired) { if (props[propName] === null) { return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.')); } return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.')); } return null; } else { return validate(props, propName, componentName, location, propFullName); } } var chainedCheckType = checkType.bind(null, false); chainedCheckType.isRequired = checkType.bind(null, true); return chainedCheckType; } function createPrimitiveTypeChecker(expectedType) { function validate(props, propName, componentName, location, propFullName, secret) { var propValue = props[propName]; var propType = getPropType(propValue); if (propType !== expectedType) { // `propValue` being instance of, say, date/regexp, pass the 'object' // check, but we can offer a more precise error message here rather than // 'of type `object`'. var preciseType = getPreciseType(propValue); return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.')); } return null; } return createChainableTypeChecker(validate); } function createAnyTypeChecker() { return createChainableTypeChecker(emptyFunction.thatReturnsNull); } function createArrayOfTypeChecker(typeChecker) { function validate(props, propName, componentName, location, propFullName) { if (typeof typeChecker !== 'function') { return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.'); } var propValue = props[propName]; if (!Array.isArray(propValue)) { var propType = getPropType(propValue); return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.')); } for (var i = 0; i < propValue.length; i++) { var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret); if (error instanceof Error) { return error; } } return null; } return createChainableTypeChecker(validate); } function createElementTypeChecker() { function validate(props, propName, componentName, location, propFullName) { var propValue = props[propName]; if (!isValidElement(propValue)) { var propType = getPropType(propValue); return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.')); } return null; } return createChainableTypeChecker(validate); } function createInstanceTypeChecker(expectedClass) { function validate(props, propName, componentName, location, propFullName) { if (!(props[propName] instanceof expectedClass)) { var expectedClassName = expectedClass.name || ANONYMOUS; var actualClassName = getClassName(props[propName]); return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.')); } return null; } return createChainableTypeChecker(validate); } function createEnumTypeChecker(expectedValues) { if (!Array.isArray(expectedValues)) { process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid argument supplied to oneOf, expected an instance of array.') : void 0; return emptyFunction.thatReturnsNull; } function validate(props, propName, componentName, location, propFullName) { var propValue = props[propName]; for (var i = 0; i < expectedValues.length; i++) { if (is(propValue, expectedValues[i])) { return null; } } var valuesString = JSON.stringify(expectedValues); return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.')); } return createChainableTypeChecker(validate); } function createObjectOfTypeChecker(typeChecker) { function validate(props, propName, componentName, location, propFullName) { if (typeof typeChecker !== 'function') { return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.'); } var propValue = props[propName]; var propType = getPropType(propValue); if (propType !== 'object') { return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.')); } for (var key in propValue) { if (propValue.hasOwnProperty(key)) { var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret); if (error instanceof Error) { return error; } } } return null; } return createChainableTypeChecker(validate); } function createUnionTypeChecker(arrayOfTypeCheckers) { if (!Array.isArray(arrayOfTypeCheckers)) { process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid argument supplied to oneOfType, expected an instance of array.') : void 0; return emptyFunction.thatReturnsNull; } for (var i = 0; i < arrayOfTypeCheckers.length; i++) { var checker = arrayOfTypeCheckers[i]; if (typeof checker !== 'function') { warning( false, 'Invalid argument supplid to oneOfType. Expected an array of check functions, but ' + 'received %s at index %s.', getPostfixForTypeWarning(checker), i ); return emptyFunction.thatReturnsNull; } } function validate(props, propName, componentName, location, propFullName) { for (var i = 0; i < arrayOfTypeCheckers.length; i++) { var checker = arrayOfTypeCheckers[i]; if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret) == null) { return null; } } return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.')); } return createChainableTypeChecker(validate); } function createNodeChecker() { function validate(props, propName, componentName, location, propFullName) { if (!isNode(props[propName])) { return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.')); } return null; } return createChainableTypeChecker(validate); } function createShapeTypeChecker(shapeTypes) { function validate(props, propName, componentName, location, propFullName) { var propValue = props[propName]; var propType = getPropType(propValue); if (propType !== 'object') { return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.')); } for (var key in shapeTypes) { var checker = shapeTypes[key]; if (!checker) { continue; } var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret); if (error) { return error; } } return null; } return createChainableTypeChecker(validate); } function isNode(propValue) { switch (typeof propValue) { case 'number': case 'string': case 'undefined': return true; case 'boolean': return !propValue; case 'object': if (Array.isArray(propValue)) { return propValue.every(isNode); } if (propValue === null || isValidElement(propValue)) { return true; } var iteratorFn = getIteratorFn(propValue); if (iteratorFn) { var iterator = iteratorFn.call(propValue); var step; if (iteratorFn !== propValue.entries) { while (!(step = iterator.next()).done) { if (!isNode(step.value)) { return false; } } } else { // Iterator will provide entry [k,v] tuples rather than values. while (!(step = iterator.next()).done) { var entry = step.value; if (entry) { if (!isNode(entry[1])) { return false; } } } } } else { return false; } return true; default: return false; } } function isSymbol(propType, propValue) { // Native Symbol. if (propType === 'symbol') { return true; } // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol' if (propValue['@@toStringTag'] === 'Symbol') { return true; } // Fallback for non-spec compliant Symbols which are polyfilled. if (typeof Symbol === 'function' && propValue instanceof Symbol) { return true; } return false; } // Equivalent of `typeof` but with special handling for array and regexp. function getPropType(propValue) { var propType = typeof propValue; if (Array.isArray(propValue)) { return 'array'; } if (propValue instanceof RegExp) { // Old webkits (at least until Android 4.0) return 'function' rather than // 'object' for typeof a RegExp. We'll normalize this here so that /bla/ // passes PropTypes.object. return 'object'; } if (isSymbol(propType, propValue)) { return 'symbol'; } return propType; } // This handles more types than `getPropType`. Only used for error messages. // See `createPrimitiveTypeChecker`. function getPreciseType(propValue) { if (typeof propValue === 'undefined' || propValue === null) { return '' + propValue; } var propType = getPropType(propValue); if (propType === 'object') { if (propValue instanceof Date) { return 'date'; } else if (propValue instanceof RegExp) { return 'regexp'; } } return propType; } // Returns a string that is postfixed to a warning about an invalid type. // For example, "undefined" or "of type array" function getPostfixForTypeWarning(value) { var type = getPreciseType(value); switch (type) { case 'array': case 'object': return 'an ' + type; case 'boolean': case 'date': case 'regexp': return 'a ' + type; default: return type; } } // Returns class name of the object, if any. function getClassName(propValue) { if (!propValue.constructor || !propValue.constructor.name) { return ANONYMOUS; } return propValue.constructor.name; } ReactPropTypes.checkPropTypes = checkPropTypes; ReactPropTypes.PropTypes = ReactPropTypes; return ReactPropTypes; }; /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23))) /***/ }, /* 25 */ /***/ function(module, exports) { "use strict"; /** * Copyright (c) 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * */ function makeEmptyFunction(arg) { return function () { return arg; }; } /** * This function accepts and discards inputs; it has no side effects. This is * primarily useful idiomatically for overridable function endpoints which * always need to be callable, since JS lacks a null-call idiom ala Cocoa. */ var emptyFunction = function emptyFunction() {}; emptyFunction.thatReturns = makeEmptyFunction; emptyFunction.thatReturnsFalse = makeEmptyFunction(false); emptyFunction.thatReturnsTrue = makeEmptyFunction(true); emptyFunction.thatReturnsNull = makeEmptyFunction(null); emptyFunction.thatReturnsThis = function () { return this; }; emptyFunction.thatReturnsArgument = function (arg) { return arg; }; module.exports = emptyFunction; /***/ }, /* 26 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {/** * Copyright (c) 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * */ 'use strict'; /** * Use invariant() to assert state which your program assumes to be true. * * Provide sprintf-style format (only %s is supported) and arguments * to provide information about what broke and what you were * expecting. * * The invariant message will be stripped in production, but the invariant * will remain to ensure logic does not differ in production. */ var validateFormat = function validateFormat(format) {}; if (process.env.NODE_ENV !== 'production') { validateFormat = function validateFormat(format) { if (format === undefined) { throw new Error('invariant requires an error message argument'); } }; } function invariant(condition, format, a, b, c, d, e, f) { validateFormat(format); if (!condition) { var error; if (format === undefined) { error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.'); } else { var args = [a, b, c, d, e, f]; var argIndex = 0; error = new Error(format.replace(/%s/g, function () { return args[argIndex++]; })); error.name = 'Invariant Violation'; } error.framesToPop = 1; // we don't care about invariant's own frame throw error; } } module.exports = invariant; /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23))) /***/ }, /* 27 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {/** * Copyright 2014-2015, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * */ 'use strict'; var emptyFunction = __webpack_require__(25); /** * Similar to invariant but only logs a warning if the condition is not met. * This can be used to log issues in development environments in critical * paths. Removing the logging code for production environments will keep the * same logic and follow the same code paths. */ var warning = emptyFunction; if (process.env.NODE_ENV !== 'production') { (function () { var printWarning = function printWarning(format) { for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { args[_key - 1] = arguments[_key]; } var argIndex = 0; var message = 'Warning: ' + format.replace(/%s/g, function () { return args[argIndex++]; }); if (typeof console !== 'undefined') { console.error(message); } try { // --- Welcome to debugging React --- // This error was thrown as a convenience so that you can use this stack // to find the callsite that caused this warning to fire. throw new Error(message); } catch (x) {} }; warning = function warning(condition, format) { if (format === undefined) { throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); } if (format.indexOf('Failed Composite propType: ') === 0) { return; // Ignore CompositeComponent proptype check. } if (!condition) { for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { args[_key2 - 2] = arguments[_key2]; } printWarning.apply(undefined, [format].concat(args)); } }; })(); } module.exports = warning; /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23))) /***/ }, /* 28 */ /***/ function(module, exports) { /** * Copyright 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. */ 'use strict'; var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; module.exports = ReactPropTypesSecret; /***/ }, /* 29 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {/** * Copyright 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. */ 'use strict'; if (process.env.NODE_ENV !== 'production') { var invariant = __webpack_require__(26); var warning = __webpack_require__(27); var ReactPropTypesSecret = __webpack_require__(28); var loggedTypeFailures = {}; } /** * Assert that the values match with the type specs. * Error messages are memorized and will only be shown once. * * @param {object} typeSpecs Map of name to a ReactPropType * @param {object} values Runtime values that need to be type-checked * @param {string} location e.g. "prop", "context", "child context" * @param {string} componentName Name of the component for error messages. * @param {?Function} getStack Returns the component stack. * @private */ function checkPropTypes(typeSpecs, values, location, componentName, getStack) { if (process.env.NODE_ENV !== 'production') { for (var typeSpecName in typeSpecs) { if (typeSpecs.hasOwnProperty(typeSpecName)) { var error; // Prop type validation may throw. In case they do, we don't want to // fail the render phase where it didn't fail before. So we log it. // After these have been cleaned up, we'll let them throw. try { // This is intentionally an invariant that gets caught. It's the same // behavior as without this statement except with a better message. invariant(typeof typeSpecs[typeSpecName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually from ' + 'React.PropTypes.', componentName || 'React class', location, typeSpecName); error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret); } catch (ex) { error = ex; } warning(!error || error instanceof Error, '%s: type specification of %s `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error); if (error instanceof Error && !(error.message in loggedTypeFailures)) { // Only monitor this failure once because there tends to be a lot of the // same error. loggedTypeFailures[error.message] = true; var stack = getStack ? getStack() : ''; warning(false, 'Failed %s type: %s%s', location, error.message, stack != null ? stack : ''); } } } } } module.exports = checkPropTypes; /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23))) /***/ }, /* 30 */ /***/ function(module, exports, __webpack_require__) { /** * Copyright 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. */ 'use strict'; var emptyFunction = __webpack_require__(25); var invariant = __webpack_require__(26); var ReactPropTypesSecret = __webpack_require__(28); module.exports = function() { function shim(props, propName, componentName, location, propFullName, secret) { if (secret === ReactPropTypesSecret) { // It is still safe when called from React. return; } invariant( false, 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 'Use PropTypes.checkPropTypes() to call them. ' + 'Read more at http://fb.me/use-check-prop-types' ); }; shim.isRequired = shim; function getShim() { return shim; }; // Important! // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`. var ReactPropTypes = { array: shim, bool: shim, func: shim, number: shim, object: shim, string: shim, symbol: shim, any: shim, arrayOf: getShim, element: shim, instanceOf: getShim, node: shim, objectOf: getShim, oneOf: getShim, oneOfType: getShim, shape: getShim }; ReactPropTypes.checkPropTypes = emptyFunction; ReactPropTypes.PropTypes = ReactPropTypes; return ReactPropTypes; }; /***/ }, /* 31 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); // Initialize global window id. var CURRENT_ID_PROPERTY = '__currentId__'; var _global = (typeof window !== 'undefined' && window) || process; if (_global[CURRENT_ID_PROPERTY] === undefined) { _global[CURRENT_ID_PROPERTY] = 0; } function checkProperties(a, b) { for (var propName in a) { if (a.hasOwnProperty(propName)) { if (!b.hasOwnProperty(propName) || (b[propName] !== a[propName])) { return false; } } } return true; } // Compare a to b and b to a function shallowCompare(a, b) { return checkProperties(a, b) && checkProperties(b, a); } exports.shallowCompare = shallowCompare; /** * Makes a resulting merge of a bunch of objects. Pass in the target object followed by 1 or more * objects as arguments and they will be merged sequentially into the target. Note that this will * shallow merge; it will not create new cloned values for target members. * * @param target - Target object to merge following object arguments into. * @param args - One or more objects that will be mixed into the target in the order they are provided. * @returns Resulting merged target. */ function assign(target) { var args = []; for (var _i = 1; _i < arguments.length; _i++) { args[_i - 1] = arguments[_i]; } return filteredAssign.apply(this, [null, target].concat(args)); } exports.assign = assign; /** * Makes a resulting merge of a bunch of objects, but allows a filter function to be passed in to filter * the resulting merges. This allows for scenarios where you want to merge "everything except that one thing" * or "properties that start with data-". Note that this will shallow merge; it will not create new cloned * values for target members. * * @param isAllowed - Callback to determine if the given propName is allowed in the result. * @param target - Target object to merge following object arguments into. * @param args - One or more objects that will be mixed into the target in the order they are provided. * @returns Resulting merged target. */ function filteredAssign(isAllowed, target) { var args = []; for (var _i = 2; _i < arguments.length; _i++) { args[_i - 2] = arguments[_i]; } target = target || {}; for (var _a = 0, args_1 = args; _a < args_1.length; _a++) { var sourceObject = args_1[_a]; if (sourceObject) { for (var propName in sourceObject) { if (sourceObject.hasOwnProperty(propName) && !isAllowed || isAllowed(propName)) { target[propName] = sourceObject[propName]; } } } } return target; } exports.filteredAssign = filteredAssign; /** Generates a unique id in the global scope (this spans across duplicate copies of the same library.) */ function getId(prefix) { var index = _global[CURRENT_ID_PROPERTY]++; return (prefix || '') + index; } exports.getId = getId; /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23))) /***/ }, /* 32 */ /***/ 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__(2); /** * Utility component for delaying the render of a child component after a given delay. This component * requires a single child component; don't pass in many components. Wrap multiple components in a DIV * if necessary. */ var DelayedRender = (function (_super) { __extends(DelayedRender, _super); function DelayedRender(props) { var _this = _super.call(this, props) || this; _this.state = { isRendered: false }; return _this; } DelayedRender.prototype.componentDidMount = function () { var _this = this; var delay = this.props.delay; this._timeoutId = setTimeout(function () { _this.setState({ isRendered: true }); }, delay); }; DelayedRender.prototype.componentWillUnmount = function () { clearTimeout(this._timeoutId); }; DelayedRender.prototype.render = function () { return this.state.isRendered ? React.Children.only(this.props.children) : null; }; return DelayedRender; }(React.Component)); DelayedRender.defaultProps = { delay: 0 }; exports.DelayedRender = DelayedRender; /***/ }, /* 33 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var KeyCodes; (function (KeyCodes) { KeyCodes[KeyCodes["a"] = 65] = "a"; KeyCodes[KeyCodes["backspace"] = 8] = "backspace"; KeyCodes[KeyCodes["comma"] = 188] = "comma"; KeyCodes[KeyCodes["del"] = 46] = "del"; KeyCodes[KeyCodes["down"] = 40] = "down"; KeyCodes[KeyCodes["end"] = 35] = "end"; KeyCodes[KeyCodes["enter"] = 13] = "enter"; KeyCodes[KeyCodes["escape"] = 27] = "escape"; KeyCodes[KeyCodes["home"] = 36] = "home"; KeyCodes[KeyCodes["left"] = 37] = "left"; KeyCodes[KeyCodes["pageDown"] = 34] = "pageDown"; KeyCodes[KeyCodes["pageUp"] = 33] = "pageUp"; KeyCodes[KeyCodes["right"] = 39] = "right"; KeyCodes[KeyCodes["semicolon"] = 186] = "semicolon"; KeyCodes[KeyCodes["space"] = 32] = "space"; KeyCodes[KeyCodes["tab"] = 9] = "tab"; KeyCodes[KeyCodes["up"] = 38] = "up"; })(KeyCodes = exports.KeyCodes || (exports.KeyCodes = {})); /***/ }, /* 34 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Rectangle = (function () { function Rectangle(left, right, top, bottom) { if (left === void 0) { left = 0; } if (right === void 0) { right = 0; } if (top === void 0) { top = 0; } if (bottom === void 0) { bottom = 0; } this.top = top; this.bottom = bottom; this.left = left; this.right = right; } Object.defineProperty(Rectangle.prototype, "width", { /** * Calculated automatically by subtracting the right from left */ get: function () { return this.right - this.left; }, enumerable: true, configurable: true }); Object.defineProperty(Rectangle.prototype, "height", { /** * Calculated automatically by subtracting the bottom from top. */ get: function () { return this.bottom - this.top; }, enumerable: true, configurable: true }); /** * Tests if another rect is approximately equal to this rect (within 4 decimal places.) */ Rectangle.prototype.equals = function (rect) { // I'm fixing it to 4 decimal places because it allows enough precision and will handle cases when something should be rounded, // like .999999 should round to 1. return (parseFloat(this.top.toFixed(4)) === parseFloat(rect.top.toFixed(4)) && parseFloat(this.bottom.toFixed(4)) === parseFloat(rect.bottom.toFixed(4)) && parseFloat(this.left.toFixed(4)) === parseFloat(rect.left.toFixed(4)) && parseFloat(this.right.toFixed(4)) === parseFloat(rect.right.toFixed(4))); }; return Rectangle; }()); exports.Rectangle = Rectangle; /***/ }, /* 35 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function findIndex(array, cb) { var index = -1; for (var i = 0; array && i < array.length; i++) { if (cb(array[i], i)) { index = i; break; } } return index; } exports.findIndex = findIndex; function createArray(size, getItem) { var array = []; for (var i = 0; i < size; i++) { array.push(getItem(i)); } return array; } exports.createArray = createArray; /***/ }, /* 36 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * Autobind is a utility for binding methods in a class. This simplifies tagging methods as being "bound" to the this pointer * so that they can be used in scenarios that simply require a function callback. */ function autobind(target, key, descriptor) { var fn = descriptor.value; var defining = false; return { configurable: true, get: function () { if (defining || this === fn.prototype || this.hasOwnProperty(key)) { return fn; } // Bind method only once, and update the property to return the bound value from now on var fnBound = fn.bind(this); defining = true; Object.defineProperty(this, key, { configurable: true, writable: true, enumerable: true, value: fnBound }); defining = false; return fnBound; }, set: function (newValue) { Object.defineProperty(this, key, { configurable: true, writable: true, enumerable: true, value: newValue }); } }; } exports.autobind = autobind; /***/ }, /* 37 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function css() { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } var classes = []; for (var _a = 0, args_1 = args; _a < args_1.length; _a++) { var arg = args_1[_a]; if (arg) { if (typeof arg === 'string') { classes.push(arg); } else if ((arg.hasOwnProperty('toString') && typeof (arg.toString) === 'function')) { classes.push(arg.toString()); } else { for (var key in arg) { if (arg[key]) { classes.push(key); } } } } } return classes.join(' '); } exports.css = css; /***/ }, /* 38 */ /***/ 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__(2); var PropTypes = __webpack_require__(22); function customizable(componentName) { return function customizableFactory(ComposedComponent) { return _a = (function (_super) { __extends(ComponentWithInjectedProps, _super); function ComponentWithInjectedProps() { return _super !== null && _super.apply(this, arguments) || this; } ComponentWithInjectedProps.prototype.render = function () { var defaultProps = ((this.context.injectedProps) ? this.context.injectedProps[componentName] : null) || {}; return (React.createElement(ComposedComponent, __assign({}, defaultProps, this.props))); }; return ComponentWithInjectedProps; }(React.Component)), _a.contextTypes = { injectedProps: PropTypes.object }, _a; var _a; }; } exports.customizable = customizable; /***/ }, /* 39 */ /***/ function(module, exports, __webpack_require__) { /* tslint:disable:no-string-literal */ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var dom_1 = __webpack_require__(16); var IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable'; var IS_VISIBLE_ATTRIBUTE = 'data-is-visible'; var FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id'; function getFirstFocusable(rootElement, currentElement, includeElementsInFocusZones) { return getNextElement(rootElement, currentElement, true, false, false, includeElementsInFocusZones); } exports.getFirstFocusable = getFirstFocusable; function getLastFocusable(rootElement, currentElement, includeElementsInFocusZones) { return getPreviousElement(rootElement, currentElement, true, false, true, includeElementsInFocusZones); } exports.getLastFocusable = getLastFocusable; /** * Attempts to focus the first focusable element that is a child or child's child of the rootElement. * @param rootElement - Element to start the search for a focusable child. * @returns True if focus was set, false if it was not. */ function focusFirstChild(rootElement) { var element = getNextElement(rootElement, rootElement, true, false, false, true); if (element) { element.focus(); return true; } return false; } exports.focusFirstChild = focusFirstChild; /** Traverse to find the previous element. */ function getPreviousElement(rootElement, currentElement, checkNode, suppressParentTraversal, traverseChildren, includeElementsInFocusZones) { if (!currentElement || currentElement === rootElement) { return null; } var isCurrentElementVisible = isElementVisible(currentElement); // Check its children. if (traverseChildren && (includeElementsInFocusZones || !isElementFocusZone(currentElement)) && isCurrentElementVisible) { var childMatch = getPreviousElement(rootElement, currentElement.lastElementChild, true, true, true, includeElementsInFocusZones); if (childMatch) { return childMatch; } } // Check the current node, if it's not the first traversal. if (checkNode && isCurrentElementVisible && isElementTabbable(currentElement)) { return currentElement; } // Check its previous sibling. var siblingMatch = getPreviousElement(rootElement, currentElement.previousElementSibling, true, true, true, includeElementsInFocusZones); if (siblingMatch) { return siblingMatch; } // Check its parent. if (!suppressParentTraversal) { return getPreviousElement(rootElement, currentElement.parentElement, true, false, false, includeElementsInFocusZones); } return null; } exports.getPreviousElement = getPreviousElement; /** Traverse to find the next focusable element. */ function getNextElement(rootElement, currentElement, checkNode, suppressParentTraversal, suppressChildTraversal, includeElementsInFocusZones) { if (!currentElement || (currentElement === rootElement && suppressChildTraversal)) { return null; } var isCurrentElementVisible = isElementVisible(currentElement); // Check the current node, if it's not the first traversal. if (checkNode && isCurrentElementVisible && isElementTabbable(currentElement)) { return currentElement; } // Check its children. if (!suppressChildTraversal && isCurrentElementVisible && (includeElementsInFocusZones || !isElementFocusZone(currentElement))) { var childMatch = getNextElement(rootElement, currentElement.firstElementChild, true, true, false, includeElementsInFocusZones); if (childMatch) { return childMatch; } } if (currentElement === rootElement) { return null; } // Check its sibling. var siblingMatch = getNextElement(rootElement, currentElement.nextElementSibling, true, true, false, includeElementsInFocusZones); if (siblingMatch) { return siblingMatch; } if (!suppressParentTraversal) { return getNextElement(rootElement, currentElement.parentElement, false, false, true, includeElementsInFocusZones); } return null; } exports.getNextElement = getNextElement; function isElementVisible(element) { // If the element is not valid, return false. if (!element || !element.getAttribute) { return false; } var visibilityAttribute = element.getAttribute(IS_VISIBLE_ATTRIBUTE); // If the element is explicitly marked with the visibility attribute, return that value as boolean. if (visibilityAttribute !== null && visibilityAttribute !== undefined) { return visibilityAttribute === 'true'; } // Fallback to other methods of determining actual visibility. return (element.offsetHeight !== 0 || element.offsetParent !== null || element.isVisible === true); // used as a workaround for testing. } exports.isElementVisible = isElementVisible; function isElementTabbable(element) { // If this element is null or is disabled, it is not considered tabbable. if (!element || element.disabled) { return false; } // In IE, element.tabIndex is default to 0. We need to use element get tabIndex attribute to get the correct tabIndex var tabIndex = -1; if (element && element.getAttribute) { tabIndex = parseInt(element.getAttribute('tabIndex'), 10); } var isFocusableAttribute = element.getAttribute ? element.getAttribute(IS_FOCUSABLE_ATTRIBUTE) : null; return (!!element && isFocusableAttribute !== 'false' && (element.tagName === 'A' || (element.tagName === 'BUTTON') || (element.tagName === 'INPUT') || (element.tagName === 'TEXTAREA') || (tabIndex >= 0) || (element.getAttribute && (isFocusableAttribute === 'true' || element.getAttribute('role') === 'button')))); } exports.isElementTabbable = isElementTabbable; function isElementFocusZone(element) { return element && !!element.getAttribute(FOCUSZONE_ID_ATTRIBUTE); } exports.isElementFocusZone = isElementFocusZone; function doesElementContainFocus(element) { var currentActiveElement = dom_1.getDocument(element).activeElement; if (currentActiveElement && dom_1.elementContains(element, currentActiveElement)) { return true; } return false; } exports.doesElementContainFocus = doesElementContainFocus; /***/ }, /* 40 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var REACT_LIFECYCLE_EXCLUSIONS = [ 'setState', 'render', 'componentWillMount', 'componentDidMount', 'componentWillReceiveProps', 'shouldComponentUpdate', 'componentWillUpdate', 'componentDidUpdate', 'componentWillUnmount' ]; /** * Allows you to hoist methods, except those in an exclusion set from a source object into a destination object. * * @param destination - The instance of the object to hoist the methods onto. * @param source - The instance of the object where the methods are hoisted from. * @param exclusions - (Optional) What methods to exclude from being hoisted. * @returns An array of names of methods that were hoisted. */ function hoistMethods(destination, source, exclusions) { if (exclusions === void 0) { exclusions = REACT_LIFECYCLE_EXCLUSIONS; } var hoisted = []; var _loop_1 = function (methodName) { if (typeof source[methodName] === 'function' && destination[methodName] === undefined && (!exclusions || exclusions.indexOf(methodName) === -1)) { hoisted.push(methodName); /* tslint:disable:no-function-expression */ destination[methodName] = function () { source[methodName].apply(source, arguments); }; /* tslint:enable */ } }; for (var methodName in source) { _loop_1(methodName); } return hoisted; } exports.hoistMethods = hoistMethods; /** * Provides a method for convenience to unhoist hoisted methods. * * @param source - The source object upon which methods were hoisted. * @param methodNames - An array of method names to unhoist. */ function unhoistMethods(source, methodNames) { methodNames .forEach(function (methodName) { return delete source[methodName]; }); } exports.unhoistMethods = unhoistMethods; /***/ }, /* 41 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * Regular expression matching characters to ignore when calculating the initials. * The first part matches characters within parenthesis, including the parenthesis. * The second part matches special ASCII characters except space, plus some unicode special characters. */ var UNWANTED_CHARS_REGEX = /\([^)]*\)|[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g; /** Regular expression matching one or more spaces. */ var MULTIPLE_WHITESPACES_REGEX = /\s+/g; /** * Regular expression matching languages for which we currently don't support initials. * Arabic: Arabic, Arabic Supplement, Arabic Extended-A. * Korean: Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B. * Japanese: Hiragana, Katakana. * CJK: CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs, CJK Unified Ideographs Extension B */ /* tslint:disable:max-line-length */ var UNSUPPORTED_TEXT_REGEX = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/; /* tslint:enable:max-line-length */ function getInitialsLatin(displayName, isRtl) { var initials = ''; var splits = displayName.split(' '); if (splits.length === 2) { initials += splits[0].charAt(0).toUpperCase(); initials += splits[1].charAt(0).toUpperCase(); } else if (splits.length === 3) { initials += splits[0].charAt(0).toUpperCase(); initials += splits[2].charAt(0).toUpperCase(); } else if (splits.length !== 0) { initials += splits[0].charAt(0).toUpperCase(); } if (isRtl && initials.length > 1) { return initials.charAt(1) + initials.charAt(0); } return initials; } function cleanupDisplayName(displayName) { displayName = displayName.replace(UNWANTED_CHARS_REGEX, ''); displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' '); displayName = displayName.trim(); return displayName; } /** Get (up to 2 characters) initials based on display name of the persona. */ function getInitials(displayName, isRtl) { if (displayName == null) { return ''; } displayName = cleanupDisplayName(displayName); if (UNSUPPORTED_TEXT_REGEX.test(displayName)) { return ''; } return getInitialsLatin(displayName, isRtl); } exports.getInitials = getInitials; /***/ }, /* 42 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var dom_1 = __webpack_require__(16); // Default to undefined so that we initialize on first read. var _language; /** * Gets the rtl state of the page (returns true if in rtl.) */ function getLanguage() { if (_language === undefined) { var doc = dom_1.getDocument(); var win = dom_1.getWindow(); // tslint:disable-next-line:no-string-literal if (win && win['localStorage']) { var savedLanguage = localStorage.getItem('language'); if (savedLanguage !== null) { _language = savedLanguage; } } if (_language === undefined && doc) { _language = doc.documentElement.getAttribute('lang'); } if (_language === undefined) { setLanguage('en', false); } } return _language; } exports.getLanguage = getLanguage; /** * Sets the rtl state of the page (by adjusting the dir attribute of the html element.) */ function setLanguage(language, avoidPersisting) { if (avoidPersisting === void 0) { avoidPersisting = false; } var doc = dom_1.getDocument(); if (doc) { doc.documentElement.setAttribute('lang', language); } var win = dom_1.getWindow(); // tslint:disable-next-line:no-string-literal if (win && win['localStorage'] && !avoidPersisting) { localStorage.setItem('language', language); } _language = language; } exports.setLanguage = setLanguage; /***/ }, /* 43 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function getDistanceBetweenPoints(point1, point2) { var distance = Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2)); return distance; } exports.getDistanceBetweenPoints = getDistanceBetweenPoints; /***/ }, /* 44 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * Detects whether an element's content has horizontal overflow * * @param element - Element to check for overflow * @returns True if element's content overflows */ function hasHorizontalOverflow(element) { return element.clientWidth < element.scrollWidth; } exports.hasHorizontalOverflow = hasHorizontalOverflow; /** * Detects whether an element's content has vertical overflow * * @param element - Element to check for overflow * @returns True if element's content overflows */ function hasVerticalOverflow(element) { return element.clientHeight < element.scrollHeight; } exports.hasVerticalOverflow = hasVerticalOverflow; /** * Detects whether an element's content has overflow in any direction * * @param element - Element to check for overflow * @returns True if element's content overflows */ function hasOverflow(element) { return hasHorizontalOverflow(element) || hasVerticalOverflow(element); } exports.hasOverflow = hasOverflow; /***/ }, /* 45 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var object_1 = __webpack_require__(31); exports.baseElementEvents = [ 'onCopy', 'onCut', 'onPaste', 'onCompositionEnd', 'onCompositionStart', 'onCompositionUpdate', 'onFocus', 'onFocusCapture', 'onBlur', 'onBlurCapture', 'onChange', 'onInput', 'onSubmit', 'onLoad', 'onError', 'onKeyDown', 'onKeyDownCapture', 'onKeyPress', 'onKeyUp', 'onAbort', 'onCanPlay', 'onCanPlayThrough', 'onDurationChange', 'onEmptied', 'onEncrypted', 'onEnded', 'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange', 'onSeeked', 'onSeeking', 'onStalled', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting', 'onClick', 'onClickCapture', 'onContextMenu', 'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', 'onMouseDown', 'onMouseDownCapture', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'onMouseUpCapture', 'onSelect', 'onTouchCancel', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'onScroll', 'onWheel' ]; exports.baseElementProperties = [ 'defaultChecked', 'defaultValue', 'accept', 'acceptCharset', 'accessKey', 'action', 'allowFullScreen', 'allowTransparency', 'alt', 'async', 'autoComplete', 'autoFocus', 'autoPlay', 'capture', 'cellPadding', 'cellSpacing', 'charSet', 'challenge', 'checked', 'children', 'classID', 'className', 'cols', 'colSpan', 'content', 'contentEditable', 'contextMenu', 'controls', 'coords', 'crossOrigin', 'data', 'dateTime', 'default', 'defer', 'dir', 'download', 'draggable', 'encType', 'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'frameBorder', 'headers', 'height', 'hidden', 'high', 'hrefLang', 'htmlFor', 'httpEquiv', 'icon', 'id', 'inputMode', 'integrity', 'is', 'keyParams', 'keyType', 'kind', 'lang', 'list', 'loop', 'low', 'manifest', 'marginHeight', 'marginWidth', 'max', 'maxLength', 'media', 'mediaGroup', 'method', 'min', 'minLength', 'multiple', 'muted', 'name', 'noValidate', 'open', 'optimum', 'pattern', 'placeholder', 'poster', 'preload', 'radioGroup', 'readOnly', 'rel', 'required', 'role', 'rows', 'rowSpan', 'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'selected', 'shape', 'size', 'sizes', 'span', 'spellCheck', 'src', 'srcDoc', 'srcLang', 'srcSet', 'start', 'step', 'style', 'summary', 'tabIndex', 'title', 'type', 'useMap', 'value', 'width', 'wmode', 'wrap' ]; exports.htmlElementProperties = exports.baseElementProperties.concat(exports.baseElementEvents); exports.anchorProperties = exports.htmlElementProperties.concat([ 'href', 'target' ]); exports.buttonProperties = exports.htmlElementProperties.concat([ 'disabled' ]); exports.divProperties = exports.htmlElementProperties.concat(['align', 'noWrap']); exports.inputProperties = exports.buttonProperties; exports.textAreaProperties = exports.buttonProperties; exports.imageProperties = exports.divProperties; /** * Gets native supported props for an html element provided the allowance set. Use one of the property * sets defined (divProperties, buttonPropertes, etc) to filter out supported properties from a given * props set. Note that all data- and aria- prefixed attributes will be allowed. * NOTE: getNativeProps should always be applied first when adding props to a react component. The * non-native props should be applied second. This will prevent getNativeProps from overriding your custom props. * For example, if props passed to getNativeProps has an onClick function and getNativeProps is added to * the component after an onClick function is added, then the getNativeProps onClick will override it. * @param props - The unfiltered input props * @param allowedPropsNames- The array of allowed propnames. * @returns The filtered props */ function getNativeProps(props, allowedPropNames, excludedPropNames) { return object_1.filteredAssign(function (propName) { return ((!excludedPropNames || excludedPropNames.indexOf(propName) < 0) && ((propName.indexOf('data-') === 0) || (propName.indexOf('aria-') === 0) || (allowedPropNames.indexOf(propName) >= 0))); }, {}, props); } exports.getNativeProps = getNativeProps; /***/ }, /* 46 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _baseUrl = ''; /** Sets the current base url used for fetching images. */ function getResourceUrl(url) { return _baseUrl + url; } exports.getResourceUrl = getResourceUrl; /** Gets the current base url used for fetching images. */ function setBaseUrl(baseUrl) { _baseUrl = baseUrl; } exports.setBaseUrl = setBaseUrl; /***/ }, /* 47 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var KeyCodes_1 = __webpack_require__(33); var dom_1 = __webpack_require__(16); // Default to undefined so that we initialize on first read. var _isRTL; /** * Gets the rtl state of the page (returns true if in rtl.) */ function getRTL() { if (_isRTL === undefined) { var doc = dom_1.getDocument(); var win = dom_1.getWindow(); // tslint:disable-next-line:no-string-literal if (win && win['localStorage']) { var savedRTL = localStorage.getItem('isRTL'); if (savedRTL !== null) { _isRTL = savedRTL === '1'; } } if (_isRTL === undefined && doc) { _isRTL = doc.documentElement.getAttribute('dir') === 'rtl'; } if (_isRTL !== undefined) { setRTL(_isRTL, true); } else { throw new Error('getRTL was called in a server environment without setRTL being called first. ' + 'Call setRTL to set the correct direction first.'); } } return _isRTL; } exports.getRTL = getRTL; /** * Sets the rtl state of the page (by adjusting the dir attribute of the html element.) */ function setRTL(isRTL, avoidPersisting) { if (avoidPersisting === void 0) { avoidPersisting = false; } var doc = dom_1.getDocument(); if (doc) { doc.documentElement.setAttribute('dir', isRTL ? 'rtl' : 'ltr'); } var win = dom_1.getWindow(); // tslint:disable-next-line:no-string-literal if (win && win['localStorage'] && !avoidPersisting) { localStorage.setItem('isRTL', isRTL ? '1' : '0'); } _isRTL = isRTL; } exports.setRTL = setRTL; /** * Returns the given key, but flips right/left arrows if necessary. */ function getRTLSafeKeyCode(key) { if (getRTL()) { if (key === KeyCodes_1.KeyCodes.left) { key = KeyCodes_1.KeyCodes.right; } else if (key === KeyCodes_1.KeyCodes.right) { key = KeyCodes_1.KeyCodes.left; } } return key; } exports.getRTLSafeKeyCode = getRTLSafeKeyCode; /***/ }, /* 48 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); // Regex that finds { and } so they can be removed on a lookup for string format var FORMAT_ARGS_REGEX = /[\{\}]/g; // Regex that finds {#} so it can be replaced by the arguments in string format var FORMAT_REGEX = /\{\d+\}/g; /** * String Format is like C# string format. * Usage Example: "hello {0}!".format("mike") will return "hello mike!" * Calling format on a string with less arguments than specified in the format is invalid * Example "I love {0} every {1}".format("CXP") will result in a Debug Exception. */ function format(s) { 'use strict'; var values = []; for (var _i = 1; _i < arguments.length; _i++) { values[_i - 1] = arguments[_i]; } var args = values; // Callback match function function replace_func(match) { // looks up in the args var replacement = args[match.replace(FORMAT_ARGS_REGEX, '')]; // catches undefined in nondebug and null in debug and nondebug if (replacement === null || replacement === undefined) { replacement = ''; } return replacement; } return (s.replace(FORMAT_REGEX, replace_func)); } exports.format = format; /***/ }, /* 49 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _emptyObject = { empty: true }; var _dictionary = {}; function memoize(target, key, descriptor) { // We bind to "null" to prevent people from inadvertently pulling values from "this", // rather than passing them in as input values which can be memoized. var fn = memoizeFunction(descriptor.value.bind(null)); return { configurable: true, get: function () { return fn; } }; } exports.memoize = memoize; /** * Memoizes a function; when you pass in the same parameters multiple times, it returns a cached result. * Be careful when passing in objects, you need to pass in the same INSTANCE for caching to work. Otherwise * it will grow the cache unnecessarily. * * By default, the cache will reset after 100 permutations, to avoid abuse cases where the function is * unintendedly called with unique objects. Without a reset, the cache could grow infinitely, so we safeguard * by resetting. To override this behavior, pass a value of 0 to the maxCacheSize parameter. * * @param cb - The function to memoize. * @param maxCacheSize - Max results to cache. If the cache exceeds this value, it will reset on the next call. * @returns A memoized version of the function. */ function memoizeFunction(cb, maxCacheSize) { if (maxCacheSize === void 0) { maxCacheSize = 100; } var rootNode; var cacheSize = 0; // tslint:disable-next-line:no-function-expression return function memoizedFunction() { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } var currentNode = rootNode; if (rootNode === undefined || (maxCacheSize > 0 && cacheSize > maxCacheSize)) { rootNode = _createNode(); cacheSize = 0; } currentNode = rootNode; // Traverse the tree until we find the match. for (var i = 0; i < args.length; i++) { var arg = _normalizeArg(args[i]); if (!currentNode.map.has(arg)) { currentNode.map.set(arg, _createNode()); } currentNode = currentNode.map.get(arg); } if (!currentNode.hasOwnProperty('value')) { currentNode.value = cb.apply(void 0, args); cacheSize++; } return currentNode.value; }; } exports.memoizeFunction = memoizeFunction; function _normalizeArg(val) { if (!val) { return _emptyObject; } else if (typeof val === 'object') { return val; } else if (!_dictionary[val]) { _dictionary[val] = { val: val }; } return _dictionary[val]; } function _createNode() { return { map: new WeakMap() }; } /***/ }, /* 50 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(51)); /***/ }, /* 51 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(52)); __export(__webpack_require__(53)); /***/ }, /* 52 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var FocusZone_Props_1 = __webpack_require__(53); var Utilities_1 = __webpack_require__(10); var IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable'; var IS_ENTER_DISABLED_ATTRIBUTE = 'data-disable-click-on-enter'; var FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id'; var TABINDEX = 'tabindex'; var _allInstances = {}; var ALLOWED_INPUT_TYPES = ['text', 'number', 'password', 'email', 'tel', 'url', 'search']; var FocusZone = (function (_super) { __extends(FocusZone, _super); function FocusZone(props) { var _this = _super.call(this, props) || this; _this._warnDeprecations({ rootProps: null }); _this._id = Utilities_1.getId('FocusZone'); _allInstances[_this._id] = _this; _this._focusAlignment = { left: 0, top: 0 }; return _this; } FocusZone.prototype.componentDidMount = function () { var windowElement = this.refs.root.ownerDocument.defaultView; var parentElement = Utilities_1.getParent(this.refs.root); while (parentElement && parentElement !== document.body && parentElement.nodeType === 1) { if (Utilities_1.isElementFocusZone(parentElement)) { this._isInnerZone = true; break; } parentElement = Utilities_1.getParent(parentElement); } this._events.on(windowElement, 'keydown', this._onKeyDownCapture, true); // Assign initial tab indexes so that we can set initial focus as appropriate. this._updateTabIndexes(); if (this.props.defaultActiveElement) { this._activeElement = Utilities_1.getDocument().querySelector(this.props.defaultActiveElement); this.focus(); } }; FocusZone.prototype.componentWillUnmount = function () { delete _allInstances[this._id]; }; FocusZone.prototype.render = function () { var _a = this.props, rootProps = _a.rootProps, ariaDescribedBy = _a.ariaDescribedBy, ariaLabelledBy = _a.ariaLabelledBy, className = _a.className; var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties); return (React.createElement("div", __assign({}, divProps, rootProps, { className: Utilities_1.css('ms-FocusZone', className), ref: 'root', "data-focuszone-id": this._id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onKeyDown: this._onKeyDown, onFocus: this._onFocus }, { onMouseDownCapture: this._onMouseDown }), this.props.children)); }; /** * Sets focus to the first tabbable item in the zone. * @returns True if focus could be set to an active element, false if no operation was taken. */ FocusZone.prototype.focus = function () { if (this._activeElement && Utilities_1.elementContains(this.refs.root, this._activeElement)) { this._activeElement.focus(); return true; } else { var firstChild = this.refs.root.firstChild; return this.focusElement(Utilities_1.getNextElement(this.refs.root, firstChild, true)); } }; /** * Sets focus to a specific child element within the zone. This can be used in conjunction with * onBeforeFocus to created delayed focus scenarios (like animate the scroll position to the correct * location and then focus.) * @param {HTMLElement} element The child element within the zone to focus. * @returns True if focus could be set to an active element, false if no operation was taken. */ FocusZone.prototype.focusElement = function (element) { var onBeforeFocus = this.props.onBeforeFocus; if (onBeforeFocus && !onBeforeFocus(element)) { return false; } if (element) { if (this._activeElement) { this._activeElement.tabIndex = -1; } this._activeElement = element; if (element) { if (!this._focusAlignment) { this._setFocusAlignment(element, true, true); } this._activeElement.tabIndex = 0; element.focus(); return true; } } return false; }; FocusZone.prototype._onFocus = function (ev) { var onActiveElementChanged = this.props.onActiveElementChanged; if (this._isImmediateDescendantOfZone(ev.target)) { this._activeElement = ev.target; this._setFocusAlignment(this._activeElement); } else { var parentElement = ev.target; while (parentElement && parentElement !== this.refs.root) { if (Utilities_1.isElementTabbable(parentElement) && this._isImmediateDescendantOfZone(parentElement)) { this._activeElement = parentElement; break; } parentElement = Utilities_1.getParent(parentElement); } } if (onActiveElementChanged) { onActiveElementChanged(this._activeElement, ev); } }; /** * Handle global tab presses so that we can patch tabindexes on the fly. */ FocusZone.prototype._onKeyDownCapture = function (ev) { if (ev.which === Utilities_1.KeyCodes.tab) { this._updateTabIndexes(); } }; FocusZone.prototype._onMouseDown = function (ev) { var disabled = this.props.disabled; if (disabled) { return; } var target = ev.target; var path = []; while (target && target !== this.refs.root) { path.push(target); target = Utilities_1.getParent(target); } while (path.length) { target = path.pop(); if (Utilities_1.isElementFocusZone(target)) { break; } else if (target && Utilities_1.isElementTabbable(target)) { target.tabIndex = 0; this._setFocusAlignment(target, true, true); } } }; /** * Handle the keystrokes. */ FocusZone.prototype._onKeyDown = function (ev) { var _a = this.props, direction = _a.direction, disabled = _a.disabled, isInnerZoneKeystroke = _a.isInnerZoneKeystroke; if (disabled) { return; } if (this.props.onKeyDown) { this.props.onKeyDown(ev); if (ev.isDefaultPrevented()) { return; } } if (isInnerZoneKeystroke && this._isImmediateDescendantOfZone(ev.target) && isInnerZoneKeystroke(ev)) { // Try to focus var innerZone = this._getFirstInnerZone(); if (!innerZone || !innerZone.focus()) { return; } } else if (ev.altKey) { return; } else { switch (ev.which) { case Utilities_1.KeyCodes.space: if (this._tryInvokeClickForFocusable(ev.target)) { break; } return; case Utilities_1.KeyCodes.left: if (direction !== FocusZone_Props_1.FocusZoneDirection.vertical && this._moveFocusLeft()) { break; } return; case Utilities_1.KeyCodes.right: if (direction !== FocusZone_Props_1.FocusZoneDirection.vertical && this._moveFocusRight()) { break; } return; case Utilities_1.KeyCodes.up: if (direction !== FocusZone_Props_1.FocusZoneDirection.horizontal && this._moveFocusUp()) { break; } return; case Utilities_1.KeyCodes.down: if (direction !== FocusZone_Props_1.FocusZoneDirection.horizontal && this._moveFocusDown()) { break; } return; case Utilities_1.KeyCodes.home: var firstChild = this.refs.root.firstChild; if (this.focusElement(Utilities_1.getNextElement(this.refs.root, firstChild, true))) { break; } return; case Utilities_1.KeyCodes.end: var lastChild = this.refs.root.lastChild; if (this.focusElement(Utilities_1.getPreviousElement(this.refs.root, lastChild, true, true, true))) { break; } return; case Utilities_1.KeyCodes.enter: if (this._tryInvokeClickForFocusable(ev.target)) { break; } return; default: return; } } ev.preventDefault(); ev.stopPropagation(); }; /** * Walk up the dom try to find a focusable element. */ FocusZone.prototype._tryInvokeClickForFocusable = function (target) { do { if (target.tagName === 'BUTTON' || target.tagName === 'A' || target.tagName === 'INPUT') { return false; } if (this._isImmediateDescendantOfZone(target) && target.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' && target.getAttribute(IS_ENTER_DISABLED_ATTRIBUTE) !== 'true') { Utilities_1.EventGroup.raise(target, 'click', null, true); return true; } target = Utilities_1.getParent(target); } while (target !== this.refs.root); return false; }; /** * Traverse to find first child zone. */ FocusZone.prototype._getFirstInnerZone = function (rootElement) { rootElement = rootElement || this._activeElement || this.refs.root; var child = rootElement.firstElementChild; while (child) { if (Utilities_1.isElementFocusZone(child)) { return _allInstances[child.getAttribute(FOCUSZONE_ID_ATTRIBUTE)]; } var match = this._getFirstInnerZone(child); if (match) { return match; } child = child.nextElementSibling; } return null; }; FocusZone.prototype._moveFocus = function (isForward, getDistanceFromCenter, ev) { var element = this._activeElement; var candidateDistance = -1; var candidateElement; var changedFocus = false; var isBidirectional = this.props.direction === FocusZone_Props_1.FocusZoneDirection.bidirectional; if (!element) { return false; } if (this._isElementInput(element)) { if (!this._shouldInputLoseFocus(element, isForward)) { return false; } } var activeRect = isBidirectional ? element.getBoundingClientRect() : null; do { element = isForward ? Utilities_1.getNextElement(this.refs.root, element) : Utilities_1.getPreviousElement(this.refs.root, element); if (isBidirectional) { if (element) { var targetRect = element.getBoundingClientRect(); var elementDistance = getDistanceFromCenter(activeRect, targetRect); if (elementDistance > -1 && (candidateDistance === -1 || elementDistance < candidateDistance)) { candidateDistance = elementDistance; candidateElement = element; } if (candidateDistance >= 0 && elementDistance < 0) { break; } } } else { candidateElement = element; break; } } while (element); // Focus the closest candidate if (candidateElement && candidateElement !== this._activeElement) { changedFocus = true; this.focusElement(candidateElement); } else if (this.props.isCircularNavigation) { if (isForward) { return this.focusElement(Utilities_1.getNextElement(this.refs.root, this.refs.root.firstElementChild, true)); } else { return this.focusElement(Utilities_1.getPreviousElement(this.refs.root, this.refs.root.lastElementChild, true, true, true)); } } return changedFocus; }; FocusZone.prototype._moveFocusDown = function () { var targetTop = -1; var leftAlignment = this._focusAlignment.left; if (this._moveFocus(true, function (activeRect, targetRect) { var distance = -1; // ClientRect values can be floats that differ by very small fractions of a decimal. // If the difference between top and bottom are within a pixel then we should treat // them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent, // but without Math.Floor they will be handled incorrectly. var targetRectTop = Math.floor(targetRect.top); var activeRectBottom = Math.floor(activeRect.bottom); if ((targetTop === -1 && targetRectTop >= activeRectBottom) || (targetRectTop === targetTop)) { targetTop = targetRectTop; if (leftAlignment >= targetRect.left && leftAlignment <= (targetRect.left + targetRect.width)) { distance = 0; } else { distance = Math.abs((targetRect.left + (targetRect.width / 2)) - leftAlignment); } } return distance; })) { this._setFocusAlignment(this._activeElement, false, true); return true; } return false; }; FocusZone.prototype._moveFocusUp = function () { var targetTop = -1; var leftAlignment = this._focusAlignment.left; if (this._moveFocus(false, function (activeRect, targetRect) { var distance = -1; // ClientRect values can be floats that differ by very small fractions of a decimal. // If the difference between top and bottom are within a pixel then we should treat // them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent, // but without Math.Floor they will be handled incorrectly. var targetRectBottom = Math.floor(targetRect.bottom); var targetRectTop = Math.floor(targetRect.top); var activeRectTop = Math.floor(activeRect.top); if ((targetTop === -1 && targetRectBottom <= activeRectTop) || (targetRectTop === targetTop)) { targetTop = targetRectTop; if (leftAlignment >= targetRect.left && leftAlignment <= (targetRect.left + targetRect.width)) { distance = 0; } else { distance = Math.abs((targetRect.left + (targetRect.width / 2)) - leftAlignment); } } return distance; })) { this._setFocusAlignment(this._activeElement, false, true); return true; } return false; }; FocusZone.prototype._moveFocusLeft = function () { var _this = this; var targetTop = -1; var topAlignment = this._focusAlignment.top; if (this._moveFocus(Utilities_1.getRTL(), function (activeRect, targetRect) { var distance = -1; if ((targetTop === -1 && targetRect.right <= activeRect.right && (_this.props.direction === FocusZone_Props_1.FocusZoneDirection.horizontal || targetRect.top === activeRect.top)) || (targetRect.top === targetTop)) { targetTop = targetRect.top; distance = Math.abs((targetRect.top + (targetRect.height / 2)) - topAlignment); } return distance; })) { this._setFocusAlignment(this._activeElement, true, false); return true; } return false; }; FocusZone.prototype._moveFocusRight = function () { var _this = this; var targetTop = -1; var topAlignment = this._focusAlignment.top; if (this._moveFocus(!Utilities_1.getRTL(), function (activeRect, targetRect) { var distance = -1; if ((targetTop === -1 && targetRect.left >= activeRect.left && (_this.props.direction === FocusZone_Props_1.FocusZoneDirection.horizontal || targetRect.top === activeRect.top)) || (targetRect.top === targetTop)) { targetTop = targetRect.top; distance = Math.abs((targetRect.top + (targetRect.height / 2)) - topAlignment); } return distance; })) { this._setFocusAlignment(this._activeElement, true, false); return true; } return false; }; FocusZone.prototype._setFocusAlignment = function (element, isHorizontal, isVertical) { if (this.props.direction === FocusZone_Props_1.FocusZoneDirection.bidirectional && (!this._focusAlignment || isHorizontal || isVertical)) { var rect = element.getBoundingClientRect(); var left = rect.left + (rect.width / 2); var top_1 = rect.top + (rect.height / 2); if (!this._focusAlignment) { this._focusAlignment = { left: left, top: top_1 }; } if (isHorizontal) { this._focusAlignment.left = left; } if (isVertical) { this._focusAlignment.top = top_1; } } }; FocusZone.prototype._isImmediateDescendantOfZone = function (element) { var parentElement = Utilities_1.getParent(element); while (parentElement && parentElement !== this.refs.root && parentElement !== document.body) { if (Utilities_1.isElementFocusZone(parentElement)) { return false; } parentElement = Utilities_1.getParent(parentElement); } return true; }; FocusZone.prototype._updateTabIndexes = function (element) { if (!element) { element = this.refs.root; if (this._activeElement && !Utilities_1.elementContains(element, this._activeElement)) { this._activeElement = null; } } var childNodes = element.children; for (var childIndex = 0; childNodes && childIndex < childNodes.length; childIndex++) { var child = childNodes[childIndex]; if (!Utilities_1.isElementFocusZone(child)) { // If the item is explicitly set to not be focusable then TABINDEX needs to be set to -1. if (child.getAttribute && child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'false') { child.setAttribute(TABINDEX, '-1'); } if (Utilities_1.isElementTabbable(child)) { if (this.props.disabled) { child.setAttribute(TABINDEX, '-1'); } else if (!this._isInnerZone && (!this._activeElement || this._activeElement === child)) { this._activeElement = child; if (child.getAttribute(TABINDEX) !== '0') { child.setAttribute(TABINDEX, '0'); } } else if (child.getAttribute(TABINDEX) !== '-1') { child.setAttribute(TABINDEX, '-1'); } } else if (child.tagName === 'svg' && child.getAttribute('focusable') !== 'false') { // Disgusting IE hack. Sad face. child.setAttribute('focusable', 'false'); } this._updateTabIndexes(child); } } }; FocusZone.prototype._isElementInput = function (element) { if (element && element.tagName && element.tagName.toLowerCase() === 'input') { return true; } return false; }; FocusZone.prototype._shouldInputLoseFocus = function (element, isForward) { if (element && element.type && ALLOWED_INPUT_TYPES.indexOf(element.type.toLowerCase()) > -1) { var selectionStart = element.selectionStart; var selectionEnd = element.selectionEnd; var isRangeSelected = selectionStart !== selectionEnd; var inputValue = element.value; // We shouldn't lose focus in the following cases: // 1. There is range selected. // 2. When selection start is larger than 0 and it is backward. // 3. when selection start is not the end of lenght and it is forward. if (isRangeSelected || (selectionStart > 0 && !isForward) || (selectionStart !== inputValue.length && isForward)) { return false; } } return true; }; return FocusZone; }(Utilities_1.BaseComponent)); FocusZone.defaultProps = { isCircularNavigation: false, direction: FocusZone_Props_1.FocusZoneDirection.bidirectional }; __decorate([ Utilities_1.autobind ], FocusZone.prototype, "_onFocus", null); __decorate([ Utilities_1.autobind ], FocusZone.prototype, "_onMouseDown", null); __decorate([ Utilities_1.autobind ], FocusZone.prototype, "_onKeyDown", null); exports.FocusZone = FocusZone; /***/ }, /* 53 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var FocusZoneDirection; (function (FocusZoneDirection) { /** Only react to up/down arrows. */ FocusZoneDirection[FocusZoneDirection["vertical"] = 0] = "vertical"; /** Only react to left/right arrows. */ FocusZoneDirection[FocusZoneDirection["horizontal"] = 1] = "horizontal"; /** React to all arrows. */ FocusZoneDirection[FocusZoneDirection["bidirectional"] = 2] = "bidirectional"; })(FocusZoneDirection = exports.FocusZoneDirection || (exports.FocusZoneDirection = {})); /***/ }, /* 54 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(55)); /***/ }, /* 55 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(56)); __export(__webpack_require__(57)); /***/ }, /* 56 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var ContextualMenu_Props_1 = __webpack_require__(57); var DirectionalHint_1 = __webpack_require__(58); var FocusZone_1 = __webpack_require__(50); var Utilities_1 = __webpack_require__(10); var Callout_1 = __webpack_require__(59); var Icon_1 = __webpack_require__(141); var stylesImport = __webpack_require__(149); var styles = stylesImport; var ContextualMenuType; (function (ContextualMenuType) { ContextualMenuType[ContextualMenuType["vertical"] = 0] = "vertical"; ContextualMenuType[ContextualMenuType["horizontal"] = 1] = "horizontal"; })(ContextualMenuType || (ContextualMenuType = {})); var HorizontalAlignmentHint; (function (HorizontalAlignmentHint) { HorizontalAlignmentHint[HorizontalAlignmentHint["auto"] = 0] = "auto"; HorizontalAlignmentHint[HorizontalAlignmentHint["left"] = 1] = "left"; HorizontalAlignmentHint[HorizontalAlignmentHint["center"] = 2] = "center"; HorizontalAlignmentHint[HorizontalAlignmentHint["right"] = 3] = "right"; })(HorizontalAlignmentHint || (HorizontalAlignmentHint = {})); var VerticalAlignmentHint; (function (VerticalAlignmentHint) { VerticalAlignmentHint[VerticalAlignmentHint["top"] = 0] = "top"; VerticalAlignmentHint[VerticalAlignmentHint["center"] = 1] = "center"; VerticalAlignmentHint[VerticalAlignmentHint["bottom"] = 2] = "bottom"; })(VerticalAlignmentHint || (VerticalAlignmentHint = {})); function hasSubmenuItems(item) { var submenuItems = getSubmenuItems(item); return !!(submenuItems && submenuItems.length); } exports.hasSubmenuItems = hasSubmenuItems; function getSubmenuItems(item) { return item.subMenuProps ? item.subMenuProps.items : item.items; } exports.getSubmenuItems = getSubmenuItems; var ContextualMenu = (function (_super) { __extends(ContextualMenu, _super); function ContextualMenu(props) { var _this = _super.call(this, props) || this; _this.state = { contextualMenuItems: null, subMenuId: Utilities_1.getId('ContextualMenu') }; _this._isFocusingPreviousElement = false; _this._enterTimerId = 0; return _this; } ContextualMenu.prototype.dismiss = function (ev, dismissAll) { var onDismiss = this.props.onDismiss; if (onDismiss) { onDismiss(ev, dismissAll); } }; ContextualMenu.prototype.componentWillUpdate = function (newProps) { if (newProps.targetElement !== this.props.targetElement || newProps.target !== this.props.target) { var newTarget = newProps.targetElement ? newProps.targetElement : newProps.target; this._setTargetWindowAndElement(newTarget); } }; // Invoked once, both on the client and server, immediately before the initial rendering occurs. ContextualMenu.prototype.componentWillMount = function () { var target = this.props.targetElement ? this.props.targetElement : this.props.target; this._setTargetWindowAndElement(target); this._previousActiveElement = this._targetWindow ? this._targetWindow.document.activeElement : null; }; // Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. ContextualMenu.prototype.componentDidMount = function () { this._events.on(this._targetWindow, 'resize', this.dismiss); if (this.props.onMenuOpened) { this.props.onMenuOpened(this.props); } }; // Invoked immediately before a component is unmounted from the DOM. ContextualMenu.prototype.componentWillUnmount = function () { var _this = this; if (this._isFocusingPreviousElement && this._previousActiveElement) { // This slight delay is required so that we can unwind the stack, let react try to mess with focus, and then // apply the correct focus. Without the setTimeout, we end up focusing the correct thing, and then React wants // to reset the focus back to the thing it thinks should have been focused. setTimeout(function () { return _this._previousActiveElement.focus(); }, 0); } this._events.dispose(); this._async.dispose(); }; ContextualMenu.prototype.render = function () { var _this = this; var _a = this.props, className = _a.className, items = _a.items, isBeakVisible = _a.isBeakVisible, labelElementId = _a.labelElementId, targetElement = _a.targetElement, id = _a.id, targetPoint = _a.targetPoint, useTargetPoint = _a.useTargetPoint, beakWidth = _a.beakWidth, directionalHint = _a.directionalHint, gapSpace = _a.gapSpace, coverTarget = _a.coverTarget, ariaLabel = _a.ariaLabel, doNotLayer = _a.doNotLayer, arrowDirection = _a.arrowDirection, target = _a.target, bounds = _a.bounds, useTargetWidth = _a.useTargetWidth, directionalHintFixed = _a.directionalHintFixed, shouldFocusOnMount = _a.shouldFocusOnMount, calloutProps = _a.calloutProps; var hasIcons = !!(items && items.some(function (item) { return !!item.icon || !!item.iconProps; })); var hasCheckmarks = !!(items && items.some(function (item) { return !!item.canCheck; })); var submenuProps = this.state.expandedMenuItemKey ? this._getSubmenuProps() : null; /** * When useTargetWidth is true, get the width of the target element and apply it for the context menu container */ var contextMenuStyle; var targetAsHtmlElement = this._target; if (useTargetWidth && targetAsHtmlElement && targetAsHtmlElement.offsetWidth) { var contextMenuWidth = targetAsHtmlElement.offsetWidth; contextMenuStyle = { width: contextMenuWidth }; } // The menu should only return if items were provided, if no items were provided then it should not appear. if (items && items.length > 0) { return (React.createElement(Callout_1.Callout, __assign({}, calloutProps, { target: target, targetElement: targetElement, targetPoint: targetPoint, useTargetPoint: useTargetPoint, isBeakVisible: isBeakVisible, beakWidth: beakWidth, directionalHint: directionalHint, gapSpace: gapSpace, coverTarget: coverTarget, doNotLayer: doNotLayer, className: 'ms-ContextualMenu-Callout', setInitialFocus: shouldFocusOnMount, onDismiss: this.props.onDismiss, bounds: bounds, directionalHintFixed: directionalHintFixed }), React.createElement("div", { style: contextMenuStyle, ref: function (host) { return _this._host = host; }, id: id, className: Utilities_1.css('ms-ContextualMenu-container', className) }, (items && items.length) ? (React.createElement(FocusZone_1.FocusZone, { className: Utilities_1.css('ms-ContextualMenu is-open', styles.root), direction: arrowDirection, ref: function (focusZone) { return _this._focusZone = focusZone; }, isCircularNavigation: true }, React.createElement("ul", { role: 'menu', "aria-label": ariaLabel, "aria-labelledby": labelElementId, className: Utilities_1.css('ms-ContextualMenu-list is-open', styles.list), onKeyDown: this._onKeyDown }, items.map(function (item, index) { return (_this._renderMenuItem(item, index, hasCheckmarks, hasIcons)); })))) : (null), submenuProps && React.createElement(ContextualMenu, __assign({}, submenuProps))))); } else { return null; } }; ContextualMenu.prototype._renderMenuItem = function (item, index, hasCheckmarks, hasIcons) { var renderedItems = []; if (item.name === '-') { item.itemType = ContextualMenu_Props_1.ContextualMenuItemType.Divider; } switch (item.itemType) { case ContextualMenu_Props_1.ContextualMenuItemType.Divider: renderedItems.push(this._renderSeparator(index, item.className)); break; case ContextualMenu_Props_1.ContextualMenuItemType.Header: renderedItems.push(this._renderSeparator(index)); var headerItem = this._renderHeaderMenuItem(item, index, hasCheckmarks, hasIcons); renderedItems.push(this._renderListItem(headerItem, item.key || index, item.className, item.title)); break; default: var menuItem = this._renderNormalItem(item, index, hasCheckmarks, hasIcons); renderedItems.push(this._renderListItem(menuItem, item.key || index, item.className, item.title)); break; } return renderedItems; }; ContextualMenu.prototype._renderListItem = function (content, key, className, title) { return React.createElement("li", { role: 'presentation', title: title, key: key, className: Utilities_1.css('ms-ContextualMenu-item', styles.item, className) }, content); }; ContextualMenu.prototype._renderSeparator = function (index, className) { if (index > 0) { return React.createElement("li", { role: 'separator', key: 'separator-' + index, className: Utilities_1.css('ms-ContextualMenu-divider', styles.divider, className) }); } return null; }; ContextualMenu.prototype._renderNormalItem = function (item, index, hasCheckmarks, hasIcons) { if (item.onRender) { return [item.onRender(item)]; } if (item.href) { return this._renderAnchorMenuItem(item, index, hasCheckmarks, hasIcons); } return this._renderButtonItem(item, index, hasCheckmarks, hasIcons); }; ContextualMenu.prototype._renderHeaderMenuItem = function (item, index, hasCheckmarks, hasIcons) { return (React.createElement("div", { className: Utilities_1.css('ms-ContextualMenu-header', styles.header), style: item.style }, this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons))); }; ContextualMenu.prototype._renderAnchorMenuItem = function (item, index, hasCheckmarks, hasIcons) { return (React.createElement("div", null, React.createElement("a", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.anchorProperties), { href: item.href, className: Utilities_1.css('ms-ContextualMenu-link', styles.link, (item.isDisabled || item.disabled) && 'is-disabled'), role: 'menuitem', style: item.style, onClick: this._onAnchorClick.bind(this, item) }), this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons)))); }; ContextualMenu.prototype._renderButtonItem = function (item, index, hasCheckmarks, hasIcons) { var _this = this; var _a = this.state, expandedMenuItemKey = _a.expandedMenuItemKey, subMenuId = _a.subMenuId; var ariaLabel = ''; if (item.ariaLabel) { ariaLabel = item.ariaLabel; } else if (item.name) { ariaLabel = item.name; } var itemButtonProperties = { className: Utilities_1.css('ms-ContextualMenu-link', styles.link, (_b = {}, _b['is-expanded ' + styles.isExpanded] = (expandedMenuItemKey === item.key), _b)), onClick: this._onItemClick.bind(this, item), onKeyDown: hasSubmenuItems(item) ? this._onItemKeyDown.bind(this, item) : null, onMouseEnter: this._onItemMouseEnter.bind(this, item), onMouseLeave: this._onMouseLeave, onMouseDown: function (ev) { return _this._onItemMouseDown(item, ev); }, disabled: item.isDisabled || item.disabled, href: item.href, title: item.title, 'aria-label': ariaLabel, 'aria-haspopup': hasSubmenuItems(item) ? true : null, 'aria-owns': item.key === expandedMenuItemKey ? subMenuId : null, role: 'menuitem', style: item.style, }; return React.createElement('button', Utilities_1.assign({}, Utilities_1.getNativeProps(item, Utilities_1.buttonProperties), itemButtonProperties), this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons)); var _b; }; ContextualMenu.prototype._renderMenuItemChildren = function (item, index, hasCheckmarks, hasIcons) { var isItemChecked = item.isChecked || item.checked; return (React.createElement("div", { className: Utilities_1.css('ms-ContextualMenu-linkContent', styles.linkContent) }, (hasCheckmarks) ? (React.createElement(Icon_1.Icon, { iconName: isItemChecked ? 'CheckMark' : 'CustomIcon', className: Utilities_1.css('ms-ContextualMenu-icon', styles.icon), onClick: this._onItemClick.bind(this, item) })) : (null), (hasIcons) ? (this._renderIcon(item)) : (null), React.createElement("span", { className: Utilities_1.css('ms-ContextualMenu-itemText', styles.itemText) }, item.name), hasSubmenuItems(item) ? (React.createElement(Icon_1.Icon, __assign({ iconName: Utilities_1.getRTL() ? 'ChevronLeft' : 'ChevronRight' }, item.submenuIconProps, { className: Utilities_1.css('ms-ContextualMenu-submenuIcon', styles.submenuIcon, item.submenuIconProps ? item.submenuIconProps.className : '') }))) : (null))); }; ContextualMenu.prototype._renderIcon = function (item) { // Only present to allow continued use of item.icon which is deprecated. var iconProps = item.iconProps ? item.iconProps : { iconName: item.icon }; // Use the default icon color for the known icon names var iconColorClassName = iconProps.iconName === 'None' ? '' : ('ms-ContextualMenu-iconColor ' + styles.iconColor); var iconClassName = Utilities_1.css('ms-ContextualMenu-icon', styles.icon, iconColorClassName, iconProps.className); return React.createElement(Icon_1.Icon, __assign({}, iconProps, { className: iconClassName })); }; ContextualMenu.prototype._onKeyDown = function (ev) { var submenuCloseKey = Utilities_1.getRTL() ? Utilities_1.KeyCodes.right : Utilities_1.KeyCodes.left; if (ev.which === Utilities_1.KeyCodes.escape || ev.which === Utilities_1.KeyCodes.tab || (ev.which === submenuCloseKey && this.props.isSubMenu && this.props.arrowDirection === FocusZone_1.FocusZoneDirection.vertical)) { // When a user presses escape, we will try to refocus the previous focused element. this._isFocusingPreviousElement = true; ev.preventDefault(); ev.stopPropagation(); this.dismiss(ev); } }; ContextualMenu.prototype._onItemMouseEnter = function (item, ev) { var _this = this; var targetElement = ev.currentTarget; if (item.key !== this.state.expandedMenuItemKey) { if (hasSubmenuItems(item)) { this._enterTimerId = this._async.setTimeout(function () { return _this._onItemSubMenuExpand(item, targetElement); }, 500); } else { this._enterTimerId = this._async.setTimeout(function () { return _this._onSubMenuDismiss(ev); }, 500); } } }; ContextualMenu.prototype._onMouseLeave = function (ev) { this._async.clearTimeout(this._enterTimerId); }; ContextualMenu.prototype._onItemMouseDown = function (item, ev) { if (item.onMouseDown) { item.onMouseDown(item, ev); } }; ContextualMenu.prototype._onItemClick = function (item, ev) { var items = getSubmenuItems(item); if (!items || !items.length) { this._executeItemClick(item, ev); } else { if (item.key === this.state.expandedMenuItemKey) { this._onSubMenuDismiss(ev); } else { this._onItemSubMenuExpand(item, ev.currentTarget); } } ev.stopPropagation(); ev.preventDefault(); }; ContextualMenu.prototype._onAnchorClick = function (item, ev) { this._executeItemClick(item, ev); ev.stopPropagation(); }; ContextualMenu.prototype._executeItemClick = function (item, ev) { if (item.onClick) { item.onClick(ev, item); } else if (this.props.onItemClick) { this.props.onItemClick(ev, item); } this.dismiss(ev, true); }; ContextualMenu.prototype._onItemKeyDown = function (item, ev) { var openKey = Utilities_1.getRTL() ? Utilities_1.KeyCodes.left : Utilities_1.KeyCodes.right; if (ev.which === openKey) { this._onItemSubMenuExpand(item, ev.currentTarget); ev.preventDefault(); } }; ContextualMenu.prototype._onItemSubMenuExpand = function (item, target) { if (this.state.expandedMenuItemKey !== item.key) { if (this.state.expandedMenuItemKey) { this._onSubMenuDismiss(); } this.setState({ expandedMenuItemKey: item.key, submenuTarget: target }); } }; ContextualMenu.prototype._getSubmenuProps = function () { var _a = this.state, submenuTarget = _a.submenuTarget, expandedMenuItemKey = _a.expandedMenuItemKey; var item = this._findItemByKey(expandedMenuItemKey); var submenuProps = null; if (item) { submenuProps = { items: getSubmenuItems(item), target: submenuTarget, onDismiss: this._onSubMenuDismiss, isSubMenu: true, id: this.state.subMenuId, shouldFocusOnMount: true, directionalHint: Utilities_1.getRTL() ? DirectionalHint_1.DirectionalHint.leftTopEdge : DirectionalHint_1.DirectionalHint.rightTopEdge, className: this.props.className, gapSpace: 0 }; if (item.subMenuProps) { Utilities_1.assign(submenuProps, item.subMenuProps); } } return submenuProps; }; ContextualMenu.prototype._findItemByKey = function (key) { var items = this.props.items; for (var _i = 0, items_1 = items; _i < items_1.length; _i++) { var item = items_1[_i]; if (item.key && item.key === key) { return item; } } }; ContextualMenu.prototype._onSubMenuDismiss = function (ev, dismissAll) { if (dismissAll) { this.dismiss(ev, dismissAll); } else { this.setState({ dismissedMenuItemKey: this.state.expandedMenuItemKey, expandedMenuItemKey: null, submenuTarget: null }); } }; ContextualMenu.prototype._setTargetWindowAndElement = function (target) { if (target) { if (typeof target === 'string') { var currentDoc = Utilities_1.getDocument(); this._target = currentDoc ? currentDoc.querySelector(target) : null; this._targetWindow = Utilities_1.getWindow(); } else if (target.stopPropagation) { this._target = target; this._targetWindow = Utilities_1.getWindow(target.toElement); } else { var targetElement = target; this._target = target; this._targetWindow = Utilities_1.getWindow(targetElement); } } else { this._targetWindow = Utilities_1.getWindow(); } }; return ContextualMenu; }(Utilities_1.BaseComponent)); // The default ContextualMenu properities have no items and beak, the default submenu direction is right and top. ContextualMenu.defaultProps = { items: [], shouldFocusOnMount: true, isBeakVisible: false, gapSpace: 0, directionalHint: DirectionalHint_1.DirectionalHint.bottomAutoEdge, beakWidth: 16, arrowDirection: FocusZone_1.FocusZoneDirection.vertical, }; __decorate([ Utilities_1.autobind ], ContextualMenu.prototype, "dismiss", null); __decorate([ Utilities_1.autobind ], ContextualMenu.prototype, "_onKeyDown", null); __decorate([ Utilities_1.autobind ], ContextualMenu.prototype, "_onMouseLeave", null); __decorate([ Utilities_1.autobind ], ContextualMenu.prototype, "_onSubMenuDismiss", null); exports.ContextualMenu = ContextualMenu; /***/ }, /* 57 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var DirectionalHint_1 = __webpack_require__(58); exports.DirectionalHint = DirectionalHint_1.DirectionalHint; var ContextualMenuItemType; (function (ContextualMenuItemType) { ContextualMenuItemType[ContextualMenuItemType["Normal"] = 0] = "Normal"; ContextualMenuItemType[ContextualMenuItemType["Divider"] = 1] = "Divider"; ContextualMenuItemType[ContextualMenuItemType["Header"] = 2] = "Header"; })(ContextualMenuItemType = exports.ContextualMenuItemType || (exports.ContextualMenuItemType = {})); /***/ }, /* 58 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var DirectionalHint; (function (DirectionalHint) { /** * Appear above the target element, with the left edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["topLeftEdge"] = 0] = "topLeftEdge"; /** * Appear above the target element, with the centers of the callout and target aligning. */ DirectionalHint[DirectionalHint["topCenter"] = 1] = "topCenter"; /** * Appear above the target element, with the right edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["topRightEdge"] = 2] = "topRightEdge"; /** * Appear above the target element, aligning with the target element such that the callout tends toward the center of the screen. */ DirectionalHint[DirectionalHint["topAutoEdge"] = 3] = "topAutoEdge"; /** * Appear below the target element, with the left edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["bottomLeftEdge"] = 4] = "bottomLeftEdge"; /** * Appear below the target element, with the centers of the callout and target aligning. */ DirectionalHint[DirectionalHint["bottomCenter"] = 5] = "bottomCenter"; /** * Appear below the target element, with the right edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["bottomRightEdge"] = 6] = "bottomRightEdge"; /** * Appear below the target element, aligning with the target element such that the callout tends toward the center of the screen. */ DirectionalHint[DirectionalHint["bottomAutoEdge"] = 7] = "bottomAutoEdge"; /** * Appear to the left of the target element, with the top edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["leftTopEdge"] = 8] = "leftTopEdge"; /** * Appear to the left of the target element, with the centers of the callout and target aligning. */ DirectionalHint[DirectionalHint["leftCenter"] = 9] = "leftCenter"; /** * Appear to the left of the target element, with the bottom edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["leftBottomEdge"] = 10] = "leftBottomEdge"; /** * Appear to the right of the target element, with the top edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["rightTopEdge"] = 11] = "rightTopEdge"; /** * Appear to the right of the target element, with the centers of the callout and target aligning. */ DirectionalHint[DirectionalHint["rightCenter"] = 12] = "rightCenter"; /** * Appear to the right of the target element, with the bottom edges of the callout and target aligning. */ DirectionalHint[DirectionalHint["rightBottomEdge"] = 13] = "rightBottomEdge"; })(DirectionalHint = exports.DirectionalHint || (exports.DirectionalHint = {})); /***/ }, /* 59 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(60)); /***/ }, /* 60 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(61)); __export(__webpack_require__(58)); /***/ }, /* 61 */ /***/ 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 }); /* tslint:disable:no-unused-variable */ var React = __webpack_require__(2); /* tslint:enable:no-unused-variable */ var Utilities_1 = __webpack_require__(10); var CalloutContent_1 = __webpack_require__(62); var Layer_1 = __webpack_require__(132); var Callout = (function (_super) { __extends(Callout, _super); function Callout(props) { return _super.call(this, props) || this; } Callout.prototype.render = function () { var content = (React.createElement(CalloutContent_1.CalloutContent, __assign({}, this.props))); return this.props.doNotLayer ? content : (React.createElement(Layer_1.Layer, null, content)); }; return Callout; }(Utilities_1.BaseComponent)); exports.Callout = Callout; /***/ }, /* 62 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable:no-unused-variable */ var React = __webpack_require__(2); var DirectionalHint_1 = __webpack_require__(58); var Utilities_1 = __webpack_require__(10); var positioning_1 = __webpack_require__(63); var Popup_1 = __webpack_require__(64); var stylesImport = __webpack_require__(67); var Styling_1 = __webpack_require__(68); var styles = stylesImport; var BEAK_ORIGIN_POSITION = { top: 0, left: 0 }; var OFF_SCREEN_STYLE = { opacity: 0 }; var BORDER_WIDTH = 1; var CalloutContent = (function (_super) { __extends(CalloutContent, _super); function CalloutContent(props) { var _this = _super.call(this, props) || this; _this._warnDeprecations({ 'beakStyle': 'beakWidth' }); _this._didSetInitialFocus = false; _this.state = { positions: null, slideDirectionalClassName: null, calloutElementRect: null }; _this._positionAttempts = 0; return _this; } CalloutContent.prototype.componentDidUpdate = function () { this._setInitialFocus(); this._updatePosition(); }; CalloutContent.prototype.componentWillMount = function () { var target = this.props.targetElement ? this.props.targetElement : this.props.target; this._setTargetWindowAndElement(target); }; CalloutContent.prototype.componentWillUpdate = function (newProps) { if (newProps.targetElement !== this.props.targetElement || newProps.target !== this.props.target) { var newTarget = newProps.targetElement ? newProps.targetElement : newProps.target; this._maxHeight = undefined; this._setTargetWindowAndElement(newTarget); } if (newProps.gapSpace !== this.props.gapSpace || this.props.beakWidth !== newProps.beakWidth) { this._maxHeight = undefined; } }; CalloutContent.prototype.componentDidMount = function () { this._onComponentDidMount(); }; CalloutContent.prototype.render = function () { // If there is no target window then we are likely in server side rendering and we should not render anything. if (!this._targetWindow) { return null; } var _a = this.props, role = _a.role, ariaLabel = _a.ariaLabel, ariaDescribedBy = _a.ariaDescribedBy, ariaLabelledBy = _a.ariaLabelledBy, className = _a.className, target = _a.target, targetElement = _a.targetElement, isBeakVisible = _a.isBeakVisible, beakStyle = _a.beakStyle, children = _a.children, beakWidth = _a.beakWidth, backgroundColor = _a.backgroundColor; var positions = this.state.positions; var beakStyleWidth = beakWidth; // This is here to support the old way of setting the beak size until version 1.0.0. // beakStyle is now deprecated and will be be removed at version 1.0.0 if (beakStyle === 'ms-Callout-smallbeak') { beakStyleWidth = 16; } var beakReactStyle = { top: positions && positions.beakPosition ? positions.beakPosition.top : BEAK_ORIGIN_POSITION.top, left: positions && positions.beakPosition ? positions.beakPosition.left : BEAK_ORIGIN_POSITION.left, height: beakStyleWidth, width: beakStyleWidth, backgroundColor: backgroundColor, }; var directionalClassName = (positions && positions.directionalClassName) ? Styling_1.AnimationClassNames[positions.directionalClassName] : ''; var contentMaxHeight = this._getMaxHeight(); var beakVisible = isBeakVisible && (!!targetElement || !!target); var content = (React.createElement("div", { ref: this._resolveRef('_hostElement'), className: Utilities_1.css('ms-Callout-container', styles.container) }, React.createElement("div", { className: Utilities_1.css('ms-Callout', styles.root, className, directionalClassName), style: positions ? positions.calloutPosition : OFF_SCREEN_STYLE, ref: this._resolveRef('_calloutElement') }, beakVisible && (React.createElement("div", { className: Utilities_1.css('ms-Callout-beak', styles.beak), style: beakReactStyle })), beakVisible && (React.createElement("div", { className: Utilities_1.css('ms-Callout-beakCurtain', styles.beakCurtain) })), React.createElement(Popup_1.Popup, { role: role, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, ariaLabelledBy: ariaLabelledBy, className: Utilities_1.css('ms-Callout-main', styles.main), onDismiss: this.dismiss, shouldRestoreFocus: true, style: { maxHeight: contentMaxHeight, backgroundColor: backgroundColor } }, children)))); return content; }; CalloutContent.prototype.dismiss = function (ev) { var onDismiss = this.props.onDismiss; if (onDismiss) { onDismiss(ev); } }; CalloutContent.prototype._dismissOnScroll = function (ev) { var preventDismissOnScroll = this.props.preventDismissOnScroll; if (this.state.positions && !preventDismissOnScroll) { this._dismissOnLostFocus(ev); } }; CalloutContent.prototype._dismissOnLostFocus = function (ev) { var target = ev.target; var clickedOutsideCallout = this._hostElement && !Utilities_1.elementContains(this._hostElement, target); if ((!this._target && clickedOutsideCallout) || ev.target !== this._targetWindow && clickedOutsideCallout && (this._target.stopPropagation || (!this._target || (target !== this._target && !Utilities_1.elementContains(this._target, target))))) { this.dismiss(ev); } }; CalloutContent.prototype._setInitialFocus = function () { if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) { this._didSetInitialFocus = true; Utilities_1.focusFirstChild(this._calloutElement); } }; CalloutContent.prototype._onComponentDidMount = function () { var _this = this; // This is added so the callout will dismiss when the window is scrolled // but not when something inside the callout is scrolled. The delay seems // to be required to avoid React firing an async focus event in IE from // the target changing focus quickly prior to rendering the callout. this._async.setTimeout(function () { _this._events.on(_this._targetWindow, 'scroll', _this._dismissOnScroll, true); _this._events.on(_this._targetWindow, 'resize', _this.dismiss, true); _this._events.on(_this._targetWindow, 'focus', _this._dismissOnLostFocus, true); _this._events.on(_this._targetWindow, 'click', _this._dismissOnLostFocus, true); }, 0); if (this.props.onLayerMounted) { this.props.onLayerMounted(); } this._updatePosition(); }; CalloutContent.prototype._updatePosition = function () { var positions = this.state.positions; var hostElement = this._hostElement; var calloutElement = this._calloutElement; if (hostElement && calloutElement) { var currentProps = void 0; currentProps = Utilities_1.assign(currentProps, this.props); currentProps.bounds = this._getBounds(); // Temporary to be removed when targetElement is removed. Currently deprecated. if (this.props.targetElement) { currentProps.targetElement = this._target; } else { currentProps.target = this._target; } var newPositions = positioning_1.getRelativePositions(currentProps, hostElement, calloutElement); // Set the new position only when the positions are not exists or one of the new callout positions are different. // The position should not change if the position is within 2 decimal places. if ((!positions && newPositions) || (positions && newPositions && !this._arePositionsEqual(positions, newPositions) && this._positionAttempts < 5)) { // We should not reposition the callout more than a few times, if it is then the content is likely resizing // and we should stop trying to reposition to prevent a stack overflow. this._positionAttempts++; this.setState({ positions: newPositions }); } else { this._positionAttempts = 0; if (this.props.onPositioned) { this.props.onPositioned(); } } } }; CalloutContent.prototype._getBounds = function () { if (!this._bounds) { var currentBounds = this.props.bounds; if (!currentBounds) { currentBounds = { top: 0 + this.props.minPagePadding, left: 0 + this.props.minPagePadding, right: this._targetWindow.innerWidth - this.props.minPagePadding, bottom: this._targetWindow.innerHeight - this.props.minPagePadding, width: this._targetWindow.innerWidth - this.props.minPagePadding * 2, height: this._targetWindow.innerHeight - this.props.minPagePadding * 2 }; } this._bounds = currentBounds; } return this._bounds; }; CalloutContent.prototype._getMaxHeight = function () { if (!this._maxHeight) { if (this.props.directionalHintFixed && this._target) { var beakWidth = this.props.isBeakVisible ? this.props.beakWidth : 0; var gapSpace = this.props.gapSpace ? this.props.gapSpace : 0; this._maxHeight = positioning_1.getMaxHeight(this._target, this.props.directionalHint, beakWidth + gapSpace, this._getBounds()); } else { this._maxHeight = this._getBounds().height - BORDER_WIDTH * 2; } } return this._maxHeight; }; CalloutContent.prototype._arePositionsEqual = function (positions, newPosition) { if (positions.calloutPosition.top.toFixed(2) !== newPosition.calloutPosition.top.toFixed(2)) { return false; } if (positions.calloutPosition.left.toFixed(2) !== newPosition.calloutPosition.left.toFixed(2)) { return false; } if (positions.beakPosition.top.toFixed(2) !== newPosition.beakPosition.top.toFixed(2)) { return false; } if (positions.beakPosition.top.toFixed(2) !== newPosition.beakPosition.top.toFixed(2)) { return false; } return true; }; CalloutContent.prototype._setTargetWindowAndElement = function (target) { if (target) { if (typeof target === 'string') { var currentDoc = Utilities_1.getDocument(); this._target = currentDoc ? currentDoc.querySelector(target) : null; this._targetWindow = Utilities_1.getWindow(); } else if (target.stopPropagation) { this._target = target; this._targetWindow = Utilities_1.getWindow(target.toElement); } else { var targetElement = target; this._target = target; this._targetWindow = Utilities_1.getWindow(targetElement); } } else { this._targetWindow = Utilities_1.getWindow(); } }; return CalloutContent; }(Utilities_1.BaseComponent)); CalloutContent.defaultProps = { preventDismissOnScroll: false, isBeakVisible: true, beakWidth: 16, gapSpace: 0, minPagePadding: 8, directionalHint: DirectionalHint_1.DirectionalHint.bottomAutoEdge }; __decorate([ Utilities_1.autobind ], CalloutContent.prototype, "dismiss", null); __decorate([ Utilities_1.autobind ], CalloutContent.prototype, "_setInitialFocus", null); __decorate([ Utilities_1.autobind ], CalloutContent.prototype, "_onComponentDidMount", null); exports.CalloutContent = CalloutContent; /***/ }, /* 63 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var DirectionalHint_1 = __webpack_require__(58); var Utilities_1 = __webpack_require__(10); var RectangleEdge; (function (RectangleEdge) { RectangleEdge[RectangleEdge["top"] = 0] = "top"; RectangleEdge[RectangleEdge["bottom"] = 1] = "bottom"; RectangleEdge[RectangleEdge["left"] = 2] = "left"; RectangleEdge[RectangleEdge["right"] = 3] = "right"; })(RectangleEdge = exports.RectangleEdge || (exports.RectangleEdge = {})); var SLIDE_ANIMATIONS = (_a = {}, _a[RectangleEdge.top] = 'slideUpIn20', _a[RectangleEdge.bottom] = 'slideDownIn20', _a[RectangleEdge.left] = 'slideLeftIn20', _a[RectangleEdge.right] = 'slideRightIn20', _a); var PositionData = (function () { function PositionData(calloutDirection, targetDirection, calloutPercent, targetPercent, beakPercent, isAuto) { this.calloutDirection = calloutDirection; this.targetDirection = targetDirection; this.calloutPercent = calloutPercent; this.targetPercent = targetPercent; this.beakPercent = beakPercent; this.isAuto = isAuto; } return PositionData; }()); exports.PositionData = PositionData; // Currently the beakPercent is set to 50 for all positions meaning that it should tend to the center of the target var DirectionalDictionary = (_b = {}, _b[DirectionalHint_1.DirectionalHint.topLeftEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 0, 0, 50, false), _b[DirectionalHint_1.DirectionalHint.topCenter] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 50, 50, 50, false), _b[DirectionalHint_1.DirectionalHint.topRightEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 100, 100, 50, false), _b[DirectionalHint_1.DirectionalHint.topAutoEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 0, 0, 50, true), _b[DirectionalHint_1.DirectionalHint.bottomLeftEdge] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 0, 0, 50, false), _b[DirectionalHint_1.DirectionalHint.bottomCenter] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 50, 50, 50, false), _b[DirectionalHint_1.DirectionalHint.bottomRightEdge] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 100, 100, 50, false), _b[DirectionalHint_1.DirectionalHint.bottomAutoEdge] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 0, 0, 50, true), _b[DirectionalHint_1.DirectionalHint.leftTopEdge] = new PositionData(RectangleEdge.right, RectangleEdge.left, 0, 0, 50, false), _b[DirectionalHint_1.DirectionalHint.leftCenter] = new PositionData(RectangleEdge.right, RectangleEdge.left, 50, 50, 50, false), _b[DirectionalHint_1.DirectionalHint.leftBottomEdge] = new PositionData(RectangleEdge.right, RectangleEdge.left, 100, 100, 50, false), _b[DirectionalHint_1.DirectionalHint.rightTopEdge] = new PositionData(RectangleEdge.left, RectangleEdge.right, 0, 0, 50, false), _b[DirectionalHint_1.DirectionalHint.rightCenter] = new PositionData(RectangleEdge.left, RectangleEdge.right, 50, 50, 50, false), _b[DirectionalHint_1.DirectionalHint.rightBottomEdge] = new PositionData(RectangleEdge.left, RectangleEdge.right, 100, 100, 50, false), _b); var CoverDictionary = (_c = {}, _c[DirectionalHint_1.DirectionalHint.topLeftEdge] = new PositionData(RectangleEdge.top, RectangleEdge.top, 0, 0, 50, false), _c[DirectionalHint_1.DirectionalHint.topCenter] = new PositionData(RectangleEdge.top, RectangleEdge.top, 50, 50, 50, false), _c[DirectionalHint_1.DirectionalHint.topRightEdge] = new PositionData(RectangleEdge.top, RectangleEdge.top, 100, 100, 50, false), _c[DirectionalHint_1.DirectionalHint.topAutoEdge] = new PositionData(RectangleEdge.top, RectangleEdge.top, 0, 0, 50, true), _c[DirectionalHint_1.DirectionalHint.bottomLeftEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 0, 0, 50, false), _c[DirectionalHint_1.DirectionalHint.bottomCenter] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 50, 50, 50, false), _c[DirectionalHint_1.DirectionalHint.bottomRightEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 100, 100, 50, false), _c[DirectionalHint_1.DirectionalHint.bottomAutoEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 0, 0, 50, true), _c[DirectionalHint_1.DirectionalHint.leftTopEdge] = new PositionData(RectangleEdge.left, RectangleEdge.left, 0, 0, 50, false), _c[DirectionalHint_1.DirectionalHint.leftCenter] = new PositionData(RectangleEdge.left, RectangleEdge.left, 50, 50, 50, false), _c[DirectionalHint_1.DirectionalHint.leftBottomEdge] = new PositionData(RectangleEdge.left, RectangleEdge.left, 100, 100, 50, false), _c[DirectionalHint_1.DirectionalHint.rightTopEdge] = new PositionData(RectangleEdge.right, RectangleEdge.right, 0, 0, 50, false), _c[DirectionalHint_1.DirectionalHint.rightCenter] = new PositionData(RectangleEdge.right, RectangleEdge.right, 50, 50, 50, false), _c[DirectionalHint_1.DirectionalHint.rightBottomEdge] = new PositionData(RectangleEdge.right, RectangleEdge.right, 100, 100, 50, false), _c); var OppositeEdgeDictionary = (_d = {}, _d[RectangleEdge.top] = RectangleEdge.bottom, _d[RectangleEdge.bottom] = RectangleEdge.top, _d[RectangleEdge.right] = RectangleEdge.left, _d[RectangleEdge.left] = RectangleEdge.right, _d); function getRelativePositions(props, hostElement, calloutElement) { var beakWidth = !props.isBeakVisible ? 0 : props.beakWidth; var borderWidth = positioningFunctions._getBorderSize(calloutElement); var gap = positioningFunctions._calculateActualBeakWidthInPixels(beakWidth) / 2 + (props.gapSpace ? props.gapSpace : 0); var boundingRect = props.bounds ? positioningFunctions._getRectangleFromIRect(props.bounds) : new Utilities_1.Rectangle(0, window.innerWidth - Utilities_1.getScrollbarWidth(), 0, window.innerHeight); var targetRect = props.target ? positioningFunctions._getTargetRect(boundingRect, props.target) : positioningFunctions._getTargetRectDEPRECATED(boundingRect, props.targetElement, props.creationEvent, props.targetPoint, props.useTargetPoint); var positionData = positioningFunctions._getPositionData(props.directionalHint, targetRect, boundingRect, props.coverTarget); var positionedCallout = positioningFunctions._positionCalloutWithinBounds(positioningFunctions._getRectangleFromHTMLElement(calloutElement), targetRect, boundingRect, positionData, gap, props.coverTarget, props.directionalHintFixed); var beakPositioned = positioningFunctions._positionBeak(beakWidth, positionedCallout, targetRect, borderWidth); var finalizedCallout = positioningFunctions._finalizeCalloutPosition(positionedCallout.calloutRectangle, hostElement); return { calloutPosition: { top: finalizedCallout.top, left: finalizedCallout.left }, beakPosition: { top: beakPositioned.top, left: beakPositioned.left, display: 'block' }, directionalClassName: SLIDE_ANIMATIONS[positionedCallout.targetEdge], submenuDirection: positionedCallout.calloutEdge === RectangleEdge.right ? DirectionalHint_1.DirectionalHint.leftBottomEdge : DirectionalHint_1.DirectionalHint.rightBottomEdge }; } exports.getRelativePositions = getRelativePositions; /** * Get's the maximum height that a rectangle can have in order to fit below or above a target. * If the directional hint specifies a left or right edge (i.e. leftCenter) it will limit the height to the topBorder * of the target given. * If no bounds are provided then the window is treated as the bounds. */ function getMaxHeight(target, targetEdge, gapSpace, bounds) { if (gapSpace === void 0) { gapSpace = 0; } var mouseTarget = target; var elementTarget = target; var targetRect; var boundingRectangle = bounds ? positioningFunctions._getRectangleFromIRect(bounds) : new Utilities_1.Rectangle(0, window.innerWidth - Utilities_1.getScrollbarWidth(), 0, window.innerHeight); if (mouseTarget.stopPropagation) { targetRect = new Utilities_1.Rectangle(mouseTarget.clientX, mouseTarget.clientX, mouseTarget.clientY, mouseTarget.clientY); } else { targetRect = positioningFunctions._getRectangleFromHTMLElement(elementTarget); } return positioningFunctions._getMaxHeightFromTargetRectangle(targetRect, targetEdge, gapSpace, boundingRectangle); } exports.getMaxHeight = getMaxHeight; var positioningFunctions; (function (positioningFunctions) { /** * If max height is less than zero it returns the bounds height instead. */ function _getMaxHeightFromTargetRectangle(targetRectangle, targetEdge, gapSpace, bounds) { var maxHeight = 0; switch (targetEdge) { case DirectionalHint_1.DirectionalHint.bottomAutoEdge: case DirectionalHint_1.DirectionalHint.bottomCenter: case DirectionalHint_1.DirectionalHint.bottomLeftEdge: case DirectionalHint_1.DirectionalHint.bottomRightEdge: maxHeight = bounds.bottom - targetRectangle.bottom - gapSpace; break; case DirectionalHint_1.DirectionalHint.topAutoEdge: case DirectionalHint_1.DirectionalHint.topCenter: case DirectionalHint_1.DirectionalHint.topLeftEdge: case DirectionalHint_1.DirectionalHint.topRightEdge: maxHeight = targetRectangle.top - bounds.top - gapSpace; break; default: maxHeight = bounds.bottom - targetRectangle.top - gapSpace; break; } return maxHeight > 0 ? maxHeight : bounds.height; } positioningFunctions._getMaxHeightFromTargetRectangle = _getMaxHeightFromTargetRectangle; function _getTargetRect(bounds, target) { var targetRectangle; if (target.preventDefault) { var ev = target; targetRectangle = new Utilities_1.Rectangle(ev.clientX, ev.clientX, ev.clientY, ev.clientY); } else { targetRectangle = _getRectangleFromHTMLElement(target); } if (!_isRectangleWithinBounds(targetRectangle, bounds)) { var outOfBounds = _getOutOfBoundsEdges(targetRectangle, bounds); for (var _i = 0, outOfBounds_1 = outOfBounds; _i < outOfBounds_1.length; _i++) { var direction = outOfBounds_1[_i]; targetRectangle[RectangleEdge[direction]] = bounds[RectangleEdge[direction]]; } } return targetRectangle; } positioningFunctions._getTargetRect = _getTargetRect; function _getTargetRectDEPRECATED(bounds, targetElement, ev, targetPoint, isTargetPoint) { var targetRectangle; if (isTargetPoint) { if (targetPoint) { targetRectangle = new Utilities_1.Rectangle(targetPoint.x, targetPoint.x, targetPoint.y, targetPoint.y); } else { targetRectangle = new Utilities_1.Rectangle(ev.clientX, ev.clientX, ev.clientY, ev.clientY); } } else { if (!targetElement) { if (ev && ev.target) { targetRectangle = _getRectangleFromHTMLElement(ev.target); } targetRectangle = new Utilities_1.Rectangle(); } else { targetRectangle = _getRectangleFromHTMLElement(targetElement); } } if (!_isRectangleWithinBounds(targetRectangle, bounds)) { var outOfBounds = _getOutOfBoundsEdges(targetRectangle, bounds); for (var _i = 0, outOfBounds_2 = outOfBounds; _i < outOfBounds_2.length; _i++) { var direction = outOfBounds_2[_i]; targetRectangle[RectangleEdge[direction]] = bounds[RectangleEdge[direction]]; } } return targetRectangle; } positioningFunctions._getTargetRectDEPRECATED = _getTargetRectDEPRECATED; function _getRectangleFromHTMLElement(element) { var clientRect = element.getBoundingClientRect(); return new Utilities_1.Rectangle(clientRect.left, clientRect.right, clientRect.top, clientRect.bottom); } positioningFunctions._getRectangleFromHTMLElement = _getRectangleFromHTMLElement; function _positionCalloutWithinBounds(calloutRectangle, targetRectangle, boundingRectangle, directionalInfo, gap, coverTarget, directionalHintFixed) { if (gap === void 0) { gap = 0; } var estimatedRectangle = _moveRectangleToAnchorRectangle(calloutRectangle, directionalInfo.calloutDirection, directionalInfo.calloutPercent, targetRectangle, directionalInfo.targetDirection, directionalInfo.targetPercent, gap); if (_isRectangleWithinBounds(estimatedRectangle, boundingRectangle)) { return { calloutRectangle: estimatedRectangle, calloutEdge: directionalInfo.calloutDirection, targetEdge: directionalInfo.targetDirection, alignPercent: directionalInfo.calloutPercent, beakPercent: directionalInfo.beakPercent }; } else { return _getBestRectangleFitWithinBounds(estimatedRectangle, targetRectangle, boundingRectangle, directionalInfo, gap, coverTarget, directionalHintFixed); } } positioningFunctions._positionCalloutWithinBounds = _positionCalloutWithinBounds; function _getBestRectangleFitWithinBounds(estimatedPosition, targetRectangle, boundingRectangle, directionalInfo, gap, coverTarget, directionalHintFixed) { var callout = { calloutRectangle: estimatedPosition, calloutEdge: directionalInfo.calloutDirection, targetEdge: directionalInfo.targetDirection, alignPercent: directionalInfo.calloutPercent, beakPercent: directionalInfo.beakPercent }; // If it can't possibly fit within the bounds just put it into it's initial position. if (!_canRectangleFitWithinBounds(estimatedPosition, boundingRectangle)) { return callout; } if (!coverTarget && !directionalHintFixed) { callout = _flipRectangleToFit(callout, targetRectangle, directionalInfo.targetPercent, boundingRectangle, gap); } var outOfBounds = _getOutOfBoundsEdges(callout.calloutRectangle, boundingRectangle); for (var _i = 0, outOfBounds_3 = outOfBounds; _i < outOfBounds_3.length; _i++) { var direction = outOfBounds_3[_i]; callout.calloutRectangle = _alignEdgeToCoordinate(callout.calloutRectangle, boundingRectangle[RectangleEdge[direction]], direction); var adjustedPercent = _recalculateMatchingPercents(callout.calloutRectangle, callout.targetEdge, targetRectangle, callout.targetEdge, directionalInfo.targetPercent); callout.alignPercent = adjustedPercent; } return callout; } positioningFunctions._getBestRectangleFitWithinBounds = _getBestRectangleFitWithinBounds; function _positionBeak(beakWidth, callout, targetRectangle, border) { var calloutRect = new Utilities_1.Rectangle(0, callout.calloutRectangle.width - border * 2, 0, callout.calloutRectangle.height - border * 2); var beakRectangle = new Utilities_1.Rectangle(0, beakWidth, 0, beakWidth); var recalculatedPercent = _recalculateMatchingPercents(callout.calloutRectangle, callout.calloutEdge, targetRectangle, callout.targetEdge, callout.beakPercent); var estimatedTargetPoint = _getPointOnEdgeFromPercent(calloutRect, callout.calloutEdge, recalculatedPercent); return _finalizeBeakPosition(beakRectangle, callout, estimatedTargetPoint, border); } positioningFunctions._positionBeak = _positionBeak; function _finalizeBeakPosition(beakRectangle, callout, estimatedTargetPoint, border) { var beakPixelSize = _calculateActualBeakWidthInPixels(beakRectangle.width) / 2; var innerRect = null; var beakPoint = { x: beakRectangle.width / 2, y: beakRectangle.width / 2 }; if (callout.calloutEdge === RectangleEdge.bottom || callout.calloutEdge === RectangleEdge.top) { innerRect = new Utilities_1.Rectangle(beakPixelSize, callout.calloutRectangle.width - beakPixelSize - border * 2, 0, callout.calloutRectangle.height - border * 2); } else { innerRect = new Utilities_1.Rectangle(0, callout.calloutRectangle.width - border * 2, beakPixelSize, callout.calloutRectangle.height - beakPixelSize - border * 2); } var finalPoint = _getClosestPointOnEdgeToPoint(innerRect, callout.calloutEdge, estimatedTargetPoint); return _movePointOnRectangleToPoint(beakRectangle, beakPoint, finalPoint); } positioningFunctions._finalizeBeakPosition = _finalizeBeakPosition; function _getRectangleFromIRect(rect) { return new Utilities_1.Rectangle(rect.left, rect.right, rect.top, rect.bottom); } positioningFunctions._getRectangleFromIRect = _getRectangleFromIRect; function _finalizeCalloutPosition(calloutRectangle, hostElement) { var hostRect = _getRectangleFromHTMLElement(hostElement); var topPosition = calloutRectangle.top - hostRect.top; var leftPosition = calloutRectangle.left - hostRect.left; return new Utilities_1.Rectangle(leftPosition, leftPosition + calloutRectangle.width, topPosition, topPosition + calloutRectangle.height); } positioningFunctions._finalizeCalloutPosition = _finalizeCalloutPosition; /** * Finds the percent on the recalculateRect that matches the percent on the target rect based on position. */ function _recalculateMatchingPercents(recalculateRect, rectangleEdge, targetRect, targetEdge, targetPercent) { var targetPoint = _getPointOnEdgeFromPercent(targetRect, targetEdge, targetPercent); var adjustedPoint = _getClosestPointOnEdgeToPoint(recalculateRect, rectangleEdge, targetPoint); var adjustedPercent = _getPercentOfEdgeFromPoint(recalculateRect, rectangleEdge, adjustedPoint); if (adjustedPercent > 100) { adjustedPercent = 100; } else if (adjustedPercent < 0) { adjustedPercent = 0; } return adjustedPercent; } positioningFunctions._recalculateMatchingPercents = _recalculateMatchingPercents; function _canRectangleFitWithinBounds(rect, boundingRect) { if (rect.width > boundingRect.width || rect.height > boundingRect.height) { return false; } return true; } positioningFunctions._canRectangleFitWithinBounds = _canRectangleFitWithinBounds; function _isRectangleWithinBounds(rect, boundingRect) { if (rect.top < boundingRect.top) { return false; } if (rect.bottom > boundingRect.bottom) { return false; } if (rect.left < boundingRect.left) { return false; } if (rect.right > boundingRect.right) { return false; } return true; } positioningFunctions._isRectangleWithinBounds = _isRectangleWithinBounds; /** * Gets all of the edges of a rectangle that are outside of the given bounds. * If there are no out of bounds edges it returns an empty array. */ function _getOutOfBoundsEdges(rect, boundingRect) { var outOfBounds = new Array(); if (rect.top < boundingRect.top) { outOfBounds.push(RectangleEdge.top); } if (rect.bottom > boundingRect.bottom) { outOfBounds.push(RectangleEdge.bottom); } if (rect.left < boundingRect.left) { outOfBounds.push(RectangleEdge.left); } if (rect.right > boundingRect.right) { outOfBounds.push(RectangleEdge.right); } return outOfBounds; } positioningFunctions._getOutOfBoundsEdges = _getOutOfBoundsEdges; /** * Returns a point on a edge that is x% of the way down it. */ function _getPointOnEdgeFromPercent(rect, direction, percentOfRect) { var startPoint; var endPoint; switch (direction) { case RectangleEdge.top: startPoint = { x: rect.left, y: rect.top }; endPoint = { x: rect.right, y: rect.top }; break; case RectangleEdge.left: startPoint = { x: rect.left, y: rect.top }; endPoint = { x: rect.left, y: rect.bottom }; break; case RectangleEdge.right: startPoint = { x: rect.right, y: rect.top }; endPoint = { x: rect.right, y: rect.bottom }; break; case RectangleEdge.bottom: startPoint = { x: rect.left, y: rect.bottom }; endPoint = { x: rect.right, y: rect.bottom }; break; default: startPoint = { x: 0, y: 0 }; endPoint = { x: 0, y: 0 }; break; } return _calculatePointPercentAlongLine(startPoint, endPoint, percentOfRect); } positioningFunctions._getPointOnEdgeFromPercent = _getPointOnEdgeFromPercent; /** * Gets the percent down an edge that a point appears. */ function _getPercentOfEdgeFromPoint(rect, direction, valueOnEdge) { switch (direction) { case RectangleEdge.top: case RectangleEdge.bottom: return rect.width !== 0 ? (valueOnEdge.x - rect.left) / rect.width * 100 : 100; case RectangleEdge.left: case RectangleEdge.right: return rect.height !== 0 ? (valueOnEdge.y - rect.top) / rect.height * 100 : 100; } } positioningFunctions._getPercentOfEdgeFromPoint = _getPercentOfEdgeFromPoint; /** * Percent is based on distance from left to right or up to down. 0% would be left most, 100% would be right most. */ function _calculatePointPercentAlongLine(startPoint, endPoint, percent) { var x = startPoint.x + ((endPoint.x - startPoint.x) * percent / 100); var y = startPoint.y + ((endPoint.y - startPoint.y) * percent / 100); return { x: x, y: y }; } positioningFunctions._calculatePointPercentAlongLine = _calculatePointPercentAlongLine; function _moveTopLeftOfRectangleToPoint(rect, destination) { return new Utilities_1.Rectangle(destination.x, destination.x + rect.width, destination.y, destination.y + rect.height); } positioningFunctions._moveTopLeftOfRectangleToPoint = _moveTopLeftOfRectangleToPoint; /** * Aligns the given edge to the target coordinate. */ function _alignEdgeToCoordinate(rect, coordinate, direction) { switch (direction) { case RectangleEdge.top: return _moveTopLeftOfRectangleToPoint(rect, { x: rect.left, y: coordinate }); case RectangleEdge.bottom: return _moveTopLeftOfRectangleToPoint(rect, { x: rect.left, y: coordinate - rect.height }); case RectangleEdge.left: return _moveTopLeftOfRectangleToPoint(rect, { x: coordinate, y: rect.top }); case RectangleEdge.right: return _moveTopLeftOfRectangleToPoint(rect, { x: coordinate - rect.width, y: rect.top }); } return new Utilities_1.Rectangle(); } positioningFunctions._alignEdgeToCoordinate = _alignEdgeToCoordinate; /** * Moves a point on a given rectangle to the target point. Does not change the rectangles orientation. */ function _movePointOnRectangleToPoint(rect, rectanglePoint, targetPoint) { var leftCornerXDifference = rectanglePoint.x - rect.left; var leftCornerYDifference = rectanglePoint.y - rect.top; return _moveTopLeftOfRectangleToPoint(rect, { x: targetPoint.x - leftCornerXDifference, y: targetPoint.y - leftCornerYDifference }); } positioningFunctions._movePointOnRectangleToPoint = _movePointOnRectangleToPoint; /** * Moves the given rectangle a certain number of pixels in the given direction; */ function _moveRectangleInDirection(rect, moveDistance, direction) { var xModifier = 0; var yModifier = 0; switch (direction) { case RectangleEdge.top: yModifier = moveDistance * -1; break; case RectangleEdge.left: xModifier = moveDistance * -1; break; case RectangleEdge.right: xModifier = moveDistance; break; case RectangleEdge.bottom: yModifier = moveDistance; break; } return _moveTopLeftOfRectangleToPoint(rect, { x: rect.left + xModifier, y: rect.top + yModifier }); } positioningFunctions._moveRectangleInDirection = _moveRectangleInDirection; /** * Moves the given rectangle to an anchor rectangle. */ function _moveRectangleToAnchorRectangle(rect, rectSide, rectPercent, anchorRect, anchorSide, anchorPercent, gap) { if (gap === void 0) { gap = 0; } var rectTargetPoint = _getPointOnEdgeFromPercent(rect, rectSide, rectPercent); var anchorTargetPoint = _getPointOnEdgeFromPercent(anchorRect, anchorSide, anchorPercent); var positionedRect = _movePointOnRectangleToPoint(rect, rectTargetPoint, anchorTargetPoint); return _moveRectangleInDirection(positionedRect, gap, anchorSide); } positioningFunctions._moveRectangleToAnchorRectangle = _moveRectangleToAnchorRectangle; /** * Gets the closet point on an edge to the given point. */ function _getClosestPointOnEdgeToPoint(rect, edge, point) { switch (edge) { case RectangleEdge.top: case RectangleEdge.bottom: var x = void 0; if (point.x > rect.right) { x = rect.right; } else if (point.x < rect.left) { x = rect.left; } else { x = point.x; } return { x: x, y: rect[RectangleEdge[edge]] }; case RectangleEdge.left: case RectangleEdge.right: var y = void 0; if (point.y > rect.bottom) { y = rect.bottom; } else if (point.y < rect.top) { y = rect.top; } else { y = point.y; } return { x: rect[RectangleEdge[edge]], y: y }; } } positioningFunctions._getClosestPointOnEdgeToPoint = _getClosestPointOnEdgeToPoint; // Since the beak is rotated 45 degrees the actual height/width is the length of the diagonal. // We still want to position the beak based on it's midpoint which does not change. It will // be at (beakwidth / 2, beakwidth / 2) function _calculateActualBeakWidthInPixels(beakWidth) { return Math.sqrt(beakWidth * beakWidth * 2); } positioningFunctions._calculateActualBeakWidthInPixels = _calculateActualBeakWidthInPixels; function _getBorderSize(element) { var styles = getComputedStyle(element, null); var topBorder = parseFloat(styles.borderTopWidth); var bottomBorder = parseFloat(styles.borderBottomWidth); var leftBorder = parseFloat(styles.borderLeftWidth); var rightBorder = parseFloat(styles.borderRightWidth); // If any of the borders are NaN default to 0 if (isNaN(topBorder) || isNaN(bottomBorder) || isNaN(leftBorder) || isNaN(rightBorder)) { return 0; } // If all of the borders are the same size, any value; if (topBorder === bottomBorder && bottomBorder === leftBorder && leftBorder === rightBorder) { return topBorder; } // If the borders do not agree, return 0 return 0; } positioningFunctions._getBorderSize = _getBorderSize; function _getPositionData(direction, target, boundingRect, coverTarget) { var directionalInfo = coverTarget ? CoverDictionary[direction] : DirectionalDictionary[direction]; if (directionalInfo.isAuto) { var center = _getPointOnEdgeFromPercent(target, directionalInfo.targetDirection, 50); if (center.x <= boundingRect.width / 2) { directionalInfo.calloutPercent = 0; directionalInfo.targetPercent = 0; } else { directionalInfo.calloutPercent = 100; directionalInfo.targetPercent = 100; } } return directionalInfo; } positioningFunctions._getPositionData = _getPositionData; function _flipRectangleToFit(callout, targetRect, targetPercent, boundingRect, gap) { var directions = [RectangleEdge.left, RectangleEdge.right, RectangleEdge.top, RectangleEdge.bottom]; var currentEdge = callout.targetEdge; // Make a copy to presever the original positioning. var positionedCallout = Utilities_1.assign({}, callout); // Keep switching sides until one is found with enough space. If all sides don't fit then return the unmodified callout. for (var i = 0; i < 4; i++) { var outOfBounds = _getOutOfBoundsEdges(positionedCallout.calloutRectangle, boundingRect); var index = outOfBounds.indexOf(currentEdge); var oppositeEdge = OppositeEdgeDictionary[currentEdge]; if (index > -1) { directions.splice(directions.indexOf(currentEdge), 1); currentEdge = directions.indexOf(oppositeEdge) > -1 ? oppositeEdge : directions.slice(-1)[0]; positionedCallout.calloutEdge = OppositeEdgeDictionary[currentEdge]; positionedCallout.targetEdge = currentEdge; positionedCallout.calloutRectangle = _moveRectangleToAnchorRectangle(positionedCallout.calloutRectangle, positionedCallout.calloutEdge, positionedCallout.alignPercent, targetRect, positionedCallout.targetEdge, targetPercent, gap); } else { return positionedCallout; } } return callout; } positioningFunctions._flipRectangleToFit = _flipRectangleToFit; })(positioningFunctions = exports.positioningFunctions || (exports.positioningFunctions = {})); var _a, _b, _c, _d; /***/ }, /* 64 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(65)); /***/ }, /* 65 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(66)); /***/ }, /* 66 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); /** * This adds accessibility to Dialog and Panel controls */ var Popup = (function (_super) { __extends(Popup, _super); function Popup() { return _super !== null && _super.apply(this, arguments) || this; } Popup.prototype.componentWillMount = function () { this._originalFocusedElement = Utilities_1.getDocument().activeElement; }; Popup.prototype.componentDidMount = function () { this._events.on(this.refs.root, 'focus', this._onFocus, true); this._events.on(this.refs.root, 'blur', this._onBlur, true); if (Utilities_1.doesElementContainFocus(this.refs.root)) { this._containsFocus = true; } }; Popup.prototype.componentWillUnmount = function () { if (this.props.shouldRestoreFocus && this._originalFocusedElement && this._containsFocus && this._originalFocusedElement !== window) { // This slight delay is required so that we can unwind the stack, let react try to mess with focus, and then // apply the correct focus. Without the setTimeout, we end up focusing the correct thing, and then React wants // to reset the focus back to the thing it thinks should have been focused. if (this._originalFocusedElement) { this._originalFocusedElement.focus(); } } }; Popup.prototype.render = function () { var _a = this.props, role = _a.role, className = _a.className, ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy; return (React.createElement("div", __assign({ ref: 'root' }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), { className: className, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onKeyDown: this._onKeyDown }), this.props.children)); }; Popup.prototype._onKeyDown = function (ev) { switch (ev.which) { case Utilities_1.KeyCodes.escape: if (this.props.onDismiss) { this.props.onDismiss(ev); ev.preventDefault(); ev.stopPropagation(); } break; } }; Popup.prototype._onFocus = function () { this._containsFocus = true; }; Popup.prototype._onBlur = function () { this._containsFocus = false; }; return Popup; }(Utilities_1.BaseComponent)); Popup.defaultProps = { shouldRestoreFocus: true }; __decorate([ Utilities_1.autobind ], Popup.prototype, "_onKeyDown", null); exports.Popup = Popup; /***/ }, /* 67 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_9eeb3eac', container: 'container_9eeb3eac', main: 'main_9eeb3eac', beak: 'beak_9eeb3eac', beakCurtain: 'beakCurtain_9eeb3eac', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_9eeb3eac{box-shadow:0 0 5px 0 rgba(0,0,0,.4);position:absolute;border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";box-sizing:border-box}@media screen and (-ms-high-contrast:active){.root_9eeb3eac{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_9eeb3eac{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.container_9eeb3eac{position:relative}.main_9eeb3eac{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";overflow-x:hidden;overflow-y:auto;position:relative}.beak_9eeb3eac{position:absolute;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";box-shadow:inherit;border:inherit;box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.beakCurtain_9eeb3eac{position:absolute;top:0;right:0;bottom:0;left:0;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 68 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(69)); /***/ }, /* 69 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(70)); __export(__webpack_require__(116)); __export(__webpack_require__(120)); __export(__webpack_require__(118)); /***/ }, /* 70 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Glamor = __webpack_require__(71); var rtl_css_js_1 = __webpack_require__(86); var index_1 = __webpack_require__(87); function _initializeGlamor() { // force speedy. // tslint:disable-next-line:no-string-literal if (!Glamor['styleSheet'] || !Glamor['styleSheet'].isSpeedy) { // tslint:disable-next-line:no-string-literal Glamor['speedy'](true); } // tslint:disable-next-line:no-string-literal Glamor['plugins'].add(function (_a) { var selector = _a.selector, style = _a.style; return ({ selector: selector, style: index_1.getRTL() ? rtl_css_js_1.default(style) : style }); }); } _initializeGlamor(); /** * Defines a :before pseudo-selector scoped style object for the given raw style. */ function before(style) { return Glamor.before(style); } exports.before = before; /** * Defines a :after pseudo-selector scoped style object for the given raw style. */ function after(style) { return Glamor.after(style); } exports.after = after; /** * Defines a style under a rule which is prefixed by the given selector. */ function parent(selector, style) { return Glamor.parent(selector, style); } exports.parent = parent; /** * Registers a global rule. Be aware: registering global rules are not scoped; * Two versions of a global rule will colide with each other. */ function insertGlobal(selector, style) { Glamor.insertGlobal(selector, style); } exports.insertGlobal = insertGlobal; /** * Registers a font face. */ function fontFace(font) { return Glamor.fontFace(font); } exports.fontFace = fontFace; /** * Register a keyframe definition and returns the unique name to be used for * the animation name. */ function keyframes(timeline) { return Glamor.keyframes(timeline); } exports.keyframes = keyframes; /***/ }, /* 71 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); exports.compose = exports.merge = exports.$ = exports.style = exports.presets = exports.keyframes = exports.fontFace = exports.insertGlobal = exports.insertRule = exports.plugins = exports.styleSheet = undefined; exports.speedy = speedy; exports.simulations = simulations; exports.simulate = simulate; exports.cssLabels = cssLabels; exports.isLikeRule = isLikeRule; exports.idFor = idFor; exports.css = css; exports.rehydrate = rehydrate; exports.flush = flush; exports.select = select; exports.parent = parent; exports.media = media; exports.pseudo = pseudo; exports.active = active; exports.any = any; exports.checked = checked; exports.disabled = disabled; exports.empty = empty; exports.enabled = enabled; exports._default = _default; exports.first = first; exports.firstChild = firstChild; exports.firstOfType = firstOfType; exports.fullscreen = fullscreen; exports.focus = focus; exports.hover = hover; exports.indeterminate = indeterminate; exports.inRange = inRange; exports.invalid = invalid; exports.lastChild = lastChild; exports.lastOfType = lastOfType; exports.left = left; exports.link = link; exports.onlyChild = onlyChild; exports.onlyOfType = onlyOfType; exports.optional = optional; exports.outOfRange = outOfRange; exports.readOnly = readOnly; exports.readWrite = readWrite; exports.required = required; exports.right = right; exports.root = root; exports.scope = scope; exports.target = target; exports.valid = valid; exports.visited = visited; exports.dir = dir; exports.lang = lang; exports.not = not; exports.nthChild = nthChild; exports.nthLastChild = nthLastChild; exports.nthLastOfType = nthLastOfType; exports.nthOfType = nthOfType; exports.after = after; exports.before = before; exports.firstLetter = firstLetter; exports.firstLine = firstLine; exports.selection = selection; exports.backdrop = backdrop; exports.placeholder = placeholder; exports.cssFor = cssFor; exports.attribsFor = attribsFor; var _objectAssign = __webpack_require__(72); var _objectAssign2 = _interopRequireDefault(_objectAssign); var _sheet = __webpack_require__(73); var _CSSPropertyOperations = __webpack_require__(74); var _clean = __webpack_require__(82); var _clean2 = _interopRequireDefault(_clean); var _plugins = __webpack_require__(83); var _hash = __webpack_require__(85); var _hash2 = _interopRequireDefault(_hash); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } /* stylesheet */ var styleSheet = exports.styleSheet = new _sheet.StyleSheet(); // an isomorphic StyleSheet shim. hides all the nitty gritty. // /**************** LIFTOFF IN 3... 2... 1... ****************/ styleSheet.inject(); //eslint-disable-line indent // /**************** TO THE MOOOOOOON ****************/ // convenience function to toggle speedy function speedy(bool) { return styleSheet.speedy(bool); } // plugins // we include these by default var plugins = exports.plugins = styleSheet.plugins = new _plugins.PluginSet([_plugins.prefixes, _plugins.fallbacks]); plugins.media = new _plugins.PluginSet(); // neat! media, font-face, keyframes plugins.fontFace = new _plugins.PluginSet(); plugins.keyframes = new _plugins.PluginSet([_plugins.prefixes]); // define some constants var isDev = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV; var isTest = process.env.NODE_ENV === 'test'; /**** simulations ****/ // a flag to enable simulation meta tags on dom nodes // defaults to true in dev mode. recommend *not* to // toggle often. var canSimulate = isDev; // we use these flags for issuing warnings when simulate is called // in prod / in incorrect order var warned1 = false, warned2 = false; // toggles simulation activity. shouldn't be needed in most cases function simulations() { var bool = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; canSimulate = !!bool; } // use this on dom nodes to 'simulate' pseudoclasses // <div {...hover({ color: 'red' })} {...simulate('hover', 'visited')}>...</div> // you can even send in some weird ones, as long as it's in simple format // and matches an existing rule on the element // eg simulate('nthChild2', ':hover:active') etc function simulate() { for (var _len = arguments.length, pseudos = Array(_len), _key = 0; _key < _len; _key++) { pseudos[_key] = arguments[_key]; } pseudos = (0, _clean2.default)(pseudos); if (!pseudos) return {}; if (!canSimulate) { if (!warned1) { console.warn('can\'t simulate without once calling simulations(true)'); //eslint-disable-line no-console warned1 = true; } if (!isDev && !isTest && !warned2) { console.warn('don\'t use simulation outside dev'); //eslint-disable-line no-console warned2 = true; } return {}; } return pseudos.reduce(function (o, p) { return o['data-simulate-' + simple(p)] = '', o; }, {}); } /**** labels ****/ // toggle for debug labels. // *shouldn't* have to mess with this manually var hasLabels = isDev; function cssLabels(bool) { hasLabels = !!bool; } // takes a string, converts to lowercase, strips out nonalphanumeric. function simple(str) { return str.toLowerCase().replace(/[^a-z0-9]/g, ''); } // hashes a string to something 'unique' // we use this to generate ids for styles function hashify() { var str = ''; for (var _len2 = arguments.length, objs = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { objs[_key2] = arguments[_key2]; } for (var i = 0; i < objs.length; i++) { str += JSON.stringify(objs[i]); } return (0, _hash2.default)(str).toString(36); } // of shape { 'data-css-<id>': '' } function isLikeRule(rule) { var keys = Object.keys(rule).filter(function (x) { return x !== 'toString'; }); if (keys.length !== 1) { return false; } return !!/data\-css\-([a-zA-Z0-9]+)/.exec(keys[0]); } // extracts id from a { 'data-css-<id>': ''} like object function idFor(rule) { var keys = Object.keys(rule).filter(function (x) { return x !== 'toString'; }); if (keys.length !== 1) throw new Error('not a rule'); var regex = /data\-css\-([a-zA-Z0-9]+)/; var match = regex.exec(keys[0]); if (!match) throw new Error('not a rule'); return match[1]; } function selector(id, path) { if (!id) { return path.replace(/\&/g, ''); } if (!path) return '.css-' + id + ',[data-css-' + id + ']'; var x = path.split(',').map(function (x) { return x.indexOf('&') >= 0 ? [x.replace(/\&/mg, '.css-' + id), x.replace(/\&/mg, '[data-css-' + id + ']')].join(',') // todo - make sure each sub selector has an & : '.css-' + id + x + ',[data-css-' + id + ']' + x; }).join(','); if (canSimulate && /^\&\:/.exec(path) && !/\s/.exec(path)) { x += ',.css-' + id + '[data-simulate-' + simple(path) + '],[data-css-' + id + '][data-simulate-' + simple(path) + ']'; } return x; } function toCSS(_ref) { var selector = _ref.selector, style = _ref.style; var result = plugins.transform({ selector: selector, style: style }); return result.selector + '{' + (0, _CSSPropertyOperations.createMarkupForStyles)(result.style) + '}'; } function deconstruct(style) { // we can be sure it's not infinitely nested here var plain = void 0, selects = void 0, medias = void 0, supports = void 0; Object.keys(style).forEach(function (key) { if (key.indexOf('&') >= 0) { selects = selects || {}; selects[key] = style[key]; } else if (key.indexOf('@media') === 0) { medias = medias || {}; medias[key] = deconstruct(style[key]); } else if (key.indexOf('@supports') === 0) { supports = supports || {}; supports[key] = deconstruct(style[key]); } else if (key === 'label') { if (style.label.length > 0) { plain = plain || {}; plain.label = hasLabels ? style.label.join('.') : ''; } } else { plain = plain || {}; plain[key] = style[key]; } }); return { plain: plain, selects: selects, medias: medias, supports: supports }; } function deconstructedStyleToCSS(id, style) { var css = []; // plugins here var plain = style.plain, selects = style.selects, medias = style.medias, supports = style.supports; if (plain) { css.push(toCSS({ style: plain, selector: selector(id) })); } if (selects) { Object.keys(selects).forEach(function (key) { return css.push(toCSS({ style: selects[key], selector: selector(id, key) })); }); } if (medias) { Object.keys(medias).forEach(function (key) { return css.push(key + '{' + deconstructedStyleToCSS(id, medias[key]).join('') + '}'); }); } if (supports) { Object.keys(supports).forEach(function (key) { return css.push(key + '{' + deconstructedStyleToCSS(id, supports[key]).join('') + '}'); }); } return css; } // this cache to track which rules have // been inserted into the stylesheet var inserted = styleSheet.inserted = {}; // and helpers to insert rules into said styleSheet function insert(spec) { if (!inserted[spec.id]) { inserted[spec.id] = true; var deconstructed = deconstruct(spec.style); deconstructedStyleToCSS(spec.id, deconstructed).map(function (cssRule) { return styleSheet.insert(cssRule); }); } } // a simple cache to store generated rules var registered = styleSheet.registered = {}; function register(spec) { if (!registered[spec.id]) { registered[spec.id] = spec; } } function _getRegistered(rule) { if (isLikeRule(rule)) { var ret = registered[idFor(rule)]; if (ret == null) { throw new Error('[glamor] an unexpected rule cache miss occurred. This is probably a sign of multiple glamor instances in your app. See https://github.com/threepointone/glamor/issues/79'); } return ret; } return rule; } // todo - perf var ruleCache = {}; function toRule(spec) { register(spec); insert(spec); if (ruleCache[spec.id]) { return ruleCache[spec.id]; } var ret = _defineProperty({}, 'data-css-' + spec.id, hasLabels ? spec.label || '' : ''); Object.defineProperty(ret, 'toString', { enumerable: false, value: function value() { return 'css-' + spec.id; } }); ruleCache[spec.id] = ret; return ret; } function log() { //eslint-disable-line no-unused-vars console.log(this); //eslint-disable-line no-console return this; } function isSelector(key) { var possibles = [':', '.', '[', '>', ' '], found = false, ch = key.charAt(0); for (var i = 0; i < possibles.length; i++) { if (ch === possibles[i]) { found = true; break; } } return found || key.indexOf('&') >= 0; } function joinSelectors(a, b) { var as = a.split(',').map(function (a) { return !(a.indexOf('&') >= 0) ? '&' + a : a; }); var bs = b.split(',').map(function (b) { return !(b.indexOf('&') >= 0) ? '&' + b : b; }); return bs.reduce(function (arr, b) { return arr.concat(as.map(function (a) { return b.replace(/\&/g, a); })); }, []).join(','); } function joinMediaQueries(a, b) { return a ? '@media ' + a.substring(6) + ' and ' + b.substring(6) : b; } function isMediaQuery(key) { return key.indexOf('@media') === 0; } function isSupports(key) { return key.indexOf('@supports') === 0; } function joinSupports(a, b) { return a ? '@supports ' + a.substring(9) + ' and ' + b.substring(9) : b; } // flatten a nested array function flatten(inArr) { var arr = []; for (var i = 0; i < inArr.length; i++) { if (Array.isArray(inArr[i])) arr = arr.concat(flatten(inArr[i]));else arr = arr.concat(inArr[i]); } return arr; } // mutable! modifies dest. function build(dest, _ref2) { var _ref2$selector = _ref2.selector, selector = _ref2$selector === undefined ? '' : _ref2$selector, _ref2$mq = _ref2.mq, mq = _ref2$mq === undefined ? '' : _ref2$mq, _ref2$supp = _ref2.supp, supp = _ref2$supp === undefined ? '' : _ref2$supp, _ref2$src = _ref2.src, src = _ref2$src === undefined ? {} : _ref2$src; if (!Array.isArray(src)) { src = [src]; } src = flatten(src); src.forEach(function (_src) { if (isLikeRule(_src)) { var reg = _getRegistered(_src); if (reg.type !== 'css') { throw new Error('cannot merge this rule'); } _src = reg.style; } _src = (0, _clean2.default)(_src); if (_src && _src.composes) { build(dest, { selector: selector, mq: mq, supp: supp, src: _src.composes }); } Object.keys(_src || {}).forEach(function (key) { if (isSelector(key)) { if (key === '::placeholder') { build(dest, { selector: joinSelectors(selector, '::-webkit-input-placeholder'), mq: mq, supp: supp, src: _src[key] }); build(dest, { selector: joinSelectors(selector, '::-moz-placeholder'), mq: mq, supp: supp, src: _src[key] }); build(dest, { selector: joinSelectors(selector, '::-ms-input-placeholder'), mq: mq, supp: supp, src: _src[key] }); } build(dest, { selector: joinSelectors(selector, key), mq: mq, supp: supp, src: _src[key] }); } else if (isMediaQuery(key)) { build(dest, { selector: selector, mq: joinMediaQueries(mq, key), supp: supp, src: _src[key] }); } else if (isSupports(key)) { build(dest, { selector: selector, mq: mq, supp: joinSupports(supp, key), src: _src[key] }); } else if (key === 'composes') { // ignore, we already dealth with it } else { var _dest = dest; if (supp) { _dest[supp] = _dest[supp] || {}; _dest = _dest[supp]; } if (mq) { _dest[mq] = _dest[mq] || {}; _dest = _dest[mq]; } if (selector) { _dest[selector] = _dest[selector] || {}; _dest = _dest[selector]; } if (key === 'label') { if (hasLabels) { dest.label = dest.label.concat(_src.label); } } else { _dest[key] = _src[key]; } } }); }); } function _css(rules) { var style = { label: [] }; build(style, { src: rules }); // mutative! but worth it. var spec = { id: hashify(style), style: style, label: hasLabels ? style.label.join('.') : '', type: 'css' }; return toRule(spec); } var nullrule = { // 'data-css-nil': '' }; Object.defineProperty(nullrule, 'toString', { enumerable: false, value: function value() { return 'css-nil'; } }); var inputCaches = typeof WeakMap !== 'undefined' ? [nullrule, new WeakMap(), new WeakMap(), new WeakMap()] : [nullrule]; var warnedWeakMapError = false; function multiIndexCache(fn) { return function (args) { if (inputCaches[args.length]) { var coi = inputCaches[args.length]; var ctr = 0; while (ctr < args.length - 1) { if (!coi.has(args[ctr])) { coi.set(args[ctr], new WeakMap()); } coi = coi.get(args[ctr]); ctr++; } if (coi.has(args[args.length - 1])) { var ret = coi.get(args[ctr]); if (registered[ret.toString().substring(4)]) { // make sure it hasn't been flushed return ret; } } } var value = fn(args); if (inputCaches[args.length]) { var _ctr = 0, _coi = inputCaches[args.length]; while (_ctr < args.length - 1) { _coi = _coi.get(args[_ctr]); _ctr++; } try { _coi.set(args[_ctr], value); } catch (err) { if (isDev && !warnedWeakMapError) { var _console; warnedWeakMapError = true; (_console = console).warn.apply(_console, ['failed setting the WeakMap cache for args:'].concat(_toConsumableArray(args))); // eslint-disable-line no-console console.warn('this should NOT happen, please file a bug on the github repo.'); // eslint-disable-line no-console } } } return value; }; } var cachedCss = typeof WeakMap !== 'undefined' ? multiIndexCache(_css) : _css; function css() { for (var _len3 = arguments.length, rules = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { rules[_key3] = arguments[_key3]; } if (rules[0] && rules[0].length && rules[0].raw) { throw new Error('you forgot to include glamor/babel in your babel plugins.'); } rules = (0, _clean2.default)(rules); if (!rules) { return nullrule; } return cachedCss(rules); } css.insert = function (css) { var spec = { id: hashify(css), css: css, type: 'raw' }; register(spec); if (!inserted[spec.id]) { styleSheet.insert(spec.css); inserted[spec.id] = true; } }; var insertRule = exports.insertRule = css.insert; css.global = function (selector, style) { return css.insert(toCSS({ selector: selector, style: style })); }; var insertGlobal = exports.insertGlobal = css.global; function insertKeyframe(spec) { if (!inserted[spec.id]) { (function () { var inner = Object.keys(spec.keyframes).map(function (kf) { var result = plugins.keyframes.transform({ id: spec.id, name: kf, style: spec.keyframes[kf] }); return result.name + '{' + (0, _CSSPropertyOperations.createMarkupForStyles)(result.style) + '}'; }).join(''); ['-webkit-', '-moz-', '-o-', ''].forEach(function (prefix) { return styleSheet.insert('@' + prefix + 'keyframes ' + (spec.name + '_' + spec.id) + '{' + inner + '}'); }); inserted[spec.id] = true; })(); } } css.keyframes = function (name, kfs) { if (!kfs) { kfs = name, name = 'animation'; } // do not ignore empty keyframe definitions for now. kfs = (0, _clean2.default)(kfs) || {}; var spec = { id: hashify(name, kfs), type: 'keyframes', name: name, keyframes: kfs }; register(spec); insertKeyframe(spec); return name + '_' + spec.id; }; // we don't go all out for fonts as much, giving a simple font loading strategy // use a fancier lib if you need moar power css.fontFace = function (font) { font = (0, _clean2.default)(font); var spec = { id: hashify(font), type: 'font-face', font: font }; register(spec); insertFontFace(spec); return font.fontFamily; }; var fontFace = exports.fontFace = css.fontFace; var keyframes = exports.keyframes = css.keyframes; function insertFontFace(spec) { if (!inserted[spec.id]) { styleSheet.insert('@font-face{' + (0, _CSSPropertyOperations.createMarkupForStyles)(spec.font) + '}'); inserted[spec.id] = true; } } // rehydrate the insertion cache with ids sent from // renderStatic / renderStaticOptimized function rehydrate(ids) { // load up ids (0, _objectAssign2.default)(inserted, ids.reduce(function (o, i) { return o[i] = true, o; }, {})); // assume css loaded separately } // clears out the cache and empties the stylesheet // best for tests, though there might be some value for SSR. function flush() { inserted = styleSheet.inserted = {}; registered = styleSheet.registered = {}; ruleCache = {}; styleSheet.flush(); styleSheet.inject(); } function warnAboutPresetsDeprecation() { if (isDev) { console.warn('[Deprecation] In glamor v3 the `presets` object will be removed. See https://github.com/threepointone/glamor/issues/213 for more information.'); } } var presets = exports.presets = { get mobile() { warnAboutPresetsDeprecation(); return '(min-width: 400px)'; }, get Mobile() { warnAboutPresetsDeprecation(); return '@media (min-width: 400px)'; }, get phablet() { warnAboutPresetsDeprecation(); return '(min-width: 550px)'; }, get Phablet() { warnAboutPresetsDeprecation(); return '@media (min-width: 550px)'; }, get tablet() { warnAboutPresetsDeprecation(); return '(min-width: 750px)'; }, get Tablet() { warnAboutPresetsDeprecation(); return '@media (min-width: 750px)'; }, get desktop() { warnAboutPresetsDeprecation(); return '(min-width: 1000px)'; }, get Desktop() { warnAboutPresetsDeprecation(); return '@media (min-width: 1000px)'; }, get hd() { warnAboutPresetsDeprecation(); return '(min-width: 1200px)'; }, get Hd() { warnAboutPresetsDeprecation(); return '@media (min-width: 1200px)'; } }; var style = exports.style = css; function select(selector) { for (var _len4 = arguments.length, styles = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) { styles[_key4 - 1] = arguments[_key4]; } if (!selector) { return style(styles); } return css(_defineProperty({}, selector, styles)); } var $ = exports.$ = select; function parent(selector) { for (var _len5 = arguments.length, styles = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) { styles[_key5 - 1] = arguments[_key5]; } return css(_defineProperty({}, selector + ' &', styles)); } var merge = exports.merge = css; var compose = exports.compose = css; function media(query) { for (var _len6 = arguments.length, rules = Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) { rules[_key6 - 1] = arguments[_key6]; } return css(_defineProperty({}, '@media ' + query, rules)); } function pseudo(selector) { for (var _len7 = arguments.length, styles = Array(_len7 > 1 ? _len7 - 1 : 0), _key7 = 1; _key7 < _len7; _key7++) { styles[_key7 - 1] = arguments[_key7]; } return css(_defineProperty({}, selector, styles)); } // allllll the pseudoclasses function active(x) { return pseudo(':active', x); } function any(x) { return pseudo(':any', x); } function checked(x) { return pseudo(':checked', x); } function disabled(x) { return pseudo(':disabled', x); } function empty(x) { return pseudo(':empty', x); } function enabled(x) { return pseudo(':enabled', x); } function _default(x) { return pseudo(':default', x); // note '_default' name } function first(x) { return pseudo(':first', x); } function firstChild(x) { return pseudo(':first-child', x); } function firstOfType(x) { return pseudo(':first-of-type', x); } function fullscreen(x) { return pseudo(':fullscreen', x); } function focus(x) { return pseudo(':focus', x); } function hover(x) { return pseudo(':hover', x); } function indeterminate(x) { return pseudo(':indeterminate', x); } function inRange(x) { return pseudo(':in-range', x); } function invalid(x) { return pseudo(':invalid', x); } function lastChild(x) { return pseudo(':last-child', x); } function lastOfType(x) { return pseudo(':last-of-type', x); } function left(x) { return pseudo(':left', x); } function link(x) { return pseudo(':link', x); } function onlyChild(x) { return pseudo(':only-child', x); } function onlyOfType(x) { return pseudo(':only-of-type', x); } function optional(x) { return pseudo(':optional', x); } function outOfRange(x) { return pseudo(':out-of-range', x); } function readOnly(x) { return pseudo(':read-only', x); } function readWrite(x) { return pseudo(':read-write', x); } function required(x) { return pseudo(':required', x); } function right(x) { return pseudo(':right', x); } function root(x) { return pseudo(':root', x); } function scope(x) { return pseudo(':scope', x); } function target(x) { return pseudo(':target', x); } function valid(x) { return pseudo(':valid', x); } function visited(x) { return pseudo(':visited', x); } // parameterized pseudoclasses function dir(p, x) { return pseudo(':dir(' + p + ')', x); } function lang(p, x) { return pseudo(':lang(' + p + ')', x); } function not(p, x) { // should this be a plugin? var selector = p.split(',').map(function (x) { return x.trim(); }).map(function (x) { return ':not(' + x + ')'; }); if (selector.length === 1) { return pseudo(':not(' + p + ')', x); } return select(selector.join(''), x); } function nthChild(p, x) { return pseudo(':nth-child(' + p + ')', x); } function nthLastChild(p, x) { return pseudo(':nth-last-child(' + p + ')', x); } function nthLastOfType(p, x) { return pseudo(':nth-last-of-type(' + p + ')', x); } function nthOfType(p, x) { return pseudo(':nth-of-type(' + p + ')', x); } // pseudoelements function after(x) { return pseudo('::after', x); } function before(x) { return pseudo('::before', x); } function firstLetter(x) { return pseudo('::first-letter', x); } function firstLine(x) { return pseudo('::first-line', x); } function selection(x) { return pseudo('::selection', x); } function backdrop(x) { return pseudo('::backdrop', x); } function placeholder(x) { // https://github.com/threepointone/glamor/issues/14 return css({ '::placeholder': x }); } /*** helpers for web components ***/ // https://github.com/threepointone/glamor/issues/16 function cssFor() { for (var _len8 = arguments.length, rules = Array(_len8), _key8 = 0; _key8 < _len8; _key8++) { rules[_key8] = arguments[_key8]; } rules = (0, _clean2.default)(rules); return rules ? rules.map(function (r) { var style = { label: [] }; build(style, { src: r }); // mutative! but worth it. return deconstructedStyleToCSS(hashify(style), deconstruct(style)).join(''); }).join('') : ''; } function attribsFor() { for (var _len9 = arguments.length, rules = Array(_len9), _key9 = 0; _key9 < _len9; _key9++) { rules[_key9] = arguments[_key9]; } rules = (0, _clean2.default)(rules); var htmlAttributes = rules ? rules.map(function (rule) { idFor(rule); // throwaway check for rule var key = Object.keys(rule)[0], value = rule[key]; return key + '="' + (value || '') + '"'; }).join(' ') : ''; return htmlAttributes; } /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23))) /***/ }, /* 72 */ /***/ function(module, exports) { /* object-assign (c) Sindre Sorhus @license MIT */ 'use strict'; /* eslint-disable no-unused-vars */ var getOwnPropertySymbols = Object.getOwnPropertySymbols; var hasOwnProperty = Object.prototype.hasOwnProperty; var propIsEnumerable = Object.prototype.propertyIsEnumerable; function toObject(val) { if (val === null || val === undefined) { throw new TypeError('Object.assign cannot be called with null or undefined'); } return Object(val); } function shouldUseNative() { try { if (!Object.assign) { return false; } // Detect buggy property enumeration order in older V8 versions. // https://bugs.chromium.org/p/v8/issues/detail?id=4118 var test1 = new String('abc'); // eslint-disable-line no-new-wrappers test1[5] = 'de'; if (Object.getOwnPropertyNames(test1)[0] === '5') { return false; } // https://bugs.chromium.org/p/v8/issues/detail?id=3056 var test2 = {}; for (var i = 0; i < 10; i++) { test2['_' + String.fromCharCode(i)] = i; } var order2 = Object.getOwnPropertyNames(test2).map(function (n) { return test2[n]; }); if (order2.join('') !== '0123456789') { return false; } // https://bugs.chromium.org/p/v8/issues/detail?id=3056 var test3 = {}; 'abcdefghijklmnopqrst'.split('').forEach(function (letter) { test3[letter] = letter; }); if (Object.keys(Object.assign({}, test3)).join('') !== 'abcdefghijklmnopqrst') { return false; } return true; } catch (err) { // We don't expect any of the above to throw, but better to be safe. return false; } } module.exports = shouldUseNative() ? Object.assign : function (target, source) { var from; var to = toObject(target); var symbols; for (var s = 1; s < arguments.length; s++) { from = Object(arguments[s]); for (var key in from) { if (hasOwnProperty.call(from, key)) { to[key] = from[key]; } } if (getOwnPropertySymbols) { symbols = getOwnPropertySymbols(from); for (var i = 0; i < symbols.length; i++) { if (propIsEnumerable.call(from, symbols[i])) { to[symbols[i]] = from[symbols[i]]; } } } } return to; }; /***/ }, /* 73 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); exports.StyleSheet = StyleSheet; var _objectAssign = __webpack_require__(72); var _objectAssign2 = _interopRequireDefault(_objectAssign); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } /* high performance StyleSheet for css-in-js systems - uses multiple style tags behind the scenes for millions of rules - uses `insertRule` for appending in production for *much* faster performance - 'polyfills' on server side // usage import StyleSheet from 'glamor/lib/sheet' let styleSheet = new StyleSheet() styleSheet.inject() - 'injects' the stylesheet into the page (or into memory if on server) styleSheet.insert('#box { border: 1px solid red; }') - appends a css rule into the stylesheet styleSheet.flush() - empties the stylesheet of all its contents */ function last(arr) { return arr[arr.length - 1]; } function sheetForTag(tag) { if (tag.sheet) { return tag.sheet; } // this weirdness brought to you by firefox for (var i = 0; i < document.styleSheets.length; i++) { if (document.styleSheets[i].ownerNode === tag) { return document.styleSheets[i]; } } } var isBrowser = typeof window !== 'undefined'; var isDev = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV; //(x => (x === 'development') || !x)(process.env.NODE_ENV) var isTest = process.env.NODE_ENV === 'test'; var oldIE = function () { if (isBrowser) { var div = document.createElement('div'); div.innerHTML = '<!--[if lt IE 10]><i></i><![endif]-->'; return div.getElementsByTagName('i').length === 1; } }(); function makeStyleTag() { var tag = document.createElement('style'); tag.type = 'text/css'; tag.setAttribute('data-glamor', ''); tag.appendChild(document.createTextNode('')); (document.head || document.getElementsByTagName('head')[0]).appendChild(tag); return tag; } function StyleSheet() { var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, _ref$speedy = _ref.speedy, speedy = _ref$speedy === undefined ? !isDev && !isTest : _ref$speedy, _ref$maxLength = _ref.maxLength, maxLength = _ref$maxLength === undefined ? isBrowser && oldIE ? 4000 : 65000 : _ref$maxLength; this.isSpeedy = speedy; // the big drawback here is that the css won't be editable in devtools this.sheet = undefined; this.tags = []; this.maxLength = maxLength; this.ctr = 0; } (0, _objectAssign2.default)(StyleSheet.prototype, { getSheet: function getSheet() { return sheetForTag(last(this.tags)); }, inject: function inject() { var _this = this; if (this.injected) { throw new Error('already injected stylesheet!'); } if (isBrowser) { this.tags[0] = makeStyleTag(); } else { // server side 'polyfill'. just enough behavior to be useful. this.sheet = { cssRules: [], insertRule: function insertRule(rule) { // enough 'spec compliance' to be able to extract the rules later // in other words, just the cssText field _this.sheet.cssRules.push({ cssText: rule }); } }; } this.injected = true; }, speedy: function speedy(bool) { if (this.ctr !== 0) { throw new Error('cannot change speedy mode after inserting any rule to sheet. Either call speedy(' + bool + ') earlier in your app, or call flush() before speedy(' + bool + ')'); } this.isSpeedy = !!bool; }, _insert: function _insert(rule) { // this weirdness for perf, and chrome's weird bug // https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule try { var sheet = this.getSheet(); sheet.insertRule(rule, rule.indexOf('@import') !== -1 ? 0 : sheet.cssRules.length); } catch (e) { if (isDev) { // might need beter dx for this console.warn('whoops, illegal rule inserted', rule); //eslint-disable-line no-console } } }, insert: function insert(rule) { if (isBrowser) { // this is the ultrafast version, works across browsers if (this.isSpeedy && this.getSheet().insertRule) { this._insert(rule); } // more browser weirdness. I don't even know // else if(this.tags.length > 0 && this.tags::last().styleSheet) { // this.tags::last().styleSheet.cssText+= rule // } else { if (rule.indexOf('@import') !== -1) { var tag = last(this.tags); tag.insertBefore(document.createTextNode(rule), tag.firstChild); } else { last(this.tags).appendChild(document.createTextNode(rule)); } } } else { // server side is pretty simple this.sheet.insertRule(rule, rule.indexOf('@import') !== -1 ? 0 : this.sheet.cssRules.length); } this.ctr++; if (isBrowser && this.ctr % this.maxLength === 0) { this.tags.push(makeStyleTag()); } return this.ctr - 1; }, // commenting this out till we decide on v3's decision // _replace(index, rule) { // // this weirdness for perf, and chrome's weird bug // // https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule // try { // let sheet = this.getSheet() // sheet.deleteRule(index) // todo - correct index here // sheet.insertRule(rule, index) // } // catch(e) { // if(isDev) { // // might need beter dx for this // console.warn('whoops, problem replacing rule', rule) //eslint-disable-line no-console // } // } // } // replace(index, rule) { // if(isBrowser) { // if(this.isSpeedy && this.getSheet().insertRule) { // this._replace(index, rule) // } // else { // let _slot = Math.floor((index + this.maxLength) / this.maxLength) - 1 // let _index = (index % this.maxLength) + 1 // let tag = this.tags[_slot] // tag.replaceChild(document.createTextNode(rule), tag.childNodes[_index]) // } // } // else { // let rules = this.sheet.cssRules // this.sheet.cssRules = [ ...rules.slice(0, index), { cssText: rule }, ...rules.slice(index + 1) ] // } // } delete: function _delete(index) { // we insert a blank rule when 'deleting' so previously returned indexes remain stable return this.replace(index, ''); }, flush: function flush() { if (isBrowser) { this.tags.forEach(function (tag) { return tag.parentNode.removeChild(tag); }); this.tags = []; this.sheet = null; this.ctr = 0; // todo - look for remnants in document.styleSheets } else { // simpler on server this.sheet.cssRules = []; } this.injected = false; }, rules: function rules() { if (!isBrowser) { return this.sheet.cssRules; } var arr = []; this.tags.forEach(function (tag) { return arr.splice.apply(arr, [arr.length, 0].concat(_toConsumableArray(Array.from(sheetForTag(tag).cssRules)))); }); return arr; } }); /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23))) /***/ }, /* 74 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); exports.processStyleName = undefined; exports.createMarkupForStyles = createMarkupForStyles; var _camelizeStyleName = __webpack_require__(75); var _camelizeStyleName2 = _interopRequireDefault(_camelizeStyleName); var _dangerousStyleValue = __webpack_require__(77); var _dangerousStyleValue2 = _interopRequireDefault(_dangerousStyleValue); var _hyphenateStyleName = __webpack_require__(79); var _hyphenateStyleName2 = _interopRequireDefault(_hyphenateStyleName); var _memoizeStringOnly = __webpack_require__(81); var _memoizeStringOnly2 = _interopRequireDefault(_memoizeStringOnly); var _warning = __webpack_require__(27); var _warning2 = _interopRequireDefault(_warning); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var processStyleName = exports.processStyleName = (0, _memoizeStringOnly2.default)(_hyphenateStyleName2.default); /** * Copyright 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule CSSPropertyOperations */ if (process.env.NODE_ENV !== 'production') { var warnValidStyle; (function () { // 'msTransform' is correct, but the other prefixes should be capitalized var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/; // style values shouldn't contain a semicolon var badStyleValueWithSemicolonPattern = /;\s*$/; var warnedStyleNames = {}; var warnedStyleValues = {}; var warnedForNaNValue = false; var warnHyphenatedStyleName = function warnHyphenatedStyleName(name, owner) { if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) { return; } warnedStyleNames[name] = true; process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(false, 'Unsupported style property %s. Did you mean %s?%s', name, (0, _camelizeStyleName2.default)(name), checkRenderMessage(owner)) : void 0; }; var warnBadVendoredStyleName = function warnBadVendoredStyleName(name, owner) { if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) { return; } warnedStyleNames[name] = true; process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(false, 'Unsupported vendor-prefixed style property %s. Did you mean %s?%s', name, name.charAt(0).toUpperCase() + name.slice(1), checkRenderMessage(owner)) : void 0; }; var warnStyleValueWithSemicolon = function warnStyleValueWithSemicolon(name, value, owner) { if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) { return; } warnedStyleValues[value] = true; process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(false, 'Style property values shouldn\'t contain a semicolon.%s ' + 'Try "%s: %s" instead.', checkRenderMessage(owner), name, value.replace(badStyleValueWithSemicolonPattern, '')) : void 0; }; var warnStyleValueIsNaN = function warnStyleValueIsNaN(name, value, owner) { if (warnedForNaNValue) { return; } warnedForNaNValue = true; process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(false, '`NaN` is an invalid value for the `%s` css style property.%s', name, checkRenderMessage(owner)) : void 0; }; var checkRenderMessage = function checkRenderMessage(owner) { if (owner) { var name = owner.getName(); if (name) { return ' Check the render method of `' + name + '`.'; } } return ''; }; /** * @param {string} name * @param {*} value * @param {ReactDOMComponent} component */ warnValidStyle = function warnValidStyle(name, value, component) { //eslint-disable-line no-var var owner = void 0; if (component) { owner = component._currentElement._owner; } if (name.indexOf('-') > -1) { warnHyphenatedStyleName(name, owner); } else if (badVendoredStyleNamePattern.test(name)) { warnBadVendoredStyleName(name, owner); } else if (badStyleValueWithSemicolonPattern.test(value)) { warnStyleValueWithSemicolon(name, value, owner); } if (typeof value === 'number' && isNaN(value)) { warnStyleValueIsNaN(name, value, owner); } }; })(); } /** * Serializes a mapping of style properties for use as inline styles: * * > createMarkupForStyles({width: '200px', height: 0}) * "width:200px;height:0;" * * Undefined values are ignored so that declarative programming is easier. * The result should be HTML-escaped before insertion into the DOM. * * @param {object} styles * @param {ReactDOMComponent} component * @return {?string} */ function createMarkupForStyles(styles, component) { var serialized = ''; for (var styleName in styles) { var isCustomProp = styleName.indexOf('--') === 0; if (!styles.hasOwnProperty(styleName)) { continue; } var styleValue = styles[styleName]; if (process.env.NODE_ENV !== 'production' && !isCustomProp) { warnValidStyle(styleName, styleValue, component); } if (styleValue != null) { if (isCustomProp) { serialized += styleName + ':' + styleValue + ';'; } else { serialized += processStyleName(styleName) + ':'; serialized += (0, _dangerousStyleValue2.default)(styleName, styleValue, component) + ';'; } } } return serialized || null; } /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23))) /***/ }, /* 75 */ /***/ function(module, exports, __webpack_require__) { /** * Copyright (c) 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @typechecks */ 'use strict'; var camelize = __webpack_require__(76); var msPattern = /^-ms-/; /** * Camelcases a hyphenated CSS property name, for example: * * > camelizeStyleName('background-color') * < "backgroundColor" * > camelizeStyleName('-moz-transition') * < "MozTransition" * > camelizeStyleName('-ms-transition') * < "msTransition" * * As Andi Smith suggests * (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix * is converted to lowercase `ms`. * * @param {string} string * @return {string} */ function camelizeStyleName(string) { return camelize(string.replace(msPattern, 'ms-')); } module.exports = camelizeStyleName; /***/ }, /* 76 */ /***/ function(module, exports) { "use strict"; /** * Copyright (c) 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @typechecks */ var _hyphenPattern = /-(.)/g; /** * Camelcases a hyphenated string, for example: * * > camelize('background-color') * < "backgroundColor" * * @param {string} string * @return {string} */ function camelize(string) { return string.replace(_hyphenPattern, function (_, character) { return character.toUpperCase(); }); } module.exports = camelize; /***/ }, /* 77 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _CSSProperty = __webpack_require__(78); var _CSSProperty2 = _interopRequireDefault(_CSSProperty); var _warning = __webpack_require__(27); var _warning2 = _interopRequireDefault(_warning); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } /** * Copyright 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule dangerousStyleValue */ var isUnitlessNumber = _CSSProperty2.default.isUnitlessNumber; var styleWarnings = {}; /** * Convert a value into the proper css writable value. The style name `name` * should be logical (no hyphens), as specified * in `CSSProperty.isUnitlessNumber`. * * @param {string} name CSS property name such as `topMargin`. * @param {*} value CSS property value such as `10px`. * @param {ReactDOMComponent} component * @return {string} Normalized style value with dimensions applied. */ function dangerousStyleValue(name, value, component) { // Note that we've removed escapeTextForBrowser() calls here since the // whole string will be escaped when the attribute is injected into // the markup. If you provide unsafe user data here they can inject // arbitrary CSS which may be problematic (I couldn't repro this): // https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet // http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-injection/ // This is not an XSS hole but instead a potential CSS injection issue // which has lead to a greater discussion about how we're going to // trust URLs moving forward. See #2115901 var isEmpty = value == null || typeof value === 'boolean' || value === ''; if (isEmpty) { return ''; } var isNonNumeric = isNaN(value); if (isNonNumeric || value === 0 || isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name]) { return '' + value; // cast to string } if (typeof value === 'string') { if (process.env.NODE_ENV !== 'production') { // Allow '0' to pass through without warning. 0 is already special and // doesn't require units, so we don't need to warn about it. if (component && value !== '0') { var owner = component._currentElement._owner; var ownerName = owner ? owner.getName() : null; if (ownerName && !styleWarnings[ownerName]) { styleWarnings[ownerName] = {}; } var warned = false; if (ownerName) { var warnings = styleWarnings[ownerName]; warned = warnings[name]; if (!warned) { warnings[name] = true; } } if (!warned) { process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(false, 'a `%s` tag (owner: `%s`) was passed a numeric string value ' + 'for CSS property `%s` (value: `%s`) which will be treated ' + 'as a unitless number in a future version of React.', component._currentElement.type, ownerName || 'unknown', name, value) : void 0; } } } value = value.trim(); } return value + 'px'; } exports.default = dangerousStyleValue; /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23))) /***/ }, /* 78 */ /***/ function(module, exports) { 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); /** * Copyright 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule CSSProperty */ /** * CSS properties which accept numbers but are not in units of "px". */ var isUnitlessNumber = { animationIterationCount: true, borderImageOutset: true, borderImageSlice: true, borderImageWidth: true, boxFlex: true, boxFlexGroup: true, boxOrdinalGroup: true, columnCount: true, flex: true, flexGrow: true, flexPositive: true, flexShrink: true, flexNegative: true, flexOrder: true, gridRow: true, gridColumn: true, fontWeight: true, lineClamp: true, lineHeight: true, opacity: true, order: true, orphans: true, tabSize: true, widows: true, zIndex: true, zoom: true, // SVG-related properties fillOpacity: true, floodOpacity: true, stopOpacity: true, strokeDasharray: true, strokeDashoffset: true, strokeMiterlimit: true, strokeOpacity: true, strokeWidth: true }; /** * @param {string} prefix vendor-specific prefix, eg: Webkit * @param {string} key style name, eg: transitionDuration * @return {string} style name prefixed with `prefix`, properly camelCased, eg: * WebkitTransitionDuration */ function prefixKey(prefix, key) { return prefix + key.charAt(0).toUpperCase() + key.substring(1); } /** * Support style names that may come passed in prefixed by adding permutations * of vendor prefixes. */ var prefixes = ['Webkit', 'ms', 'Moz', 'O']; // Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an // infinite loop, because it iterates over the newly added props too. Object.keys(isUnitlessNumber).forEach(function (prop) { prefixes.forEach(function (prefix) { isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop]; }); }); /** * Most style properties can be unset by doing .style[prop] = '' but IE8 * doesn't like doing that with shorthand properties so for the properties that * IE8 breaks on, which are listed here, we instead unset each of the * individual properties. See http://bugs.jquery.com/ticket/12385. * The 4-value 'clock' properties like margin, padding, border-width seem to * behave without any problems. Curiously, list-style works too without any * special prodding. */ var shorthandPropertyExpansions = { background: { backgroundAttachment: true, backgroundColor: true, backgroundImage: true, backgroundPositionX: true, backgroundPositionY: true, backgroundRepeat: true }, backgroundPosition: { backgroundPositionX: true, backgroundPositionY: true }, border: { borderWidth: true, borderStyle: true, borderColor: true }, borderBottom: { borderBottomWidth: true, borderBottomStyle: true, borderBottomColor: true }, borderLeft: { borderLeftWidth: true, borderLeftStyle: true, borderLeftColor: true }, borderRight: { borderRightWidth: true, borderRightStyle: true, borderRightColor: true }, borderTop: { borderTopWidth: true, borderTopStyle: true, borderTopColor: true }, font: { fontStyle: true, fontVariant: true, fontWeight: true, fontSize: true, lineHeight: true, fontFamily: true }, outline: { outlineWidth: true, outlineStyle: true, outlineColor: true } }; var CSSProperty = { isUnitlessNumber: isUnitlessNumber, shorthandPropertyExpansions: shorthandPropertyExpansions }; exports.default = CSSProperty; /***/ }, /* 79 */ /***/ function(module, exports, __webpack_require__) { /** * Copyright (c) 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @typechecks */ 'use strict'; var hyphenate = __webpack_require__(80); var msPattern = /^ms-/; /** * Hyphenates a camelcased CSS property name, for example: * * > hyphenateStyleName('backgroundColor') * < "background-color" * > hyphenateStyleName('MozTransition') * < "-moz-transition" * > hyphenateStyleName('msTransition') * < "-ms-transition" * * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix * is converted to `-ms-`. * * @param {string} string * @return {string} */ function hyphenateStyleName(string) { return hyphenate(string).replace(msPattern, '-ms-'); } module.exports = hyphenateStyleName; /***/ }, /* 80 */ /***/ function(module, exports) { 'use strict'; /** * Copyright (c) 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * @typechecks */ var _uppercasePattern = /([A-Z])/g; /** * Hyphenates a camelcased string, for example: * * > hyphenate('backgroundColor') * < "background-color" * * For CSS style names, use `hyphenateStyleName` instead which works properly * with all vendor prefixes, including `ms`. * * @param {string} string * @return {string} */ function hyphenate(string) { return string.replace(_uppercasePattern, '-$1').toLowerCase(); } module.exports = hyphenate; /***/ }, /* 81 */ /***/ function(module, exports) { /** * Copyright (c) 2013-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * * * @typechecks static-only */ 'use strict'; /** * Memoizes the return value of a function that accepts one string argument. */ function memoizeStringOnly(callback) { var cache = {}; return function (string) { if (!cache.hasOwnProperty(string)) { cache[string] = callback.call(this, string); } return cache[string]; }; } module.exports = memoizeStringOnly; /***/ }, /* 82 */ /***/ function(module, exports) { 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; exports.default = clean; // Returns true for null, false, undefined and {} function isFalsy(value) { return value === null || value === undefined || value === false || (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && Object.keys(value).length === 0; } function cleanObject(object) { if (isFalsy(object)) return null; if ((typeof object === 'undefined' ? 'undefined' : _typeof(object)) !== 'object') return object; var acc = {}, keys = Object.keys(object), hasFalsy = false; for (var i = 0; i < keys.length; i++) { var value = object[keys[i]]; var filteredValue = clean(value); if (filteredValue === null || filteredValue !== value) { hasFalsy = true; } if (filteredValue !== null) { acc[keys[i]] = filteredValue; } } return Object.keys(acc).length === 0 ? null : hasFalsy ? acc : object; } function cleanArray(rules) { var hasFalsy = false; var filtered = []; rules.forEach(function (rule) { var filteredRule = clean(rule); if (filteredRule === null || filteredRule !== rule) { hasFalsy = true; } if (filteredRule !== null) { filtered.push(filteredRule); } }); return filtered.length == 0 ? null : hasFalsy ? filtered : rules; } // Takes style array or object provided by user and clears all the falsy data // If there is no styles left after filtration returns null function clean(input) { return Array.isArray(input) ? cleanArray(input) : cleanObject(input); } /***/ }, /* 83 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; exports.PluginSet = PluginSet; exports.fallbacks = fallbacks; exports.prefixes = prefixes; var _objectAssign = __webpack_require__(72); var _objectAssign2 = _interopRequireDefault(_objectAssign); var _CSSPropertyOperations = __webpack_require__(74); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var isDev = function (x) { return x === 'development' || !x; }(process.env.NODE_ENV); function PluginSet(initial) { this.fns = initial || []; } (0, _objectAssign2.default)(PluginSet.prototype, { add: function add() { var _this = this; for (var _len = arguments.length, fns = Array(_len), _key = 0; _key < _len; _key++) { fns[_key] = arguments[_key]; } fns.forEach(function (fn) { if (_this.fns.indexOf(fn) >= 0) { if (isDev) { console.warn('adding the same plugin again, ignoring'); //eslint-disable-line no-console } } else { _this.fns = [fn].concat(_this.fns); } }); }, remove: function remove(fn) { this.fns = this.fns.filter(function (x) { return x !== fn; }); }, clear: function clear() { this.fns = []; }, transform: function transform(o) { return this.fns.reduce(function (o, fn) { return fn(o); }, o); } }); function fallbacks(node) { var hasArray = Object.keys(node.style).map(function (x) { return Array.isArray(node.style[x]); }).indexOf(true) >= 0; if (hasArray) { var _ret = function () { var style = node.style; var flattened = Object.keys(style).reduce(function (o, key) { o[key] = Array.isArray(style[key]) ? style[key].join('; ' + (0, _CSSPropertyOperations.processStyleName)(key) + ': ') : style[key]; return o; }, {}); // todo - // flatten arrays which haven't been flattened yet return { v: (0, _objectAssign2.default)({}, node, { style: flattened }) }; }(); if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v; } return node; } var prefixAll = __webpack_require__(84); function prefixes(node) { return (0, _objectAssign2.default)({}, node, { style: prefixAll(node.style) }); } /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23))) /***/ }, /* 84 */ /***/ function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;'use strict'; var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; (function (global, factory) { ( false ? 'undefined' : _typeof(exports)) === 'object' && typeof module !== 'undefined' ? module.exports = factory() : true ? !(__WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)) : global.InlineStylePrefixAll = factory(); })(undefined, function () { 'use strict'; var babelHelpers = {}; babelHelpers.classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; babelHelpers.createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); babelHelpers.defineProperty = function (obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }; babelHelpers; function __commonjs(fn, module) { return module = { exports: {} }, fn(module, module.exports), module.exports; } var prefixProps = { "Webkit": { "transform": true, "transformOrigin": true, "transformOriginX": true, "transformOriginY": true, "backfaceVisibility": true, "perspective": true, "perspectiveOrigin": true, "transformStyle": true, "transformOriginZ": true, "animation": true, "animationDelay": true, "animationDirection": true, "animationFillMode": true, "animationDuration": true, "animationIterationCount": true, "animationName": true, "animationPlayState": true, "animationTimingFunction": true, "appearance": true, "userSelect": true, "fontKerning": true, "textEmphasisPosition": true, "textEmphasis": true, "textEmphasisStyle": true, "textEmphasisColor": true, "boxDecorationBreak": true, "clipPath": true, "maskImage": true, "maskMode": true, "maskRepeat": true, "maskPosition": true, "maskClip": true, "maskOrigin": true, "maskSize": true, "maskComposite": true, "mask": true, "maskBorderSource": true, "maskBorderMode": true, "maskBorderSlice": true, "maskBorderWidth": true, "maskBorderOutset": true, "maskBorderRepeat": true, "maskBorder": true, "maskType": true, "textDecorationStyle": true, "textDecorationSkip": true, "textDecorationLine": true, "textDecorationColor": true, "filter": true, "fontFeatureSettings": true, "breakAfter": true, "breakBefore": true, "breakInside": true, "columnCount": true, "columnFill": true, "columnGap": true, "columnRule": true, "columnRuleColor": true, "columnRuleStyle": true, "columnRuleWidth": true, "columns": true, "columnSpan": true, "columnWidth": true, "flex": true, "flexBasis": true, "flexDirection": true, "flexGrow": true, "flexFlow": true, "flexShrink": true, "flexWrap": true, "alignContent": true, "alignItems": true, "alignSelf": true, "justifyContent": true, "order": true, "backdropFilter": true, "scrollSnapType": true, "scrollSnapPointsX": true, "scrollSnapPointsY": true, "scrollSnapDestination": true, "scrollSnapCoordinate": true, "shapeImageThreshold": true, "shapeImageMargin": true, "shapeImageOutside": true, "hyphens": true, "flowInto": true, "flowFrom": true, "regionFragment": true, "textSizeAdjust": true, "transition": true, "transitionDelay": true, "transitionDuration": true, "transitionProperty": true, "transitionTimingFunction": true }, "Moz": { "appearance": true, "userSelect": true, "boxSizing": true, "textAlignLast": true, "textDecorationStyle": true, "textDecorationSkip": true, "textDecorationLine": true, "textDecorationColor": true, "tabSize": true, "hyphens": true, "fontFeatureSettings": true, "breakAfter": true, "breakBefore": true, "breakInside": true, "columnCount": true, "columnFill": true, "columnGap": true, "columnRule": true, "columnRuleColor": true, "columnRuleStyle": true, "columnRuleWidth": true, "columns": true, "columnSpan": true, "columnWidth": true }, "ms": { "flex": true, "flexBasis": false, "flexDirection": true, "flexGrow": false, "flexFlow": true, "flexShrink": false, "flexWrap": true, "alignContent": false, "alignItems": false, "alignSelf": false, "justifyContent": false, "order": false, "userSelect": true, "wrapFlow": true, "wrapThrough": true, "wrapMargin": true, "scrollSnapType": true, "scrollSnapPointsX": true, "scrollSnapPointsY": true, "scrollSnapDestination": true, "scrollSnapCoordinate": true, "touchAction": true, "hyphens": true, "flowInto": true, "flowFrom": true, "breakBefore": true, "breakAfter": true, "breakInside": true, "regionFragment": true, "gridTemplateColumns": true, "gridTemplateRows": true, "gridTemplateAreas": true, "gridTemplate": true, "gridAutoColumns": true, "gridAutoRows": true, "gridAutoFlow": true, "grid": true, "gridRowStart": true, "gridColumnStart": true, "gridRowEnd": true, "gridRow": true, "gridColumn": true, "gridColumnEnd": true, "gridColumnGap": true, "gridRowGap": true, "gridArea": true, "gridGap": true, "textSizeAdjust": true } }; // helper to capitalize strings var capitalizeString = function capitalizeString(str) { return str.charAt(0).toUpperCase() + str.slice(1); }; var isPrefixedProperty = function isPrefixedProperty(property) { return property.match(/^(Webkit|Moz|O|ms)/) !== null; }; function sortPrefixedStyle(style) { return Object.keys(style).sort(function (left, right) { if (isPrefixedProperty(left) && !isPrefixedProperty(right)) { return -1; } else if (!isPrefixedProperty(left) && isPrefixedProperty(right)) { return 1; } return 0; }).reduce(function (sortedStyle, prop) { sortedStyle[prop] = style[prop]; return sortedStyle; }, {}); } function position(property, value) { if (property === 'position' && value === 'sticky') { return { position: ['-webkit-sticky', 'sticky'] }; } } // returns a style object with a single concated prefixed value string var joinPrefixedValue = function joinPrefixedValue(property, value) { var replacer = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (prefix, value) { return prefix + value; }; return babelHelpers.defineProperty({}, property, ['-webkit-', '-moz-', ''].map(function (prefix) { return replacer(prefix, value); })); }; var isPrefixedValue = function isPrefixedValue(value) { if (Array.isArray(value)) value = value.join(','); return value.match(/-webkit-|-moz-|-ms-/) !== null; }; function calc(property, value) { if (typeof value === 'string' && !isPrefixedValue(value) && value.indexOf('calc(') > -1) { return joinPrefixedValue(property, value, function (prefix, value) { return value.replace(/calc\(/g, prefix + 'calc('); }); } } var values = { 'zoom-in': true, 'zoom-out': true, grab: true, grabbing: true }; function cursor(property, value) { if (property === 'cursor' && values[value]) { return joinPrefixedValue(property, value); } } var values$1 = { flex: true, 'inline-flex': true }; function flex(property, value) { if (property === 'display' && values$1[value]) { return { display: ['-webkit-box', '-moz-box', '-ms-' + value + 'box', '-webkit-' + value, value] }; } } var properties = { maxHeight: true, maxWidth: true, width: true, height: true, columnWidth: true, minWidth: true, minHeight: true }; var values$2 = { 'min-content': true, 'max-content': true, 'fill-available': true, 'fit-content': true, 'contain-floats': true }; function sizing(property, value) { if (properties[property] && values$2[value]) { return joinPrefixedValue(property, value); } } var values$3 = /linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient/; function gradient(property, value) { if (typeof value === 'string' && !isPrefixedValue(value) && value.match(values$3) !== null) { return joinPrefixedValue(property, value); } } var index = __commonjs(function (module) { 'use strict'; var uppercasePattern = /[A-Z]/g; var msPattern = /^ms-/; var cache = {}; function hyphenateStyleName(string) { return string in cache ? cache[string] : cache[string] = string.replace(uppercasePattern, '-$&').toLowerCase().replace(msPattern, '-ms-'); } module.exports = hyphenateStyleName; }); var hyphenateStyleName = index && (typeof index === 'undefined' ? 'undefined' : _typeof(index)) === 'object' && 'default' in index ? index['default'] : index; var properties$1 = { transition: true, transitionProperty: true, WebkitTransition: true, WebkitTransitionProperty: true }; function transition(property, value) { // also check for already prefixed transitions if (typeof value === 'string' && properties$1[property]) { var _ref2; var outputValue = prefixValue(value); var webkitOutput = outputValue.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter(function (value) { return value.match(/-moz-|-ms-/) === null; }).join(','); // if the property is already prefixed if (property.indexOf('Webkit') > -1) { return babelHelpers.defineProperty({}, property, webkitOutput); } return _ref2 = {}, babelHelpers.defineProperty(_ref2, 'Webkit' + capitalizeString(property), webkitOutput), babelHelpers.defineProperty(_ref2, property, outputValue), _ref2; } } function prefixValue(value) { if (isPrefixedValue(value)) { return value; } // only split multi values, not cubic beziers var multipleValues = value.split(/,(?![^()]*(?:\([^()]*\))?\))/g); // iterate each single value and check for transitioned properties // that need to be prefixed as well multipleValues.forEach(function (val, index) { multipleValues[index] = Object.keys(prefixProps).reduce(function (out, prefix) { var dashCasePrefix = '-' + prefix.toLowerCase() + '-'; Object.keys(prefixProps[prefix]).forEach(function (prop) { var dashCaseProperty = hyphenateStyleName(prop); if (val.indexOf(dashCaseProperty) > -1 && dashCaseProperty !== 'order') { // join all prefixes and create a new value out = val.replace(dashCaseProperty, dashCasePrefix + dashCaseProperty) + ',' + out; } }); return out; }, val); }); return multipleValues.join(','); } var alternativeValues = { 'space-around': 'distribute', 'space-between': 'justify', 'flex-start': 'start', 'flex-end': 'end' }; var alternativeProps = { alignContent: 'msFlexLinePack', alignSelf: 'msFlexItemAlign', alignItems: 'msFlexAlign', justifyContent: 'msFlexPack', order: 'msFlexOrder', flexGrow: 'msFlexPositive', flexShrink: 'msFlexNegative', flexBasis: 'msPreferredSize' }; function flexboxIE(property, value) { if (alternativeProps[property]) { return babelHelpers.defineProperty({}, alternativeProps[property], alternativeValues[value] || value); } } var alternativeValues$1 = { 'space-around': 'justify', 'space-between': 'justify', 'flex-start': 'start', 'flex-end': 'end', 'wrap-reverse': 'multiple', wrap: 'multiple' }; var alternativeProps$1 = { alignItems: 'WebkitBoxAlign', justifyContent: 'WebkitBoxPack', flexWrap: 'WebkitBoxLines' }; function flexboxOld(property, value) { if (property === 'flexDirection' && typeof value === 'string') { return { WebkitBoxOrient: value.indexOf('column') > -1 ? 'vertical' : 'horizontal', WebkitBoxDirection: value.indexOf('reverse') > -1 ? 'reverse' : 'normal' }; } if (alternativeProps$1[property]) { return babelHelpers.defineProperty({}, alternativeProps$1[property], alternativeValues$1[value] || value); } } var plugins = [position, calc, cursor, sizing, gradient, transition, flexboxIE, flexboxOld, flex]; /** * Returns a prefixed version of the style object using all vendor prefixes * @param {Object} styles - Style object that gets prefixed properties added * @returns {Object} - Style object with prefixed properties and values */ function prefixAll(styles) { Object.keys(styles).forEach(function (property) { var value = styles[property]; if (value instanceof Object && !Array.isArray(value)) { // recurse through nested style objects styles[property] = prefixAll(value); } else { Object.keys(prefixProps).forEach(function (prefix) { var properties = prefixProps[prefix]; // add prefixes if needed if (properties[property]) { styles[prefix + capitalizeString(property)] = value; } }); } }); Object.keys(styles).forEach(function (property) { [].concat(styles[property]).forEach(function (value, index) { // resolve every special plugins plugins.forEach(function (plugin) { return assignStyles(styles, plugin(property, value)); }); }); }); return sortPrefixedStyle(styles); } function assignStyles(base) { var extend = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; Object.keys(extend).forEach(function (property) { var baseValue = base[property]; if (Array.isArray(baseValue)) { [].concat(extend[property]).forEach(function (value) { var valueIndex = baseValue.indexOf(value); if (valueIndex > -1) { base[property].splice(valueIndex, 1); } base[property].push(value); }); } else { base[property] = extend[property]; } }); } return prefixAll; }); /***/ }, /* 85 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = doHash; // murmurhash2 via https://gist.github.com/raycmorgan/588423 function doHash(str, seed) { var m = 0x5bd1e995; var r = 24; var h = seed ^ str.length; var length = str.length; var currentIndex = 0; while (length >= 4) { var k = UInt32(str, currentIndex); k = Umul32(k, m); k ^= k >>> r; k = Umul32(k, m); h = Umul32(h, m); h ^= k; currentIndex += 4; length -= 4; } switch (length) { case 3: h ^= UInt16(str, currentIndex); h ^= str.charCodeAt(currentIndex + 2) << 16; h = Umul32(h, m); break; case 2: h ^= UInt16(str, currentIndex); h = Umul32(h, m); break; case 1: h ^= str.charCodeAt(currentIndex); h = Umul32(h, m); break; } h ^= h >>> 13; h = Umul32(h, m); h ^= h >>> 15; return h >>> 0; } function UInt32(str, pos) { return str.charCodeAt(pos++) + (str.charCodeAt(pos++) << 8) + (str.charCodeAt(pos++) << 16) + (str.charCodeAt(pos) << 24); } function UInt16(str, pos) { return str.charCodeAt(pos++) + (str.charCodeAt(pos++) << 8); } function Umul32(n, m) { n = n | 0; m = m | 0; var nlo = n & 0xffff; var nhi = n >>> 16; var res = nlo * m + ((nhi * m & 0xffff) << 16) | 0; return res; } /***/ }, /* 86 */ /***/ function(module, exports) { 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); // this will be an object of properties that map to their corresponding rtl property (their doppelganger) var propertiesToConvert = arrayToObject([['paddingLeft', 'paddingRight'], ['marginLeft', 'marginRight'], ['left', 'right'], ['borderLeft', 'borderRight'], ['borderLeftColor', 'borderRightColor'], ['borderLeftStyle', 'borderRightStyle'], ['borderTopLeftRadius', 'borderTopRightRadius'], ['borderBottomLeftRadius', 'borderBottomRightRadius']]); // this is the same as the propertiesToConvert except for values var valuesToConvert = arrayToObject([['ltr', 'rtl'], ['left', 'right'], ['w-resize', 'e-resize'], ['sw-resize', 'se-resize'], ['nw-resize', 'ne-resize']]); // some values require a little fudging, that fudging goes here. var propertyValueConverters = { padding: function padding(value) { if (isNumber(value)) { return value; } return handleQuartetValues(value); }, textShadow: function textShadow(value) { // intentionally leaving off the `g` flag here because we only want to change the first number (which is the offset-x) return value.replace(/(-*)([.|\d]+)/, function (match, negative, number) { if (number === '0') { return match; } var doubleNegative = negative === '' ? '-' : ''; return '' + doubleNegative + number; }); }, borderColor: function borderColor(value) { return handleQuartetValues(value); }, borderRadius: function borderRadius(value) { if (isNumber(value)) { return value; } if (includes(value, '/')) { var _value$split = value.split('/'), _value$split2 = _slicedToArray(_value$split, 2), radius1 = _value$split2[0], radius2 = _value$split2[1]; var convertedRadius1 = propertyValueConverters.borderRadius(radius1.trim()); var convertedRadius2 = propertyValueConverters.borderRadius(radius2.trim()); return convertedRadius1 + ' / ' + convertedRadius2; } var splitValues = getValuesAsList(value); switch (splitValues.length) { case 2: { return splitValues.reverse().join(' '); } case 4: { var _splitValues = _slicedToArray(splitValues, 4), topLeft = _splitValues[0], topRight = _splitValues[1], bottomRight = _splitValues[2], bottomLeft = _splitValues[3]; return [topRight, topLeft, bottomLeft, bottomRight].join(' '); } default: { return value; } } }, background: function background(value) { // Yeah, this is in need of a refactor 🙃... // but this property is a tough cookie 🍪 // get the backgroundPosition out of the string by removing everything that couldn't be the backgroundPosition value var backgroundPositionValue = value.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g, '').trim(); // replace that backgroundPosition value with the converted version value = value.replace(backgroundPositionValue, propertyValueConverters.backgroundPosition(backgroundPositionValue)); // do the backgroundImage value replacing on the whole value (because why not?) return propertyValueConverters.backgroundImage(value); }, backgroundImage: function backgroundImage(value) { if (!includes(value, 'url(')) { return value; } // sorry for the regex 😞, but basically this replaces _every_ instance of `ltr`, `rtl`, `right`, and `left` with // the corresponding opposite. A situation we're accepting here: // url('/left/right/rtl/ltr.png') will be changed to url('/right/left/ltr/rtl.png') // Definite trade-offs here, but I think it's a good call. return value.replace(/(^|\W|_)((ltr)|(rtl)|(left)|(right))(\W|_|$)/g, function (match, g1, group2) { return match.replace(group2, valuesToConvert[group2]); }); }, backgroundPosition: function backgroundPosition(value) { return value // intentionally only grabbing the first instance of this because that represents `left` .replace(/^((-|\d|\.)+%)/, function (match, group) { return calculateNewBackgroundPosition(group); }).replace(/(left)|(right)/, function (match) { return valuesToConvert[match]; }); }, backgroundPositionX: function backgroundPositionX(value) { if (isNumber(value)) { return value; } return propertyValueConverters.backgroundPosition(value); } }; propertyValueConverters.margin = propertyValueConverters.padding; propertyValueConverters.borderWidth = propertyValueConverters.padding; propertyValueConverters.boxShadow = propertyValueConverters.textShadow; propertyValueConverters.webkitBoxShadow = propertyValueConverters.textShadow; propertyValueConverters.mozBoxShadow = propertyValueConverters.textShadow; propertyValueConverters.borderStyle = propertyValueConverters.borderColor; // here's our main export! 👋 exports.default = convert; /** * converts properties and values in the CSS in JS object to their corresponding RTL values * @param {Object} object the CSS in JS object * @return {Object} the RTL converted object */ function convert(object) { return Object.keys(object).reduce(function (newObj, originalKey) { var originalValue = object[originalKey]; if (isString(originalValue)) { // you're welcome to later code 😺 originalValue = originalValue.trim(); } var _convertProperty = convertProperty(originalKey, originalValue), key = _convertProperty.key, value = _convertProperty.value; newObj[key] = value; return newObj; }, {}); } /** * Converts a property and its value to the corresponding RTL key and value * @param {String} originalKey the original property key * @param {Number|String|Object} originalValue the original css property value * @return {Object} the new {key, value} pair */ function convertProperty(originalKey, originalValue) { var isNoFlip = /\/\*\s?@noflip\s?\*\//.test(originalValue); var key = isNoFlip ? originalKey : getPropertyDoppelganger(originalKey); var value = isNoFlip ? originalValue : getValueDoppelganger(key, originalValue); return { key: key, value: value }; } /** * This gets the RTL version of the given property if it has a corresponding RTL property * @param {String} property the name of the property * @return {String} the name of the RTL property */ function getPropertyDoppelganger(property) { return propertiesToConvert[property] || property; } /** * This converts the given value to the RTL version of that value based on the key * @param {String} key this is the key (note: this should be the RTL version of the originalKey) * @param {String|Number|Object} originalValue the original css property value. If it's an object, then we'll convert that as well * @return {String|Number|Object} the converted value */ function getValueDoppelganger(key, originalValue) { /* eslint complexity:[2, 7] */ // let's try to keep the complexity down... If we have to do this much more, let's break this up if (isObject(originalValue)) { return convert(originalValue); // recurssion 🌀 } var isNum = isNumber(originalValue); var importantlessValue = isNum ? originalValue : originalValue.replace(/ !important.*?$/, ''); var isImportant = !isNum && importantlessValue.length !== originalValue.length; var valueConverter = propertyValueConverters[key]; var newValue = void 0; if (valueConverter) { newValue = valueConverter(importantlessValue); } else { newValue = valuesToConvert[importantlessValue] || importantlessValue; } if (isImportant) { return newValue + ' !important'; } return newValue; } /** * This takes a list of CSS values and converts it to an array * @param {String} value - something like `1px`, `1px 2em`, or `3pt rgb(150, 230, 550) 40px calc(100% - 5px)` * @return {Array} the split values (for example: `['3pt', 'rgb(150, 230, 550)', '40px', 'calc(100% - 5px)']`) */ function getValuesAsList(value) { return value.replace(/ +/g, ' ') // remove all extraneous spaces .split(' ').map(function (i) { return i.trim(); }) // get rid of extra space before/after each item .filter(Boolean) // get rid of empty strings // join items which are within parenthese // luckily `calc (100% - 5px)` is invalid syntax and it must be `calc(100% - 5px)`, otherwise this would be even more complex .reduce(function (_ref, item) { var list = _ref.list, state = _ref.state; var openParansCount = (item.match(/\(/g) || []).length; var closedParansCount = (item.match(/\)/g) || []).length; if (state.parensDepth > 0) { list[list.length - 1] = list[list.length - 1] + ' ' + item; } else { list.push(item); } state.parensDepth += openParansCount - closedParansCount; return { list: list, state: state }; }, { list: [], state: { parensDepth: 0 } }).list; } /** * This is intended for properties that are `top right bottom left` and will switch them to `top left bottom right` * @param {String} value - `1px 2px 3px 4px` for example, but also handles cases where there are too few/too many and * simply returns the value in those cases (which is the correct behavior) * @return {String} the result - `1px 4px 3px 2px` for example. */ function handleQuartetValues(value) { var splitValues = getValuesAsList(value); if (splitValues.length <= 3 || splitValues.length > 4) { return value; } var _splitValues2 = _slicedToArray(splitValues, 4), top = _splitValues2[0], right = _splitValues2[1], bottom = _splitValues2[2], left = _splitValues2[3]; return [top, left, bottom, right].join(' '); } /** * Takes a percentage for background position and inverts it. * This was copied and modified from CSSJanus: * https://github.com/cssjanus/cssjanus/blob/4245f834365f6cfb0239191a151432fb85abab23/src/cssjanus.js#L152-L175 * @param {String} value - the original value (for example 77%) * @return {String} the result (for example 23%) */ function calculateNewBackgroundPosition(value) { var idx = value.indexOf('.'); if (idx === -1) { value = 100 - parseFloat(value) + '%'; } else { // Two off, one for the "%" at the end, one for the dot itself var len = value.length - idx - 2; value = 100 - parseFloat(value); value = value.toFixed(len) + '%'; } return value; } /** * Takes an array of [keyValue1, keyValue2] pairs and creates an object of {keyValue1: keyValue2, keyValue2: keyValue1} * @param {Array} array the array of pairs * @return {Object} the {key, value} pair object */ function arrayToObject(array) { return array.reduce(function (obj, _ref2) { var _ref3 = _slicedToArray(_ref2, 2), prop1 = _ref3[0], prop2 = _ref3[1]; obj[prop1] = prop2; obj[prop2] = prop1; return obj; }, {}); } function isNumber(val) { return typeof val === 'number'; } function isObject(val) { return (typeof val === 'undefined' ? 'undefined' : _typeof(val)) === 'object'; } function isString(val) { return typeof val === 'string'; } function includes(inclusive, inclusee) { return inclusive.indexOf(inclusee) !== -1; } /***/ }, /* 87 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(88)); __export(__webpack_require__(89)); __export(__webpack_require__(94)); __export(__webpack_require__(96)); __export(__webpack_require__(98)); __export(__webpack_require__(90)); __export(__webpack_require__(99)); __export(__webpack_require__(100)); __export(__webpack_require__(101)); __export(__webpack_require__(102)); __export(__webpack_require__(103)); __export(__webpack_require__(104)); __export(__webpack_require__(92)); __export(__webpack_require__(105)); __export(__webpack_require__(106)); __export(__webpack_require__(107)); __export(__webpack_require__(108)); __export(__webpack_require__(109)); __export(__webpack_require__(97)); __export(__webpack_require__(110)); __export(__webpack_require__(111)); __export(__webpack_require__(112)); __export(__webpack_require__(113)); __export(__webpack_require__(91)); __export(__webpack_require__(114)); __export(__webpack_require__(95)); __export(__webpack_require__(115)); /***/ }, /* 88 */ /***/ function(module, exports) { /** * Bugs often appear in async code when stuff gets disposed, but async operations don't get canceled. * This Async helper class solves these issues by tying async code to the lifetime of a disposable object. * * Usage: Anything class extending from BaseModel can access this helper via this.async. Otherwise create a * new instance of the class and remember to call dispose() during your code's dispose handler. */ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Async = (function () { function Async(parent, onError) { this._timeoutIds = null; this._immediateIds = null; this._intervalIds = null; this._animationFrameIds = null; this._isDisposed = false; this._parent = parent || null; this._onErrorHandler = onError; this._noop = function () { }; } /** * Dispose function, clears all async operations. */ Async.prototype.dispose = function () { var id; this._isDisposed = true; this._parent = null; // Clear timeouts. if (this._timeoutIds) { for (id in this._timeoutIds) { if (this._timeoutIds.hasOwnProperty(id)) { this.clearTimeout(id); } } this._timeoutIds = null; } // Clear immediates. if (this._immediateIds) { for (id in this._immediateIds) { if (this._immediateIds.hasOwnProperty(id)) { this.clearImmediate(id); } } this._immediateIds = null; } // Clear intervals. if (this._intervalIds) { for (id in this._intervalIds) { if (this._intervalIds.hasOwnProperty(id)) { this.clearInterval(id); } } this._intervalIds = null; } // Clear animation frames. if (this._animationFrameIds) { for (id in this._animationFrameIds) { if (this._animationFrameIds.hasOwnProperty(id)) { this.cancelAnimationFrame(id); } } this._animationFrameIds = null; } }; /** * SetTimeout override, which will auto cancel the timeout during dispose. * @param callback - Callback to execute. * @param duration - Duration in milliseconds. * @returns The setTimeout id. */ Async.prototype.setTimeout = function (callback, duration) { var _this = this; var timeoutId = 0; if (!this._isDisposed) { if (!this._timeoutIds) { this._timeoutIds = {}; } /* tslint:disable:ban-native-functions */ timeoutId = setTimeout(function () { // Time to execute the timeout, enqueue it as a foreground task to be executed. try { // Now delete the record and call the callback. delete _this._timeoutIds[timeoutId]; callback.apply(_this._parent); } catch (e) { if (_this._onErrorHandler) { _this._onErrorHandler(e); } } }, duration); /* tslint:enable:ban-native-functions */ this._timeoutIds[timeoutId] = true; } return timeoutId; }; /** * Clears the timeout. * @param id - Id to cancel. */ Async.prototype.clearTimeout = function (id) { if (this._timeoutIds && this._timeoutIds[id]) { /* tslint:disable:ban-native-functions */ clearTimeout(id); delete this._timeoutIds[id]; /* tslint:enable:ban-native-functions */ } }; /** * SetImmediate override, which will auto cancel the immediate during dispose. * @param callback - Callback to execute. * @returns The setTimeout id. */ Async.prototype.setImmediate = function (callback) { var _this = this; var immediateId = 0; if (!this._isDisposed) { if (!this._immediateIds) { this._immediateIds = {}; } /* tslint:disable:ban-native-functions */ var setImmediateCallback = function () { // Time to execute the timeout, enqueue it as a foreground task to be executed. try { // Now delete the record and call the callback. delete _this._immediateIds[immediateId]; callback.apply(_this._parent); } catch (e) { _this._logError(e); } }; immediateId = window.setImmediate ? window.setImmediate(setImmediateCallback) : window.setTimeout(setImmediateCallback, 0); /* tslint:enable:ban-native-functions */ this._immediateIds[immediateId] = true; } return immediateId; }; /** * Clears the immediate. * @param id - Id to cancel. */ Async.prototype.clearImmediate = function (id) { if (this._immediateIds && this._immediateIds[id]) { /* tslint:disable:ban-native-functions */ window.clearImmediate ? window.clearImmediate(id) : window.clearTimeout(id); delete this._immediateIds[id]; /* tslint:enable:ban-native-functions */ } }; /** * SetInterval override, which will auto cancel the timeout during dispose. * @param callback - Callback to execute. * @param duration - Duration in milliseconds. * @returns The setTimeout id. */ Async.prototype.setInterval = function (callback, duration) { var _this = this; var intervalId = 0; if (!this._isDisposed) { if (!this._intervalIds) { this._intervalIds = {}; } /* tslint:disable:ban-native-functions */ intervalId = setInterval(function () { // Time to execute the interval callback, enqueue it as a foreground task to be executed. try { callback.apply(_this._parent); } catch (e) { _this._logError(e); } }, duration); /* tslint:enable:ban-native-functions */ this._intervalIds[intervalId] = true; } return intervalId; }; /** * Clears the interval. * @param id - Id to cancel. */ Async.prototype.clearInterval = function (id) { if (this._intervalIds && this._intervalIds[id]) { /* tslint:disable:ban-native-functions */ clearInterval(id); delete this._intervalIds[id]; /* tslint:enable:ban-native-functions */ } }; /** * Creates a function that, when executed, will only call the func function at most once per * every wait milliseconds. Provide an options object to indicate that func should be invoked * on the leading and/or trailing edge of the wait timeout. Subsequent calls to the throttled * function will return the result of the last func call. * * Note: If leading and trailing options are true func will be called on the trailing edge of * the timeout only if the the throttled function is invoked more than once during the wait timeout. * * @param func - The function to throttle. * @param wait - The number of milliseconds to throttle executions to. Defaults to 0. * @param options - The options object. * @returns The new throttled function. */ Async.prototype.throttle = function (func, wait, options) { var _this = this; if (this._isDisposed) { return this._noop; } var waitMS = wait || 0; var leading = true; var trailing = true; var lastExecuteTime = 0; var lastResult; var lastArgs; var timeoutId = null; if (options && typeof (options.leading) === 'boolean') { leading = options.leading; } if (options && typeof (options.trailing) === 'boolean') { trailing = options.trailing; } var callback = function (userCall) { var now = (new Date).getTime(); var delta = now - lastExecuteTime; var waitLength = leading ? waitMS - delta : waitMS; if (delta >= waitMS && (!userCall || leading)) { lastExecuteTime = now; if (timeoutId) { _this.clearTimeout(timeoutId); timeoutId = null; } lastResult = func.apply(_this._parent, lastArgs); } else if (timeoutId === null && trailing) { timeoutId = _this.setTimeout(callback, waitLength); } return lastResult; }; var resultFunction = function () { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } lastArgs = args; return callback(true); }; return resultFunction; }; /** * Creates a function that will delay the execution of func until after wait milliseconds have * elapsed since the last time it was invoked. Provide an options object to indicate that func * should be invoked on the leading and/or trailing edge of the wait timeout. Subsequent calls * to the debounced function will return the result of the last func call. * * Note: If leading and trailing options are true func will be called on the trailing edge of * the timeout only if the the debounced function is invoked more than once during the wait * timeout. * * @param func - The function to debounce. * @param wait - The number of milliseconds to delay. * @param options - The options object. * @returns The new debounced function. */ Async.prototype.debounce = function (func, wait, options) { var _this = this; if (this._isDisposed) { return this._noop; } var waitMS = wait || 0; var leading = false; var trailing = true; var maxWait = null; var lastCallTime = 0; var lastExecuteTime = (new Date).getTime(); var lastResult; var lastArgs; var timeoutId = null; if (options && typeof (options.leading) === 'boolean') { leading = options.leading; } if (options && typeof (options.trailing) === 'boolean') { trailing = options.trailing; } if (options && typeof (options.maxWait) === 'number' && !isNaN(options.maxWait)) { maxWait = options.maxWait; } var callback = function (userCall) { var now = (new Date).getTime(); var executeImmediately = false; if (userCall) { if (leading && now - lastCallTime >= waitMS) { executeImmediately = true; } lastCallTime = now; } var delta = now - lastCallTime; var waitLength = waitMS - delta; var maxWaitDelta = now - lastExecuteTime; var maxWaitExpired = false; if (maxWait !== null) { // maxWait only matters when there is a pending callback if (maxWaitDelta >= maxWait && timeoutId) { maxWaitExpired = true; } else { waitLength = Math.min(waitLength, maxWait - maxWaitDelta); } } if (delta >= waitMS || maxWaitExpired || executeImmediately) { if (timeoutId) { _this.clearTimeout(timeoutId); timeoutId = null; } lastExecuteTime = now; lastResult = func.apply(_this._parent, lastArgs); } else if ((timeoutId === null || !userCall) && trailing) { timeoutId = _this.setTimeout(callback, waitLength); } return lastResult; }; var resultFunction = function () { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } lastArgs = args; return callback(true); }; return resultFunction; }; Async.prototype.requestAnimationFrame = function (callback) { var _this = this; var animationFrameId = 0; if (!this._isDisposed) { if (!this._animationFrameIds) { this._animationFrameIds = {}; } /* tslint:disable:ban-native-functions */ var animationFrameCallback = function () { try { // Now delete the record and call the callback. delete _this._animationFrameIds[animationFrameId]; callback.apply(_this._parent); } catch (e) { _this._logError(e); } }; animationFrameId = window.requestAnimationFrame ? window.requestAnimationFrame(animationFrameCallback) : window.setTimeout(animationFrameCallback, 0); /* tslint:enable:ban-native-functions */ this._animationFrameIds[animationFrameId] = true; } return animationFrameId; }; Async.prototype.cancelAnimationFrame = function (id) { if (this._animationFrameIds && this._animationFrameIds[id]) { /* tslint:disable:ban-native-functions */ window.cancelAnimationFrame ? window.cancelAnimationFrame(id) : window.clearTimeout(id); /* tslint:enable:ban-native-functions */ delete this._animationFrameIds[id]; } }; Async.prototype._logError = function (e) { if (this._onErrorHandler) { this._onErrorHandler(e); } }; return Async; }()); exports.Async = Async; /***/ }, /* 89 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var EventGroup_1 = __webpack_require__(90); var scroll_1 = __webpack_require__(91); var dom_1 = __webpack_require__(92); var SCROLL_ITERATION_DELAY = 16; var SCROLL_GUTTER_HEIGHT = 100; var MAX_SCROLL_VELOCITY = 15; /** * AutoScroll simply hooks up mouse events given a parent element, and scrolls the container * up/down depending on how close the mouse is to the top/bottom of the container. * * Once you don't want autoscroll any more, just dispose the helper and it will unhook events. */ var AutoScroll = (function () { function AutoScroll(element) { this._events = new EventGroup_1.EventGroup(this); this._scrollableParent = scroll_1.findScrollableParent(element); this._incrementScroll = this._incrementScroll.bind(this); this._scrollRect = dom_1.getRect(this._scrollableParent); if (this._scrollableParent === window) { this._scrollableParent = document.body; } if (this._scrollableParent) { this._events.on(window, 'mousemove', this._onMouseMove, true); this._events.on(window, 'touchmove', this._onTouchMove, true); } } AutoScroll.prototype.dispose = function () { this._events.dispose(); this._stopScroll(); }; AutoScroll.prototype._onMouseMove = function (ev) { this._computeScrollVelocity(ev.clientY); }; AutoScroll.prototype._onTouchMove = function (ev) { if (ev.touches.length > 0) { this._computeScrollVelocity(ev.touches[0].clientY); } }; AutoScroll.prototype._computeScrollVelocity = function (clientY) { var scrollRectTop = this._scrollRect.top; var scrollClientBottom = scrollRectTop + this._scrollRect.height - SCROLL_GUTTER_HEIGHT; if (clientY < (scrollRectTop + SCROLL_GUTTER_HEIGHT)) { this._scrollVelocity = Math.max(-MAX_SCROLL_VELOCITY, -MAX_SCROLL_VELOCITY * ((SCROLL_GUTTER_HEIGHT - (clientY - scrollRectTop)) / SCROLL_GUTTER_HEIGHT)); } else if (clientY > scrollClientBottom) { this._scrollVelocity = Math.min(MAX_SCROLL_VELOCITY, MAX_SCROLL_VELOCITY * ((clientY - scrollClientBottom) / SCROLL_GUTTER_HEIGHT)); } else { this._scrollVelocity = 0; } if (this._scrollVelocity) { this._startScroll(); } else { this._stopScroll(); } }; AutoScroll.prototype._startScroll = function () { if (!this._timeoutId) { this._incrementScroll(); } }; AutoScroll.prototype._incrementScroll = function () { this._scrollableParent.scrollTop += Math.round(this._scrollVelocity); this._timeoutId = setTimeout(this._incrementScroll, SCROLL_ITERATION_DELAY); }; AutoScroll.prototype._stopScroll = function () { if (this._timeoutId) { clearTimeout(this._timeoutId); delete this._timeoutId; } }; return AutoScroll; }()); exports.AutoScroll = AutoScroll; /***/ }, /* 90 */ /***/ function(module, exports) { /* tslint:disable:no-string-literal */ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** An instance of EventGroup allows anything with a handle to it to trigger events on it. * If the target is an HTMLElement, the event will be attached to the element and can be * triggered as usual (like clicking for onclick). * The event can be triggered by calling EventGroup.raise() here. If the target is an * HTMLElement, the event gets raised and is handled by the browser. Otherwise, it gets * handled here in EventGroup, and the handler is called in the context of the parent * (which is passed in in the constructor). */ var EventGroup = (function () { /** parent: the context in which events attached to non-HTMLElements are called */ function EventGroup(parent) { this._id = EventGroup._uniqueId++; this._parent = parent; this._eventRecords = []; } /** For IE8, bubbleEvent is ignored here and must be dealt with by the handler. * Events raised here by default have bubbling set to false and cancelable set to true. * This applies also to built-in events being raised manually here on HTMLElements, * which may lead to unexpected behavior if it differs from the defaults. */ EventGroup.raise = function (target, eventName, eventArgs, bubbleEvent) { var retVal; if (EventGroup._isElement(target)) { if (document.createEvent) { var ev = document.createEvent('HTMLEvents'); ev.initEvent(eventName, bubbleEvent, true); ev['args'] = eventArgs; retVal = target.dispatchEvent(ev); } else if (document['createEventObject']) { var evObj = document['createEventObject'](eventArgs); // cannot set cancelBubble on evObj, fireEvent will overwrite it target.fireEvent('on' + eventName, evObj); } } else { while (target && retVal !== false) { var events = target.__events__; var eventRecords = events ? events[eventName] : null; for (var id in eventRecords) { if (eventRecords.hasOwnProperty(id)) { var eventRecordList = eventRecords[id]; for (var listIndex = 0; retVal !== false && listIndex < eventRecordList.length; listIndex++) { var record = eventRecordList[listIndex]; if (record.objectCallback) { retVal = record.objectCallback.call(record.parent, eventArgs); } } } } // If the target has a parent, bubble the event up. target = bubbleEvent ? target.parent : null; } } return retVal; }; EventGroup.isObserved = function (target, eventName) { var events = target && target.__events__; return !!events && !!events[eventName]; }; /** Check to see if the target has declared support of the given event. */ EventGroup.isDeclared = function (target, eventName) { var declaredEvents = target && target.__declaredEvents; return !!declaredEvents && !!declaredEvents[eventName]; }; EventGroup.stopPropagation = function (event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } }; EventGroup._isElement = function (target) { return !!target && (target.addEventListener || target instanceof HTMLElement); }; EventGroup.prototype.dispose = function () { if (!this._isDisposed) { this._isDisposed = true; this.off(); this._parent = null; } }; /** On the target, attach a set of events, where the events object is a name to function mapping. */ EventGroup.prototype.onAll = function (target, events, useCapture) { for (var eventName in events) { if (events.hasOwnProperty(eventName)) { this.on(target, eventName, events[eventName], useCapture); } } }; /** On the target, attach an event whose handler will be called in the context of the parent * of this instance of EventGroup. */ EventGroup.prototype.on = function (target, eventName, callback, useCapture) { var _this = this; if (eventName.indexOf(',') > -1) { var events = eventName.split(/[ ,]+/); for (var i = 0; i < events.length; i++) { this.on(target, events[i], callback, useCapture); } } else { var parent_1 = this._parent; var eventRecord = { target: target, eventName: eventName, parent: parent_1, callback: callback, objectCallback: null, elementCallback: null, useCapture: useCapture }; // Initialize and wire up the record on the target, so that it can call the callback if the event fires. var events = (target.__events__ = target.__events__ || {}); events[eventName] = events[eventName] || { count: 0 }; events[eventName][this._id] = events[eventName][this._id] || []; events[eventName][this._id].push(eventRecord); events[eventName].count++; if (EventGroup._isElement(target)) { var processElementEvent = function () { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } if (_this._isDisposed) { return; } var result; try { result = callback.apply(parent_1, args); if (result === false && args[0]) { var e = args[0]; if (e.preventDefault) { e.preventDefault(); } if (e.stopPropagation) { e.stopPropagation(); } e.cancelBubble = true; } } catch (e) { /* ErrorHelper.log(e); */ } return result; }; eventRecord.elementCallback = processElementEvent; if (target.addEventListener) { /* tslint:disable:ban-native-functions */ target.addEventListener(eventName, processElementEvent, useCapture); /* tslint:enable:ban-native-functions */ } else if (target.attachEvent) { target.attachEvent('on' + eventName, processElementEvent); } } else { var processObjectEvent = function () { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } if (_this._isDisposed) { return; } return callback.apply(parent_1, args); }; eventRecord.objectCallback = processObjectEvent; } // Remember the record locally, so that it can be removed. this._eventRecords.push(eventRecord); } }; EventGroup.prototype.off = function (target, eventName, callback, useCapture) { for (var i = 0; i < this._eventRecords.length; i++) { var eventRecord = this._eventRecords[i]; if ((!target || target === eventRecord.target) && (!eventName || eventName === eventRecord.eventName) && (!callback || callback === eventRecord.callback) && ((typeof useCapture !== 'boolean') || useCapture === eventRecord.useCapture)) { var events = eventRecord.target.__events__; var targetArrayLookup = events[eventRecord.eventName]; var targetArray = targetArrayLookup ? targetArrayLookup[this._id] : null; // We may have already target's entries, so check for null. if (targetArray) { if (targetArray.length === 1 || !callback) { targetArrayLookup.count -= targetArray.length; delete events[eventRecord.eventName][this._id]; } else { targetArrayLookup.count--; targetArray.splice(targetArray.indexOf(eventRecord), 1); } if (!targetArrayLookup.count) { delete events[eventRecord.eventName]; } } if (eventRecord.elementCallback) { if (eventRecord.target.removeEventListener) { eventRecord.target.removeEventListener(eventRecord.eventName, eventRecord.elementCallback, eventRecord.useCapture); } else if (eventRecord.target.detachEvent) { eventRecord.target.detachEvent('on' + eventRecord.eventName, eventRecord.elementCallback); } } this._eventRecords.splice(i--, 1); } } }; /** Trigger the given event in the context of this instance of EventGroup. */ EventGroup.prototype.raise = function (eventName, eventArgs, bubbleEvent) { return EventGroup.raise(this._parent, eventName, eventArgs, bubbleEvent); }; /** Declare an event as being supported by this instance of EventGroup. */ EventGroup.prototype.declare = function (event) { var declaredEvents = this._parent.__declaredEvents = this._parent.__declaredEvents || {}; if (typeof event === 'string') { declaredEvents[event] = true; } else { for (var i = 0; i < event.length; i++) { declaredEvents[event[i]] = true; } } }; return EventGroup; }()); EventGroup._uniqueId = 0; exports.EventGroup = EventGroup; /***/ }, /* 91 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var dom_1 = __webpack_require__(92); var scroll_scss_1 = __webpack_require__(93); var _scrollbarWidth; var _bodyScrollDisabledCount = 0; exports.DATA_IS_SCROLLABLE_ATTRIBUTE = 'data-is-scrollable'; function disableBodyScroll() { var doc = dom_1.getDocument(); if (doc && doc.body && !_bodyScrollDisabledCount) { doc.body.classList.add(scroll_scss_1.default.msFabricScrollDisabled); } _bodyScrollDisabledCount++; } exports.disableBodyScroll = disableBodyScroll; function enableBodyScroll() { if (_bodyScrollDisabledCount > 0) { var doc = dom_1.getDocument(); if (doc && doc.body && _bodyScrollDisabledCount === 1) { doc.body.classList.remove(scroll_scss_1.default.msFabricScrollDisabled); } _bodyScrollDisabledCount--; } } exports.enableBodyScroll = enableBodyScroll; /** Calculates the width of a scrollbar for the browser/os. */ function getScrollbarWidth() { if (_scrollbarWidth === undefined) { var scrollDiv = document.createElement('div'); scrollDiv.style.setProperty('width', '100px'); scrollDiv.style.setProperty('height', '100px'); scrollDiv.style.setProperty('overflow', 'scroll'); scrollDiv.style.setProperty('position', 'absolute'); scrollDiv.style.setProperty('top', '-9999px'); document.body.appendChild(scrollDiv); // Get the scrollbar width _scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; // Delete the DIV document.body.removeChild(scrollDiv); } return _scrollbarWidth; } exports.getScrollbarWidth = getScrollbarWidth; /** * Traverses up the DOM for the element with the data-is-scrollable=true attribute, or returns * document.body. */ function findScrollableParent(startingElement) { var el = startingElement; // First do a quick scan for the scrollable attribute. while (el && el !== document.body) { if (el.getAttribute(exports.DATA_IS_SCROLLABLE_ATTRIBUTE) === 'true') { return el; } el = el.parentElement; } // If we haven't found it, the use the slower method: compute styles to evaluate if overflow is set. el = startingElement; while (el && el !== document.body) { if (el.getAttribute(exports.DATA_IS_SCROLLABLE_ATTRIBUTE) !== 'false') { var styles_1 = getComputedStyle(el); var overflowY = styles_1 ? styles_1.getPropertyValue('overflow-y') : ''; if (overflowY && (overflowY === 'scroll' || overflowY === 'auto')) { return el; } } el = el.parentElement; } // Fall back to window scroll. if (!el || el === document.body) { el = window; } return el; } exports.findScrollableParent = findScrollableParent; /***/ }, /* 92 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * Sets the virtual parent of an element. * Pass `undefined` as the `parent` to clear the virtual parent. */ function setVirtualParent(child, parent) { var virtualChild = child; var virtualParent = parent; if (!virtualChild._virtual) { virtualChild._virtual = { children: [] }; } var oldParent = virtualChild._virtual.parent; if (oldParent && oldParent !== parent) { // Remove the child from its old parent. var index = oldParent._virtual.children.indexOf(virtualChild); if (index > -1) { oldParent._virtual.children.splice(index, 1); } } virtualChild._virtual.parent = virtualParent || undefined; if (virtualParent) { if (!virtualParent._virtual) { virtualParent._virtual = { children: [] }; } virtualParent._virtual.children.push(virtualChild); } } exports.setVirtualParent = setVirtualParent; function getVirtualParent(child) { var parent; if (child && isVirtualElement(child)) { parent = child._virtual.parent; } return parent; } exports.getVirtualParent = getVirtualParent; /** * Gets the element which is the parent of a given element. * If `allowVirtuaParents` is `true`, this method prefers the virtual parent over * real DOM parent when present. */ function getParent(child, allowVirtualParents) { if (allowVirtualParents === void 0) { allowVirtualParents = true; } return child && (allowVirtualParents && getVirtualParent(child) || child.parentNode && child.parentNode); } exports.getParent = getParent; /** * Determines whether or not a parent element contains a given child element. * If `allowVirtualParents` is true, this method may return `true` if the child * has the parent in its virtual element hierarchy. */ function elementContains(parent, child, allowVirtualParents) { if (allowVirtualParents === void 0) { allowVirtualParents = true; } var isContained = false; if (parent && child) { if (allowVirtualParents) { isContained = false; while (child) { var nextParent = getParent(child); if (nextParent === parent) { isContained = true; break; } child = nextParent; } } else if (parent.contains) { isContained = parent.contains(child); } } return isContained; } exports.elementContains = elementContains; var _isSSR = false; /** * Helper to set ssr mode to simulate no window object returned from getWindow helper. */ function setSSR(isEnabled) { _isSSR = isEnabled; } exports.setSSR = setSSR; /** Helper to get the window object. */ function getWindow(rootElement) { if (_isSSR) { return undefined; } else { return (rootElement && rootElement.ownerDocument && rootElement.ownerDocument.defaultView ? rootElement.ownerDocument.defaultView : window); } } exports.getWindow = getWindow; /** * Helper to get the document object. */ function getDocument(rootElement) { if (_isSSR) { return undefined; } else { return rootElement && rootElement.ownerDocument ? rootElement.ownerDocument : document; } } exports.getDocument = getDocument; /** * Helper to get bounding client rect, works with window. */ function getRect(element) { var rect; if (element) { if (element === window) { rect = { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight, right: window.innerWidth, bottom: window.innerHeight }; } else if (element.getBoundingClientRect) { rect = element.getBoundingClientRect(); } } return rect; } exports.getRect = getRect; /** * Determines whether or not an element has the virtual hierarchy extension. */ function isVirtualElement(element) { return element && !!element._virtual; } /***/ }, /* 93 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { msFabricScrollDisabled: 'msFabricScrollDisabled_23e3aef2', }; exports.default = styles; load_themed_styles_1.loadStyles([{ "rawString": ".msFabricScrollDisabled_23e3aef2{overflow:hidden!important}" }]); /* tslint:enable */ /***/ }, /* 94 */ /***/ 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__(2); var Async_1 = __webpack_require__(88); var EventGroup_1 = __webpack_require__(90); var warn_1 = __webpack_require__(95); var BaseComponent = (function (_super) { __extends(BaseComponent, _super); /** * BaseComponent constructor * @param props - The props for the component. * @param context - The context for the component. */ function BaseComponent(props, context) { var _this = _super.call(this, props, context) || this; _this.props = props; _this._shouldUpdateComponentRef = true; _makeAllSafe(_this, BaseComponent.prototype, [ 'componentWillMount', 'componentDidMount', 'shouldComponentUpdate', 'componentWillUpdate', 'componentWillReceiveProps', 'render', 'componentDidUpdate', 'componentWillUnmount' ]); return _this; } /** * When the component will receive props, make sure the componentRef is updated. */ BaseComponent.prototype.componentWillReceiveProps = function (newProps, newContext) { this._updateComponentRef(this.props, newProps); }; /** * When the component has mounted, update the componentRef. */ BaseComponent.prototype.componentDidMount = function () { this._updateComponentRef(undefined, this.props); }; /** * If we have disposables, dispose them automatically on unmount. */ BaseComponent.prototype.componentWillUnmount = function () { if (this.__disposables) { for (var i = 0, len = this._disposables.length; i < len; i++) { var disposable = this.__disposables[i]; if (disposable.dispose) { disposable.dispose(); } } this.__disposables = null; } }; Object.defineProperty(BaseComponent.prototype, "className", { /** * Gets the object's class name. */ get: function () { if (!this.__className) { var funcNameRegex = /function (.{1,})\(/; var results = (funcNameRegex).exec((this).constructor.toString()); this.__className = (results && results.length > 1) ? results[1] : ''; } return this.__className; }, enumerable: true, configurable: true }); Object.defineProperty(BaseComponent.prototype, "_disposables", { /** * Allows subclasses to push things to this._disposables to be auto disposed. */ get: function () { if (!this.__disposables) { this.__disposables = []; } return this.__disposables; }, enumerable: true, configurable: true }); Object.defineProperty(BaseComponent.prototype, "_async", { /** * Gets the async instance associated with the component, created on demand. The async instance gives * subclasses a way to execute setTimeout/setInterval async calls safely, where the callbacks * will be cleared/ignored automatically after unmounting. The helpers within the async object also * preserve the this pointer so that you don't need to "bind" the callbacks. */ get: function () { if (!this.__async) { this.__async = new Async_1.Async(this); this._disposables.push(this.__async); } return this.__async; }, enumerable: true, configurable: true }); Object.defineProperty(BaseComponent.prototype, "_events", { /** * Gets the event group instance assocaited with the component, created on demand. The event instance * provides on/off methods for listening to DOM (or regular javascript object) events. The event callbacks * will be automatically disconnected after unmounting. The helpers within the events object also * preserve the this reference so that you don't need to "bind" the callbacks. */ get: function () { if (!this.__events) { this.__events = new EventGroup_1.EventGroup(this); this._disposables.push(this.__events); } return this.__events; }, enumerable: true, configurable: true }); /** * Helper to return a memoized ref resolver function. * @param refName - Name of the member to assign the ref to. * @returns A function instance keyed from the given refname. */ BaseComponent.prototype._resolveRef = function (refName) { var _this = this; if (!this.__resolves) { this.__resolves = {}; } if (!this.__resolves[refName]) { this.__resolves[refName] = function (ref) { return _this[refName] = ref; }; } return this.__resolves[refName]; }; /** * Updates the componentRef (by calling it with "this" when necessary.) */ BaseComponent.prototype._updateComponentRef = function (currentProps, newProps) { if (newProps === void 0) { newProps = {}; } if (this._shouldUpdateComponentRef && ((!currentProps && newProps.componentRef) || (currentProps && currentProps.componentRef !== newProps.componentRef))) { if (currentProps && currentProps.componentRef) { currentProps.componentRef(null); } if (newProps.componentRef) { newProps.componentRef(this); } } }; /** * Warns when a deprecated props are being used. * * @param deprecationMap - The map of deprecations, where key is the prop name and the value is * either null or a replacement prop name. */ BaseComponent.prototype._warnDeprecations = function (deprecationMap) { warn_1.warnDeprecations(this.className, this.props, deprecationMap); }; /** * Warns when props which are mutually exclusive with each other are both used. * * @param mutuallyExclusiveMap - The map of mutually exclusive props. */ BaseComponent.prototype._warnMutuallyExclusive = function (mutuallyExclusiveMap) { warn_1.warnMutuallyExclusive(this.className, this.props, mutuallyExclusiveMap); }; return BaseComponent; }(React.Component)); exports.BaseComponent = BaseComponent; /** * Helper to override a given method with a wrapper method that can try/catch the original, but also * ensures that the BaseComponent's methods are called before the subclass's. This ensures that * componentWillUnmount in the base is called and that things in the _disposables array are disposed. */ function _makeAllSafe(obj, prototype, methodNames) { for (var i = 0, len = methodNames.length; i < len; i++) { _makeSafe(obj, prototype, methodNames[i]); } } function _makeSafe(obj, prototype, methodName) { var classMethod = obj[methodName]; var prototypeMethod = prototype[methodName]; if (classMethod || prototypeMethod) { obj[methodName] = function () { var retVal; try { if (prototypeMethod) { retVal = prototypeMethod.apply(this, arguments); } if (classMethod !== prototypeMethod) { retVal = classMethod.apply(this, arguments); } } catch (e) { var errorMessage = "Exception in " + obj.className + "." + methodName + "(): " + (typeof e === 'string' ? e : e.stack); if (BaseComponent.onError) { BaseComponent.onError(errorMessage, e); } } return retVal; }; } } BaseComponent.onError = function (errorMessage) { console.error(errorMessage); throw errorMessage; }; /** * Simple constant function for returning null, used to render empty templates in JSX. */ function nullRender() { return null; } exports.nullRender = nullRender; /***/ }, /* 95 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _warningCallback = warn; /** * Warns when a deprecated props are being used. * * @param componentName - The name of the component being used. * @param props - The props passed into the component. * @param deprecationMap - The map of deprecations, where key is the prop name and the value is * either null or a replacement prop name. */ function warnDeprecations(componentName, props, deprecationMap) { for (var propName in deprecationMap) { if (props && propName in props) { var deprecationMessage = componentName + " property '" + propName + "' was used but has been deprecated."; var replacementPropName = deprecationMap[propName]; if (replacementPropName) { deprecationMessage += " Use '" + replacementPropName + "' instead."; } _warningCallback(deprecationMessage); } } } exports.warnDeprecations = warnDeprecations; /** * Warns when two props which are mutually exclusive are both being used. * * @param componentName - The name of the component being used. * @param props - The props passed into the component. * @param exclusiveMap - A map where the key is a parameter, and the value is the other parameter. */ function warnMutuallyExclusive(componentName, props, exclusiveMap) { for (var propName in exclusiveMap) { if (props && propName in props && exclusiveMap[propName] in props) { _warningCallback(componentName + " property '" + propName + "' is mutually exclusive with '" + exclusiveMap[propName] + "'. Use one or the other."); } } } exports.warnMutuallyExclusive = warnMutuallyExclusive; /** * Sends a warning to console, if the api is present. * @param message - Warning message. */ function warn(message) { if (console && console.warn) { console.warn(message); } } exports.warn = warn; /** * Configures the warning callback. Passing in undefined will reset it to use the default * console.warn function. * * @param warningCallback - Callback to override the generated warnings. */ function setWarningCallback(warningCallback) { _warningCallback = warningCallback === undefined ? warn : warningCallback; } exports.setWarningCallback = setWarningCallback; /***/ }, /* 96 */ /***/ 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__(2); var PropTypes = __webpack_require__(22); var BaseComponent_1 = __webpack_require__(94); var object_1 = __webpack_require__(97); /** * The Customizer component allows for default props to be mixed into components which * are decorated with the customizable() decorator. This enables injection scenarios like: * * 1. render svg icons instead of the icon font within all buttons * 2. inject a custom theme object into a component * * Props are provided via the settings prop, which should be a json map where the key is * the name of the customizable component, and the value is are the props to pass in. */ var Customizer = (function (_super) { __extends(Customizer, _super); function Customizer(props, context) { var _this = _super.call(this, props) || this; _this.state = _this._getInjectedProps(props, context); return _this; } Customizer.prototype.getChildContext = function () { return this.state; }; Customizer.prototype.componentWillReceiveProps = function (newProps, newContext) { this.setState(this._getInjectedProps(newProps, newContext)); }; Customizer.prototype.render = function () { return React.Children.only(this.props.children); }; Customizer.prototype._getInjectedProps = function (props, context) { var _a = props.settings, injectedPropsFromSettings = _a === void 0 ? {} : _a; var _b = context.injectedProps, injectedPropsFromContext = _b === void 0 ? {} : _b; return { injectedProps: object_1.assign({}, injectedPropsFromContext, injectedPropsFromSettings) }; }; return Customizer; }(BaseComponent_1.BaseComponent)); Customizer.contextTypes = { injectedProps: PropTypes.object }; Customizer.childContextTypes = Customizer.contextTypes; exports.Customizer = Customizer; /***/ }, /* 97 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); // Initialize global window id. var CURRENT_ID_PROPERTY = '__currentId__'; var _global = (typeof window !== 'undefined' && window) || process; if (_global[CURRENT_ID_PROPERTY] === undefined) { _global[CURRENT_ID_PROPERTY] = 0; } function checkProperties(a, b) { for (var propName in a) { if (a.hasOwnProperty(propName)) { if (!b.hasOwnProperty(propName) || (b[propName] !== a[propName])) { return false; } } } return true; } // Compare a to b and b to a function shallowCompare(a, b) { return checkProperties(a, b) && checkProperties(b, a); } exports.shallowCompare = shallowCompare; /** * Makes a resulting merge of a bunch of objects. Pass in the target object followed by 1 or more * objects as arguments and they will be merged sequentially into the target. Note that this will * shallow merge; it will not create new cloned values for target members. * * @param target - Target object to merge following object arguments into. * @param args - One or more objects that will be mixed into the target in the order they are provided. * @returns Resulting merged target. */ function assign(target) { var args = []; for (var _i = 1; _i < arguments.length; _i++) { args[_i - 1] = arguments[_i]; } return filteredAssign.apply(this, [null, target].concat(args)); } exports.assign = assign; /** * Makes a resulting merge of a bunch of objects, but allows a filter function to be passed in to filter * the resulting merges. This allows for scenarios where you want to merge "everything except that one thing" * or "properties that start with data-". Note that this will shallow merge; it will not create new cloned * values for target members. * * @param isAllowed - Callback to determine if the given propName is allowed in the result. * @param target - Target object to merge following object arguments into. * @param args - One or more objects that will be mixed into the target in the order they are provided. * @returns Resulting merged target. */ function filteredAssign(isAllowed, target) { var args = []; for (var _i = 2; _i < arguments.length; _i++) { args[_i - 2] = arguments[_i]; } target = target || {}; for (var _a = 0, args_1 = args; _a < args_1.length; _a++) { var sourceObject = args_1[_a]; if (sourceObject) { for (var propName in sourceObject) { if (sourceObject.hasOwnProperty(propName) && !isAllowed || isAllowed(propName)) { target[propName] = sourceObject[propName]; } } } } return target; } exports.filteredAssign = filteredAssign; /** Generates a unique id in the global scope (this spans across duplicate copies of the same library.) */ function getId(prefix) { var index = _global[CURRENT_ID_PROPERTY]++; return (prefix || '') + index; } exports.getId = getId; /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23))) /***/ }, /* 98 */ /***/ 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__(2); /** * Utility component for delaying the render of a child component after a given delay. This component * requires a single child component; don't pass in many components. Wrap multiple components in a DIV * if necessary. */ var DelayedRender = (function (_super) { __extends(DelayedRender, _super); function DelayedRender(props) { var _this = _super.call(this, props) || this; _this.state = { isRendered: false }; return _this; } DelayedRender.prototype.componentDidMount = function () { var _this = this; var delay = this.props.delay; this._timeoutId = setTimeout(function () { _this.setState({ isRendered: true }); }, delay); }; DelayedRender.prototype.componentWillUnmount = function () { clearTimeout(this._timeoutId); }; DelayedRender.prototype.render = function () { return this.state.isRendered ? React.Children.only(this.props.children) : null; }; return DelayedRender; }(React.Component)); DelayedRender.defaultProps = { delay: 0 }; exports.DelayedRender = DelayedRender; /***/ }, /* 99 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var KeyCodes; (function (KeyCodes) { KeyCodes[KeyCodes["a"] = 65] = "a"; KeyCodes[KeyCodes["backspace"] = 8] = "backspace"; KeyCodes[KeyCodes["comma"] = 188] = "comma"; KeyCodes[KeyCodes["del"] = 46] = "del"; KeyCodes[KeyCodes["down"] = 40] = "down"; KeyCodes[KeyCodes["end"] = 35] = "end"; KeyCodes[KeyCodes["enter"] = 13] = "enter"; KeyCodes[KeyCodes["escape"] = 27] = "escape"; KeyCodes[KeyCodes["home"] = 36] = "home"; KeyCodes[KeyCodes["left"] = 37] = "left"; KeyCodes[KeyCodes["pageDown"] = 34] = "pageDown"; KeyCodes[KeyCodes["pageUp"] = 33] = "pageUp"; KeyCodes[KeyCodes["right"] = 39] = "right"; KeyCodes[KeyCodes["semicolon"] = 186] = "semicolon"; KeyCodes[KeyCodes["space"] = 32] = "space"; KeyCodes[KeyCodes["tab"] = 9] = "tab"; KeyCodes[KeyCodes["up"] = 38] = "up"; })(KeyCodes = exports.KeyCodes || (exports.KeyCodes = {})); /***/ }, /* 100 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Rectangle = (function () { function Rectangle(left, right, top, bottom) { if (left === void 0) { left = 0; } if (right === void 0) { right = 0; } if (top === void 0) { top = 0; } if (bottom === void 0) { bottom = 0; } this.top = top; this.bottom = bottom; this.left = left; this.right = right; } Object.defineProperty(Rectangle.prototype, "width", { /** * Calculated automatically by subtracting the right from left */ get: function () { return this.right - this.left; }, enumerable: true, configurable: true }); Object.defineProperty(Rectangle.prototype, "height", { /** * Calculated automatically by subtracting the bottom from top. */ get: function () { return this.bottom - this.top; }, enumerable: true, configurable: true }); /** * Tests if another rect is approximately equal to this rect (within 4 decimal places.) */ Rectangle.prototype.equals = function (rect) { // I'm fixing it to 4 decimal places because it allows enough precision and will handle cases when something should be rounded, // like .999999 should round to 1. return (parseFloat(this.top.toFixed(4)) === parseFloat(rect.top.toFixed(4)) && parseFloat(this.bottom.toFixed(4)) === parseFloat(rect.bottom.toFixed(4)) && parseFloat(this.left.toFixed(4)) === parseFloat(rect.left.toFixed(4)) && parseFloat(this.right.toFixed(4)) === parseFloat(rect.right.toFixed(4))); }; return Rectangle; }()); exports.Rectangle = Rectangle; /***/ }, /* 101 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function findIndex(array, cb) { var index = -1; for (var i = 0; array && i < array.length; i++) { if (cb(array[i], i)) { index = i; break; } } return index; } exports.findIndex = findIndex; function createArray(size, getItem) { var array = []; for (var i = 0; i < size; i++) { array.push(getItem(i)); } return array; } exports.createArray = createArray; /***/ }, /* 102 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * Autobind is a utility for binding methods in a class. This simplifies tagging methods as being "bound" to the this pointer * so that they can be used in scenarios that simply require a function callback. */ function autobind(target, key, descriptor) { var fn = descriptor.value; var defining = false; return { configurable: true, get: function () { if (defining || this === fn.prototype || this.hasOwnProperty(key)) { return fn; } // Bind method only once, and update the property to return the bound value from now on var fnBound = fn.bind(this); defining = true; Object.defineProperty(this, key, { configurable: true, writable: true, enumerable: true, value: fnBound }); defining = false; return fnBound; }, set: function (newValue) { Object.defineProperty(this, key, { configurable: true, writable: true, enumerable: true, value: newValue }); } }; } exports.autobind = autobind; /***/ }, /* 103 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function css() { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } var classes = []; for (var _a = 0, args_1 = args; _a < args_1.length; _a++) { var arg = args_1[_a]; if (arg) { if (typeof arg === 'string') { classes.push(arg); } else if ((arg.hasOwnProperty('toString') && typeof (arg.toString) === 'function')) { classes.push(arg.toString()); } else { for (var key in arg) { if (arg[key]) { classes.push(key); } } } } } return classes.join(' '); } exports.css = css; /***/ }, /* 104 */ /***/ 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__(2); var PropTypes = __webpack_require__(22); function customizable(componentName) { return function customizableFactory(ComposedComponent) { return _a = (function (_super) { __extends(ComponentWithInjectedProps, _super); function ComponentWithInjectedProps() { return _super !== null && _super.apply(this, arguments) || this; } ComponentWithInjectedProps.prototype.render = function () { var defaultProps = ((this.context.injectedProps) ? this.context.injectedProps[componentName] : null) || {}; return (React.createElement(ComposedComponent, __assign({}, defaultProps, this.props))); }; return ComponentWithInjectedProps; }(React.Component)), _a.contextTypes = { injectedProps: PropTypes.object }, _a; var _a; }; } exports.customizable = customizable; /***/ }, /* 105 */ /***/ function(module, exports, __webpack_require__) { /* tslint:disable:no-string-literal */ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var dom_1 = __webpack_require__(92); var IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable'; var IS_VISIBLE_ATTRIBUTE = 'data-is-visible'; var FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id'; function getFirstFocusable(rootElement, currentElement, includeElementsInFocusZones) { return getNextElement(rootElement, currentElement, true, false, false, includeElementsInFocusZones); } exports.getFirstFocusable = getFirstFocusable; function getLastFocusable(rootElement, currentElement, includeElementsInFocusZones) { return getPreviousElement(rootElement, currentElement, true, false, true, includeElementsInFocusZones); } exports.getLastFocusable = getLastFocusable; /** * Attempts to focus the first focusable element that is a child or child's child of the rootElement. * @param rootElement - Element to start the search for a focusable child. * @returns True if focus was set, false if it was not. */ function focusFirstChild(rootElement) { var element = getNextElement(rootElement, rootElement, true, false, false, true); if (element) { element.focus(); return true; } return false; } exports.focusFirstChild = focusFirstChild; /** Traverse to find the previous element. */ function getPreviousElement(rootElement, currentElement, checkNode, suppressParentTraversal, traverseChildren, includeElementsInFocusZones) { if (!currentElement || currentElement === rootElement) { return null; } var isCurrentElementVisible = isElementVisible(currentElement); // Check its children. if (traverseChildren && (includeElementsInFocusZones || !isElementFocusZone(currentElement)) && isCurrentElementVisible) { var childMatch = getPreviousElement(rootElement, currentElement.lastElementChild, true, true, true, includeElementsInFocusZones); if (childMatch) { return childMatch; } } // Check the current node, if it's not the first traversal. if (checkNode && isCurrentElementVisible && isElementTabbable(currentElement)) { return currentElement; } // Check its previous sibling. var siblingMatch = getPreviousElement(rootElement, currentElement.previousElementSibling, true, true, true, includeElementsInFocusZones); if (siblingMatch) { return siblingMatch; } // Check its parent. if (!suppressParentTraversal) { return getPreviousElement(rootElement, currentElement.parentElement, true, false, false, includeElementsInFocusZones); } return null; } exports.getPreviousElement = getPreviousElement; /** Traverse to find the next focusable element. */ function getNextElement(rootElement, currentElement, checkNode, suppressParentTraversal, suppressChildTraversal, includeElementsInFocusZones) { if (!currentElement || (currentElement === rootElement && suppressChildTraversal)) { return null; } var isCurrentElementVisible = isElementVisible(currentElement); // Check the current node, if it's not the first traversal. if (checkNode && isCurrentElementVisible && isElementTabbable(currentElement)) { return currentElement; } // Check its children. if (!suppressChildTraversal && isCurrentElementVisible && (includeElementsInFocusZones || !isElementFocusZone(currentElement))) { var childMatch = getNextElement(rootElement, currentElement.firstElementChild, true, true, false, includeElementsInFocusZones); if (childMatch) { return childMatch; } } if (currentElement === rootElement) { return null; } // Check its sibling. var siblingMatch = getNextElement(rootElement, currentElement.nextElementSibling, true, true, false, includeElementsInFocusZones); if (siblingMatch) { return siblingMatch; } if (!suppressParentTraversal) { return getNextElement(rootElement, currentElement.parentElement, false, false, true, includeElementsInFocusZones); } return null; } exports.getNextElement = getNextElement; function isElementVisible(element) { // If the element is not valid, return false. if (!element || !element.getAttribute) { return false; } var visibilityAttribute = element.getAttribute(IS_VISIBLE_ATTRIBUTE); // If the element is explicitly marked with the visibility attribute, return that value as boolean. if (visibilityAttribute !== null && visibilityAttribute !== undefined) { return visibilityAttribute === 'true'; } // Fallback to other methods of determining actual visibility. return (element.offsetHeight !== 0 || element.offsetParent !== null || element.isVisible === true); // used as a workaround for testing. } exports.isElementVisible = isElementVisible; function isElementTabbable(element) { // If this element is null or is disabled, it is not considered tabbable. if (!element || element.disabled) { return false; } // In IE, element.tabIndex is default to 0. We need to use element get tabIndex attribute to get the correct tabIndex var tabIndex = -1; if (element && element.getAttribute) { tabIndex = parseInt(element.getAttribute('tabIndex'), 10); } var isFocusableAttribute = element.getAttribute ? element.getAttribute(IS_FOCUSABLE_ATTRIBUTE) : null; return (!!element && isFocusableAttribute !== 'false' && (element.tagName === 'A' || (element.tagName === 'BUTTON') || (element.tagName === 'INPUT') || (element.tagName === 'TEXTAREA') || (tabIndex >= 0) || (element.getAttribute && (isFocusableAttribute === 'true' || element.getAttribute('role') === 'button')))); } exports.isElementTabbable = isElementTabbable; function isElementFocusZone(element) { return element && !!element.getAttribute(FOCUSZONE_ID_ATTRIBUTE); } exports.isElementFocusZone = isElementFocusZone; function doesElementContainFocus(element) { var currentActiveElement = dom_1.getDocument(element).activeElement; if (currentActiveElement && dom_1.elementContains(element, currentActiveElement)) { return true; } return false; } exports.doesElementContainFocus = doesElementContainFocus; /***/ }, /* 106 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var REACT_LIFECYCLE_EXCLUSIONS = [ 'setState', 'render', 'componentWillMount', 'componentDidMount', 'componentWillReceiveProps', 'shouldComponentUpdate', 'componentWillUpdate', 'componentDidUpdate', 'componentWillUnmount' ]; /** * Allows you to hoist methods, except those in an exclusion set from a source object into a destination object. * * @param destination - The instance of the object to hoist the methods onto. * @param source - The instance of the object where the methods are hoisted from. * @param exclusions - (Optional) What methods to exclude from being hoisted. * @returns An array of names of methods that were hoisted. */ function hoistMethods(destination, source, exclusions) { if (exclusions === void 0) { exclusions = REACT_LIFECYCLE_EXCLUSIONS; } var hoisted = []; var _loop_1 = function (methodName) { if (typeof source[methodName] === 'function' && destination[methodName] === undefined && (!exclusions || exclusions.indexOf(methodName) === -1)) { hoisted.push(methodName); /* tslint:disable:no-function-expression */ destination[methodName] = function () { source[methodName].apply(source, arguments); }; /* tslint:enable */ } }; for (var methodName in source) { _loop_1(methodName); } return hoisted; } exports.hoistMethods = hoistMethods; /** * Provides a method for convenience to unhoist hoisted methods. * * @param source - The source object upon which methods were hoisted. * @param methodNames - An array of method names to unhoist. */ function unhoistMethods(source, methodNames) { methodNames .forEach(function (methodName) { return delete source[methodName]; }); } exports.unhoistMethods = unhoistMethods; /***/ }, /* 107 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * Regular expression matching characters to ignore when calculating the initials. * The first part matches characters within parenthesis, including the parenthesis. * The second part matches special ASCII characters except space, plus some unicode special characters. */ var UNWANTED_CHARS_REGEX = /\([^)]*\)|[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g; /** Regular expression matching one or more spaces. */ var MULTIPLE_WHITESPACES_REGEX = /\s+/g; /** * Regular expression matching languages for which we currently don't support initials. * Arabic: Arabic, Arabic Supplement, Arabic Extended-A. * Korean: Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B. * Japanese: Hiragana, Katakana. * CJK: CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs, CJK Unified Ideographs Extension B */ /* tslint:disable:max-line-length */ var UNSUPPORTED_TEXT_REGEX = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/; /* tslint:enable:max-line-length */ function getInitialsLatin(displayName, isRtl) { var initials = ''; var splits = displayName.split(' '); if (splits.length === 2) { initials += splits[0].charAt(0).toUpperCase(); initials += splits[1].charAt(0).toUpperCase(); } else if (splits.length === 3) { initials += splits[0].charAt(0).toUpperCase(); initials += splits[2].charAt(0).toUpperCase(); } else if (splits.length !== 0) { initials += splits[0].charAt(0).toUpperCase(); } if (isRtl && initials.length > 1) { return initials.charAt(1) + initials.charAt(0); } return initials; } function cleanupDisplayName(displayName) { displayName = displayName.replace(UNWANTED_CHARS_REGEX, ''); displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' '); displayName = displayName.trim(); return displayName; } /** Get (up to 2 characters) initials based on display name of the persona. */ function getInitials(displayName, isRtl) { if (displayName == null) { return ''; } displayName = cleanupDisplayName(displayName); if (UNSUPPORTED_TEXT_REGEX.test(displayName)) { return ''; } return getInitialsLatin(displayName, isRtl); } exports.getInitials = getInitials; /***/ }, /* 108 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var dom_1 = __webpack_require__(92); // Default to undefined so that we initialize on first read. var _language; /** * Gets the rtl state of the page (returns true if in rtl.) */ function getLanguage() { if (_language === undefined) { var doc = dom_1.getDocument(); var win = dom_1.getWindow(); // tslint:disable-next-line:no-string-literal if (win && win['localStorage']) { var savedLanguage = localStorage.getItem('language'); if (savedLanguage !== null) { _language = savedLanguage; } } if (_language === undefined && doc) { _language = doc.documentElement.getAttribute('lang'); } if (_language === undefined) { setLanguage('en', false); } } return _language; } exports.getLanguage = getLanguage; /** * Sets the rtl state of the page (by adjusting the dir attribute of the html element.) */ function setLanguage(language, avoidPersisting) { if (avoidPersisting === void 0) { avoidPersisting = false; } var doc = dom_1.getDocument(); if (doc) { doc.documentElement.setAttribute('lang', language); } var win = dom_1.getWindow(); // tslint:disable-next-line:no-string-literal if (win && win['localStorage'] && !avoidPersisting) { localStorage.setItem('language', language); } _language = language; } exports.setLanguage = setLanguage; /***/ }, /* 109 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function getDistanceBetweenPoints(point1, point2) { var distance = Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2)); return distance; } exports.getDistanceBetweenPoints = getDistanceBetweenPoints; /***/ }, /* 110 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * Detects whether an element's content has horizontal overflow * * @param element - Element to check for overflow * @returns True if element's content overflows */ function hasHorizontalOverflow(element) { return element.clientWidth < element.scrollWidth; } exports.hasHorizontalOverflow = hasHorizontalOverflow; /** * Detects whether an element's content has vertical overflow * * @param element - Element to check for overflow * @returns True if element's content overflows */ function hasVerticalOverflow(element) { return element.clientHeight < element.scrollHeight; } exports.hasVerticalOverflow = hasVerticalOverflow; /** * Detects whether an element's content has overflow in any direction * * @param element - Element to check for overflow * @returns True if element's content overflows */ function hasOverflow(element) { return hasHorizontalOverflow(element) || hasVerticalOverflow(element); } exports.hasOverflow = hasOverflow; /***/ }, /* 111 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var object_1 = __webpack_require__(97); exports.baseElementEvents = [ 'onCopy', 'onCut', 'onPaste', 'onCompositionEnd', 'onCompositionStart', 'onCompositionUpdate', 'onFocus', 'onFocusCapture', 'onBlur', 'onBlurCapture', 'onChange', 'onInput', 'onSubmit', 'onLoad', 'onError', 'onKeyDown', 'onKeyDownCapture', 'onKeyPress', 'onKeyUp', 'onAbort', 'onCanPlay', 'onCanPlayThrough', 'onDurationChange', 'onEmptied', 'onEncrypted', 'onEnded', 'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange', 'onSeeked', 'onSeeking', 'onStalled', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting', 'onClick', 'onClickCapture', 'onContextMenu', 'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', 'onMouseDown', 'onMouseDownCapture', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'onMouseUpCapture', 'onSelect', 'onTouchCancel', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'onScroll', 'onWheel' ]; exports.baseElementProperties = [ 'defaultChecked', 'defaultValue', 'accept', 'acceptCharset', 'accessKey', 'action', 'allowFullScreen', 'allowTransparency', 'alt', 'async', 'autoComplete', 'autoFocus', 'autoPlay', 'capture', 'cellPadding', 'cellSpacing', 'charSet', 'challenge', 'checked', 'children', 'classID', 'className', 'cols', 'colSpan', 'content', 'contentEditable', 'contextMenu', 'controls', 'coords', 'crossOrigin', 'data', 'dateTime', 'default', 'defer', 'dir', 'download', 'draggable', 'encType', 'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'frameBorder', 'headers', 'height', 'hidden', 'high', 'hrefLang', 'htmlFor', 'httpEquiv', 'icon', 'id', 'inputMode', 'integrity', 'is', 'keyParams', 'keyType', 'kind', 'lang', 'list', 'loop', 'low', 'manifest', 'marginHeight', 'marginWidth', 'max', 'maxLength', 'media', 'mediaGroup', 'method', 'min', 'minLength', 'multiple', 'muted', 'name', 'noValidate', 'open', 'optimum', 'pattern', 'placeholder', 'poster', 'preload', 'radioGroup', 'readOnly', 'rel', 'required', 'role', 'rows', 'rowSpan', 'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'selected', 'shape', 'size', 'sizes', 'span', 'spellCheck', 'src', 'srcDoc', 'srcLang', 'srcSet', 'start', 'step', 'style', 'summary', 'tabIndex', 'title', 'type', 'useMap', 'value', 'width', 'wmode', 'wrap' ]; exports.htmlElementProperties = exports.baseElementProperties.concat(exports.baseElementEvents); exports.anchorProperties = exports.htmlElementProperties.concat([ 'href', 'target' ]); exports.buttonProperties = exports.htmlElementProperties.concat([ 'disabled' ]); exports.divProperties = exports.htmlElementProperties.concat(['align', 'noWrap']); exports.inputProperties = exports.buttonProperties; exports.textAreaProperties = exports.buttonProperties; exports.imageProperties = exports.divProperties; /** * Gets native supported props for an html element provided the allowance set. Use one of the property * sets defined (divProperties, buttonPropertes, etc) to filter out supported properties from a given * props set. Note that all data- and aria- prefixed attributes will be allowed. * NOTE: getNativeProps should always be applied first when adding props to a react component. The * non-native props should be applied second. This will prevent getNativeProps from overriding your custom props. * For example, if props passed to getNativeProps has an onClick function and getNativeProps is added to * the component after an onClick function is added, then the getNativeProps onClick will override it. * @param props - The unfiltered input props * @param allowedPropsNames- The array of allowed propnames. * @returns The filtered props */ function getNativeProps(props, allowedPropNames, excludedPropNames) { return object_1.filteredAssign(function (propName) { return ((!excludedPropNames || excludedPropNames.indexOf(propName) < 0) && ((propName.indexOf('data-') === 0) || (propName.indexOf('aria-') === 0) || (allowedPropNames.indexOf(propName) >= 0))); }, {}, props); } exports.getNativeProps = getNativeProps; /***/ }, /* 112 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _baseUrl = ''; /** Sets the current base url used for fetching images. */ function getResourceUrl(url) { return _baseUrl + url; } exports.getResourceUrl = getResourceUrl; /** Gets the current base url used for fetching images. */ function setBaseUrl(baseUrl) { _baseUrl = baseUrl; } exports.setBaseUrl = setBaseUrl; /***/ }, /* 113 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var KeyCodes_1 = __webpack_require__(99); var dom_1 = __webpack_require__(92); // Default to undefined so that we initialize on first read. var _isRTL; /** * Gets the rtl state of the page (returns true if in rtl.) */ function getRTL() { if (_isRTL === undefined) { var doc = dom_1.getDocument(); var win = dom_1.getWindow(); // tslint:disable-next-line:no-string-literal if (win && win['localStorage']) { var savedRTL = localStorage.getItem('isRTL'); if (savedRTL !== null) { _isRTL = savedRTL === '1'; } } if (_isRTL === undefined && doc) { _isRTL = doc.documentElement.getAttribute('dir') === 'rtl'; } if (_isRTL !== undefined) { setRTL(_isRTL, true); } else { throw new Error('getRTL was called in a server environment without setRTL being called first. ' + 'Call setRTL to set the correct direction first.'); } } return _isRTL; } exports.getRTL = getRTL; /** * Sets the rtl state of the page (by adjusting the dir attribute of the html element.) */ function setRTL(isRTL, avoidPersisting) { if (avoidPersisting === void 0) { avoidPersisting = false; } var doc = dom_1.getDocument(); if (doc) { doc.documentElement.setAttribute('dir', isRTL ? 'rtl' : 'ltr'); } var win = dom_1.getWindow(); // tslint:disable-next-line:no-string-literal if (win && win['localStorage'] && !avoidPersisting) { localStorage.setItem('isRTL', isRTL ? '1' : '0'); } _isRTL = isRTL; } exports.setRTL = setRTL; /** * Returns the given key, but flips right/left arrows if necessary. */ function getRTLSafeKeyCode(key) { if (getRTL()) { if (key === KeyCodes_1.KeyCodes.left) { key = KeyCodes_1.KeyCodes.right; } else if (key === KeyCodes_1.KeyCodes.right) { key = KeyCodes_1.KeyCodes.left; } } return key; } exports.getRTLSafeKeyCode = getRTLSafeKeyCode; /***/ }, /* 114 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); // Regex that finds { and } so they can be removed on a lookup for string format var FORMAT_ARGS_REGEX = /[\{\}]/g; // Regex that finds {#} so it can be replaced by the arguments in string format var FORMAT_REGEX = /\{\d+\}/g; /** * String Format is like C# string format. * Usage Example: "hello {0}!".format("mike") will return "hello mike!" * Calling format on a string with less arguments than specified in the format is invalid * Example "I love {0} every {1}".format("CXP") will result in a Debug Exception. */ function format(s) { 'use strict'; var values = []; for (var _i = 1; _i < arguments.length; _i++) { values[_i - 1] = arguments[_i]; } var args = values; // Callback match function function replace_func(match) { // looks up in the args var replacement = args[match.replace(FORMAT_ARGS_REGEX, '')]; // catches undefined in nondebug and null in debug and nondebug if (replacement === null || replacement === undefined) { replacement = ''; } return replacement; } return (s.replace(FORMAT_REGEX, replace_func)); } exports.format = format; /***/ }, /* 115 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _emptyObject = { empty: true }; var _dictionary = {}; function memoize(target, key, descriptor) { // We bind to "null" to prevent people from inadvertently pulling values from "this", // rather than passing them in as input values which can be memoized. var fn = memoizeFunction(descriptor.value.bind(null)); return { configurable: true, get: function () { return fn; } }; } exports.memoize = memoize; /** * Memoizes a function; when you pass in the same parameters multiple times, it returns a cached result. * Be careful when passing in objects, you need to pass in the same INSTANCE for caching to work. Otherwise * it will grow the cache unnecessarily. * * By default, the cache will reset after 100 permutations, to avoid abuse cases where the function is * unintendedly called with unique objects. Without a reset, the cache could grow infinitely, so we safeguard * by resetting. To override this behavior, pass a value of 0 to the maxCacheSize parameter. * * @param cb - The function to memoize. * @param maxCacheSize - Max results to cache. If the cache exceeds this value, it will reset on the next call. * @returns A memoized version of the function. */ function memoizeFunction(cb, maxCacheSize) { if (maxCacheSize === void 0) { maxCacheSize = 100; } var rootNode; var cacheSize = 0; // tslint:disable-next-line:no-function-expression return function memoizedFunction() { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } var currentNode = rootNode; if (rootNode === undefined || (maxCacheSize > 0 && cacheSize > maxCacheSize)) { rootNode = _createNode(); cacheSize = 0; } currentNode = rootNode; // Traverse the tree until we find the match. for (var i = 0; i < args.length; i++) { var arg = _normalizeArg(args[i]); if (!currentNode.map.has(arg)) { currentNode.map.set(arg, _createNode()); } currentNode = currentNode.map.get(arg); } if (!currentNode.hasOwnProperty('value')) { currentNode.value = cb.apply(void 0, args); cacheSize++; } return currentNode.value; }; } exports.memoizeFunction = memoizeFunction; function _normalizeArg(val) { if (!val) { return _emptyObject; } else if (typeof val === 'object') { return val; } else if (!_dictionary[val]) { _dictionary[val] = { val: val }; } return _dictionary[val]; } function _createNode() { return { map: new WeakMap() }; } /***/ }, /* 116 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var AnimationClassNames_1 = __webpack_require__(117); exports.AnimationClassNames = AnimationClassNames_1.AnimationClassNames; var FontClassNames_1 = __webpack_require__(129); exports.FontClassNames = FontClassNames_1.FontClassNames; var IconClassNames_1 = __webpack_require__(130); exports.IconClassNames = IconClassNames_1.IconClassNames; var ColorClassNames_1 = __webpack_require__(131); exports.ColorClassNames = ColorClassNames_1.ColorClassNames; /***/ }, /* 117 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var index_1 = __webpack_require__(118); var index_2 = __webpack_require__(120); exports.AnimationClassNames = index_1.buildClassMap(index_2.AnimationStyles); /***/ }, /* 118 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var theme_1 = __webpack_require__(119); exports.getTheme = theme_1.getTheme; exports.loadTheme = theme_1.loadTheme; var mergeStyles_1 = __webpack_require__(126); exports.mergeStyles = mergeStyles_1.mergeStyles; var mergeStyleSets_1 = __webpack_require__(127); exports.mergeStyleSets = mergeStyleSets_1.mergeStyleSets; var buildClassMap_1 = __webpack_require__(128); exports.buildClassMap = buildClassMap_1.buildClassMap; /***/ }, /* 119 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var assign = __webpack_require__(72); var index_1 = __webpack_require__(120); var _theme = { palette: index_1.DefaultPalette, semanticColors: _makeSemanticColorsFromPalette(index_1.DefaultPalette), fonts: index_1.DefaultFontStyles }; /** * Gets the theme object. */ function getTheme() { return _theme; } exports.getTheme = getTheme; /** * Mixes the given theme settings into the current theme object. */ function loadTheme(theme) { _theme.palette = assign({}, _theme.palette, theme.palette); _theme.semanticColors = assign({}, _makeSemanticColorsFromPalette(_theme.palette), theme.semanticColors); _theme.fonts = assign({}, _theme.fonts, theme.fonts); } exports.loadTheme = loadTheme; // Generates all the semantic slot colors based on the Fabric palette. // We'll use these as fallbacks for semantic slots that the passed in theme did not define. function _makeSemanticColorsFromPalette(p) { return { bodyBackground: p.white, bodyText: p.neutralPrimary, bodySubtext: p.neutralSecondary, disabledBackground: p.neutralLighter, disabledText: p.neutralTertiaryAlt, disabledSubtext: p.neutralQuaternary, focusBorder: p.black, // errorBackground: todo, errorText: p.redDark, inputBorder: p.neutralTertiary, inputBorderHovered: p.neutralPrimary, inputBackgroundSelected: p.themePrimary, inputBackgroundSelectedHovered: p.themeDarkAlt, inputForegroundSelected: p.white }; } /***/ }, /* 120 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var AnimationStyles_1 = __webpack_require__(121); exports.AnimationStyles = AnimationStyles_1.AnimationStyles; var DefaultPalette_1 = __webpack_require__(122); exports.DefaultPalette = DefaultPalette_1.DefaultPalette; var DefaultFontStyles_1 = __webpack_require__(123); exports.DefaultFontStyles = DefaultFontStyles_1.DefaultFontStyles; exports.FontSizes = DefaultFontStyles_1.FontSizes; exports.FontWeights = DefaultFontStyles_1.FontWeights; var IconCodes_1 = __webpack_require__(124); exports.IconCodes = IconCodes_1.IconCodes; var getFocusStyle_1 = __webpack_require__(125); exports.getFocusStyle = getFocusStyle_1.getFocusStyle; /***/ }, /* 121 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var glamorExports_1 = __webpack_require__(70); /* Register the keyframes */ var EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)'; var EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)'; var DURATION_1 = '0.167s'; var DURATION_2 = '0.267s'; var DURATION_3 = '0.367s'; var DURATION_4 = '0.467s'; var FADE_IN = glamorExports_1.keyframes({ from: { opacity: 0 }, to: { opacity: 1 } }); var FADE_OUT = glamorExports_1.keyframes({ from: { opacity: 1 }, to: { opacity: 0 } }); var SLIDE_RIGHT_IN10 = _createSlideInX(-10); var SLIDE_RIGHT_IN20 = _createSlideInX(-20); var SLIDE_RIGHT_IN40 = _createSlideInX(-40); var SLIDE_RIGHT_IN400 = _createSlideInX(-400); var SLIDE_LEFT_IN10 = _createSlideInX(10); var SLIDE_LEFT_IN20 = _createSlideInX(20); var SLIDE_LEFT_IN40 = _createSlideInX(40); var SLIDE_LEFT_IN400 = _createSlideInX(400); var SLIDE_UP_IN10 = _createSlideInY(10); var SLIDE_UP_IN20 = _createSlideInY(20); var SLIDE_DOWN_IN10 = _createSlideInY(-10); var SLIDE_DOWN_IN20 = _createSlideInY(-20); var SLIDE_RIGHT_OUT10 = _createSlideOutX(10); var SLIDE_RIGHT_OUT20 = _createSlideOutX(20); var SLIDE_RIGHT_OUT40 = _createSlideOutX(40); var SLIDE_RIGHT_OUT400 = _createSlideOutX(400); var SLIDE_LEFT_OUT10 = _createSlideOutX(-10); var SLIDE_LEFT_OUT20 = _createSlideOutX(-20); var SLIDE_LEFT_OUT40 = _createSlideOutX(-40); var SLIDE_LEFT_OUT400 = _createSlideOutX(-400); var SLIDE_UP_OUT10 = _createSlideOutY(-10); var SLIDE_UP_OUT20 = _createSlideOutY(-20); var SLIDE_DOWN_OUT10 = _createSlideOutY(10); var SLIDE_DOWN_OUT20 = _createSlideOutY(20); var SCALE_UP100 = glamorExports_1.keyframes({ from: { transform: 'scale3d(.98,.98,1)' }, to: { transform: 'scale3d(1,1,1)' } }); var SCALE_DOWN98 = glamorExports_1.keyframes({ from: { transform: 'scale3d(1,1,1)' }, 'top': { transform: 'scale3d(.98,.98,1)' }, }); var SCALE_DOWN100 = glamorExports_1.keyframes({ from: { transform: 'scale3d(1.03,1.03,1)' }, to: { transform: 'scale3d(1,1,1)' } }); var SCALE_UP103 = glamorExports_1.keyframes({ from: { transform: 'scale3d(1,1,1)' }, to: { transform: 'scale3d(1.03,1.03,1)' } }); var ROTATE90 = glamorExports_1.keyframes({ from: { transform: 'rotateZ(0deg)' }, to: { transform: 'rotateZ(90deg)' } }); var ROTATE_N90 = glamorExports_1.keyframes({ from: { transform: 'rotateZ(0deg)' }, to: { transform: 'rotateZ(-90deg)' } }); /** * All Fabric standard animations, exposed as json objects referencing predefined * keyframes. These objects can be mixed in with other class definitions. */ exports.AnimationStyles = { slideRightIn10: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN10, DURATION_3, EASING_FUNCTION_1), slideRightIn20: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN20, DURATION_3, EASING_FUNCTION_1), slideRightIn40: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN40, DURATION_3, EASING_FUNCTION_1), slideRightIn400: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN400, DURATION_3, EASING_FUNCTION_1), slideLeftIn10: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN10, DURATION_3, EASING_FUNCTION_1), slideLeftIn20: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN20, DURATION_3, EASING_FUNCTION_1), slideLeftIn40: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN40, DURATION_3, EASING_FUNCTION_1), slideLeftIn400: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN400, DURATION_3, EASING_FUNCTION_1), slideUpIn10: _createAnimation(FADE_IN + "," + SLIDE_UP_IN10, DURATION_3, EASING_FUNCTION_1), slideUpIn20: _createAnimation(FADE_IN + "," + SLIDE_UP_IN20, DURATION_3, EASING_FUNCTION_1), slideDownIn10: _createAnimation(FADE_IN + "," + SLIDE_DOWN_IN10, DURATION_3, EASING_FUNCTION_1), slideDownIn20: _createAnimation(FADE_IN + "," + SLIDE_DOWN_IN20, DURATION_3, EASING_FUNCTION_1), slideRightOut10: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT10, DURATION_3, EASING_FUNCTION_1), slideRightOut20: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT20, DURATION_3, EASING_FUNCTION_1), slideRightOut40: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT40, DURATION_3, EASING_FUNCTION_1), slideRightOut400: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT400, DURATION_3, EASING_FUNCTION_1), slideLeftOut10: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT10, DURATION_3, EASING_FUNCTION_1), slideLeftOut20: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT20, DURATION_3, EASING_FUNCTION_1), slideLeftOut40: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT40, DURATION_3, EASING_FUNCTION_1), slideLeftOut400: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT400, DURATION_3, EASING_FUNCTION_1), slideUpOut10: _createAnimation(FADE_OUT + "," + SLIDE_UP_OUT10, DURATION_3, EASING_FUNCTION_1), slideUpOut20: _createAnimation(FADE_OUT + "," + SLIDE_UP_OUT20, DURATION_3, EASING_FUNCTION_1), slideDownOut10: _createAnimation(FADE_OUT + "," + SLIDE_DOWN_OUT10, DURATION_3, EASING_FUNCTION_1), slideDownOut20: _createAnimation(FADE_OUT + "," + SLIDE_DOWN_OUT20, DURATION_3, EASING_FUNCTION_1), scaleUpIn100: _createAnimation(FADE_IN + "," + SCALE_UP100, DURATION_3, EASING_FUNCTION_1), scaleDownIn100: _createAnimation(FADE_IN + "," + SCALE_DOWN100, DURATION_3, EASING_FUNCTION_1), scaleUpOut103: _createAnimation(FADE_OUT + "," + SCALE_UP103, DURATION_1, EASING_FUNCTION_2), scaleDownOut98: _createAnimation(FADE_OUT + "," + SCALE_DOWN98, DURATION_1, EASING_FUNCTION_2), fadeIn100: _createAnimation(FADE_IN, DURATION_1, EASING_FUNCTION_2), fadeIn200: _createAnimation(FADE_IN, DURATION_2, EASING_FUNCTION_2), fadeIn400: _createAnimation(FADE_IN, DURATION_3, EASING_FUNCTION_2), fadeIn500: _createAnimation(FADE_IN, DURATION_4, EASING_FUNCTION_2), fadeOut100: _createAnimation(FADE_OUT, DURATION_1, EASING_FUNCTION_2), fadeOut200: _createAnimation(FADE_OUT, DURATION_2, EASING_FUNCTION_2), fadeOut400: _createAnimation(FADE_OUT, DURATION_3, EASING_FUNCTION_2), fadeOut500: _createAnimation(FADE_OUT, DURATION_4, EASING_FUNCTION_2), rotate90deg: _createAnimation(ROTATE90, '0.1s', EASING_FUNCTION_2), rotateN90deg: _createAnimation(ROTATE_N90, '0.1s', EASING_FUNCTION_2) // expandCollapse 100/200/400, delay 100/200 }; function _createAnimation(animationName, animationDuration, animationTimingFunction) { return { animationName: animationName, animationDuration: animationDuration, animationTimingFunction: animationTimingFunction, animationFillMode: 'both' }; } function _createSlideInX(fromX) { return glamorExports_1.keyframes({ from: { transform: "translate3d(" + fromX + "px,0,0)" }, to: { transform: "translate3d(0,0,0)" } }); } function _createSlideInY(fromY) { return glamorExports_1.keyframes({ from: { transform: "translate3d(0," + fromY + "px,0)" }, to: { transform: "translate3d(0,0,0)" } }); } function _createSlideOutX(toX) { return glamorExports_1.keyframes({ from: { transform: "translate3d(0,0,0)" }, to: { transform: "translate3d(" + toX + "px,0,0)" } }); } function _createSlideOutY(toY) { return glamorExports_1.keyframes({ from: { transform: "translate3d(0,0,0)" }, to: { transform: "translate3d(0," + toY + "px,0)" } }); } /***/ }, /* 122 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.DefaultPalette = { themeDarker: '#004578', themeDark: '#005a9e', themeDarkAlt: '#106ebe', themePrimary: '#0078d7', themeSecondary: '#2b88d8', themeTertiary: '#71afe5', themeLight: '#c7e0f4', themeLighter: '#deecf9', themeLighterAlt: '#eff6fc', black: '#000000', blackTranslucent40: 'rgba(0,0,0,.4)', neutralDark: '#212121', neutralPrimary: '#333333', neutralPrimaryAlt: '#3c3c3c', neutralSecondary: '#666666', neutralTertiary: '#a6a6a6', neutralTertiaryAlt: '#c8c8c8', neutralQuaternary: '#d0d0d0', neutralQuaternaryAlt: '#dadada', neutralLight: '#eaeaea', neutralLighter: '#f4f4f4', neutralLighterAlt: '#f8f8f8', white: '#ffffff', yellow: '#ffb900', yellowLight: '#fff100', orange: '#d83b01', orangeLight: '#ea4300', orangeLighter: '#ff8c00', redDark: '#a80000', red: '#e81123', magentaDark: '#5c005c', magenta: '#b4009e', magentaLight: '#e3008c', purpleDark: '#32145a', purple: '#5c2d91', purpleLight: '#b4a0ff', blueDark: '#002050', blueMid: '#00188f', blue: '#0078d7', blueLight: '#00bcf2', tealDark: '#004b50', teal: '#008272', tealLight: '#00b294', greenDark: '#004b1c', green: '#107c10', greenLight: '#bad80a' }; /***/ }, /* 123 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var glamorExports_1 = __webpack_require__(70); var index_1 = __webpack_require__(87); // Default urls. var DefaultBaseUrl = 'https://static2.sharepointonline.com/files/fabric/assets'; // Fallback fonts, if specified system or web fonts are unavailable. var FontFamilyFallbacks = "-apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"; // Font face names to be registered. var FontNameArabic = 'Segoe UI Web (Arabic)'; var FontNameCyrillic = 'Segoe UI Web (Cyrillic)'; var FontNameEastEuropean = 'Segoe UI Web (East European)'; var FontNameGreek = 'Segoe UI Web (Greek)'; var FontNameHebrew = 'Segoe UI Web (Hebrew)'; var FontNameThai = 'Leelawadee UI Web'; var FontNameVietnamese = 'Segoe UI Web (Vietnamese)'; var FontNameWestEuropean = 'Segoe UI Web (West European)'; var FontNameSelawik = 'Selawik Web'; // Font families with fallbacks, for the general regions. var FontFamilyArabic = "'" + FontNameArabic + "'"; var FontFamilyChineseSimplified = "'Microsoft Yahei', Verdana, Simsun"; var FontFamilyChineseTraditional = "'Microsoft Jhenghei', Pmingliu"; var FontFamilyCyrillic = "'" + FontNameCyrillic + "'"; var FontFamilyEastEuropean = "'" + FontNameEastEuropean + "'"; var FontFamilyGreek = "'" + FontNameGreek + "'"; var FontFamilyHebrew = "'" + FontNameHebrew + "'"; var FontFamilyHindi = "'Nirmala UI'"; var FontFamilyJapanese = "'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka"; var FontFamilyKorean = "'Malgun Gothic', Gulim"; var FontFamilySelawik = "'" + FontNameSelawik + "'"; var FontFamilyThai = "'Leelawadee UI Web', 'Kmer UI'"; var FontFamilyVietnamese = "'" + FontNameVietnamese + "'"; var FontFamilyWestEuropean = "'" + FontNameWestEuropean + "'"; // Mapping of language prefix to to font family. var LanguageToFontMap = { 'ar': FontFamilyArabic, 'bg': FontFamilyCyrillic, 'cs': FontFamilyEastEuropean, 'el': FontFamilyGreek, 'et': FontFamilyEastEuropean, 'he': FontFamilyHebrew, 'hi': FontFamilyHindi, 'hr': FontFamilyEastEuropean, 'hu': FontFamilyEastEuropean, 'ja': FontFamilyJapanese, 'kk': FontFamilyEastEuropean, 'ko': FontFamilyKorean, 'lt': FontFamilyEastEuropean, 'lv': FontFamilyEastEuropean, 'pl': FontFamilyEastEuropean, 'ru': FontFamilyCyrillic, 'sk': FontFamilyEastEuropean, 'sr-latn': FontFamilyEastEuropean, 'th': FontFamilyThai, 'tr': FontFamilyEastEuropean, 'uk': FontFamilyCyrillic, 'vi': FontFamilyVietnamese, 'zh-hans': FontFamilyChineseSimplified, 'zh-hant': FontFamilyChineseTraditional, }; // Standard font sizes. var FontSizes; (function (FontSizes) { FontSizes.mini = '10px'; FontSizes.xSmall = '11px'; FontSizes.small = '12px'; FontSizes.smallPlus = '13px'; FontSizes.medium = '14px'; FontSizes.mediumPlus = '15px'; FontSizes.icon = '16px'; FontSizes.large = '17px'; FontSizes.xLarge = '21px'; FontSizes.xxLarge = '28px'; FontSizes.superLarge = '42px'; FontSizes.mega = '72px'; })(FontSizes = exports.FontSizes || (exports.FontSizes = {})); // Standard font weights. var FontWeights; (function (FontWeights) { FontWeights.light = 100; FontWeights.semilight = 300; FontWeights.regular = 400; FontWeights.semibold = 600; FontWeights.bold = 700; })(FontWeights = exports.FontWeights || (exports.FontWeights = {})); // Standard font styling. exports.DefaultFontStyles = { tiny: _createFont(FontSizes.mini, FontWeights.semibold), xSmall: _createFont(FontSizes.xSmall, FontWeights.regular), small: _createFont(FontSizes.small, FontWeights.regular), smallPlus: _createFont(FontSizes.smallPlus, FontWeights.regular), medium: _createFont(FontSizes.medium, FontWeights.regular), mediumPlus: _createFont(FontSizes.mediumPlus, FontWeights.regular), large: _createFont(FontSizes.large, FontWeights.semilight), xLarge: _createFont(FontSizes.xLarge, FontWeights.light), xxLarge: _createFont(FontSizes.xxLarge, FontWeights.light), superLarge: _createFont(FontSizes.superLarge, FontWeights.light), mega: _createFont(FontSizes.mega, FontWeights.light), icon: { fontFamily: '"FabricMDL2Icons"', fontWeight: FontWeights.regular, fontStyle: 'normal' } }; function _getFontFamily() { var language = index_1.getLanguage(); var fontFamily = FontFamilyWestEuropean; for (var lang in LanguageToFontMap) { if (LanguageToFontMap.hasOwnProperty(lang) && lang.indexOf(language) === 0) { fontFamily = LanguageToFontMap[lang]; break; } } return fontFamily + ", " + FontFamilyFallbacks; } function _createFont(size, weight) { return { fontFamily: _getFontFamily(), MozOsxFontSmoothing: 'grayscale', MsHighContrastAdjust: 'none', WebkitFontSmoothing: 'antialiased', fontSize: size, fontWeight: weight }; } function _registerFontFace(fontFamily, url, fontWeight) { fontFamily = "'" + fontFamily + "'"; glamorExports_1.fontFace({ fontFamily: fontFamily, src: "url('" + url + ".woff2') format('woff2')," + ("url('" + url + ".woff') format('woff')"), fontWeight: fontWeight, fontStyle: 'normal' }); } function _registerFontFaceSet(baseUrl, fontFamily, cdnFolder, cdnFontName) { if (cdnFontName === void 0) { cdnFontName = 'segoeui'; } var urlBase = baseUrl + "/" + cdnFolder + "/" + cdnFontName; _registerFontFace(fontFamily, urlBase + '-light', FontWeights.light); _registerFontFace(fontFamily, urlBase + '-semilight', FontWeights.semilight); _registerFontFace(fontFamily, urlBase + '-regular', FontWeights.regular); _registerFontFace(fontFamily, urlBase + '-semibold', FontWeights.semibold); } function _registerDefaultFontFaces() { var baseUrl = _getFontBaseUrl(); if (baseUrl) { var fontUrl = baseUrl + "/fonts"; var iconUrl = baseUrl + "/icons"; // Produce @font-face definitions for all supported web fonts. _registerFontFaceSet(fontUrl, FontNameThai, 'leelawadeeui-thai', 'leelawadeeui'); _registerFontFaceSet(fontUrl, FontNameArabic, 'segoeui-arabic'); _registerFontFaceSet(fontUrl, FontNameCyrillic, 'segoeui-cyrillic'); _registerFontFaceSet(fontUrl, FontNameEastEuropean, 'segoeui-easteuropean'); _registerFontFaceSet(fontUrl, FontNameGreek, 'segoeui-greek'); _registerFontFaceSet(fontUrl, FontNameHebrew, 'segoeui-hebrew'); _registerFontFaceSet(fontUrl, FontNameVietnamese, 'segoeui-vietnamese'); _registerFontFaceSet(fontUrl, FontNameWestEuropean, 'segoeui-westeuropean'); _registerFontFaceSet(fontUrl, FontFamilySelawik, 'selawik', 'selawik'); // Leelawadee UI (Thai) does not have a 'light' weight, so we override // the font-face generated above to use the 'semilight' weight instead. _registerFontFace('Leelawadee UI Web', fontUrl + "/leelawadeeui-thai/leelawadeeui-semilight", FontWeights.light); // Leelawadee UI (Thai) does not have a 'semibold' weight, so we override // the font-face generated above to use the 'bold' weight instead. _registerFontFace('Leelawadee UI Web', fontUrl + "/leelawadeeui-thai/leelawadeeui-bold", FontWeights.semibold); // Register icon urls. _registerFontFace('FabricMDL2Icons', iconUrl + "/fabricmdl2icons", FontWeights.regular); } } /** * Reads the fontBaseUrl from window.FabricConfig.fontBaseUrl or falls back to a default. */ function _getFontBaseUrl() { var win = index_1.getWindow(); // tslint:disable-next-line:no-string-literal var fabricConfig = win ? win['FabricConfig'] : undefined; return (fabricConfig && fabricConfig.fontBaseUrl !== undefined) ? fabricConfig.fontBaseUrl : DefaultBaseUrl; } /** * Register the font faces. */ _registerDefaultFontFaces(); /***/ }, /* 124 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.IconCodes = { /** * Icon code with the value '\uED68'. */ aadLogo: '\uED68', /** * Icon code with the value '\uE8FB'. */ accept: '\uE8FB', /** * Icon code with the value '\uED69'. */ accessLogo: '\uED69', /** * Icon code with the value '\uE910'. */ accounts: '\uE910', /** * Icon code with the value '\uE710'. */ add: '\uE710', /** * Icon code with the value '\uEEB5'. */ addEvent: '\uEEB5', /** * Icon code with the value '\uF0C8'. */ addFavorite: '\uF0C8', /** * Icon code with the value '\uF0C9'. */ addFavoriteFill: '\uF0C9', /** * Icon code with the value '\uE8FA'. */ addFriend: '\uE8FA', /** * Icon code with the value '\uEE3D'. */ addGroup: '\uEE3D', /** * Icon code with the value '\uED8E'. */ addOnlineMeeting: '\uED8E', /** * Icon code with the value '\uED96'. */ addPhone: '\uED96', /** * Icon code with the value '\uECC8'. */ addTo: '\uECC8', /** * Icon code with the value '\uE7EF'. */ admin: '\uE7EF', /** * Icon code with the value '\uED6A'. */ adminALogo: '\uED6A', /** * Icon code with the value '\uED6B'. */ adminCLogo: '\uED6B', /** * Icon code with the value '\uED6C'. */ adminDLogo: '\uED6C', /** * Icon code with the value '\uED6D'. */ adminELogo: '\uED6D', /** * Icon code with the value '\uED6E'. */ adminLLogo: '\uED6E', /** * Icon code with the value '\uED6F'. */ adminMLogo: '\uED6F', /** * Icon code with the value '\uED70'. */ adminOLogo: '\uED70', /** * Icon code with the value '\uED71'. */ adminPLogo: '\uED71', /** * Icon code with the value '\uED72'. */ adminSLogo: '\uED72', /** * Icon code with the value '\uED73'. */ adminYLogo: '\uED73', /** * Icon code with the value '\uEF7A'. */ airTickets: '\uEF7A', /** * Icon code with the value '\uE709'. */ airplane: '\uE709', /** * Icon code with the value '\uE919'. */ alarmClock: '\uE919', /** * Icon code with the value '\uE7AB'. */ album: '\uE7AB', /** * Icon code with the value '\uEC62'. */ albumRemove: '\uEC62', /** * Icon code with the value '\uED74'. */ alchemyLogo: '\uED74', /** * Icon code with the value '\uE8E3'. */ alignCenter: '\uE8E3', /** * Icon code with the value '\uE8E4'. */ alignLeft: '\uE8E4', /** * Icon code with the value '\uE8E2'. */ alignRight: '\uE8E2', /** * Icon code with the value '\uEF8B'. */ androidLogo: '\uEF8B', /** * Icon code with the value '\uE924'. */ annotation: '\uE924', /** * Icon code with the value '\uEEC7'. */ appForOfficeLogo: '\uEEC7', /** * Icon code with the value '\uECAA'. */ appIconDefault: '\uECAA', /** * Icon code with the value '\uEB34'. */ arrivals: '\uEB34', /** * Icon code with the value '\uEED5'. */ arrowDownRight8: '\uEED5', /** * Icon code with the value '\uEEF0'. */ arrowDownRightMirrored8: '\uEEF0', /** * Icon code with the value '\uEED4'. */ arrowUpRight8: '\uEED4', /** * Icon code with the value '\uEEEF'. */ arrowUpRightMirrored8: '\uEEEF', /** * Icon code with the value '\uEAC1'. */ articles: '\uEAC1', /** * Icon code with the value '\uEDC0'. */ ascending: '\uEDC0', /** * Icon code with the value '\uEEB6'. */ assetLibrary: '\uEEB6', /** * Icon code with the value '\uEA38'. */ asterisk: '\uEA38', /** * Icon code with the value '\uEF85'. */ atpLogo: '\uEF85', /** * Icon code with the value '\uE723'. */ attach: '\uE723', /** * Icon code with the value '\uEE70'. */ australianRules: '\uEE70', /** * Icon code with the value '\uE78E'. */ autoEnhanceOff: '\uE78E', /** * Icon code with the value '\uE78D'. */ autoEnhanceOn: '\uE78D', /** * Icon code with the value '\uEB24'. */ autoRacing: '\uEB24', /** * Icon code with the value '\uEE6A'. */ awayStatus: '\uEE6A', /** * Icon code with the value '\uEB6A'. */ azureLogo: '\uEB6A', /** * Icon code with the value '\uE72B'. */ back: '\uE72B', /** * Icon code with the value '\uE73F'. */ backToWindow: '\uE73F', /** * Icon code with the value '\uEC1B'. */ badge: '\uEC1B', /** * Icon code with the value '\uED7E'. */ balloons: '\uED7E', /** * Icon code with the value '\uEAE7'. */ barChart4: '\uEAE7', /** * Icon code with the value '\uE9EB'. */ barChartHorizontal: '\uE9EB', /** * Icon code with the value '\uEB20'. */ baseball: '\uEB20', /** * Icon code with the value '\uE9AA'. */ bidiLtr: '\uE9AA', /** * Icon code with the value '\uE9AB'. */ bidiRtl: '\uE9AB', /** * Icon code with the value '\uEB6B'. */ bingLogo: '\uEB6B', /** * Icon code with the value '\uE8F8'. */ blockContact: '\uE8F8', /** * Icon code with the value '\uECE4'. */ blocked2: '\uECE4', /** * Icon code with the value '\uE733'. */ blocked: '\uE733', /** * Icon code with the value '\uE9C9'. */ blowingSnow: '\uE9C9', /** * Icon code with the value '\uEF68'. */ boards: '\uEF68', /** * Icon code with the value '\uE8DD'. */ bold: '\uE8DD', /** * Icon code with the value '\uEDC7'. */ bookingsLogo: '\uEDC7', /** * Icon code with the value '\uE8A4'. */ bookmarks: '\uE8A4', /** * Icon code with the value '\uEA41'. */ bookmarksMirrored: '\uEA41', /** * Icon code with the value '\uED75'. */ boxLogo: '\uED75', /** * Icon code with the value '\uF173'. */ branchFork: '\uF173', /** * Icon code with the value '\uEF8C'. */ breadcrumb: '\uEF8C', /** * Icon code with the value '\uE706'. */ brightness: '\uE706', /** * Icon code with the value '\uEA99'. */ broom: '\uEA99', /** * Icon code with the value '\uF0D0'. */ bufferTimeAfter: '\uF0D0', /** * Icon code with the value '\uF0CF'. */ bufferTimeBefore: '\uF0CF', /** * Icon code with the value '\uF0D1'. */ bufferTimeBoth: '\uF0D1', /** * Icon code with the value '\uE8FD'. */ bulletedList: '\uE8FD', /** * Icon code with the value '\uEA42'. */ bulletedListMirrored: '\uEA42', /** * Icon code with the value '\uEB47'. */ busSolid: '\uEB47', /** * Icon code with the value '\uEC32'. */ cafe: '\uEC32', /** * Icon code with the value '\uECA4'. */ cake: '\uECA4', /** * Icon code with the value '\uE948'. */ calculatorAddition: '\uE948', /** * Icon code with the value '\uE949'. */ calculatorSubtract: '\uE949', /** * Icon code with the value '\uE787'. */ calendar: '\uE787', /** * Icon code with the value '\uEE9A'. */ calendarAgenda: '\uEE9A', /** * Icon code with the value '\uE8BF'. */ calendarDay: '\uE8BF', /** * Icon code with the value '\uED28'. */ calendarMirrored: '\uED28', /** * Icon code with the value '\uE8F5'. */ calendarReply: '\uE8F5', /** * Icon code with the value '\uE8C0'. */ calendarWeek: '\uE8C0', /** * Icon code with the value '\uEF51'. */ calendarWorkWeek: '\uEF51', /** * Icon code with the value '\uF172'. */ caloriesAdd: '\uF172', /** * Icon code with the value '\uE722'. */ camera: '\uE722', /** * Icon code with the value '\uE711'. */ cancel: '\uE711', /** * Icon code with the value '\uE804'. */ car: '\uE804', /** * Icon code with the value '\uF121'. */ caretBottomLeftSolid8: '\uF121', /** * Icon code with the value '\uF122'. */ caretBottomRightSolid8: '\uF122', /** * Icon code with the value '\uEDD8'. */ caretDown8: '\uEDD8', /** * Icon code with the value '\uEDDC'. */ caretDownSolid8: '\uEDDC', /** * Icon code with the value '\uE817'. */ caretHollow: '\uE817', /** * Icon code with the value '\uEA45'. */ caretHollowMirrored: '\uEA45', /** * Icon code with the value '\uEDD5'. */ caretLeft8: '\uEDD5', /** * Icon code with the value '\uEDD9'. */ caretLeftSolid8: '\uEDD9', /** * Icon code with the value '\uEDD6'. */ caretRight8: '\uEDD6', /** * Icon code with the value '\uEDDA'. */ caretRightSolid8: '\uEDDA', /** * Icon code with the value '\uE818'. */ caretSolid: '\uE818', /** * Icon code with the value '\uEA46'. */ caretSolidMirrored: '\uEA46', /** * Icon code with the value '\uEF54'. */ caretTopLeftSolid8: '\uEF54', /** * Icon code with the value '\uEF55'. */ caretTopRightSolid8: '\uEF55', /** * Icon code with the value '\uEDD7'. */ caretUp8: '\uEDD7', /** * Icon code with the value '\uEDDB'. */ caretUpSolid8: '\uEDDB', /** * Icon code with the value '\uED7F'. */ cat: '\uED7F', /** * Icon code with the value '\uE8EA'. */ cellPhone: '\uE8EA', /** * Icon code with the value '\uEB95'. */ certificate: '\uEB95', /** * Icon code with the value '\uE999'. */ chart: '\uE999', /** * Icon code with the value '\uE901'. */ chat: '\uE901', /** * Icon code with the value '\uECFE'. */ chatInviteFriend: '\uECFE', /** * Icon code with the value '\uE9D5'. */ checkList: '\uE9D5', /** * Icon code with the value '\uE73E'. */ checkMark: '\uE73E', /** * Icon code with the value '\uE739'. */ checkbox: '\uE739', /** * Icon code with the value '\uE73A'. */ checkboxComposite: '\uE73A', /** * Icon code with the value '\uE73C'. */ checkboxIndeterminate: '\uE73C', /** * Icon code with the value '\uE70D'. */ chevronDown: '\uE70D', /** * Icon code with the value '\uE972'. */ chevronDownMed: '\uE972', /** * Icon code with the value '\uE96E'. */ chevronDownSmall: '\uE96E', /** * Icon code with the value '\uE76B'. */ chevronLeft: '\uE76B', /** * Icon code with the value '\uE973'. */ chevronLeftMed: '\uE973', /** * Icon code with the value '\uE96F'. */ chevronLeftSmall: '\uE96F', /** * Icon code with the value '\uE76C'. */ chevronRight: '\uE76C', /** * Icon code with the value '\uE974'. */ chevronRightMed: '\uE974', /** * Icon code with the value '\uE970'. */ chevronRightSmall: '\uE970', /** * Icon code with the value '\uE70E'. */ chevronUp: '\uE70E', /** * Icon code with the value '\uE971'. */ chevronUpMed: '\uE971', /** * Icon code with the value '\uE96D'. */ chevronUpSmall: '\uE96D', /** * Icon code with the value '\uE830'. */ chromeBack: '\uE830', /** * Icon code with the value '\uEA47'. */ chromeBackMirrored: '\uEA47', /** * Icon code with the value '\uE8BB'. */ chromeClose: '\uE8BB', /** * Icon code with the value '\uE921'. */ chromeMinimize: '\uE921', /** * Icon code with the value '\uEA3B'. */ circleFill: '\uEA3B', /** * Icon code with the value '\uED9E'. */ circleHalfFull: '\uED9E', /** * Icon code with the value '\uEAEE'. */ circlePlus: '\uEAEE', /** * Icon code with the value '\uEA3A'. */ circleRing: '\uEA3A', /** * Icon code with the value '\uEDC8'. */ classNotebookLogo: '\uEDC8', /** * Icon code with the value '\uEF75'. */ classroomLogo: '\uEF75', /** * Icon code with the value '\uE894'. */ clear: '\uE894', /** * Icon code with the value '\uEF8F'. */ clearFilter: '\uEF8F', /** * Icon code with the value '\uEDDD'. */ clearFormatting: '\uEDDD', /** * Icon code with the value '\uE9C2'. */ clearNight: '\uE9C2', /** * Icon code with the value '\uE917'. */ clock: '\uE917', /** * Icon code with the value '\uE89F'. */ closePane: '\uE89F', /** * Icon code with the value '\uEA49'. */ closePaneMirrored: '\uEA49', /** * Icon code with the value '\uEF84'. */ closedCaption: '\uEF84', /** * Icon code with the value '\uECA9'. */ cloudAdd: '\uECA9', /** * Icon code with the value '\uEBD3'. */ cloudDownload: '\uEBD3', /** * Icon code with the value '\uEC8E'. */ cloudUpload: '\uEC8E', /** * Icon code with the value '\uE9BE'. */ cloudWeather: '\uE9BE', /** * Icon code with the value '\uE9BF'. */ cloudy: '\uE9BF', /** * Icon code with the value '\uEA9D'. */ cocktails: '\uEA9D', /** * Icon code with the value '\uE943'. */ code: '\uE943', /** * Icon code with the value '\uEAEF'. */ coffee: '\uEAEF', /** * Icon code with the value '\uEDC9'. */ collabsDbLogo: '\uEDC9', /** * Icon code with the value '\uEF66'. */ collapseMenu: '\uEF66', /** * Icon code with the value '\uEB26'. */ collegeFootball: '\uEB26', /** * Icon code with the value '\uEB25'. */ collegeHoops: '\uEB25', /** * Icon code with the value '\uE790'. */ color: '\uE790', /** * Icon code with the value '\uEDBB'. */ combine: '\uEDBB', /** * Icon code with the value '\uE942'. */ compassNW: '\uE942', /** * Icon code with the value '\uE930'. */ completed: '\uE930', /** * Icon code with the value '\uEC61'. */ completedSolid: '\uEC61', /** * Icon code with the value '\uE77B'. */ contact: '\uE77B', /** * Icon code with the value '\uEEBD'. */ contactCard: '\uEEBD', /** * Icon code with the value '\uE779'. */ contactInfo: '\uE779', /** * Icon code with the value '\uE7B8'. */ container: '\uE7B8', /** * Icon code with the value '\uE7A1'. */ contrast: '\uE7A1', /** * Icon code with the value '\uE8C8'. */ copy: '\uE8C8', /** * Icon code with the value '\uEAF3'. */ cotton: '\uEAF3', /** * Icon code with the value '\uEB1E'. */ cricket: '\uEB1E', /** * Icon code with the value '\uEBEF'. */ css: '\uEBEF', /** * Icon code with the value '\uEEBE'. */ customList: '\uEEBE', /** * Icon code with the value '\uEEBF'. */ customListMirrored: '\uEEBF', /** * Icon code with the value '\uEAC7'. */ cycling: '\uEAC7', /** * Icon code with the value '\uEEB7'. */ dataConnectionLibrary: '\uEEB7', /** * Icon code with the value '\uEA17'. */ dateTime2: '\uEA17', /** * Icon code with the value '\uEC92'. */ dateTime: '\uEC92', /** * Icon code with the value '\uEE93'. */ dateTimeMirrored: '\uEE93', /** * Icon code with the value '\uE290'. */ decreaseIndentLegacy: '\uE290', /** * Icon code with the value '\uEEEE'. */ delveAnalytics: '\uEEEE', /** * Icon code with the value '\uEDCA'. */ delveAnalyticsLogo: '\uEDCA', /** * Icon code with the value '\uED76'. */ delveLogo: '\uED76', /** * Icon code with the value '\uEDC1'. */ descending: '\uEDC1', /** * Icon code with the value '\uEB3C'. */ design: '\uEB3C', /** * Icon code with the value '\uEC7A'. */ developerTools: '\uEC7A', /** * Icon code with the value '\uEA6C'. */ devices3: '\uEA6C', /** * Icon code with the value '\uEB66'. */ devices4: '\uEB66', /** * Icon code with the value '\uE75F'. */ dialpad: '\uE75F', /** * Icon code with the value '\uE82D'. */ dictionary: '\uE82D', /** * Icon code with the value '\uEAC8'. */ dietPlanNotebook: '\uEAC8', /** * Icon code with the value '\uE8D8'. */ disableUpdates: '\uE8D8', /** * Icon code with the value '\uE8E0'. */ dislike: '\uE8E0', /** * Icon code with the value '\uEEB8'. */ docLibrary: '\uEEB8', /** * Icon code with the value '\uE90C'. */ dockLeft: '\uE90C', /** * Icon code with the value '\uEA4C'. */ dockLeftMirrored: '\uEA4C', /** * Icon code with the value '\uE90D'. */ dockRight: '\uE90D', /** * Icon code with the value '\uEDCB'. */ docsLogo: '\uEDCB', /** * Icon code with the value '\uE8A5'. */ document: '\uE8A5', /** * Icon code with the value '\uEF57'. */ documentReply: '\uEF57', /** * Icon code with the value '\uEF6C'. */ documentSearch: '\uEF6C', /** * Icon code with the value '\uEED6'. */ documentSet: '\uEED6', /** * Icon code with the value '\uEC17'. */ documentation: '\uEC17', /** * Icon code with the value '\uEB75'. */ door: '\uEB75', /** * Icon code with the value '\uEB8F'. */ doubleBookmark: '\uEB8F', /** * Icon code with the value '\uEE97'. */ doubleChevronDown12: '\uEE97', /** * Icon code with the value '\uEE04'. */ doubleChevronDown: '\uEE04', /** * Icon code with the value '\uEE98'. */ doubleChevronLeft12: '\uEE98', /** * Icon code with the value '\uEDBE'. */ doubleChevronLeft: '\uEDBE', /** * Icon code with the value '\uE991'. */ doubleChevronLeftMed: '\uE991', /** * Icon code with the value '\uEA4D'. */ doubleChevronLeftMedMirrored: '\uEA4D', /** * Icon code with the value '\uEE99'. */ doubleChevronRight12: '\uEE99', /** * Icon code with the value '\uEDBF'. */ doubleChevronRight: '\uEDBF', /** * Icon code with the value '\uEE96'. */ doubleChevronUp12: '\uEE96', /** * Icon code with the value '\uEDBD'. */ doubleChevronUp: '\uEDBD', /** * Icon code with the value '\uE74B'. */ down: '\uE74B', /** * Icon code with the value '\uE896'. */ download: '\uE896', /** * Icon code with the value '\uECA8'. */ drm: '\uECA8', /** * Icon code with the value '\uEB42'. */ drop: '\uEB42', /** * Icon code with the value '\uED77'. */ dropboxLogo: '\uED77', /** * Icon code with the value '\uEDC5'. */ dropdown: '\uEDC5', /** * Icon code with the value '\uE9CD'. */ duststorm: '\uE9CD', /** * Icon code with the value '\uEDCD'. */ dynamicSmbLogo: '\uEDCD', /** * Icon code with the value '\uEDCC'. */ dynamics365Logo: '\uEDCC', /** * Icon code with the value '\uE807'. */ eatDrink: '\uE807', /** * Icon code with the value '\uEC60'. */ edgeLogo: '\uEC60', /** * Icon code with the value '\uE70F'. */ edit: '\uE70F', /** * Icon code with the value '\uEF61'. */ editMail: '\uEF61', /** * Icon code with the value '\uEB7E'. */ editMirrored: '\uEB7E', /** * Icon code with the value '\uED9D'. */ editNote: '\uED9D', /** * Icon code with the value '\uEF77'. */ editPhoto: '\uEF77', /** * Icon code with the value '\uEF60'. */ editStyle: '\uEF60', /** * Icon code with the value '\uECCE'. */ embed: '\uECCE', /** * Icon code with the value '\uE731'. */ emi: '\uE731', /** * Icon code with the value '\uE76E'. */ emoji2: '\uE76E', /** * Icon code with the value '\uE899'. */ emoji: '\uE899', /** * Icon code with the value '\uEA88'. */ emojiDisappointed: '\uEA88', /** * Icon code with the value '\uEA87'. */ emojiNeutral: '\uEA87', /** * Icon code with the value '\uEF88'. */ emptyRecycleBin: '\uEF88', /** * Icon code with the value '\uE9E9'. */ equalizer: '\uE9E9', /** * Icon code with the value '\uE75C'. */ eraseTool: '\uE75C', /** * Icon code with the value '\uE783'. */ error: '\uE783', /** * Icon code with the value '\uEA39'. */ errorBadge: '\uEA39', /** * Icon code with the value '\uECA3'. */ event: '\uECA3', /** * Icon code with the value '\uED8B'. */ eventInfo: '\uED8B', /** * Icon code with the value '\uEF73'. */ excelDocument: '\uEF73', /** * Icon code with the value '\uEC28'. */ excelLogo: '\uEC28', /** * Icon code with the value '\uED78'. */ exchangeLogo: '\uED78', /** * Icon code with the value '\uEF67'. */ expandMenu: '\uEF67', /** * Icon code with the value '\uF09C'. */ fabricAssetLibrary: '\uF09C', /** * Icon code with the value '\uF09D'. */ fabricDataConnectionLibrary: '\uF09D', /** * Icon code with the value '\uF09E'. */ fabricDocLibrary: '\uF09E', /** * Icon code with the value '\uF0A9'. */ fabricFolder: '\uF0A9', /** * Icon code with the value '\uF0AA'. */ fabricFolderFill: '\uF0AA', /** * Icon code with the value '\uF0A4'. */ fabricFolderSearch: '\uF0A4', /** * Icon code with the value '\uF09F'. */ fabricFormLibrary: '\uF09F', /** * Icon code with the value '\uF0A0'. */ fabricFormLibraryMirrored: '\uF0A0', /** * Icon code with the value '\uF0A5'. */ fabricMovetoFolder: '\uF0A5', /** * Icon code with the value '\uF0AB'. */ fabricNewFolder: '\uF0AB', /** * Icon code with the value '\uF0A8'. */ fabricOpenFolderHorizontal: '\uF0A8', /** * Icon code with the value '\uF0AC'. */ fabricPictureLibrary: '\uF0AC', /** * Icon code with the value '\uF0A3'. */ fabricPublicFolder: '\uF0A3', /** * Icon code with the value '\uF0A1'. */ fabricReportLibrary: '\uF0A1', /** * Icon code with the value '\uF0A2'. */ fabricReportLibraryMirrored: '\uF0A2', /** * Icon code with the value '\uF0A7'. */ fabricSyncFolder: '\uF0A7', /** * Icon code with the value '\uF0A6'. */ fabricUnsyncFolder: '\uF0A6', /** * Icon code with the value '\uECB3'. */ facebookLogo: '\uECB3', /** * Icon code with the value '\uEBDA'. */ family: '\uEBDA', /** * Icon code with the value '\uECEB'. */ fangBody: '\uECEB', /** * Icon code with the value '\uE728'. */ favoriteList: '\uE728', /** * Icon code with the value '\uE734'. */ favoriteStar: '\uE734', /** * Icon code with the value '\uE735'. */ favoriteStarFill: '\uE735', /** * Icon code with the value '\uEF5C'. */ fax: '\uEF5C', /** * Icon code with the value '\uE7E3'. */ ferry: '\uE7E3', /** * Icon code with the value '\uEB48'. */ ferrySolid: '\uEB48', /** * Icon code with the value '\uE71C'. */ filter: '\uE71C', /** * Icon code with the value '\uE795'. */ filters: '\uE795', /** * Icon code with the value '\uE7BB'. */ financial: '\uE7BB', /** * Icon code with the value '\uE928'. */ fingerprint: '\uE928', /** * Icon code with the value '\uE7C1'. */ flag: '\uE7C1', /** * Icon code with the value '\uE935'. */ flickDown: '\uE935', /** * Icon code with the value '\uE937'. */ flickLeft: '\uE937', /** * Icon code with the value '\uE938'. */ flickRight: '\uE938', /** * Icon code with the value '\uE936'. */ flickUp: '\uE936', /** * Icon code with the value '\uEF90'. */ flow: '\uEF90', /** * Icon code with the value '\uE9CB'. */ fog: '\uE9CB', /** * Icon code with the value '\uE8B7'. */ folder: '\uE8B7', /** * Icon code with the value '\uE8D5'. */ folderFill: '\uE8D5', /** * Icon code with the value '\uF12B'. */ folderHorizontal: '\uF12B', /** * Icon code with the value '\uE838'. */ folderOpen: '\uE838', /** * Icon code with the value '\uEF65'. */ folderSearch: '\uEF65', /** * Icon code with the value '\uE8D2'. */ font: '\uE8D2', /** * Icon code with the value '\uE8D3'. */ fontColor: '\uE8D3', /** * Icon code with the value '\uE8E7'. */ fontDecrease: '\uE8E7', /** * Icon code with the value '\uE8E8'. */ fontIncrease: '\uE8E8', /** * Icon code with the value '\uE8E9'. */ fontSize: '\uE8E9', /** * Icon code with the value '\uEEB9'. */ formLibrary: '\uEEB9', /** * Icon code with the value '\uEEBA'. */ formLibraryMirrored: '\uEEBA', /** * Icon code with the value '\uE72A'. */ forward: '\uE72A', /** * Icon code with the value '\uED8C'. */ forwardEvent: '\uED8C', /** * Icon code with the value '\uE9EF'. */ freezing: '\uE9EF', /** * Icon code with the value '\uE9CA'. */ frigid: '\uE9CA', /** * Icon code with the value '\uE91F'. */ fullCircleMask: '\uE91F', /** * Icon code with the value '\uE740'. */ fullScreen: '\uE740', /** * Icon code with the value '\uE9DA'. */ generate: '\uE9DA', /** * Icon code with the value '\uEB8E'. */ giftCard: '\uEB8E', /** * Icon code with the value '\uEC1F'. */ giftbox: '\uEC1F', /** * Icon code with the value '\uEA16'. */ glasses: '\uEA16', /** * Icon code with the value '\uECF4'. */ glimmer: '\uECF4', /** * Icon code with the value '\uE700'. */ globalNavButton: '\uE700', /** * Icon code with the value '\uE774'. */ globe: '\uE774', /** * Icon code with the value '\uEF53'. */ globeFavorite: '\uEF53', /** * Icon code with the value '\uEB1F'. */ golf: '\uEB1F', /** * Icon code with the value '\uEE0B'. */ googleDriveLogo: '\uEE0B', /** * Icon code with the value '\uE8D1'. */ gotoToday: '\uE8D1', /** * Icon code with the value '\uE75E'. */ gripperTool: '\uE75E', /** * Icon code with the value '\uE902'. */ group: '\uE902', /** * Icon code with the value '\uEE67'. */ groupedAscending: '\uEE67', /** * Icon code with the value '\uEE66'. */ groupedDescending: '\uEE66', /** * Icon code with the value '\uEF74'. */ groupedList: '\uEF74', /** * Icon code with the value '\uEA00'. */ hailDay: '\uEA00', /** * Icon code with the value '\uEA13'. */ hailNight: '\uEA13', /** * Icon code with the value '\uE929'. */ handwriting: '\uE929', /** * Icon code with the value '\uEA19'. */ header1: '\uEA19', /** * Icon code with the value '\uEF36'. */ header2: '\uEF36', /** * Icon code with the value '\uEF37'. */ header3: '\uEF37', /** * Icon code with the value '\uEF38'. */ header4: '\uEF38', /** * Icon code with the value '\uE95B'. */ headset: '\uE95B', /** * Icon code with the value '\uE95E'. */ health: '\uE95E', /** * Icon code with the value '\uEB51'. */ heart: '\uEB51', /** * Icon code with the value '\uEB52'. */ heartFill: '\uEB52', /** * Icon code with the value '\uE897'. */ help: '\uE897', /** * Icon code with the value '\uEA51'. */ helpMirrored: '\uEA51', /** * Icon code with the value '\uEF89'. */ hide2: '\uEF89', /** * Icon code with the value '\uED1A'. */ hide: '\uED1A', /** * Icon code with the value '\uE81C'. */ history: '\uE81C', /** * Icon code with the value '\uE80F'. */ home: '\uE80F', /** * Icon code with the value '\uEA8A'. */ homeSolid: '\uEA8A', /** * Icon code with the value '\uE91D'. */ hospital: '\uE91D', /** * Icon code with the value '\uE824'. */ hotel: '\uE824', /** * Icon code with the value '\uEF8A'. */ iOsAppStoreLogo: '\uEF8A', /** * Icon code with the value '\uE8C9'. */ important: '\uE8C9', /** * Icon code with the value '\uEF64'. */ inboxCheck: '\uEF64', /** * Icon code with the value '\uE814'. */ incidentTriangle: '\uE814', /** * Icon code with the value '\uE291'. */ increaseIndentLegacy: '\uE291', /** * Icon code with the value '\uEA1F'. */ info2: '\uEA1F', /** * Icon code with the value '\uE946'. */ info: '\uE946', /** * Icon code with the value '\uEC7D'. */ insertTextBox: '\uEC7D', /** * Icon code with the value '\uE704'. */ internetSharing: '\uE704', /** * Icon code with the value '\uEEC0'. */ issueTracking: '\uEEC0', /** * Icon code with the value '\uEEC1'. */ issueTrackingMirrored: '\uEEC1', /** * Icon code with the value '\uE8DB'. */ italic: '\uE8DB', /** * Icon code with the value '\uED8F'. */ joinOnlineMeeting: '\uED8F', /** * Icon code with the value '\uEBF0'. */ js: '\uEBF0', /** * Icon code with the value '\uE932'. */ label: '\uE932', /** * Icon code with the value '\uEF6B'. */ landscapeOrientation: '\uEF6B', /** * Icon code with the value '\uEC76'. */ laptopSelected: '\uEC76', /** * Icon code with the value '\uEECB'. */ largeGrid: '\uEECB', /** * Icon code with the value '\uE8F1'. */ library: '\uE8F1', /** * Icon code with the value '\uEF62'. */ lifesaver: '\uEF62', /** * Icon code with the value '\uEF63'. */ lifesaverLock: '\uEF63', /** * Icon code with the value '\uE793'. */ light: '\uE793', /** * Icon code with the value '\uEA80'. */ lightbulb: '\uEA80', /** * Icon code with the value '\uE945'. */ lightningBolt: '\uE945', /** * Icon code with the value '\uE8E1'. */ like: '\uE8E1', /** * Icon code with the value '\uE71B'. */ link: '\uE71B', /** * Icon code with the value '\uEA37'. */ list: '\uEA37', /** * Icon code with the value '\uEA55'. */ listMirrored: '\uEA55', /** * Icon code with the value '\uE81D'. */ location: '\uE81D', /** * Icon code with the value '\uE80E'. */ locationCircle: '\uE80E', /** * Icon code with the value '\uE827'. */ locationDot: '\uE827', /** * Icon code with the value '\uE920'. */ locationFill: '\uE920', /** * Icon code with the value '\uE72E'. */ lock: '\uE72E', /** * Icon code with the value '\uEC8A'. */ lowerBrightness: '\uEC8A', /** * Icon code with the value '\uED79'. */ lyncLogo: '\uED79', /** * Icon code with the value '\uE715'. */ mail: '\uE715', /** * Icon code with the value '\uED80'. */ mailAlert: '\uED80', /** * Icon code with the value '\uED81'. */ mailCheck: '\uED81', /** * Icon code with the value '\uE8A8'. */ mailFill: '\uE8A8', /** * Icon code with the value '\uE89C'. */ mailForward: '\uE89C', /** * Icon code with the value '\uEA56'. */ mailForwardMirrored: '\uEA56', /** * Icon code with the value '\uED82'. */ mailLowImportance: '\uED82', /** * Icon code with the value '\uED83'. */ mailPause: '\uED83', /** * Icon code with the value '\uED84'. */ mailRepeat: '\uED84', /** * Icon code with the value '\uE8CA'. */ mailReply: '\uE8CA', /** * Icon code with the value '\uE8C2'. */ mailReplyAll: '\uE8C2', /** * Icon code with the value '\uEA58'. */ mailReplyAllMirrored: '\uEA58', /** * Icon code with the value '\uEA57'. */ mailReplyMirrored: '\uEA57', /** * Icon code with the value '\uE816'. */ mapDirections: '\uE816', /** * Icon code with the value '\uE707'. */ mapPin: '\uE707', /** * Icon code with the value '\uEAFC'. */ market: '\uEAFC', /** * Icon code with the value '\uEF42'. */ marketDown: '\uEF42', /** * Icon code with the value '\uE789'. */ megaphone: '\uE789', /** * Icon code with the value '\uE77C'. */ memo: '\uE77C', /** * Icon code with the value '\uE7D5'. */ merge: '\uE7D5', /** * Icon code with the value '\uE8BD'. */ message: '\uE8BD', /** * Icon code with the value '\uEC70'. */ messageFill: '\uEC70', /** * Icon code with the value '\uE720'. */ microphone: '\uE720', /** * Icon code with the value '\uF130'. */ microsoftStaffhubLogo: '\uF130', /** * Icon code with the value '\uE732'. */ miniLink: '\uE732', /** * Icon code with the value '\uEC75'. */ mobileSelected: '\uEC75', /** * Icon code with the value '\uEAFD'. */ money: '\uEAFD', /** * Icon code with the value '\uE712'. */ more: '\uE712', /** * Icon code with the value '\uEB22'. */ moreSports: '\uEB22', /** * Icon code with the value '\uE7C2'. */ move: '\uE7C2', /** * Icon code with the value '\uE8DE'. */ moveToFolder: '\uE8DE', /** * Icon code with the value '\uEB6C'. */ msnLogo: '\uEB6C', /** * Icon code with the value '\uE762'. */ multiSelect: '\uE762', /** * Icon code with the value '\uEA98'. */ multiSelectMirrored: '\uEA98', /** * Icon code with the value '\uE940'. */ musicInCollection: '\uE940', /** * Icon code with the value '\uEA36'. */ musicInCollectionFill: '\uEA36', /** * Icon code with the value '\uEC4F'. */ musicNote: '\uEC4F', /** * Icon code with the value '\uE800'. */ nav2DMapView: '\uE800', /** * Icon code with the value '\uE8F4'. */ newFolder: '\uE8F4', /** * Icon code with the value '\uE900'. */ news: '\uE900', /** * Icon code with the value '\uED99'. */ noteForward: '\uED99', /** * Icon code with the value '\uED9A'. */ notePinned: '\uED9A', /** * Icon code with the value '\uED98'. */ noteReply: '\uED98', /** * Icon code with the value '\uEDC4'. */ numberField: '\uEDC4', /** * Icon code with the value '\uEA1C'. */ numberedList: '\uEA1C', /** * Icon code with the value '\uEDCE'. */ officeAssistantLogo: '\uEDCE', /** * Icon code with the value '\uEF86'. */ officeFormLogo: '\uEF86', /** * Icon code with the value '\uEB6E'. */ officeLogo: '\uEB6E', /** * Icon code with the value '\uEDCF'. */ officeStoreLogo: '\uEDCF', /** * Icon code with the value '\uED7A'. */ officeVideoLogo: '\uED7A', /** * Icon code with the value '\uEEC8'. */ offlineOneDriveParachute: '\uEEC8', /** * Icon code with the value '\uEEC9'. */ offlineOneDriveParachuteDisabled: '\uEEC9', /** * Icon code with the value '\uE941'. */ oneDrive: '\uE941', /** * Icon code with the value '\uEF32'. */ oneDriveAdd: '\uEF32', /** * Icon code with the value '\uEDD0'. */ oneNoteEduLogo: '\uEDD0', /** * Icon code with the value '\uEC0D'. */ oneNoteLogo: '\uEC0D', /** * Icon code with the value '\uE8E5'. */ openFile: '\uE8E5', /** * Icon code with the value '\uED25'. */ openFolderHorizontal: '\uED25', /** * Icon code with the value '\uE8A7'. */ openInNewWindow: '\uE8A7', /** * Icon code with the value '\uE8A0'. */ openPane: '\uE8A0', /** * Icon code with the value '\uEA5B'. */ openPaneMirrored: '\uEA5B', /** * Icon code with the value '\uECA6'. */ org: '\uECA6', /** * Icon code with the value '\uED34'. */ outOfOffice: '\uED34', /** * Icon code with the value '\uEB6D'. */ outlookLogo: '\uEB6D', /** * Icon code with the value '\uE7C3'. */ page: '\uE7C3', /** * Icon code with the value '\uEA1A'. */ pageAdd: '\uEA1A', /** * Icon code with the value '\uF02C'. */ pageCheckedOut: '\uF02C', /** * Icon code with the value '\uF104'. */ pageCheckedin: '\uF104', /** * Icon code with the value '\uE760'. */ pageLeft: '\uE760', /** * Icon code with the value '\uE761'. */ pageRight: '\uE761', /** * Icon code with the value '\uE729'. */ pageSolid: '\uE729', /** * Icon code with the value '\uE7B0'. */ panoIndicator: '\uE7B0', /** * Icon code with the value '\uED7B'. */ paratureLogo: '\uED7B', /** * Icon code with the value '\uE9C0'. */ partlyCloudyDay: '\uE9C0', /** * Icon code with the value '\uE9C1'. */ partlyCloudyNight: '\uE9C1', /** * Icon code with the value '\uECA7'. */ partyLeader: '\uECA7', /** * Icon code with the value '\uE769'. */ pause: '\uE769', /** * Icon code with the value '\uE8C7'. */ paymentCard: '\uE8C7', /** * Icon code with the value '\uE977'. */ pc1: '\uE977', /** * Icon code with the value '\uEA90'. */ pdf: '\uEA90', /** * Icon code with the value '\uEF7B'. */ pencilReply: '\uEF7B', /** * Icon code with the value '\uE716'. */ people: '\uE716', /** * Icon code with the value '\uEA15'. */ peopleAdd: '\uEA15', /** * Icon code with the value '\uED93'. */ peopleAlert: '\uED93', /** * Icon code with the value '\uED91'. */ peopleBlock: '\uED91', /** * Icon code with the value '\uED94'. */ peoplePause: '\uED94', /** * Icon code with the value '\uED92'. */ peopleRepeat: '\uED92', /** * Icon code with the value '\uE8D7'. */ permissions: '\uE8D7', /** * Icon code with the value '\uE717'. */ phone: '\uE717', /** * Icon code with the value '\uEB9F'. */ photo2: '\uEB9F', /** * Icon code with the value '\uECAB'. */ photo2Add: '\uECAB', /** * Icon code with the value '\uECAC'. */ photo2Remove: '\uECAC', /** * Icon code with the value '\uE7AA'. */ photoCollection: '\uE7AA', /** * Icon code with the value '\uE8B9'. */ picture: '\uE8B9', /** * Icon code with the value '\uEEC2'. */ pictureLibrary: '\uEEC2', /** * Icon code with the value '\uEB04'. */ pieDouble: '\uEB04', /** * Icon code with the value '\uEACB'. */ pill: '\uEACB', /** * Icon code with the value '\uE718'. */ pin: '\uE718', /** * Icon code with the value '\uE840'. */ pinned: '\uE840', /** * Icon code with the value '\uE842'. */ pinnedFill: '\uE842', /** * Icon code with the value '\uEDD1'. */ planner: '\uEDD1', /** * Icon code with the value '\uE768'. */ play: '\uE768', /** * Icon code with the value '\uEF58'. */ playerSettings: '\uEF58', /** * Icon code with the value '\uECAF'. */ poi: '\uECAF', /** * Icon code with the value '\uE8F3'. */ postUpdate: '\uE8F3', /** * Icon code with the value '\uF092'. */ powerApps2Logo: '\uF092', /** * Icon code with the value '\uEDD2'. */ powerApps: '\uEDD2', /** * Icon code with the value '\uF091'. */ powerAppsLogo: '\uF091', /** * Icon code with the value '\uEA1E'. */ powerBiLogo: '\uEA1E', /** * Icon code with the value '\uEF72'. */ powerPointDocument: '\uEF72', /** * Icon code with the value '\uEC2A'. */ powerPointLogo: '\uEC2A', /** * Icon code with the value '\uE9CF'. */ precipitation: '\uE9CF', /** * Icon code with the value '\uE979'. */ presenceChickletVideo: '\uE979', /** * Icon code with the value '\uE8FF'. */ preview: '\uE8FF', /** * Icon code with the value '\uE8A1'. */ previewLink: '\uE8A1', /** * Icon code with the value '\uE749'. */ print: '\uE749', /** * Icon code with the value '\uE956'. */ printfaxPrinterFile: '\uE956', /** * Icon code with the value '\uEB27'. */ proFootball: '\uEB27', /** * Icon code with the value '\uEB28'. */ proHockey: '\uEB28', /** * Icon code with the value '\uECDC'. */ product: '\uECDC', /** * Icon code with the value '\uEDD4'. */ projectLogo: '\uEDD4', /** * Icon code with the value '\uE8A6'. */ protectedDocument: '\uE8A6', /** * Icon code with the value '\uEF6D'. */ publicCalendar: '\uEF6D', /** * Icon code with the value '\uEF6E'. */ publicContactCard: '\uEF6E', /** * Icon code with the value '\uEF6F'. */ publicEmail: '\uEF6F', /** * Icon code with the value '\uEF70'. */ publicFolder: '\uEF70', /** * Icon code with the value '\uEA86'. */ puzzle: '\uEA86', /** * Icon code with the value '\uEE19'. */ questionnaire: '\uEE19', /** * Icon code with the value '\uEE4B'. */ questionnaireMirrored: '\uEE4B', /** * Icon code with the value '\uE70B'. */ quickNote: '\uE70B', /** * Icon code with the value '\uECCB'. */ radioBtnOn: '\uECCB', /** * Icon code with the value '\uE915'. */ radioBullet: '\uE915', /** * Icon code with the value '\uE9C4'. */ rain: '\uE9C4', /** * Icon code with the value '\uE9C3'. */ rainShowersDay: '\uE9C3', /** * Icon code with the value '\uEA0F'. */ rainShowersNight: '\uEA0F', /** * Icon code with the value '\uE9C7'. */ rainSnow: '\uE9C7', /** * Icon code with the value '\uE8C3'. */ read: '\uE8C3', /** * Icon code with the value '\uE736'. */ readingMode: '\uE736', /** * Icon code with the value '\uEF5B'. */ receiptCheck: '\uEF5B', /** * Icon code with the value '\uEF59'. */ receiptForward: '\uEF59', /** * Icon code with the value '\uEF5A'. */ receiptReply: '\uEF5A', /** * Icon code with the value '\uE823'. */ recent: '\uE823', /** * Icon code with the value '\uEF5D'. */ recurringEvent: '\uEF5D', /** * Icon code with the value '\uEDB2'. */ recurringTask: '\uEDB2', /** * Icon code with the value '\uEF87'. */ recycleBin: '\uEF87', /** * Icon code with the value '\uE7B3'. */ redEye: '\uE7B3', /** * Icon code with the value '\uE7A6'. */ redo: '\uE7A6', /** * Icon code with the value '\uE72C'. */ refresh: '\uE72C', /** * Icon code with the value '\uEBF8'. */ reminderGroup: '\uEBF8', /** * Icon code with the value '\uE738'. */ remove: '\uE738', /** * Icon code with the value '\uED8A'. */ removeEvent: '\uED8A', /** * Icon code with the value '\uEB08'. */ removeFilter: '\uEB08', /** * Icon code with the value '\uED90'. */ removeLink: '\uED90', /** * Icon code with the value '\uED9B'. */ removeOccurrence: '\uED9B', /** * Icon code with the value '\uE8AC'. */ rename: '\uE8AC', /** * Icon code with the value '\uED50'. */ reopenPages: '\uED50', /** * Icon code with the value '\uE90F'. */ repair: '\uE90F', /** * Icon code with the value '\uE97A'. */ reply: '\uE97A', /** * Icon code with the value '\uEE0A'. */ replyAll: '\uEE0A', /** * Icon code with the value '\uEF5F'. */ replyAllAlt: '\uEF5F', /** * Icon code with the value '\uEE36'. */ replyAllMirrored: '\uEE36', /** * Icon code with the value '\uEF5E'. */ replyAlt: '\uEF5E', /** * Icon code with the value '\uEE35'. */ replyMirrored: '\uEE35', /** * Icon code with the value '\uEEBB'. */ reportLibrary: '\uEEBB', /** * Icon code with the value '\uEEBC'. */ reportLibraryMirrored: '\uEEBC', /** * Icon code with the value '\uED24'. */ returnToSession: '\uED24', /** * Icon code with the value '\uE845'. */ revToggleKey: '\uE845', /** * Icon code with the value '\uE9D1'. */ ribbon: '\uE9D1', /** * Icon code with the value '\uE9B1'. */ rightDoubleQuote: '\uE9B1', /** * Icon code with the value '\uEA8F'. */ ringer: '\uEA8F', /** * Icon code with the value '\uED9F'. */ room: '\uED9F', /** * Icon code with the value '\uE7AD'. */ rotate: '\uE7AD', /** * Icon code with the value '\uEB2D'. */ rugby: '\uEB2D', /** * Icon code with the value '\uEADA'. */ running: '\uEADA', /** * Icon code with the value '\uE757'. */ sad: '\uE757', /** * Icon code with the value '\uE74E'. */ save: '\uE74E', /** * Icon code with the value '\uE792'. */ saveAs: '\uE792', /** * Icon code with the value '\uE721'. */ search: '\uE721', /** * Icon code with the value '\uEC0C'. */ section: '\uEC0C', /** * Icon code with the value '\uEF76'. */ sections: '\uEF76', /** * Icon code with the value '\uED85'. */ securityGroup: '\uED85', /** * Icon code with the value '\uE724'. */ send: '\uE724', /** * Icon code with the value '\uEA63'. */ sendMirrored: '\uEA63', /** * Icon code with the value '\uF071'. */ setAction: '\uF071', /** * Icon code with the value '\uE713'. */ settings: '\uE713', /** * Icon code with the value '\uE72D'. */ share: '\uE72D', /** * Icon code with the value '\uEF79'. */ shareiOs: '\uEF79', /** * Icon code with the value '\uED18'. */ sharepointLogo: '\uED18', /** * Icon code with the value '\uEA18'. */ shield: '\uEA18', /** * Icon code with the value '\uE719'. */ shop: '\uE719', /** * Icon code with the value '\uE7BF'. */ shoppingCart: '\uE7BF', /** * Icon code with the value '\uE8BC'. */ showResults: '\uE8BC', /** * Icon code with the value '\uEA65'. */ showResultsMirrored: '\uEA65', /** * Icon code with the value '\uEF52'. */ sidePanel: '\uEF52', /** * Icon code with the value '\uEDFF'. */ singleBookmark: '\uEDFF', /** * Icon code with the value '\uE759'. */ sipMove: '\uE759', /** * Icon code with the value '\uEF80'. */ skypeCheck: '\uEF80', /** * Icon code with the value '\uEF7D'. */ skypeCircleCheck: '\uEF7D', /** * Icon code with the value '\uEF7E'. */ skypeCircleClock: '\uEF7E', /** * Icon code with the value '\uEF7F'. */ skypeCircleMinus: '\uEF7F', /** * Icon code with the value '\uEF81'. */ skypeClock: '\uEF81', /** * Icon code with the value '\uEB6F'. */ skypeLogo: '\uEB6F', /** * Icon code with the value '\uEF83'. */ skypeMessage: '\uEF83', /** * Icon code with the value '\uEF82'. */ skypeMinus: '\uEF82', /** * Icon code with the value '\uEC13'. */ sliderThumb: '\uEC13', /** * Icon code with the value '\uEB46'. */ snow: '\uEB46', /** * Icon code with the value '\uE9FD'. */ snowShowerDay: '\uE9FD', /** * Icon code with the value '\uEA11'. */ snowShowerNight: '\uEA11', /** * Icon code with the value '\uEB21'. */ soccer: '\uEB21', /** * Icon code with the value '\uED7C'. */ socialListeningLogo: '\uED7C', /** * Icon code with the value '\uE8CB'. */ sort: '\uE8CB', /** * Icon code with the value '\uEE69'. */ sortDown: '\uEE69', /** * Icon code with the value '\uE9D0'. */ sortLines: '\uE9D0', /** * Icon code with the value '\uEE68'. */ sortUp: '\uEE68', /** * Icon code with the value '\uE7F5'. */ speakers: '\uE7F5', /** * Icon code with the value '\uEC4A'. */ speedHigh: '\uEC4A', /** * Icon code with the value '\uEDBC'. */ split: '\uEDBC', /** * Icon code with the value '\uE9CC'. */ squalls: '\uE9CC', /** * Icon code with the value '\uE7FF'. */ stackIndicator: '\uE7FF', /** * Icon code with the value '\uEF78'. */ starburst: '\uEF78', /** * Icon code with the value '\uEB90'. */ statusErrorFull: '\uEB90', /** * Icon code with the value '\uEA82'. */ statusTriangle: '\uEA82', /** * Icon code with the value '\uEB0F'. */ stockDown: '\uEB0F', /** * Icon code with the value '\uEB11'. */ stockUp: '\uEB11', /** * Icon code with the value '\uE916'. */ stopwatch: '\uE916', /** * Icon code with the value '\uEA96'. */ storeLogo: '\uEA96', /** * Icon code with the value '\uEA04'. */ storeLogoMed: '\uEA04', /** * Icon code with the value '\uEDE0'. */ strikethrough: '\uEDE0', /** * Icon code with the value '\uEDA1'. */ subscribe: '\uEDA1', /** * Icon code with the value '\uEDDF'. */ subscript: '\uEDDF', /** * Icon code with the value '\uEDD3'. */ suitcase: '\uEDD3', /** * Icon code with the value '\uEF69'. */ sunAdd: '\uEF69', /** * Icon code with the value '\uEF6A'. */ sunQuestionMark: '\uEF6A', /** * Icon code with the value '\uE9BD'. */ sunny: '\uE9BD', /** * Icon code with the value '\uEDDE'. */ superscript: '\uEDDE', /** * Icon code with the value '\uED29'. */ swayLogo: '\uED29', /** * Icon code with the value '\uE8AB'. */ switcher: '\uE8AB', /** * Icon code with the value '\uE810'. */ switcherStartEnd: '\uE810', /** * Icon code with the value '\uE895'. */ sync: '\uE895', /** * Icon code with the value '\uE8F7'. */ syncFolder: '\uE8F7', /** * Icon code with the value '\uEE6E'. */ syncToPc: '\uEE6E', /** * Icon code with the value '\uE770'. */ system: '\uE770', /** * Icon code with the value '\uE7E9'. */ tab: '\uE7E9', /** * Icon code with the value '\uED86'. */ table: '\uED86', /** * Icon code with the value '\uE70A'. */ tablet: '\uE70A', /** * Icon code with the value '\uEC74'. */ tabletSelected: '\uEC74', /** * Icon code with the value '\uE8EC'. */ tag: '\uE8EC', /** * Icon code with the value '\uEDB7'. */ taskManager: '\uEDB7', /** * Icon code with the value '\uEDB8'. */ taskManagerMirrored: '\uEDB8', /** * Icon code with the value '\uEA12'. */ teamwork: '\uEA12', /** * Icon code with the value '\uEE58'. */ temporaryUser: '\uEE58', /** * Icon code with the value '\uEB33'. */ tennis: '\uEB33', /** * Icon code with the value '\uEDC2'. */ textBox: '\uEDC2', /** * Icon code with the value '\uEDC3'. */ textField: '\uEDC3', /** * Icon code with the value '\uE7B6'. */ thumbnailView: '\uE7B6', /** * Icon code with the value '\uEA67'. */ thumbnailViewMirrored: '\uEA67', /** * Icon code with the value '\uE9C6'. */ thunderstorms: '\uE9C6', /** * Icon code with the value '\uEB54'. */ ticket: '\uEB54', /** * Icon code with the value '\uEF7C'. */ tiles2: '\uEF7C', /** * Icon code with the value '\uECA5'. */ tiles: '\uECA5', /** * Icon code with the value '\uED9C'. */ timeline: '\uED9C', /** * Icon code with the value '\uE91E'. */ timer: '\uE91E', /** * Icon code with the value '\uEC12'. */ toggleBorder: '\uEC12', /** * Icon code with the value '\uEC11'. */ toggleFilled: '\uEC11', /** * Icon code with the value '\uEC14'. */ toggleThumb: '\uEC14', /** * Icon code with the value '\uE815'. */ touch: '\uE815', /** * Icon code with the value '\uE7C9'. */ touchPointer: '\uE7C9', /** * Icon code with the value '\uE7C0'. */ train: '\uE7C0', /** * Icon code with the value '\uEB4D'. */ trainSolid: '\uEB4D', /** * Icon code with the value '\uED95'. */ transferCall: '\uED95', /** * Icon code with the value '\uE74D'. */ trash: '\uE74D', /** * Icon code with the value '\uEED1'. */ triangleDown12: '\uEED1', /** * Icon code with the value '\uEED2'. */ triangleLeft12: '\uEED2', /** * Icon code with the value '\uEED3'. */ triangleRight12: '\uEED3', /** * Icon code with the value '\uEECD'. */ triangleSolidDown12: '\uEECD', /** * Icon code with the value '\uEECE'. */ triangleSolidLeft12: '\uEECE', /** * Icon code with the value '\uEECF'. */ triangleSolidRight12: '\uEECF', /** * Icon code with the value '\uEECC'. */ triangleSolidUp12: '\uEECC', /** * Icon code with the value '\uEED0'. */ triangleUp12: '\uEED0', /** * Icon code with the value '\uED3F'. */ trophy: '\uED3F', /** * Icon code with the value '\uE7DB'. */ turnRight: '\uE7DB', /** * Icon code with the value '\uE7F4'. */ tvMonitor: '\uE7F4', /** * Icon code with the value '\uEC77'. */ tvMonitorSelected: '\uEC77', /** * Icon code with the value '\uE8DC'. */ underline: '\uE8DC', /** * Icon code with the value '\uE7A7'. */ undo: '\uE7A7', /** * Icon code with the value '\uE8D9'. */ unfavorite: '\uE8D9', /** * Icon code with the value '\uED97'. */ unknownCall: '\uED97', /** * Icon code with the value '\uE785'. */ unlock: '\uE785', /** * Icon code with the value '\uE77A'. */ unpin: '\uE77A', /** * Icon code with the value '\uEDA0'. */ unsubscribe: '\uEDA0', /** * Icon code with the value '\uE8F6'. */ unsyncFolder: '\uE8F6', /** * Icon code with the value '\uE74A'. */ up: '\uE74A', /** * Icon code with the value '\uE898'. */ upload: '\uE898', /** * Icon code with the value '\uE714'. */ video: '\uE714', /** * Icon code with the value '\uEA0C'. */ videoSolid: '\uEA0C', /** * Icon code with the value '\uE890'. */ view: '\uE890', /** * Icon code with the value '\uEF56'. */ viewAll2: '\uEF56', /** * Icon code with the value '\uE8A9'. */ viewAll: '\uE8A9', /** * Icon code with the value '\uED7D'. */ visioLogo: '\uED7D', /** * Icon code with the value '\uED87'. */ voicemailForward: '\uED87', /** * Icon code with the value '\uED88'. */ voicemailReply: '\uED88', /** * Icon code with the value '\uE992'. */ volume0: '\uE992', /** * Icon code with the value '\uE993'. */ volume1: '\uE993', /** * Icon code with the value '\uE994'. */ volume2: '\uE994', /** * Icon code with the value '\uE995'. */ volume3: '\uE995', /** * Icon code with the value '\uEA85'. */ volumeDisabled: '\uEA85', /** * Icon code with the value '\uED89'. */ waffle: '\uED89', /** * Icon code with the value '\uE7BA'. */ warning: '\uE7BA', /** * Icon code with the value '\uEB41'. */ website: '\uEB41', /** * Icon code with the value '\uEADB'. */ weights: '\uEADB', /** * Icon code with the value '\uEBE6'. */ windDirection: '\uEBE6', /** * Icon code with the value '\uE782'. */ windowsLogo: '\uE782', /** * Icon code with the value '\uED8D'. */ wipePhone: '\uED8D', /** * Icon code with the value '\uEF71'. */ wordDocument: '\uEF71', /** * Icon code with the value '\uEC29'. */ wordLogo: '\uEC29', /** * Icon code with the value '\uE821'. */ work: '\uE821', /** * Icon code with the value '\uEA01'. */ workFlow: '\uEA01', /** * Icon code with the value '\uE918'. */ worldClock: '\uE918', /** * Icon code with the value '\uED19'. */ yammerLogo: '\uED19', /** * Icon code with the value '\uE71E'. */ zoom: '\uE71E', /** * Icon code with the value '\uE8A3'. */ zoomIn: '\uE8A3', /** * Icon code with the value '\uE71F'. */ zoomOut: '\uE71F' }; /***/ }, /* 125 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var index_1 = __webpack_require__(118); var glamorExports_1 = __webpack_require__(70); /** * Generates a focus style which can be used to define an :after focus border. * * @param theme - The theme object to use. * @param inset - The number of pixels to inset the border. * @param color - The color for the border. * @param position - The positioning applied to the container. Must * be 'relative' or 'absolute' so that the focus border can live around it. * @returns The style object. */ function getFocusStyle(theme, inset, color, position) { if (inset === void 0) { inset = '0'; } if (color === void 0) { color = theme.palette.neutralSecondary; } if (position === void 0) { position = 'relative'; } return index_1.mergeStyles({ outline: 'transparent', position: position }, glamorExports_1.parent('.ms-Fabric.is-focusVisible', { ':focus:after': { content: '""', position: 'absolute', left: inset, top: inset, bottom: inset, right: inset, border: '1px solid ' + color } })); } exports.getFocusStyle = getFocusStyle; /***/ }, /* 126 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var glamor_1 = __webpack_require__(71); /** * Takes a collection of collection of styles, defined in various formats, and compresses them into * a single thing of one format to return. * If any class names (strings) are passed in, it will return a list of space-separated class names, * using glamor to generate a class name for all passed in style objects. * Otherwise, all style objects passed in will be compressed into a single IProcessedStyle. * * @export * @param {(...(IStyle | string)[])} args * @returns {IStyle} */ function mergeStyles() { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } var classes = []; var rules = []; function _parseArgs(theArgs) { for (var _i = 0, theArgs_1 = theArgs; _i < theArgs_1.length; _i++) { var arg = theArgs_1[_i]; if (arg) { if (typeof arg === 'string') { classes.push(arg); } else if (Array.isArray(arg)) { _parseArgs(arg); } else { rules.push(arg); } } } } _parseArgs(args); var rulesObject = rules.length ? glamor_1.css.apply(void 0, rules) : null; if (classes.length) { if (rulesObject) { classes.push(rulesObject.toString()); } return classes.join(' '); } return rulesObject; } exports.mergeStyles = mergeStyles; /***/ }, /* 127 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var mergeStyles_1 = __webpack_require__(126); /** * Merges a give set of styles by running mergeStyles for each unique key. Works * like Object.assign in that it layers them in the argument order specified, but will * not mutate them and will return the merged result. */ function mergeStyleSets() { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } var mergedRules = {}; var setStyles = {}; args.forEach(function (arg) { return arg && Object.keys(arg).forEach(function (key) { if (!setStyles[key]) { setStyles[key] = []; } setStyles[key].push(arg[key]); }); }); Object.keys(setStyles).forEach(function (key) { mergedRules[key] = mergeStyles_1.mergeStyles(setStyles[key]); }); return mergedRules; } exports.mergeStyleSets = mergeStyleSets; /***/ }, /* 128 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var mergeStyles_1 = __webpack_require__(126); /** * Builds a class names object from a given map. * * @param styles - Map of unprocessed styles. * @returns Map of property name to class name. */ function buildClassMap(styles) { return Object .keys(styles) .reduce(function (classNames, className) { classNames[className] = mergeStyles_1.mergeStyles(styles[className]).toString(); return classNames; }, {}); } exports.buildClassMap = buildClassMap; /***/ }, /* 129 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var index_1 = __webpack_require__(118); var index_2 = __webpack_require__(120); exports.FontClassNames = index_1.buildClassMap(index_2.DefaultFontStyles); /***/ }, /* 130 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var index_1 = __webpack_require__(120); var index_2 = __webpack_require__(118); /** * All class names for all Fabric icons. */ exports.IconClassNames = {}; var _loop_1 = function (iconName) { Object.defineProperty(exports.IconClassNames, iconName, { get: function () { var className = index_2.mergeStyles(index_1.DefaultFontStyles.icon, { ':before': { content: "\"" + index_1.IconCodes[iconName] + "\"" } }).toString(); return className; }, enumerable: true, configurable: true }); }; // tslint:disable-next-line:forin for (var iconName in index_1.IconCodes) { _loop_1(iconName); } /***/ }, /* 131 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var index_1 = __webpack_require__(118); var DefaultPalette_1 = __webpack_require__(122); exports.ColorClassNames = {}; for (var colorName in DefaultPalette_1.DefaultPalette) { if (DefaultPalette_1.DefaultPalette.hasOwnProperty(colorName)) { // Foreground color _defineGetter(exports.ColorClassNames, colorName, '', false, 'color'); // Hover color _defineGetter(exports.ColorClassNames, colorName, 'Hover', true, 'color'); // Background color _defineGetter(exports.ColorClassNames, colorName, 'Background', false, 'background'); // Background hover _defineGetter(exports.ColorClassNames, colorName, 'BackgroundHover', true, 'background'); // Border color _defineGetter(exports.ColorClassNames, colorName, 'Border', false, 'borderColor'); // Border hover color _defineGetter(exports.ColorClassNames, colorName, 'BorderHover', true, 'borderColor'); } } /** * Defines a getter for the given class configuration. */ function _defineGetter(obj, colorName, suffix, isHover, cssProperty) { Object.defineProperty(obj, colorName + suffix, { get: function () { var style = (_a = {}, _a[cssProperty] = index_1.getTheme().palette[colorName], _a); return index_1.mergeStyles(isHover ? { ':hover': style } : style).toString(); var _a; }, enumerable: true, configurable: true }); } /***/ }, /* 132 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(133)); /***/ }, /* 133 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(134)); __export(__webpack_require__(140)); /***/ }, /* 134 */ /***/ 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 }); /* tslint:disable:no-unused-variable */ var React = __webpack_require__(2); var ReactDOM = __webpack_require__(3); /* tslint:enable:no-unused-variable */ var Fabric_1 = __webpack_require__(135); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(139); var styles = stylesImport; var _layersByHostId = {}; var Layer = (function (_super) { __extends(Layer, _super); function Layer(props) { var _this = _super.call(this, props) || this; _this._warnDeprecations({ onLayerMounted: 'onLayerDidMount' }); if (_this.props.hostId) { if (!_layersByHostId[_this.props.hostId]) { _layersByHostId[_this.props.hostId] = []; } _layersByHostId[_this.props.hostId].push(_this); } return _this; } /** * Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that * care about the specific host. */ Layer.notifyHostChanged = function (id) { if (_layersByHostId[id]) { _layersByHostId[id].forEach(function (layer) { return layer.forceUpdate(); }); } }; Layer.prototype.componentDidMount = function () { this.componentDidUpdate(); }; Layer.prototype.componentWillUnmount = function () { var _this = this; this._removeLayerElement(); if (this.props.hostId) { _layersByHostId[this.props.hostId] = _layersByHostId[this.props.hostId].filter(function (layer) { return layer !== _this; }); if (!_layersByHostId[this.props.hostId].length) { delete _layersByHostId[this.props.hostId]; } } }; Layer.prototype.componentDidUpdate = function () { var _this = this; var host = this._getHost(); if (host !== this._host) { this._removeLayerElement(); } if (host) { this._host = host; if (!this._layerElement) { var doc = Utilities_1.getDocument(this._rootElement); this._layerElement = doc.createElement('div'); this._layerElement.className = Utilities_1.css('ms-Layer', (_a = {}, _a['ms-Layer--fixed ' + styles.rootIsFixed] = !this.props.hostId, _a)); host.appendChild(this._layerElement); Utilities_1.setVirtualParent(this._layerElement, this._rootElement); } // Using this 'unstable' method allows us to retain the React context across the layer projection. ReactDOM.unstable_renderSubtreeIntoContainer(this, React.createElement(Fabric_1.Fabric, { className: Utilities_1.css('ms-Layer-content', styles.content) }, this.props.children), this._layerElement, function () { if (!_this._hasMounted) { _this._hasMounted = true; // TODO: @deprecated cleanup required. if (_this.props.onLayerMounted) { _this.props.onLayerMounted(); } _this.props.onLayerDidMount(); } }); } var _a; }; Layer.prototype.render = function () { return (React.createElement("span", { className: 'ms-Layer', ref: this._resolveRef('_rootElement') })); }; Layer.prototype._removeLayerElement = function () { if (this._layerElement) { this.props.onLayerWillUnmount(); ReactDOM.unmountComponentAtNode(this._layerElement); var parentNode = this._layerElement.parentNode; if (parentNode) { parentNode.removeChild(this._layerElement); } this._layerElement = undefined; this._hasMounted = false; } }; Layer.prototype._getHost = function () { var hostId = this.props.hostId; var doc = Utilities_1.getDocument(this._rootElement); if (hostId) { return doc.getElementById(hostId); } else { return doc.body; } }; return Layer; }(Utilities_1.BaseComponent)); Layer.defaultProps = { onLayerDidMount: function () { return undefined; }, onLayerWillUnmount: function () { return undefined; } }; exports.Layer = Layer; /***/ }, /* 135 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(136)); /***/ }, /* 136 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(137)); /***/ }, /* 137 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var Styling_1 = __webpack_require__(68); var Fabric_styles_1 = __webpack_require__(138); var DIRECTIONAL_KEY_CODES = [ Utilities_1.KeyCodes.up, Utilities_1.KeyCodes.down, Utilities_1.KeyCodes.left, Utilities_1.KeyCodes.right, Utilities_1.KeyCodes.home, Utilities_1.KeyCodes.end, Utilities_1.KeyCodes.tab, Utilities_1.KeyCodes.pageUp, Utilities_1.KeyCodes.pageDown ]; // We will track the last focus visibility state so that if we tear down and recreate // the Fabric component, we will use the last known value as the default. var _lastIsFocusVisible = false; // Ensure that the HTML element has a dir specified. This helps to ensure RTL/LTR macros in css for all components will work. if (typeof (document) === 'object' && document.documentElement && !document.documentElement.getAttribute('dir')) { document.documentElement.setAttribute('dir', 'ltr'); } var Fabric = (function (_super) { __extends(Fabric, _super); function Fabric() { var _this = _super.call(this) || this; _this.state = { isFocusVisible: _lastIsFocusVisible }; return _this; } Fabric.prototype.componentDidMount = function () { this._events.on(document.body, 'mousedown', this._onMouseDown, true); this._events.on(document.body, 'keydown', this._onKeyDown, true); }; Fabric.prototype.render = function () { var isFocusVisible = this.state.isFocusVisible; var styles = Fabric_styles_1.getStyles(); var rootClass = Styling_1.mergeStyles('ms-Fabric', styles.root, this.props.className, isFocusVisible && 'is-focusVisible'); return (React.createElement("div", __assign({}, this.props, { className: rootClass, ref: 'root' }))); }; Fabric.prototype._onMouseDown = function () { if (this.state.isFocusVisible) { this.setState({ isFocusVisible: false }); _lastIsFocusVisible = false; } }; Fabric.prototype._onKeyDown = function (ev) { if (!this.state.isFocusVisible && DIRECTIONAL_KEY_CODES.indexOf(ev.which) > -1) { this.setState({ isFocusVisible: true }); _lastIsFocusVisible = true; } }; return Fabric; }(Utilities_1.BaseComponent)); exports.Fabric = Fabric; /***/ }, /* 138 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Utilities_1 = __webpack_require__(10); var Styling_1 = __webpack_require__(68); var inheritFont = { fontFamily: 'inherit' }; exports.getStyles = Utilities_1.memoizeFunction(function (theme) { if (theme === void 0) { theme = Styling_1.getTheme(); } return { root: [ theme.fonts.medium, { color: theme.palette.neutralPrimary, '& button': inheritFont, '& input': inheritFont } ] }; }); /***/ }, /* 139 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { rootIsFixed: 'rootIsFixed_cadfc200', content: 'content_cadfc200', }; load_themed_styles_1.loadStyles([{ "rawString": ".rootIsFixed_cadfc200{position:fixed;z-index:1000000;top:0;left:0;width:100vw;height:100vh;visibility:hidden}.content_cadfc200{visibility:visible}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 140 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var Layer_1 = __webpack_require__(134); var LayerHost = (function (_super) { __extends(LayerHost, _super); function LayerHost() { return _super !== null && _super.apply(this, arguments) || this; } LayerHost.prototype.shouldComponentUpdate = function () { return false; }; LayerHost.prototype.componentDidMount = function () { Layer_1.Layer.notifyHostChanged(this.props.id); }; LayerHost.prototype.componentWillUnmount = function () { Layer_1.Layer.notifyHostChanged(this.props.id); }; LayerHost.prototype.render = function () { return (React.createElement("div", __assign({}, this.props, { className: Utilities_1.css('ms-LayerHost', this.props.className) }))); }; return LayerHost; }(Utilities_1.BaseComponent)); exports.LayerHost = LayerHost; /***/ }, /* 141 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(142)); /***/ }, /* 142 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(143)); __export(__webpack_require__(144)); /***/ }, /* 143 */ /***/ function(module, exports, __webpack_require__) { "use strict"; 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 }); /* tslint:disable */ var React = __webpack_require__(2); /* tslint:enable */ var Icon_Props_1 = __webpack_require__(144); var Image_1 = __webpack_require__(145); var Utilities_1 = __webpack_require__(10); var Styling_1 = __webpack_require__(68); var Icon_styles_1 = __webpack_require__(148); function Icon(props) { var ariaLabel = props.ariaLabel, className = props.className, customStyles = props.styles, iconName = props.iconName; var styles = Icon_styles_1.getStyles(undefined, customStyles); if (props.iconType === Icon_Props_1.IconType.image || props.iconType === Icon_Props_1.IconType.Image) { var containerClassName = Utilities_1.css('ms-Icon', 'ms-Icon-imageContainer', styles.root, styles.imageContainer, className); return (React.createElement("div", { className: Utilities_1.css(containerClassName, styles.root) }, "l ", React.createElement(Image_1.Image, __assign({}, props.imageProps)))); } else { var iconMemberName = iconName ? iconName.charAt(0).toLowerCase() + iconName.substr(1) : ''; return (React.createElement("i", __assign({ "aria-label": ariaLabel }, (ariaLabel ? {} : { role: 'presentation', 'aria-hidden': true }), Utilities_1.getNativeProps(props, Utilities_1.htmlElementProperties), { className: Utilities_1.css('ms-Icon', Styling_1.IconClassNames[iconMemberName], styles.root, props.className) }))); } } exports.Icon = Icon; /***/ }, /* 144 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); // Please keep alphabetized var IconType; (function (IconType) { /** * Render using the fabric icon font. */ IconType[IconType["default"] = 0] = "default"; /** * Render using an image, where imageProps would be used. */ IconType[IconType["image"] = 1] = "image"; /** * Deprecated, use default. * @deprecated */ IconType[IconType["Default"] = 100000] = "Default"; /** * Deprecated, use image. * @deprecated */ IconType[IconType["Image"] = 100001] = "Image"; })(IconType = exports.IconType || (exports.IconType = {})); /***/ }, /* 145 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable:no-unused-variable */ var React = __webpack_require__(2); /* tslint:enable:no-unused-variable */ var Utilities_1 = __webpack_require__(10); var Image_Props_1 = __webpack_require__(146); var Styling_1 = __webpack_require__(68); var stylesImport = __webpack_require__(147); var styles = stylesImport; var CoverStyle; (function (CoverStyle) { CoverStyle[CoverStyle["landscape"] = 0] = "landscape"; CoverStyle[CoverStyle["portrait"] = 1] = "portrait"; })(CoverStyle = exports.CoverStyle || (exports.CoverStyle = {})); exports.CoverStyleMap = (_a = {}, _a[CoverStyle.landscape] = 'ms-Image-image--landscape ' + styles.imageIsLandscape, _a[CoverStyle.portrait] = 'ms-Image-image--portrait ' + styles.imageIsPortrait, _a); exports.ImageFitMap = (_b = {}, _b[Image_Props_1.ImageFit.center] = 'ms-Image-image--center ' + styles.imageIsCenter, _b[Image_Props_1.ImageFit.contain] = 'ms-Image-image--contain ' + styles.imageIsContain, _b[Image_Props_1.ImageFit.cover] = 'ms-Image-image--cover ' + styles.imageIsCover, _b[Image_Props_1.ImageFit.none] = 'ms-Image-image--none ' + styles.imageIsNone, _b); var KEY_PREFIX = 'fabricImage'; var Image = (function (_super) { __extends(Image, _super); function Image(props) { var _this = _super.call(this, props) || this; // Make an initial assumption about the image layout until we can // check the rendered element. The value here only takes effect when // shouldStartVisible is true. _this._coverStyle = CoverStyle.portrait; _this.state = { loadState: Image_Props_1.ImageLoadState.notLoaded }; return _this; } Image.prototype.componentWillReceiveProps = function (nextProps) { if (nextProps.src !== this.props.src) { this.setState({ loadState: Image_Props_1.ImageLoadState.notLoaded }); } else if (this.state.loadState === Image_Props_1.ImageLoadState.loaded) { this._computeCoverStyle(nextProps); } }; Image.prototype.componentDidUpdate = function (prevProps, prevState) { this._checkImageLoaded(); if (this.props.onLoadingStateChange && prevState.loadState !== this.state.loadState) { this.props.onLoadingStateChange(this.state.loadState); } }; Image.prototype.render = function () { var imageProps = Utilities_1.getNativeProps(this.props, Utilities_1.imageProperties, ['width', 'height']); var _a = this.props, src = _a.src, alt = _a.alt, width = _a.width, height = _a.height, shouldFadeIn = _a.shouldFadeIn, className = _a.className, imageFit = _a.imageFit, role = _a.role, maximizeFrame = _a.maximizeFrame; var loadState = this.state.loadState; var coverStyle = this._coverStyle; var loaded = loadState === Image_Props_1.ImageLoadState.loaded || (loadState === Image_Props_1.ImageLoadState.notLoaded && this.props.shouldStartVisible); // If image dimensions aren't specified, the natural size of the image is used. return (React.createElement("div", { className: Utilities_1.css('ms-Image', styles.root, className, (_b = {}, _b['ms-Image--maximizeFrame ' + styles.rootIsMaximizeFrame] = maximizeFrame, _b)), style: { width: width, height: height }, ref: this._resolveRef('_frameElement') }, React.createElement("img", __assign({}, imageProps, { onLoad: this._onImageLoaded, onError: this._onImageError, key: KEY_PREFIX + this.props.src || '', className: Utilities_1.css('ms-Image-image', styles.image, exports.CoverStyleMap[coverStyle], (imageFit !== undefined) && exports.ImageFitMap[imageFit], !loaded && 'is-notLoaded', loaded && 'is-loaded ' + styles.imageIsLoaded, shouldFadeIn && 'is-fadeIn', loadState === Image_Props_1.ImageLoadState.error && 'is-error', loaded && shouldFadeIn && Styling_1.AnimationClassNames.fadeIn400, (_c = {}, _c['ms-Image-image--scaleWidth ' + styles.imageIsScaleWidth] = (imageFit === undefined && !!width && !height), _c['ms-Image-image--scaleHeight ' + styles.imageIsScaleHeight] = (imageFit === undefined && !width && !!height), _c['ms-Image-image--scaleWidthHeight ' + styles.imageIsScaleWidthHeight] = (imageFit === undefined && !!width && !!height), _c)), ref: this._resolveRef('_imageElement'), src: src, alt: alt, role: role })))); var _b, _c; }; Image.prototype._onImageLoaded = function (ev) { var _a = this.props, src = _a.src, onLoad = _a.onLoad; if (onLoad) { onLoad(ev); } this._computeCoverStyle(this.props); if (src) { this.setState({ loadState: Image_Props_1.ImageLoadState.loaded }); } }; Image.prototype._checkImageLoaded = function () { var src = this.props.src; var loadState = this.state.loadState; if (loadState === Image_Props_1.ImageLoadState.notLoaded) { // testing if naturalWidth and naturalHeight are greater than zero is better than checking // .complete, because .complete will also be set to true if the image breaks. However, // for some browsers, SVG images do not have a naturalWidth or naturalHeight, so fall back // to checking .complete for these images. var isLoaded = src && (this._imageElement.naturalWidth > 0 && this._imageElement.naturalHeight > 0) || (this._imageElement.complete && Image._svgRegex.test(src)); if (isLoaded) { this._computeCoverStyle(this.props); this.setState({ loadState: Image_Props_1.ImageLoadState.loaded }); } } }; Image.prototype._computeCoverStyle = function (props) { var imageFit = props.imageFit, width = props.width, height = props.height; if (imageFit === Image_Props_1.ImageFit.cover || imageFit === Image_Props_1.ImageFit.contain) { if (this._imageElement) { // Determine the desired ratio using the width and height props. // If those props aren't available, measure measure the frame. var desiredRatio = void 0; if (!!width && !!height) { desiredRatio = width / height; } else { desiredRatio = this._frameElement.clientWidth / this._frameElement.clientHeight; } // Examine the source image to determine its original ratio. var naturalRatio = this._imageElement.naturalWidth / this._imageElement.naturalHeight; // Should we crop from the top or the sides? if (naturalRatio > desiredRatio) { this._coverStyle = CoverStyle.landscape; } else { this._coverStyle = CoverStyle.portrait; } } } }; Image.prototype._onImageError = function (ev) { if (this.props.onError) { this.props.onError(ev); } this.setState({ loadState: Image_Props_1.ImageLoadState.error }); }; return Image; }(Utilities_1.BaseComponent)); Image.defaultProps = { shouldFadeIn: true }; Image._svgRegex = /\.svg$/i; __decorate([ Utilities_1.autobind ], Image.prototype, "_onImageLoaded", null); __decorate([ Utilities_1.autobind ], Image.prototype, "_onImageError", null); exports.Image = Image; var _a, _b; /***/ }, /* 146 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * The possible methods that can be used to fit the image. */ var ImageFit; (function (ImageFit) { /** * The image is not scaled. The image is centered and cropped within the content box. */ ImageFit[ImageFit["center"] = 0] = "center"; /** * The image is scaled to maintain its aspect ratio while being fully contained within the frame. The image will * be centered horizontally and vertically within the frame. The space in the top and bottom or in the sides of * the frame will be empty depending on the difference in aspect ratio between the image and the frame. */ ImageFit[ImageFit["contain"] = 1] = "contain"; /** * The image is scaled to maintain its aspect ratio while filling the frame. Portions of the image will be cropped from * the top and bottom, or from the sides, depending on the difference in aspect ratio between the image and the frame. */ ImageFit[ImageFit["cover"] = 2] = "cover"; /** * Neither the image nor the frame are scaled. If their sizes do not match, the image will either be cropped or the * frame will have empty space. */ ImageFit[ImageFit["none"] = 3] = "none"; })(ImageFit = exports.ImageFit || (exports.ImageFit = {})); var ImageLoadState; (function (ImageLoadState) { /** * The image has not yet been loaded, and there is no error yet. */ ImageLoadState[ImageLoadState["notLoaded"] = 0] = "notLoaded"; /** * The image has been loaded successfully. */ ImageLoadState[ImageLoadState["loaded"] = 1] = "loaded"; /** * An error has been encountered while loading the image. */ ImageLoadState[ImageLoadState["error"] = 2] = "error"; /** * Deprecated at v1.3.6, to replace the src in case of errors, use onLoadingStateChange instead * and rerender the Image with a difference src. * @deprecated */ ImageLoadState[ImageLoadState["errorLoaded"] = 3] = "errorLoaded"; })(ImageLoadState = exports.ImageLoadState || (exports.ImageLoadState = {})); /***/ }, /* 147 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_9f38a260', rootIsMaximizeFrame: 'rootIsMaximizeFrame_9f38a260', image: 'image_9f38a260', imageIsLoaded: 'imageIsLoaded_9f38a260', imageIsCenter: 'imageIsCenter_9f38a260', imageIsContain: 'imageIsContain_9f38a260', imageIsCover: 'imageIsCover_9f38a260', imageIsLandscape: 'imageIsLandscape_9f38a260', imageIsPortrait: 'imageIsPortrait_9f38a260', imageIsNone: 'imageIsNone_9f38a260', imageIsScaleWidthHeight: 'imageIsScaleWidthHeight_9f38a260', imageIsScaleWidth: 'imageIsScaleWidth_9f38a260', imageIsScaleHeight: 'imageIsScaleHeight_9f38a260', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_9f38a260{overflow:hidden}.rootIsMaximizeFrame_9f38a260{height:100%;width:100%}.image_9f38a260{display:block;opacity:0}.image_9f38a260.imageIsLoaded_9f38a260{opacity:1}.imageIsCenter_9f38a260,.imageIsContain_9f38a260,.imageIsCover_9f38a260{position:relative;top:50%}[dir=ltr] .imageIsCenter_9f38a260,[dir=ltr] .imageIsContain_9f38a260,[dir=ltr] .imageIsCover_9f38a260{left:50%}[dir=rtl] .imageIsCenter_9f38a260,[dir=rtl] .imageIsContain_9f38a260,[dir=rtl] .imageIsCover_9f38a260{right:50%}html[dir=ltr] .imageIsCenter_9f38a260,html[dir=ltr] .imageIsContain_9f38a260,html[dir=ltr] .imageIsCover_9f38a260{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}html[dir=rtl] .imageIsCenter_9f38a260,html[dir=rtl] .imageIsContain_9f38a260,html[dir=rtl] .imageIsCover_9f38a260{-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%)}.imageIsContain_9f38a260.imageIsLandscape_9f38a260{width:100%;height:auto}.imageIsContain_9f38a260.imageIsPortrait_9f38a260{height:100%;width:auto}.imageIsCover_9f38a260.imageIsLandscape_9f38a260{height:100%;width:auto}.imageIsCover_9f38a260.imageIsPortrait_9f38a260{width:100%;height:auto}.imageIsNone_9f38a260{height:auto;width:auto}.imageIsScaleWidthHeight_9f38a260{height:100%;width:100%}.imageIsScaleWidth_9f38a260{height:auto;width:100%}.imageIsScaleHeight_9f38a260{height:100%;width:auto}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 148 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Styling_1 = __webpack_require__(68); var Utilities_1 = __webpack_require__(10); exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) { if (theme === void 0) { theme = Styling_1.getTheme(); } if (customStyles === void 0) { customStyles = undefined; } var iconStyles = { root: Styling_1.mergeStyles({ display: 'inline-block' }), imageContainer: Styling_1.mergeStyles({ overflow: 'hidden' }) }; return Styling_1.mergeStyleSets(iconStyles, customStyles); }); /***/ }, /* 149 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_cf3f75c8', list: 'list_cf3f75c8', item: 'item_cf3f75c8', link: 'link_cf3f75c8', isDisabled: 'isDisabled_cf3f75c8', icon: 'icon_cf3f75c8', isExpanded: 'isExpanded_cf3f75c8', header: 'header_cf3f75c8', linkContent: 'linkContent_cf3f75c8', divider: 'divider_cf3f75c8', iconColor: 'iconColor_cf3f75c8', itemText: 'itemText_cf3f75c8', submenuIcon: 'submenuIcon_cf3f75c8', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_cf3f75c8{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";min-width:180px}.list_cf3f75c8{list-style-type:none;margin:0;padding:0;line-height:0}.item_cf3f75c8{font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;box-sizing:border-box}.link_cf3f75c8{font:inherit;color:inherit;background:0 0;border:none;width:100%;height:36px;line-height:36px;display:block;cursor:pointer;padding:0 6px}.link_cf3f75c8::-moz-focus-inner{border:0}.link_cf3f75c8{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .link_cf3f75c8:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .link_cf3f75c8{text-align:left}html[dir=rtl] .link_cf3f75c8{text-align:right}.link_cf3f75c8:hover:not([disabled]){background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.link_cf3f75c8.isDisabled_cf3f75c8,.link_cf3f75c8[disabled]{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";cursor:default;pointer-events:none}.link_cf3f75c8.isDisabled_cf3f75c8 .icon_cf3f75c8,.link_cf3f75c8[disabled] .icon_cf3f75c8{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.is-focusVisible .link_cf3f75c8:focus{background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.link_cf3f75c8.isExpanded_cf3f75c8,.link_cf3f75c8.isExpanded_cf3f75c8:hover{background:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";font-weight:600}.header_cf3f75c8{font-size:12px;font-weight:400;font-weight:600;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background:0 0;border:none;height:36px;line-height:36px;cursor:default;padding:0 6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header_cf3f75c8::-moz-focus-inner{border:0}.header_cf3f75c8{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .header_cf3f75c8:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .header_cf3f75c8{text-align:left}html[dir=rtl] .header_cf3f75c8{text-align:right}a.link_cf3f75c8{padding:0 6px;text-rendering:auto;color:inherit;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-shadow:none;text-decoration:none;box-sizing:border-box}.linkContent_cf3f75c8{white-space:nowrap;height:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%}.divider_cf3f75c8{display:block;height:1px;background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";position:relative}.icon_cf3f75c8{display:inline-block;min-height:1px;max-height:36px;width:14px;margin:0 4px;vertical-align:middle;-ms-flex-negative:0;flex-shrink:0}.iconColor_cf3f75c8{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.itemText_cf3f75c8{margin:0 4px;vertical-align:middle;display:inline-block;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.submenuIcon_cf3f75c8{height:36px;line-height:36px;text-align:center;font-size:10px;display:inline-block;vertical-align:middle;-ms-flex-negative:0;flex-shrink:0}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 150 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(151)); /***/ }, /* 151 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(152)); /***/ }, /* 152 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(153); var styles = stylesImport; var Link = (function (_super) { __extends(Link, _super); function Link() { return _super !== null && _super.apply(this, arguments) || this; } Link.prototype.render = function () { var _a = this.props, disabled = _a.disabled, children = _a.children, className = _a.className, href = _a.href; return (href ? (React.createElement("a", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.anchorProperties), { className: Utilities_1.css('ms-Link', styles.root, className, (_b = { 'is-disabled': disabled }, _b[styles.isDisabled] = disabled, _b[styles.isEnabled] = !disabled, _b)), onClick: this._onClick, ref: this._resolveRef('_link'), target: this.props.target }), children)) : (React.createElement("button", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.buttonProperties), { className: Utilities_1.css('ms-Link', styles.root, className, (_c = { 'is-disabled': disabled }, _c[styles.isDisabled] = disabled, _c)), onClick: this._onClick, ref: this._resolveRef('_link') }), children))); var _b, _c; }; Link.prototype.focus = function () { if (this._link) { this._link.focus(); } }; Link.prototype._onClick = function (ev) { var onClick = this.props.onClick; if (onClick) { onClick(ev); } }; return Link; }(Utilities_1.BaseComponent)); __decorate([ Utilities_1.autobind ], Link.prototype, "_onClick", null); exports.Link = Link; /***/ }, /* 153 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_f147fff6', isEnabled: 'isEnabled_f147fff6', isDisabled: 'isDisabled_f147fff6', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_f147fff6{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";margin:0;overflow:inherit;padding:0;text-overflow:inherit}.isEnabled_f147fff6:focus,.isEnabled_f147fff6:hover{color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.isEnabled_f147fff6:active{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.isDisabled_f147fff6{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";pointer-events:none;cursor:default}button.root_f147fff6{background:0 0;border:none;cursor:pointer;display:inline;font-size:inherit}button.root_f147fff6::-moz-focus-inner{border:0}button.root_f147fff6{outline:transparent;position:relative}.ms-Fabric.is-focusVisible button.root_f147fff6:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] button.root_f147fff6{text-align:left}html[dir=rtl] button.root_f147fff6{text-align:right}a.root_f147fff6{text-decoration:none}.ms-Fabric.is-focusVisible a.root_f147fff6:focus{outline:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 154 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(155)); /***/ }, /* 155 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(156)); __export(__webpack_require__(157)); __export(__webpack_require__(158)); __export(__webpack_require__(162)); __export(__webpack_require__(164)); __export(__webpack_require__(159)); __export(__webpack_require__(168)); __export(__webpack_require__(166)); /***/ }, /* 156 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var Styling_1 = __webpack_require__(68); var Icon_1 = __webpack_require__(141); var DirectionalHint_1 = __webpack_require__(58); var ContextualMenu_1 = __webpack_require__(54); var BaseButton = (function (_super) { __extends(BaseButton, _super); function BaseButton(props, rootClassName) { var _this = _super.call(this, props) || this; _this._warnDeprecations({ rootProps: null, icon: 'iconProps', menuIconName: 'menuIconProps', toggled: 'checked' }); _this._labelId = Utilities_1.getId(); _this._descriptionId = Utilities_1.getId(); _this._ariaDescriptionId = Utilities_1.getId(); _this.state = { menuProps: null }; return _this; } BaseButton.prototype.render = function () { var _a = this.props, ariaDescription = _a.ariaDescription, ariaLabel = _a.ariaLabel, className = _a.className, description = _a.description, disabled = _a.disabled, href = _a.href, iconProps = _a.iconProps, styles = _a.styles, checked = _a.checked, variantClassName = _a.variantClassName; this._classNames = this._getClassNames(styles, className, variantClassName, iconProps && iconProps.className, disabled, checked); var _b = this, _ariaDescriptionId = _b._ariaDescriptionId, _labelId = _b._labelId, _descriptionId = _b._descriptionId; var renderAsAnchor = !!href; var tag = renderAsAnchor ? 'a' : 'button'; var nativeProps = Utilities_1.getNativeProps(Utilities_1.assign(renderAsAnchor ? {} : { type: 'button' }, this.props.rootProps, this.props), renderAsAnchor ? Utilities_1.anchorProperties : Utilities_1.buttonProperties, [ 'disabled' // Let disabled buttons be focused and styled as disabled. ]); // Check for ariaDescription, description or aria-describedby in the native props to determine source of aria-describedby // otherwise default to null. var ariaDescribedBy; if (ariaDescription) { ariaDescribedBy = _ariaDescriptionId; } else if (description) { ariaDescribedBy = _descriptionId; } else if (nativeProps['aria-describedby']) { ariaDescribedBy = nativeProps['aria-describedby']; } else { ariaDescribedBy = null; } var buttonProps = Utilities_1.assign(nativeProps, { className: this._classNames.root, ref: this._resolveRef('_buttonElement'), 'disabled': disabled, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabel ? null : _labelId, 'aria-describedby': ariaDescribedBy, 'aria-disabled': disabled, 'data-is-focusable': disabled ? false : true, 'aria-pressed': checked }); // Override onClick if contextualMenuItems passed in. Eventually allow _onToggleMenu to // be assigned to split button click if onClick already has a value if (this.props.menuProps) { Utilities_1.assign(buttonProps, { 'onClick': this._onToggleMenu, 'aria-expanded': this.state.menuProps ? true : false }); } return this._onRenderContent(tag, buttonProps); }; BaseButton.prototype.focus = function () { if (this._buttonElement) { this._buttonElement.focus(); } }; BaseButton.prototype._onRenderContent = function (tag, buttonProps) { var props = this.props; var baseClassName = props.baseClassName, styles = props.styles, menuIconName = props.menuIconName, menuProps = props.menuProps, _a = props.onRenderIcon, onRenderIcon = _a === void 0 ? this._onRenderIcon : _a, _b = props.onRenderText, onRenderText = _b === void 0 ? this._onRenderText : _b, _c = props.onRenderDescription, onRenderDescription = _c === void 0 ? this._onRenderDescription : _c, _d = props.onRenderAriaDescription, onRenderAriaDescription = _d === void 0 ? this._onRenderAriaDescription : _d, _e = props.onRenderChildren, onRenderChildren = _e === void 0 ? this._onRenderChildren : _e, _f = props.onRenderMenu, onRenderMenu = _f === void 0 ? this._onRenderMenu : _f, _g = props.onRenderMenuIcon, onRenderMenuIcon = _g === void 0 ? this._onRenderMenuIcon : _g; var className = Styling_1.mergeStyles(baseClassName + '-flexContainer', styles.flexContainer); return React.createElement(tag, buttonProps, React.createElement('div', { className: className }, onRenderIcon(props, this._onRenderIcon), onRenderText(props, this._onRenderText), onRenderDescription(props, this._onRenderDescription), onRenderAriaDescription(props, this._onRenderAriaDescription), onRenderChildren(props, this._onRenderChildren), (menuProps || menuIconName || this.props.onRenderMenuIcon) && onRenderMenuIcon(this.props, this._onRenderMenuIcon), this.state.menuProps && onRenderMenu(menuProps, this._onRenderMenu))); }; BaseButton.prototype._onRenderIcon = function (buttonProps, defaultRender) { var _a = this.props, baseClassName = _a.baseClassName, disabled = _a.disabled, icon = _a.icon, iconProps = _a.iconProps, styles = _a.styles, checked = _a.checked; if (icon || iconProps) { iconProps = iconProps || { iconName: icon }; } return iconProps && (React.createElement(Icon_1.Icon, __assign({}, iconProps, { className: this._classNames.icon }))); }; BaseButton.prototype._onRenderText = function () { var _a = this.props, children = _a.children, disabled = _a.disabled, styles = _a.styles, text = _a.text; // For backwards compat, we should continue to take in the text content from children. if (text === undefined && typeof (children) === 'string') { text = children; } return text && (React.createElement("span", { className: this._classNames.label, id: this._labelId }, text)); }; BaseButton.prototype._onRenderChildren = function () { var children = this.props.children; // If children is just a string, either it or the text will be rendered via onRenderLabel // If children is another component, it will be rendered after text if (typeof (children) === 'string') { return null; } return children; }; BaseButton.prototype._onRenderDescription = function (props) { var description = this.props.description; // ms-Button-description is only shown when the button type is compound. // In other cases it will not be displayed. return description ? (React.createElement("span", { className: this._classNames.description, id: this._descriptionId }, description)) : (null); }; BaseButton.prototype._onRenderAriaDescription = function () { var _a = this.props, ariaDescription = _a.ariaDescription, styles = _a.styles; // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan, // otherwise it will be assigned to descriptionSpan. return ariaDescription ? (React.createElement("span", { className: styles.screenReaderText, id: this._ariaDescriptionId }, ariaDescription)) : (null); }; BaseButton.prototype._onRenderMenuIcon = function (props) { var _a = this.props, baseClassName = _a.baseClassName, checked = _a.checked, disabled = _a.disabled, menuIconName = _a.menuIconName, menuIconProps = _a.menuIconProps, styles = _a.styles; if (menuIconProps === undefined) { menuIconProps = { iconName: menuIconName === undefined ? 'ChevronDown' : menuIconName }; } return (menuIconProps ? React.createElement(Icon_1.Icon, __assign({}, menuIconProps, { className: Styling_1.mergeStyles(baseClassName + "-icon", styles.menuIcon, disabled && styles.menuIconDisabled, !disabled && checked && styles.menuIconChecked, menuIconProps.className) })) : null); }; BaseButton.prototype._onRenderMenu = function (menuProps) { return (React.createElement(ContextualMenu_1.ContextualMenu, __assign({ isBeakVisible: true, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge }, menuProps, { className: Styling_1.mergeStyles('ms-BaseButton-menuhost', menuProps.className), target: this._buttonElement, labelElementId: this._labelId, onDismiss: this._onToggleMenu }))); }; BaseButton.prototype._onToggleMenu = function () { var menuProps = this.props.menuProps; var currentMenuProps = this.state.menuProps; this.setState({ menuProps: currentMenuProps ? null : menuProps }); }; BaseButton.prototype._getClassNames = function (styles, className, variantClassName, iconClassName, disabled, checked) { return { root: Styling_1.mergeStyles(className, 'ms-Button', variantClassName, styles.root, checked && [ 'is-checked', styles.rootChecked ], disabled && [ 'is-disabled', styles.rootDisabled ], !disabled && { ':hover': styles.rootHovered, ':hover .ms-Button-description': styles.descriptionHovered, ':active': styles.rootPressed, ':active .ms-Button-description': styles.descriptionPressed }), flexContainer: Styling_1.mergeStyles('ms-Button-flexContainer', styles.flexContainer), icon: Styling_1.mergeStyles('ms-Button-icon', iconClassName, styles.icon, checked && styles.iconChecked, disabled && styles.iconDisabled), label: Styling_1.mergeStyles('ms-Button-label', styles.label, checked && styles.labelChecked, disabled && styles.labelDisabled), menuIcon: Styling_1.mergeStyles('ms-Button-menuIcon', styles.menuIcon, checked && styles.menuIconChecked, disabled && styles.menuIconDisabled), description: Styling_1.mergeStyles('ms-Button-description', styles.description, checked && styles.descriptionChecked, disabled && styles.descriptionDisabled), screenReaderText: Styling_1.mergeStyles('ms-Button-screenReaderText', styles.screenReaderText) }; }; return BaseButton; }(Utilities_1.BaseComponent)); BaseButton.defaultProps = { baseClassName: 'ms-Button', classNames: {}, styles: {} }; __decorate([ Utilities_1.autobind ], BaseButton.prototype, "_onRenderIcon", null); __decorate([ Utilities_1.autobind ], BaseButton.prototype, "_onRenderText", null); __decorate([ Utilities_1.autobind ], BaseButton.prototype, "_onRenderChildren", null); __decorate([ Utilities_1.autobind ], BaseButton.prototype, "_onRenderDescription", null); __decorate([ Utilities_1.autobind ], BaseButton.prototype, "_onRenderAriaDescription", null); __decorate([ Utilities_1.autobind ], BaseButton.prototype, "_onRenderMenuIcon", null); __decorate([ Utilities_1.autobind ], BaseButton.prototype, "_onRenderMenu", null); __decorate([ Utilities_1.autobind ], BaseButton.prototype, "_onToggleMenu", null); __decorate([ Utilities_1.memoize ], BaseButton.prototype, "_getClassNames", null); exports.BaseButton = BaseButton; /***/ }, /* 157 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var ElementType; (function (ElementType) { /** <button> element. */ ElementType[ElementType["button"] = 0] = "button"; /** <a> element. */ ElementType[ElementType["anchor"] = 1] = "anchor"; })(ElementType = exports.ElementType || (exports.ElementType = {})); var ButtonType; (function (ButtonType) { ButtonType[ButtonType["normal"] = 0] = "normal"; ButtonType[ButtonType["primary"] = 1] = "primary"; ButtonType[ButtonType["hero"] = 2] = "hero"; ButtonType[ButtonType["compound"] = 3] = "compound"; ButtonType[ButtonType["command"] = 4] = "command"; ButtonType[ButtonType["icon"] = 5] = "icon"; ButtonType[ButtonType["default"] = 6] = "default"; })(ButtonType = exports.ButtonType || (exports.ButtonType = {})); /***/ }, /* 158 */ /***/ 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 }); /* tslint:disable:no-unused-variable */ var React = __webpack_require__(2); /* tslint:enable:no-unused-variable */ var Utilities_1 = __webpack_require__(10); var Button_Props_1 = __webpack_require__(157); var DefaultButton_1 = __webpack_require__(159); var CommandButton_1 = __webpack_require__(162); var CompoundButton_1 = __webpack_require__(164); var IconButton_1 = __webpack_require__(166); var PrimaryButton_1 = __webpack_require__(168); /** * This class is deprecated. Use the individual *Button components instead. * @deprecated */ var Button = (function (_super) { __extends(Button, _super); function Button(props) { var _this = _super.call(this, props) || this; /** * Set this BaseComponent._resolveComponentRef to false, bypassing resolution of componentRef. */ _this._shouldUpdateComponentRef = false; Utilities_1.warn("The Button component has been deprecated. Use specific variants instead. " + "(PrimaryButton, DefaultButton, IconButton, CommandButton, etc.)"); return _this; } Button.prototype.render = function () { var props = this.props; switch (props.buttonType) { case Button_Props_1.ButtonType.command: return React.createElement(CommandButton_1.CommandButton, __assign({}, props)); case Button_Props_1.ButtonType.compound: return React.createElement(CompoundButton_1.CompoundButton, __assign({}, props)); case Button_Props_1.ButtonType.icon: return React.createElement(IconButton_1.IconButton, __assign({}, props)); case Button_Props_1.ButtonType.primary: return React.createElement(PrimaryButton_1.PrimaryButton, __assign({}, props)); default: return React.createElement(DefaultButton_1.DefaultButton, __assign({}, props)); } }; return Button; }(Utilities_1.BaseComponent)); exports.Button = Button; /***/ }, /* 159 */ /***/ 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__(2); var BaseButton_1 = __webpack_require__(156); var Utilities_1 = __webpack_require__(10); var DefaultButton_styles_1 = __webpack_require__(160); var DefaultButton = (function (_super) { __extends(DefaultButton, _super); function DefaultButton() { var _this = _super !== null && _super.apply(this, arguments) || this; /** * Tell BaseComponent to bypass resolution of componentRef. */ _this._shouldUpdateComponentRef = false; return _this; } DefaultButton.prototype.render = function () { var styles = this.props.styles; return (React.createElement(BaseButton_1.BaseButton, __assign({}, this.props, { variantClassName: 'ms-Button--default', styles: DefaultButton_styles_1.getStyles(undefined, styles), onRenderDescription: Utilities_1.nullRender }))); }; return DefaultButton; }(Utilities_1.BaseComponent)); exports.DefaultButton = DefaultButton; /***/ }, /* 160 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Styling_1 = __webpack_require__(68); var Utilities_1 = __webpack_require__(10); var BaseButton_styles_1 = __webpack_require__(161); var DEFAULT_BUTTON_HEIGHT = '32px'; var DEFAULT_BUTTON_MINWIDTH = '80px'; var DEFAULT_PADDING = '0 16px'; exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles, focusInset, focusColor) { if (theme === void 0) { theme = Styling_1.getTheme(); } var baseButtonStyles = BaseButton_styles_1.getStyles(theme, focusInset, focusColor); var defaultButtonStyles = { root: { minWidth: DEFAULT_BUTTON_MINWIDTH, height: DEFAULT_BUTTON_HEIGHT, backgroundColor: theme.palette.neutralLighter, color: theme.palette.neutralPrimary }, rootHovered: { backgroundColor: theme.palette.neutralLight, color: theme.palette.black }, rootPressed: { backgroundColor: theme.palette.themePrimary, color: theme.palette.white }, rootChecked: { backgroundColor: theme.palette.themePrimary, color: theme.palette.white }, label: { fontWeight: 'bold' // theme.fontWeights.semibold, } }; return Styling_1.mergeStyleSets(baseButtonStyles, defaultButtonStyles, customStyles); }); /***/ }, /* 161 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Utilities_1 = __webpack_require__(10); var Styling_1 = __webpack_require__(68); var noOutline = { outline: 0 }; var iconStyle = { fontSize: Styling_1.FontSizes.icon, margin: '0 4px', height: '16px', lineHeight: '16px', textAlign: 'center', verticalAlign: 'middle' }; /** * Gets the base button styles. Note: because it is a base class to be used with the `mergeRules` * helper, it should have values for all class names in the interface. This let `mergeRules` optimize * mixing class names together. */ exports.getStyles = Utilities_1.memoizeFunction(function (theme, focusInset, focusColor) { if (focusInset === void 0) { focusInset = '0'; } if (focusColor === void 0) { focusColor = theme.palette.neutralSecondary; } return { root: [ Styling_1.getFocusStyle(theme, focusInset, focusColor), theme.fonts.medium, { // this transparent border converts to the correct colors in HC mode boxSizing: 'border-box', border: '1px solid transparent', userSelect: 'none', display: 'inline-block', textDecoration: 'none', textAlign: 'center', cursor: 'pointer', verticalAlign: 'top', padding: '0 16px' } ], rootDisabled: { backgroundColor: theme.palette.neutralLighter, color: theme.palette.neutralTertiary, cursor: 'default', pointerEvents: 'none', ':hover': noOutline, ':focus': noOutline }, flexContainer: { display: 'flex', height: '100%', flexWrap: 'nowrap', justifyContent: 'center', alignItems: 'center' }, icon: iconStyle, menuIcon: [ iconStyle, { fontSize: Styling_1.FontSizes.small } ], label: { margin: '0 4px', lineHeight: '100%' }, screenReaderText: { position: 'absolute', width: '1px', height: '1px', margin: '-1px', padding: 0, overflow: 'hidden', clip: 'rect(0,0,0,0)', border: 0 } }; }); /***/ }, /* 162 */ /***/ 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__(2); var BaseButton_1 = __webpack_require__(156); var Utilities_1 = __webpack_require__(10); var CommandButton_styles_1 = __webpack_require__(163); var CommandButton = (function (_super) { __extends(CommandButton, _super); function CommandButton() { var _this = _super !== null && _super.apply(this, arguments) || this; /** * Tell BaseComponent to bypass resolution of componentRef. */ _this._shouldUpdateComponentRef = false; return _this; } CommandButton.prototype.render = function () { var styles = this.props.styles; return (React.createElement(BaseButton_1.BaseButton, __assign({}, this.props, { variantClassName: 'ms-Button--command', styles: CommandButton_styles_1.getStyles(undefined, styles), onRenderDescription: Utilities_1.nullRender }))); }; return CommandButton; }(Utilities_1.BaseComponent)); exports.CommandButton = CommandButton; /***/ }, /* 163 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Styling_1 = __webpack_require__(68); var Utilities_1 = __webpack_require__(10); var BaseButton_styles_1 = __webpack_require__(161); var DEFAULT_BUTTON_HEIGHT = '40px'; var DEFAULT_PADDING = '0 4px'; exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) { if (theme === void 0) { theme = Styling_1.getTheme(); } var baseButtonStyles = BaseButton_styles_1.getStyles(theme); var commandButtonStyles = { root: { borderWidth: '0', padding: DEFAULT_PADDING, height: DEFAULT_BUTTON_HEIGHT, color: theme.palette.neutralPrimary, backgroundColor: 'transparent' }, rootHovered: { color: theme.palette.themeDarker }, rootPressed: { color: theme.palette.themePrimary }, rootDisabled: { color: theme.palette.neutralTertiary, backgroundColor: 'transparent' }, rootChecked: { backgroundColor: theme.palette.neutralTertiaryAlt, ':hover': { backgroundColor: theme.palette.neutralLight } }, flexContainer: { justifyContent: 'flex-start' }, icon: { color: theme.palette.themePrimary }, iconDisabled: { color: 'inherit' }, menuIcon: { color: theme.palette.neutralSecondary } }; return Styling_1.mergeStyleSets(baseButtonStyles, commandButtonStyles, customStyles); }); /***/ }, /* 164 */ /***/ 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__(2); var BaseButton_1 = __webpack_require__(156); var Utilities_1 = __webpack_require__(10); var CompoundButton_styles_1 = __webpack_require__(165); var CompoundButton = (function (_super) { __extends(CompoundButton, _super); function CompoundButton() { var _this = _super !== null && _super.apply(this, arguments) || this; /** * Tell BaseComponent to bypass resolution of componentRef. */ _this._shouldUpdateComponentRef = false; return _this; } CompoundButton.prototype.render = function () { var styles = this.props.styles; return (React.createElement(BaseButton_1.BaseButton, __assign({}, this.props, { variantClassName: 'ms-Button--compound', styles: CompoundButton_styles_1.getStyles(undefined, styles), onRenderIcon: Utilities_1.nullRender }))); }; return CompoundButton; }(Utilities_1.BaseComponent)); exports.CompoundButton = CompoundButton; /***/ }, /* 165 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Styling_1 = __webpack_require__(68); var Utilities_1 = __webpack_require__(10); var DefaultButton_styles_1 = __webpack_require__(160); var DEFAULT_BUTTON_HEIGHT = '32px'; var DEFAULT_BUTTON_MINWIDTH = '80px'; var DEFAULT_PADDING = '0 16px'; exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) { if (theme === void 0) { theme = Styling_1.getTheme(); } var defaultButtonStyles = DefaultButton_styles_1.getStyles(theme, customStyles); var compoundButtonStyles = { root: { maxWidth: '280px', minHeight: '72px', height: 'auto', padding: '20px' }, flexContainer: { flexDirection: 'column', alignItems: 'flex-start', minWidth: '100%', margin: '' }, label: { margin: '0 0 5px', lineHeight: '100%' }, description: [ theme.fonts.small, { color: theme.palette.neutralSecondary, lineHeight: '100%' } ], descriptionHovered: { color: theme.palette.neutralDark }, descriptionPressed: { color: 'inherit' }, descriptionChecked: { color: 'inherit' }, descriptionDisabled: { color: 'inherit' } }; return Styling_1.mergeStyleSets(defaultButtonStyles, compoundButtonStyles, customStyles); }); /***/ }, /* 166 */ /***/ 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__(2); var BaseButton_1 = __webpack_require__(156); var Utilities_1 = __webpack_require__(10); var IconButton_styles_1 = __webpack_require__(167); var IconButton = (function (_super) { __extends(IconButton, _super); function IconButton() { var _this = _super !== null && _super.apply(this, arguments) || this; /** * Tell BaseComponent to bypass resolution of componentRef. */ _this._shouldUpdateComponentRef = false; return _this; } IconButton.prototype.render = function () { var styles = this.props.styles; return (React.createElement(BaseButton_1.BaseButton, __assign({}, this.props, { variantClassName: 'ms-Button--icon', styles: IconButton_styles_1.getStyles(undefined, styles), onRenderText: Utilities_1.nullRender, onRenderDescription: Utilities_1.nullRender }))); }; return IconButton; }(Utilities_1.BaseComponent)); exports.IconButton = IconButton; /***/ }, /* 167 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Styling_1 = __webpack_require__(68); var Utilities_1 = __webpack_require__(10); var BaseButton_styles_1 = __webpack_require__(161); var DEFAULT_BUTTON_HEIGHT = '32px'; var DEFAULT_PADDING = '0 4px'; exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) { if (theme === void 0) { theme = Styling_1.getTheme(); } var baseButtonStyles = BaseButton_styles_1.getStyles(theme); var iconButtonStyles = { root: { padding: '0 4px', width: '32px', height: '32px', backgroundColor: 'transparent' }, rootHovered: { color: theme.palette.themeDarker }, rootPressed: { color: theme.palette.themePrimary }, rootChecked: { backgroundColor: theme.palette.neutralTertiaryAlt, ':hover': { backgroundColor: theme.palette.neutralLight } }, rootDisabled: { color: theme.palette.neutralTertiary } }; return Styling_1.mergeStyleSets(baseButtonStyles, iconButtonStyles, customStyles); }); /***/ }, /* 168 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var BaseButton_1 = __webpack_require__(156); var PrimaryButton_styles_1 = __webpack_require__(169); var PrimaryButton = (function (_super) { __extends(PrimaryButton, _super); function PrimaryButton() { var _this = _super !== null && _super.apply(this, arguments) || this; /** * Set this BaseComponent._resolveComponentRef to false, bypassing resolution of componentRef. */ _this._shouldUpdateComponentRef = false; return _this; } PrimaryButton.prototype.render = function () { var styles = this.props.styles; return (React.createElement(BaseButton_1.BaseButton, __assign({}, this.props, { variantClassName: 'ms-Button--primary', onRenderDescription: Utilities_1.nullRender, styles: PrimaryButton_styles_1.getStyles(undefined, styles) }))); }; return PrimaryButton; }(Utilities_1.BaseComponent)); exports.PrimaryButton = PrimaryButton; /***/ }, /* 169 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Styling_1 = __webpack_require__(68); var Utilities_1 = __webpack_require__(10); var DefaultButton_styles_1 = __webpack_require__(160); exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) { if (theme === void 0) { theme = Styling_1.getTheme(); } var palette = theme.palette; var defaultButtonStyles = DefaultButton_styles_1.getStyles(theme, customStyles, '0px', palette.white); var primaryButtonStyles = { root: { backgroundColor: palette.themePrimary, color: palette.white }, rootHovered: { backgroundColor: palette.themeDark, color: palette.white }, rootPressed: { backgroundColor: palette.themePrimary, color: palette.white }, rootChecked: { backgroundColor: palette.themeDark, color: palette.white, ':hover': { backgroundColor: theme.palette.neutralLight, color: theme.palette.black } } }; return Styling_1.mergeStyleSets(defaultButtonStyles, primaryButtonStyles, customStyles); }); /***/ }, /* 170 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_f13b2dea', list: 'list_f13b2dea', chevron: 'chevron_f13b2dea', listItem: 'listItem_f13b2dea', item: 'item_f13b2dea', itemLink: 'itemLink_f13b2dea', overflow: 'overflow_f13b2dea', overflowButton: 'overflowButton_f13b2dea', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_f13b2dea{margin:23px 0 1px}.list_f13b2dea{white-space:nowrap;padding:0;margin:0}.chevron_f13b2dea{font-size:12px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";line-height:28px}.listItem_f13b2dea{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block;position:relative}.listItem_f13b2dea:last-of-type .chevron_f13b2dea{display:none}.listItem_f13b2dea .itemLink_f13b2dea,.listItem_f13b2dea .item_f13b2dea{font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";display:inline-block;padding:0 8px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}.overflow_f13b2dea{display:inline-block;position:relative}.overflowButton_f13b2dea{font-size:16px;display:inline-block;vertical-align:top;height:28px;line-height:1}.overflowButton_f13b2dea:hover{cursor:pointer;background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.item_f13b2dea:hover{cursor:default}.root_f13b2dea .itemLink_f13b2dea:hover{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:initial;cursor:pointer}.root_f13b2dea .itemLink_f13b2dea:focus{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.root_f13b2dea .itemLink_f13b2dea:active{outline:transparent;background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.itemLink_f13b2dea,.overflowButton_f13b2dea{text-decoration:none;outline:transparent}@media screen and (max-width:639px){.listItem_f13b2dea .itemLink_f13b2dea{font-size:17px}.chevron_f13b2dea{font-size:10px;line-height:17px}.overflowButton_f13b2dea{font-size:15px}}@media screen and (max-width:479px){.listItem_f13b2dea .itemLink_f13b2dea{font-size:14px;max-width:116px}.chevron_f13b2dea{font-size:8px;line-height:14px}.overflowButton_f13b2dea{padding:4px 6px}}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 171 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(172)); /***/ }, /* 172 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(173)); __export(__webpack_require__(179)); /***/ }, /* 173 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var DateValues_1 = __webpack_require__(174); var CalendarDay_1 = __webpack_require__(175); var CalendarMonth_1 = __webpack_require__(178); var DateMath_1 = __webpack_require__(176); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(177); var styles = stylesImport; var Calendar = (function (_super) { __extends(Calendar, _super); function Calendar(props) { var _this = _super.call(this) || this; var currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : (props.today || new Date()); _this.state = { selectedDate: currentDate, navigatedDate: currentDate }; _this._focusOnUpdate = false; return _this; } Calendar.prototype.componentWillReceiveProps = function (nextProps) { var autoNavigateOnSelection = nextProps.autoNavigateOnSelection, value = nextProps.value, _a = nextProps.today, today = _a === void 0 ? new Date() : _a; // Make sure auto-navigation is supported for programmatic changes to selected date, i.e., // if selected date is updated via props, we may need to modify the navigated date var overrideNavigatedDate = (autoNavigateOnSelection && !DateMath_1.compareDates(value, this.props.value)); if (overrideNavigatedDate) { this.setState({ navigatedDate: value }); } this.setState({ selectedDate: value || today }); }; Calendar.prototype.componentDidUpdate = function () { if (this._focusOnUpdate) { this.refs.dayPicker.focus(); this._focusOnUpdate = false; } }; Calendar.prototype.render = function () { var rootClass = 'ms-DatePicker'; var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, dateRangeType = _a.dateRangeType, strings = _a.strings, isMonthPickerVisible = _a.isMonthPickerVisible, autoNavigateOnSelection = _a.autoNavigateOnSelection, showGoToToday = _a.showGoToToday; var _b = this.state, selectedDate = _b.selectedDate, navigatedDate = _b.navigatedDate; return (React.createElement("div", { className: Utilities_1.css(rootClass, styles.root), ref: 'root', role: 'application' }, React.createElement("div", { className: Utilities_1.css('ms-DatePicker-picker ms-DatePicker-picker--opened ms-DatePicker-picker--focused', styles.picker, styles.pickerIsOpened, styles.pickerIsFocused, isMonthPickerVisible && ('is-monthPickerVisible ' + styles.pickerIsMonthPickerVisible)) }, React.createElement("div", { className: Utilities_1.css('ms-DatePicker-holder ms-slideDownIn10', styles.holder), onKeyDown: this._onDatePickerPopupKeyDown }, React.createElement("div", { className: Utilities_1.css('ms-DatePicker-frame', styles.frame) }, React.createElement("div", { className: Utilities_1.css('ms-DatePicker-wrap', styles.wrap) }, React.createElement(CalendarDay_1.CalendarDay, { selectedDate: selectedDate, navigatedDate: navigatedDate, today: this.props.today, onSelectDate: this._onSelectDate, onNavigateDate: this._onNavigateDate, onDismiss: this.props.onDismiss, firstDayOfWeek: firstDayOfWeek, dateRangeType: dateRangeType, autoNavigateOnSelection: autoNavigateOnSelection, strings: strings, ref: 'dayPicker' }), isMonthPickerVisible && React.createElement(CalendarMonth_1.CalendarMonth, { navigatedDate: navigatedDate, strings: strings, onNavigateDate: this._onNavigateDate }), showGoToToday && React.createElement("span", { role: 'button', className: Utilities_1.css('ms-DatePicker-goToday js-goToday', styles.goToday), onClick: this._onGotoToday, onKeyDown: this._onGotoTodayKeyDown, tabIndex: 0 }, strings.goToToday))))))); }; Calendar.prototype.focus = function () { if (this.refs.dayPicker) { this.refs.dayPicker.focus(); } }; Calendar.prototype._navigateDay = function (date) { this.setState({ navigatedDate: date }); }; Calendar.prototype._onNavigateDate = function (date, focusOnNavigatedDay) { this._navigateDay(date); this._focusOnUpdate = focusOnNavigatedDay; }; Calendar.prototype._onSelectDate = function (date, selectedDateRangeArray) { var onSelectDate = this.props.onSelectDate; this.setState({ selectedDate: date }); if (onSelectDate) { onSelectDate(date, selectedDateRangeArray); } }; Calendar.prototype._onGotoToday = function () { this._navigateDay(this.props.today); this._focusOnUpdate = true; }; Calendar.prototype._onGotoTodayKeyDown = function (ev) { if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) { ev.preventDefault(); this._onGotoToday(); } else if (ev.which === Utilities_1.KeyCodes.tab && !ev.shiftKey) { if (this.props.onDismiss) { ev.stopPropagation(); ev.preventDefault(); this.props.onDismiss(); } } }; Calendar.prototype._onDatePickerPopupKeyDown = function (ev) { switch (ev.which) { case Utilities_1.KeyCodes.enter: ev.preventDefault(); break; case Utilities_1.KeyCodes.backspace: ev.preventDefault(); break; case Utilities_1.KeyCodes.escape: this._handleEscKey(ev); break; default: break; } }; Calendar.prototype._handleEscKey = function (ev) { if (this.props.onDismiss() != null) { this.props.onDismiss(); } }; return Calendar; }(Utilities_1.BaseComponent)); Calendar.defaultProps = { onSelectDate: null, onDismiss: null, isMonthPickerVisible: true, value: null, today: new Date(), firstDayOfWeek: DateValues_1.DayOfWeek.Sunday, dateRangeType: DateValues_1.DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: true, strings: null }; __decorate([ Utilities_1.autobind ], Calendar.prototype, "_navigateDay", null); __decorate([ Utilities_1.autobind ], Calendar.prototype, "_onNavigateDate", null); __decorate([ Utilities_1.autobind ], Calendar.prototype, "_onSelectDate", null); __decorate([ Utilities_1.autobind ], Calendar.prototype, "_onGotoToday", null); __decorate([ Utilities_1.autobind ], Calendar.prototype, "_onGotoTodayKeyDown", null); __decorate([ Utilities_1.autobind ], Calendar.prototype, "_onDatePickerPopupKeyDown", null); __decorate([ Utilities_1.autobind ], Calendar.prototype, "_handleEscKey", null); exports.Calendar = Calendar; /***/ }, /* 174 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * The days of the week */ var DayOfWeek; (function (DayOfWeek) { DayOfWeek[DayOfWeek["Sunday"] = 0] = "Sunday"; DayOfWeek[DayOfWeek["Monday"] = 1] = "Monday"; DayOfWeek[DayOfWeek["Tuesday"] = 2] = "Tuesday"; DayOfWeek[DayOfWeek["Wednesday"] = 3] = "Wednesday"; DayOfWeek[DayOfWeek["Thursday"] = 4] = "Thursday"; DayOfWeek[DayOfWeek["Friday"] = 5] = "Friday"; DayOfWeek[DayOfWeek["Saturday"] = 6] = "Saturday"; })(DayOfWeek = exports.DayOfWeek || (exports.DayOfWeek = {})); /** * The supported date range types */ var DateRangeType; (function (DateRangeType) { DateRangeType[DateRangeType["Day"] = 0] = "Day"; DateRangeType[DateRangeType["Week"] = 1] = "Week"; DateRangeType[DateRangeType["Month"] = 2] = "Month"; })(DateRangeType = exports.DateRangeType || (exports.DateRangeType = {})); /***/ }, /* 175 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var FocusZone_1 = __webpack_require__(50); var Icon_1 = __webpack_require__(141); var DateMath_1 = __webpack_require__(176); var stylesImport = __webpack_require__(177); var styles = stylesImport; var DAYS_IN_WEEK = 7; var CalendarDay = (function (_super) { __extends(CalendarDay, _super); function CalendarDay(props) { var _this = _super.call(this, props) || this; _this.state = { activeDescendantId: Utilities_1.getId('DatePickerDay-active'), weeks: _this._getWeeks(props) }; _this._onSelectNextMonth = _this._onSelectNextMonth.bind(_this); _this._onSelectPrevMonth = _this._onSelectPrevMonth.bind(_this); return _this; } CalendarDay.prototype.componentWillReceiveProps = function (nextProps) { var navigatedDate = nextProps.navigatedDate, selectedDate = nextProps.selectedDate, today = nextProps.today; this.setState({ weeks: this._getWeeks(nextProps) }); }; CalendarDay.prototype.render = function () { var _this = this; var _a = this.state, activeDescendantId = _a.activeDescendantId, weeks = _a.weeks; var _b = this.props, firstDayOfWeek = _b.firstDayOfWeek, strings = _b.strings, navigatedDate = _b.navigatedDate, onSelectDate = _b.onSelectDate; var dayPickerId = Utilities_1.getId('DatePickerDay-dayPicker'); var monthAndYearId = Utilities_1.getId('DatePickerDay-monthAndYear'); return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-dayPicker', styles.dayPicker), id: dayPickerId }, React.createElement("div", { className: Utilities_1.css('ms-DatePicker-header', styles.header) }, React.createElement("div", { "aria-live": 'polite', "aria-relevant": 'text', "aria-atomic": 'true', id: monthAndYearId }, React.createElement("div", { className: Utilities_1.css('ms-DatePicker-month', styles.month) }, strings.months[navigatedDate.getMonth()]), React.createElement("div", { className: Utilities_1.css('ms-DatePicker-year', styles.year) }, navigatedDate.getFullYear()))), React.createElement("div", { className: Utilities_1.css('ms-DatePicker-monthComponents', styles.monthComponents) }, React.createElement("div", { className: Utilities_1.css('ms-DatePicker-navContainer', styles.navContainer) }, React.createElement("span", { className: Utilities_1.css('ms-DatePicker-prevMonth js-prevMonth', styles.prevMonth), onClick: this._onSelectPrevMonth, onKeyDown: this._onPrevMonthKeyDown, "aria-controls": dayPickerId, "aria-label": strings.prevMonthAriaLabel, role: 'button', tabIndex: 0 }, React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? 'chevronRight' : 'chevronLeft' })), React.createElement("span", { className: Utilities_1.css('ms-DatePicker-nextMonth js-nextMonth', styles.nextMonth), onClick: this._onSelectNextMonth, onKeyDown: this._onKeyDown.bind(this, this._onSelectNextMonth), "aria-controls": dayPickerId, "aria-label": strings.nextMonthAriaLabel, role: 'button', tabIndex: 0 }, React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? 'chevronLeft' : 'chevronRight' }))), React.createElement("div", { className: Utilities_1.css('ms-DatePicker-headerToggleView js-showMonthPicker', styles.headerToggleView) })), React.createElement(FocusZone_1.FocusZone, null, React.createElement("table", { className: Utilities_1.css('ms-DatePicker-table', styles.table), "aria-readonly": 'true', "aria-multiselectable": 'false', "aria-labelledby": monthAndYearId, "aria-activedescendant": activeDescendantId }, React.createElement("thead", null, React.createElement("tr", null, strings.shortDays.map(function (val, index) { return React.createElement("th", { className: Utilities_1.css('ms-DatePicker-weekday', styles.weekday), scope: 'col', key: index, title: strings.days[(index + firstDayOfWeek) % DAYS_IN_WEEK], "aria-label": strings.days[(index + firstDayOfWeek) % DAYS_IN_WEEK] }, strings.shortDays[(index + firstDayOfWeek) % DAYS_IN_WEEK]); }))), React.createElement("tbody", null, weeks.map(function (week, weekIndex) { return React.createElement("tr", { key: weekIndex }, week.map(function (day, dayIndex) { return React.createElement("td", { key: day.key }, React.createElement("div", { className: Utilities_1.css('ms-DatePicker-day', styles.day, (_a = {}, _a['ms-DatePicker-day--infocus ' + styles.dayIsFocused] = day.isInMonth, _a['ms-DatePicker-day--outfocus ' + styles.dayIsUnfocused] = !day.isInMonth, _a['ms-DatePicker-day--today ' + styles.dayIsToday] = day.isToday, _a['ms-DatePicker-day--highlighted ' + styles.dayIsHighlighted] = day.isSelected, _a)), role: 'button', onClick: day.onSelected, onKeyDown: function (ev) { return _this._navigateMonthEdge(ev, day.originalDate, weekIndex, dayIndex); }, "aria-selected": day.isSelected, "aria-label": day.originalDate.toLocaleString ? day.originalDate.toLocaleString([], { day: 'numeric', month: 'long', year: 'numeric' }) : day.originalDate.getDate(), id: DateMath_1.compareDates(navigatedDate, day.originalDate) ? activeDescendantId : null, "data-is-focusable": true, ref: DateMath_1.compareDates(navigatedDate, day.originalDate) ? 'navigatedDay' : null, key: DateMath_1.compareDates(navigatedDate, day.originalDate) ? 'navigatedDay' : null }, React.createElement("span", { "aria-hidden": 'true' }, day.date))); var _a; })); })))))); }; CalendarDay.prototype.focus = function () { if (this.refs.navigatedDay) { this.refs.navigatedDay.tabIndex = 0; this.refs.navigatedDay.focus(); } }; CalendarDay.prototype._navigateMonthEdge = function (ev, date, weekIndex, dayIndex) { if (weekIndex === 0 && ev.which === Utilities_1.KeyCodes.up) { this.props.onNavigateDate(DateMath_1.addWeeks(date, -1), true); ev.preventDefault(); } else if (weekIndex === (this.state.weeks.length - 1) && ev.which === Utilities_1.KeyCodes.down) { this.props.onNavigateDate(DateMath_1.addWeeks(date, 1), true); ev.preventDefault(); } else if (dayIndex === 0 && ev.which === Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.left)) { this.props.onNavigateDate(DateMath_1.addDays(date, -1), true); ev.preventDefault(); } else if (dayIndex === (DAYS_IN_WEEK - 1) && ev.which === Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.right)) { this.props.onNavigateDate(DateMath_1.addDays(date, 1), true); ev.preventDefault(); } }; CalendarDay.prototype._onKeyDown = function (callback, ev) { if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) { callback(); } }; CalendarDay.prototype._onSelectDate = function (selectedDate) { var _a = this.props, onSelectDate = _a.onSelectDate, dateRangeType = _a.dateRangeType, firstDayOfWeek = _a.firstDayOfWeek, navigatedDate = _a.navigatedDate, autoNavigateOnSelection = _a.autoNavigateOnSelection; var dateRange = DateMath_1.getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek); if (onSelectDate != null) { onSelectDate(selectedDate, dateRange); } // Navigate to next or previous month if needed if (autoNavigateOnSelection && selectedDate.getMonth() !== navigatedDate.getMonth()) { var compareResult = DateMath_1.compareDatePart(selectedDate, navigatedDate); if (compareResult < 0) { this._onSelectPrevMonth(); } else if (compareResult > 0) { this._onSelectNextMonth(); } } }; CalendarDay.prototype._onSelectNextMonth = function () { this.props.onNavigateDate(DateMath_1.addMonths(this.props.navigatedDate, 1), false); }; CalendarDay.prototype._onSelectPrevMonth = function () { this.props.onNavigateDate(DateMath_1.addMonths(this.props.navigatedDate, -1), false); }; CalendarDay.prototype._onPrevMonthKeyDown = function (ev) { if (ev.which === Utilities_1.KeyCodes.tab && ev.shiftKey) { if (this.props.onDismiss) { ev.preventDefault(); ev.stopPropagation(); this.props.onDismiss(); } } else { this._onKeyDown(this._onSelectPrevMonth, ev); } }; CalendarDay.prototype._getWeeks = function (propsToUse) { var navigatedDate = propsToUse.navigatedDate, selectedDate = propsToUse.selectedDate, dateRangeType = propsToUse.dateRangeType, firstDayOfWeek = propsToUse.firstDayOfWeek, today = propsToUse.today; var date = new Date(navigatedDate.getFullYear(), navigatedDate.getMonth(), 1); var todaysDate = today || new Date(); var weeks = []; var week; // Cycle the date backwards to get to the first day of the week. while (date.getDay() !== firstDayOfWeek) { date.setDate(date.getDate() - 1); } // a flag to indicate whether all days of the week are in the month var isAllDaysOfWeekOutOfMonth = false; var selectedDates = DateMath_1.getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek); for (var weekIndex = 0; !isAllDaysOfWeekOutOfMonth; weekIndex++) { week = []; isAllDaysOfWeekOutOfMonth = true; for (var dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) { var originalDate = new Date(date.toString()); var dayInfo = { key: date.toString(), date: date.getDate(), originalDate: originalDate, isInMonth: date.getMonth() === navigatedDate.getMonth(), isToday: DateMath_1.compareDates(todaysDate, date), isSelected: DateMath_1.isInDateRangeArray(date, selectedDates), onSelected: this._onSelectDate.bind(this, originalDate) }; week.push(dayInfo); if (dayInfo.isInMonth) { isAllDaysOfWeekOutOfMonth = false; } date.setDate(date.getDate() + 1); } if (!isAllDaysOfWeekOutOfMonth) { weeks.push(week); } } return weeks; }; return CalendarDay; }(Utilities_1.BaseComponent)); __decorate([ Utilities_1.autobind ], CalendarDay.prototype, "_onPrevMonthKeyDown", null); exports.CalendarDay = CalendarDay; /***/ }, /* 176 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var DateValues_1 = __webpack_require__(174); var DAYS_IN_WEEK = 7; var MONTHS_IN_YEAR = 12; /** * Returns a date offset from the given date by the specified number of days. * @param {Date} date - The origin date * @param {number} days - The number of days to offset. 'days' can be negative. * @return {Date} A new Date object offset from the origin date by the given number of days */ function addDays(date, days) { var result = new Date(date.getTime()); result.setDate(result.getDate() + days); return result; } exports.addDays = addDays; /** * Returns a date offset from the given date by the specified number of weeks. * @param {Date} date - The origin date * @param {number} weeks - The number of weeks to offset. 'weeks' can be negative. * @return {Date} A new Date object offset from the origin date by the given number of weeks */ function addWeeks(date, weeks) { return addDays(date, weeks * DAYS_IN_WEEK); } exports.addWeeks = addWeeks; /** * Returns a date offset from the given date by the specified number of months. * The method tries to preserve the day-of-month; however, if the new month does not have enough days * to contain the original day-of-month, we'll use the last day of the new month. * @param {Date} date - The origin date * @param {number} months - The number of months to offset. 'months' can be negative. * @return {Date} A new Date object offset from the origin date by the given number of months */ function addMonths(date, months) { var result = new Date(date.getTime()); var newMonth = result.getMonth() + months; result.setMonth(newMonth); // We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days. // Loop until we back up to a day the new month has. // (Weird modulo math is due to Javascript's treatment of negative numbers in modulo) if (result.getMonth() !== ((newMonth % MONTHS_IN_YEAR) + MONTHS_IN_YEAR) % MONTHS_IN_YEAR) { result = addDays(result, -result.getDate()); } return result; } exports.addMonths = addMonths; /** * Returns a date offset from the given date by the specified number of years. * The method tries to preserve the day-of-month; however, if the new month does not have enough days * to contain the original day-of-month, we'll use the last day of the new month. * @param {Date} date - The origin date * @param {number} years - The number of years to offset. 'years' can be negative. * @return {Date} A new Date object offset from the origin date by the given number of years */ function addYears(date, years) { var result = new Date(date.getTime()); result.setFullYear(date.getFullYear() + years); // We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days. // Loop until we back up to a day the new month has. // (Weird modulo math is due to Javascript's treatment of negative numbers in modulo) if (result.getMonth() !== ((date.getMonth() % MONTHS_IN_YEAR) + MONTHS_IN_YEAR) % MONTHS_IN_YEAR) { result = addDays(result, -result.getDate()); } return result; } exports.addYears = addYears; /** * Returns a date that is a copy of the given date, aside from the month changing to the given month. * The method tries to preserve the day-of-month; however, if the new month does not have enough days * to contain the original day-of-month, we'll use the last day of the new month. * @param {Date} date - The origin date * @param {number} month - The 0-based index of the month to set on the date. * @return {Date} A new Date object with the given month set. */ function setMonth(date, month) { return addMonths(date, month - date.getMonth()); } exports.setMonth = setMonth; /** * Compares two dates, and returns true if the two dates (not accounting for time-of-day) are equal. * @return {boolean} True if the two dates represent the same date (regardless of time-of-day), false otherwise. */ function compareDates(date1, date2) { if (date1 == null && date2 == null) { return true; } else if (date1 == null || date2 == null) { return false; } else { return (date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate()); } } exports.compareDates = compareDates; /** * Compare the date parts of two dates * @param {Date} date1 - The first date to compare * @param {Date} date2 - The second date to compare * @returns {Number} A negative value if date1 is earlier than date2, 0 if the dates are equal, or a positive value * if date1 is later than date2. */ function compareDatePart(date1, date2) { return getDatePartHashValue(date1) - getDatePartHashValue(date2); } exports.compareDatePart = compareDatePart; /** * Gets the date range array including the specified date. The date range array is calculated as the list * of dates accounting for the specified first day of the week and date range type. * @param {Date} date - The input date * @param {DateRangeType} dateRangeType - The desired date range type, i.e., day, week, month, etc. * @param {DayOfWeek} dayOfWeek - The first day of the week. * @returns {Date[]} An array of dates representing the date range containing the specified date. */ function getDateRangeArray(date, dateRangeType, firstDayOfWeek) { var datesArray = new Array(); var startDate = null; var endDate = null; switch (dateRangeType) { case DateValues_1.DateRangeType.Day: startDate = getDatePart(date); endDate = addDays(startDate, 1); break; case DateValues_1.DateRangeType.Week: startDate = getStartDateOfWeek(getDatePart(date), firstDayOfWeek); endDate = addDays(startDate, DAYS_IN_WEEK); break; case DateValues_1.DateRangeType.Month: startDate = new Date(date.getFullYear(), date.getMonth(), 1); endDate = addMonths(startDate, 1); break; } // Populate the dates array with the dates in range datesArray.push(startDate); var nextDate = addDays(startDate, 1); while (!compareDates(nextDate, endDate)) { datesArray.push(nextDate); nextDate = addDays(nextDate, 1); } return datesArray; } exports.getDateRangeArray = getDateRangeArray; /** * Checks whether the specified date is in the given date range. * @param {Date} date - The origin date * @param {Date[]} dateRange - An array of dates to do the lookup on * @returns {bool} True if the date matches one of the dates in the specified array, false otherwise. */ function isInDateRangeArray(date, dateRange) { for (var _i = 0, dateRange_1 = dateRange; _i < dateRange_1.length; _i++) { var dateInRange = dateRange_1[_i]; if (compareDates(date, dateInRange)) { return true; } } return false; } exports.isInDateRangeArray = isInDateRangeArray; /** * Gets a new date with the time portion zeroed out, i.e., set to midnight * @param {Date} date - The origin date * @returns {Date} A new date with the time set to midnight */ function getDatePart(date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate()); } /** * Gets the date for the first day of the week based on the given date assuming * the specified first day of the week. * @param {Date} date - The date to find the beginning of the week date for. * @return {Date} A new date object representing the first day of the week containing the input date. */ function getStartDateOfWeek(date, firstDayOfWeek) { var daysOffset = firstDayOfWeek - date.getDay(); if (daysOffset > 0) { // If first day of week is > date, go 1 week back, to ensure resulting date is in the past. daysOffset -= DAYS_IN_WEEK; } return addDays(date, daysOffset); } /** * Helper function to assist in date comparisons */ function getDatePartHashValue(date) { // Generate date hash value created as sum of Date (up to 31 = 5 bits), Month (up to 11 = 4 bits) and Year. /* tslint:disable:no-bitwise */ return date.getDate() + (date.getMonth() << 5) + (date.getFullYear() << 9); /* tslint:enable:no-bitwise */ } /***/ }, /* 177 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_bf042f77', picker: 'picker_bf042f77', holder: 'holder_bf042f77', pickerIsOpened: 'pickerIsOpened_bf042f77', frame: 'frame_bf042f77', wrap: 'wrap_bf042f77', dayPicker: 'dayPicker_bf042f77', header: 'header_bf042f77', month: 'month_bf042f77', year: 'year_bf042f77', table: 'table_bf042f77', day: 'day_bf042f77', weekday: 'weekday_bf042f77', dayIsToday: 'dayIsToday_bf042f77', dayIsDisabled: 'dayIsDisabled_bf042f77', dayIsUnfocused: 'dayIsUnfocused_bf042f77', dayIsFocused: 'dayIsFocused_bf042f77', dayIsHighlighted: 'dayIsHighlighted_bf042f77', pickerIsFocused: 'pickerIsFocused_bf042f77', dayDisabled: 'dayDisabled_bf042f77', monthPicker: 'monthPicker_bf042f77', yearPicker: 'yearPicker_bf042f77', monthComponents: 'monthComponents_bf042f77', yearComponents: 'yearComponents_bf042f77', decadeComponents: 'decadeComponents_bf042f77', prevMonth: 'prevMonth_bf042f77', nextMonth: 'nextMonth_bf042f77', prevYear: 'prevYear_bf042f77', nextYear: 'nextYear_bf042f77', prevDecade: 'prevDecade_bf042f77', nextDecade: 'nextDecade_bf042f77', headerToggleView: 'headerToggleView_bf042f77', currentYear: 'currentYear_bf042f77', currentDecade: 'currentDecade_bf042f77', optionGrid: 'optionGrid_bf042f77', monthOption: 'monthOption_bf042f77', yearOption: 'yearOption_bf042f77', isHighlighted: 'isHighlighted_bf042f77', goToday: 'goToday_bf042f77', isPickingYears: 'isPickingYears_bf042f77', pickerIsMonthPickerVisible: 'pickerIsMonthPickerVisible_bf042f77', toggleMonthView: 'toggleMonthView_bf042f77', isPickingMonths: 'isPickingMonths_bf042f77', navContainer: 'navContainer_bf042f77', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_bf042f77{box-sizing:border-box;box-shadow:none;margin:0;padding:0;margin-bottom:17px}.picker_bf042f77{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";font-size:14px;position:relative}html[dir=ltr] .picker_bf042f77{text-align:left}html[dir=rtl] .picker_bf042f77{text-align:right}.holder_bf042f77{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";min-width:300px;display:none}.picker_bf042f77.pickerIsOpened_bf042f77 .holder_bf042f77{box-sizing:border-box;display:block}.pickerIsOpened_bf042f77{position:relative}.frame_bf042f77{padding:1px;position:relative}.wrap_bf042f77{margin:-1px;padding:9px}.dayPicker_bf042f77{display:block;margin-bottom:30px}.header_bf042f77{height:40px;line-height:44px}.month_bf042f77,.year_bf042f77{display:inline-block;font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";margin-top:-1px}.month_bf042f77:hover,.year_bf042f77:hover{color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": ";cursor:pointer}html[dir=ltr] .month_bf042f77{margin-left:15px}html[dir=rtl] .month_bf042f77{margin-right:15px}html[dir=ltr] .year_bf042f77{margin-left:15px}html[dir=rtl] .year_bf042f77{margin-right:15px}.table_bf042f77{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.table_bf042f77 td{margin:0;padding:0}.table_bf042f77 td:hover{outline:1px solid transparent}.day_bf042f77,.weekday_bf042f77{width:40px;height:40px;padding:0;line-height:40px;font-size:15px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.dayIsToday_bf042f77{position:relative;background-color:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.dayIsDisabled_bf042f77:before{border-top-color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.dayIsUnfocused_bf042f77{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";font-weight:400}.dayIsFocused_bf042f77:hover,.dayIsUnfocused_bf042f77:hover{cursor:pointer;color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.day_bf042f77.dayIsHighlighted_bf042f77.dayIsFocused_bf042f77::-moz-focus-inner{border:0}.day_bf042f77.dayIsHighlighted_bf042f77.dayIsFocused_bf042f77{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .day_bf042f77.dayIsHighlighted_bf042f77.dayIsFocused_bf042f77:focus:after{content:'';position:absolute;top:1px;right:1px;bottom:1px;left:1px;pointer-events:none;border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.dayIsHighlighted_bf042f77:hover,.pickerIsFocused_bf042f77 .dayIsHighlighted_bf042f77{cursor:pointer;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.dayIsHighlighted_bf042f77.dayDisabled_bf042f77,.dayIsHighlighted_bf042f77.dayDisabled_bf042f77:hover{background:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.monthPicker_bf042f77,.yearPicker_bf042f77{display:none}.monthComponents_bf042f77{position:absolute;top:9px}[dir=ltr] .monthComponents_bf042f77{right:9px}[dir=rtl] .monthComponents_bf042f77{left:9px}[dir=ltr] .monthComponents_bf042f77{left:9px}[dir=rtl] .monthComponents_bf042f77{right:9px}.decadeComponents_bf042f77,.yearComponents_bf042f77{position:absolute;top:-2px}[dir=ltr] .decadeComponents_bf042f77,[dir=ltr] .yearComponents_bf042f77{right:10px}[dir=rtl] .decadeComponents_bf042f77,[dir=rtl] .yearComponents_bf042f77{left:10px}.nextDecade_bf042f77,.nextMonth_bf042f77,.nextYear_bf042f77,.prevDecade_bf042f77,.prevMonth_bf042f77,.prevYear_bf042f77{width:40px;height:40px;display:block;text-align:center;line-height:40px;text-align:center;font-size:16px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";position:relative;top:2px}html[dir=ltr] .nextDecade_bf042f77,html[dir=ltr] .nextMonth_bf042f77,html[dir=ltr] .nextYear_bf042f77,html[dir=ltr] .prevDecade_bf042f77,html[dir=ltr] .prevMonth_bf042f77,html[dir=ltr] .prevYear_bf042f77{margin-left:10px}html[dir=rtl] .nextDecade_bf042f77,html[dir=rtl] .nextMonth_bf042f77,html[dir=rtl] .nextYear_bf042f77,html[dir=rtl] .prevDecade_bf042f77,html[dir=rtl] .prevMonth_bf042f77,html[dir=rtl] .prevYear_bf042f77{margin-right:10px}.nextDecade_bf042f77:hover,.nextMonth_bf042f77:hover,.nextYear_bf042f77:hover,.prevDecade_bf042f77:hover,.prevMonth_bf042f77:hover,.prevYear_bf042f77:hover{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": ";cursor:pointer;outline:1px solid transparent}.headerToggleView_bf042f77{height:40px;position:absolute;top:0;width:140px;cursor:pointer}[dir=ltr] .headerToggleView_bf042f77{left:0}[dir=rtl] .headerToggleView_bf042f77{right:0}.currentDecade_bf042f77,.currentYear_bf042f77{display:block;font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:40px;line-height:40px}html[dir=ltr] .currentDecade_bf042f77,html[dir=ltr] .currentYear_bf042f77{margin-left:15px}html[dir=rtl] .currentDecade_bf042f77,html[dir=rtl] .currentYear_bf042f77{margin-right:15px}.currentYear_bf042f77{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.currentYear_bf042f77:hover{color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": ";cursor:pointer}.optionGrid_bf042f77{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}html[dir=rtl] .optionGrid_bf042f77{margin:10px 5px 30px 0}.monthOption_bf042f77,.yearOption_bf042f77{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";width:60px;height:60px;line-height:60px;cursor:pointer;margin:0 10px 10px 0;font-size:13px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";text-align:center}html[dir=ltr] .monthOption_bf042f77,html[dir=ltr] .yearOption_bf042f77{float:left}html[dir=rtl] .monthOption_bf042f77,html[dir=rtl] .yearOption_bf042f77{float:right}html[dir=rtl] .monthOption_bf042f77,html[dir=rtl] .yearOption_bf042f77{margin:0 0 10px 10px}.monthOption_bf042f77:hover,.yearOption_bf042f77:hover{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";outline:1px solid transparent}.monthOption_bf042f77.isHighlighted_bf042f77,.yearOption_bf042f77.isHighlighted_bf042f77{background-color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.goToday_bf042f77{bottom:9px;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";cursor:pointer;font-size:13px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:30px;line-height:30px;padding:0 10px;position:absolute!important}[dir=ltr] .goToday_bf042f77{right:3px}[dir=rtl] .goToday_bf042f77{left:3px}.goToday_bf042f77:hover{outline:1px solid transparent}.root_bf042f77.isPickingYears_bf042f77 .dayPicker_bf042f77,.root_bf042f77.isPickingYears_bf042f77 .monthComponents_bf042f77{display:none}.root_bf042f77.isPickingYears_bf042f77 .monthPicker_bf042f77{display:none}.root_bf042f77.isPickingYears_bf042f77 .yearPicker_bf042f77{display:block}@media (min-width:460px){.header_bf042f77{height:30px;line-height:30px}.day_bf042f77,.weekday_bf042f77{width:30px;height:30px;line-height:28px;font-weight:600;font-size:12px}.monthComponents_bf042f77{width:210px}.nextDecade_bf042f77,.nextMonth_bf042f77,.nextYear_bf042f77,.prevDecade_bf042f77,.prevMonth_bf042f77,.prevYear_bf042f77{font-size:12px;width:24px;height:24px;line-height:24px}.holder_bf042f77{min-width:230px}.month_bf042f77,.year_bf042f77{font-weight:300}.month_bf042f77,.year_bf042f77{font-size:17px;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.month_bf042f77:hover,.year_bf042f77:hover{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";cursor:default}.pickerIsMonthPickerVisible_bf042f77 .dayPicker_bf042f77{margin:-10px 0;padding:10px 0}.pickerIsMonthPickerVisible_bf042f77 .dayPicker_bf042f77{box-sizing:border-box;width:220px;min-height:230px}html[dir=ltr] .pickerIsMonthPickerVisible_bf042f77 .dayPicker_bf042f77{border-right:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=rtl] .pickerIsMonthPickerVisible_bf042f77 .dayPicker_bf042f77{border-left:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.pickerIsMonthPickerVisible_bf042f77 .holder_bf042f77{width:440px}.pickerIsMonthPickerVisible_bf042f77 .monthPicker_bf042f77{display:block}.pickerIsMonthPickerVisible_bf042f77 .monthPicker_bf042f77,.pickerIsMonthPickerVisible_bf042f77 .yearPicker_bf042f77{top:9px;position:absolute}[dir=ltr] .pickerIsMonthPickerVisible_bf042f77 .monthPicker_bf042f77,[dir=ltr] .pickerIsMonthPickerVisible_bf042f77 .yearPicker_bf042f77{left:238px}[dir=rtl] .pickerIsMonthPickerVisible_bf042f77 .monthPicker_bf042f77,[dir=rtl] .pickerIsMonthPickerVisible_bf042f77 .yearPicker_bf042f77{right:238px}html[dir=ltr] .pickerIsMonthPickerVisible_bf042f77 .month_bf042f77{margin-left:12px}html[dir=rtl] .pickerIsMonthPickerVisible_bf042f77 .month_bf042f77{margin-right:12px}.pickerIsMonthPickerVisible_bf042f77 .optionGrid_bf042f77{width:200px;height:auto;margin:10px 0 0 0}html[dir=rtl] .pickerIsMonthPickerVisible_bf042f77 .optionGrid_bf042f77{margin:10px 0 0 0}.pickerIsMonthPickerVisible_bf042f77 .toggleMonthView_bf042f77{display:none}.pickerIsMonthPickerVisible_bf042f77 .currentDecade_bf042f77,.pickerIsMonthPickerVisible_bf042f77 .currentYear_bf042f77{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.pickerIsMonthPickerVisible_bf042f77 .monthOption_bf042f77,.pickerIsMonthPickerVisible_bf042f77 .yearOption_bf042f77{width:40px;height:40px;line-height:38px;font-size:12px;margin:0 10px 10px 0}html[dir=rtl] .pickerIsMonthPickerVisible_bf042f77 .monthOption_bf042f77,html[dir=rtl] .pickerIsMonthPickerVisible_bf042f77 .yearOption_bf042f77{margin:0 0 10px 10px}.pickerIsMonthPickerVisible_bf042f77 .monthOption_bf042f77:hover,.pickerIsMonthPickerVisible_bf042f77 .yearOption_bf042f77:hover{outline:1px solid transparent}.pickerIsMonthPickerVisible_bf042f77 .goToday_bf042f77{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;top:199px}[dir=ltr] .pickerIsMonthPickerVisible_bf042f77 .goToday_bf042f77{right:3px}[dir=rtl] .pickerIsMonthPickerVisible_bf042f77 .goToday_bf042f77{left:3px}html[dir=ltr] .pickerIsMonthPickerVisible_bf042f77 .goToday_bf042f77{text-align:right}html[dir=rtl] .pickerIsMonthPickerVisible_bf042f77 .goToday_bf042f77{text-align:left}.pickerIsMonthPickerVisible_bf042f77 .root_bf042f77.isPickingYears_bf042f77 .dayPicker_bf042f77,.pickerIsMonthPickerVisible_bf042f77 .root_bf042f77.isPickingYears_bf042f77 .monthComponents_bf042f77{display:block}.pickerIsMonthPickerVisible_bf042f77 .root_bf042f77.isPickingYears_bf042f77 .monthPicker_bf042f77{display:none}.pickerIsMonthPickerVisible_bf042f77 .root_bf042f77.isPickingYears_bf042f77 .yearPicker_bf042f77{display:block}}@media (max-width:459px){.root_bf042f77.isPickingMonths_bf042f77 .dayPicker_bf042f77,.root_bf042f77.isPickingMonths_bf042f77 .monthComponents_bf042f77{display:none}.root_bf042f77.isPickingMonths_bf042f77 .monthPicker_bf042f77{display:block}}.wrap_bf042f77 div:focus::-moz-focus-inner,.wrap_bf042f77 span:focus::-moz-focus-inner{border:0}.wrap_bf042f77 div:focus,.wrap_bf042f77 span:focus{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .wrap_bf042f77 div:focus:focus:after,.ms-Fabric.is-focusVisible .wrap_bf042f77 span:focus:focus:after{content:'';position:absolute;top:1px;right:1px;bottom:1px;left:1px;pointer-events:none;border:1px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.goToday_bf042f77{width:auto}.nextMonth_bf042f77,.nextYear_bf042f77,.prevMonth_bf042f77,.prevYear_bf042f77{display:inline-block}html[dir=ltr] .navContainer_bf042f77{float:right}html[dir=rtl] .navContainer_bf042f77{float:left}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 178 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var FocusZone_1 = __webpack_require__(50); var DateMath_1 = __webpack_require__(176); var Icon_1 = __webpack_require__(141); var stylesImport = __webpack_require__(177); var styles = stylesImport; var CalendarMonth = (function (_super) { __extends(CalendarMonth, _super); function CalendarMonth(props) { var _this = _super.call(this, props) || this; _this._selectMonthCallbacks = []; props.strings.shortMonths.map(function (month, index) { _this._selectMonthCallbacks[index] = _this._onSelectMonth.bind(_this, index); }); _this._onSelectNextYear = _this._onSelectNextYear.bind(_this); _this._onSelectPrevYear = _this._onSelectPrevYear.bind(_this); _this._onSelectMonth = _this._onSelectMonth.bind(_this); return _this; } CalendarMonth.prototype.render = function () { var _this = this; var _a = this.props, navigatedDate = _a.navigatedDate, strings = _a.strings; return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-monthPicker', styles.monthPicker) }, React.createElement("div", { className: Utilities_1.css('ms-DatePicker-header', styles.header) }, React.createElement("div", { className: Utilities_1.css('ms-DatePicker-yearComponents ms-DatePicker-navContainer', styles.yearComponents, styles.navContainer) }, React.createElement("span", { className: Utilities_1.css('ms-DatePicker-prevYear js-prevYear', styles.prevYear), onClick: this._onSelectPrevYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectPrevYear), "aria-label": strings.prevYearAriaLabel, role: 'button', tabIndex: 0 }, React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? 'chevronRight' : 'chevronLeft' })), React.createElement("span", { className: Utilities_1.css('ms-DatePicker-nextYear js-nextYear', styles.nextYear), onClick: this._onSelectNextYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectNextYear), "aria-label": strings.nextYearAriaLabel, role: 'button', tabIndex: 0 }, React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? 'chevronLeft' : 'chevronRight' }))), React.createElement("div", { className: Utilities_1.css('ms-DatePicker-currentYear js-showYearPicker', styles.currentYear) }, navigatedDate.getFullYear())), React.createElement(FocusZone_1.FocusZone, null, React.createElement("div", { className: Utilities_1.css('ms-DatePicker-optionGrid', styles.optionGrid) }, strings.shortMonths.map(function (month, index) { return React.createElement("span", { role: 'button', className: Utilities_1.css('ms-DatePicker-monthOption', styles.monthOption), key: index, onClick: _this._selectMonthCallbacks[index], "aria-label": DateMath_1.setMonth(navigatedDate, index).toLocaleString([], { month: 'long', year: 'numeric' }), "data-is-focusable": true }, month); }))))); }; CalendarMonth.prototype._onKeyDown = function (callback, ev) { if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) { callback(); } }; CalendarMonth.prototype._onSelectNextYear = function () { var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate; onNavigateDate(DateMath_1.addYears(navigatedDate, 1), false); }; ; CalendarMonth.prototype._onSelectPrevYear = function () { var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate; onNavigateDate(DateMath_1.addYears(navigatedDate, -1), false); }; ; CalendarMonth.prototype._onSelectMonth = function (newMonth) { var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate; onNavigateDate(DateMath_1.setMonth(navigatedDate, newMonth), true); }; return CalendarMonth; }(Utilities_1.BaseComponent)); exports.CalendarMonth = CalendarMonth; /***/ }, /* 179 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var DateValues_1 = __webpack_require__(174); exports.DayOfWeek = DateValues_1.DayOfWeek; exports.DateRangeType = DateValues_1.DateRangeType; /***/ }, /* 180 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(181)); /***/ }, /* 181 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(182)); /***/ }, /* 182 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(183); var styles = stylesImport; var Checkbox = (function (_super) { __extends(Checkbox, _super); function Checkbox(props) { var _this = _super.call(this, props) || this; _this._warnMutuallyExclusive({ 'checked': 'defaultChecked' }); _this._id = Utilities_1.getId('checkbox-'); _this.state = { isFocused: false, isChecked: !!(props.checked !== undefined ? props.checked : props.defaultChecked) }; return _this; } Checkbox.prototype.render = function () { var _a = this.props, checked = _a.checked, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, inputProps = _a.inputProps, label = _a.label, name = _a.name; var isFocused = this.state.isFocused; var isChecked = checked === undefined ? this.state.isChecked : checked; return (React.createElement("div", { className: Utilities_1.css('ms-Checkbox', styles.root, className, (_b = { 'is-inFocus': isFocused }, _b[styles.rootIsInFocus] = isFocused, _b)) }, React.createElement("input", __assign({}, inputProps, (checked !== undefined && { checked: checked }), (defaultChecked !== undefined && { defaultChecked: defaultChecked }), { disabled: disabled, ref: this._resolveRef('_checkBox'), id: this._id, name: name || this._id, className: Utilities_1.css('ms-Checkbox-input', styles.input), type: 'checkbox', onChange: this._onChange, onFocus: this._onFocus, onBlur: this._onBlur, "aria-checked": isChecked })), this.props.children, React.createElement("label", { htmlFor: this._id, className: Utilities_1.css('ms-Checkbox-label', styles.label, (_c = {}, _c['is-checked ' + styles.labelIsChecked] = isChecked, _c['is-disabled ' + styles.labelIsDisabled] = disabled, _c[styles.labelIsInFocus] = isFocused, _c)) }, label && React.createElement("span", { className: styles.textLabel }, label)))); var _b, _c; }; Object.defineProperty(Checkbox.prototype, "checked", { get: function () { return this._checkBox ? this._checkBox.checked : false; }, enumerable: true, configurable: true }); Checkbox.prototype.focus = function () { if (this._checkBox) { this._checkBox.focus(); } }; Checkbox.prototype._onFocus = function (ev) { var inputProps = this.props.inputProps; if (inputProps && inputProps.onFocus) { inputProps.onFocus(ev); } this.setState({ isFocused: true }); }; Checkbox.prototype._onBlur = function (ev) { var inputProps = this.props.inputProps; if (inputProps && inputProps.onBlur) { inputProps.onBlur(ev); } this.setState({ isFocused: false }); }; Checkbox.prototype._onChange = function (ev) { var onChange = this.props.onChange; var isChecked = ev.target.checked; if (onChange) { onChange(ev, isChecked); } if (this.props.checked === undefined) { this.setState({ isChecked: isChecked }); } }; return Checkbox; }(Utilities_1.BaseComponent)); Checkbox.defaultProps = {}; __decorate([ Utilities_1.autobind ], Checkbox.prototype, "_onFocus", null); __decorate([ Utilities_1.autobind ], Checkbox.prototype, "_onBlur", null); __decorate([ Utilities_1.autobind ], Checkbox.prototype, "_onChange", null); exports.Checkbox = Checkbox; /***/ }, /* 183 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_ec819a34', textLabel: 'textLabel_ec819a34', input: 'input_ec819a34', label: 'label_ec819a34', labelIsDisabled: 'labelIsDisabled_ec819a34', labelIsChecked: 'labelIsChecked_ec819a34', labelIsInFocus: 'labelIsInFocus_ec819a34', rootIsInFocus: 'rootIsInFocus_ec819a34', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_ec819a34{box-sizing:border-box;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-size:14px;font-weight:400;min-height:36px;position:relative}.textLabel_ec819a34{font-size:14px;padding:0 0 0 26px;display:inline-block;font-size:14px}html[dir=rtl] .textLabel_ec819a34{padding:0 26px 0 0}.input_ec819a34{position:absolute;opacity:0;top:8px}.label_ec819a34::before{content:'';display:inline-block;border:1px solid " }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";width:20px;height:20px;font-weight:400;position:absolute;box-sizing:border-box;transition-property:background,border,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1)}.label_ec819a34::after{content:'\\E73E';font-family:FabricMDL2Icons;display:none;position:absolute;font-weight:900;background-color:transparent;font-size:13px;top:0;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";line-height:20px;width:20px;text-align:center}.label_ec819a34{display:inline-block;cursor:pointer;margin-top:8px;position:relative;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-width:20px;min-height:20px;line-height:20px}.label_ec819a34:hover::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.label_ec819a34:hover .textLabel_ec819a34{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.label_ec819a34:focus::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.label_ec819a34:focus.labelIsDisabled_ec819a34::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.label_ec819a34:focus.labelIsChecked_ec819a34::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.label_ec819a34:active::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.label_ec819a34:active .textLabel_ec819a34{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.label_ec819a34.labelIsChecked_ec819a34::before{border:10px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:black-on-white){.label_ec819a34.labelIsChecked_ec819a34::before{display:none}}.label_ec819a34.labelIsChecked_ec819a34::after{display:block}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:black-on-white){.label_ec819a34.labelIsChecked_ec819a34::after{height:16px;width:16px;line-height:16px}}@media screen and (-ms-high-contrast:active){.label_ec819a34.labelIsChecked_ec819a34::after{border:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.label_ec819a34.labelIsChecked_ec819a34::after{border:2px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.label_ec819a34.labelIsChecked_ec819a34:focus::before,.label_ec819a34.labelIsChecked_ec819a34:hover::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.label_ec819a34.labelIsDisabled_ec819a34{cursor:default}.label_ec819a34.labelIsDisabled_ec819a34:focus::before,.label_ec819a34.labelIsDisabled_ec819a34:hover::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.label_ec819a34.labelIsDisabled_ec819a34::before{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.label_ec819a34.labelIsDisabled_ec819a34::after{border:2px solid #0f0}}@media screen and (-ms-high-contrast:black-on-white){.label_ec819a34.labelIsDisabled_ec819a34::after{border:2px solid #600000}}@media screen and (-ms-high-contrast:active){.label_ec819a34.labelIsDisabled_ec819a34::after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.label_ec819a34.labelIsDisabled_ec819a34::after{color:#600000}}.label_ec819a34.labelIsDisabled_ec819a34 .textLabel_ec819a34{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.label_ec819a34.labelIsDisabled_ec819a34 .textLabel_ec819a34{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.label_ec819a34.labelIsDisabled_ec819a34 .textLabel_ec819a34{color:#600000}}.label_ec819a34.labelIsInFocus_ec819a34::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.label_ec819a34.labelIsInFocus_ec819a34.labelIsDisabled_ec819a34::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.label_ec819a34.labelIsInFocus_ec819a34.labelIsChecked_ec819a34::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.ms-Fabric.is-focusVisible .rootIsInFocus_ec819a34::before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.ms-Fabric.is-focusVisible .rootIsInFocus_ec819a34::before{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.ms-Fabric.is-focusVisible .rootIsInFocus_ec819a34::before{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 184 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(185)); /***/ }, /* 185 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(186)); /***/ }, /* 186 */ /***/ 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__(2); var Image_1 = __webpack_require__(187); var Label_1 = __webpack_require__(189); var Icon_1 = __webpack_require__(141); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(193); var styles = stylesImport; var ChoiceGroup = (function (_super) { __extends(ChoiceGroup, _super); function ChoiceGroup(props) { var _this = _super.call(this, props) || this; _this._warnDeprecations({ 'onChanged': 'onChange' }); _this._warnMutuallyExclusive({ selectedKey: 'defaultSelectedKey' }); _this.state = { keyChecked: (props.defaultSelectedKey === undefined) ? _this._getKeyChecked(props) : props.defaultSelectedKey, keyFocused: undefined }; _this._id = Utilities_1.getId('ChoiceGroup'); _this._labelId = Utilities_1.getId('ChoiceGroupLabel'); return _this; } ChoiceGroup.prototype.componentWillReceiveProps = function (newProps) { var newKeyChecked = this._getKeyChecked(newProps); var oldKeyCheched = this._getKeyChecked(this.props); if (newKeyChecked !== oldKeyCheched) { this.setState({ keyChecked: newKeyChecked, }); } }; ChoiceGroup.prototype.render = function () { var _this = this; var _a = this.props, label = _a.label, options = _a.options, className = _a.className, required = _a.required; var _b = this.state, keyChecked = _b.keyChecked, keyFocused = _b.keyFocused; return ( // Need to assign role application on containing div because JAWS doesnt call OnKeyDown without this role React.createElement("div", { role: 'application', className: className }, React.createElement("div", { className: Utilities_1.css('ms-ChoiceFieldGroup', styles.root), role: 'radiogroup', "aria-labelledby": this.props.label ? this._id + '-label' : '' }, this.props.label && (React.createElement(Label_1.Label, { className: className, required: required, id: this._id + '-label' }, label)), options.map(function (option) { var _a = option.onRenderField, onRenderField = _a === void 0 ? _this._onRenderField : _a; // Merge internal props into option Utilities_1.assign(option, { checked: option.key === keyChecked, disabled: option.disabled || _this.props.disabled, id: _this._id + "-" + option.key, labelId: _this._labelId + "-" + option.key }); return (React.createElement("div", { key: option.key, className: Utilities_1.css('ms-ChoiceField', styles.choiceField, (_b = {}, _b['ms-ChoiceField--image ' + styles.choiceFieldIsImage] = !!option.imageSrc, _b['ms-ChoiceField--icon ' + styles.choiceFieldIsIcon] = !!option.iconProps, _b['is-inFocus ' + styles.choiceFieldIsInFocus] = option.key === keyFocused, _b)) }, React.createElement("input", { ref: function (c) { return _this._inputElement = c; }, id: option.id, className: Utilities_1.css('ms-ChoiceField-input', styles.input), type: 'radio', name: _this.props.name || _this._id, disabled: option.disabled || _this.props.disabled, checked: option.key === keyChecked, required: required, onChange: _this._onChange.bind(_this, option), onFocus: _this._onFocus.bind(_this, option), onBlur: _this._onBlur.bind(_this, option), "aria-labelledby": option.id }), onRenderField(option, _this._onRenderField))); var _b; })))); }; ChoiceGroup.prototype.focus = function () { if (this._inputElement) { this._inputElement.focus(); } }; ChoiceGroup.prototype._onFocus = function (option, ev) { this.setState({ keyFocused: option.key, keyChecked: this.state.keyChecked }); }; ChoiceGroup.prototype._onBlur = function (option, ev) { this.setState({ keyFocused: undefined, keyChecked: this.state.keyChecked }); }; ChoiceGroup.prototype._onRenderField = function (option) { return (React.createElement("label", { htmlFor: option.id, className: Utilities_1.css('ms-ChoiceField-field', styles.field, (_a = {}, _a['ms-ChoiceField-field--image ' + styles.fieldIsImage] = !!option.imageSrc, _a['ms-ChoiceField--icon ' + styles.fieldIsIcon] = !!option.iconProps, _a['is-checked ' + styles.fieldIsChecked] = option.checked, _a['is-disabled ' + styles.fieldIsDisabled] = option.disabled, _a)) }, option.imageSrc && (React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-innerField', styles.innerField) }, React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-imageWrapper', styles.imageWrapper, (_b = {}, _b['is-hidden ' + styles.imageWrapperIsHidden] = option.checked, _b)) }, React.createElement(Image_1.Image, { src: option.imageSrc, width: option.imageSize.width, height: option.imageSize.height })), React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-imageWrapper', styles.imageWrapper, (_c = {}, _c['is-hidden ' + styles.imageWrapperIsHidden] = !option.checked, _c)) }, React.createElement(Image_1.Image, { src: option.selectedImageSrc, width: option.imageSize.width, height: option.imageSize.height })))), option.iconProps ? React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-innerField', styles.innerField) }, React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-iconWrapper', styles.iconWrapper) }, React.createElement(Icon_1.Icon, __assign({}, option.iconProps)))) : null, option.imageSrc || option.iconProps ? (React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-labelWrapper', styles.labelWrapper) }, React.createElement("span", { id: option.labelId, className: 'ms-Label' }, option.text))) : (React.createElement("span", { id: option.labelId, className: 'ms-Label' }, option.text)))); var _a, _b, _c; }; ChoiceGroup.prototype._onChange = function (option, evt) { var _a = this.props, onChanged = _a.onChanged, onChange = _a.onChange, selectedKey = _a.selectedKey; // Only manage state in uncontrolled scenarios. if (selectedKey === undefined) { this.setState({ keyChecked: option.key }); } // TODO: onChanged deprecated, remove else if after 07/17/2017 when onChanged has been removed. if (onChange) { onChange(evt, option); } else if (onChanged) { onChanged(option); } }; /** * If all the isChecked property of options are falsy values, return undefined; * Else return the key of the first option with the truthy isChecked property. */ ChoiceGroup.prototype._getKeyChecked = function (props) { if (props.selectedKey !== undefined) { return props.selectedKey; } var optionsChecked = props.options.filter(function (option) { return option.checked; }); if (optionsChecked.length === 0) { return undefined; } else { return optionsChecked[0].key; } }; return ChoiceGroup; }(Utilities_1.BaseComponent)); ChoiceGroup.defaultProps = { options: [] }; exports.ChoiceGroup = ChoiceGroup; /***/ }, /* 187 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(188)); /***/ }, /* 188 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(145)); __export(__webpack_require__(146)); /***/ }, /* 189 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(190)); /***/ }, /* 190 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(191)); /***/ }, /* 191 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(192); var styles = stylesImport; var Label = (function (_super) { __extends(Label, _super); function Label() { return _super !== null && _super.apply(this, arguments) || this; } Label.prototype.render = function () { var _a = this.props, disabled = _a.disabled, required = _a.required, children = _a.children, className = _a.className; return (React.createElement("label", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), { className: Utilities_1.css(styles.root, 'ms-Label', className, (_b = { 'is-disabled': disabled, 'is-required': required }, _b[styles.isDisabled] = disabled, _b[styles.isRequired] = required, _b)) }), children)); var _b; }; return Label; }(Utilities_1.BaseComponent)); exports.Label = Label; /***/ }, /* 192 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_083d600e', isRequired: 'isRequired_083d600e', isDisabled: 'isDisabled_083d600e', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_083d600e{font-size:14px;font-weight:400;box-sizing:border-box;box-shadow:none;margin:0;padding:0;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";box-sizing:border-box;display:block;padding:5px 0;word-wrap:break-word;overflow-wrap:break-word}.isRequired_083d600e::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.isDisabled_083d600e{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 193 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_92027817', choiceField: 'choiceField_92027817', input: 'input_92027817', field: 'field_92027817', fieldIsChecked: 'fieldIsChecked_92027817', fieldIsDisabled: 'fieldIsDisabled_92027817', choiceFieldIsImage: 'choiceFieldIsImage_92027817', choiceFieldIsIcon: 'choiceFieldIsIcon_92027817', fieldIsImage: 'fieldIsImage_92027817', fieldIsIcon: 'fieldIsIcon_92027817', innerField: 'innerField_92027817', imageWrapper: 'imageWrapper_92027817', imageWrapperIsHidden: 'imageWrapperIsHidden_92027817', labelWrapper: 'labelWrapper_92027817', iconWrapper: 'iconWrapper_92027817', choiceFieldIsInFocus: 'choiceFieldIsInFocus_92027817', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_92027817{margin-bottom:4px}.choiceField_92027817{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-size:14px;font-weight:400;min-height:26px;border:none;position:relative;margin-top:8px}[dir=ltr] .choiceField_92027817{padding-left:8px}[dir=rtl] .choiceField_92027817{padding-right:8px}.choiceField_92027817 .ms-Label{font-size:14px;padding:0 0 0 26px;display:inline-block}[dir=rtl] .choiceField_92027817 .ms-Label{padding:0 26px 0 0}.input_92027817{position:absolute;opacity:0;top:8px}.field_92027817::before{content:'';display:inline-block;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border:1px solid " }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";width:20px;height:20px;font-weight:400;position:absolute;top:-1px;box-sizing:border-box;transition-property:border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1);border-radius:50%}.field_92027817::after{content:'';width:0;height:0;border-radius:50%;position:absolute;transition-property:top,left,right,width,height;transition-duration:150ms;transition-timing-function:cubic-bezier(.4,0,.23,1);box-sizing:border-box}[dir=ltr] .field_92027817::after{left:10px}[dir=rtl] .field_92027817::after{right:10px}[dir=ltr] .field_92027817::after{right:0}[dir=rtl] .field_92027817::after{left:0}@media screen and (-ms-high-contrast:active){.field_92027817::after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.field_92027817::after{color:#600000}}.field_92027817{display:inline-block;cursor:pointer;margin-top:0;position:relative;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.field_92027817:focus::before,.field_92027817:hover::before{border-color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.field_92027817:focus .ms-Label,.field_92027817:hover .ms-Label{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.field_92027817.fieldIsChecked_92027817::before{border:2px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.field_92027817.fieldIsChecked_92027817::before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.field_92027817.fieldIsChecked_92027817::before{border-color:#37006e}}.field_92027817.fieldIsChecked_92027817::after{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";top:4px;width:10px;height:10px}[dir=ltr] .field_92027817.fieldIsChecked_92027817::after{left:5px}[dir=rtl] .field_92027817.fieldIsChecked_92027817::after{right:5px}@media screen and (-ms-high-contrast:active){.field_92027817.fieldIsChecked_92027817::after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.field_92027817.fieldIsChecked_92027817::after{background-color:#37006e}}.field_92027817.fieldIsChecked_92027817:focus::before,.field_92027817.fieldIsChecked_92027817:hover::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.field_92027817.fieldIsDisabled_92027817{cursor:default}.field_92027817.fieldIsDisabled_92027817::before{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.field_92027817.fieldIsDisabled_92027817::before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.field_92027817.fieldIsDisabled_92027817::before{border-color:#600000}}.field_92027817.fieldIsDisabled_92027817 .ms-Label{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.field_92027817.fieldIsDisabled_92027817 .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.field_92027817.fieldIsDisabled_92027817 .ms-Label{color:#600000}}.field_92027817.fieldIsChecked_92027817.fieldIsDisabled_92027817::before{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.field_92027817.fieldIsChecked_92027817.fieldIsDisabled_92027817::after{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.choiceFieldIsIcon_92027817,.choiceFieldIsImage_92027817{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:0;margin:0 4px 4px 0;background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}[dir=rtl] .choiceFieldIsIcon_92027817,[dir=rtl] .choiceFieldIsImage_92027817{margin:0 0 4px 4px}[dir=ltr] .choiceFieldIsIcon_92027817,[dir=ltr] .choiceFieldIsImage_92027817{padding-left:0}[dir=rtl] .choiceFieldIsIcon_92027817,[dir=rtl] .choiceFieldIsImage_92027817{padding-right:0}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817,.choiceFieldIsImage_92027817 .fieldIsImage_92027817{display:inline-block;box-sizing:border-box;min-width:96px;cursor:pointer;padding:4px;padding-top:22px;margin:0;text-align:center;transition:all .2s ease;border:2px solid transparent}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817.fieldIsDisabled_92027817,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817.fieldIsDisabled_92027817,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817.fieldIsDisabled_92027817,.choiceFieldIsImage_92027817 .fieldIsImage_92027817.fieldIsDisabled_92027817{cursor:default}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817.fieldIsDisabled_92027817 .innerField_92027817,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817.fieldIsDisabled_92027817 .innerField_92027817,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817.fieldIsDisabled_92027817 .innerField_92027817,.choiceFieldIsImage_92027817 .fieldIsImage_92027817.fieldIsDisabled_92027817 .innerField_92027817{opacity:.25}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817 .innerField_92027817,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817 .innerField_92027817,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817 .innerField_92027817,.choiceFieldIsImage_92027817 .fieldIsImage_92027817 .innerField_92027817{position:relative;padding:0 28px}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817 .innerField_92027817 .imageWrapper_92027817,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817 .innerField_92027817 .imageWrapper_92027817,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817 .innerField_92027817 .imageWrapper_92027817,.choiceFieldIsImage_92027817 .fieldIsImage_92027817 .innerField_92027817 .imageWrapper_92027817{padding-bottom:2px;transition:opacity .2s ease}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817 .innerField_92027817 .imageWrapper_92027817.imageWrapperIsHidden_92027817,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817 .innerField_92027817 .imageWrapper_92027817.imageWrapperIsHidden_92027817,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817 .innerField_92027817 .imageWrapper_92027817.imageWrapperIsHidden_92027817,.choiceFieldIsImage_92027817 .fieldIsImage_92027817 .innerField_92027817 .imageWrapper_92027817.imageWrapperIsHidden_92027817{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;opacity:0}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817 .innerField_92027817 .imageWrapper_92027817 .ms-Image,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817 .innerField_92027817 .imageWrapper_92027817 .ms-Image,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817 .innerField_92027817 .imageWrapper_92027817 .ms-Image,.choiceFieldIsImage_92027817 .fieldIsImage_92027817 .innerField_92027817 .imageWrapper_92027817 .ms-Image{display:inline-block}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817 .labelWrapper_92027817,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817 .labelWrapper_92027817,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817 .labelWrapper_92027817,.choiceFieldIsImage_92027817 .fieldIsImage_92027817 .labelWrapper_92027817{display:inline-block;position:relative;margin:4px 0 0 0;height:32px;line-height:16px;overflow-y:hidden;font-size:14px;font-weight:400}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817 .labelWrapper_92027817 .ms-Label,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817 .labelWrapper_92027817 .ms-Label,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817 .labelWrapper_92027817 .ms-Label,.choiceFieldIsImage_92027817 .fieldIsImage_92027817 .labelWrapper_92027817 .ms-Label{padding:0}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817::before,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817::before,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817::before,.choiceFieldIsImage_92027817 .fieldIsImage_92027817::before{top:3px;opacity:0}[dir=ltr] .choiceFieldIsIcon_92027817 .fieldIsIcon_92027817::before,[dir=ltr] .choiceFieldIsIcon_92027817 .fieldIsImage_92027817::before,[dir=ltr] .choiceFieldIsImage_92027817 .fieldIsIcon_92027817::before,[dir=ltr] .choiceFieldIsImage_92027817 .fieldIsImage_92027817::before{right:3px}[dir=rtl] .choiceFieldIsIcon_92027817 .fieldIsIcon_92027817::before,[dir=rtl] .choiceFieldIsIcon_92027817 .fieldIsImage_92027817::before,[dir=rtl] .choiceFieldIsImage_92027817 .fieldIsIcon_92027817::before,[dir=rtl] .choiceFieldIsImage_92027817 .fieldIsImage_92027817::before{left:3px}[dir=ltr] .choiceFieldIsIcon_92027817 .fieldIsIcon_92027817::before,[dir=ltr] .choiceFieldIsIcon_92027817 .fieldIsImage_92027817::before,[dir=ltr] .choiceFieldIsImage_92027817 .fieldIsIcon_92027817::before,[dir=ltr] .choiceFieldIsImage_92027817 .fieldIsImage_92027817::before{left:auto}[dir=rtl] .choiceFieldIsIcon_92027817 .fieldIsIcon_92027817::before,[dir=rtl] .choiceFieldIsIcon_92027817 .fieldIsImage_92027817::before,[dir=rtl] .choiceFieldIsImage_92027817 .fieldIsIcon_92027817::before,[dir=rtl] .choiceFieldIsImage_92027817 .fieldIsImage_92027817::before{right:auto}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817::after,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817::after,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817::after,.choiceFieldIsImage_92027817 .fieldIsImage_92027817::after{top:13px}[dir=ltr] .choiceFieldIsIcon_92027817 .fieldIsIcon_92027817::after,[dir=ltr] .choiceFieldIsIcon_92027817 .fieldIsImage_92027817::after,[dir=ltr] .choiceFieldIsImage_92027817 .fieldIsIcon_92027817::after,[dir=ltr] .choiceFieldIsImage_92027817 .fieldIsImage_92027817::after{right:13px}[dir=rtl] .choiceFieldIsIcon_92027817 .fieldIsIcon_92027817::after,[dir=rtl] .choiceFieldIsIcon_92027817 .fieldIsImage_92027817::after,[dir=rtl] .choiceFieldIsImage_92027817 .fieldIsIcon_92027817::after,[dir=rtl] .choiceFieldIsImage_92027817 .fieldIsImage_92027817::after{left:13px}[dir=ltr] .choiceFieldIsIcon_92027817 .fieldIsIcon_92027817::after,[dir=ltr] .choiceFieldIsIcon_92027817 .fieldIsImage_92027817::after,[dir=ltr] .choiceFieldIsImage_92027817 .fieldIsIcon_92027817::after,[dir=ltr] .choiceFieldIsImage_92027817 .fieldIsImage_92027817::after{left:auto}[dir=rtl] .choiceFieldIsIcon_92027817 .fieldIsIcon_92027817::after,[dir=rtl] .choiceFieldIsIcon_92027817 .fieldIsImage_92027817::after,[dir=rtl] .choiceFieldIsImage_92027817 .fieldIsIcon_92027817::after,[dir=rtl] .choiceFieldIsImage_92027817 .fieldIsImage_92027817::after{right:auto}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817):focus,.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817):hover,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817):focus,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817):hover,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817):focus,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817):hover,.choiceFieldIsImage_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817):focus,.choiceFieldIsImage_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817):hover{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817):focus::before,.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817):hover::before,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817):focus::before,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817):hover::before,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817):focus::before,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817):hover::before,.choiceFieldIsImage_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817):focus::before,.choiceFieldIsImage_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817):hover::before{opacity:1}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817,.choiceFieldIsImage_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::before,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::before,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::before,.choiceFieldIsImage_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::before{opacity:1}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::after,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::after,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::after,.choiceFieldIsImage_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::after{top:8px}[dir=ltr] .choiceFieldIsIcon_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::after,[dir=ltr] .choiceFieldIsIcon_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::after,[dir=ltr] .choiceFieldIsImage_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::after,[dir=ltr] .choiceFieldIsImage_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::after{right:8px}[dir=rtl] .choiceFieldIsIcon_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::after,[dir=rtl] .choiceFieldIsIcon_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::after,[dir=rtl] .choiceFieldIsImage_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::after,[dir=rtl] .choiceFieldIsImage_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817::after{left:8px}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:focus,.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:hover,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:focus,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:hover,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:focus,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:hover,.choiceFieldIsImage_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:focus,.choiceFieldIsImage_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:hover{border-color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:focus::before,.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:hover::before,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:focus::before,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:hover::before,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:focus::before,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:hover::before,.choiceFieldIsImage_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:focus::before,.choiceFieldIsImage_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:hover::before{border-color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:focus::after,.choiceFieldIsIcon_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:hover::after,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:focus::after,.choiceFieldIsIcon_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:hover::after,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:focus::after,.choiceFieldIsImage_92027817 .fieldIsIcon_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:hover::after,.choiceFieldIsImage_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:focus::after,.choiceFieldIsImage_92027817 .fieldIsImage_92027817:not(.fieldIsDisabled_92027817).fieldIsChecked_92027817:hover::after{background-color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}.choiceFieldIsIcon_92027817{height:96px;width:96px}.choiceFieldIsIcon_92027817 .iconWrapper_92027817{font-size:32px;line-height:32px;height:32px}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817::-moz-focus-inner{border:0}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817::after{content:'';position:absolute;top:1px;right:1px;bottom:1px;left:1px;pointer-events:none;border:1px solid " }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817::-moz-focus-inner{border:0}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817::after{content:'';position:absolute;top:1px;right:1px;bottom:1px;left:1px;pointer-events:none;border:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817::-moz-focus-inner{border:0}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817::after{content:'';position:absolute;top:1px;right:1px;bottom:1px;left:1px;pointer-events:none;border:2px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsIcon_92027817::-moz-focus-inner,.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsImage_92027817::-moz-focus-inner{border:0}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsIcon_92027817,.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsImage_92027817{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsIcon_92027817::after,.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsImage_92027817::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsIcon_92027817::-moz-focus-inner,.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsImage_92027817::-moz-focus-inner{border:0}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsIcon_92027817,.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsImage_92027817{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsIcon_92027817::after,.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsImage_92027817::after{content:'';position:absolute;top:1px;right:1px;bottom:1px;left:1px;pointer-events:none;border:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsIcon_92027817::-moz-focus-inner,.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsImage_92027817::-moz-focus-inner{border:0}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsIcon_92027817,.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsImage_92027817{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsIcon_92027817::after,.ms-Fabric.is-focusVisible .choiceFieldIsInFocus_92027817.choiceFieldIsImage_92027817::after{content:'';position:absolute;top:1px;right:1px;bottom:1px;left:1px;pointer-events:none;border:3px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 194 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(195)); /***/ }, /* 195 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(196)); /***/ }, /* 196 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var TextField_1 = __webpack_require__(197); var ColorRectangle_1 = __webpack_require__(201); var ColorSlider_1 = __webpack_require__(205); var colors_1 = __webpack_require__(202); var Styling_1 = __webpack_require__(68); var stylesImport = __webpack_require__(204); var styles = stylesImport; var ColorPicker = (function (_super) { __extends(ColorPicker, _super); function ColorPicker(props) { var _this = _super.call(this, props) || this; _this.state = { color: colors_1.getColorFromString(props.color) }; return _this; } ColorPicker.prototype.componentWillReceiveProps = function (newProps) { if (newProps.color) { this._updateColor(colors_1.getColorFromString(newProps.color)); } }; ColorPicker.prototype.render = function () { var _this = this; var color = this.state.color; return (React.createElement("div", { className: Utilities_1.css('ms-ColorPicker', styles.root) }, React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-panel', styles.panel) }, React.createElement(ColorRectangle_1.ColorRectangle, { color: color, onSVChanged: this._onSVChanged }), React.createElement(ColorSlider_1.ColorSlider, { className: Utilities_1.css('is-hue', styles.colorSliderIsHue), minValue: 0, maxValue: colors_1.MAX_COLOR_HUE, value: color.h, onChanged: this._onHChanged }), !this.props.alphaSliderHidden && (React.createElement(ColorSlider_1.ColorSlider, { className: Utilities_1.css('is-alpha', styles.colorSliderIsAlpha), overlayStyle: { background: "linear-gradient(to right, transparent 0, " + color.str + " 100%)" }, minValue: 0, maxValue: 100, value: color.a, onChanged: this._onAChanged })), React.createElement("table", { className: 'ms-ColorPicker-table', cellPadding: '0', cellSpacing: '0' }, React.createElement("thead", null, React.createElement("tr", { className: Styling_1.FontClassNames.small }, React.createElement("td", null, "Hex"), React.createElement("td", null, "Red"), React.createElement("td", null, "Green"), React.createElement("td", null, "Blue"), !this.props.alphaSliderHidden && (React.createElement("td", null, "Alpha")))), React.createElement("tbody", null, React.createElement("tr", null, React.createElement("td", null, React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), value: color.hex, ref: function (ref) { return _this.hexText = ref; }, onBlur: this._onHexChanged })), React.createElement("td", { style: { width: '18%' } }, React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.r), ref: function (ref) { return _this.rText = ref; } })), React.createElement("td", { style: { width: '18%' } }, React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.g), ref: function (ref) { return _this.gText = ref; } })), React.createElement("td", { style: { width: '18%' } }, React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.b), ref: function (ref) { return _this.bText = ref; } })), !this.props.alphaSliderHidden && (React.createElement("td", { style: { width: '18%' } }, React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.a), ref: function (ref) { return _this.aText = ref; } }))))))))); }; ColorPicker.prototype._onSVChanged = function (s, v) { this._updateColor(colors_1.updateSV(this.state.color, s, v)); }; ColorPicker.prototype._onHChanged = function (h) { this._updateColor(colors_1.updateH(this.state.color, h)); }; ColorPicker.prototype._onAChanged = function (a) { this._updateColor(colors_1.updateA(this.state.color, a)); }; ColorPicker.prototype._onHexChanged = function () { this._updateColor(colors_1.getColorFromString('#' + this.hexText.value)); }; ColorPicker.prototype._onRGBAChanged = function () { this._updateColor(colors_1.getColorFromRGBA({ r: Number(this.rText.value), g: Number(this.gText.value), b: Number(this.bText.value), a: Number(this.aText.value) })); }; ColorPicker.prototype._updateColor = function (newColor) { var onColorChanged = this.props.onColorChanged; if (newColor.str !== this.state.color.str) { this.setState({ color: newColor }, function () { if (onColorChanged) { onColorChanged(newColor.str); } }); } }; return ColorPicker; }(Utilities_1.BaseComponent)); __decorate([ Utilities_1.autobind ], ColorPicker.prototype, "_onSVChanged", null); __decorate([ Utilities_1.autobind ], ColorPicker.prototype, "_onHChanged", null); __decorate([ Utilities_1.autobind ], ColorPicker.prototype, "_onAChanged", null); __decorate([ Utilities_1.autobind ], ColorPicker.prototype, "_onHexChanged", null); __decorate([ Utilities_1.autobind ], ColorPicker.prototype, "_onRGBAChanged", null); exports.ColorPicker = ColorPicker; /***/ }, /* 197 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(198)); /***/ }, /* 198 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(199)); /***/ }, /* 199 */ /***/ 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__(2); var Label_1 = __webpack_require__(189); var Icon_1 = __webpack_require__(141); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(200); var styles = stylesImport; var Styling_1 = __webpack_require__(68); var TextField = (function (_super) { __extends(TextField, _super); function TextField(props) { var _this = _super.call(this, props) || this; _this._warnDeprecations({ 'iconClass': 'iconProps' }); _this._warnMutuallyExclusive({ 'value': 'defaultValue' }); _this._id = Utilities_1.getId('TextField'); _this._descriptionId = Utilities_1.getId('TextFieldDescription'); _this.state = { value: props.value || props.defaultValue || '', isFocused: false, errorMessage: '' }; _this._onInputChange = _this._onInputChange.bind(_this); _this._onFocus = _this._onFocus.bind(_this); _this._onBlur = _this._onBlur.bind(_this); _this._delayedValidate = _this._async.debounce(_this._validate, _this.props.deferredValidationTime); _this._lastValidation = 0; _this._isDescriptionAvailable = false; return _this; } Object.defineProperty(TextField.prototype, "value", { /** * Gets the current value of the text field. */ get: function () { return this.state.value; }, enumerable: true, configurable: true }); TextField.prototype.componentDidMount = function () { this._isMounted = true; this._adjustInputHeight(); if (this.props.validateOnLoad) { this._validate(this.state.value); } }; TextField.prototype.componentWillReceiveProps = function (newProps) { var onBeforeChange = this.props.onBeforeChange; if (newProps.value !== undefined && newProps.value !== this.state.value) { if (onBeforeChange) { onBeforeChange(newProps.value); } this._latestValue = newProps.value; this.setState({ value: newProps.value, errorMessage: '' }); this._delayedValidate(newProps.value); } }; TextField.prototype.componentWillUnmount = function () { this._isMounted = false; }; TextField.prototype.render = function () { var _a = this.props, className = _a.className, description = _a.description, disabled = _a.disabled, iconClass = _a.iconClass, iconProps = _a.iconProps, label = _a.label, multiline = _a.multiline, required = _a.required, underlined = _a.underlined, borderless = _a.borderless, addonString = _a.addonString, _b = _a.onRenderAddon, onRenderAddon = _b === void 0 ? this._onRenderAddon : _b; var isFocused = this.state.isFocused; var errorMessage = this._errorMessage; this._isDescriptionAvailable = Boolean(description || errorMessage); var textFieldClassName = Utilities_1.css('ms-TextField', styles.root, className, (_c = {}, _c['is-required ' + styles.rootIsRequired] = required, _c['is-disabled ' + styles.rootIsDisabled] = disabled, _c['is-active ' + styles.rootIsActive] = isFocused, _c['ms-TextField--multiline ' + styles.rootIsMultiline] = multiline, _c['ms-TextField--underlined ' + styles.rootIsUnderlined] = underlined, _c['ms-TextField--borderless ' + styles.rootIsBorderless] = borderless, _c)); return (React.createElement("div", { className: textFieldClassName }, label && React.createElement(Label_1.Label, { htmlFor: this._id }, label), React.createElement("div", { className: Utilities_1.css(styles.fieldGroup, isFocused && styles.fieldGroupIsFocused) }, (addonString !== undefined || this.props.onRenderAddon) && (React.createElement("div", { className: Utilities_1.css(styles.fieldAddon) }, onRenderAddon(this.props, this._onRenderAddon))), multiline ? this._renderTextArea() : this._renderInput(), (iconClass || iconProps) && React.createElement(Icon_1.Icon, __assign({ className: Utilities_1.css(iconClass, styles.icon) }, iconProps))), this._isDescriptionAvailable && React.createElement("span", { id: this._descriptionId }, description && React.createElement("span", { className: Utilities_1.css('ms-TextField-description', styles.description) }, description), errorMessage && React.createElement("div", { "aria-live": 'assertive' }, React.createElement(Utilities_1.DelayedRender, null, React.createElement("p", { className: Utilities_1.css('ms-TextField-errorMessage', Styling_1.AnimationClassNames.slideDownIn20, styles.errorMessage), "data-automation-id": 'error-message' }, React.createElement(Icon_1.Icon, { iconName: 'error', className: styles.errorIcon }), errorMessage)))))); var _c; }; /** * Sets focus on the text field */ TextField.prototype.focus = function () { if (this._textElement) { this._textElement.focus(); } }; /** * Selects the text field */ TextField.prototype.select = function () { if (this._textElement) { this._textElement.select(); } }; /** * Sets the selection start of the text field to a specified value */ TextField.prototype.setSelectionStart = function (value) { if (this._textElement) { this._textElement.selectionStart = value; } }; /** * Sets the selection end of the text field to a specified value */ TextField.prototype.setSelectionEnd = function (value) { if (this._textElement) { this._textElement.selectionEnd = value; } }; /** * Sets the start and end positions of a selection in a text field. * @param start Index of the start of the selection. * @param end Index of the end of the selection. */ TextField.prototype.setSelectionRange = function (start, end) { if (this._textElement) { this._textElement.setSelectionRange(start, end); } }; TextField.prototype._onFocus = function (ev) { if (this.props.onFocus) { this.props.onFocus(ev); } this.setState({ isFocused: true }); if (this.props.validateOnFocusIn) { this._validate(this.state.value); } }; TextField.prototype._onBlur = function (ev) { if (this.props.onBlur) { this.props.onBlur(ev); } this.setState({ isFocused: false }); if (this.props.validateOnFocusOut) { this._validate(this.state.value); } }; TextField.prototype._onRenderAddon = function (props) { var addonString = props.addonString; return (React.createElement("span", { style: { paddingBottom: '1px' } }, addonString)); }; TextField.prototype._getTextElementClassName = function () { var errorMessage = this._errorMessage; var textFieldClassName; if (this.props.multiline && !this.props.resizable) { textFieldClassName = Utilities_1.css('ms-TextField-field ms-TextField-field--unresizable', styles.field, styles.fieldIsUnresizable); } else { textFieldClassName = Utilities_1.css('ms-TextField-field', styles.field); } return Utilities_1.css(textFieldClassName, this.props.inputClassName, (_a = {}, _a['ms-TextField-invalid ' + styles.invalid] = !!errorMessage, _a[styles.hasIcon] = !!this.props.iconClass, _a)); var _a; }; Object.defineProperty(TextField.prototype, "_errorMessage", { get: function () { var errorMessage = this.state.errorMessage; if (!errorMessage) { errorMessage = this.props.errorMessage; } return errorMessage; }, enumerable: true, configurable: true }); TextField.prototype._renderTextArea = function () { var textAreaProps = Utilities_1.getNativeProps(this.props, Utilities_1.textAreaProperties, ['defaultValue']); return (React.createElement("textarea", __assign({ id: this._id }, textAreaProps, { ref: this._resolveRef('_textElement'), value: this.state.value, onInput: this._onInputChange, onChange: this._onInputChange, className: this._getTextElementClassName(), "aria-describedby": this._isDescriptionAvailable ? this._descriptionId : null, "aria-invalid": !!this.state.errorMessage, "aria-label": this.props.ariaLabel, onFocus: this._onFocus, onBlur: this._onBlur }))); }; TextField.prototype._renderInput = function () { var inputProps = Utilities_1.getNativeProps(this.props, Utilities_1.inputProperties, ['defaultValue']); return (React.createElement("input", __assign({ type: 'text', id: this._id }, inputProps, { ref: this._resolveRef('_textElement'), value: this.state.value, onInput: this._onInputChange, onChange: this._onInputChange, className: this._getTextElementClassName(), "aria-label": this.props.ariaLabel, "aria-describedby": this._isDescriptionAvailable ? this._descriptionId : null, "aria-invalid": !!this.state.errorMessage, onFocus: this._onFocus, onBlur: this._onBlur }))); }; TextField.prototype._onInputChange = function (event) { var _this = this; var element = event.target; var value = element.value; // Avoid doing unnecessary work when the value has not changed. if (value === this._latestValue) { return; } this._latestValue = value; this.setState({ value: value, errorMessage: '' }, function () { _this._adjustInputHeight(); if (_this.props.onChanged) { _this.props.onChanged(value); } }); var _a = this.props, validateOnFocusIn = _a.validateOnFocusIn, validateOnFocusOut = _a.validateOnFocusOut; if (!(validateOnFocusIn || validateOnFocusOut)) { this._delayedValidate(value); } var onBeforeChange = this.props.onBeforeChange; onBeforeChange(value); }; TextField.prototype._validate = function (value) { var _this = this; // In case of _validate called multi-times during executing validate logic with promise return. if (this._latestValidateValue === value) { return; } this._latestValidateValue = value; var onGetErrorMessage = this.props.onGetErrorMessage; var result = onGetErrorMessage(value || ''); if (result !== undefined) { if (typeof result === 'string') { this.setState({ errorMessage: result }); this._notifyAfterValidate(value, result); } else { var currentValidation_1 = ++this._lastValidation; result.then(function (errorMessage) { if (_this._isMounted && currentValidation_1 === _this._lastValidation) { _this.setState({ errorMessage: errorMessage }); } _this._notifyAfterValidate(value, errorMessage); }); } } else { this._notifyAfterValidate(value, ''); } }; TextField.prototype._notifyAfterValidate = function (value, errorMessage) { if (this._isMounted && value === this.state.value && this.props.onNotifyValidationResult) { this.props.onNotifyValidationResult(errorMessage, value); } }; TextField.prototype._adjustInputHeight = function () { if (this._textElement && this.props.autoAdjustHeight && this.props.multiline) { var textField = this._textElement; textField.style.height = ''; var scrollHeight = textField.scrollHeight + 2; // +2 to avoid vertical scroll bars textField.style.height = scrollHeight + 'px'; } }; return TextField; }(Utilities_1.BaseComponent)); TextField.defaultProps = { multiline: false, resizable: true, autoAdjustHeight: false, underlined: false, borderless: false, onChanged: function () { }, onBeforeChange: function () { }, onNotifyValidationResult: function () { }, onGetErrorMessage: function () { return undefined; }, deferredValidationTime: 200, errorMessage: '', validateOnFocusIn: false, validateOnFocusOut: false, validateOnLoad: true, }; exports.TextField = TextField; /***/ }, /* 200 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_020eac03', screenReaderOnly: 'screenReaderOnly_020eac03', fieldGroup: 'fieldGroup_020eac03', fieldGroupIsFocused: 'fieldGroupIsFocused_020eac03', rootIsDisabled: 'rootIsDisabled_020eac03', fieldAddon: 'fieldAddon_020eac03', field: 'field_020eac03', hasIcon: 'hasIcon_020eac03', rootIsRequired: 'rootIsRequired_020eac03', rootIsActive: 'rootIsActive_020eac03', errorIcon: 'errorIcon_020eac03', icon: 'icon_020eac03', description: 'description_020eac03', rootIsBorderless: 'rootIsBorderless_020eac03', rootIsUnderlined: 'rootIsUnderlined_020eac03', rootIsMultiline: 'rootIsMultiline_020eac03', errorMessage: 'errorMessage_020eac03', invalid: 'invalid_020eac03', fieldIsUnresizable: 'fieldIsUnresizable_020eac03', hidden: 'hidden_020eac03', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_020eac03{box-sizing:border-box;box-shadow:none;margin:0;padding:0;margin-bottom:8px;position:relative}.screenReaderOnly_020eac03{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.fieldGroup_020eac03{border:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";height:32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;position:relative}.fieldGroup_020eac03:hover{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.fieldGroup_020eac03.fieldGroupIsFocused_020eac03{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.rootIsDisabled_020eac03>.fieldGroup_020eac03{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";pointer-events:none;cursor:default}@media screen and (-ms-high-contrast:active){.fieldGroup_020eac03.fieldGroupIsFocused_020eac03,.fieldGroup_020eac03:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.fieldGroup_020eac03.fieldGroupIsFocused_020eac03,.fieldGroup_020eac03:hover{border-color:#37006e}}.fieldGroup_020eac03::-ms-clear{display:none}.root_020eac03.rootIsDisabled_020eac03 .field{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";pointer-events:none;cursor:default}.fieldAddon_020eac03{background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 10px;line-height:1}.field_020eac03{box-sizing:border-box;box-shadow:none;margin:0;padding:0;font-size:14px;border-radius:0;border:none;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";padding:0 12px 0 12px;width:100%;text-overflow:ellipsis;outline:0}[dir=rtl] .field_020eac03{padding:0 12px 0 12px}.field_020eac03:active,.field_020eac03:focus,.field_020eac03:hover{outline:0}[dir=ltr] .field_020eac03.hasIcon_020eac03{padding-right:24px}[dir=rtl] .field_020eac03.hasIcon_020eac03{padding-left:24px}.field_020eac03[disabled]{background-color:transparent;border-color:transparent;pointer-events:none;cursor:default}.field_020eac03 .field_020eac03::-webkit-input-placeholder{color:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.field_020eac03 .field_020eac03:-ms-input-placeholder{color:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.field .field::-webkit-input-placeholder{color:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.field .field:-ms-input-placeholder{color:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.field_020eac03 .field_020eac03::placeholder{color:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.root_020eac03.rootIsRequired_020eac03 .ms-Label::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_020eac03.rootIsActive_020eac03{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.errorIcon_020eac03{vertical-align:middle;font-size:14px}html[dir=ltr] .errorIcon_020eac03{margin-right:5px}html[dir=rtl] .errorIcon_020eac03{margin-left:5px}.icon_020eac03{position:absolute;bottom:8px;top:auto}html[dir=ltr] .icon_020eac03{right:8px}html[dir=rtl] .icon_020eac03{left:8px}.description_020eac03{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:11px}.rootIsBorderless_020eac03 .fieldGroup_020eac03{border-color:transparent}.root_020eac03.rootIsUnderlined_020eac03{border-bottom:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";border-width:0;border-bottom-width:1px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.root_020eac03.rootIsUnderlined_020eac03:hover:not(.rootIsDisabled_020eac03){border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_020eac03.rootIsUnderlined_020eac03:hover:not(.rootIsDisabled_020eac03){border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_020eac03.rootIsUnderlined_020eac03:hover:not(.rootIsDisabled_020eac03){border-color:#37006e}}.root_020eac03.rootIsUnderlined_020eac03 .ms-Label{font-size:14px;line-height:22px;height:32px}[dir=ltr] .root_020eac03.rootIsUnderlined_020eac03 .ms-Label{margin-right:8px}[dir=rtl] .root_020eac03.rootIsUnderlined_020eac03 .ms-Label{margin-left:8px}[dir=ltr] .root_020eac03.rootIsUnderlined_020eac03 .ms-Label{padding-left:12px}[dir=rtl] .root_020eac03.rootIsUnderlined_020eac03 .ms-Label{padding-right:12px}.root_020eac03.rootIsUnderlined_020eac03 .fieldGroup_020eac03{-webkit-box-flex:1;-ms-flex:1 1 0;flex:1 1 0;border:0}[dir=ltr] .root_020eac03.rootIsUnderlined_020eac03 .fieldGroup_020eac03{text-align:left}[dir=rtl] .root_020eac03.rootIsUnderlined_020eac03 .fieldGroup_020eac03{text-align:right}.root_020eac03.rootIsUnderlined_020eac03.rootIsDisabled_020eac03{border-bottom-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.root_020eac03.rootIsUnderlined_020eac03.rootIsDisabled_020eac03 .ms-Label{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.root_020eac03.rootIsUnderlined_020eac03.rootIsDisabled_020eac03 .field_020eac03{background-color:transparent;color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.root_020eac03.rootIsUnderlined_020eac03.rootIsActive_020eac03{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_020eac03.rootIsUnderlined_020eac03.rootIsActive_020eac03{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_020eac03.rootIsUnderlined_020eac03.rootIsActive_020eac03{border-color:#37006e}}.root_020eac03.rootIsMultiline_020eac03 .fieldGroup_020eac03{min-height:60px;height:auto;display:-webkit-box;display:-ms-flexbox;display:flex}.root_020eac03.rootIsMultiline_020eac03 .field_020eac03{line-height:17px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding-top:6px;overflow:auto;width:100%}[dir=ltr] .root_020eac03.rootIsMultiline_020eac03 .field_020eac03.hasIcon_020eac03{padding-right:40px}[dir=rtl] .root_020eac03.rootIsMultiline_020eac03 .field_020eac03.hasIcon_020eac03{padding-left:40px}.errorMessage_020eac03{font-size:12px;font-weight:400;color:" }, { "theme": "redDark", "defaultValue": "#a80000" }, { "rawString": ";margin:0;padding-top:5px}.invalid_020eac03,.invalid_020eac03:focus,.invalid_020eac03:hover{border-color:" }, { "theme": "redDark", "defaultValue": "#a80000" }, { "rawString": "}[dir=ltr] .root_020eac03.rootIsUnderlined_020eac03 .ms-Label{padding-left:12px}[dir=rtl] .root_020eac03.rootIsUnderlined_020eac03 .ms-Label{padding-right:12px}[dir=ltr] .root_020eac03.rootIsUnderlined_020eac03 .ms-Label{padding-right:0}[dir=rtl] .root_020eac03.rootIsUnderlined_020eac03 .ms-Label{padding-left:0}html[dir=ltr] .root_020eac03.rootIsUnderlined_020eac03 .field_020eac03{text-align:left}html[dir=rtl] .root_020eac03.rootIsUnderlined_020eac03 .field_020eac03{text-align:right}.root_020eac03.rootIsMultiline_020eac03 .icon_020eac03{padding-bottom:8px;-webkit-box-align:end;-ms-flex-align:end;-ms-grid-row-align:flex-end;align-items:flex-end}[dir=ltr] .root_020eac03.rootIsMultiline_020eac03 .icon_020eac03{padding-right:24px}[dir=rtl] .root_020eac03.rootIsMultiline_020eac03 .icon_020eac03{padding-left:24px}.root_020eac03.rootIsMultiline_020eac03 .field_020eac03.fieldIsUnresizable_020eac03{resize:none}.hidden_020eac03{display:none}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 201 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var colors_1 = __webpack_require__(202); var stylesImport = __webpack_require__(204); var styles = stylesImport; var ColorRectangle = (function (_super) { __extends(ColorRectangle, _super); function ColorRectangle(props) { var _this = _super.call(this, props) || this; var color = _this.props.color; _this.state = { isAdjusting: false, origin: null, color: color, fullColorString: colors_1.getFullColorString(color) }; return _this; } ColorRectangle.prototype.componentWillUnmount = function () { this._events.dispose(); }; ColorRectangle.prototype.componentWillReceiveProps = function (newProps) { var color = newProps.color; this.setState({ color: color, fullColorString: colors_1.getFullColorString(color) }); }; ColorRectangle.prototype.render = function () { var minSize = this.props.minSize; var _a = this.state, color = _a.color, fullColorString = _a.fullColorString; return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-ColorPicker-colorRect', styles.colorRect), style: { minWidth: minSize, minHeight: minSize, backgroundColor: fullColorString }, onMouseDown: this._onMouseDown }, React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-light', styles.light) }), React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-dark', styles.dark) }), React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-thumb', styles.thumb), style: { left: color.s + '%', top: (colors_1.MAX_COLOR_VALUE - color.v) + '%', backgroundColor: color.str } }))); }; ColorRectangle.prototype._onMouseDown = function (ev) { this._events.on(window, 'mousemove', this._onMouseMove, true); this._events.on(window, 'mouseup', this._onMouseUp, true); this._onMouseMove(ev); }; ColorRectangle.prototype._onMouseMove = function (ev) { var _a = this.props, color = _a.color, onSVChanged = _a.onSVChanged; var rectSize = this.refs.root.getBoundingClientRect(); var sPercentage = (ev.clientX - rectSize.left) / rectSize.width; var vPercentage = (ev.clientY - rectSize.top) / rectSize.height; var newColor = Utilities_1.assign({}, color, { s: Math.min(colors_1.MAX_COLOR_SATURATION, Math.max(0, sPercentage * colors_1.MAX_COLOR_SATURATION)), v: Math.min(colors_1.MAX_COLOR_VALUE, Math.max(0, colors_1.MAX_COLOR_VALUE - (vPercentage * colors_1.MAX_COLOR_VALUE))), }); newColor.hex = colors_1.hsv2hex(newColor.h, newColor.s, newColor.v); newColor.str = newColor.a === 100 ? '#' + newColor.hex : "rgba(" + newColor.r + ", " + newColor.g + ", " + newColor.b + ", " + newColor.a / 100 + ")"; this.setState({ isAdjusting: true, color: newColor }); if (onSVChanged) { onSVChanged(newColor.s, newColor.v); } ev.preventDefault(); ev.stopPropagation(); }; ColorRectangle.prototype._onMouseUp = function (ev) { this._events.off(); this.setState({ isAdjusting: false, origin: null }); }; return ColorRectangle; }(Utilities_1.BaseComponent)); ColorRectangle.defaultProps = { minSize: 220 }; __decorate([ Utilities_1.autobind ], ColorRectangle.prototype, "_onMouseDown", null); __decorate([ Utilities_1.autobind ], ColorRectangle.prototype, "_onMouseMove", null); __decorate([ Utilities_1.autobind ], ColorRectangle.prototype, "_onMouseUp", null); exports.ColorRectangle = ColorRectangle; /***/ }, /* 202 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Utilities_1 = __webpack_require__(10); var colorValues_1 = __webpack_require__(203); exports.MAX_COLOR_SATURATION = 100; exports.MAX_COLOR_HUE = 359; exports.MAX_COLOR_VALUE = 100; exports.MAX_COLOR_RGBA = 255; function cssColor(color) { return _named(color) || _hex3(color) || _hex6(color) || _rgb(color) || _rgba(color) || _hsl(color) || _hsla(color); } exports.cssColor = cssColor; function rgb2hex(r, g, b) { return [ _numberToPaddedHex(r), _numberToPaddedHex(g), _numberToPaddedHex(b) ].join(''); } exports.rgb2hex = rgb2hex; function hsv2hex(h, s, v) { var _a = hsv2rgb(h, s, v), r = _a.r, g = _a.g, b = _a.b; return rgb2hex(r, g, b); } exports.hsv2hex = hsv2hex; function rgb2hsv(r, g, b) { var h; var s; var v; var max = Math.max(r, g, b); var min = Math.min(r, g, b); var delta = max - min; // hue if (delta === 0) { h = 0; } else if (r === max) { h = ((g - b) / delta) % 6; } else if (g === max) { h = (b - r) / delta + 2; } else if (b === max) { h = (r - g) / delta + 4; } h = Math.round(h * 60); if (h < 0) { h += 360; } // saturation s = Math.round((max === 0 ? 0 : (delta / max)) * 100); // value v = Math.round(max / 255 * 100); return { h: h, s: s, v: v }; } exports.rgb2hsv = rgb2hsv; function hsl2hsv(h, s, l) { s *= ((l < 50) ? l : (100 - l)) / 100; return { h: h, s: 2 * s / (l + s) * 100, v: l + s }; } exports.hsl2hsv = hsl2hsv; function hsv2hsl(h, s, v) { s /= exports.MAX_COLOR_SATURATION; v /= exports.MAX_COLOR_VALUE; var l = (2 - s) * v; var sl = s * v; sl /= (l <= 1) ? l : 2 - l; sl = sl || 0; l /= 2; return { h: h, s: sl * 100, l: l * 100 }; } exports.hsv2hsl = hsv2hsl; function hsl2rgb(h, s, l) { var hsv = hsl2hsv(h, s, l); return hsv2rgb(hsv.h, hsv.s, hsv.v); } exports.hsl2rgb = hsl2rgb; function hsv2rgb(h, s, v) { s = s / 100; v = v / 100; var rgb = []; var c = v * s; var hh = h / 60; var x = c * (1 - Math.abs(hh % 2 - 1)); var m = v - c; switch (Math.floor(hh)) { case 0: rgb = [c, x, 0]; break; case 1: rgb = [x, c, 0]; break; case 2: rgb = [0, c, x]; break; case 3: rgb = [0, x, c]; break; case 4: rgb = [x, 0, c]; break; case 5: rgb = [c, 0, x]; break; } return { r: Math.round(exports.MAX_COLOR_RGBA * (rgb[0] + m)), g: Math.round(exports.MAX_COLOR_RGBA * (rgb[1] + m)), b: Math.round(exports.MAX_COLOR_RGBA * (rgb[2] + m)) }; } exports.hsv2rgb = hsv2rgb; function getColorFromString(color) { var _a = cssColor(color), a = _a.a, b = _a.b, g = _a.g, r = _a.r; var _b = rgb2hsv(r, g, b), h = _b.h, s = _b.s, v = _b.v; return { a: a, b: b, g: g, h: h, hex: rgb2hex(r, g, b), r: r, s: s, str: color, v: v }; } exports.getColorFromString = getColorFromString; function getColorFromRGBA(rgba) { var a = rgba.a, b = rgba.b, g = rgba.g, r = rgba.r; var _a = rgb2hsv(r, g, b), h = _a.h, s = _a.s, v = _a.v; var hex = rgb2hex(r, g, b); return { a: a, b: b, g: g, h: h, hex: hex, r: r, s: s, str: (a === 100) ? "#" + hex : "rgba(" + r + ", " + g + ", " + b + ", " + a / 100 + ")", v: v }; } exports.getColorFromRGBA = getColorFromRGBA; function getFullColorString(color) { return "#" + hsv2hex(color.h, exports.MAX_COLOR_SATURATION, exports.MAX_COLOR_VALUE); } exports.getFullColorString = getFullColorString; function updateSV(color, s, v) { var _a = hsv2rgb(color.h, s, v), r = _a.r, g = _a.g, b = _a.b; var hex = rgb2hex(r, g, b); return { a: color.a, b: b, g: g, h: color.h, hex: hex, r: r, s: s, str: (color.a === 100) ? "#" + hex : "rgba(" + r + ", " + g + ", " + b + ", " + color.a / 100 + ")", v: v }; } exports.updateSV = updateSV; function updateH(color, h) { var _a = hsv2rgb(h, color.s, color.v), r = _a.r, g = _a.g, b = _a.b; var hex = rgb2hex(r, g, b); return { a: color.a, b: b, g: g, h: h, hex: hex, r: r, s: color.s, str: (color.a === 100) ? "#" + hex : "rgba(" + r + ", " + g + ", " + b + ", " + color.a / 100 + ")", v: color.v }; } exports.updateH = updateH; function updateA(color, a) { return Utilities_1.assign({}, color, { a: a, str: (a === 100) ? "#" + color.hex : "rgba(" + color.r + ", " + color.g + ", " + color.b + ", " + a / 100 + ")" }); } exports.updateA = updateA; function _numberToPaddedHex(num) { var hex = num.toString(16); return hex.length === 1 ? '0' + hex : hex; } function _named(str) { var c = colorValues_1.COLOR_VALUES[str.toLowerCase()]; if (c) { return { r: c[0], g: c[1], b: c[2], a: 100 }; } } function _rgb(str) { if (0 === str.indexOf('rgb(')) { str = str.match(/rgb\(([^)]+)\)/)[1]; var parts = str.split(/ *, */).map(Number); return { r: parts[0], g: parts[1], b: parts[2], a: 100 }; } } function _rgba(str) { if (str.indexOf('rgba(') === 0) { str = str.match(/rgba\(([^)]+)\)/)[1]; var parts = str.split(/ *, */).map(Number); return { r: parts[0], g: parts[1], b: parts[2], a: parts[3] * 100 }; } } function _hex6(str) { if ('#' === str[0] && 7 === str.length) { return { r: parseInt(str.slice(1, 3), 16), g: parseInt(str.slice(3, 5), 16), b: parseInt(str.slice(5, 7), 16), a: 100 }; } } function _hex3(str) { if ('#' === str[0] && 4 === str.length) { return { r: parseInt(str[1] + str[1], 16), g: parseInt(str[2] + str[2], 16), b: parseInt(str[3] + str[3], 16), a: 100 }; } } function _hsl(str) { if (str.indexOf('hsl(') === 0) { str = str.match(/hsl\(([^)]+)\)/)[1]; var parts = str.split(/ *, */); var h = parseInt(parts[0], 10); var s = parseInt(parts[1], 10); var l = parseInt(parts[2], 10); var rgba = hsl2rgb(h, s, l); rgba.a = 100; return rgba; } } function _hsla(str) { if (str.indexOf('hsla(') === 0) { str = str.match(/hsla\(([^)]+)\)/)[1]; var parts = str.split(/ *, */); var h = parseInt(parts[0], 10); var s = parseInt(parts[1], 10); var l = parseInt(parts[2], 10); var a = parseInt(parts[3], 10) * 100; var rgba = hsl2rgb(h, s, l); rgba.a = a; return rgba; } } /***/ }, /* 203 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.COLOR_VALUES = { aliceblue: [240, 248, 255], antiquewhite: [250, 235, 215], aqua: [0, 255, 255], aquamarine: [127, 255, 212], azure: [240, 255, 255], beige: [245, 245, 220], bisque: [255, 228, 196], black: [0, 0, 0], blanchedalmond: [255, 235, 205], blue: [0, 0, 255], blueviolet: [138, 43, 226], brown: [165, 42, 42], burlywood: [222, 184, 135], cadetblue: [95, 158, 160], chartreuse: [127, 255, 0], chocolate: [210, 105, 30], coral: [255, 127, 80], cornflowerblue: [100, 149, 237], cornsilk: [255, 248, 220], crimson: [220, 20, 60], cyan: [0, 255, 255], darkblue: [0, 0, 139], darkcyan: [0, 139, 139], darkgoldenrod: [184, 132, 11], darkgray: [169, 169, 169], darkgreen: [0, 100, 0], darkgrey: [169, 169, 169], darkkhaki: [189, 183, 107], darkmagenta: [139, 0, 139], darkolivegreen: [85, 107, 47], darkorange: [255, 140, 0], darkorchid: [153, 50, 204], darkred: [139, 0, 0], darksalmon: [233, 150, 122], darkseagreen: [143, 188, 143], darkslateblue: [72, 61, 139], darkslategray: [47, 79, 79], darkslategrey: [47, 79, 79], darkturquoise: [0, 206, 209], darkviolet: [148, 0, 211], deeppink: [255, 20, 147], deepskyblue: [0, 191, 255], dimgray: [105, 105, 105], dimgrey: [105, 105, 105], dodgerblue: [30, 144, 255], firebrick: [178, 34, 34], floralwhite: [255, 255, 240], forestgreen: [34, 139, 34], fuchsia: [255, 0, 255], gainsboro: [220, 220, 220], ghostwhite: [248, 248, 255], gold: [255, 215, 0], goldenrod: [218, 165, 32], gray: [128, 128, 128], green: [0, 128, 0], greenyellow: [173, 255, 47], grey: [128, 128, 128], honeydew: [240, 255, 240], hotpink: [255, 105, 180], indianred: [205, 92, 92], indigo: [75, 0, 130], ivory: [255, 255, 240], khaki: [240, 230, 140], lavender: [230, 230, 250], lavenderblush: [255, 240, 245], lawngreen: [124, 252, 0], lemonchiffon: [255, 250, 205], lightblue: [173, 216, 230], lightcoral: [240, 128, 128], lightcyan: [224, 255, 255], lightgoldenrodyellow: [250, 250, 210], lightgray: [211, 211, 211], lightgreen: [144, 238, 144], lightgrey: [211, 211, 211], lightpink: [255, 182, 193], lightsalmon: [255, 160, 122], lightseagreen: [32, 178, 170], lightskyblue: [135, 206, 250], lightslategray: [119, 136, 153], lightslategrey: [119, 136, 153], lightsteelblue: [176, 196, 222], lightyellow: [255, 255, 224], lime: [0, 255, 0], limegreen: [50, 205, 50], linen: [250, 240, 230], magenta: [255, 0, 255], maroon: [128, 0, 0], mediumaquamarine: [102, 205, 170], mediumblue: [0, 0, 205], mediumorchid: [186, 85, 211], mediumpurple: [147, 112, 219], mediumseagreen: [60, 179, 113], mediumslateblue: [123, 104, 238], mediumspringgreen: [0, 250, 154], mediumturquoise: [72, 209, 204], mediumvioletred: [199, 21, 133], midnightblue: [25, 25, 112], mintcream: [245, 255, 250], mistyrose: [255, 228, 225], moccasin: [255, 228, 181], navajowhite: [255, 222, 173], navy: [0, 0, 128], oldlace: [253, 245, 230], olive: [128, 128, 0], olivedrab: [107, 142, 35], orange: [255, 165, 0], orangered: [255, 69, 0], orchid: [218, 112, 214], palegoldenrod: [238, 232, 170], palegreen: [152, 251, 152], paleturquoise: [175, 238, 238], palevioletred: [219, 112, 147], papayawhip: [255, 239, 213], peachpuff: [255, 218, 185], peru: [205, 133, 63], pink: [255, 192, 203], plum: [221, 160, 203], powderblue: [176, 224, 230], purple: [128, 0, 128], rebeccapurple: [102, 51, 153], red: [255, 0, 0], rosybrown: [188, 143, 143], royalblue: [65, 105, 225], saddlebrown: [139, 69, 19], salmon: [250, 128, 114], sandybrown: [244, 164, 96], seagreen: [46, 139, 87], seashell: [255, 245, 238], sienna: [160, 82, 45], silver: [192, 192, 192], skyblue: [135, 206, 235], slateblue: [106, 90, 205], slategray: [119, 128, 144], slategrey: [119, 128, 144], snow: [255, 255, 250], springgreen: [0, 255, 127], steelblue: [70, 130, 180], tan: [210, 180, 140], teal: [0, 128, 128], thistle: [216, 191, 216], tomato: [255, 99, 71], turquoise: [64, 224, 208], violet: [238, 130, 238], wheat: [245, 222, 179], white: [255, 255, 255], whitesmoke: [245, 245, 245], yellow: [255, 255, 0], yellowgreen: [154, 205, 5] }; /***/ }, /* 204 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_d414ad46', panel: 'panel_d414ad46', colorRect: 'colorRect_d414ad46', rectContainer: 'rectContainer_d414ad46', capture: 'capture_d414ad46', rectContainerIsAdjusting: 'rectContainerIsAdjusting_d414ad46', thumb: 'thumb_d414ad46', thumbIsSlider: 'thumbIsSlider_d414ad46', light: 'light_d414ad46', dark: 'dark_d414ad46', slider: 'slider_d414ad46', colorSliderIsHue: 'colorSliderIsHue_d414ad46', colorSliderIsAlpha: 'colorSliderIsAlpha_d414ad46', sliderOverlay: 'sliderOverlay_d414ad46', input: 'input_d414ad46', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_d414ad46{position:relative;max-width:300px}.panel_d414ad46{padding:16px}.colorRect_d414ad46{position:relative;margin-bottom:10px}.rectContainer_d414ad46{position:relative}.capture_d414ad46{position:absolute;left:0;top:0;bottom:0;right:0;background:rgba(255,0,0,.1)}.rectContainer_d414ad46.rectContainerIsAdjusting_d414ad46 .capture_d414ad46{position:fixed}.thumb_d414ad46{position:absolute;width:20px;height:20px;background:#fff;border:1px solid rgba(255,255,255,.8);border-radius:50%;box-shadow:0 0 15px -5px #000;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.thumb_d414ad46.thumbIsSlider_d414ad46{top:50%}.light_d414ad46{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(to right,#fff 0,transparent 100%)}.dark_d414ad46{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(to bottom,transparent 0,#000 100%)}.slider_d414ad46{position:relative;height:20px;margin-bottom:5px;border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";box-sizing:border-box}.slider_d414ad46.colorSliderIsHue_d414ad46{background:linear-gradient(to left,red 0,#f09 10%,#cd00ff 20%,#3200ff 30%,#06f 40%,#00fffd 50%,#0f6 60%,#35ff00 70%,#cdff00 80%,#f90 90%,red 100%)}.slider_d414ad46.colorSliderIsAlpha_d414ad46{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)}.sliderOverlay_d414ad46{content:'';position:absolute;left:0;right:0;top:0;bottom:0}.input_d414ad46{width:100%;border:none;box-sizing:border-box;height:30px}.input_d414ad46.ms-TextField{padding-right:2px}.input_d414ad46 .input_d414ad46.ms-TextField-field{min-width:auto;padding:5px}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 205 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(204); var styles = stylesImport; var ColorSlider = (function (_super) { __extends(ColorSlider, _super); function ColorSlider(props) { var _this = _super.call(this, props) || this; var value = _this.props.value; _this.state = { isAdjusting: false, origin: null, currentValue: value }; return _this; } ColorSlider.prototype.componentWillReceiveProps = function (newProps) { if (newProps && newProps.value) { this.setState({ currentValue: newProps.value }); } }; ColorSlider.prototype.render = function () { var _a = this.props, className = _a.className, minValue = _a.minValue, maxValue = _a.maxValue, overlayStyle = _a.overlayStyle; var _b = this.state, currentValue = _b.currentValue, isAdjusting = _b.isAdjusting; var currentPercentage = 100 * (currentValue - minValue) / (maxValue - minValue); return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-ColorPicker-slider', styles.slider, className, { 'is-adjusting': isAdjusting }), onMouseDown: this._onMouseDown }, React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-sliderOverlay', styles.sliderOverlay), style: overlayStyle }), React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-thumb is-slider', styles.thumb, styles.thumbIsSlider), style: { left: currentPercentage + '%' } }))); }; ColorSlider.prototype._onMouseDown = function (ev) { this._events.on(window, 'mousemove', this._onMouseMove, true); this._events.on(window, 'mouseup', this._onMouseUp, true); this._onMouseMove(ev); }; ColorSlider.prototype._onMouseMove = function (ev) { var _a = this.props, onChanged = _a.onChanged, minValue = _a.minValue, maxValue = _a.maxValue; var rectSize = this.refs.root.getBoundingClientRect(); var currentPercentage = (ev.clientX - rectSize.left) / rectSize.width; var newValue = Math.min(maxValue, Math.max(minValue, currentPercentage * maxValue)); this.setState({ isAdjusting: true, currentValue: newValue }); if (onChanged) { onChanged(newValue); } ev.preventDefault(); ev.stopPropagation(); }; ColorSlider.prototype._onMouseUp = function (ev) { this._events.off(); this.setState({ isAdjusting: false, origin: null }); }; return ColorSlider; }(Utilities_1.BaseComponent)); ColorSlider.defaultProps = { minValue: 0, maxValue: 100, thumbColor: 'inherit', value: 0 }; __decorate([ Utilities_1.autobind ], ColorSlider.prototype, "_onMouseDown", null); __decorate([ Utilities_1.autobind ], ColorSlider.prototype, "_onMouseMove", null); __decorate([ Utilities_1.autobind ], ColorSlider.prototype, "_onMouseUp", null); exports.ColorSlider = ColorSlider; /***/ }, /* 206 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(207)); /***/ }, /* 207 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(208)); /***/ }, /* 208 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var FocusZone_1 = __webpack_require__(50); var ContextualMenu_1 = __webpack_require__(54); var DirectionalHint_1 = __webpack_require__(58); var Icon_1 = __webpack_require__(141); var Styling_1 = __webpack_require__(68); var stylesImport = __webpack_require__(209); var styles = stylesImport; var OVERFLOW_KEY = 'overflow'; var OVERFLOW_WIDTH = 41.5; var CommandBar = (function (_super) { __extends(CommandBar, _super); function CommandBar(props) { var _this = _super.call(this, props) || this; _this.state = _this._getStateFromProps(props); _this._id = Utilities_1.getId('CommandBar'); return _this; } CommandBar.prototype.componentDidMount = function () { this._updateItemMeasurements(); this._updateRenderedItems(); this._events.on(window, 'resize', this._updateRenderedItems); }; CommandBar.prototype.componentWillReceiveProps = function (nextProps) { this.setState(this._getStateFromProps(nextProps)); this._commandItemWidths = null; }; CommandBar.prototype.componentDidUpdate = function (prevProps, prevStates) { if (!this._commandItemWidths) { this._updateItemMeasurements(); this._updateRenderedItems(); } }; CommandBar.prototype.render = function () { var _this = this; var _a = this.props, isSearchBoxVisible = _a.isSearchBoxVisible, searchPlaceholderText = _a.searchPlaceholderText, className = _a.className; var _b = this.state, renderedItems = _b.renderedItems, contextualMenuProps = _b.contextualMenuProps, expandedMenuItemKey = _b.expandedMenuItemKey, expandedMenuId = _b.expandedMenuId, renderedOverflowItems = _b.renderedOverflowItems, contextualMenuTarget = _b.contextualMenuTarget, renderedFarItems = _b.renderedFarItems; var searchBox; if (isSearchBoxVisible) { searchBox = (React.createElement("div", { className: Utilities_1.css('ms-CommandBarSearch', styles.search), ref: 'searchSurface' }, React.createElement("input", { className: Utilities_1.css('ms-CommandBarSearch-input', styles.searchInput), type: 'text', placeholder: searchPlaceholderText }), React.createElement("div", { className: Utilities_1.css('ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper', styles.searchIconWrapper, styles.searchIconSearchWrapper) }, React.createElement(Icon_1.Icon, { iconName: 'search' })), React.createElement("div", { className: Utilities_1.css('ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconClearWrapper', Styling_1.FontClassNames.small, styles.searchIconWrapper, styles.searchIconClearWrapper) }, React.createElement(Icon_1.Icon, { iconName: 'cancel' })))); } return (React.createElement("div", { className: Utilities_1.css('ms-CommandBar', styles.root, className), ref: 'commandBarRegion' }, searchBox, React.createElement(FocusZone_1.FocusZone, { ref: 'focusZone', direction: FocusZone_1.FocusZoneDirection.horizontal, role: 'menubar' }, React.createElement("div", { className: Utilities_1.css('ms-CommandBar-primaryCommands', styles.primaryCommands), ref: 'commandSurface' }, renderedItems.map(function (item, index) { return (_this._renderItemInCommandBar(item, index, expandedMenuItemKey)); }).concat((renderedOverflowItems && renderedOverflowItems.length) ? [ React.createElement("div", { className: Utilities_1.css('ms-CommandBarItem', styles.item), key: OVERFLOW_KEY, ref: OVERFLOW_KEY }, React.createElement("button", { type: 'button', id: this._id + OVERFLOW_KEY, className: Utilities_1.css('ms-CommandBarItem-link', styles.itemLink, (_c = {}, _c['is-expanded ' + styles.itemLinkIsExpanded] = (expandedMenuItemKey === OVERFLOW_KEY), _c)), onClick: this._onOverflowClick, role: 'menuitem', "aria-label": this.props.elipisisAriaLabel || '', "aria-haspopup": true, "data-automation-id": 'commandBarOverflow' }, React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-CommandBarItem-overflow', styles.itemOverflow), iconName: 'more' }))) ] : [])), React.createElement("div", { className: Utilities_1.css('ms-CommandBar-sideCommands', styles.sideCommands), ref: 'farCommandSurface' }, renderedFarItems.map(function (item, index) { return (_this._renderItemInCommandBar(item, index, expandedMenuItemKey, true)); }))), (contextualMenuProps) ? (React.createElement(ContextualMenu_1.ContextualMenu, __assign({ className: Utilities_1.css('ms-CommandBar-menuHost'), isBeakVisible: true, directionalHint: DirectionalHint_1.DirectionalHint.bottomAutoEdge }, contextualMenuProps, { targetElement: contextualMenuTarget, labelElementId: expandedMenuId, onDismiss: this._onContextMenuDismiss }))) : (null))); var _c; }; CommandBar.prototype.focus = function () { this.refs.focusZone.focus(); }; CommandBar.prototype._renderItemInCommandBar = function (item, index, expandedMenuItemKey, isFarItem) { var _this = this; if (item.onRender) { return React.createElement("div", { className: Utilities_1.css('ms-CommandBarItem', styles.item, item.className), key: item.key, ref: item.key }, item.onRender(item)); } var itemKey = item.key || String(index); var isLink = item.onClick || ContextualMenu_1.hasSubmenuItems(item); var className = Utilities_1.css(isLink ? ('ms-CommandBarItem-link ' + styles.itemLink) : ('ms-CommandBarItem-text ' + styles.itemText), !item.name && ('ms-CommandBarItem--noName ' + styles.itemLinkIsNoName), (expandedMenuItemKey === item.key) && ('is-expanded ' + styles.itemLinkIsExpanded)); var hasIcon = !!item.icon || !!item.iconProps; return React.createElement("div", { className: Utilities_1.css('ms-CommandBarItem', styles.item, item.className), key: itemKey, ref: itemKey }, (function () { if (isLink) { return React.createElement("button", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.buttonProperties), { id: _this._id + item.key, className: className, onClick: function (ev) { return _this._onItemClick(ev, item); }, "data-command-key": index, "aria-haspopup": ContextualMenu_1.hasSubmenuItems(item), role: 'menuitem', "aria-label": item.ariaLabel || item.name }), (hasIcon) ? _this._renderIcon(item) : (null), (!!item.name) && (React.createElement("span", { className: Utilities_1.css('ms-CommandBarItem-commandText', styles.itemCommandText) }, item.name)), ContextualMenu_1.hasSubmenuItems(item) ? (React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-CommandBarItem-chevronDown', styles.itemChevronDown), iconName: 'chevronDown' })) : (null)); } else if (item.href) { return React.createElement("a", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.anchorProperties), { id: _this._id + item.key, className: className, href: item.href, "data-command-key": index, "aria-haspopup": ContextualMenu_1.hasSubmenuItems(item), role: 'menuitem', "aria-label": item.ariaLabel || item.name }), (hasIcon) ? _this._renderIcon(item) : (null), (!!item.name) && (React.createElement("span", { className: Utilities_1.css('ms-CommandBarItem-commandText', styles.itemCommandText) }, item.name))); } else { return React.createElement("div", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.divProperties), { id: _this._id + item.key, className: className, "data-command-key": index, "aria-haspopup": ContextualMenu_1.hasSubmenuItems(item) }), (hasIcon) ? _this._renderIcon(item) : (null), React.createElement("span", { className: Utilities_1.css('ms-CommandBarItem-commandText', styles.itemCommandText), "aria-hidden": 'true', role: 'presentation' }, item.name)); } })()); }; CommandBar.prototype._renderIcon = function (item) { // Only present to allow continued use of item.icon which is deprecated. var iconProps = item.iconProps ? item.iconProps : { iconName: item.icon }; // Use the default icon color for the known icon names var iconColorClassName = iconProps.iconName === 'None' ? '' : ('ms-CommandBarItem-iconColor ' + styles.itemIconColor); var iconClassName = Utilities_1.css('ms-CommandBarItem-icon', styles.itemIcon, iconColorClassName, iconProps.className); return React.createElement(Icon_1.Icon, __assign({}, iconProps, { className: iconClassName })); }; CommandBar.prototype._updateItemMeasurements = function () { // the generated width for overflow is 35 in chrome, 38 in IE, but the actual value is 41.5 if (this.refs[OVERFLOW_KEY] || (this.props.overflowItems && this.props.overflowItems.length)) { this._overflowWidth = OVERFLOW_WIDTH; } else { this._overflowWidth = 0; } if (!this._commandItemWidths) { this._commandItemWidths = {}; } for (var i = 0; i < this.props.items.length; i++) { var item = this.props.items[i]; if (!this._commandItemWidths[item.key]) { var el = this.refs[item.key]; if (el) { this._commandItemWidths[item.key] = el.getBoundingClientRect().width; } } } }; CommandBar.prototype._updateRenderedItems = function () { var _a = this.props, items = _a.items, overflowItems = _a.overflowItems; var commandSurface = this.refs.commandSurface; var farCommandSurface = this.refs.farCommandSurface; var commandBarRegion = this.refs.commandBarRegion; var searchSurface = this.refs.searchSurface; var renderedItems = [].concat(items); var renderedOverflowItems = overflowItems; var consumedWidth = 0; var isOverflowVisible = overflowItems && overflowItems.length; var style = window.getComputedStyle(commandSurface); var availableWidth = commandBarRegion.clientWidth - parseInt(style.marginLeft, 10) - parseInt(style.marginRight, 10); if (searchSurface) { availableWidth -= searchSurface.getBoundingClientRect().width; } if (farCommandSurface) { availableWidth -= farCommandSurface.getBoundingClientRect().width; } if (isOverflowVisible) { availableWidth -= this._overflowWidth; } for (var i = 0; i < renderedItems.length; i++) { var item = renderedItems[i]; var itemWidth = this._commandItemWidths[item.key]; if ((consumedWidth + itemWidth) >= availableWidth) { if (i > 0 && !isOverflowVisible && (availableWidth - consumedWidth) < OVERFLOW_WIDTH) { i--; } renderedOverflowItems = renderedItems.splice(i).concat(overflowItems); break; } else { consumedWidth += itemWidth; } } var renderedContextualMenuProps = this._getContextualMenuPropsAfterUpdate(renderedItems.concat(this.state.renderedFarItems), renderedOverflowItems); this.setState({ renderedItems: renderedItems, renderedOverflowItems: renderedOverflowItems, expandedMenuItemKey: renderedContextualMenuProps ? this.state.expandedMenuItemKey : null, contextualMenuProps: renderedContextualMenuProps, contextualMenuTarget: renderedContextualMenuProps ? this.state.contextualMenuTarget : null }); }; CommandBar.prototype._onItemClick = function (ev, item) { if (item.key === this.state.expandedMenuItemKey || !ContextualMenu_1.hasSubmenuItems(item)) { this._onContextMenuDismiss(); } else { this.setState({ expandedMenuId: ev.currentTarget.id, expandedMenuItemKey: item.key, contextualMenuProps: this._getContextualMenuPropsFromItem(item), contextualMenuTarget: ev.currentTarget }); } if (item.onClick) { item.onClick(ev, item); } }; CommandBar.prototype._onOverflowClick = function (ev) { if (this.state.expandedMenuItemKey === OVERFLOW_KEY) { this._onContextMenuDismiss(); } else { this.setState({ expandedMenuId: ev.currentTarget.id, expandedMenuItemKey: OVERFLOW_KEY, contextualMenuProps: { items: this.state.renderedOverflowItems }, contextualMenuTarget: ev.currentTarget }); } }; CommandBar.prototype._onContextMenuDismiss = function (ev) { if (!ev || !ev.relatedTarget || !this.refs.commandSurface.contains(ev.relatedTarget)) { var contextualMenuProps = this.state.contextualMenuProps; if (contextualMenuProps && contextualMenuProps.onDismiss) { this.state.contextualMenuProps.onDismiss(ev); } this.setState({ expandedMenuItemKey: null, contextualMenuProps: null, contextualMenuTarget: null }); } else { ev.stopPropagation(); ev.preventDefault(); } }; CommandBar.prototype._getStateFromProps = function (nextProps) { return { renderedItems: nextProps.items || [], renderedOverflowItems: null, contextualMenuProps: this._getContextualMenuPropsAfterUpdate(nextProps.items.concat(nextProps.farItems), nextProps.overflowItems), renderedFarItems: nextProps.farItems || null }; }; CommandBar.prototype._getContextualMenuPropsAfterUpdate = function (renderedItems, overflowItems) { var _this = this; if (this.state && this.state.expandedMenuItemKey) { if (this.state.expandedMenuItemKey === OVERFLOW_KEY) { // Keep the overflow menu open return { items: overflowItems }; } else { // Find the currently open key in the new props var matchingItem = renderedItems.filter(function (item) { return item.key === _this.state.expandedMenuItemKey; }); if (matchingItem.length === 1) { return this._getContextualMenuPropsFromItem(matchingItem[0]); } } } return null; }; CommandBar.prototype._getContextualMenuPropsFromItem = function (item) { return item.subMenuProps || (item.items && { items: item.items }); }; return CommandBar; }(Utilities_1.BaseComponent)); CommandBar.defaultProps = { items: [], overflowItems: [], farItems: [] }; __decorate([ Utilities_1.autobind ], CommandBar.prototype, "_onOverflowClick", null); __decorate([ Utilities_1.autobind ], CommandBar.prototype, "_onContextMenuDismiss", null); exports.CommandBar = CommandBar; /***/ }, /* 209 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_0456bec6', primaryCommands: 'primaryCommands_0456bec6', sideCommands: 'sideCommands_0456bec6', item: 'item_0456bec6', itemChevronDown: 'itemChevronDown_0456bec6', itemCommandText: 'itemCommandText_0456bec6', itemText: 'itemText_0456bec6', itemLinkIsNoName: 'itemLinkIsNoName_0456bec6', itemLink: 'itemLink_0456bec6', itemLinkIsExpanded: 'itemLinkIsExpanded_0456bec6', itemIcon: 'itemIcon_0456bec6', itemOverflow: 'itemOverflow_0456bec6', itemIconColor: 'itemIconColor_0456bec6', search: 'search_0456bec6', searchInput: 'searchInput_0456bec6', searchIconSearchWrapper: 'searchIconSearchWrapper_0456bec6', searchIconArrowWrapper: 'searchIconArrowWrapper_0456bec6', searchIconClearWrapper: 'searchIconClearWrapper_0456bec6', searchIconWrapper: 'searchIconWrapper_0456bec6', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_0456bec6{font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";height:40px;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.primaryCommands_0456bec6{position:absolute;overflow:hidden;display:inline;vertical-align:top;line-height:40px;max-width:100%;margin:0 20px}.sideCommands_0456bec6{position:absolute}[dir=ltr] .sideCommands_0456bec6{right:0}[dir=rtl] .sideCommands_0456bec6{left:0}html[dir=ltr] .sideCommands_0456bec6{text-align:right}html[dir=rtl] .sideCommands_0456bec6{text-align:left}html[dir=ltr] .sideCommands_0456bec6{padding-right:20px}html[dir=rtl] .sideCommands_0456bec6{padding-left:20px}.item_0456bec6{display:inline-block;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";height:40px;outline:transparent;vertical-align:top;margin:0 4px}.item_0456bec6:hover{background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.itemChevronDown_0456bec6,.itemCommandText_0456bec6{display:inline-block;padding:0 4px;vertical-align:top}.itemText_0456bec6{font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;background:0 0;border:none;line-height:40px;min-width:20px;text-align:center;padding:0 4px;display:block;height:100%}.itemText_0456bec6::-moz-focus-inner{border:0}.itemText_0456bec6{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .itemText_0456bec6:focus:after{content:'';position:absolute;top:2px;right:2px;bottom:2px;left:2px;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.itemText_0456bec6.itemLinkIsNoName_0456bec6{padding:0 8px}.itemLink_0456bec6{font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;background:0 0;border:none;line-height:40px;min-width:20px;text-align:center;padding:0 4px;display:block;height:100%;cursor:pointer}.itemLink_0456bec6::-moz-focus-inner{border:0}.itemLink_0456bec6{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .itemLink_0456bec6:focus:after{content:'';position:absolute;top:2px;right:2px;bottom:2px;left:2px;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.itemLink_0456bec6.itemLinkIsNoName_0456bec6{padding:0 8px}@media screen and (-ms-high-contrast:active){.itemLink_0456bec6.itemLinkIsExpanded_0456bec6::-moz-focus-inner,.itemLink_0456bec6:hover::-moz-focus-inner{border:0}.itemLink_0456bec6.itemLinkIsExpanded_0456bec6,.itemLink_0456bec6:hover{outline:transparent;position:relative}.itemLink_0456bec6.itemLinkIsExpanded_0456bec6::after,.itemLink_0456bec6:hover::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.itemLink_0456bec6.itemLinkIsExpanded_0456bec6::-moz-focus-inner,.itemLink_0456bec6:hover::-moz-focus-inner{border:0}.itemLink_0456bec6.itemLinkIsExpanded_0456bec6,.itemLink_0456bec6:hover{outline:transparent;position:relative}.itemLink_0456bec6.itemLinkIsExpanded_0456bec6::after,.itemLink_0456bec6:hover::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.itemLink_0456bec6:hover:not([disabled]){color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": ";background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.itemLink_0456bec6:hover:not([disabled]) .itemIcon_0456bec6{color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}.itemLink_0456bec6:hover:not([disabled]) .itemChevronDown_0456bec6{color:" }, { "theme": "neutralPrimaryAlt", "defaultValue": "#3c3c3c" }, { "rawString": "}.itemLink_0456bec6:hover:not([disabled]) .itemOverflow_0456bec6{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.itemLink_0456bec6.itemLinkIsExpanded_0456bec6{background-color:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.itemLink_0456bec6.itemLinkIsExpanded_0456bec6 .itemIcon_0456bec6{color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.itemLink_0456bec6.itemLinkIsExpanded_0456bec6 .itemChevronDown_0456bec6{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.itemLink_0456bec6.itemLinkIsExpanded_0456bec6 .itemOverflow_0456bec6{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.itemLink_0456bec6.itemLinkIsExpanded_0456bec6:hover{background-color:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.itemLink_0456bec6[disabled]{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";cursor:default;pointer-events:none}.itemLink_0456bec6[disabled] .itemIcon_0456bec6{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.itemIcon_0456bec6{font-size:16px;padding:0 4px}.itemIconColor_0456bec6{color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.itemChevronDown_0456bec6{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:12px}.itemOverflow_0456bec6{font-size:18px;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";padding:0 7px}.search_0456bec6{width:208px;max-width:208px;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:40px;position:relative;box-sizing:border-box;border-color:transparent}html[dir=ltr] .search_0456bec6{float:left}html[dir=rtl] .search_0456bec6{float:right}html[dir=ltr] .search_0456bec6{border-right:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=rtl] .search_0456bec6{border-left:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.search_0456bec6{z-index:10}html[dir=ltr] .search_0456bec6{border-right:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}html[dir=rtl] .search_0456bec6{border-left:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){html[dir=ltr] .search_0456bec6{border-right:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}html[dir=rtl] .search_0456bec6{border-left:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.search_0456bec6:before{position:absolute;content:' ';right:0;bottom:0;left:0;margin:0 8px;border-bottom:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.search_0456bec6:hover{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.search_0456bec6:hover::-moz-focus-inner{border:0}.search_0456bec6:hover{outline:transparent;position:relative}.search_0456bec6:hover::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.search_0456bec6:hover::-moz-focus-inner{border:0}.search_0456bec6:hover{outline:transparent;position:relative}.search_0456bec6:hover::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.searchInput_0456bec6{height:40px;padding:8px 8px 8px 0;border:none;background-color:transparent;width:100%;box-sizing:border-box;outline:0;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}html[dir=ltr] .searchInput_0456bec6{border-left:42px solid transparent}html[dir=rtl] .searchInput_0456bec6{border-right:42px solid transparent}@media screen and (-ms-high-contrast:active){html[dir=ltr] .searchInput_0456bec6{border-left:40px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}html[dir=rtl] .searchInput_0456bec6{border-right:40px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){html[dir=ltr] .searchInput_0456bec6{border-left:40px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}html[dir=rtl] .searchInput_0456bec6{border-right:40px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.searchInput_0456bec6::-ms-clear{display:none}.searchIconSearchWrapper_0456bec6{display:block}.searchIconArrowWrapper_0456bec6{display:none}.searchIconArrowWrapper_0456bec6,.searchIconSearchWrapper_0456bec6{top:0}[dir=ltr] .searchIconArrowWrapper_0456bec6,[dir=ltr] .searchIconSearchWrapper_0456bec6{padding-left:17px}[dir=rtl] .searchIconArrowWrapper_0456bec6,[dir=rtl] .searchIconSearchWrapper_0456bec6{padding-right:17px}html[dir=ltr] .searchIconArrowWrapper_0456bec6,html[dir=ltr] .searchIconSearchWrapper_0456bec6{padding-right:8px}html[dir=rtl] .searchIconArrowWrapper_0456bec6,html[dir=rtl] .searchIconSearchWrapper_0456bec6{padding-left:8px}.searchIconClearWrapper_0456bec6{display:none;top:1px;z-index:10}[dir=ltr] .searchIconClearWrapper_0456bec6{right:0}[dir=rtl] .searchIconClearWrapper_0456bec6{left:0}.searchIconWrapper_0456bec6{height:40px;line-height:40px;cursor:pointer;position:absolute;text-align:center}.search_0456bec6 .ms-Icon:before{font-size:16px;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.searchInput_0456bec6,.searchInput_0456bec6::-webkit-input-placeholder{font-size:14px}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 210 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(211)); /***/ }, /* 211 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(212)); __export(__webpack_require__(179)); /***/ }, /* 212 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Calendar_1 = __webpack_require__(171); var Callout_1 = __webpack_require__(59); var DirectionalHint_1 = __webpack_require__(58); var TextField_1 = __webpack_require__(197); var Utilities_1 = __webpack_require__(10); var DateMath_1 = __webpack_require__(176); var stylesImport = __webpack_require__(213); var styles = stylesImport; var DEFAULT_STRINGS = { months: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ], shortMonths: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ], days: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ], shortDays: [ 'S', 'M', 'T', 'W', 'T', 'F', 'S' ], goToToday: 'Go to today', prevMonthAriaLabel: 'Go to previous month', nextMonthAriaLabel: 'Go to next month', prevYearAriaLabel: 'Go to previous year', nextYearAriaLabel: 'Go to next year' }; var DatePicker = (function (_super) { __extends(DatePicker, _super); function DatePicker(props) { var _this = _super.call(this) || this; var formatDate = props.formatDate, value = props.value; _this.state = { selectedDate: value || new Date(), formattedDate: (formatDate && value) ? formatDate(value) : '', isDatePickerShown: false, errorMessage: null }; _this._preventFocusOpeningPicker = false; return _this; } DatePicker.prototype.componentWillReceiveProps = function (nextProps) { var formatDate = nextProps.formatDate, isRequired = nextProps.isRequired, strings = nextProps.strings, value = nextProps.value; var errorMessage = (isRequired && !value) ? (strings.isRequiredErrorMessage || '*') : null; // Set error message this.setState({ errorMessage: errorMessage }); // Issue# 1274: Check if the date value changed from old props value, i.e., if indeed a new date is being // passed in or if the formatting function was modified. We only update the selected date if either of these // had a legit change. Note tha the bug will still repro when only the formatDate was passed in props and this // is the result of the onSelectDate callback, but this should be a rare scenario. var oldValue = this.props.value; if (!DateMath_1.compareDates(oldValue, value) || this.props.formatDate !== formatDate) { this.setState({ selectedDate: value || new Date(), formattedDate: (formatDate && value) ? formatDate(value) : '', }); } }; DatePicker.prototype.render = function () { var _this = this; var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, strings = _a.strings, label = _a.label, isRequired = _a.isRequired, disabled = _a.disabled, ariaLabel = _a.ariaLabel, pickerAriaLabel = _a.pickerAriaLabel, placeholder = _a.placeholder, allowTextInput = _a.allowTextInput, borderless = _a.borderless, className = _a.className; var _b = this.state, isDatePickerShown = _b.isDatePickerShown, formattedDate = _b.formattedDate, selectedDate = _b.selectedDate, errorMessage = _b.errorMessage; return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker', styles.root, className), ref: 'root' }, React.createElement("div", { ref: function (c) { return _this._datepicker = c; } }, React.createElement(TextField_1.TextField, { className: styles.textField, ariaLabel: ariaLabel, "aria-haspopup": 'true', "aria-expanded": isDatePickerShown, required: isRequired, disabled: disabled, onKeyDown: this._onTextFieldKeyDown, onFocus: this._onTextFieldFocus, onBlur: this._onTextFieldBlur, onClick: this._onTextFieldClick, onChanged: this._onTextFieldChanged, errorMessage: errorMessage, label: label, placeholder: placeholder, borderless: borderless, iconProps: { iconName: 'calendar', className: Utilities_1.css(label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label', label ? styles.eventWithLabel : styles.eventWithoutLabel) }, readOnly: !allowTextInput, value: formattedDate, ref: 'textField' })), isDatePickerShown && (React.createElement(Callout_1.Callout, { role: 'dialog', ariaLabel: pickerAriaLabel, isBeakVisible: false, className: Utilities_1.css('ms-DatePicker-callout'), gapSpace: 0, doNotLayer: false, targetElement: this._datepicker, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._calendarDismissed, onPositioned: this._onCalloutPositioned }, React.createElement(Calendar_1.Calendar, { onSelectDate: this._onSelectDate, onDismiss: this._calendarDismissed, isMonthPickerVisible: this.props.isMonthPickerVisible, value: selectedDate, firstDayOfWeek: firstDayOfWeek, strings: strings, ref: this._resolveRef('_calendar') }))))); }; DatePicker.prototype._onSelectDate = function (date) { var _a = this.props, formatDate = _a.formatDate, onSelectDate = _a.onSelectDate; this.setState({ selectedDate: date, isDatePickerShown: false, formattedDate: formatDate && date ? formatDate(date) : '', }); if (onSelectDate) { onSelectDate(date); } }; DatePicker.prototype._onCalloutPositioned = function () { this._calendar.focus(); }; DatePicker.prototype._onTextFieldFocus = function (ev) { if (this.props.disableAutoFocus) { return; } if (!this.props.allowTextInput) { if (!this._preventFocusOpeningPicker) { this._showDatePickerPopup(); } else { this._preventFocusOpeningPicker = false; } } }; DatePicker.prototype._onTextFieldBlur = function (ev) { this._validateTextInput(); }; DatePicker.prototype._onTextFieldChanged = function (newValue) { if (this.props.allowTextInput) { if (this.state.isDatePickerShown) { this._dismissDatePickerPopup(); } var _a = this.props, isRequired = _a.isRequired, value = _a.value, strings = _a.strings; this.setState({ errorMessage: (isRequired && !value) ? (strings.isRequiredErrorMessage || '*') : null, formattedDate: newValue }); } }; DatePicker.prototype._onTextFieldKeyDown = function (ev) { switch (ev.which) { case Utilities_1.KeyCodes.enter: ev.preventDefault(); ev.stopPropagation(); if (!this.state.isDatePickerShown) { this._showDatePickerPopup(); } else { // When DatePicker allows input date string directly, // it is expected to hit another enter to close the popup if (this.props.allowTextInput) { this._dismissDatePickerPopup(); } } break; case Utilities_1.KeyCodes.escape: this._handleEscKey(ev); break; default: break; } }; DatePicker.prototype._onTextFieldClick = function (ev) { if (!this.state.isDatePickerShown) { this._showDatePickerPopup(); } else { if (this.props.allowTextInput) { this.setState({ isDatePickerShown: false }); } } }; DatePicker.prototype._showDatePickerPopup = function () { if (!this.state.isDatePickerShown) { this._preventFocusOpeningPicker = true; this._focusOnSelectedDateOnUpdate = true; this.setState({ isDatePickerShown: true, navigatedDate: this.state.selectedDate, errorMessage: '' }); } }; DatePicker.prototype._dismissDatePickerPopup = function () { if (this.state.isDatePickerShown) { this.setState({ isDatePickerShown: false }); this._validateTextInput(); } }; /** * Callback for closing the calendar callout */ DatePicker.prototype._calendarDismissed = function () { this._preventFocusOpeningPicker = true; this._dismissDatePickerPopup(); if (this.refs.textField) { this.refs.textField.focus(); } }; DatePicker.prototype._handleEscKey = function (ev) { this._calendarDismissed(); }; DatePicker.prototype._validateTextInput = function () { var _a = this.props, isRequired = _a.isRequired, allowTextInput = _a.allowTextInput, strings = _a.strings, formatDate = _a.formatDate, parseDateFromString = _a.parseDateFromString, onSelectDate = _a.onSelectDate; var inputValue = this.state.formattedDate; // Do validation only if DatePicker's popup is dismissed if (this.state.isDatePickerShown) { return; } // Check when DatePicker is a required field but has NO input value if (isRequired && !inputValue) { this.setState({ // Since fabic react doesn't have loc support yet // use the symbol '*' to represent error message errorMessage: strings.isRequiredErrorMessage || '*' }); return; } if (allowTextInput) { var date = null; if (inputValue) { date = parseDateFromString(inputValue); if (!date) { this.setState({ errorMessage: strings.invalidInputErrorMessage || '*' }); } else { this.setState({ selectedDate: date, errorMessage: '' }); } } else { // No input date string shouldn't be an error if field is not required this.setState({ errorMessage: '' }); } // Execute onSelectDate callback if (onSelectDate) { // If no input date string or input date string is invalid // date variable will be null, callback should expect null value for this case onSelectDate(date); } } }; return DatePicker; }(Utilities_1.BaseComponent)); DatePicker.defaultProps = { allowTextInput: false, formatDate: function (date) { if (date) { return date.toDateString(); } return ''; }, parseDateFromString: function (dateStr) { var date = Date.parse(dateStr); if (date) { return new Date(date); } return null; }, firstDayOfWeek: Calendar_1.DayOfWeek.Sunday, isRequired: false, isMonthPickerVisible: true, strings: DEFAULT_STRINGS, borderless: false, pickerAriaLabel: 'Calender', }; __decorate([ Utilities_1.autobind ], DatePicker.prototype, "_onSelectDate", null); __decorate([ Utilities_1.autobind ], DatePicker.prototype, "_onCalloutPositioned", null); __decorate([ Utilities_1.autobind ], DatePicker.prototype, "_onTextFieldFocus", null); __decorate([ Utilities_1.autobind ], DatePicker.prototype, "_onTextFieldBlur", null); __decorate([ Utilities_1.autobind ], DatePicker.prototype, "_onTextFieldChanged", null); __decorate([ Utilities_1.autobind ], DatePicker.prototype, "_onTextFieldKeyDown", null); __decorate([ Utilities_1.autobind ], DatePicker.prototype, "_onTextFieldClick", null); __decorate([ Utilities_1.autobind ], DatePicker.prototype, "_dismissDatePickerPopup", null); __decorate([ Utilities_1.autobind ], DatePicker.prototype, "_calendarDismissed", null); __decorate([ Utilities_1.autobind ], DatePicker.prototype, "_handleEscKey", null); __decorate([ Utilities_1.autobind ], DatePicker.prototype, "_validateTextInput", null); exports.DatePicker = DatePicker; /***/ }, /* 213 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_13226a93', textField: 'textField_13226a93', eventWithLabel: 'eventWithLabel_13226a93', eventWithoutLabel: 'eventWithoutLabel_13226a93', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_13226a93{box-sizing:border-box;box-shadow:none;margin:0;padding:0;margin-bottom:17px}.textField_13226a93{position:relative}.textField_13226a93 input::-ms-clear{display:none}.textField_13226a93 input[readonly]{cursor:pointer}.eventWithLabel_13226a93{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:20px;line-height:20px;pointer-events:none;position:absolute;bottom:5px}[dir=ltr] .eventWithLabel_13226a93{right:9px}[dir=rtl] .eventWithLabel_13226a93{left:9px}.eventWithoutLabel_13226a93{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:20px;line-height:20px;pointer-events:none;position:absolute;top:7px}[dir=ltr] .eventWithoutLabel_13226a93{right:9px}[dir=rtl] .eventWithoutLabel_13226a93{left:9px}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 214 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(215)); /***/ }, /* 215 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(216)); __export(__webpack_require__(221)); __export(__webpack_require__(222)); __export(__webpack_require__(231)); __export(__webpack_require__(232)); /***/ }, /* 216 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(217)); __export(__webpack_require__(218)); __export(__webpack_require__(219)); __export(__webpack_require__(220)); /***/ }, /* 217 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.SELECTION_CHANGE = 'change'; var SelectionMode; (function (SelectionMode) { SelectionMode[SelectionMode["none"] = 0] = "none"; SelectionMode[SelectionMode["single"] = 1] = "single"; SelectionMode[SelectionMode["multiple"] = 2] = "multiple"; })(SelectionMode = exports.SelectionMode || (exports.SelectionMode = {})); var SelectionDirection; (function (SelectionDirection) { SelectionDirection[SelectionDirection["horizontal"] = 0] = "horizontal"; SelectionDirection[SelectionDirection["vertical"] = 1] = "vertical"; })(SelectionDirection = exports.SelectionDirection || (exports.SelectionDirection = {})); /***/ }, /* 218 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var interfaces_1 = __webpack_require__(217); var Utilities_1 = __webpack_require__(10); var Selection = (function () { function Selection(options) { if (options === void 0) { options = {}; } var onSelectionChanged = options.onSelectionChanged, getKey = options.getKey, _a = options.canSelectItem, canSelectItem = _a === void 0 ? function (item) { return true; } : _a; this.getKey = getKey || (function (item, index) { return (item ? item.key : String(index)); }); this._changeEventSuppressionCount = 0; this._exemptedCount = 0; this._anchoredIndex = 0; this._unselectableCount = 0; this.setItems([], true); this._onSelectionChanged = onSelectionChanged; this.canSelectItem = canSelectItem; } Selection.prototype.setChangeEvents = function (isEnabled, suppressChange) { this._changeEventSuppressionCount += isEnabled ? -1 : 1; if (this._changeEventSuppressionCount === 0 && this._hasChanged) { this._hasChanged = false; if (!suppressChange) { this._change(); } } }; /** * Selection needs the items, call this method to set them. If the set * of items is the same, this will re-evaluate selection and index maps. * Otherwise, shouldClear should be set to true, so that selection is * cleared. */ Selection.prototype.setItems = function (items, shouldClear) { if (shouldClear === void 0) { shouldClear = true; } var newKeyToIndexMap = {}; var newUnselectableIndices = {}; var hasSelectionChanged = false; this.setChangeEvents(false); // Reset the unselectable count. this._unselectableCount = 0; // Build lookup table for quick selection evaluation. for (var i = 0; i < items.length; i++) { var item = items[i]; if (item) { newKeyToIndexMap[this.getKey(item, i)] = i; } newUnselectableIndices[i] = item && !this.canSelectItem(item); if (newUnselectableIndices[i]) { this._unselectableCount++; } } if (shouldClear) { this.setAllSelected(false); } // Check the exemption list for discrepencies. var newExemptedIndicies = {}; for (var indexProperty in this._exemptedIndices) { if (this._exemptedIndices.hasOwnProperty(indexProperty)) { var index = Number(indexProperty); var item = this._items[index]; var exemptKey = item ? this.getKey(item, Number(index)) : undefined; var newIndex = exemptKey ? newKeyToIndexMap[exemptKey] : index; if (newIndex === undefined) { // We don't know the index of the item any more so it's either moved or removed. // In this case we reset the entire selection. this.setAllSelected(false); break; } else { // We know the new index of the item. update the existing exemption table. newExemptedIndicies[newIndex] = true; hasSelectionChanged = hasSelectionChanged || (newIndex !== index); } } } this._exemptedIndices = newExemptedIndicies; this._keyToIndexMap = newKeyToIndexMap; this._unselectableIndices = newUnselectableIndices; this._items = items || []; if (hasSelectionChanged) { this._change(); } this.setChangeEvents(true); }; Selection.prototype.getItems = function () { return this._items; }; Selection.prototype.getSelection = function () { if (!this._selectedItems) { this._selectedItems = []; for (var i = 0; i < this._items.length; i++) { if (this.isIndexSelected(i)) { this._selectedItems.push(this._items[i]); } } } return this._selectedItems; }; Selection.prototype.getSelectedCount = function () { return this._isAllSelected ? (this._items.length - this._exemptedCount - this._unselectableCount) : (this._exemptedCount); }; Selection.prototype.isRangeSelected = function (fromIndex, count) { var endIndex = fromIndex + count; for (var i = fromIndex; i < endIndex; i++) { if (!this.isIndexSelected(i)) { return false; } } return true; }; Selection.prototype.isAllSelected = function () { var selectableCount = this._items.length - this._unselectableCount; return ((this.count > 0) && (this._isAllSelected && this._exemptedCount === 0) || (!this._isAllSelected && (this._exemptedCount === selectableCount) && selectableCount > 0)); }; Selection.prototype.isKeySelected = function (key) { var index = this._keyToIndexMap[key]; return this.isIndexSelected(index); }; Selection.prototype.isIndexSelected = function (index) { return !!((this.count > 0) && (this._isAllSelected && !this._exemptedIndices[index] && !this._unselectableIndices[index]) || (!this._isAllSelected && this._exemptedIndices[index])); }; Selection.prototype.setAllSelected = function (isAllSelected) { var selectableCount = this._items ? (this._items.length - this._unselectableCount) : 0; if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) { this._exemptedIndices = {}; this._exemptedCount = 0; this._isAllSelected = isAllSelected; this._updateCount(); } }; Selection.prototype.setKeySelected = function (key, isSelected, shouldAnchor) { var index = this._keyToIndexMap[key]; if (index >= 0) { this.setIndexSelected(index, isSelected, shouldAnchor); } }; Selection.prototype.setIndexSelected = function (index, isSelected, shouldAnchor) { // Clamp the index. index = Math.min(Math.max(0, index), this._items.length - 1); // No-op on out of bounds selections. if (index < 0 || index >= this._items.length) { return; } var isExempt = this._exemptedIndices[index]; var hasChanged = false; var canSelect = !this._unselectableIndices[index]; if (canSelect) { // Determine if we need to remove the exemption. if (isExempt && ((isSelected && this._isAllSelected) || (!isSelected && !this._isAllSelected))) { hasChanged = true; delete this._exemptedIndices[index]; this._exemptedCount--; } // Determine if we need to add the exemption. if (!isExempt && ((isSelected && !this._isAllSelected) || (!isSelected && this._isAllSelected))) { hasChanged = true; this._exemptedIndices[index] = true; this._exemptedCount++; } if (shouldAnchor) { this._anchoredIndex = index; } } if (hasChanged) { this._updateCount(); } }; Selection.prototype.selectToKey = function (key, clearSelection) { this.selectToIndex(this._keyToIndexMap[key], clearSelection); }; Selection.prototype.selectToIndex = function (index, clearSelection) { var anchorIndex = this._anchoredIndex || 0; var startIndex = Math.min(index, anchorIndex); var endIndex = Math.max(index, anchorIndex); this.setChangeEvents(false); if (clearSelection) { this.setAllSelected(false); } for (; startIndex <= endIndex; startIndex++) { this.setIndexSelected(startIndex, true, false); } this.setChangeEvents(true); }; Selection.prototype.toggleAllSelected = function () { this.setAllSelected(!this.isAllSelected()); }; Selection.prototype.toggleKeySelected = function (key) { this.setKeySelected(key, !this.isKeySelected(key), true); }; Selection.prototype.toggleIndexSelected = function (index) { this.setIndexSelected(index, !this.isIndexSelected(index), true); }; Selection.prototype.toggleRangeSelected = function (fromIndex, count) { var isRangeSelected = this.isRangeSelected(fromIndex, count); var endIndex = fromIndex + count; this.setChangeEvents(false); for (var i = fromIndex; i < endIndex; i++) { this.setIndexSelected(i, !isRangeSelected, false); } this.setChangeEvents(true); }; Selection.prototype._updateCount = function () { this.count = this.getSelectedCount(); this._change(); }; Selection.prototype._change = function () { if (this._changeEventSuppressionCount === 0) { this._selectedItems = null; Utilities_1.EventGroup.raise(this, interfaces_1.SELECTION_CHANGE); if (this._onSelectionChanged) { this._onSelectionChanged(); } } else { this._hasChanged = true; } }; return Selection; }()); exports.Selection = Selection; /***/ }, /* 219 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var interfaces_1 = __webpack_require__(217); var SelectionLayout = (function () { function SelectionLayout(direction) { this._direction = direction; } SelectionLayout.prototype.getItemIndexAbove = function (focusIndex, items) { return (this._direction === interfaces_1.SelectionDirection.vertical) ? Math.max(0, focusIndex - 1) : focusIndex; }; SelectionLayout.prototype.getItemIndexBelow = function (focusIndex, items) { return (this._direction === interfaces_1.SelectionDirection.vertical) ? Math.min(items.length - 1, focusIndex + 1) : focusIndex; }; SelectionLayout.prototype.getItemIndexLeft = function (focusIndex, items) { return (this._direction === interfaces_1.SelectionDirection.vertical) ? focusIndex : Math.max(0, focusIndex - 1); }; SelectionLayout.prototype.getItemIndexRight = function (focusIndex, items) { return (this._direction === interfaces_1.SelectionDirection.vertical) ? focusIndex : Math.min(items.length - 1, focusIndex + 1); }; return SelectionLayout; }()); exports.SelectionLayout = SelectionLayout; /***/ }, /* 220 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var SelectionLayout_1 = __webpack_require__(219); var interfaces_1 = __webpack_require__(217); // Selection definitions: // // Anchor index: the point from which a range selection starts. // Focus index: the point from which layout movement originates from. // // These two can differ. Tests: // // If you start at index 5 // Shift click to index 10 // The focus is 10, the anchor is 5. // If you shift click at index 0 // The anchor remains at 5, the items between 0 and 5 are selected and everything else is cleared. // If you click index 8 // The anchor and focus are set to 8. var SELECTION_DISABLED_ATTRIBUTE_NAME = 'data-selection-disabled'; var SELECTION_INDEX_ATTRIBUTE_NAME = 'data-selection-index'; var SELECTION_TOGGLE_ATTRIBUTE_NAME = 'data-selection-toggle'; var SELECTION_INVOKE_ATTRIBUTE_NAME = 'data-selection-invoke'; var SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME = 'data-selection-all-toggle'; var SelectionZone = (function (_super) { __extends(SelectionZone, _super); function SelectionZone() { return _super !== null && _super.apply(this, arguments) || this; } SelectionZone.prototype.componentDidMount = function () { var win = Utilities_1.getWindow(this.refs.root); var scrollElement = Utilities_1.findScrollableParent(this.refs.root); // Track the latest modifier keys globally. this._events.on(win, 'keydown keyup', this._updateModifiers); this._events.on(scrollElement, 'click', this._tryClearOnEmptyClick); }; SelectionZone.prototype.render = function () { return (React.createElement("div", __assign({ className: 'ms-SelectionZone', ref: 'root', onKeyDown: this._onKeyDown, onMouseDown: this._onMouseDown, onClick: this._onClick, onDoubleClick: this._onDoubleClick, onContextMenu: this._onContextMenu }, { onMouseDownCapture: this._onMouseDownCapture, onFocusCapture: this._onFocus }), this.props.children)); }; /** * In some cases, the consuming scenario requires to set focus on a row without having SelectionZone * react to the event. Note that focus events in IE <= 11 will occur asynchronously after .focus() has * been called on an element, so we need a flag to store the idea that we will bypass the "next" * focus event that occurs. This method does that. */ SelectionZone.prototype.ignoreNextFocus = function () { this._shouldHandleFocus = false; }; SelectionZone.prototype._onMouseDownCapture = function (ev) { if (document.activeElement !== ev.target && !Utilities_1.elementContains(document.activeElement, ev.target)) { this.ignoreNextFocus(); } }; /** * When we focus an item, for single/multi select scenarios, we should try to select it immediately * as long as the focus did not originate from a mouse down/touch event. For those cases, we handle them * specially. */ SelectionZone.prototype._onFocus = function (ev) { var target = ev.target; var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode; var isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed; if (this._shouldHandleFocus && selectionMode !== interfaces_1.SelectionMode.none) { var isToggle = this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME); var itemRoot = this._findItemRoot(target); if (!isToggle && itemRoot) { var index = this._getItemIndex(itemRoot); if (isToggleModifierPressed) { // set anchor only. selection.setIndexSelected(index, selection.isIndexSelected(index), true); } else { this._onItemSurfaceClick(ev, index); } } } this._shouldHandleFocus = false; }; SelectionZone.prototype._onMouseDown = function (ev) { this._updateModifiers(ev); var target = ev.target; var itemRoot = this._findItemRoot(target); while (target !== this.refs.root) { if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) { break; } else if (itemRoot) { if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) { break; } else if (this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) { this._onInvokeMouseDown(ev, this._getItemIndex(itemRoot)); break; } else if (target === itemRoot) { break; } } target = Utilities_1.getParent(target); } }; SelectionZone.prototype._onClick = function (ev) { this._updateModifiers(ev); var target = ev.target; var itemRoot = this._findItemRoot(target); // No-op if selection is disabled if (this._isSelectionDisabled(target)) { return; } while (target !== this.refs.root) { if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) { this._onToggleAllClick(ev); break; } else if (itemRoot) { var index = this._getItemIndex(itemRoot); if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) { if (this._isShiftPressed) { this._onItemSurfaceClick(ev, index); } else { this._onToggleClick(ev, index); } break; } else if (this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) { this._onInvokeClick(ev, index); break; } else if (target === itemRoot) { this._onItemSurfaceClick(ev, index); break; } } target = Utilities_1.getParent(target); } }; SelectionZone.prototype._onContextMenu = function (ev) { var target = ev.target; var _a = this.props, onItemContextMenu = _a.onItemContextMenu, selection = _a.selection; if (onItemContextMenu) { var itemRoot = this._findItemRoot(target); if (itemRoot) { var index = this._getItemIndex(itemRoot); onItemContextMenu(selection.getItems()[index], index, ev.nativeEvent); ev.preventDefault(); } } }; SelectionZone.prototype._isSelectionDisabled = function (target) { while (target !== this.refs.root) { if (this._hasAttribute(target, SELECTION_DISABLED_ATTRIBUTE_NAME)) { return true; } target = Utilities_1.getParent(target); } return false; }; /** * In multi selection, if you double click within an item's root (but not within the invoke element or input elements), * we should execute the invoke handler. */ SelectionZone.prototype._onDoubleClick = function (ev) { var target = ev.target; if (this._isSelectionDisabled(target)) { return; } var _a = this.props, selectionMode = _a.selectionMode, onItemInvoked = _a.onItemInvoked; var itemRoot = this._findItemRoot(target); if (itemRoot && onItemInvoked && selectionMode !== interfaces_1.SelectionMode.none && !this._isInputElement(target)) { var index = this._getItemIndex(itemRoot); while (target !== this.refs.root) { if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME) || this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) { break; } else if (target === itemRoot) { this._onInvokeClick(ev, index); break; } target = Utilities_1.getParent(target); } target = Utilities_1.getParent(target); } }; SelectionZone.prototype._onKeyDown = function (ev) { this._updateModifiers(ev); var target = ev.target; if (this._isSelectionDisabled(target)) { return; } var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode; var isSelectAllKey = ev.which === Utilities_1.KeyCodes.a && (this._isCtrlPressed || this._isMetaPressed); var isClearSelectionKey = ev.which === Utilities_1.KeyCodes.escape; // Ignore key downs from input elements. if (this._isInputElement(target)) { // A key was pressed while an item in this zone was focused. this._shouldHandleFocus = true; return; } // If ctrl-a is pressed, select all (if all are not already selected.) if (isSelectAllKey && selectionMode === interfaces_1.SelectionMode.multiple && !selection.isAllSelected()) { selection.setAllSelected(true); ev.stopPropagation(); ev.preventDefault(); return; } // If escape is pressed, clear selection (if any are selected.) if (isClearSelectionKey && selection.getSelectedCount() > 0) { selection.setAllSelected(false); ev.stopPropagation(); ev.preventDefault(); return; } var itemRoot = this._findItemRoot(target); // If a key was pressed within an item, we should treat "enters" as invokes and "space" as toggle if (itemRoot) { var index = this._getItemIndex(itemRoot); while (target !== this.refs.root) { if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) { // For toggle elements, assuming they are rendered as buttons, they will generate a click event, // so we can no-op for any keydowns in this case. break; } else if ((ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) && (target.tagName === 'BUTTON' || target.tagName === 'A' || target.tagName === 'INPUT')) { return false; } else if (target === itemRoot) { if (ev.which === Utilities_1.KeyCodes.enter) { this._onInvokeClick(ev, index); ev.preventDefault(); return; } else if (ev.which === Utilities_1.KeyCodes.space) { this._onToggleClick(ev, index); ev.preventDefault(); return; } break; } target = Utilities_1.getParent(target); } } // A key was pressed while an item in this zone was focused. this._shouldHandleFocus = true; }; SelectionZone.prototype._onToggleAllClick = function (ev) { var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode; if (selectionMode === interfaces_1.SelectionMode.multiple) { selection.toggleAllSelected(); ev.stopPropagation(); ev.preventDefault(); } }; SelectionZone.prototype._onToggleClick = function (ev, index) { var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode; if (selectionMode === interfaces_1.SelectionMode.multiple) { selection.toggleIndexSelected(index); } else if (selectionMode === interfaces_1.SelectionMode.single) { var isSelected = selection.isIndexSelected(index); selection.setChangeEvents(false); selection.setAllSelected(false); selection.setIndexSelected(index, !isSelected, true); selection.setChangeEvents(true); } else { return; } ev.stopPropagation(); // NOTE: ev.preventDefault is not called for toggle clicks, because this will kill the browser behavior // for checkboxes if you use a checkbox for the toggle. }; SelectionZone.prototype._onInvokeClick = function (ev, index) { var _a = this.props, selection = _a.selection, onItemInvoked = _a.onItemInvoked; if (onItemInvoked) { onItemInvoked(selection.getItems()[index], index, ev.nativeEvent); ev.preventDefault(); ev.stopPropagation(); } }; SelectionZone.prototype._onItemSurfaceClick = function (ev, index) { var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode; var isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed; if (selectionMode === interfaces_1.SelectionMode.multiple) { if (this._isShiftPressed) { selection.selectToIndex(index, !isToggleModifierPressed); } else if (isToggleModifierPressed) { selection.toggleIndexSelected(index); } else { this._clearAndSelectIndex(index); } } else if (selectionMode === interfaces_1.SelectionMode.single) { this._clearAndSelectIndex(index); } }; SelectionZone.prototype._onInvokeMouseDown = function (ev, index) { var selection = this.props.selection; // Only do work if item is not selected. if (selection.isIndexSelected(index)) { return; } this._clearAndSelectIndex(index); }; SelectionZone.prototype._tryClearOnEmptyClick = function (ev) { if (!this.props.selectionPreservedOnEmptyClick && this._isNonHandledClick(ev.target)) { this.props.selection.setAllSelected(false); } }; SelectionZone.prototype._clearAndSelectIndex = function (index) { var selection = this.props.selection; var isAlreadySingleSelected = selection.getSelectedCount() === 1 && selection.isIndexSelected(index); if (!isAlreadySingleSelected) { selection.setChangeEvents(false); selection.setAllSelected(false); selection.setIndexSelected(index, true, true); selection.setChangeEvents(true); } }; /** * We need to track the modifier key states so that when focus events occur, which do not contain * modifier states in the Event object, we know how to behave. */ SelectionZone.prototype._updateModifiers = function (ev) { this._isShiftPressed = ev.shiftKey; this._isCtrlPressed = ev.ctrlKey; this._isMetaPressed = ev.metaKey; }; SelectionZone.prototype._findItemRoot = function (target) { var selection = this.props.selection; while (target !== this.refs.root) { var indexValue = target.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME); var index = Number(indexValue); if (indexValue !== null && index >= 0 && index < selection.getItems().length) { break; } target = Utilities_1.getParent(target); } if (target === this.refs.root) { return undefined; } return target; }; SelectionZone.prototype._getItemIndex = function (itemRoot) { return Number(itemRoot.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME)); }; SelectionZone.prototype._hasAttribute = function (element, attributeName) { var isToggle = false; while (!isToggle && element !== this.refs.root) { isToggle = element.getAttribute(attributeName) === 'true'; element = Utilities_1.getParent(element); } return isToggle; }; SelectionZone.prototype._isInputElement = function (element) { return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA'; }; SelectionZone.prototype._isNonHandledClick = function (element) { var doc = Utilities_1.getDocument(); if (doc && element) { while (element && element !== doc.documentElement) { if (Utilities_1.isElementTabbable(element)) { return false; } element = Utilities_1.getParent(element); } } return true; }; return SelectionZone; }(Utilities_1.BaseComponent)); SelectionZone.defaultProps = { layout: new SelectionLayout_1.SelectionLayout(interfaces_1.SelectionDirection.vertical), isMultiSelectEnabled: true, isSelectedOnFocus: true, selectionMode: interfaces_1.SelectionMode.multiple }; __decorate([ Utilities_1.autobind ], SelectionZone.prototype, "ignoreNextFocus", null); __decorate([ Utilities_1.autobind ], SelectionZone.prototype, "_onMouseDownCapture", null); __decorate([ Utilities_1.autobind ], SelectionZone.prototype, "_onFocus", null); __decorate([ Utilities_1.autobind ], SelectionZone.prototype, "_onMouseDown", null); __decorate([ Utilities_1.autobind ], SelectionZone.prototype, "_onClick", null); __decorate([ Utilities_1.autobind ], SelectionZone.prototype, "_onContextMenu", null); __decorate([ Utilities_1.autobind ], SelectionZone.prototype, "_onDoubleClick", null); __decorate([ Utilities_1.autobind ], SelectionZone.prototype, "_onKeyDown", null); exports.SelectionZone = SelectionZone; /***/ }, /* 221 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var DetailsList_Props_1 = __webpack_require__(222); var DetailsHeader_1 = __webpack_require__(223); var DetailsRow_1 = __webpack_require__(231); var FocusZone_1 = __webpack_require__(50); var GroupedList_1 = __webpack_require__(235); var List_1 = __webpack_require__(248); var withViewport_1 = __webpack_require__(252); var index_1 = __webpack_require__(216); var DragDropHelper_1 = __webpack_require__(254); var stylesImport = __webpack_require__(255); var styles = stylesImport; var MIN_COLUMN_WIDTH = 100; // this is the global min width var CHECKBOX_WIDTH = 36; var GROUP_EXPAND_WIDTH = 36; var DEFAULT_INNER_PADDING = 16; var DEFAULT_RENDERED_WINDOWS_AHEAD = 2; var DEFAULT_RENDERED_WINDOWS_BEHIND = 2; var DetailsList = (function (_super) { __extends(DetailsList, _super); function DetailsList(props) { var _this = _super.call(this, props) || this; _this._activeRows = {}; _this._columnOverrides = {}; _this._onColumnIsSizingChanged = _this._onColumnIsSizingChanged.bind(_this); _this._onColumnResized = _this._onColumnResized.bind(_this); _this._onColumnAutoResized = _this._onColumnAutoResized.bind(_this); _this._onRowDidMount = _this._onRowDidMount.bind(_this); _this._onRowWillUnmount = _this._onRowWillUnmount.bind(_this); _this._onToggleCollapse = _this._onToggleCollapse.bind(_this); _this._onActiveRowChanged = _this._onActiveRowChanged.bind(_this); _this._onHeaderKeyDown = _this._onHeaderKeyDown.bind(_this); _this._onContentKeyDown = _this._onContentKeyDown.bind(_this); _this._onRenderCell = _this._onRenderCell.bind(_this); _this._onGroupExpandStateChanged = _this._onGroupExpandStateChanged.bind(_this); _this.state = { lastWidth: 0, adjustedColumns: _this._getAdjustedColumns(props), layoutMode: props.layoutMode, isSizing: false, isDropping: false, isCollapsed: props.groupProps && props.groupProps.isAllGroupsCollapsed, isSomeGroupExpanded: props.groupProps && !props.groupProps.isAllGroupsCollapsed }; _this._selection = props.selection || new index_1.Selection({ onSelectionChanged: null, getKey: props.getKey }); _this._selection.setItems(props.items, false); _this._dragDropHelper = props.dragDropEvents ? new DragDropHelper_1.DragDropHelper({ selection: _this._selection, minimumPixelsForDrag: props.minimumPixelsForDrag }) : null; _this._initialFocusedIndex = props.initialFocusedIndex; return _this; } DetailsList.prototype.componentWillUnmount = function () { if (this._dragDropHelper) { this._dragDropHelper.dispose(); } }; DetailsList.prototype.componentDidUpdate = function (prevProps, prevState) { if (this._initialFocusedIndex !== undefined) { var row = this._activeRows[this._initialFocusedIndex]; if (row) { this._setFocusToRowIfPending(row); } } if (this.props.onDidUpdate) { this.props.onDidUpdate(this); } }; DetailsList.prototype.componentWillReceiveProps = function (newProps) { var _a = this.props, checkboxVisibility = _a.checkboxVisibility, items = _a.items, setKey = _a.setKey, selectionMode = _a.selectionMode, columns = _a.columns, viewport = _a.viewport; var layoutMode = this.state.layoutMode; var shouldResetSelection = (newProps.setKey !== setKey) || newProps.setKey === undefined; var shouldForceUpdates = false; if (newProps.layoutMode !== this.props.layoutMode) { layoutMode = newProps.layoutMode; this.setState({ layoutMode: layoutMode }); shouldForceUpdates = true; } if (shouldResetSelection) { this._initialFocusedIndex = newProps.initialFocusedIndex; } if (newProps.items !== items) { this._selection.setItems(newProps.items, shouldResetSelection); } if (newProps.checkboxVisibility !== checkboxVisibility || newProps.columns !== columns || newProps.viewport.width !== viewport.width) { shouldForceUpdates = true; } this._adjustColumns(newProps, true, layoutMode); if (newProps.selectionMode !== selectionMode) { shouldForceUpdates = true; } if (shouldForceUpdates) { this._forceListUpdates(); } }; DetailsList.prototype.render = function () { var _this = this; var _a = this.props, ariaLabelForListHeader = _a.ariaLabelForListHeader, ariaLabelForSelectAllCheckbox = _a.ariaLabelForSelectAllCheckbox, className = _a.className, checkboxVisibility = _a.checkboxVisibility, constrainMode = _a.constrainMode, dragDropEvents = _a.dragDropEvents, groups = _a.groups, groupProps = _a.groupProps, items = _a.items, isHeaderVisible = _a.isHeaderVisible, onItemInvoked = _a.onItemInvoked, onItemContextMenu = _a.onItemContextMenu, onColumnHeaderClick = _a.onColumnHeaderClick, onColumnHeaderContextMenu = _a.onColumnHeaderContextMenu, selectionMode = _a.selectionMode, selectionPreservedOnEmptyClick = _a.selectionPreservedOnEmptyClick, ariaLabel = _a.ariaLabel, ariaLabelForGrid = _a.ariaLabelForGrid, rowElementEventMap = _a.rowElementEventMap, _b = _a.shouldApplyApplicationRole, shouldApplyApplicationRole = _b === void 0 ? false : _b, getKey = _a.getKey; var _c = this.state, adjustedColumns = _c.adjustedColumns, isCollapsed = _c.isCollapsed, layoutMode = _c.layoutMode, isSizing = _c.isSizing, isSomeGroupExpanded = _c.isSomeGroupExpanded; var _d = this, selection = _d._selection, dragDropHelper = _d._dragDropHelper; var groupNestingDepth = this._getGroupNestingDepth(); var additionalListProps = { renderedWindowsAhead: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_AHEAD, renderedWindowsBehind: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_BEHIND, getKey: getKey }; var selectAllVisibility = DetailsHeader_1.SelectAllVisibility.none; // for SelectionMode.none if (selectionMode === index_1.SelectionMode.single) { selectAllVisibility = DetailsHeader_1.SelectAllVisibility.hidden; } if (selectionMode === index_1.SelectionMode.multiple) { // if isCollapsedGroupSelectVisible is false, disable select all when the list has all collapsed groups var isCollapsedGroupSelectVisible = groupProps && groupProps.headerProps && groupProps.headerProps.isCollapsedGroupSelectVisible; if (isCollapsedGroupSelectVisible === undefined) { isCollapsedGroupSelectVisible = true; } var isSelectAllVisible = isCollapsedGroupSelectVisible || !groups || isSomeGroupExpanded; selectAllVisibility = isSelectAllVisible ? DetailsHeader_1.SelectAllVisibility.visible : DetailsHeader_1.SelectAllVisibility.hidden; } if (checkboxVisibility === DetailsList_Props_1.CheckboxVisibility.hidden) { selectAllVisibility = DetailsHeader_1.SelectAllVisibility.none; } return ( // If shouldApplyApplicationRole is true, role application will be applied to make arrow keys work // with JAWS. React.createElement("div", __assign({ ref: 'root', className: Utilities_1.css('ms-DetailsList', styles.root, className, (_e = { 'is-fixed': layoutMode === DetailsList_Props_1.DetailsListLayoutMode.fixedColumns }, _e['is-horizontalConstrained ' + styles.rootIsHorizontalConstrained] = constrainMode === DetailsList_Props_1.ConstrainMode.horizontalConstrained, _e)), "data-automationid": 'DetailsList', "data-is-scrollable": 'false', "aria-label": ariaLabel }, (shouldApplyApplicationRole ? { role: 'application' } : {})), React.createElement("div", { role: 'grid', "aria-label": ariaLabelForGrid, "aria-rowcount": items ? items.length : 0, "aria-colcount": adjustedColumns ? adjustedColumns.length : 0 }, React.createElement("div", { onKeyDown: this._onHeaderKeyDown, role: 'presentation' }, isHeaderVisible && (React.createElement(DetailsHeader_1.DetailsHeader, { ref: 'header', selectionMode: selectionMode, layoutMode: layoutMode, selection: selection, columns: adjustedColumns, onColumnClick: onColumnHeaderClick, onColumnContextMenu: onColumnHeaderContextMenu, onColumnResized: this._onColumnResized, onColumnIsSizingChanged: this._onColumnIsSizingChanged, onColumnAutoResized: this._onColumnAutoResized, groupNestingDepth: groupNestingDepth, isAllCollapsed: isCollapsed, onToggleCollapseAll: this._onToggleCollapse, ariaLabel: ariaLabelForListHeader, ariaLabelForSelectAllCheckbox: ariaLabelForSelectAllCheckbox, selectAllVisibility: selectAllVisibility }))), React.createElement("div", { ref: 'contentContainer', onKeyDown: this._onContentKeyDown, role: 'presentation' }, React.createElement(FocusZone_1.FocusZone, { ref: 'focusZone', className: styles.focusZone, direction: FocusZone_1.FocusZoneDirection.vertical, isInnerZoneKeystroke: function (ev) { return (ev.which === Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.right)); }, onActiveElementChanged: this._onActiveRowChanged }, React.createElement(index_1.SelectionZone, { ref: 'selectionZone', selection: selection, selectionPreservedOnEmptyClick: selectionPreservedOnEmptyClick, selectionMode: selectionMode, onItemInvoked: onItemInvoked, onItemContextMenu: onItemContextMenu }, groups ? (React.createElement(GroupedList_1.GroupedList, { groups: groups, groupProps: groupProps, items: items, onRenderCell: this._onRenderCell, selection: selection, selectionMode: selectionMode, dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: rowElementEventMap, listProps: additionalListProps, onGroupExpandStateChanged: this._onGroupExpandStateChanged, ref: 'groupedList' })) : (React.createElement(List_1.List, __assign({ role: null, items: items, onRenderCell: function (item, itemIndex) { return _this._onRenderCell(0, item, itemIndex); } }, additionalListProps, { ref: 'list' }))))))))); var _e; }; DetailsList.prototype.forceUpdate = function () { _super.prototype.forceUpdate.call(this); this._forceListUpdates(); }; DetailsList.prototype._onRenderRow = function (props, defaultRender) { return React.createElement(DetailsRow_1.DetailsRow, __assign({}, props)); }; DetailsList.prototype._onRenderCell = function (nestingDepth, item, index) { var _a = this.props, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.rowElementEventMap, onRenderMissingItem = _a.onRenderMissingItem, onRenderItemColumn = _a.onRenderItemColumn, _b = _a.onRenderRow, onRenderRow = _b === void 0 ? this._onRenderRow : _b, selectionMode = _a.selectionMode, viewport = _a.viewport, checkboxVisibility = _a.checkboxVisibility, getRowAriaLabel = _a.getRowAriaLabel, checkButtonAriaLabel = _a.checkButtonAriaLabel; var selection = this._selection; var dragDropHelper = this._dragDropHelper; var columns = this.state.adjustedColumns; if (!item) { if (onRenderMissingItem) { onRenderMissingItem(index); } return null; } return onRenderRow({ item: item, itemIndex: index, columns: columns, groupNestingDepth: nestingDepth, selectionMode: selectionMode, selection: selection, onDidMount: this._onRowDidMount, onWillUnmount: this._onRowWillUnmount, onRenderItemColumn: onRenderItemColumn, eventsToRegister: eventsToRegister, dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, viewport: viewport, checkboxVisibility: checkboxVisibility, getRowAriaLabel: getRowAriaLabel, checkButtonAriaLabel: checkButtonAriaLabel }, this._onRenderRow); }; DetailsList.prototype._onGroupExpandStateChanged = function (isSomeGroupExpanded) { this.setState({ isSomeGroupExpanded: isSomeGroupExpanded }); }; DetailsList.prototype._onColumnIsSizingChanged = function (column, isSizing) { this.setState({ isSizing: isSizing }); }; DetailsList.prototype._onHeaderKeyDown = function (ev) { if (ev.which === Utilities_1.KeyCodes.down) { if (this.refs.focusZone && this.refs.focusZone.focus()) { ev.preventDefault(); ev.stopPropagation(); } } }; DetailsList.prototype._onContentKeyDown = function (ev) { if (ev.which === Utilities_1.KeyCodes.up) { if (this.refs.header && this.refs.header.focus()) { ev.preventDefault(); ev.stopPropagation(); } } }; DetailsList.prototype._getGroupNestingDepth = function () { var groups = this.props.groups; var level = 0; var groupsInLevel = groups; while (groupsInLevel && groupsInLevel.length > 0) { level++; groupsInLevel = groupsInLevel[0].children; } return level; }; DetailsList.prototype._onRowDidMount = function (row) { var onRowDidMount = this.props.onRowDidMount; var index = row.props.itemIndex; this._activeRows[index] = row; // this is used for column auto resize this._setFocusToRowIfPending(row); if (onRowDidMount) { onRowDidMount(row.props.item, index); } }; DetailsList.prototype._setFocusToRowIfPending = function (row) { var index = row.props.itemIndex; if (this._initialFocusedIndex !== undefined && index === this._initialFocusedIndex) { if (this.refs.selectionZone) { this.refs.selectionZone.ignoreNextFocus(); } this._async.setTimeout(function () { return row.focus(); }, 0); delete this._initialFocusedIndex; } }; DetailsList.prototype._onRowWillUnmount = function (row) { var onRowWillUnmount = this.props.onRowWillUnmount; var index = row.props.itemIndex; delete this._activeRows[index]; this._events.off(row.refs.root); if (onRowWillUnmount) { onRowWillUnmount(row.props.item, index); } }; DetailsList.prototype._onToggleCollapse = function (collapsed) { this.setState({ isCollapsed: collapsed }); if (this.refs.groupedList) { this.refs.groupedList.toggleCollapseAll(collapsed); } }; DetailsList.prototype._forceListUpdates = function () { if (this.refs.groupedList) { this.refs.groupedList.forceUpdate(); } if (this.refs.list) { this.refs.list.forceUpdate(); } }; DetailsList.prototype._adjustColumns = function (newProps, forceUpdate, layoutMode) { var adjustedColumns = this._getAdjustedColumns(newProps, forceUpdate, layoutMode); var viewportWidth = this.props.viewport.width; if (adjustedColumns) { this.setState({ adjustedColumns: adjustedColumns, lastWidth: viewportWidth, layoutMode: layoutMode }); } }; /** Returns adjusted columns, given the viewport size and layout mode. */ DetailsList.prototype._getAdjustedColumns = function (newProps, forceUpdate, layoutMode) { var _this = this; var newColumns = newProps.columns, newItems = newProps.items, viewportWidth = newProps.viewport.width, selectionMode = newProps.selectionMode; if (layoutMode === undefined) { layoutMode = newProps.layoutMode; } var columns = this.props ? this.props.columns : []; var lastWidth = this.state ? this.state.lastWidth : -1; var lastSelectionMode = this.state ? this.state.lastSelectionMode : undefined; if (viewportWidth !== undefined) { if (!forceUpdate && lastWidth === viewportWidth && lastSelectionMode === selectionMode && (!columns || newColumns === columns)) { return; } } else { viewportWidth = this.props.viewport.width; } newColumns = newColumns || buildColumns(newItems, true); var adjustedColumns; if (layoutMode === DetailsList_Props_1.DetailsListLayoutMode.fixedColumns) { adjustedColumns = this._getFixedColumns(newColumns); } else { adjustedColumns = this._getJustifiedColumns(newColumns, viewportWidth, newProps); } // Preserve adjusted column calculated widths. adjustedColumns.forEach(function (column) { var overrides = _this._columnOverrides[column.key] = _this._columnOverrides[column.key] || {}; overrides.calculatedWidth = column.calculatedWidth; }); return adjustedColumns; }; /** Builds a set of columns based on the given columns mixed with the current overrides. */ DetailsList.prototype._getFixedColumns = function (newColumns) { var _this = this; return newColumns.map(function (column) { var newColumn = Utilities_1.assign({}, column, _this._columnOverrides[column.key]); if (!newColumn.calculatedWidth) { newColumn.calculatedWidth = newColumn.maxWidth || newColumn.minWidth || MIN_COLUMN_WIDTH; } return newColumn; }); }; /** Builds a set of columns to fix within the viewport width. */ DetailsList.prototype._getJustifiedColumns = function (newColumns, viewportWidth, props) { var selectionMode = props.selectionMode, groups = props.groups; var outerPadding = DEFAULT_INNER_PADDING; var rowCheckWidth = (selectionMode !== index_1.SelectionMode.none) ? CHECKBOX_WIDTH : 0; var groupExpandWidth = groups ? GROUP_EXPAND_WIDTH : 0; var totalWidth = 0; // offset because we have one less inner padding. var availableWidth = viewportWidth - (outerPadding + rowCheckWidth + groupExpandWidth); var adjustedColumns = newColumns.map(function (column, i) { var newColumn = Utilities_1.assign({}, column, { calculatedWidth: column.minWidth || MIN_COLUMN_WIDTH }); totalWidth += newColumn.calculatedWidth + (i > 0 ? DEFAULT_INNER_PADDING : 0); return newColumn; }); var lastIndex = adjustedColumns.length - 1; // Remove collapsable columns. while (lastIndex > 1 && totalWidth > availableWidth) { var column = adjustedColumns[lastIndex]; if (column.isCollapsable) { totalWidth -= column.calculatedWidth + DEFAULT_INNER_PADDING; adjustedColumns.splice(lastIndex, 1); } lastIndex--; } // Then expand columns starting at the beginning, until we've filled the width. for (var i = 0; i < adjustedColumns.length && totalWidth < availableWidth; i++) { var column = adjustedColumns[i]; var maxWidth = column.maxWidth; var minWidth = column.minWidth || maxWidth || MIN_COLUMN_WIDTH; var spaceLeft = availableWidth - totalWidth; var increment = maxWidth ? Math.min(spaceLeft, maxWidth - minWidth) : spaceLeft; // Add remaining space to the last column. if (i === (adjustedColumns.length - 1)) { increment = spaceLeft; } column.calculatedWidth += increment; totalWidth += increment; } // Mark the last column as not resizable to avoid extra scrolling issues. if (adjustedColumns.length) { adjustedColumns[adjustedColumns.length - 1].isResizable = false; } return adjustedColumns; }; DetailsList.prototype._onColumnResized = function (resizingColumn, newWidth) { var newCalculatedWidth = Math.max(resizingColumn.minWidth || MIN_COLUMN_WIDTH, newWidth); if (this.props.onColumnResize) { this.props.onColumnResize(resizingColumn, newCalculatedWidth); } this._columnOverrides[resizingColumn.key].calculatedWidth = newCalculatedWidth; this._adjustColumns(this.props, true, DetailsList_Props_1.DetailsListLayoutMode.fixedColumns); this._forceListUpdates(); }; /** * Callback function when double clicked on the details header column resizer * which will measure the column cells of all the active rows and resize the * column to the max cell width. * * @private * @param {IColumn} column (double clicked column definition) * @param {number} columnIndex (double clicked column index) * @todo min width 100 should be changed to const value and should be consistent with the value used on _onSizerMove method in DetailsHeader */ DetailsList.prototype._onColumnAutoResized = function (column, columnIndex) { var _this = this; var max = 0; var count = 0; var totalCount = Object.keys(this._activeRows).length; for (var key in this._activeRows) { if (this._activeRows.hasOwnProperty(key)) { var currentRow = this._activeRows[key]; currentRow.measureCell(columnIndex, function (width) { max = Math.max(max, width); count++; if (count === totalCount) { _this._onColumnResized(column, max); } }); } } }; /** * Call back function when an element in FocusZone becomes active. It will transalate it into item * and call onActiveItemChanged callback if specified. * * @private * @param {el} row element that became active in Focus Zone * @param {ev} focus event from Focus Zone */ DetailsList.prototype._onActiveRowChanged = function (el, ev) { var _a = this.props, items = _a.items, onActiveItemChanged = _a.onActiveItemChanged; if (!onActiveItemChanged || !el) { return; } var index = Number(el.getAttribute('data-item-index')); if (index >= 0) { onActiveItemChanged(items[index], index, ev); } }; ; return DetailsList; }(Utilities_1.BaseComponent)); DetailsList.defaultProps = { layoutMode: DetailsList_Props_1.DetailsListLayoutMode.justified, selectionMode: index_1.SelectionMode.multiple, constrainMode: DetailsList_Props_1.ConstrainMode.horizontalConstrained, checkboxVisibility: DetailsList_Props_1.CheckboxVisibility.onHover, isHeaderVisible: true }; __decorate([ Utilities_1.autobind ], DetailsList.prototype, "_onRenderRow", null); DetailsList = __decorate([ withViewport_1.withViewport ], DetailsList); exports.DetailsList = DetailsList; function buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey, isMultiline) { var columns = []; if (items && items.length) { var firstItem = items[0]; var isFirstColumn = true; for (var propName in firstItem) { if (firstItem.hasOwnProperty(propName)) { columns.push({ key: propName, name: propName, fieldName: propName, minWidth: MIN_COLUMN_WIDTH, maxWidth: 300, isCollapsable: !!columns.length, isMultiline: (isMultiline === undefined) ? false : isMultiline, isSorted: sortedColumnKey === propName, isSortedDescending: !!isSortedDescending, isRowHeader: false, columnActionsMode: DetailsList_Props_1.ColumnActionsMode.clickable, isResizable: canResizeColumns, onColumnClick: onColumnClick, isGrouped: groupedColumnKey === propName }); isFirstColumn = false; } } } return columns; } exports.buildColumns = buildColumns; /***/ }, /* 222 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /** * Enum to describe how a particular column header behaves.... This enum is used to * to specify the property IColumn:columnActionsMode. * If IColumn:columnActionsMode is undefined, then it's equivalent to ColumnActionsMode.clickable */ var ColumnActionsMode; (function (ColumnActionsMode) { /** * Renders the column header as disabled. */ ColumnActionsMode[ColumnActionsMode["disabled"] = 0] = "disabled"; /** * Renders the column header is clickable. */ ColumnActionsMode[ColumnActionsMode["clickable"] = 1] = "clickable"; /** * Renders the column header ias clickable and displays the dropdown cheveron. */ ColumnActionsMode[ColumnActionsMode["hasDropdown"] = 2] = "hasDropdown"; })(ColumnActionsMode = exports.ColumnActionsMode || (exports.ColumnActionsMode = {})); var ConstrainMode; (function (ConstrainMode) { /** If specified, lets the content grow which allows the page to manage scrolling. */ ConstrainMode[ConstrainMode["unconstrained"] = 0] = "unconstrained"; /** * If specified, constrains the list to the given layout space. */ ConstrainMode[ConstrainMode["horizontalConstrained"] = 1] = "horizontalConstrained"; })(ConstrainMode = exports.ConstrainMode || (exports.ConstrainMode = {})); var DetailsListLayoutMode; (function (DetailsListLayoutMode) { /** * Lets the user resize columns and makes not attempt to fit them. */ DetailsListLayoutMode[DetailsListLayoutMode["fixedColumns"] = 0] = "fixedColumns"; /** * Manages which columns are visible, tries to size them according to their min/max rules and drops * off columns that can't fit and have isCollapsable set. */ DetailsListLayoutMode[DetailsListLayoutMode["justified"] = 1] = "justified"; })(DetailsListLayoutMode = exports.DetailsListLayoutMode || (exports.DetailsListLayoutMode = {})); var CheckboxVisibility; (function (CheckboxVisibility) { /** * Visible on hover. */ CheckboxVisibility[CheckboxVisibility["onHover"] = 0] = "onHover"; /** * Visible always. */ CheckboxVisibility[CheckboxVisibility["always"] = 1] = "always"; /** * Hide checkboxes. */ CheckboxVisibility[CheckboxVisibility["hidden"] = 2] = "hidden"; })(CheckboxVisibility = exports.CheckboxVisibility || (exports.CheckboxVisibility = {})); /***/ }, /* 223 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var DetailsList_Props_1 = __webpack_require__(222); var FocusZone_1 = __webpack_require__(50); var Check_1 = __webpack_require__(224); var Icon_1 = __webpack_require__(141); var Layer_1 = __webpack_require__(132); var GroupSpacer_1 = __webpack_require__(228); var interfaces_1 = __webpack_require__(217); var stylesImport = __webpack_require__(230); var styles = stylesImport; var MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button var MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button var INNER_PADDING = 16; var SelectAllVisibility; (function (SelectAllVisibility) { SelectAllVisibility[SelectAllVisibility["none"] = 0] = "none"; SelectAllVisibility[SelectAllVisibility["hidden"] = 1] = "hidden"; SelectAllVisibility[SelectAllVisibility["visible"] = 2] = "visible"; })(SelectAllVisibility = exports.SelectAllVisibility || (exports.SelectAllVisibility = {})); var DetailsHeader = (function (_super) { __extends(DetailsHeader, _super); function DetailsHeader(props) { var _this = _super.call(this, props) || this; _this.state = { columnResizeDetails: null, groupNestingDepth: _this.props.groupNestingDepth, isAllCollapsed: _this.props.isAllCollapsed }; _this._onToggleCollapseAll = _this._onToggleCollapseAll.bind(_this); _this._onSelectAllClicked = _this._onSelectAllClicked.bind(_this); return _this; } DetailsHeader.prototype.componentDidMount = function () { var selection = this.props.selection; this._events.on(selection, interfaces_1.SELECTION_CHANGE, this._onSelectionChanged); // We need to use native on this to avoid MarqueeSelection from handling the event before us. this._events.on(this.refs.root, 'mousedown', this._onRootMouseDown); }; DetailsHeader.prototype.componentWillReceiveProps = function (newProps) { var groupNestingDepth = this.state.groupNestingDepth; if (newProps.groupNestingDepth !== groupNestingDepth) { this.setState({ groupNestingDepth: newProps.groupNestingDepth }); } }; DetailsHeader.prototype.render = function () { var _this = this; var _a = this.props, columns = _a.columns, ariaLabel = _a.ariaLabel, ariaLabelForSelectAllCheckbox = _a.ariaLabelForSelectAllCheckbox, selectAllVisibility = _a.selectAllVisibility; var _b = this.state, isAllSelected = _b.isAllSelected, columnResizeDetails = _b.columnResizeDetails, isSizing = _b.isSizing, groupNestingDepth = _b.groupNestingDepth, isAllCollapsed = _b.isAllCollapsed; return (React.createElement("div", { role: 'row', "aria-label": ariaLabel, className: Utilities_1.css('ms-DetailsHeader', styles.root, (_c = {}, _c['is-allSelected ' + styles.rootIsAllSelected] = isAllSelected, _c['is-selectAllHidden ' + styles.rootIsSelectAllHidden] = selectAllVisibility === SelectAllVisibility.hidden, _c['is-resizingColumn'] = !!columnResizeDetails && isSizing, _c)), ref: 'root', onMouseMove: this._onRootMouseMove, "data-automationid": 'DetailsHeader' }, React.createElement(FocusZone_1.FocusZone, { ref: 'focusZone', direction: FocusZone_1.FocusZoneDirection.horizontal }, (selectAllVisibility !== SelectAllVisibility.none) ? (React.createElement("div", { className: Utilities_1.css('ms-DetailsHeader-cellWrapper', styles.cellWrapper), role: 'columnheader' }, React.createElement("button", { type: 'button', className: Utilities_1.css('ms-DetailsHeader-cell is-check', styles.cell, styles.cellIsCheck), onClick: this._onSelectAllClicked, "aria-label": ariaLabelForSelectAllCheckbox, "aria-pressed": isAllSelected }, React.createElement(Check_1.Check, { checked: isAllSelected })))) : null, groupNestingDepth > 0 ? (React.createElement("button", { type: 'button', className: Utilities_1.css('ms-DetailsHeader-cell', styles.cell), onClick: this._onToggleCollapseAll }, React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-DetailsHeader-collapseButton', styles.collapseButton, isAllCollapsed && ('is-collapsed ' + styles.collapseButtonIsCollapsed)), iconName: 'ChevronDown' }))) : (null), GroupSpacer_1.GroupSpacer({ count: groupNestingDepth - 1 }), columns.map(function (column, columnIndex) { return (React.createElement("div", { key: column.key, className: Utilities_1.css('ms-DetailsHeader-cellWrapper', styles.cellWrapper), role: 'columnheader', "aria-sort": column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none' }, React.createElement("button", { type: 'button', key: column.fieldName, disabled: column.columnActionsMode === DetailsList_Props_1.ColumnActionsMode.disabled, className: Utilities_1.css('ms-DetailsHeader-cell', styles.cell, column.headerClassName, (_a = {}, _a['is-actionable ' + styles.cellIsActionable] = column.columnActionsMode !== DetailsList_Props_1.ColumnActionsMode.disabled, _a['is-empty ' + styles.cellIsEmpty] = !column.name, _a['is-icon-visible'] = column.isSorted || column.isGrouped || column.isFiltered, _a)), style: { width: column.calculatedWidth + INNER_PADDING }, onClick: _this._onColumnClick.bind(_this, column), onContextMenu: _this._onColumnContextMenu.bind(_this, column), "aria-haspopup": column.columnActionsMode === DetailsList_Props_1.ColumnActionsMode.hasDropdown, "aria-label": column.ariaLabel || column.name, "data-automationid": 'ColumnsHeaderColumn', "data-item-key": column.key }, column.isFiltered && (React.createElement(Icon_1.Icon, { className: styles.nearIcon, iconName: 'Filter' })), column.isSorted && (React.createElement(Icon_1.Icon, { className: styles.nearIcon, iconName: column.isSortedDescending ? 'SortDown' : 'SortUp' })), column.isGrouped && (React.createElement(Icon_1.Icon, { className: styles.nearIcon, iconName: 'GroupedDescending' })), column.iconClassName && (React.createElement(Icon_1.Icon, { className: Utilities_1.css(styles.nearIcon, column.iconClassName), iconName: column.iconName })), column.name, column.columnActionsMode === DetailsList_Props_1.ColumnActionsMode.hasDropdown && (React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-DetailsHeader-filterChevron', styles.filterChevron), iconName: 'ChevronDown' }))), (column.isResizable) && (React.createElement("div", { "data-sizer-index": columnIndex, className: Utilities_1.css('ms-DetailsHeader-cell is-sizer', styles.cell, styles.cellIsSizer, (_b = {}, _b['is-resizing ' + styles.cellIsResizing] = isSizing && columnResizeDetails.columnIndex === columnIndex, _b)), onDoubleClick: _this._onSizerDoubleClick.bind(_this, columnIndex) })))); var _a, _b; })), isSizing && (React.createElement(Layer_1.Layer, null, React.createElement("div", { className: Utilities_1.css(isSizing && styles.sizingOverlay), onMouseMove: this._onSizerMouseMove, onMouseUp: this._onSizerMouseUp }))))); var _c; }; /** Set focus to the active thing in the focus area. */ DetailsHeader.prototype.focus = function () { return this.refs.focusZone.focus(); }; /** * double click on the column sizer will auto ajust column width * to fit the longest content among current rendered rows. * * @private * @param {number} columnIndex (index of the column user double clicked) * @param {React.MouseEvent} ev (mouse double click event) */ DetailsHeader.prototype._onSizerDoubleClick = function (columnIndex, ev) { var _a = this.props, onColumnAutoResized = _a.onColumnAutoResized, columns = _a.columns; if (onColumnAutoResized) { onColumnAutoResized(columns[columnIndex], columnIndex); } }; /** * Called when the select all toggle is clicked. */ DetailsHeader.prototype._onSelectAllClicked = function () { var selection = this.props.selection; selection.toggleAllSelected(); }; DetailsHeader.prototype._onRootMouseDown = function (ev) { var columnIndexAttr = ev.target.getAttribute('data-sizer-index'); var columnIndex = Number(columnIndexAttr); var columns = this.props.columns; if (columnIndexAttr === null || ev.button !== MOUSEDOWN_PRIMARY_BUTTON) { // Ignore anything except the primary button. return; } this.setState({ columnResizeDetails: { columnIndex: columnIndex, columnMinWidth: columns[columnIndex].calculatedWidth, originX: ev.clientX } }); ev.preventDefault(); ev.stopPropagation(); }; DetailsHeader.prototype._onRootMouseMove = function (ev) { var _a = this.state, columnResizeDetails = _a.columnResizeDetails, isSizing = _a.isSizing; if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) { this.setState({ isSizing: true }); } }; /** * mouse move event handler in the header * it will set isSizing state to true when user clicked on the sizer and move the mouse. * * @private * @param {React.MouseEvent} ev (mouse move event) */ DetailsHeader.prototype._onSizerMouseMove = function (ev) { var // use buttons property here since ev.button in some edge case is not upding well during the move. // but firefox doesn't support it, so we set the default value when it is not defined. buttons = ev.buttons; var _a = this.props, onColumnIsSizingChanged = _a.onColumnIsSizingChanged, onColumnResized = _a.onColumnResized, columns = _a.columns; var columnResizeDetails = this.state.columnResizeDetails; if (buttons !== undefined && buttons !== MOUSEMOVE_PRIMARY_BUTTON) { // cancel mouse down event and return early when the primary button is not pressed this._onSizerMouseUp(ev); return; } if (ev.clientX !== columnResizeDetails.originX) { if (onColumnIsSizingChanged) { onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], true); } } if (onColumnResized) { var movement = ev.clientX - columnResizeDetails.originX; if (Utilities_1.getRTL()) { movement = -movement; } onColumnResized(columns[columnResizeDetails.columnIndex], columnResizeDetails.columnMinWidth + movement); } }; /** * mouse up event handler in the header * clear the resize related state. * This is to ensure we can catch double click event * * @private * @param {React.MouseEvent} ev (mouse up event) */ DetailsHeader.prototype._onSizerMouseUp = function (ev) { var _a = this.props, columns = _a.columns, onColumnIsSizingChanged = _a.onColumnIsSizingChanged; var columnResizeDetails = this.state.columnResizeDetails; this.setState({ columnResizeDetails: null, isSizing: false }); if (onColumnIsSizingChanged) { onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], false); } }; DetailsHeader.prototype._onSelectionChanged = function () { var isAllSelected = this.props.selection.isAllSelected(); if (this.state.isAllSelected !== isAllSelected) { this.setState({ isAllSelected: isAllSelected }); } }; DetailsHeader.prototype._onColumnClick = function (column, ev) { var onColumnClick = this.props.onColumnClick; if (column.onColumnClick) { column.onColumnClick(ev, column); } if (onColumnClick) { onColumnClick(ev, column); } }; DetailsHeader.prototype._onColumnContextMenu = function (column, ev) { var onColumnContextMenu = this.props.onColumnContextMenu; if (column.onContextMenu) { column.onColumnContextMenu(column, ev); } if (onColumnContextMenu) { onColumnContextMenu(column, ev); } }; DetailsHeader.prototype._onToggleCollapseAll = function () { var onToggleCollapseAll = this.props.onToggleCollapseAll; var newCollapsed = !this.state.isAllCollapsed; this.setState({ isAllCollapsed: newCollapsed }); if (onToggleCollapseAll) { onToggleCollapseAll(newCollapsed); } }; return DetailsHeader; }(Utilities_1.BaseComponent)); DetailsHeader.defaultProps = { isSelectAllVisible: SelectAllVisibility.visible }; __decorate([ Utilities_1.autobind ], DetailsHeader.prototype, "_onSelectAllClicked", null); __decorate([ Utilities_1.autobind ], DetailsHeader.prototype, "_onRootMouseDown", null); __decorate([ Utilities_1.autobind ], DetailsHeader.prototype, "_onRootMouseMove", null); __decorate([ Utilities_1.autobind ], DetailsHeader.prototype, "_onSizerMouseMove", null); __decorate([ Utilities_1.autobind ], DetailsHeader.prototype, "_onSizerMouseUp", null); exports.DetailsHeader = DetailsHeader; /***/ }, /* 224 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(225)); /***/ }, /* 225 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(226)); /***/ }, /* 226 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var Icon_1 = __webpack_require__(141); var stylesImport = __webpack_require__(227); var styles = stylesImport; var Check = (function (_super) { __extends(Check, _super); function Check() { return _super !== null && _super.apply(this, arguments) || this; } Check.prototype.shouldComponentUpdate = function (newProps) { return this.props.isChecked !== newProps.isChecked || this.props.checked !== newProps.checked; }; Check.prototype.render = function () { var _a = this.props, isChecked = _a.isChecked, checked = _a.checked; isChecked = isChecked || checked; return (React.createElement("div", { className: Utilities_1.css('ms-Check', styles.root, isChecked && ('is-checked ' + styles.rootIsChecked)) }, React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Check-background', styles.background), iconName: 'fullCircleMask' }), React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Check-circle', styles.circle), iconName: 'circleRing' }), React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Check-check', styles.check), iconName: 'checkMark' }))); }; return Check; }(Utilities_1.BaseComponent)); Check.defaultProps = { isChecked: false }; exports.Check = Check; /***/ }, /* 227 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_62ed7d7f', rootIsChecked: 'rootIsChecked_62ed7d7f', background: 'background_62ed7d7f', circle: 'circle_62ed7d7f', check: 'check_62ed7d7f', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_62ed7d7f{line-height:1;width:24px;height:24px;vertical-align:top;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rootIsChecked_62ed7d7f,.root_62ed7d7f:focus,.root_62ed7d7f:hover{opacity:1}.background_62ed7d7f,.check_62ed7d7f,.circle_62ed7d7f{position:absolute;height:24px;width:24px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:24px}.background_62ed7d7f{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.rootIsChecked_62ed7d7f .background_62ed7d7f{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.circle_62ed7d7f{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.rootIsChecked_62ed7d7f .circle_62ed7d7f{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.check_62ed7d7f{width:auto;height:auto;color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";font-size:12px}.rootIsChecked_62ed7d7f .check_62ed7d7f{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-weight:900}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 228 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable:no-unused-variable */ var React = __webpack_require__(2); /* tslint:enable:no-unused-variable */ var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(229); var styles = stylesImport; var SPACER_WIDTH = 36; exports.GroupSpacer = function (props) { return props.count > 0 && (React.createElement("span", { className: Utilities_1.css('ms-GroupSpacer', styles.root), style: { width: props.count * SPACER_WIDTH } })); }; /***/ }, /* 229 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_e4cefdbe', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_e4cefdbe{display:inline-block}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 230 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_67d3f40a', rootIsSelectAllHidden: 'rootIsSelectAllHidden_67d3f40a', cell: 'cell_67d3f40a', cellIsCheck: 'cellIsCheck_67d3f40a', rootIsAllSelected: 'rootIsAllSelected_67d3f40a', cellWrapper: 'cellWrapper_67d3f40a', cellIsActionable: 'cellIsActionable_67d3f40a', cellIsSizer: 'cellIsSizer_67d3f40a', cellIsEmpty: 'cellIsEmpty_67d3f40a', cellIsResizing: 'cellIsResizing_67d3f40a', collapseButton: 'collapseButton_67d3f40a', collapseButtonIsCollapsed: 'collapseButtonIsCollapsed_67d3f40a', nearIcon: 'nearIcon_67d3f40a', filterChevron: 'filterChevron_67d3f40a', sizingOverlay: 'sizingOverlay_67d3f40a', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_67d3f40a{display:inline-block;min-width:100%;vertical-align:top;height:36px;line-height:36px;white-space:nowrap;padding-bottom:1px;border-bottom:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.root_67d3f40a.rootIsSelectAllHidden_67d3f40a .cell_67d3f40a.cellIsCheck_67d3f40a{visibility:hidden}.cell_67d3f40a.cellIsCheck_67d3f40a .ms-Check-circle{opacity:0}.cell_67d3f40a.cellIsCheck_67d3f40a:focus .ms-Check-circle,.cell_67d3f40a.cellIsCheck_67d3f40a:hover .ms-Check-circle,.root_67d3f40a.rootIsAllSelected_67d3f40a .ms-Check-circle{opacity:1}.cellWrapper_67d3f40a{display:inline-block;position:relative}.cell_67d3f40a{font-size:12px;font-weight:400;background:0 0;color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";font-weight:400;position:relative;display:inline-block;box-sizing:border-box;padding:0 8px;border:none;line-height:inherit;margin:0;height:36px;vertical-align:top;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cell_67d3f40a::-moz-focus-inner{border:0}.cell_67d3f40a{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .cell_67d3f40a:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .cell_67d3f40a{text-align:left}html[dir=rtl] .cell_67d3f40a{text-align:right}html[dir=ltr] .cell_67d3f40a{text-align:left}html[dir=rtl] .cell_67d3f40a{text-align:right}.cell_67d3f40a.cellIsCheck_67d3f40a{position:relative;padding:6px;margin:0}.cell_67d3f40a.cellIsActionable_67d3f40a{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.cell_67d3f40a.cellIsActionable_67d3f40a:hover{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "neutralLighterAlt", "defaultValue": "#f8f8f8" }, { "rawString": "}.cell_67d3f40a.cellIsActionable_67d3f40a:active{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.cell_67d3f40a.cellIsSizer_67d3f40a{position:absolute;width:16px;cursor:ew-resize;bottom:0;top:0;height:inherit;background:0 0}html[dir=ltr] .cell_67d3f40a.cellIsSizer_67d3f40a{margin-left:-10px}html[dir=rtl] .cell_67d3f40a.cellIsSizer_67d3f40a{margin-right:-10px}.cell_67d3f40a.cellIsEmpty_67d3f40a{text-overflow:clip}.cell_67d3f40a.cellIsSizer_67d3f40a:after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";opacity:0}.cell_67d3f40a.cellIsSizer_67d3f40a.cellIsResizing_67d3f40a:after,.cell_67d3f40a.cellIsSizer_67d3f40a:hover:after{opacity:1;transition:opacity .3s linear}.collapseButton_67d3f40a{text-align:center;-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear;width:20px;outline:0}.collapseButton_67d3f40a.collapseButtonIsCollapsed_67d3f40a{-webkit-transform:rotate(0);transform:rotate(0)}.cell_67d3f40a .nearIcon_67d3f40a{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";opacity:1}html[dir=ltr] .cell_67d3f40a .nearIcon_67d3f40a{padding-right:4px}html[dir=rtl] .cell_67d3f40a .nearIcon_67d3f40a{padding-left:4px}.cell_67d3f40a .filterChevron_67d3f40a{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";vertical-align:middle}[dir=ltr] .cell_67d3f40a .filterChevron_67d3f40a{padding-left:4px}[dir=rtl] .cell_67d3f40a .filterChevron_67d3f40a{padding-right:4px}.sizingOverlay_67d3f40a{position:absolute;left:0;top:0;right:0;bottom:0;cursor:ew-resize;background:rgba(255,255,255,0)}html[dir=ltr] .cell_67d3f40a .collapseButton_67d3f40a{padding-right:0}html[dir=rtl] .cell_67d3f40a .collapseButton_67d3f40a{padding-left:0}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 231 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var DetailsList_Props_1 = __webpack_require__(222); var DetailsRowCheck_1 = __webpack_require__(232); var GroupSpacer_1 = __webpack_require__(228); var DetailsRowFields_1 = __webpack_require__(234); var FocusZone_1 = __webpack_require__(50); var interfaces_1 = __webpack_require__(217); var stylesImport = __webpack_require__(233); var styles = stylesImport; var Styling_1 = __webpack_require__(68); var DEFAULT_DROPPING_CSS_CLASS = 'is-dropping'; var DetailsRow = (function (_super) { __extends(DetailsRow, _super); function DetailsRow(props) { var _this = _super.call(this, props) || this; _this.state = { selectionState: _this._getSelectionState(props), columnMeasureInfo: null, isDropping: false, groupNestingDepth: props.groupNestingDepth }; _this._hasSetFocus = false; _this._droppingClassNames = ''; _this._updateDroppingState = _this._updateDroppingState.bind(_this); return _this; } DetailsRow.prototype.componentDidMount = function () { var dragDropHelper = this.props.dragDropHelper; if (dragDropHelper) { this._dragDropSubscription = dragDropHelper.subscribe(this.refs.root, this._events, this._getRowDragDropOptions()); } this._events.on(this.props.selection, interfaces_1.SELECTION_CHANGE, this._onSelectionChanged); if (this.props.onDidMount && this.props.item) { // If the item appears later, we should wait for it before calling this method. this._hasMounted = true; this.props.onDidMount(this); } }; DetailsRow.prototype.componentDidUpdate = function (previousProps) { var state = this.state; var _a = this.props, item = _a.item, onDidMount = _a.onDidMount; var columnMeasureInfo = state.columnMeasureInfo; if (this.props.itemIndex !== previousProps.itemIndex || this.props.item !== previousProps.item || this.props.dragDropHelper !== previousProps.dragDropHelper) { if (this._dragDropSubscription) { this._dragDropSubscription.dispose(); delete this._dragDropSubscription; } if (this.props.dragDropHelper) { this._dragDropSubscription = this.props.dragDropHelper.subscribe(this.refs.root, this._events, this._getRowDragDropOptions()); } } if (columnMeasureInfo && columnMeasureInfo.index >= 0) { var newWidth = this.refs.cellMeasurer.getBoundingClientRect().width; columnMeasureInfo.onMeasureDone(newWidth); this.setState({ columnMeasureInfo: null }); } if (item && onDidMount && !this._hasMounted) { this._hasMounted = true; onDidMount(this); } }; DetailsRow.prototype.componentWillUnmount = function () { var _a = this.props, item = _a.item, onWillUnmount = _a.onWillUnmount; // Only call the onWillUnmount callback if we have an item. if (onWillUnmount && item) { onWillUnmount(this); } if (this._dragDropSubscription) { this._dragDropSubscription.dispose(); delete this._dragDropSubscription; } }; DetailsRow.prototype.componentWillReceiveProps = function (newProps) { this.setState({ selectionState: this._getSelectionState(newProps), groupNestingDepth: newProps.groupNestingDepth }); }; DetailsRow.prototype.render = function () { var _a = this.props, columns = _a.columns, dragDropEvents = _a.dragDropEvents, item = _a.item, itemIndex = _a.itemIndex, _b = _a.onRenderCheck, onRenderCheck = _b === void 0 ? this._onRenderCheck : _b, onRenderItemColumn = _a.onRenderItemColumn, selectionMode = _a.selectionMode, viewport = _a.viewport, checkboxVisibility = _a.checkboxVisibility, getRowAriaLabel = _a.getRowAriaLabel, checkButtonAriaLabel = _a.checkButtonAriaLabel, selection = _a.selection; var _c = this.state, _d = _c.selectionState, isSelected = _d.isSelected, anySelected = _d.anySelected, columnMeasureInfo = _c.columnMeasureInfo, isDropping = _c.isDropping, groupNestingDepth = _c.groupNestingDepth; var isDraggable = Boolean(dragDropEvents && dragDropEvents.canDrag && dragDropEvents.canDrag(item)); var droppingClassName = isDropping ? (this._droppingClassNames ? this._droppingClassNames : DEFAULT_DROPPING_CSS_CLASS) : ''; var ariaLabel = getRowAriaLabel ? getRowAriaLabel(item) : null; var canSelect = selection.canSelectItem(item); var isContentUnselectable = selectionMode === interfaces_1.SelectionMode.multiple; return (React.createElement("div", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), { ref: 'root', role: 'row', "aria-label": ariaLabel, className: Utilities_1.css('ms-DetailsRow', Styling_1.AnimationClassNames.fadeIn400, styles.root, droppingClassName, (_e = {}, _e['is-contentUnselectable ' + styles.rootIsContentUnselectable] = isContentUnselectable, _e['is-selected ' + styles.rootIsSelected] = isSelected, _e['is-check-visible ' + styles.rootIsCheckVisible] = checkboxVisibility === DetailsList_Props_1.CheckboxVisibility.always, _e)), "data-is-focusable": true, "data-selection-index": itemIndex, "data-item-index": itemIndex, "aria-rowindex": itemIndex, "data-is-draggable": isDraggable, draggable: isDraggable, "data-automationid": 'DetailsRow', style: { minWidth: viewport ? viewport.width : 0 }, "aria-selected": isSelected }), React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal }, (selectionMode !== interfaces_1.SelectionMode.none && checkboxVisibility !== DetailsList_Props_1.CheckboxVisibility.hidden) && (React.createElement("span", { role: 'gridcell' }, onRenderCheck({ isSelected: isSelected, anySelected: anySelected, ariaLabel: checkButtonAriaLabel, canSelect: canSelect }))), GroupSpacer_1.GroupSpacer({ count: groupNestingDepth }), item && (React.createElement(DetailsRowFields_1.DetailsRowFields, { columns: columns, item: item, itemIndex: itemIndex, onRenderItemColumn: onRenderItemColumn })), columnMeasureInfo && (React.createElement("span", { className: Utilities_1.css('ms-DetailsRow-cellMeasurer ms-DetailsRow-cell', styles.cellMeasurer, styles.cell), ref: 'cellMeasurer' }, React.createElement(DetailsRowFields_1.DetailsRowFields, { columns: [columnMeasureInfo.column], item: item, itemIndex: itemIndex, onRenderItemColumn: onRenderItemColumn })))))); var _e; }; /** * measure cell at index. and call the call back with the measured cell width when finish measure * * @param {number} index (the cell index) * @param {(width: number) => void} onMeasureDone (the call back function when finish measure) */ DetailsRow.prototype.measureCell = function (index, onMeasureDone) { var column = Utilities_1.assign({}, this.props.columns[index]); column.minWidth = 0; column.maxWidth = 999999; delete column.calculatedWidth; this.setState({ columnMeasureInfo: { index: index, column: column, onMeasureDone: onMeasureDone } }); }; DetailsRow.prototype.focus = function () { if (this.refs && this.refs.root) { this.refs.root.tabIndex = 0; this.refs.root.focus(); } }; DetailsRow.prototype._onRenderCheck = function (props) { return React.createElement(DetailsRowCheck_1.DetailsRowCheck, __assign({}, props)); }; DetailsRow.prototype._getSelectionState = function (props) { var itemIndex = props.itemIndex, selection = props.selection; return { isSelected: selection.isIndexSelected(itemIndex), anySelected: selection.getSelectedCount() > 0 }; }; DetailsRow.prototype._onSelectionChanged = function () { var selectionState = this._getSelectionState(this.props); if (!Utilities_1.shallowCompare(selectionState, this.state.selectionState)) { this.setState({ selectionState: selectionState }); } }; DetailsRow.prototype._getRowDragDropOptions = function () { var _a = this.props, item = _a.item, itemIndex = _a.itemIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister; var options = { eventMap: eventsToRegister, selectionIndex: itemIndex, context: { data: item, index: itemIndex }, canDrag: dragDropEvents.canDrag, canDrop: dragDropEvents.canDrop, onDragStart: dragDropEvents.onDragStart, updateDropState: this._updateDroppingState, onDrop: dragDropEvents.onDrop, onDragEnd: dragDropEvents.onDragEnd, }; return options; }; /** * update isDropping state based on the input value, which is used to change style during drag and drop * * when change to true, that means drag enter. we will add default dropping class name * or the custom dropping class name (return result from onDragEnter) to the root elemet. * * when change to false, that means drag leave. we will remove the dropping class name from root element. * * @private * @param {boolean} newValue (new isDropping state value) * @param {DragEvent} event (the event trigger dropping state change which can be dragenter, dragleave etc) */ DetailsRow.prototype._updateDroppingState = function (newValue, event) { var _a = this.state, selectionState = _a.selectionState, isDropping = _a.isDropping; var _b = this.props, dragDropEvents = _b.dragDropEvents, item = _b.item; if (!newValue) { if (dragDropEvents.onDragLeave) { dragDropEvents.onDragLeave(item, event); } } else { if (dragDropEvents.onDragEnter) { this._droppingClassNames = dragDropEvents.onDragEnter(item, event); } } if (isDropping !== newValue) { this.setState({ selectionState: selectionState, isDropping: newValue }); } }; return DetailsRow; }(Utilities_1.BaseComponent)); exports.DetailsRow = DetailsRow; /***/ }, /* 232 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable:no-unused-variable */ var React = __webpack_require__(2); /* tslint:enable:no-unused-variable */ var Utilities_1 = __webpack_require__(10); var Check_1 = __webpack_require__(224); var stylesImport = __webpack_require__(233); var styles = stylesImport; exports.DetailsRowCheck = function (props) { var selected = props.isSelected || props.selected; return (React.createElement("button", { type: 'button', className: Utilities_1.css('ms-DetailsRow-check', styles.check, (_a = {}, _a[styles.checkDisabled] = !props.canSelect, _a['ms-DetailsRow-check--isDisabled'] = !props.canSelect, _a)), role: 'button', "aria-pressed": selected, "data-selection-toggle": true, "data-automationid": 'DetailsRowCheck', "aria-label": props.ariaLabel }, React.createElement(Check_1.Check, { checked: selected }))); var _a; }; /***/ }, /* 233 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_4b15dcc8', rootIsSelected: 'rootIsSelected_4b15dcc8', rootIsContentUnselectable: 'rootIsContentUnselectable_4b15dcc8', cell: 'cell_4b15dcc8', isMultiline: 'isMultiline_4b15dcc8', fields: 'fields_4b15dcc8', check: 'check_4b15dcc8', checkDisabled: 'checkDisabled_4b15dcc8', rootIsCheckVisible: 'rootIsCheckVisible_4b15dcc8', cellMeasurer: 'cellMeasurer_4b15dcc8', checkSpacer: 'checkSpacer_4b15dcc8', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_4b15dcc8{display:inline-block;min-width:100%;min-height:36px;margin:1px 0;vertical-align:top;white-space:nowrap;padding:0;box-sizing:border-box;background:0 0;border:none;vertical-align:top;line-height:16px}.root_4b15dcc8::-moz-focus-inner{border:0}.root_4b15dcc8{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .root_4b15dcc8:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .root_4b15dcc8{text-align:left}html[dir=rtl] .root_4b15dcc8{text-align:right}.root_4b15dcc8:hover{background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.rootIsSelected_4b15dcc8{background:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.rootIsSelected_4b15dcc8:hover{background:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": "}.rootIsContentUnselectable_4b15dcc8{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.cell_4b15dcc8{display:inline-block;position:relative;box-sizing:border-box;padding:10px 0;margin:0 8px;min-height:36px;vertical-align:top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cell_4b15dcc8>button{max-width:100%}.isMultiline_4b15dcc8{white-space:normal;word-break:break-word;text-overflow:clip}.fields_4b15dcc8{display:inline-block}.check_4b15dcc8{display:inline-block;cursor:default;padding:6px;box-sizing:border-box;vertical-align:top;background:0 0;border:none;opacity:0}.check_4b15dcc8::-moz-focus-inner{border:0}.check_4b15dcc8{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .check_4b15dcc8:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.checkDisabled_4b15dcc8{visibility:hidden}.rootIsCheckVisible_4b15dcc8 .check_4b15dcc8,.rootIsSelected_4b15dcc8 .check_4b15dcc8,.root_4b15dcc8:hover .check_4b15dcc8{opacity:1}.cellMeasurer_4b15dcc8 .cell_4b15dcc8{overflow:visible;white-space:nowrap}.checkSpacer_4b15dcc8{display:inline-block;height:20px;width:20px}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 234 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(233); var styles = stylesImport; var DetailsRowFields = (function (_super) { __extends(DetailsRowFields, _super); function DetailsRowFields(props) { var _this = _super.call(this) || this; _this.state = _this._getState(props); return _this; } DetailsRowFields.prototype.componentWillReceiveProps = function (newProps) { this.setState(this._getState(newProps)); }; DetailsRowFields.prototype.render = function () { var columns = this.props.columns; var cellContent = this.state.cellContent; return (React.createElement("div", { className: Utilities_1.css('ms-DetailsRow-fields', styles.fields), "data-automationid": 'DetailsRowFields' }, columns.map(function (column, columnIndex) { return (React.createElement("div", { key: columnIndex, role: column.isRowHeader ? 'rowheader' : 'gridcell', "aria-colindex": columnIndex, className: Utilities_1.css('ms-DetailsRow-cell', styles.cell, column.className, (_a = { 'is-multiline': column.isMultiline }, _a[styles.isMultiline] = column.isMultiline, _a)), style: { width: column.calculatedWidth }, "data-automationid": 'DetailsRowCell', "data-automation-key": column.key }, cellContent[columnIndex])); var _a; }))); }; DetailsRowFields.prototype._getState = function (props) { var _this = this; var item = props.item, itemIndex = props.itemIndex, onRenderItemColumn = props.onRenderItemColumn; return { cellContent: props.columns.map(function (column) { var cellContent; try { var render = column.onRender || onRenderItemColumn; cellContent = render ? render(item, itemIndex, column) : _this._getCellText(item, column); } catch (e) { } return cellContent; }) }; }; DetailsRowFields.prototype._getCellText = function (item, column) { var value = (item && column && column.fieldName) ? item[column.fieldName] : ''; if (value === null || value === undefined) { value = ''; } return value; }; return DetailsRowFields; }(Utilities_1.BaseComponent)); exports.DetailsRowFields = DetailsRowFields; /***/ }, /* 235 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(236)); /***/ }, /* 236 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(237)); /***/ }, /* 237 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var GroupedListSection_1 = __webpack_require__(238); var List_1 = __webpack_require__(248); var index_1 = __webpack_require__(216); var stylesImport = __webpack_require__(251); var styles = stylesImport; var GroupedList = (function (_super) { __extends(GroupedList, _super); function GroupedList(props) { var _this = _super.call(this, props) || this; _this._isSomeGroupExpanded = _this._computeIsSomeGroupExpanded(props.groups); _this.state = { lastWidth: 0, groups: props.groups }; return _this; } GroupedList.prototype.componentWillReceiveProps = function (newProps) { var _a = this.props, groups = _a.groups, selectionMode = _a.selectionMode; var shouldForceUpdates = false; if (newProps.groups !== groups) { this.setState({ groups: newProps.groups }); shouldForceUpdates = true; } if (newProps.selectionMode !== selectionMode) { shouldForceUpdates = true; } if (shouldForceUpdates) { this._forceListUpdates(); } }; GroupedList.prototype.render = function () { var className = this.props.className; var groups = this.state.groups; return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-GroupedList', styles.root, className), "data-automationid": 'GroupedList', "data-is-scrollable": 'false', role: 'grid' }, !groups ? this._renderGroup(null, 0) : (React.createElement(List_1.List, { ref: 'list', items: groups, onRenderCell: this._renderGroup, getItemCountForPage: function () { return 1; } })))); }; GroupedList.prototype.forceUpdate = function () { _super.prototype.forceUpdate.call(this); this._forceListUpdates(); }; GroupedList.prototype.toggleCollapseAll = function (allCollapsed) { var groups = this.state.groups; var groupProps = this.props.groupProps; var onToggleCollapseAll = groupProps && groupProps.onToggleCollapseAll; if (groups) { if (onToggleCollapseAll) { onToggleCollapseAll(allCollapsed); } for (var groupIndex = 0; groupIndex < groups.length; groupIndex++) { groups[groupIndex].isCollapsed = allCollapsed; } this._updateIsSomeGroupExpanded(); this.forceUpdate(); } }; GroupedList.prototype._renderGroup = function (group, groupIndex) { var _a = this.props, dragDropEvents = _a.dragDropEvents, dragDropHelper = _a.dragDropHelper, eventsToRegister = _a.eventsToRegister, groupProps = _a.groupProps, items = _a.items, listProps = _a.listProps, onRenderCell = _a.onRenderCell, selectionMode = _a.selectionMode, selection = _a.selection, viewport = _a.viewport; // override group header/footer props as needed var dividerProps = { onToggleSelectGroup: this._onToggleSelectGroup, onToggleCollapse: this._onToggleCollapse, onToggleSummarize: this._onToggleSummarize }; var headerProps = Utilities_1.assign({}, groupProps.headerProps, dividerProps); var footerProps = Utilities_1.assign({}, groupProps.footerProps, dividerProps); var groupNestingDepth = this._getGroupNestingDepth(); return (!group || group.count > 0) ? (React.createElement(GroupedListSection_1.GroupedListSection, { ref: 'group_' + groupIndex, key: this._getGroupKey(group, groupIndex), dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: eventsToRegister, footerProps: footerProps, getGroupItemLimit: groupProps && groupProps.getGroupItemLimit, group: group, groupIndex: groupIndex, groupNestingDepth: groupNestingDepth, headerProps: headerProps, listProps: listProps, items: items, onRenderCell: onRenderCell, onRenderGroupHeader: groupProps.onRenderHeader, onRenderGroupFooter: groupProps.onRenderFooter, selectionMode: selectionMode, selection: selection, viewport: viewport })) : null; }; GroupedList.prototype._getGroupKey = function (group, index) { return 'group-' + ((group && group.key) ? group.key : String(index)); }; GroupedList.prototype._getGroupNestingDepth = function () { var groups = this.state.groups; var level = 0; var groupsInLevel = groups; while (groupsInLevel && groupsInLevel.length > 0) { level++; groupsInLevel = groupsInLevel[0].children; } return level; }; GroupedList.prototype._onToggleCollapse = function (group) { var groupProps = this.props.groupProps; var onToggleCollapse = groupProps && groupProps.headerProps && groupProps.headerProps.onToggleCollapse; if (group) { if (onToggleCollapse) { onToggleCollapse(group); } group.isCollapsed = !group.isCollapsed; this._updateIsSomeGroupExpanded(); this.forceUpdate(); } }; GroupedList.prototype._onToggleSelectGroup = function (group) { if (group) { this.props.selection.toggleRangeSelected(group.startIndex, group.count); } }; GroupedList.prototype._forceListUpdates = function (groups) { groups = groups || this.state.groups; var groupCount = groups ? groups.length : 1; if (this.refs.list) { this.refs.list.forceUpdate(); for (var i = 0; i < groupCount; i++) { var group = this.refs.list.refs['group_' + String(i)]; if (group) { group.forceListUpdate(); } } } else { var group = this.refs['group_' + String(0)]; if (group) { group.forceListUpdate(); } } }; GroupedList.prototype._onToggleSummarize = function (group) { var groupProps = this.props.groupProps; var onToggleSummarize = groupProps && groupProps.footerProps && groupProps.footerProps.onToggleSummarize; if (onToggleSummarize) { onToggleSummarize(group); } else { if (group) { group.isShowingAll = !group.isShowingAll; } this.forceUpdate(); } }; GroupedList.prototype._computeIsSomeGroupExpanded = function (groups) { var _this = this; return groups && groups.some(function (group) { return group.children ? _this._computeIsSomeGroupExpanded(group.children) : !group.isCollapsed; }); }; GroupedList.prototype._updateIsSomeGroupExpanded = function () { var groups = this.state.groups; var onGroupExpandStateChanged = this.props.onGroupExpandStateChanged; var newIsSomeGroupExpanded = this._computeIsSomeGroupExpanded(groups); if (this._isSomeGroupExpanded !== newIsSomeGroupExpanded) { if (onGroupExpandStateChanged) { onGroupExpandStateChanged(newIsSomeGroupExpanded); } this._isSomeGroupExpanded = newIsSomeGroupExpanded; } }; return GroupedList; }(Utilities_1.BaseComponent)); GroupedList.defaultProps = { selectionMode: index_1.SelectionMode.multiple, isHeaderVisible: true, groupProps: {} }; __decorate([ Utilities_1.autobind ], GroupedList.prototype, "_renderGroup", null); __decorate([ Utilities_1.autobind ], GroupedList.prototype, "_onToggleCollapse", null); __decorate([ Utilities_1.autobind ], GroupedList.prototype, "_onToggleSelectGroup", null); __decorate([ Utilities_1.autobind ], GroupedList.prototype, "_onToggleSummarize", null); exports.GroupedList = GroupedList; /***/ }, /* 238 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var index_1 = __webpack_require__(216); var GroupFooter_1 = __webpack_require__(239); var GroupHeader_1 = __webpack_require__(241); var List_1 = __webpack_require__(248); var Utilities_2 = __webpack_require__(10); var stylesImport = __webpack_require__(251); var styles = stylesImport; var DEFAULT_DROPPING_CSS_CLASS = 'is-dropping'; var GroupedListSection = (function (_super) { __extends(GroupedListSection, _super); function GroupedListSection(props) { var _this = _super.call(this, props) || this; var selection = props.selection, group = props.group; _this._subGroups = {}; _this.state = { isDropping: false, isSelected: (selection && group) ? selection.isRangeSelected(group.startIndex, group.count) : false }; return _this; } GroupedListSection.prototype.componentDidMount = function () { var _a = this.props, dragDropHelper = _a.dragDropHelper, selection = _a.selection; if (dragDropHelper) { this._dragDropSubscription = dragDropHelper.subscribe(this.refs.root, this._events, this._getGroupDragDropOptions()); } if (selection) { this._events.on(selection, index_1.SELECTION_CHANGE, this._onSelectionChange); } }; GroupedListSection.prototype.componentWillUnmount = function () { if (this._dragDropSubscription) { this._dragDropSubscription.dispose(); } }; GroupedListSection.prototype.componentDidUpdate = function (previousProps) { if (this.props.group !== previousProps.group || this.props.groupIndex !== previousProps.groupIndex || this.props.dragDropHelper !== previousProps.dragDropHelper) { if (this._dragDropSubscription) { this._dragDropSubscription.dispose(); delete this._dragDropSubscription; } if (this.props.dragDropHelper) { this._dragDropSubscription = this.props.dragDropHelper.subscribe(this.refs.root, this._events, this._getGroupDragDropOptions()); } } }; GroupedListSection.prototype.render = function () { var _a = this.props, getGroupItemLimit = _a.getGroupItemLimit, group = _a.group, groupIndex = _a.groupIndex, headerProps = _a.headerProps, footerProps = _a.footerProps, viewport = _a.viewport, selectionMode = _a.selectionMode, _b = _a.onRenderGroupHeader, onRenderGroupHeader = _b === void 0 ? this._onRenderGroupHeader : _b, _c = _a.onRenderGroupFooter, onRenderGroupFooter = _c === void 0 ? this._onRenderGroupFooter : _c; var isSelected = this.state.isSelected; var renderCount = group && getGroupItemLimit ? getGroupItemLimit(group) : Infinity; var isFooterVisible = group && !group.children && !group.isCollapsed && !group.isShowingAll && (group.count > renderCount || group.hasMoreData); var hasNestedGroups = group && group.children && group.children.length > 0; var dividerProps = { group: group, groupIndex: groupIndex, groupLevel: group ? group.level : 0, isSelected: isSelected, viewport: viewport, selectionMode: selectionMode }; var groupHeaderProps = Utilities_2.assign({}, headerProps, dividerProps); var groupFooterProps = Utilities_2.assign({}, footerProps, dividerProps); return (React.createElement("div", { ref: 'root', className: Utilities_2.css('ms-GroupedList-group', styles.group, this._getDroppingClassName()) }, onRenderGroupHeader(groupHeaderProps, this._onRenderGroupHeader), group && group.isCollapsed ? null : (hasNestedGroups ? (React.createElement(List_1.List, { ref: 'list', items: group.children, onRenderCell: this._renderSubGroup, getItemCountForPage: function () { return 1; } })) : this._onRenderGroup(renderCount)), isFooterVisible && onRenderGroupFooter(groupFooterProps, this._onRenderGroupFooter))); }; GroupedListSection.prototype.forceUpdate = function () { _super.prototype.forceUpdate.call(this); this.forceListUpdate(); }; GroupedListSection.prototype.forceListUpdate = function () { var group = this.props.group; if (this.refs.list) { this.refs.list.forceUpdate(); if (group && group.children && group.children.length > 0) { var subGroupCount = group.children.length; for (var i = 0; i < subGroupCount; i++) { var subGroup = this.refs.list.refs['subGroup_' + String(i)]; if (subGroup) { subGroup.forceListUpdate(); } } } } else { var subGroup = this.refs['subGroup_' + String(0)]; if (subGroup) { subGroup.forceListUpdate(); } } }; GroupedListSection.prototype._onRenderGroupHeader = function (props) { return React.createElement(GroupHeader_1.GroupHeader, __assign({}, props)); }; GroupedListSection.prototype._onRenderGroupFooter = function (props) { return React.createElement(GroupFooter_1.GroupFooter, __assign({}, props)); }; GroupedListSection.prototype._onSelectionChange = function () { var _a = this.props, group = _a.group, selection = _a.selection; var isSelected = selection.isRangeSelected(group.startIndex, group.count); if (isSelected !== this.state.isSelected) { this.setState({ isSelected: isSelected }); } }; GroupedListSection.prototype._onRenderGroup = function (renderCount) { var _a = this.props, group = _a.group, items = _a.items, onRenderCell = _a.onRenderCell, listProps = _a.listProps, groupNestingDepth = _a.groupNestingDepth; var count = group ? group.count : items.length; var startIndex = group ? group.startIndex : 0; return (React.createElement(List_1.List, __assign({ items: items, onRenderCell: function (item, itemIndex) { return onRenderCell(groupNestingDepth, item, itemIndex); }, ref: 'list', renderCount: Math.min(count, renderCount), startIndex: startIndex }, listProps))); }; GroupedListSection.prototype._renderSubGroup = function (subGroup, subGroupIndex) { var _a = this.props, dragDropEvents = _a.dragDropEvents, dragDropHelper = _a.dragDropHelper, eventsToRegister = _a.eventsToRegister, getGroupItemLimit = _a.getGroupItemLimit, groupNestingDepth = _a.groupNestingDepth, items = _a.items, headerProps = _a.headerProps, footerProps = _a.footerProps, listProps = _a.listProps, onRenderCell = _a.onRenderCell, selection = _a.selection, selectionMode = _a.selectionMode, viewport = _a.viewport, onRenderGroupHeader = _a.onRenderGroupHeader, onRenderGroupFooter = _a.onRenderGroupFooter; return (!subGroup || subGroup.count > 0) ? (React.createElement(GroupedListSection, { ref: 'subGroup_' + subGroupIndex, key: this._getGroupKey(subGroup, subGroupIndex), dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: eventsToRegister, footerProps: footerProps, getGroupItemLimit: getGroupItemLimit, group: subGroup, groupIndex: subGroupIndex, groupNestingDepth: groupNestingDepth, headerProps: headerProps, items: items, listProps: listProps, onRenderCell: onRenderCell, selection: selection, selectionMode: selectionMode, viewport: viewport, onRenderGroupHeader: onRenderGroupHeader, onRenderGroupFooter: onRenderGroupFooter })) : null; }; GroupedListSection.prototype._getGroupKey = function (group, index) { return 'group-' + ((group && group.key) ? group.key : String(group.level) + String(index)); }; /** * collect all the data we need to enable drag/drop for a group */ GroupedListSection.prototype._getGroupDragDropOptions = function () { var _a = this.props, group = _a.group, groupIndex = _a.groupIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister; var options = { eventMap: eventsToRegister, selectionIndex: -1, context: { data: group, index: groupIndex, isGroup: true }, canDrag: function () { return false; }, canDrop: dragDropEvents.canDrop, onDragStart: null, updateDropState: this._updateDroppingState }; return options; }; /** * update groupIsDropping state based on the input value, which is used to change style during drag and drop * * @private * @param {boolean} newValue (new isDropping state value) * @param {DragEvent} event (the event trigger dropping state change which can be dragenter, dragleave etc) */ GroupedListSection.prototype._updateDroppingState = function (newIsDropping, event) { var isDropping = this.state.isDropping; var dragDropEvents = this.props.dragDropEvents; if (!isDropping) { if (dragDropEvents.onDragLeave) { dragDropEvents.onDragLeave(event, null); } } else { if (dragDropEvents.onDragEnter) { dragDropEvents.onDragEnter(event, null); } } if (isDropping !== newIsDropping) { this.setState({ isDropping: newIsDropping }); } }; /** * get the correct css class to reflect the dropping state for a given group * * If the group is the current drop target, return the default dropping class name * Otherwise, return ''; * */ GroupedListSection.prototype._getDroppingClassName = function () { var isDropping = this.state.isDropping; var group = this.props.group; isDropping = !!(group && isDropping); return Utilities_2.css(isDropping && DEFAULT_DROPPING_CSS_CLASS, isDropping && styles.groupIsDropping); }; return GroupedListSection; }(Utilities_1.BaseComponent)); __decorate([ Utilities_1.autobind ], GroupedListSection.prototype, "_onRenderGroupHeader", null); __decorate([ Utilities_1.autobind ], GroupedListSection.prototype, "_onRenderGroupFooter", null); __decorate([ Utilities_1.autobind ], GroupedListSection.prototype, "_renderSubGroup", null); __decorate([ Utilities_1.autobind ], GroupedListSection.prototype, "_getGroupDragDropOptions", null); __decorate([ Utilities_1.autobind ], GroupedListSection.prototype, "_updateDroppingState", null); exports.GroupedListSection = GroupedListSection; /***/ }, /* 239 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var Link_1 = __webpack_require__(150); var GroupSpacer_1 = __webpack_require__(228); var stylesImport = __webpack_require__(240); var styles = stylesImport; var GroupFooter = (function (_super) { __extends(GroupFooter, _super); function GroupFooter() { return _super !== null && _super.apply(this, arguments) || this; } GroupFooter.prototype.render = function () { var _a = this.props, group = _a.group, groupLevel = _a.groupLevel, showAllLinkText = _a.showAllLinkText; return group && (React.createElement("div", { className: Utilities_1.css('ms-groupFooter', styles.root) }, GroupSpacer_1.GroupSpacer({ count: groupLevel }), React.createElement(Link_1.Link, { onClick: this._onSummarizeClick }, showAllLinkText))); }; GroupFooter.prototype._onSummarizeClick = function (ev) { this.props.onToggleSummarize(this.props.group); ev.stopPropagation(); ev.preventDefault(); }; return GroupFooter; }(Utilities_1.BaseComponent)); __decorate([ Utilities_1.autobind ], GroupFooter.prototype, "_onSummarizeClick", null); exports.GroupFooter = GroupFooter; /***/ }, /* 240 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_22983be9', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_22983be9{position:relative;padding:10px 84px;cursor:pointer}.root_22983be9 .ms-Link{font-size:12px}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 241 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var index_1 = __webpack_require__(216); var Check_1 = __webpack_require__(224); var Icon_1 = __webpack_require__(141); var GroupSpacer_1 = __webpack_require__(228); var Spinner_1 = __webpack_require__(242); var FocusZone_1 = __webpack_require__(50); var stylesImport = __webpack_require__(247); var styles = stylesImport; var GroupHeader = (function (_super) { __extends(GroupHeader, _super); function GroupHeader(props) { var _this = _super.call(this, props) || this; _this.state = { isCollapsed: _this.props.group && _this.props.group.isCollapsed, isLoadingVisible: false }; return _this; } GroupHeader.prototype.componentWillReceiveProps = function (newProps) { if (newProps.group) { var newCollapsed = newProps.group.isCollapsed; var isGroupLoading = newProps.headerProps && newProps.headerProps.isGroupLoading; var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(newProps.group); this.setState({ isCollapsed: newCollapsed, isLoadingVisible: newLoadingVisible }); } }; GroupHeader.prototype.render = function () { var _a = this.props, group = _a.group, groupLevel = _a.groupLevel, viewport = _a.viewport, selectionMode = _a.selectionMode, loadingText = _a.loadingText, isSelected = _a.isSelected, selected = _a.selected, isCollapsedGroupSelectVisible = _a.isCollapsedGroupSelectVisible; var _b = this.state, isCollapsed = _b.isCollapsed, isLoadingVisible = _b.isLoadingVisible; if (isCollapsedGroupSelectVisible === undefined) { isCollapsedGroupSelectVisible = true; } var canSelectGroup = selectionMode === index_1.SelectionMode.multiple; var isSelectionCheckVisible = canSelectGroup && (isCollapsedGroupSelectVisible || !(group && group.isCollapsed)); var currentlySelected = isSelected || selected; return group && (React.createElement("div", { className: Utilities_1.css('ms-GroupHeader', styles.root, (_c = {}, _c['is-selected ' + styles.rootIsSelected] = currentlySelected, _c)), style: viewport ? { minWidth: viewport.width } : {}, onClick: this._onHeaderClick, "aria-label": group.ariaLabel || group.name, "data-is-focusable": true }, React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal }, isSelectionCheckVisible ? (React.createElement("button", { type: 'button', className: Utilities_1.css('ms-GroupHeader-check', styles.check), "data-selection-toggle": true, onClick: this._onToggleSelectGroupClick }, React.createElement(Check_1.Check, { checked: currentlySelected }))) : (selectionMode !== index_1.SelectionMode.none ? GroupSpacer_1.GroupSpacer({ count: 1 }) : null), GroupSpacer_1.GroupSpacer({ count: groupLevel }), React.createElement("div", { className: Utilities_1.css('ms-GroupHeader-dropIcon', styles.dropIcon) }, React.createElement(Icon_1.Icon, { iconName: 'Tag' })), React.createElement("button", { type: 'button', className: Utilities_1.css('ms-GroupHeader-expand', styles.expand), onClick: this._onToggleCollapse }, React.createElement(Icon_1.Icon, { className: Utilities_1.css(isCollapsed && ('is-collapsed ' + styles.expandIsCollapsed)), iconName: 'ChevronDown' })), React.createElement("div", { className: Utilities_1.css('ms-GroupHeader-title', styles.title) }, React.createElement("span", null, group.name), React.createElement("span", null, "(", group.count, group.hasMoreData && '+', ")")), React.createElement("div", { className: Utilities_1.css('ms-GroupHeader-loading', styles.loading, isLoadingVisible && ('is-loading ' + styles.loadingIsVisible)) }, React.createElement(Spinner_1.Spinner, { label: loadingText }))))); var _c; }; GroupHeader.prototype._onToggleCollapse = function (ev) { var _a = this.props, group = _a.group, onToggleCollapse = _a.onToggleCollapse, isGroupLoading = _a.isGroupLoading; var isCollapsed = this.state.isCollapsed; var newCollapsed = !isCollapsed; var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(group); this.setState({ isCollapsed: newCollapsed, isLoadingVisible: newLoadingVisible }); if (onToggleCollapse) { onToggleCollapse(group); } ev.stopPropagation(); ev.preventDefault(); }; GroupHeader.prototype._onToggleSelectGroupClick = function (ev) { var _a = this.props, onToggleSelectGroup = _a.onToggleSelectGroup, group = _a.group; if (onToggleSelectGroup) { onToggleSelectGroup(group); } ev.preventDefault(); ev.stopPropagation(); }; GroupHeader.prototype._onHeaderClick = function () { var _a = this.props, group = _a.group, onGroupHeaderClick = _a.onGroupHeaderClick, onToggleSelectGroup = _a.onToggleSelectGroup; if (onGroupHeaderClick) { onGroupHeaderClick(group); } else if (onToggleSelectGroup) { onToggleSelectGroup(group); } }; return GroupHeader; }(Utilities_1.BaseComponent)); __decorate([ Utilities_1.autobind ], GroupHeader.prototype, "_onToggleCollapse", null); __decorate([ Utilities_1.autobind ], GroupHeader.prototype, "_onToggleSelectGroupClick", null); __decorate([ Utilities_1.autobind ], GroupHeader.prototype, "_onHeaderClick", null); exports.GroupHeader = GroupHeader; /***/ }, /* 242 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(243)); /***/ }, /* 243 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(244)); __export(__webpack_require__(245)); /***/ }, /* 244 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var Spinner_Props_1 = __webpack_require__(245); var stylesImport = __webpack_require__(246); var styles = stylesImport; var Spinner = (function (_super) { __extends(Spinner, _super); function Spinner() { return _super !== null && _super.apply(this, arguments) || this; } Spinner.prototype.render = function () { var _a = this.props, type = _a.type, size = _a.size, label = _a.label, className = _a.className, ariaLive = _a.ariaLive, ariaLabel = _a.ariaLabel; // TODO remove deprecated type property at >= 2.0.0 var statusMessage = ariaLabel || label; return (React.createElement("div", { className: Utilities_1.css('ms-Spinner', styles.root, className) }, React.createElement("div", { className: Utilities_1.css('ms-Spinner-circle', styles.circle, (_b = {}, _b['ms-Spinner--xSmall ' + styles.circleIsXSmall] = size === Spinner_Props_1.SpinnerSize.xSmall, _b['ms-Spinner--small ' + styles.circleIsSmall] = size === Spinner_Props_1.SpinnerSize.small, _b['ms-Spinner--medium ' + styles.circleIsMedium] = size === Spinner_Props_1.SpinnerSize.medium, _b['ms-Spinner--large ' + styles.circleIsLarge] = size === Spinner_Props_1.SpinnerSize.large, _b['ms-Spinner--normal ' + styles.circleIsTypeMedium] = type === Spinner_Props_1.SpinnerType.normal, _b['ms-Spinner--large ' + styles.circleIsTypeLarge] = type === Spinner_Props_1.SpinnerType.large // TODO remove deprecated value at >= 2.0.0 , _b)) }), label && React.createElement("div", { className: Utilities_1.css('ms-Spinner-label', styles.label) }, label), statusMessage && React.createElement("div", { role: 'status', "aria-live": this.props.ariaLive }, React.createElement(Utilities_1.DelayedRender, null, React.createElement("div", { className: styles.screenReaderOnly }, statusMessage))))); var _b; }; return Spinner; }(Utilities_1.BaseComponent)); Spinner.defaultProps = { size: Spinner_Props_1.SpinnerSize.medium, ariaLive: 'polite' }; exports.Spinner = Spinner; /***/ }, /* 245 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var SpinnerSize; (function (SpinnerSize) { /** * 12px Spinner diameter */ SpinnerSize[SpinnerSize["xSmall"] = 0] = "xSmall"; /** * 16px Spinner diameter */ SpinnerSize[SpinnerSize["small"] = 1] = "small"; /** * 20px Spinner diameter */ SpinnerSize[SpinnerSize["medium"] = 2] = "medium"; /** * 28px Spinner diameter */ SpinnerSize[SpinnerSize["large"] = 3] = "large"; })(SpinnerSize = exports.SpinnerSize || (exports.SpinnerSize = {})); /** * Deprecated at v2.0.0, use 'SpinnerSize' instead. * @deprecated */ var SpinnerType; (function (SpinnerType) { /** * Deprecated and will be removed at >= 2.0.0. Use SpinnerSize.medium instead. */ SpinnerType[SpinnerType["normal"] = 0] = "normal"; /** * Deprecated and will be removed at >= 2.0.0. Use SpinnerSize.large instead. */ SpinnerType[SpinnerType["large"] = 1] = "large"; })(SpinnerType = exports.SpinnerType || (exports.SpinnerType = {})); /***/ }, /* 246 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_43227b55', circle: 'circle_43227b55', spinAnimation: 'spinAnimation_43227b55', circleIsXSmall: 'circleIsXSmall_43227b55', circleIsSmall: 'circleIsSmall_43227b55', circleIsTypeMedium: 'circleIsTypeMedium_43227b55', circleIsMedium: 'circleIsMedium_43227b55', circleIsTypeLarge: 'circleIsTypeLarge_43227b55', circleIsLarge: 'circleIsLarge_43227b55', label: 'label_43227b55', screenReaderOnly: 'screenReaderOnly_43227b55', }; load_themed_styles_1.loadStyles([{ "rawString": "@-webkit-keyframes spinAnimation_43227b55{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinAnimation_43227b55{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.root_43227b55>.circle_43227b55{margin:auto;box-sizing:border-box;border-radius:50%;width:100%;height:100%;border:1.5px solid " }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": ";border-top-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";-webkit-animation:spinAnimation_43227b55 1.3s infinite cubic-bezier(.53,.21,.29,.67);animation:spinAnimation_43227b55 1.3s infinite cubic-bezier(.53,.21,.29,.67)}.root_43227b55>.circle_43227b55.circleIsXSmall_43227b55{width:12px;height:12px}.root_43227b55>.circle_43227b55.circleIsSmall_43227b55{width:16px;height:16px}.root_43227b55>.circle_43227b55.circleIsMedium_43227b55,.root_43227b55>.circle_43227b55.circleIsTypeMedium_43227b55{width:20px;height:20px}.root_43227b55>.circle_43227b55.circleIsLarge_43227b55,.root_43227b55>.circle_43227b55.circleIsTypeLarge_43227b55{width:28px;height:28px}.root_43227b55 .label_43227b55{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";margin-top:10px;text-align:center}.root_43227b55 .screenReaderOnly_43227b55{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@media screen and (-ms-high-contrast:active){.root_43227b55>.circle_43227b55{border-top-style:none}}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 247 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_c6cb32ae', rootIsSelected: 'rootIsSelected_c6cb32ae', check: 'check_c6cb32ae', expand: 'expand_c6cb32ae', title: 'title_c6cb32ae', expandIsCollapsed: 'expandIsCollapsed_c6cb32ae', loading: 'loading_c6cb32ae', loadingIsVisible: 'loadingIsVisible_c6cb32ae', dropIcon: 'dropIcon_c6cb32ae', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_c6cb32ae{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.root_c6cb32ae::-moz-focus-inner{border:0}.root_c6cb32ae{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .root_c6cb32ae:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.root_c6cb32ae:hover{background:" }, { "theme": "themeLighterAlt", "defaultValue": "#eff6fc" }, { "rawString": "}.root_c6cb32ae.rootIsSelected_c6cb32ae{background:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": "}.root_c6cb32ae.rootIsSelected_c6cb32ae:hover{background:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.check_c6cb32ae,.expand_c6cb32ae{display:inline-block;cursor:default;padding:6px;-webkit-transform:translateY(50%);transform:translateY(50%);margin-top:-12px;box-sizing:border-box;vertical-align:top;background:0 0;border:none;font-size:12px;top:4px}.check_c6cb32ae::-moz-focus-inner,.expand_c6cb32ae::-moz-focus-inner{border:0}.check_c6cb32ae,.expand_c6cb32ae{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .check_c6cb32ae:focus:after,.ms-Fabric.is-focusVisible .expand_c6cb32ae:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.check_c6cb32ae{opacity:0;margin-top:-10px}.check_c6cb32ae:focus{opacity:1}.root_c6cb32ae.rootIsSelected_c6cb32ae .check_c6cb32ae,.root_c6cb32ae:hover .check_c6cb32ae{opacity:1}.title_c6cb32ae{font-size:21px;font-weight:100;padding:14px 6px;display:inline-block;cursor:pointer;outline:0}.expand_c6cb32ae{width:36px;height:40px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.expand_c6cb32ae .ms-Icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear}.expand_c6cb32ae .ms-Icon.expandIsCollapsed_c6cb32ae{-webkit-transform:rotate(0);transform:rotate(0)}.loading_c6cb32ae{display:inline-block;visibility:hidden;opacity:0;padding:0 16px;vertical-align:middle;transition:visibility 367ms,opacity 367ms}.loading_c6cb32ae.loadingIsVisible_c6cb32ae{visibility:visible;opacity:1}.dropIcon_c6cb32ae{display:inline-block;position:relative;top:-16px;font-size:20px;color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";transition:opacity 467ms cubic-bezier(.39,.575,.565,1),-webkit-transform 267ms cubic-bezier(.6,-.28,.735,.045);transition:transform 267ms cubic-bezier(.6,-.28,.735,.045),opacity 467ms cubic-bezier(.39,.575,.565,1);transition:transform 267ms cubic-bezier(.6,-.28,.735,.045),opacity 467ms cubic-bezier(.39,.575,.565,1),-webkit-transform 267ms cubic-bezier(.6,-.28,.735,.045);opacity:0;-webkit-transform:rotate(.2deg) scale(.65);transform:rotate(.2deg) scale(.65);-webkit-transform-origin:10px 10px;transform-origin:10px 10px}[dir=ltr] .dropIcon_c6cb32ae{left:-26px}[dir=rtl] .dropIcon_c6cb32ae{right:-26px}.dropIcon_c6cb32ae .ms-Icon--Tag{position:absolute}.ms-GroupedList-group.is-dropping>.root_c6cb32ae .dropIcon_c6cb32ae{transition:opacity 167ms cubic-bezier(.39,.575,.565,1),-webkit-transform 467ms cubic-bezier(.075,.82,.165,1);transition:transform 467ms cubic-bezier(.075,.82,.165,1),opacity 167ms cubic-bezier(.39,.575,.565,1);transition:transform 467ms cubic-bezier(.075,.82,.165,1),opacity 167ms cubic-bezier(.39,.575,.565,1),-webkit-transform 467ms cubic-bezier(.075,.82,.165,1);transition-delay:367ms;opacity:1;-webkit-transform:rotate(.2deg) scale(1);transform:rotate(.2deg) scale(1)}.ms-GroupedList-group.is-dropping .check_c6cb32ae{opacity:0}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 248 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(249)); /***/ }, /* 249 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(250)); /***/ }, /* 250 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var RESIZE_DELAY = 16; var MIN_SCROLL_UPDATE_DELAY = 100; var MAX_SCROLL_UPDATE_DELAY = 500; var IDLE_DEBOUNCE_DELAY = 200; var DEFAULT_ITEMS_PER_PAGE = 10; var DEFAULT_PAGE_HEIGHT = 30; var DEFAULT_RENDERED_WINDOWS_BEHIND = 2; var DEFAULT_RENDERED_WINDOWS_AHEAD = 2; var EMPTY_RECT = { top: -1, bottom: -1, left: -1, right: -1, width: 0, height: 0 }; // Naming expensive measures so that they're named in profiles. var _measurePageRect = function (element) { return element.getBoundingClientRect(); }; var _measureSurfaceRect = _measurePageRect; var _measureScrollRect = _measurePageRect; /** * The List renders virtualized pages of items. Each page's item count is determined by the getItemCountForPage callback if * provided by the caller, or 10 as default. Each page's height is determined by the getPageHeight callback if provided by * the caller, or by cached measurements if available, or by a running average, or a default fallback. * * The algorithm for rendering pages works like this: * * 1. Predict visible pages based on "current measure data" (page heights, surface position, visible window) * 2. If changes are necessary, apply changes (add/remove pages) * 3. For pages that are added, measure the page heights if we need to using getBoundingClientRect * 4. If measurements don't match predictions, update measure data and goto step 1 asynchronously * * Measuring too frequently can pull performance down significantly. To compensate, we cache measured values so that * we can avoid re-measuring during operations that should not alter heights, like scrolling. * * However, certain operations can make measure data stale. For example, resizing the list, or passing in new props, * or forcing an update change cause pages to shrink/grow. When these operations occur, we increment a measureVersion * number, which we associate with cached measurements and use to determine if a remeasure should occur. */ var List = (function (_super) { __extends(List, _super); function List(props) { var _this = _super.call(this, props) || this; _this.state = { pages: [] }; _this._estimatedPageHeight = 0; _this._totalEstimates = 0; _this._requiredWindowsAhead = 0; _this._requiredWindowsBehind = 0; // Track the measure version for everything. _this._measureVersion = 0; // Ensure that scrolls are lazy updated. _this._onAsyncScroll = _this._async.debounce(_this._onAsyncScroll, MIN_SCROLL_UPDATE_DELAY, { leading: false, maxWait: MAX_SCROLL_UPDATE_DELAY }); _this._onAsyncIdle = _this._async.debounce(_this._onAsyncIdle, IDLE_DEBOUNCE_DELAY, { leading: false }); _this._onAsyncResize = _this._async.debounce(_this._onAsyncResize, RESIZE_DELAY, { leading: false }); _this._cachedPageHeights = {}; _this._estimatedPageHeight = 0; _this._focusedIndex = -1; _this._scrollingToIndex = -1; return _this; } /** * Scroll to the given index. By default will bring the page the specified item is on into the view. If a callback * to measure the height of an individual item is specified, will only scroll to bring the specific item into view. * * Note: with items of variable height and no passed in `getPageHeight` method, the list might jump after scrolling * when windows before/ahead are being rendered, and the estimated height is replaced using actual elements. * * @param index Index of item to scroll to * @param measureItem Optional callback to measure the height of an individual item */ List.prototype.scrollToIndex = function (index, measureItem) { var startIndex = this.props.startIndex; var renderCount = this._getRenderCount(); var endIndex = startIndex + renderCount; var scrollTop = 0; var itemsPerPage = 1; for (var itemIndex = startIndex; itemIndex < endIndex; itemIndex += itemsPerPage) { itemsPerPage = this._getItemCountForPage(itemIndex, this._allowedRect); var requestedIndexIsInPage = itemIndex <= index && (itemIndex + itemsPerPage) > index; if (requestedIndexIsInPage) { // We have found the page. If the user provided a way to measure an individual item, we will try to scroll in just // the given item, otherwise we'll only bring the page into view if (measureItem) { // Adjust for actual item position within page var itemPositionWithinPage = index - itemIndex; for (var itemIndexInPage = 0; itemIndexInPage < itemPositionWithinPage; ++itemIndexInPage) { scrollTop += measureItem(itemIndex + itemIndexInPage); } var scrollBottom = scrollTop + measureItem(index); var scrollRect = _measureScrollRect(this._scrollElement); var scrollWindow = { top: this._scrollElement.scrollTop, bottom: this._scrollElement.scrollTop + scrollRect.height }; var itemIsFullyVisible = scrollTop >= scrollWindow.top && scrollBottom <= scrollWindow.bottom; if (itemIsFullyVisible) { // Item is already visible, do nothing. return; } var itemIsPartiallyAbove = scrollTop < scrollWindow.top; var itemIsPartiallyBelow = scrollBottom > scrollWindow.bottom; if (itemIsPartiallyAbove) { // We will just scroll to 'scrollTop' // ______ // |Item | - scrollTop // | ____|_ // |_|____| | - scrollWindow.top // | | // |______| } else if (itemIsPartiallyBelow) { // Adjust scrollTop position to just bring in the element // ______ - scrollTop // | | // | ____|_ - scrollWindow.bottom // |_|____| | // | Item | // |______| - scrollBottom scrollTop = this._scrollElement.scrollTop + (scrollBottom - scrollWindow.bottom); } } this._scrollElement.scrollTop = scrollTop; break; } scrollTop += this._getPageHeight(itemIndex, itemsPerPage, this._surfaceRect); } }; List.prototype.componentDidMount = function () { this._updatePages(); this._measureVersion++; this._scrollElement = Utilities_1.findScrollableParent(this.refs.root); this._events.on(window, 'resize', this._onAsyncResize); this._events.on(this.refs.root, 'focus', this._onFocus, true); if (this._scrollElement) { this._events.on(this._scrollElement, 'scroll', this._onScroll); this._events.on(this._scrollElement, 'scroll', this._onAsyncScroll); } }; List.prototype.componentWillReceiveProps = function (newProps) { if (newProps.items !== this.props.items || newProps.renderCount !== this.props.renderCount || newProps.startIndex !== this.props.startIndex) { this._measureVersion++; this._updatePages(newProps); } }; List.prototype.shouldComponentUpdate = function (newProps, newState) { var _a = this.props, renderedWindowsAhead = _a.renderedWindowsAhead, renderedWindowsBehind = _a.renderedWindowsBehind; var oldPages = this.state.pages; var newPages = newState.pages, measureVersion = newState.measureVersion; var shouldComponentUpdate = false; if (this._measureVersion === measureVersion && newProps.renderedWindowsAhead === renderedWindowsAhead, newProps.renderedWindowsBehind === renderedWindowsBehind, newProps.items === this.props.items && oldPages.length === newPages.length) { for (var i = 0; i < oldPages.length; i++) { var oldPage = oldPages[i]; var newPage = newPages[i]; if ((oldPage.key !== newPage.key || oldPage.itemCount !== newPage.itemCount)) { shouldComponentUpdate = true; break; } } } else { shouldComponentUpdate = true; } return shouldComponentUpdate; }; List.prototype.forceUpdate = function () { // Ensure that when the list is force updated we update the pages first before render. this._updateRenderRects(this.props, true); this._updatePages(); this._measureVersion++; _super.prototype.forceUpdate.call(this); }; List.prototype.render = function () { var _a = this.props, className = _a.className, role = _a.role; var pages = this.state.pages; var pageElements = []; var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties); // assign list if no role role = (role === undefined) ? 'list' : role; for (var i = 0; i < pages.length; i++) { pageElements.push(this._renderPage(pages[i])); } return (React.createElement("div", __assign({ ref: 'root' }, divProps, { role: role, className: Utilities_1.css('ms-List', className) }), React.createElement("div", { ref: 'surface', className: 'ms-List-surface' }, pageElements))); }; List.prototype._renderPage = function (page) { var _a = this.props, onRenderCell = _a.onRenderCell, role = _a.role; var cells = []; var pageStyle = this._getPageStyle(page); // only assign list item role if no role is assigned role = (role === undefined) ? 'listitem' : null; for (var i = 0; page.items && i < page.items.length; i++) { var item = page.items[i]; var index = page.startIndex + i; var itemKey = this.props.getKey ? this.props.getKey(item, index) : item && item.key; if (itemKey === null || itemKey === undefined) { itemKey = index; } cells.push(React.createElement("div", { role: role, className: 'ms-List-cell', key: itemKey, "data-list-index": i + page.startIndex, "data-automationid": 'ListCell' }, onRenderCell(item, page.startIndex + i))); } return (React.createElement("div", { className: 'ms-List-page', key: page.key, ref: page.key, style: pageStyle }, cells)); }; /** Generate the style object for the page. */ List.prototype._getPageStyle = function (page) { var style; var getPageStyle = this.props.getPageStyle; if (getPageStyle) { style = getPageStyle(page); } if (!page.items) { style = style || {}; style.height = page.height; } return style; }; /** Track the last item index focused so that we ensure we keep it rendered. */ List.prototype._onFocus = function (ev) { var target = ev.target; while (target !== this.refs.surface) { var indexString = target.getAttribute('data-list-index'); if (indexString) { this._focusedIndex = Number(indexString); break; } target = Utilities_1.getParent(target); } }; /** * Called synchronously to reset the required render range to 0 on scrolling. After async scroll has executed, * we will call onAsyncIdle which will reset it back to it's correct value. */ List.prototype._onScroll = function () { this._requiredWindowsAhead = 0; this._requiredWindowsBehind = 0; }; /** * Debounced method to asynchronously update the visible region on a scroll event. */ List.prototype._onAsyncScroll = function () { this._updateRenderRects(); // Only update pages when the visible rect falls outside of the materialized rect. if (!this._materializedRect || !_isContainedWithin(this._requiredRect, this._materializedRect)) { this._updatePages(); } else { // console.log('requiredRect contained in materialized', this._requiredRect, this._materializedRect); } }; /** * This is an async debounced method that will try and increment the windows we render. If we can increment * either, we increase the amount we render and re-evaluate. */ List.prototype._onAsyncIdle = function () { var _a = this.props, renderedWindowsAhead = _a.renderedWindowsAhead, renderedWindowsBehind = _a.renderedWindowsBehind; var _b = this, requiredWindowsAhead = _b._requiredWindowsAhead, requiredWindowsBehind = _b._requiredWindowsBehind; var windowsAhead = Math.min(renderedWindowsAhead, requiredWindowsAhead + 1); var windowsBehind = Math.min(renderedWindowsBehind, requiredWindowsBehind + 1); if (windowsAhead !== requiredWindowsAhead || windowsBehind !== requiredWindowsBehind) { // console.log('idling', windowsBehind, windowsAhead); this._requiredWindowsAhead = windowsAhead; this._requiredWindowsBehind = windowsBehind; this._updateRenderRects(); this._updatePages(); } if (renderedWindowsAhead > windowsAhead || renderedWindowsBehind > windowsBehind) { // Async increment on next tick. this._onAsyncIdle(); } }; List.prototype._onAsyncResize = function () { this.forceUpdate(); }; List.prototype._updatePages = function (props) { var _this = this; var _a = (props || this.props), items = _a.items, startIndex = _a.startIndex, renderCount = _a.renderCount; renderCount = this._getRenderCount(props); // console.log('updating pages'); if (!this._requiredRect) { this._updateRenderRects(props); } var newListState = this._buildPages(items, startIndex, renderCount); var oldListPages = this.state.pages; this.setState(newListState, function () { // If measured version is invalid since we've updated the DOM var heightsChanged = _this._updatePageMeasurements(oldListPages, newListState.pages); // On first render, we should re-measure so that we don't get a visual glitch. if (heightsChanged) { _this._materializedRect = null; if (!_this._hasCompletedFirstRender) { _this._hasCompletedFirstRender = true; _this._updatePages(); } else { _this._onAsyncScroll(); } } else { // Enqueue an idle bump. _this._onAsyncIdle(); } }); }; List.prototype._updatePageMeasurements = function (oldPages, newPages) { var renderedIndexes = {}; var heightChanged = false; var renderCount = this._getRenderCount(); for (var i = 0; i < oldPages.length; i++) { var page = oldPages[i]; if (page.items) { renderedIndexes[page.startIndex] = page; } } for (var i = 0; i < newPages.length; i++) { var page = newPages[i]; if (page.items) { heightChanged = this._measurePage(page) || heightChanged; if (!renderedIndexes[page.startIndex]) { this._onPageAdded(page); } else { delete renderedIndexes[page.startIndex]; } } } for (var index in renderedIndexes) { if (renderedIndexes.hasOwnProperty(index)) { this._onPageRemoved(renderedIndexes[index]); } } return heightChanged; }; /** * Given a page, measure its dimensions, update cache. * @returns True if the height has changed. */ List.prototype._measurePage = function (page) { var hasChangedHeight = false; var pageElement = this.refs[page.key]; var cachedHeight = this._cachedPageHeights[page.startIndex]; // console.log(' * measure attempt', page.startIndex, cachedHeight); if (pageElement && (!cachedHeight || cachedHeight.measureVersion !== this._measureVersion)) { var newClientRect = { width: pageElement.clientWidth, height: pageElement.clientHeight }; if (newClientRect.height || newClientRect.width) { hasChangedHeight = page.height !== newClientRect.height; // console.warn(' *** expensive page measure', page.startIndex, page.height, newClientRect.height); page.height = newClientRect.height; this._cachedPageHeights[page.startIndex] = { height: newClientRect.height, measureVersion: this._measureVersion }; this._estimatedPageHeight = Math.round(((this._estimatedPageHeight * this._totalEstimates) + newClientRect.height) / (this._totalEstimates + 1)); this._totalEstimates++; } } return hasChangedHeight; }; /** Called when a page has been added to the DOM. */ List.prototype._onPageAdded = function (page) { var onPageAdded = this.props.onPageAdded; // console.log('page added', page.startIndex, this.state.pages.map(page=>page.key).join(', ')); if (onPageAdded) { onPageAdded(page); } }; /** Called when a page has been removed from the DOM. */ List.prototype._onPageRemoved = function (page) { var onPageRemoved = this.props.onPageRemoved; // console.log(' --- page removed', page.startIndex, this.state.pages.map(page=>page.key).join(', ')); if (onPageRemoved) { onPageRemoved(page); } }; /** Build up the pages that should be rendered. */ List.prototype._buildPages = function (items, startIndex, renderCount) { var materializedRect = Utilities_1.assign({}, EMPTY_RECT); var itemsPerPage = 1; var pages = []; var pageTop = 0; var currentSpacer = null; var focusedIndex = this._focusedIndex; var endIndex = startIndex + renderCount; // First render is very important to track; when we render cells, we have no idea of estimated page height. // So we should default to rendering only the first page so that we can get information. // However if the user provides a measure function, let's just assume they know the right heights. var isFirstRender = this._estimatedPageHeight === 0 && !this.props.getPageHeight; var _loop_1 = function (itemIndex) { itemsPerPage = this_1._getItemCountForPage(itemIndex, this_1._allowedRect); var pageHeight = this_1._getPageHeight(itemIndex, itemsPerPage, this_1._surfaceRect); var pageBottom = pageTop + pageHeight - 1; var isPageRendered = Utilities_1.findIndex(this_1.state.pages, function (page) { return page.items && page.startIndex === itemIndex; }) > -1; var isPageInAllowedRange = pageBottom >= this_1._allowedRect.top && pageTop <= this_1._allowedRect.bottom; var isPageInRequiredRange = pageBottom >= this_1._requiredRect.top && pageTop <= this_1._requiredRect.bottom; var isPageVisible = !isFirstRender && (isPageInRequiredRange || (isPageInAllowedRange && isPageRendered)); var isPageFocused = focusedIndex >= itemIndex && focusedIndex < (itemIndex + itemsPerPage); var isFirstPage = itemIndex === startIndex; // console.log('building page', itemIndex, 'pageTop: ' + pageTop, 'inAllowed: ' + isPageInAllowedRange, 'inRequired: ' + isPageInRequiredRange); // Only render whats visible, focused, or first page. if (isPageVisible || isPageFocused || isFirstPage) { if (currentSpacer) { pages.push(currentSpacer); currentSpacer = null; } var itemsInPage = Math.min(itemsPerPage, endIndex - itemIndex); var newPage = this_1._createPage(null, items.slice(itemIndex, itemIndex + itemsInPage), itemIndex); newPage.top = pageTop; newPage.height = pageHeight; pages.push(newPage); if (isPageInRequiredRange) { _mergeRect(materializedRect, { top: pageTop, bottom: pageBottom, height: pageHeight, left: this_1._allowedRect.left, right: this_1._allowedRect.right, width: this_1._allowedRect.width }); } } else { if (!currentSpacer) { currentSpacer = this_1._createPage('spacer-' + itemIndex, null, itemIndex, 0); } currentSpacer.height = (currentSpacer.height || 0) + (pageBottom - pageTop) + 1; currentSpacer.itemCount += itemsPerPage; } pageTop += (pageBottom - pageTop + 1); if (isFirstRender) { return "break"; } }; var this_1 = this; for (var itemIndex = startIndex; itemIndex < endIndex; itemIndex += itemsPerPage) { var state_1 = _loop_1(itemIndex); if (state_1 === "break") break; } if (currentSpacer) { currentSpacer.key = 'spacer-end'; pages.push(currentSpacer); } this._materializedRect = materializedRect; // console.log('materialized: ', materializedRect); return { pages: pages, measureVersion: this._measureVersion }; }; /** * Get the pixel height of a give page. Will use the props getPageHeight first, and if not provided, fallback to * cached height, or estimated page height, or default page height. */ List.prototype._getPageHeight = function (itemIndex, itemsPerPage, visibleRect) { if (this.props.getPageHeight) { return this.props.getPageHeight(itemIndex, visibleRect); } else { var cachedHeight = (this._cachedPageHeights[itemIndex]); return cachedHeight ? cachedHeight.height : (this._estimatedPageHeight || DEFAULT_PAGE_HEIGHT); } }; List.prototype._getItemCountForPage = function (itemIndex, visibileRect) { var itemsPerPage = this.props.getItemCountForPage ? this.props.getItemCountForPage(itemIndex, visibileRect) : DEFAULT_ITEMS_PER_PAGE; return itemsPerPage ? itemsPerPage : DEFAULT_ITEMS_PER_PAGE; }; List.prototype._createPage = function (pageKey, items, startIndex, count, style) { pageKey = pageKey || ('page-' + startIndex); // Fill undefined cells because array.map will ignore undefined cells. if (items) { for (var i = 0; i < items.length; i++) { items[i] = items[i] || null; } } return { key: pageKey, startIndex: startIndex === undefined ? -1 : startIndex, itemCount: (count === undefined) ? (items ? items.length : 0) : count, items: items, style: style || {}, top: 0, height: 0 }; }; List.prototype._getRenderCount = function (props) { var _a = props || this.props, items = _a.items, startIndex = _a.startIndex, renderCount = _a.renderCount; return (renderCount === undefined ? (items ? items.length - startIndex : 0) : renderCount); }; /** Calculate the visible rect within the list where top: 0 and left: 0 is the top/left of the list. */ List.prototype._updateRenderRects = function (props, forceUpdate) { var _a = (props || this.props), renderedWindowsAhead = _a.renderedWindowsAhead, renderedWindowsBehind = _a.renderedWindowsBehind; var pages = this.state.pages; var renderCount = this._getRenderCount(props); var surfaceRect = this._surfaceRect; var scrollHeight = this._scrollElement && this._scrollElement.scrollHeight; var scrollTop = this._scrollElement ? this._scrollElement.scrollTop : 0; // WARNING: EXPENSIVE CALL! We need to know the surface top relative to the window. // This needs to be called to recalculate when new pages should be loaded. // We check to see how far we've scrolled and if it's further than a third of a page we run it again. if (forceUpdate || !pages || !this._surfaceRect || !scrollHeight || scrollHeight !== this._scrollHeight || Math.abs(this._scrollTop - scrollTop) > this._estimatedPageHeight / 3) { surfaceRect = this._surfaceRect = _measureSurfaceRect(this.refs.surface); this._scrollTop = scrollTop; } // If the scroll height has changed, something in the container likely resized and // we should redo the page heights incase their content resized. if (forceUpdate || !scrollHeight || scrollHeight !== this._scrollHeight) { this._measureVersion++; } this._scrollHeight = scrollHeight; // If the surface is above the container top or below the container bottom, or if this is not the first // render return empty rect. // The first time the list gets rendered we need to calculate the rectangle. The width of the list is // used to calculate the width of the list items. var visibleTop = Math.max(0, -surfaceRect.top); var visibleRect = { top: visibleTop, left: surfaceRect.left, bottom: visibleTop + window.innerHeight, right: surfaceRect.right, width: surfaceRect.width, height: window.innerHeight }; // The required/allowed rects are adjusted versions of the visible rect. this._requiredRect = _expandRect(visibleRect, this._requiredWindowsBehind, this._requiredWindowsAhead); this._allowedRect = _expandRect(visibleRect, renderedWindowsBehind, renderedWindowsAhead); }; return List; }(Utilities_1.BaseComponent)); List.defaultProps = { startIndex: 0, onRenderCell: function (item, index, containsFocus) { return (React.createElement("div", null, (item && item.name) || '')); }, renderedWindowsAhead: DEFAULT_RENDERED_WINDOWS_AHEAD, renderedWindowsBehind: DEFAULT_RENDERED_WINDOWS_BEHIND }; exports.List = List; function _expandRect(rect, pagesBefore, pagesAfter) { var top = rect.top - (pagesBefore * rect.height); var height = rect.height + ((pagesBefore + pagesAfter) * rect.height); return { top: top, bottom: top + height, height: height, left: rect.left, right: rect.right, width: rect.width }; } function _isContainedWithin(innerRect, outerRect) { return (innerRect.top >= outerRect.top && innerRect.left >= outerRect.left && innerRect.bottom <= outerRect.bottom && innerRect.right <= outerRect.right); } function _mergeRect(targetRect, newRect) { targetRect.top = (newRect.top < targetRect.top || targetRect.top === -1) ? newRect.top : targetRect.top; targetRect.left = (newRect.left < targetRect.left || targetRect.left === -1) ? newRect.left : targetRect.left; targetRect.bottom = (newRect.bottom > targetRect.bottom || targetRect.bottom === -1) ? newRect.bottom : targetRect.bottom; targetRect.right = (newRect.right > targetRect.right || targetRect.right === -1) ? newRect.right : targetRect.right; targetRect.width = targetRect.right - targetRect.left + 1; targetRect.height = targetRect.bottom - targetRect.top + 1; return targetRect; } /***/ }, /* 251 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_347f6a65', group: 'group_347f6a65', groupIsDropping: 'groupIsDropping_347f6a65', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_347f6a65{position:relative;font-size:12px}.root_347f6a65 BUTTON{background-color:transparent}.group_347f6a65{transition:background-color 267ms cubic-bezier(.445,.05,.55,.95)}.groupIsDropping_347f6a65{background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.root_347f6a65 .ms-List-cell{min-height:38px}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 252 */ /***/ 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__(2); var BaseDecorator_1 = __webpack_require__(253); var Utilities_1 = __webpack_require__(10); var RESIZE_DELAY = 500; var MAX_RESIZE_ATTEMPTS = 3; function withViewport(ComposedComponent) { return (function (_super) { __extends(WithViewportComponent, _super); function WithViewportComponent() { var _this = _super.call(this) || this; /* Note: using lambda here because decorators don't seem to work in decorators. */ _this._updateViewport = function (withForceUpdate) { var viewport = _this.state.viewport; var viewportElement = _this.refs.root; var scrollElement = Utilities_1.findScrollableParent(viewportElement); var scrollRect = Utilities_1.getRect(scrollElement); var clientRect = Utilities_1.getRect(viewportElement); var updateComponent = function () { if (withForceUpdate && _this._composedComponentInstance) { _this._composedComponentInstance.forceUpdate(); } }; var isSizeChanged = (clientRect.width !== viewport.width || scrollRect.height !== viewport.height); if (isSizeChanged && _this._resizeAttempts < MAX_RESIZE_ATTEMPTS) { _this._resizeAttempts++; _this.setState({ viewport: { width: clientRect.width, height: scrollRect.height } }, function () { _this._updateViewport(withForceUpdate); }); } else { _this._resizeAttempts = 0; updateComponent(); } }; _this._resizeAttempts = 0; _this.state = { viewport: { width: 0, height: 0 } }; return _this; } WithViewportComponent.prototype.componentDidMount = function () { this._onAsyncResize = this._async.debounce(this._onAsyncResize, RESIZE_DELAY, { leading: false }); this._events.on(window, 'resize', this._onAsyncResize); this._updateViewport(); }; WithViewportComponent.prototype.componentWillUnmount = function () { this._events.dispose(); }; WithViewportComponent.prototype.render = function () { var viewport = this.state.viewport; var isViewportVisible = viewport.width > 0 && viewport.height > 0; return (React.createElement("div", { className: 'ms-Viewport', ref: 'root', style: { minWidth: 1, minHeight: 1 } }, isViewportVisible && (React.createElement(ComposedComponent, __assign({ ref: this._updateComposedComponentRef, viewport: viewport }, this.props))))); }; WithViewportComponent.prototype.forceUpdate = function () { this._updateViewport(true); }; WithViewportComponent.prototype._onAsyncResize = function () { this._updateViewport(); }; return WithViewportComponent; }(BaseDecorator_1.BaseDecorator)); } exports.withViewport = withViewport; /***/ }, /* 253 */ /***/ 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 Utilities_1 = __webpack_require__(10); var BaseDecorator = (function (_super) { __extends(BaseDecorator, _super); function BaseDecorator() { var _this = _super.call(this) || this; _this._shouldUpdateComponentRef = false; _this._updateComposedComponentRef = _this._updateComposedComponentRef.bind(_this); return _this; } /** * Updates the ref to the component composed by the decorator, which will also take care of hoisting * (and unhoisting as appropriate) methods from said component. * * Pass this method as the argument to the 'ref' property of the composed component. */ BaseDecorator.prototype._updateComposedComponentRef = function (composedComponentInstance) { this._composedComponentInstance = composedComponentInstance; if (composedComponentInstance) { this._hoisted = Utilities_1.hoistMethods(this, composedComponentInstance); } else if (this._hoisted) { Utilities_1.unhoistMethods(this, this._hoisted); } }; return BaseDecorator; }(Utilities_1.BaseComponent)); exports.BaseDecorator = BaseDecorator; /***/ }, /* 254 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var ReactDOM = __webpack_require__(3); var Utilities_1 = __webpack_require__(10); var DISTANCE_FOR_DRAG_SQUARED = 25; // the minimum mouse move distance to treat it as drag event var MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button var MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button var DragDropHelper = (function () { function DragDropHelper(params) { this._selection = params.selection; this._dragEnterCounts = {}; this._activeTargets = {}; this._lastId = 0; this._distanceSquaredForDrag = typeof params.minimumPixelsForDrag === 'number' ? params.minimumPixelsForDrag * params.minimumPixelsForDrag : DISTANCE_FOR_DRAG_SQUARED; this._events = new Utilities_1.EventGroup(this); // clear drag data when mouse up, use capture event to ensure it will be run this._events.on(document.body, 'mouseup', this._onMouseUp.bind(this), true); this._events.on(document, 'mouseup', this._onDocumentMouseUp.bind(this), true); } DragDropHelper.prototype.dispose = function () { this._events.dispose(); }; DragDropHelper.prototype.subscribe = function (root, events, dragDropOptions) { var _this = this; var _a = dragDropOptions.key, key = _a === void 0 ? "" + ++this._lastId : _a; var handlers = []; var onDragLeave; var onDragEnter; var onDragEnd; var onDrop; var onDragOver; var onMouseDown; var isDraggable; var isDroppable; var activeTarget; if (dragDropOptions && root) { var eventMap = dragDropOptions.eventMap, context_1 = dragDropOptions.context, updateDropState_1 = dragDropOptions.updateDropState; var dragDropTarget = { root: root, options: dragDropOptions, key: key }; isDraggable = this._isDraggable(dragDropTarget); isDroppable = this._isDroppable(dragDropTarget); if (isDraggable || isDroppable) { if (eventMap) { for (var _i = 0, eventMap_1 = eventMap; _i < eventMap_1.length; _i++) { var event_1 = eventMap_1[_i]; var handler = { callback: event_1.callback.bind(null, context_1), eventName: event_1.eventName }; handlers.push(handler); this._events.on(root, handler.eventName, handler.callback); } } } if (isDroppable) { // If the target is droppable, wire up global event listeners to track drop-related events. onDragLeave = function (event) { if (!event.isHandled) { event.isHandled = true; _this._dragEnterCounts[key]--; if (_this._dragEnterCounts[key] === 0) { updateDropState_1(false /* isDropping */, event); } } }; onDragEnter = function (event) { event.preventDefault(); // needed for IE if (!event.isHandled) { event.isHandled = true; _this._dragEnterCounts[key]++; if (_this._dragEnterCounts[key] === 1) { updateDropState_1(true /* isDropping */, event); } } }; onDragEnd = function (event) { _this._dragEnterCounts[key] = 0; updateDropState_1(false /* isDropping */, event); }; onDrop = function (event) { _this._dragEnterCounts[key] = 0; updateDropState_1(false /* isDropping */, event); if (dragDropOptions.onDrop) { dragDropOptions.onDrop(dragDropOptions.context.data, event); } }; onDragOver = function (event) { event.preventDefault(); }; this._dragEnterCounts[key] = 0; // dragenter and dragleave will be fired when hover to the child element // but we only want to change state when enter or leave the current element // use the count to ensure it. events.on(root, 'dragenter', onDragEnter); events.on(root, 'dragleave', onDragLeave); events.on(root, 'dragend', onDragEnd); events.on(root, 'drop', onDrop); events.on(root, 'dragover', onDragOver); } if (isDraggable) { // If the target is draggable, wire up local event listeners for mouse events. onMouseDown = this._onMouseDown.bind(this, dragDropTarget); onDragEnd = this._onDragEnd.bind(this, dragDropTarget); events.on(root, 'mousedown', onMouseDown); events.on(root, 'dragend', onDragEnd); } activeTarget = { target: dragDropTarget, dispose: function () { if (_this._activeTargets[key] === activeTarget) { delete _this._activeTargets[key]; } if (root) { for (var _i = 0, handlers_1 = handlers; _i < handlers_1.length; _i++) { var handler = handlers_1[_i]; _this._events.off(root, handler.eventName, handler.callback); } if (isDroppable) { events.off(root, 'dragenter', onDragEnter); events.off(root, 'dragleave', onDragLeave); events.off(root, 'dragend', onDragEnd); events.off(root, 'dragover', onDragOver); events.off(root, 'drop', onDrop); } if (isDraggable) { events.off(root, 'mousedown', onMouseDown); events.off(root, 'dragend', onDragEnd); } } } }; this._activeTargets[key] = activeTarget; } return { key: key, dispose: function () { if (activeTarget) { activeTarget.dispose(); } } }; }; DragDropHelper.prototype.unsubscribe = function (root, key) { var activeTarget = this._activeTargets[key]; if (activeTarget) { activeTarget.dispose(); } }; DragDropHelper.prototype._onDragEnd = function (target, event) { var options = target.options; if (options.onDragEnd) { options.onDragEnd(options.context.data, event); } }; /** * clear drag data when mouse up on body */ DragDropHelper.prototype._onMouseUp = function (event) { this._isDragging = false; if (this._dragData) { for (var _i = 0, _a = Object.keys(this._activeTargets); _i < _a.length; _i++) { var key = _a[_i]; var activeTarget = this._activeTargets[key]; if (activeTarget.target.root) { this._events.off(activeTarget.target.root, 'mousemove'); this._events.off(activeTarget.target.root, 'mouseleave'); } } if (this._dragData.dropTarget) { // raise dragleave event to let dropTarget know it need to remove dropping style Utilities_1.EventGroup.raise(this._dragData.dropTarget.root, 'dragleave'); Utilities_1.EventGroup.raise(this._dragData.dropTarget.root, 'drop'); } } this._dragData = null; }; /** * clear drag data when mouse up outside of the document */ DragDropHelper.prototype._onDocumentMouseUp = function (event) { if (event.target === document.documentElement) { this._onMouseUp(event); } }; /** * when mouse move over a new drop target while dragging some items, * fire dragleave on the old target and fire dragenter to the new target * The target will handle style change on dragenter and dragleave events. */ DragDropHelper.prototype._onMouseMove = function (target, event) { var // use buttons property here since ev.button in some edge case is not updating well during the move. // but firefox doesn't support it, so we set the default value when it is not defined. _a = event.buttons, // use buttons property here since ev.button in some edge case is not updating well during the move. // but firefox doesn't support it, so we set the default value when it is not defined. buttons = _a === void 0 ? MOUSEMOVE_PRIMARY_BUTTON : _a; if (this._dragData && buttons !== MOUSEMOVE_PRIMARY_BUTTON) { // cancel mouse down event and return early when the primary button is not pressed this._onMouseUp(event); return; } var root = target.root, options = target.options, key = target.key; if (this._isDragging) { if (this._isDroppable(target)) { // we can have nested drop targets in the DOM, like a folder inside a group. In that case, when we drag into // the inner target (folder), we first set dropTarget to the inner element. But the same event is bubbled to the // outer target too, and we need to prevent the outer one from taking over. // So, check if the last dropTarget is not a child of the current. if (this._dragData.dropTarget && this._dragData.dropTarget.key !== key && !this._isChild(root, this._dragData.dropTarget.root)) { Utilities_1.EventGroup.raise(this._dragData.dropTarget.root, 'dragleave'); this._dragData.dropTarget = null; } if (!this._dragData.dropTarget) { Utilities_1.EventGroup.raise(root, 'dragenter'); this._dragData.dropTarget = target; } } } else if (this._dragData) { if (this._isDraggable(target)) { var xDiff = this._dragData.clientX - event.clientX; var yDiff = this._dragData.clientY - event.clientY; if (xDiff * xDiff + yDiff * yDiff >= this._distanceSquaredForDrag) { if (this._dragData.dragTarget) { this._isDragging = true; if (options.onDragStart) { options.onDragStart(options.context.data, options.context.index, this._selection.getSelection(), event); } } } } } }; /** * when mouse leave a target while dragging some items, fire dragleave to the target */ DragDropHelper.prototype._onMouseLeave = function (target, event) { if (this._isDragging) { if (this._dragData && this._dragData.dropTarget && this._dragData.dropTarget.key === target.key) { Utilities_1.EventGroup.raise(target.root, 'dragleave'); this._dragData.dropTarget = null; } } }; /** * when mouse down on a draggable item, we start to track dragdata. */ DragDropHelper.prototype._onMouseDown = function (target, event) { if (event.button !== MOUSEDOWN_PRIMARY_BUTTON) { // Ignore anything except the primary button. return; } if (this._isDraggable(target)) { this._dragData = { clientX: event.clientX, clientY: event.clientY, eventTarget: event.target, dragTarget: target }; for (var _i = 0, _a = Object.keys(this._activeTargets); _i < _a.length; _i++) { var key = _a[_i]; var activeTarget = this._activeTargets[key]; if (activeTarget.target.root) { this._events.on(activeTarget.target.root, 'mousemove', this._onMouseMove.bind(this, activeTarget.target)); this._events.on(activeTarget.target.root, 'mouseleave', this._onMouseLeave.bind(this, activeTarget.target)); } } } else { this._dragData = null; } }; /** * determine whether the child target is a descendant of the parent */ DragDropHelper.prototype._isChild = function (parent, child) { var parentElement = ReactDOM.findDOMNode(parent); var childElement = ReactDOM.findDOMNode(child); while (childElement && childElement.parentElement) { if (childElement.parentElement === parentElement) { return true; } childElement = childElement.parentElement; } return false; }; DragDropHelper.prototype._isDraggable = function (target) { var options = target.options; return options.canDrag && options.canDrag(options.context.data); }; DragDropHelper.prototype._isDroppable = function (target) { // TODO: take the drag item into consideration to prevent dragging an item into the same group var options = target.options; var dragContext = this._dragData && this._dragData.dragTarget ? this._dragData.dragTarget.options.context : null; return options.canDrop && options.canDrop(options.context, dragContext); }; return DragDropHelper; }()); exports.DragDropHelper = DragDropHelper; /***/ }, /* 255 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_a107e0e9', focusZone: 'focusZone_a107e0e9', rootIsHorizontalConstrained: 'rootIsHorizontalConstrained_a107e0e9', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_a107e0e9{position:relative;font-size:12px;background:0 0;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.focusZone_a107e0e9{display:inline-block;vertical-align:top;min-width:100%;min-height:1px}.rootIsHorizontalConstrained_a107e0e9{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.root_a107e0e9 .ms-List-cell{min-height:38px;word-break:break-word}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 256 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(257)); var index_1 = __webpack_require__(257); exports.default = index_1.Dialog; /***/ }, /* 257 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(258)); __export(__webpack_require__(272)); __export(__webpack_require__(273)); __export(__webpack_require__(259)); /***/ }, /* 258 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var Dialog_Props_1 = __webpack_require__(259); var Modal_1 = __webpack_require__(260); var withResponsiveMode_1 = __webpack_require__(269); var stylesImport = __webpack_require__(271); var styles = stylesImport; var DialogContent_1 = __webpack_require__(272); var Dialog = (function (_super) { __extends(Dialog, _super); function Dialog(props) { var _this = _super.call(this, props) || this; _this.state = { id: Utilities_1.getId('Dialog'), }; return _this; } Dialog.prototype.render = function () { var _a = this.props, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isClickableOutsideFocusTrap = _a.isClickableOutsideFocusTrap, isDarkOverlay = _a.isDarkOverlay, isOpen = _a.isOpen, onDismiss = _a.onDismiss, onDismissed = _a.onDismissed, onLayerDidMount = _a.onLayerDidMount, onLayerMounted = _a.onLayerMounted, responsiveMode = _a.responsiveMode, subText = _a.subText, title = _a.title, type = _a.type, contentClassName = _a.contentClassName, topButtonsProps = _a.topButtonsProps; var id = this.state.id; var dialogClassName = Utilities_1.css(this.props.className, (_b = {}, _b['ms-Dialog--lgHeader ' + styles.isLargeHeader] = type === Dialog_Props_1.DialogType.largeHeader, _b['ms-Dialog--close ' + styles.isClose] = type === Dialog_Props_1.DialogType.close, _b)); var containerClassName = Utilities_1.css(this.props.containerClassName, styles.main); return (React.createElement(Modal_1.Modal, { className: dialogClassName, containerClassName: containerClassName, elementToFocusOnDismiss: elementToFocusOnDismiss, firstFocusableSelector: firstFocusableSelector, forceFocusInsideTrap: forceFocusInsideTrap, ignoreExternalFocusing: ignoreExternalFocusing, isBlocking: isBlocking, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap, isDarkOverlay: isDarkOverlay, isOpen: isOpen, onDismiss: onDismiss, onDismissed: onDismissed, onLayerDidMount: onLayerDidMount, responsiveMode: responsiveMode, subtitleAriaId: subText && id + '-subText', titleAriaId: title && id + '-title' }, React.createElement(DialogContent_1.DialogContent, { onDismiss: onDismiss, showCloseButton: !isBlocking && type !== Dialog_Props_1.DialogType.largeHeader, title: title, subText: subText, className: contentClassName, topButtonsProps: topButtonsProps }, this.props.children))); var _b; }; return Dialog; }(Utilities_1.BaseComponent)); Dialog.defaultProps = { isOpen: false, type: Dialog_Props_1.DialogType.normal, isDarkOverlay: true, isBlocking: false, className: '', containerClassName: '', contentClassName: '', topButtonsProps: [] }; Dialog = __decorate([ withResponsiveMode_1.withResponsiveMode ], Dialog); exports.Dialog = Dialog; /***/ }, /* 259 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var DialogType; (function (DialogType) { /** Standard dialog */ DialogType[DialogType["normal"] = 0] = "normal"; /** Dialog with large header banner */ DialogType[DialogType["largeHeader"] = 1] = "largeHeader"; /** Dialog with an 'x' close button in the upper-right corner */ DialogType[DialogType["close"] = 2] = "close"; })(DialogType = exports.DialogType || (exports.DialogType = {})); /***/ }, /* 260 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(261)); var index_1 = __webpack_require__(261); exports.default = index_1.Modal; /***/ }, /* 261 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(262)); /***/ }, /* 262 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var index_1 = __webpack_require__(263); var Overlay_1 = __webpack_require__(265); var Layer_1 = __webpack_require__(132); var index_2 = __webpack_require__(65); var withResponsiveMode_1 = __webpack_require__(269); var stylesImport = __webpack_require__(270); var styles = stylesImport; var Modal = (function (_super) { __extends(Modal, _super); function Modal(props) { var _this = _super.call(this, props) || this; _this.state = { id: Utilities_1.getId('Modal'), isOpen: props.isOpen, isVisible: props.isOpen, }; return _this; } Modal.prototype.componentWillReceiveProps = function (newProps) { clearTimeout(this._onModalCloseTimer); // Opening the dialog if (newProps.isOpen) { if (!this.state.isOpen) { // First Open this.setState({ isOpen: true }); } else { // Reopen during closing this.setState({ isVisible: true }); } } // Closing the dialog if (!newProps.isOpen && this.state.isOpen) { this._onModalCloseTimer = this._async.setTimeout(this._onModalClose, parseFloat(styles.duration) * 1000); this.setState({ isVisible: false }); } }; Modal.prototype.componentDidUpdate = function (prevProps, prevState) { if (!prevProps.isOpen && !prevState.isVisible) { this.setState({ isVisible: true }); } }; Modal.prototype.render = function () { var _a = this.props, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isClickableOutsideFocusTrap = _a.isClickableOutsideFocusTrap, isDarkOverlay = _a.isDarkOverlay, onDismiss = _a.onDismiss, onLayerDidMount = _a.onLayerDidMount, responsiveMode = _a.responsiveMode, titleAriaId = _a.titleAriaId, subtitleAriaId = _a.subtitleAriaId; var _b = this.state, id = _b.id, isOpen = _b.isOpen, isVisible = _b.isVisible; var modalClassName = Utilities_1.css('ms-Dialog', styles.root, this.props.className, (_c = {}, _c['is-open'] = isOpen, _c[styles.rootIsVisible] = isVisible, _c)); if (!isOpen) { return null; } // @temp tuatology - Will adjust this to be a panel at certain breakpoints if (responsiveMode >= withResponsiveMode_1.ResponsiveMode.small) { return (React.createElement(Layer_1.Layer, { onLayerDidMount: onLayerDidMount }, React.createElement(index_2.Popup, { role: isBlocking ? 'alertdialog' : 'dialog', ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, onDismiss: onDismiss }, React.createElement("div", { className: modalClassName }, React.createElement(Overlay_1.Overlay, { isDarkThemed: isDarkOverlay, onClick: isBlocking ? null : onDismiss }), React.createElement(index_1.FocusTrapZone, { className: Utilities_1.css('ms-Dialog-main', styles.main, this.props.containerClassName), elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap ? isClickableOutsideFocusTrap : !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector }, this.props.children))))); } var _c; }; // Watch for completed animations and set the state Modal.prototype._onModalClose = function () { this.setState({ isOpen: false }); // Call the onDismiss callback if (this.props.onDismissed) { this.props.onDismissed(); } }; return Modal; }(Utilities_1.BaseComponent)); Modal.defaultProps = { isOpen: false, isDarkOverlay: true, isBlocking: false, className: '', containerClassName: '', }; Modal = __decorate([ withResponsiveMode_1.withResponsiveMode ], Modal); exports.Modal = Modal; /***/ }, /* 263 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(264)); /***/ }, /* 264 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var FocusTrapZone = (function (_super) { __extends(FocusTrapZone, _super); function FocusTrapZone() { var _this = _super !== null && _super.apply(this, arguments) || this; _this._isInFocusStack = false; _this._isInClickStack = false; return _this; } FocusTrapZone.prototype.componentWillMount = function () { var _a = this.props, _b = _a.isClickableOutsideFocusTrap, isClickableOutsideFocusTrap = _b === void 0 ? false : _b, _c = _a.forceFocusInsideTrap, forceFocusInsideTrap = _c === void 0 ? true : _c; if (forceFocusInsideTrap) { this._isInFocusStack = true; FocusTrapZone._focusStack.push(this); } if (!isClickableOutsideFocusTrap) { this._isInClickStack = true; FocusTrapZone._clickStack.push(this); } }; FocusTrapZone.prototype.componentDidMount = function () { var _a = this.props, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, _b = _a.isClickableOutsideFocusTrap, isClickableOutsideFocusTrap = _b === void 0 ? false : _b, _c = _a.forceFocusInsideTrap, forceFocusInsideTrap = _c === void 0 ? true : _c; this._previouslyFocusedElement = elementToFocusOnDismiss ? elementToFocusOnDismiss : document.activeElement; if (!Utilities_1.elementContains(this.refs.root, this._previouslyFocusedElement)) { this.focus(); } if (forceFocusInsideTrap) { this._events.on(window, 'focus', this._forceFocusInTrap, true); } if (!isClickableOutsideFocusTrap) { this._events.on(window, 'click', this._forceClickInTrap, true); } }; FocusTrapZone.prototype.componentWillUnmount = function () { var _this = this; var ignoreExternalFocusing = this.props.ignoreExternalFocusing; this._events.dispose(); if (this._isInFocusStack || this._isInClickStack) { var filter = function (value) { return _this !== value; }; if (this._isInFocusStack) { FocusTrapZone._focusStack = FocusTrapZone._focusStack.filter(filter); } if (this._isInClickStack) { FocusTrapZone._clickStack = FocusTrapZone._clickStack.filter(filter); } } if (!ignoreExternalFocusing && this._previouslyFocusedElement && typeof this._previouslyFocusedElement.focus === 'function') { this._previouslyFocusedElement.focus(); } }; FocusTrapZone.prototype.render = function () { var _a = this.props, className = _a.className, ariaLabelledBy = _a.ariaLabelledBy; var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties); return (React.createElement("div", __assign({}, divProps, { className: className, ref: 'root', "aria-labelledby": ariaLabelledBy, onKeyDown: this._onKeyboardHandler }), this.props.children)); }; /** * Need to expose this method in case of popups since focus needs to be set when popup is opened */ FocusTrapZone.prototype.focus = function () { var firstFocusableSelector = this.props.firstFocusableSelector; var _firstFocusableChild; var root = this.refs.root; if (firstFocusableSelector) { _firstFocusableChild = root.querySelector('.' + firstFocusableSelector); } else { _firstFocusableChild = Utilities_1.getNextElement(root, root.firstChild, true, false, false, true); } if (_firstFocusableChild) { _firstFocusableChild.focus(); } }; FocusTrapZone.prototype._onKeyboardHandler = function (ev) { if (ev.which !== Utilities_1.KeyCodes.tab) { return; } var root = this.refs.root; var _firstFocusableChild = Utilities_1.getFirstFocusable(root, root.firstChild, true); var _lastFocusableChild = Utilities_1.getLastFocusable(root, root.lastChild, true); if (ev.shiftKey && _firstFocusableChild === ev.target) { _lastFocusableChild.focus(); ev.preventDefault(); ev.stopPropagation(); } else if (!ev.shiftKey && _lastFocusableChild === ev.target) { _firstFocusableChild.focus(); ev.preventDefault(); ev.stopPropagation(); } }; FocusTrapZone.prototype._forceFocusInTrap = function (ev) { if (FocusTrapZone._focusStack.length && this === FocusTrapZone._focusStack[FocusTrapZone._focusStack.length - 1]) { var focusedElement = document.activeElement; if (!Utilities_1.elementContains(this.refs.root, focusedElement)) { this.focus(); ev.preventDefault(); ev.stopPropagation(); } } }; FocusTrapZone.prototype._forceClickInTrap = function (ev) { if (FocusTrapZone._clickStack.length && this === FocusTrapZone._clickStack[FocusTrapZone._clickStack.length - 1]) { var clickedElement = ev.target; if (clickedElement && !Utilities_1.elementContains(this.refs.root, clickedElement)) { this.focus(); ev.preventDefault(); ev.stopPropagation(); } } }; return FocusTrapZone; }(Utilities_1.BaseComponent)); FocusTrapZone._focusStack = []; FocusTrapZone._clickStack = []; __decorate([ Utilities_1.autobind ], FocusTrapZone.prototype, "_onKeyboardHandler", null); exports.FocusTrapZone = FocusTrapZone; /***/ }, /* 265 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(266)); /***/ }, /* 266 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(267)); /***/ }, /* 267 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(268); var styles = stylesImport; var Overlay = (function (_super) { __extends(Overlay, _super); function Overlay() { return _super !== null && _super.apply(this, arguments) || this; } Overlay.prototype.componentDidMount = function () { Utilities_1.disableBodyScroll(); }; Overlay.prototype.componentWillUnmount = function () { Utilities_1.enableBodyScroll(); }; Overlay.prototype.render = function () { var _a = this.props, isDarkThemed = _a.isDarkThemed, className = _a.className; var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties); var modifiedClassName = Utilities_1.css('ms-Overlay', styles.root, className, (_b = {}, _b['ms-Overlay--dark ' + styles.rootIsDark] = isDarkThemed, _b)); return (React.createElement("div", __assign({}, divProps, { className: modifiedClassName }))); var _b; }; return Overlay; }(Utilities_1.BaseComponent)); exports.Overlay = Overlay; /***/ }, /* 268 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_96cb34c6', rootIsNone: 'rootIsNone_96cb34c6', rootIsDark: 'rootIsDark_96cb34c6', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_96cb34c6{background-color:" }, { "theme": "whiteTranslucent40", "defaultValue": "rgba(255,255,255,.4)" }, { "rawString": ";position:absolute;bottom:0;left:0;right:0;top:0}.root_96cb34c6.rootIsNone_96cb34c6{visibility:hidden}.root_96cb34c6.rootIsDark_96cb34c6{background-color:" }, { "theme": "blackTranslucent40", "defaultValue": "rgba(0,0,0,.4)" }, { "rawString": "}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 269 */ /***/ 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__(2); var BaseDecorator_1 = __webpack_require__(253); var Utilities_1 = __webpack_require__(10); var ResponsiveMode; (function (ResponsiveMode) { ResponsiveMode[ResponsiveMode["small"] = 0] = "small"; ResponsiveMode[ResponsiveMode["medium"] = 1] = "medium"; ResponsiveMode[ResponsiveMode["large"] = 2] = "large"; ResponsiveMode[ResponsiveMode["xLarge"] = 3] = "xLarge"; ResponsiveMode[ResponsiveMode["xxLarge"] = 4] = "xxLarge"; ResponsiveMode[ResponsiveMode["xxxLarge"] = 5] = "xxxLarge"; })(ResponsiveMode = exports.ResponsiveMode || (exports.ResponsiveMode = {})); var RESPONSIVE_MAX_CONSTRAINT = [ 479, 639, 1023, 1365, 1919, 99999999 ]; var _defaultMode; /** * Allows a server rendered scenario to provide a default responsive mode. */ function setResponsiveMode(responsiveMode) { _defaultMode = responsiveMode; } exports.setResponsiveMode = setResponsiveMode; function withResponsiveMode(ComposedComponent) { return (function (_super) { __extends(WithResponsiveMode, _super); function WithResponsiveMode() { var _this = _super.call(this) || this; _this._updateComposedComponentRef = _this._updateComposedComponentRef.bind(_this); _this.state = { responsiveMode: _this._getResponsiveMode() }; return _this; } WithResponsiveMode.prototype.componentDidMount = function () { var _this = this; this._events.on(window, 'resize', function () { var responsiveMode = _this._getResponsiveMode(); if (responsiveMode !== _this.state.responsiveMode) { _this.setState({ responsiveMode: responsiveMode }); } }); }; WithResponsiveMode.prototype.componentWillUnmount = function () { this._events.dispose(); }; WithResponsiveMode.prototype.render = function () { var responsiveMode = this.state.responsiveMode; return (React.createElement(ComposedComponent, __assign({ ref: this._updateComposedComponentRef, responsiveMode: responsiveMode }, this.props))); }; WithResponsiveMode.prototype._getResponsiveMode = function () { var responsiveMode = ResponsiveMode.small; var win = Utilities_1.getWindow(); if (typeof win !== 'undefined') { while (win.innerWidth > RESPONSIVE_MAX_CONSTRAINT[responsiveMode]) { responsiveMode++; } } else { if (_defaultMode !== undefined) { responsiveMode = _defaultMode; } else { throw new Error('Content was rendered in a server environment without providing a default responsive mode. ' + 'Call setResponsiveMode to define what the responsive mode is.'); } } return responsiveMode; }; return WithResponsiveMode; }(BaseDecorator_1.BaseDecorator)); } exports.withResponsiveMode = withResponsiveMode; /***/ }, /* 270 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { duration: '0.267s', root: 'root_a3f85f57', rootIsVisible: 'rootIsVisible_a3f85f57', main: 'main_a3f85f57', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_a3f85f57{background-color:transparent;position:fixed;height:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 267ms}.root_a3f85f57 .ms-Button.ms-Button--compound{display:block}[dir=ltr] .root_a3f85f57 .ms-Button.ms-Button--compound{margin-left:0}[dir=rtl] .root_a3f85f57 .ms-Button.ms-Button--compound{margin-right:0}@media screen and (-ms-high-contrast:active){.root_a3f85f57 .ms-Overlay{opacity:0}}.rootIsVisible_a3f85f57{opacity:1;pointer-events:auto}.main_a3f85f57{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";box-sizing:border-box;position:relative;outline:3px solid transparent;max-height:100%;overflow-y:auto}[dir=ltr] .main_a3f85f57{text-align:left}[dir=rtl] .main_a3f85f57{text-align:right}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 271 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { isOpen: 'isOpen_4755d2e8', main: 'main_4755d2e8', button: 'button_4755d2e8', isClose: 'isClose_4755d2e8', inner: 'inner_4755d2e8', header: 'header_4755d2e8', title: 'title_4755d2e8', topButton: 'topButton_4755d2e8', content: 'content_4755d2e8', subText: 'subText_4755d2e8', actions: 'actions_4755d2e8', actionsRight: 'actionsRight_4755d2e8', action: 'action_4755d2e8', isLargeHeader: 'isLargeHeader_4755d2e8', isMultiline: 'isMultiline_4755d2e8', }; load_themed_styles_1.loadStyles([{ "rawString": ".isOpen_4755d2e8{display:-webkit-box;display:-ms-flexbox;display:flex}.main_4755d2e8{width:288px}.button_4755d2e8.isClose_4755d2e8{display:none}.button_4755d2e8.isClose_4755d2e8 .ms-Icon.ms-Icon--Cancel{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:16px}.inner_4755d2e8{padding:0 28px 20px}.header_4755d2e8{position:relative;width:100%;box-sizing:border-box}.title_4755d2e8{margin:0;font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";padding:20px 36px 20px 28px}[dir=rtl] .title_4755d2e8{padding:20px 28px 20px 36px}.topButton_4755d2e8{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;position:absolute;top:0;padding:12px 12px 0 0}[dir=ltr] .topButton_4755d2e8{right:0}[dir=rtl] .topButton_4755d2e8{left:0}[dir=rtl] .topButton_4755d2e8{padding:12px 0 0 12px}.topButton_4755d2e8>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.content_4755d2e8{position:relative;width:100%}.content_4755d2e8 .ms-Button.ms-Button--compound{margin-bottom:20px}.content_4755d2e8 .ms-Button.ms-Button--compound:last-child{margin-bottom:0}.subText_4755d2e8{margin:0 0 20px 0;padding-top:8px;font-size:12px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-weight:300;line-height:1.5}.actions_4755d2e8{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.actions_4755d2e8 .ms-Button{line-height:normal}.actionsRight_4755d2e8{font-size:0}[dir=ltr] .actionsRight_4755d2e8{text-align:right}[dir=rtl] .actionsRight_4755d2e8{text-align:left}[dir=ltr] .actionsRight_4755d2e8{margin-right:-4px}[dir=rtl] .actionsRight_4755d2e8{margin-left:-4px}.actionsRight_4755d2e8 .action_4755d2e8{margin:0 4px}.isClose_4755d2e8:not(.isLargeHeader_4755d2e8) .button_4755d2e8.isClose_4755d2e8{display:block}.isMultiline_4755d2e8 .title_4755d2e8{font-size:28px}.isMultiline_4755d2e8 .inner_4755d2e8{padding:0 20px 20px}.isLargeHeader_4755d2e8 .header_4755d2e8{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.isLargeHeader_4755d2e8 .title_4755d2e8{font-size:28px;font-weight:100;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";padding:26px 28px 28px;margin-bottom:8px}.isLargeHeader_4755d2e8 .subText_4755d2e8{font-size:14px}@media (min-width:480px){.main_4755d2e8{width:auto;min-width:288px;max-width:340px}}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 272 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var Button_1 = __webpack_require__(154); var DialogFooter_1 = __webpack_require__(273); var withResponsiveMode_1 = __webpack_require__(269); var stylesImport = __webpack_require__(271); var styles = stylesImport; var DialogContent = (function (_super) { __extends(DialogContent, _super); function DialogContent(props) { var _this = _super.call(this, props) || this; _this.state = { id: Utilities_1.getId('Dialog'), }; return _this; } DialogContent.prototype.render = function () { var _a = this.props, showCloseButton = _a.showCloseButton, closeButtonAriaLabel = _a.closeButtonAriaLabel, onDismiss = _a.onDismiss, subText = _a.subText, title = _a.title; var id = this.state.id; var groupings = this._groupChildren(); var subTextContent; if (subText) { subTextContent = React.createElement("p", { className: Utilities_1.css('ms-Dialog-subText', styles.subText), id: id + '-subText' }, subText); } return (React.createElement("div", null, React.createElement("div", { className: Utilities_1.css('ms-Dialog-header', styles.header) }, React.createElement("p", { className: Utilities_1.css('ms-Dialog-title', styles.title), id: id + '-title', role: 'heading' }, title), React.createElement("div", { className: Utilities_1.css('ms-Dialog-topButton', styles.topButton) }, this.props.topButtonsProps.map(function (props) { return (React.createElement(Button_1.IconButton, __assign({}, props))); }), React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Dialog-button ms-Dialog-button--close', styles.button, (_b = {}, _b[styles.isClose] = !showCloseButton, _b)), iconProps: { iconName: 'Cancel' }, ariaLabel: closeButtonAriaLabel, onClick: onDismiss }))), React.createElement("div", { className: Utilities_1.css('ms-Dialog-inner', styles.inner) }, React.createElement("div", { className: Utilities_1.css('ms-Dialog-content', styles.content, this.props.className) }, subTextContent, groupings.contents), groupings.footers))); var _b; }; // @TODO - typing the footers as an array of DialogFooter is difficult because // casing "child as DialogFooter" causes a problem because // "Neither type 'ReactElement<any>' nor type 'DialogFooter' is assignable to the other." DialogContent.prototype._groupChildren = function () { var groupings = { footers: [], contents: [] }; React.Children.map(this.props.children, function (child) { if (typeof child === 'object' && child !== null && child.type === DialogFooter_1.DialogFooter) { groupings.footers.push(child); } else { groupings.contents.push(child); } }); return groupings; }; return DialogContent; }(Utilities_1.BaseComponent)); DialogContent.defaultProps = { showCloseButton: false, className: '', topButtonsProps: [] }; DialogContent = __decorate([ withResponsiveMode_1.withResponsiveMode ], DialogContent); exports.DialogContent = DialogContent; /***/ }, /* 273 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(271); var styles = stylesImport; var DialogFooter = (function (_super) { __extends(DialogFooter, _super); function DialogFooter() { return _super !== null && _super.apply(this, arguments) || this; } DialogFooter.prototype.render = function () { return (React.createElement("div", { className: Utilities_1.css('ms-Dialog-actions', styles.actions) }, React.createElement("div", { className: Utilities_1.css('ms-Dialog-actionsRight', styles.actionsRight) }, this._renderChildrenAsActions()))); }; DialogFooter.prototype._renderChildrenAsActions = function () { return React.Children.map(this.props.children, function (child) { return React.createElement("span", { className: Utilities_1.css('ms-Dialog-action', styles.action) }, child); }); }; return DialogFooter; }(Utilities_1.BaseComponent)); exports.DialogFooter = DialogFooter; /***/ }, /* 274 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(275)); /***/ }, /* 275 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(276)); __export(__webpack_require__(277)); __export(__webpack_require__(279)); __export(__webpack_require__(280)); __export(__webpack_require__(287)); __export(__webpack_require__(288)); __export(__webpack_require__(289)); /***/ }, /* 276 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var DocumentCard_Props_1 = __webpack_require__(277); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(278); var styles = stylesImport; var DocumentCard = (function (_super) { __extends(DocumentCard, _super); function DocumentCard() { return _super !== null && _super.apply(this, arguments) || this; } DocumentCard.prototype.render = function () { var _a = this.props, onClick = _a.onClick, onClickHref = _a.onClickHref, children = _a.children, className = _a.className, type = _a.type, accentColor = _a.accentColor; var actionable = (onClick || onClickHref) ? true : false; // Override the border color if an accent color was provided (compact card only) var style; if (type === DocumentCard_Props_1.DocumentCardType.compact && accentColor) { style = { borderBottomColor: accentColor }; } // if this element is actionable it should have an aria role var role = actionable ? (onClick ? 'button' : 'link') : null; var tabIndex = actionable ? 0 : null; return (React.createElement("div", { tabIndex: tabIndex, role: role, className: Utilities_1.css('ms-DocumentCard', styles.root, (_b = {}, _b['ms-DocumentCard--actionable ' + styles.rootIsActionable] = actionable, _b['ms-DocumentCard--compact ' + styles.rootIsCompact] = type === DocumentCard_Props_1.DocumentCardType.compact ? true : false, _b), className), onKeyDown: actionable ? this._onKeyDown : null, onClick: actionable ? this._onClick : null, style: style }, children)); var _b; }; DocumentCard.prototype._onClick = function (ev) { this._onAction(ev); }; DocumentCard.prototype._onKeyDown = function (ev) { if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) { this._onAction(ev); } }; DocumentCard.prototype._onAction = function (ev) { var _a = this.props, onClick = _a.onClick, onClickHref = _a.onClickHref; if (onClick) { onClick(ev); } else if (!onClick && onClickHref) { // If no onClick Function was provided and we do have an onClickHref, redirect to the onClickHref window.location.href = onClickHref; ev.preventDefault(); ev.stopPropagation(); } }; return DocumentCard; }(Utilities_1.BaseComponent)); DocumentCard.defaultProps = { type: DocumentCard_Props_1.DocumentCardType.normal }; __decorate([ Utilities_1.autobind ], DocumentCard.prototype, "_onClick", null); __decorate([ Utilities_1.autobind ], DocumentCard.prototype, "_onKeyDown", null); __decorate([ Utilities_1.autobind ], DocumentCard.prototype, "_onAction", null); exports.DocumentCard = DocumentCard; /***/ }, /* 277 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var DocumentCardType; (function (DocumentCardType) { /** * Standard DocumentCard. */ DocumentCardType[DocumentCardType["normal"] = 0] = "normal"; /** * Compact layout. Displays the preview beside the details, rather than above. */ DocumentCardType[DocumentCardType["compact"] = 1] = "compact"; })(DocumentCardType = exports.DocumentCardType || (exports.DocumentCardType = {})); /***/ }, /* 278 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_4e9b7730', rootIsActionable: 'rootIsActionable_4e9b7730', location: 'location_4e9b7730', title: 'title_4e9b7730', rootIsCompact: 'rootIsCompact_4e9b7730', preview: 'preview_4e9b7730', icon: 'icon_4e9b7730', activity: 'activity_4e9b7730', actions: 'actions_4e9b7730', action: 'action_4e9b7730', views: 'views_4e9b7730', activityIsMultiplePeople: 'activityIsMultiplePeople_4e9b7730', avatar: 'avatar_4e9b7730', activityDetails: 'activityDetails_4e9b7730', avatars: 'avatars_4e9b7730', name: 'name_4e9b7730', activityActivity: 'activityActivity_4e9b7730', previewIsFileList: 'previewIsFileList_4e9b7730', fileList: 'fileList_4e9b7730', fileListIcon: 'fileListIcon_4e9b7730', fileListMore: 'fileListMore_4e9b7730', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_4e9b7730{-webkit-font-smoothing:antialiased;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";box-sizing:border-box;max-width:320px;min-width:206px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.rootIsActionable_4e9b7730:hover{cursor:pointer;border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.rootIsActionable_4e9b7730:hover:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";pointer-events:none}.location_4e9b7730+.title_4e9b7730{padding-top:4px}.rootIsCompact_4e9b7730{border-bottom:2px solid " }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";display:-webkit-box;display:-ms-flexbox;display:flex;max-width:480px;height:109px}.rootIsCompact_4e9b7730 .ms-DocumentCard-details{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.rootIsCompact_4e9b7730 .preview_4e9b7730{border-bottom:none;max-height:106px;max-width:144px}.rootIsCompact_4e9b7730 .preview_4e9b7730 .icon_4e9b7730 .ms-Image-image{max-height:32px;max-width:32px}html[dir=ltr] .rootIsCompact_4e9b7730 .preview_4e9b7730{border-right:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=rtl] .rootIsCompact_4e9b7730 .preview_4e9b7730{border-left:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.rootIsCompact_4e9b7730 .title_4e9b7730{padding:12px 16px 8px 16px;font-size:15px;font-weight:400;line-height:16px}.rootIsCompact_4e9b7730 .activity_4e9b7730{padding-bottom:12px}.actions_4e9b7730{height:34px;padding:4px 12px;position:relative}.action_4e9b7730{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";cursor:pointer}html[dir=ltr] .action_4e9b7730{float:left}html[dir=rtl] .action_4e9b7730{float:right}[dir=ltr] .action_4e9b7730{margin-right:4px}[dir=rtl] .action_4e9b7730{margin-left:4px}.action_4e9b7730 .ms-Button{font-size:16px;height:34px;width:34px}.action_4e9b7730 .ms-Button:hover .ms-Button-icon{color:#1174c3;cursor:pointer}.views_4e9b7730{line-height:34px}html[dir=ltr] .views_4e9b7730{text-align:right}html[dir=rtl] .views_4e9b7730{text-align:left}.views_4e9b7730 .ms-Icon{font-size:16px;vertical-align:top}[dir=ltr] .views_4e9b7730 .ms-Icon{margin-right:4px}[dir=rtl] .views_4e9b7730 .ms-Icon{margin-left:4px}.activity_4e9b7730{padding:8px 16px;position:relative}html[dir=ltr] .activityIsMultiplePeople_4e9b7730 .avatar_4e9b7730:nth-of-type(2){margin-left:-16px}html[dir=rtl] .activityIsMultiplePeople_4e9b7730 .avatar_4e9b7730:nth-of-type(2){margin-right:-16px}[dir=ltr] .activityIsMultiplePeople_4e9b7730 .activityDetails_4e9b7730{left:72px}[dir=rtl] .activityIsMultiplePeople_4e9b7730 .activityDetails_4e9b7730{right:72px}.avatars_4e9b7730{height:32px}html[dir=ltr] .avatars_4e9b7730{margin-left:-2px}html[dir=rtl] .avatars_4e9b7730{margin-right:-2px}.avatar_4e9b7730{display:inline-block;vertical-align:top;position:relative;text-align:center;width:32px;height:32px}.avatar_4e9b7730:after{content:'';position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border:2px solid #fafafa;border-radius:50%}.activityDetails_4e9b7730{height:32px;position:absolute;top:8px;width:calc(100% - 72px)}[dir=ltr] .activityDetails_4e9b7730{left:56px}[dir=rtl] .activityDetails_4e9b7730{right:56px}.activityActivity_4e9b7730,.name_4e9b7730{display:block;font-size:12px;font-weight:400;color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.name_4e9b7730{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-weight:600}.location_4e9b7730{font-size:12px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";display:block;padding:8px 16px;position:relative;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.location_4e9b7730:hover{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";cursor:pointer}.preview_4e9b7730{border-bottom:2px solid " }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";position:relative;background-color:" }, { "theme": "neutralLighterAlt", "defaultValue": "#f8f8f8" }, { "rawString": ";overflow:hidden}.preview_4e9b7730.previewIsFileList_4e9b7730{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.icon_4e9b7730{bottom:10px;position:absolute}[dir=ltr] .icon_4e9b7730{left:10px}[dir=rtl] .icon_4e9b7730{right:10px}.fileList_4e9b7730{padding:16px 16px 0 16px;list-style-type:none;margin:0}html[dir=rtl] .fileList_4e9b7730{padding:16px 16px 0 16px}.fileList_4e9b7730 li{height:16px;line-height:16px;margin-bottom:8px;overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap}[dir=ltr] .fileList_4e9b7730 li{padding-left:24px}[dir=rtl] .fileList_4e9b7730 li{padding-right:24px}.fileList_4e9b7730 a{font-size:12px;text-decoration:none;color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.fileList_4e9b7730 a:hover{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.fileListIcon_4e9b7730{position:absolute;top:0}[dir=ltr] .fileListIcon_4e9b7730{left:0}[dir=rtl] .fileListIcon_4e9b7730{right:0}.fileListMore_4e9b7730{padding:0 16px 8px 16px;display:block;font-size:12px}html[dir=rtl] .fileListMore_4e9b7730{padding:0 16px 8px 16px}.title_4e9b7730{padding:8px 16px;display:block;font-size:17px;font-weight:300;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";height:38px;line-height:21px;overflow:hidden;word-wrap:break-word}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 279 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var Icon_1 = __webpack_require__(141); var Button_1 = __webpack_require__(154); var stylesImport = __webpack_require__(278); var styles = stylesImport; var DocumentCardActions = (function (_super) { __extends(DocumentCardActions, _super); function DocumentCardActions() { return _super !== null && _super.apply(this, arguments) || this; } DocumentCardActions.prototype.render = function () { var _a = this.props, actions = _a.actions, views = _a.views; return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActions', styles.actions) }, actions && actions.map(function (action, index) { return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActions-action', styles.action), key: index }, React.createElement(Button_1.IconButton, __assign({}, action)))); }), views > 0 && (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActions-views', styles.views) }, React.createElement(Icon_1.Icon, { iconName: 'view' }), views)))); }; return DocumentCardActions; }(Utilities_1.BaseComponent)); exports.DocumentCardActions = DocumentCardActions; /***/ }, /* 280 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var Persona_1 = __webpack_require__(281); var stylesImport = __webpack_require__(278); var styles = stylesImport; var DocumentCardActivity = (function (_super) { __extends(DocumentCardActivity, _super); function DocumentCardActivity() { return _super !== null && _super.apply(this, arguments) || this; } DocumentCardActivity.prototype.render = function () { var _a = this.props, activity = _a.activity, people = _a.people; return (people && people.length > 0 && React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity', styles.activity, (_b = {}, _b['ms-DocumentCardActivity--multiplePeople ' + styles.activityIsMultiplePeople] = people.length > 1, _b)) }, this._renderAvatars(people), React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity-details', styles.activityDetails) }, React.createElement("span", { className: Utilities_1.css('ms-DocumentCardActivity-name', styles.name) }, this._getNameString(people)), React.createElement("span", { className: Utilities_1.css('ms-DocumentCardActivity-activity', styles.activityActivity) }, activity)))); var _b; }; DocumentCardActivity.prototype._renderAvatars = function (people) { return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity-avatars', styles.avatars) }, people.length > 1 ? this._renderAvatar(people[1]) : null, this._renderAvatar(people[0]))); }; DocumentCardActivity.prototype._renderAvatar = function (person) { return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity-avatar', styles.avatar) }, React.createElement(Persona_1.Persona, { imageInitials: person.initials, primaryText: person.name, hidePersonaDetails: true, imageUrl: person.profileImageSrc, initialsColor: person.initialsColor, role: 'persentation', size: Persona_1.PersonaSize.extraSmall }))); }; DocumentCardActivity.prototype._getNameString = function (people) { var nameString = people[0].name; if (people.length >= 2) { nameString += ' +' + (people.length - 1); } return nameString; }; return DocumentCardActivity; }(Utilities_1.BaseComponent)); exports.DocumentCardActivity = DocumentCardActivity; /***/ }, /* 281 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(282)); /***/ }, /* 282 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(283)); __export(__webpack_require__(284)); __export(__webpack_require__(285)); /***/ }, /* 283 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var Icon_1 = __webpack_require__(141); var Image_1 = __webpack_require__(187); var Persona_Props_1 = __webpack_require__(284); var PersonaConsts_1 = __webpack_require__(285); var stylesImport = __webpack_require__(286); var styles = stylesImport; // The RGB color swatches var COLOR_SWATCHES_LOOKUP = [ Persona_Props_1.PersonaInitialsColor.lightGreen, Persona_Props_1.PersonaInitialsColor.lightBlue, Persona_Props_1.PersonaInitialsColor.lightPink, Persona_Props_1.PersonaInitialsColor.green, Persona_Props_1.PersonaInitialsColor.darkGreen, Persona_Props_1.PersonaInitialsColor.pink, Persona_Props_1.PersonaInitialsColor.magenta, Persona_Props_1.PersonaInitialsColor.purple, Persona_Props_1.PersonaInitialsColor.black, Persona_Props_1.PersonaInitialsColor.teal, Persona_Props_1.PersonaInitialsColor.blue, Persona_Props_1.PersonaInitialsColor.darkBlue, Persona_Props_1.PersonaInitialsColor.orange, Persona_Props_1.PersonaInitialsColor.darkRed, Persona_Props_1.PersonaInitialsColor.red ]; var COLOR_SWATCHES_NUM_ENTRIES = COLOR_SWATCHES_LOOKUP.length; var Persona = (function (_super) { __extends(Persona, _super); function Persona(props) { var _this = _super.call(this, props) || this; _this.state = { isImageLoaded: false, }; return _this; } Persona.prototype.render = function () { var _a = this.props, className = _a.className, size = _a.size, imageUrl = _a.imageUrl, initialsColor = _a.initialsColor, presence = _a.presence, primaryText = _a.primaryText, secondaryText = _a.secondaryText, tertiaryText = _a.tertiaryText, optionalText = _a.optionalText, hidePersonaDetails = _a.hidePersonaDetails, imageShouldFadeIn = _a.imageShouldFadeIn, _b = _a.onRenderInitials, onRenderInitials = _b === void 0 ? this._onRenderInitials : _b, onRenderPrimaryText = _a.onRenderPrimaryText, onRenderSecondaryText = _a.onRenderSecondaryText, onRenderTertiaryText = _a.onRenderTertiaryText, onRenderOptionalText = _a.onRenderOptionalText, imageShouldStartVisible = _a.imageShouldStartVisible; initialsColor = initialsColor !== undefined && initialsColor !== null ? initialsColor : this._getColorFromName(primaryText); var presenceElement = null; if (presence !== Persona_Props_1.PersonaPresence.none) { var userPresence = Persona_Props_1.PersonaPresence[presence], statusIcon = null; switch (userPresence) { case 'online': userPresence = 'SkypeCheck'; break; case 'away': userPresence = 'SkypeClock'; break; case 'dnd': userPresence = 'SkypeMinus'; break; default: userPresence = ''; } if (userPresence) { statusIcon = (React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Persona-presenceIcon', styles.presenceIcon), iconName: userPresence })); } presenceElement = React.createElement("div", { className: Utilities_1.css('ms-Persona-presence', styles.presence) }, statusIcon); } var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties); var personaDetails = React.createElement("div", { className: Utilities_1.css('ms-Persona-details', styles.details) }, this._renderElement(this.props.primaryText, Utilities_1.css('ms-Persona-primaryText', styles.primaryText), onRenderPrimaryText), this._renderElement(this.props.secondaryText, Utilities_1.css('ms-Persona-secondaryText', styles.secondaryText), onRenderSecondaryText), this._renderElement(this.props.tertiaryText, Utilities_1.css('ms-Persona-tertiaryText', styles.tertiaryText), onRenderTertiaryText), this._renderElement(this.props.optionalText, Utilities_1.css('ms-Persona-optionalText', styles.optionalText), onRenderOptionalText), this.props.children); return (React.createElement("div", __assign({}, divProps, { className: Utilities_1.css('ms-Persona', styles.root, className, PersonaConsts_1.PERSONA_SIZE[size], PersonaConsts_1.PERSONA_PRESENCE[presence], this.props.showSecondaryText ? styles.showSecondaryText : '') }), size !== Persona_Props_1.PersonaSize.tiny && (React.createElement("div", { className: Utilities_1.css('ms-Persona-imageArea', styles.imageArea) }, !this.state.isImageLoaded && (React.createElement("div", { className: Utilities_1.css('ms-Persona-initials', styles.initials, PersonaConsts_1.PERSONA_INITIALS_COLOR[initialsColor]), "aria-hidden": 'true' }, onRenderInitials(this.props, this._onRenderInitials))), React.createElement(Image_1.Image, { className: Utilities_1.css('ms-Persona-image', styles.image), imageFit: Image_1.ImageFit.cover, src: imageUrl, shouldFadeIn: imageShouldFadeIn, shouldStartVisible: imageShouldStartVisible, onLoadingStateChange: this._onPhotoLoadingStateChange }))), presenceElement, (!hidePersonaDetails || (size === Persona_Props_1.PersonaSize.tiny)) && personaDetails)); }; Persona.prototype._renderElement = function (text, className, render) { return (React.createElement("div", { className: className }, render ? render(this.props) : text)); }; Persona.prototype._onRenderInitials = function (props) { var imageInitials = props.imageInitials, primaryText = props.primaryText; var isRTL = Utilities_1.getRTL(); imageInitials = imageInitials || Utilities_1.getInitials(primaryText, isRTL); return (React.createElement("span", null, imageInitials)); }; Persona.prototype._getColorFromName = function (displayName) { var color = Persona_Props_1.PersonaInitialsColor.blue; if (!displayName) { return color; } var hashCode = 0; for (var iLen = displayName.length - 1; iLen >= 0; iLen--) { var ch = displayName.charCodeAt(iLen); var shift = iLen % 8; // tslint:disable-next-line:no-bitwise hashCode ^= (ch << shift) + (ch >> (8 - shift)); } color = COLOR_SWATCHES_LOOKUP[hashCode % COLOR_SWATCHES_NUM_ENTRIES]; return color; }; Persona.prototype._onPhotoLoadingStateChange = function (loadState) { this.setState({ isImageLoaded: loadState === Image_1.ImageLoadState.loaded }); }; return Persona; }(Utilities_1.BaseComponent)); Persona.defaultProps = { primaryText: '', size: Persona_Props_1.PersonaSize.regular, presence: Persona_Props_1.PersonaPresence.none }; __decorate([ Utilities_1.autobind ], Persona.prototype, "_renderElement", null); __decorate([ Utilities_1.autobind ], Persona.prototype, "_onRenderInitials", null); __decorate([ Utilities_1.autobind ], Persona.prototype, "_onPhotoLoadingStateChange", null); exports.Persona = Persona; /***/ }, /* 284 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var PersonaSize; (function (PersonaSize) { PersonaSize[PersonaSize["tiny"] = 0] = "tiny"; PersonaSize[PersonaSize["extraExtraSmall"] = 1] = "extraExtraSmall"; PersonaSize[PersonaSize["extraSmall"] = 2] = "extraSmall"; PersonaSize[PersonaSize["small"] = 3] = "small"; PersonaSize[PersonaSize["regular"] = 4] = "regular"; PersonaSize[PersonaSize["large"] = 5] = "large"; PersonaSize[PersonaSize["extraLarge"] = 6] = "extraLarge"; PersonaSize[PersonaSize["size28"] = 7] = "size28"; })(PersonaSize = exports.PersonaSize || (exports.PersonaSize = {})); var PersonaPresence; (function (PersonaPresence) { PersonaPresence[PersonaPresence["none"] = 0] = "none"; PersonaPresence[PersonaPresence["offline"] = 1] = "offline"; PersonaPresence[PersonaPresence["online"] = 2] = "online"; PersonaPresence[PersonaPresence["away"] = 3] = "away"; PersonaPresence[PersonaPresence["dnd"] = 4] = "dnd"; PersonaPresence[PersonaPresence["blocked"] = 5] = "blocked"; PersonaPresence[PersonaPresence["busy"] = 6] = "busy"; })(PersonaPresence = exports.PersonaPresence || (exports.PersonaPresence = {})); var PersonaInitialsColor; (function (PersonaInitialsColor) { PersonaInitialsColor[PersonaInitialsColor["lightBlue"] = 0] = "lightBlue"; PersonaInitialsColor[PersonaInitialsColor["blue"] = 1] = "blue"; PersonaInitialsColor[PersonaInitialsColor["darkBlue"] = 2] = "darkBlue"; PersonaInitialsColor[PersonaInitialsColor["teal"] = 3] = "teal"; PersonaInitialsColor[PersonaInitialsColor["lightGreen"] = 4] = "lightGreen"; PersonaInitialsColor[PersonaInitialsColor["green"] = 5] = "green"; PersonaInitialsColor[PersonaInitialsColor["darkGreen"] = 6] = "darkGreen"; PersonaInitialsColor[PersonaInitialsColor["lightPink"] = 7] = "lightPink"; PersonaInitialsColor[PersonaInitialsColor["pink"] = 8] = "pink"; PersonaInitialsColor[PersonaInitialsColor["magenta"] = 9] = "magenta"; PersonaInitialsColor[PersonaInitialsColor["purple"] = 10] = "purple"; PersonaInitialsColor[PersonaInitialsColor["black"] = 11] = "black"; PersonaInitialsColor[PersonaInitialsColor["orange"] = 12] = "orange"; PersonaInitialsColor[PersonaInitialsColor["red"] = 13] = "red"; PersonaInitialsColor[PersonaInitialsColor["darkRed"] = 14] = "darkRed"; })(PersonaInitialsColor = exports.PersonaInitialsColor || (exports.PersonaInitialsColor = {})); /***/ }, /* 285 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Persona_Props_1 = __webpack_require__(284); var stylesImport = __webpack_require__(286); var styles = stylesImport; exports.PERSONA_SIZE = (_a = {}, _a[Persona_Props_1.PersonaSize.tiny] = 'ms-Persona--tiny ' + styles.rootIsTiny, _a[Persona_Props_1.PersonaSize.extraExtraSmall] = 'ms-Persona--xxs ' + styles.rootIsExtraExtraSmall, _a[Persona_Props_1.PersonaSize.extraSmall] = 'ms-Persona--xs ' + styles.rootIsExtraSmall, _a[Persona_Props_1.PersonaSize.small] = 'ms-Persona--sm ' + styles.rootIsSmall, _a[Persona_Props_1.PersonaSize.regular] = '', _a[Persona_Props_1.PersonaSize.large] = 'ms-Persona--lg ' + styles.rootIsLarge, _a[Persona_Props_1.PersonaSize.extraLarge] = 'ms-Persona--xl ' + styles.rootIsExtraLarge, _a[Persona_Props_1.PersonaSize.size28] = 'ms-Persona--28 ' + styles.rootIs28, _a); exports.PERSONA_PRESENCE = (_b = {}, _b[Persona_Props_1.PersonaPresence.offline] = 'ms-Persona--offline ' + styles.rootIsOffline, _b[Persona_Props_1.PersonaPresence.online] = 'ms-Persona--online ', _b[Persona_Props_1.PersonaPresence.away] = 'ms-Persona--away ' + styles.rootIsAway, _b[Persona_Props_1.PersonaPresence.dnd] = 'ms-Persona--dnd ' + styles.rootIsDoNotDisturb, _b[Persona_Props_1.PersonaPresence.blocked] = 'ms-Persona--blocked ' + styles.rootIsBlocked, _b[Persona_Props_1.PersonaPresence.busy] = 'ms-Persona--busy ' + styles.rootIsBusy, _b); exports.PERSONA_INITIALS_COLOR = (_c = {}, _c[Persona_Props_1.PersonaInitialsColor.lightBlue] = 'ms-Persona-initials--lightBlue ' + styles.initialsIsLightBlue, _c[Persona_Props_1.PersonaInitialsColor.blue] = 'ms-Persona-initials--blue ' + styles.initialsIsBlue, _c[Persona_Props_1.PersonaInitialsColor.darkBlue] = 'ms-Persona-initials--darkBlue ' + styles.initialsIsDarkBlue, _c[Persona_Props_1.PersonaInitialsColor.teal] = 'ms-Persona-initials--teal ' + styles.initialsIsTeal, _c[Persona_Props_1.PersonaInitialsColor.lightGreen] = 'ms-Persona-initials--lightGreen ' + styles.initialsIsLightGreen, _c[Persona_Props_1.PersonaInitialsColor.green] = 'ms-Persona-initials--green ' + styles.initialsIsGreen, _c[Persona_Props_1.PersonaInitialsColor.darkGreen] = 'ms-Persona-initials--darkGreen ' + styles.initialsIsDarkGreen, _c[Persona_Props_1.PersonaInitialsColor.lightPink] = 'ms-Persona-initials--lightPink ' + styles.initialsIsLightPink, _c[Persona_Props_1.PersonaInitialsColor.pink] = 'ms-Persona-initials--pink ' + styles.initialsIsPink, _c[Persona_Props_1.PersonaInitialsColor.magenta] = 'ms-Persona-initials--magenta ' + styles.initialsIsMagenta, _c[Persona_Props_1.PersonaInitialsColor.purple] = 'ms-Persona-initials--purple ' + styles.initialsIsPurple, _c[Persona_Props_1.PersonaInitialsColor.black] = 'ms-Persona-initials--black ' + styles.initialsIsBlack, _c[Persona_Props_1.PersonaInitialsColor.orange] = 'ms-Persona-initials--orange ' + styles.initialsIsGreen, _c[Persona_Props_1.PersonaInitialsColor.red] = 'ms-Persona-initials--red ' + styles.initialsIsRed, _c[Persona_Props_1.PersonaInitialsColor.darkRed] = 'ms-Persona-initials--darkRed ' + styles.initialsIsDarkRed, _c); var _a, _b, _c; /***/ }, /* 286 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_559e9a38', contextualHost: 'contextualHost_559e9a38', primaryText: 'primaryText_559e9a38', imageArea: 'imageArea_559e9a38', image: 'image_559e9a38', placeholder: 'placeholder_559e9a38', initials: 'initials_559e9a38', initialsIsLightBlue: 'initialsIsLightBlue_559e9a38', initialsIsBlue: 'initialsIsBlue_559e9a38', initialsIsDarkBlue: 'initialsIsDarkBlue_559e9a38', initialsIsTeal: 'initialsIsTeal_559e9a38', initialsIsLightGreen: 'initialsIsLightGreen_559e9a38', initialsIsGreen: 'initialsIsGreen_559e9a38', initialsIsDarkGreen: 'initialsIsDarkGreen_559e9a38', initialsIsLightPink: 'initialsIsLightPink_559e9a38', initialsIsPink: 'initialsIsPink_559e9a38', initialsIsMagenta: 'initialsIsMagenta_559e9a38', initialsIsPurple: 'initialsIsPurple_559e9a38', initialsIsBlack: 'initialsIsBlack_559e9a38', initialsIsOrange: 'initialsIsOrange_559e9a38', initialsIsRed: 'initialsIsRed_559e9a38', initialsIsDarkRed: 'initialsIsDarkRed_559e9a38', presence: 'presence_559e9a38', presenceIcon: 'presenceIcon_559e9a38', details: 'details_559e9a38', secondaryText: 'secondaryText_559e9a38', tertiaryText: 'tertiaryText_559e9a38', optionalText: 'optionalText_559e9a38', textContent: 'textContent_559e9a38', rootIsTiny: 'rootIsTiny_559e9a38', rootIsReadonly: 'rootIsReadonly_559e9a38', rootIsExtraExtraSmall: 'rootIsExtraExtraSmall_559e9a38', showSecondaryText: 'showSecondaryText_559e9a38', rootIs28: 'rootIs28_559e9a38', rootIsExtraSmall: 'rootIsExtraSmall_559e9a38', rootIsSmall: 'rootIsSmall_559e9a38', rootIsLarge: 'rootIsLarge_559e9a38', rootIsExtraLarge: 'rootIsExtraLarge_559e9a38', rootIsDarkText: 'rootIsDarkText_559e9a38', rootIsSelectable: 'rootIsSelectable_559e9a38', rootExtraLarge: 'rootExtraLarge_559e9a38', rootIsAvailable: 'rootIsAvailable_559e9a38', rootIsAway: 'rootIsAway_559e9a38', rootIsBlocked: 'rootIsBlocked_559e9a38', rootIsBusy: 'rootIsBusy_559e9a38', rootIsDoNotDisturb: 'rootIsDoNotDisturb_559e9a38', rootIsOffline: 'rootIsOffline_559e9a38', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_559e9a38{box-sizing:border-box;box-shadow:none;margin:0;padding:0;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-size:14px;font-weight:400;line-height:1;position:relative;height:48px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.root_559e9a38 .contextualHost_559e9a38{display:none}.root_559e9a38:hover .primaryText_559e9a38{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.imageArea_559e9a38{position:relative;overflow:hidden;text-align:center;-webkit-box-flex:0;-ms-flex:0 0 48px;flex:0 0 48px;height:48px;width:48px;border-radius:50%}@media screen and (-ms-high-contrast:active){.imageArea_559e9a38{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.imageArea_559e9a38{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.imageArea_559e9a38 .image_559e9a38{border:0}.placeholder_559e9a38{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";position:absolute;right:0;left:0;font-size:47px;top:9px;z-index:5}.initials_559e9a38{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-size:17px;font-weight:100;line-height:46px;height:48px}.initials_559e9a38.initialsIsLightBlue_559e9a38{background-color:#6ba5e7}.initials_559e9a38.initialsIsBlue_559e9a38{background-color:#2d89ef}.initials_559e9a38.initialsIsDarkBlue_559e9a38{background-color:#2b5797}.initials_559e9a38.initialsIsTeal_559e9a38{background-color:#00aba9}.initials_559e9a38.initialsIsLightGreen_559e9a38{background-color:#99b433}.initials_559e9a38.initialsIsGreen_559e9a38{background-color:#00a300}.initials_559e9a38.initialsIsDarkGreen_559e9a38{background-color:#1e7145}.initials_559e9a38.initialsIsLightPink_559e9a38{background-color:#e773bd}.initials_559e9a38.initialsIsPink_559e9a38{background-color:#ff0097}.initials_559e9a38.initialsIsMagenta_559e9a38{background-color:#7e3878}.initials_559e9a38.initialsIsPurple_559e9a38{background-color:#603cba}.initials_559e9a38.initialsIsBlack_559e9a38{background-color:#1d1d1d}.initials_559e9a38.initialsIsOrange_559e9a38{background-color:#da532c}.initials_559e9a38.initialsIsRed_559e9a38{background-color:#e11}.initials_559e9a38.initialsIsDarkRed_559e9a38{background-color:#b91d47}.image_559e9a38{position:absolute;top:0;width:100%;height:100%;border-radius:50%;-webkit-perspective:1px;perspective:1px}[dir=ltr] .image_559e9a38{margin-right:10px}[dir=rtl] .image_559e9a38{margin-left:10px}[dir=ltr] .image_559e9a38{left:0}[dir=rtl] .image_559e9a38{right:0}.image_559e9a38[src=\"\"]{display:none}.presence_559e9a38{background-color:#7fba00;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;bottom:-1px;border:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";text-align:center;box-sizing:content-box;-ms-high-contrast-adjust:none}[dir=ltr] .presence_559e9a38{left:34px}[dir=rtl] .presence_559e9a38{right:34px}@media screen and (-ms-high-contrast:active){.presence_559e9a38{border-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.presence_559e9a38{border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.presence_559e9a38 .presenceIcon_559e9a38{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-size:8px;line-height:12px;vertical-align:top}@media screen and (-ms-high-contrast:active){.presence_559e9a38 .presenceIcon_559e9a38{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.presence_559e9a38 .presenceIcon_559e9a38{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.details_559e9a38{padding:0 24px 0 12px;min-width:0;width:100%}html[dir=rtl] .details_559e9a38{padding:0 12px 0 24px}html[dir=ltr] .details_559e9a38{text-align:left}html[dir=rtl] .details_559e9a38{text-align:right}.optionalText_559e9a38,.primaryText_559e9a38,.secondaryText_559e9a38,.tertiaryText_559e9a38,.textContent_559e9a38{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.primaryText_559e9a38{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-weight:400;font-size:17px;margin-top:-3px;line-height:1.4}.optionalText_559e9a38,.secondaryText_559e9a38,.tertiaryText_559e9a38{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-weight:400;font-size:12px;white-space:nowrap;line-height:1.3}.secondaryText_559e9a38{padding-top:3px}.optionalText_559e9a38,.tertiaryText_559e9a38{padding-top:5px;display:none}.root_559e9a38.rootIsTiny_559e9a38{height:30px;min-width:30px}.root_559e9a38.rootIsTiny_559e9a38 .imageArea_559e9a38{overflow:visible;background:0 0;height:0;width:0}.root_559e9a38.rootIsTiny_559e9a38 .presence_559e9a38{top:10px;border:0}[dir=ltr] .root_559e9a38.rootIsTiny_559e9a38 .presence_559e9a38{right:auto}[dir=rtl] .root_559e9a38.rootIsTiny_559e9a38 .presence_559e9a38{left:auto}[dir=ltr] .root_559e9a38.rootIsTiny_559e9a38 .presence_559e9a38{left:0}[dir=rtl] .root_559e9a38.rootIsTiny_559e9a38 .presence_559e9a38{right:0}@media screen and (-ms-high-contrast:active){.root_559e9a38.rootIsTiny_559e9a38 .presence_559e9a38{top:9px;border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_559e9a38.rootIsTiny_559e9a38 .presence_559e9a38{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}[dir=ltr] .root_559e9a38.rootIsTiny_559e9a38 .details_559e9a38{padding-left:20px}[dir=rtl] .root_559e9a38.rootIsTiny_559e9a38 .details_559e9a38{padding-right:20px}.root_559e9a38.rootIsTiny_559e9a38 .primaryText_559e9a38{font-size:14px;padding-top:4px}.root_559e9a38.rootIsTiny_559e9a38 .secondaryText_559e9a38{display:none}.root_559e9a38.rootIsTiny_559e9a38.rootIsReadonly_559e9a38{padding:0;background-color:transparent}.root_559e9a38.rootIsTiny_559e9a38.rootIsReadonly_559e9a38 .primaryText_559e9a38:after{content:';'}.root_559e9a38.rootIsExtraExtraSmall_559e9a38{height:24px;line-height:24px;min-width:24px;margin-right:4px}.root_559e9a38.rootIsExtraExtraSmall_559e9a38 .imageArea_559e9a38,.root_559e9a38.rootIsExtraExtraSmall_559e9a38 .image_559e9a38{-webkit-box-flex:0;-ms-flex:0 0 24px;flex:0 0 24px;height:24px;width:24px}.root_559e9a38.rootIsExtraExtraSmall_559e9a38 .placeholder_559e9a38{font-size:18px;top:4px}.root_559e9a38.rootIsExtraExtraSmall_559e9a38 .initials_559e9a38{font-size:11px;height:24px;line-height:24px}.root_559e9a38.rootIsExtraExtraSmall_559e9a38 .presence_559e9a38{height:8px;width:8px;border:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}[dir=ltr] .root_559e9a38.rootIsExtraExtraSmall_559e9a38 .presence_559e9a38{left:16px}[dir=rtl] .root_559e9a38.rootIsExtraExtraSmall_559e9a38 .presence_559e9a38{right:16px}.root_559e9a38.rootIsExtraExtraSmall_559e9a38 .presenceIcon_559e9a38{font-size:6px;line-height:9px}.root_559e9a38.rootIsExtraExtraSmall_559e9a38 .primaryText_559e9a38{font-size:14px;padding-top:3px}.root_559e9a38.rootIsExtraExtraSmall_559e9a38 .secondaryText_559e9a38{display:none}.root_559e9a38.rootIsExtraExtraSmall_559e9a38.showSecondaryText_559e9a38{height:30px}.root_559e9a38.rootIsExtraExtraSmall_559e9a38.showSecondaryText_559e9a38 .primaryText_559e9a38,.root_559e9a38.rootIsExtraExtraSmall_559e9a38.showSecondaryText_559e9a38 .secondaryText_559e9a38{display:block;padding:0;line-height:1;overflow:visible}.root_559e9a38.rootIs28_559e9a38{height:28px;line-height:28px;min-width:28px;overflow:hidden}.root_559e9a38.rootIs28_559e9a38 .imageArea_559e9a38,.root_559e9a38.rootIs28_559e9a38 .image_559e9a38{-webkit-box-flex:0;-ms-flex:0 0 28px;flex:0 0 28px;height:28px;width:28px}.root_559e9a38.rootIs28_559e9a38 .placeholder_559e9a38{font-size:18px;top:4px}.root_559e9a38.rootIs28_559e9a38 .initials_559e9a38{font-size:11px;height:28px;line-height:28px}.root_559e9a38.rootIs28_559e9a38 .presence_559e9a38{height:8px;width:8px;border:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}[dir=ltr] .root_559e9a38.rootIs28_559e9a38 .presence_559e9a38{left:20px}[dir=rtl] .root_559e9a38.rootIs28_559e9a38 .presence_559e9a38{right:20px}.root_559e9a38.rootIs28_559e9a38 .presenceIcon_559e9a38{font-size:6px;line-height:9px}.root_559e9a38.rootIs28_559e9a38 .primaryText_559e9a38{font-size:14px;padding-top:3px}.root_559e9a38.rootIs28_559e9a38 .secondaryText_559e9a38{display:none}.root_559e9a38.rootIs28_559e9a38.showSecondaryText_559e9a38 .primaryText_559e9a38,.root_559e9a38.rootIs28_559e9a38.showSecondaryText_559e9a38 .secondaryText_559e9a38{display:block;padding:0;line-height:1;overflow:visible}.root_559e9a38.rootIsExtraSmall_559e9a38{height:32px;line-height:32px;min-width:32px}.root_559e9a38.rootIsExtraSmall_559e9a38 .imageArea_559e9a38,.root_559e9a38.rootIsExtraSmall_559e9a38 .image_559e9a38{-webkit-box-flex:0;-ms-flex:0 0 32px;flex:0 0 32px;height:32px;width:32px}.root_559e9a38.rootIsExtraSmall_559e9a38 .placeholder_559e9a38{font-size:28px;top:6px}.root_559e9a38.rootIsExtraSmall_559e9a38 .initials_559e9a38{font-size:14px;height:32px;line-height:32px}[dir=ltr] .root_559e9a38.rootIsExtraSmall_559e9a38 .presence_559e9a38{left:19px}[dir=rtl] .root_559e9a38.rootIsExtraSmall_559e9a38 .presence_559e9a38{right:19px}.root_559e9a38.rootIsExtraSmall_559e9a38 .primaryText_559e9a38{font-size:14px;padding-top:3px}.root_559e9a38.rootIsExtraSmall_559e9a38 .secondaryText_559e9a38{display:none}.root_559e9a38.rootIsExtraSmall_559e9a38.showSecondaryText_559e9a38 .primaryText_559e9a38,.root_559e9a38.rootIsExtraSmall_559e9a38.showSecondaryText_559e9a38 .secondaryText_559e9a38{display:block;padding:0;line-height:1;overflow:visible}.root_559e9a38.rootIsSmall_559e9a38{height:40px;line-height:40px;min-width:40px}.root_559e9a38.rootIsSmall_559e9a38 .imageArea_559e9a38,.root_559e9a38.rootIsSmall_559e9a38 .image_559e9a38{-webkit-box-flex:0;-ms-flex:0 0 40px;flex:0 0 40px;height:40px;width:40px}.root_559e9a38.rootIsSmall_559e9a38 .placeholder_559e9a38{font-size:38px;top:5px}.root_559e9a38.rootIsSmall_559e9a38 .initials_559e9a38{font-size:14px;height:40px;line-height:40px}[dir=ltr] .root_559e9a38.rootIsSmall_559e9a38 .presence_559e9a38{left:27px}[dir=rtl] .root_559e9a38.rootIsSmall_559e9a38 .presence_559e9a38{right:27px}.root_559e9a38.rootIsSmall_559e9a38 .primaryText_559e9a38{font-size:14px}.root_559e9a38.rootIsSmall_559e9a38 .primaryText_559e9a38,.root_559e9a38.rootIsSmall_559e9a38 .secondaryText_559e9a38{padding-top:1px}.root_559e9a38.rootIsLarge_559e9a38{height:72px;line-height:72px;min-width:72px}.root_559e9a38.rootIsLarge_559e9a38 .imageArea_559e9a38,.root_559e9a38.rootIsLarge_559e9a38 .image_559e9a38{-webkit-box-flex:0;-ms-flex:0 0 72px;flex:0 0 72px;height:72px;width:72px}.root_559e9a38.rootIsLarge_559e9a38 .placeholder_559e9a38{font-size:67px;top:10px}.root_559e9a38.rootIsLarge_559e9a38 .initials_559e9a38{font-size:28px;height:72px;line-height:70px}.root_559e9a38.rootIsLarge_559e9a38 .presence_559e9a38{height:20px;width:20px;border-width:3px}[dir=ltr] .root_559e9a38.rootIsLarge_559e9a38 .presence_559e9a38{left:49px}[dir=rtl] .root_559e9a38.rootIsLarge_559e9a38 .presence_559e9a38{right:49px}.root_559e9a38.rootIsLarge_559e9a38 .presenceIcon_559e9a38{line-height:20px;font-size:14px}.root_559e9a38.rootIsLarge_559e9a38 .secondaryText_559e9a38{padding-top:3px}.root_559e9a38.rootIsLarge_559e9a38 .tertiaryText_559e9a38{padding-top:5px;display:block}.root_559e9a38.rootIsExtraLarge_559e9a38{height:100px;line-height:100px;min-width:100px}.root_559e9a38.rootIsExtraLarge_559e9a38 .imageArea_559e9a38,.root_559e9a38.rootIsExtraLarge_559e9a38 .image_559e9a38{-webkit-box-flex:0;-ms-flex:0 0 100px;flex:0 0 100px;height:100px;width:100px}.root_559e9a38.rootIsExtraLarge_559e9a38 .placeholder_559e9a38{font-size:95px;top:12px}.root_559e9a38.rootIsExtraLarge_559e9a38 .initials_559e9a38{font-size:42px;height:100px;line-height:96px}.root_559e9a38.rootIsExtraLarge_559e9a38 .presence_559e9a38{height:28px;width:28px;border-width:4px}[dir=ltr] .root_559e9a38.rootIsExtraLarge_559e9a38 .presence_559e9a38{left:71px}[dir=rtl] .root_559e9a38.rootIsExtraLarge_559e9a38 .presence_559e9a38{right:71px}.root_559e9a38.rootIsExtraLarge_559e9a38 .presenceIcon_559e9a38{line-height:28px;font-size:21px;position:relative;top:1px}.root_559e9a38.rootIsExtraLarge_559e9a38 .primaryText_559e9a38{font-size:21px;font-weight:300;margin-top:0}.root_559e9a38.rootIsExtraLarge_559e9a38 .secondaryText_559e9a38{padding-top:2px}.root_559e9a38.rootIsExtraLarge_559e9a38 .optionalText_559e9a38,.root_559e9a38.rootIsExtraLarge_559e9a38 .tertiaryText_559e9a38{padding-top:5px;display:block}.root_559e9a38.rootIsDarkText_559e9a38 .primaryText_559e9a38{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.root_559e9a38.rootIsDarkText_559e9a38 .optionalText_559e9a38,.root_559e9a38.rootIsDarkText_559e9a38 .secondaryText_559e9a38,.root_559e9a38.rootIsDarkText_559e9a38 .tertiaryText_559e9a38{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.root_559e9a38.rootIsSelectable_559e9a38{cursor:pointer;padding:0 10px}.root_559e9a38.rootIsSelectable_559e9a38:not(.rootExtraLarge_559e9a38):focus,.root_559e9a38.rootIsSelectable_559e9a38:not(.rootExtraLarge_559e9a38):hover{background-color:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": ";outline:1px solid transparent}.root_559e9a38.rootIsAvailable_559e9a38 .presence_559e9a38{background-color:#7fba00}@media screen and (-ms-high-contrast:active){.root_559e9a38.rootIsAvailable_559e9a38 .presence_559e9a38{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_559e9a38.rootIsAvailable_559e9a38 .presence_559e9a38{background-color:#600000}}.root_559e9a38.rootIsAway_559e9a38 .presence_559e9a38{background-color:#fcd116}@media screen and (-ms-high-contrast:active){.root_559e9a38.rootIsAway_559e9a38 .presence_559e9a38{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_559e9a38.rootIsAway_559e9a38 .presence_559e9a38{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.root_559e9a38.rootIsAway_559e9a38 .presenceIcon_559e9a38{position:relative}[dir=ltr] .root_559e9a38.rootIsAway_559e9a38 .presenceIcon_559e9a38{left:1px}[dir=rtl] .root_559e9a38.rootIsAway_559e9a38 .presenceIcon_559e9a38{right:1px}.root_559e9a38.rootIsBlocked_559e9a38 .presence_559e9a38{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_559e9a38.rootIsBlocked_559e9a38 .presence_559e9a38::before{content:'';width:100%;height:100%;position:absolute;top:0;box-shadow:0 0 0 2px #d93b3b inset;border-radius:50%}[dir=ltr] .root_559e9a38.rootIsBlocked_559e9a38 .presence_559e9a38::before{left:0}[dir=rtl] .root_559e9a38.rootIsBlocked_559e9a38 .presence_559e9a38::before{right:0}.root_559e9a38.rootIsBlocked_559e9a38 .presence_559e9a38::after{content:'';width:100%;height:2px;background-color:#d93b3b;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);position:absolute;top:40%}[dir=ltr] .root_559e9a38.rootIsBlocked_559e9a38 .presence_559e9a38::after{left:0}[dir=rtl] .root_559e9a38.rootIsBlocked_559e9a38 .presence_559e9a38::after{right:0}@media screen and (-ms-high-contrast:active){.root_559e9a38.rootIsBlocked_559e9a38 .presence_559e9a38{color:#0f0;background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.root_559e9a38.rootIsBlocked_559e9a38 .presence_559e9a38::before{box-shadow:0 0 0 2px #0f0 inset}.root_559e9a38.rootIsBlocked_559e9a38 .presence_559e9a38::after{background-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_559e9a38.rootIsBlocked_559e9a38 .presence_559e9a38{color:#600000;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_559e9a38.rootIsBlocked_559e9a38 .presence_559e9a38::before{box-shadow:0 0 0 2px #600000 inset}.root_559e9a38.rootIsBlocked_559e9a38 .presence_559e9a38::after{background-color:#600000}}.root_559e9a38.rootIsBlocked_559e9a38.rootIsLarge_559e9a38 .presence_559e9a38::after{top:9px}.root_559e9a38.rootIsBlocked_559e9a38.rootIsExtraLarge_559e9a38 .presence_559e9a38::after{top:13px}.root_559e9a38.rootIsBusy_559e9a38 .presence_559e9a38{background-color:#d93b3b}@media screen and (-ms-high-contrast:active){.root_559e9a38.rootIsBusy_559e9a38 .presence_559e9a38{background-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_559e9a38.rootIsBusy_559e9a38 .presence_559e9a38{background-color:#600000}}.root_559e9a38.rootIsDoNotDisturb_559e9a38 .presence_559e9a38{background-color:#e81123}@media screen and (-ms-high-contrast:active){.root_559e9a38.rootIsDoNotDisturb_559e9a38 .presence_559e9a38{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";background-color:#0f0}.root_559e9a38.rootIsDoNotDisturb_559e9a38 .presence_559e9a38::before{background-color:#0f0}.root_559e9a38.rootIsDoNotDisturb_559e9a38 .presence_559e9a38::after{background-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_559e9a38.rootIsDoNotDisturb_559e9a38 .presence_559e9a38{background-color:#600000}}.root_559e9a38.rootIsOffline_559e9a38 .presence_559e9a38{background-color:#93abbd}@media screen and (-ms-high-contrast:active){.root_559e9a38.rootIsOffline_559e9a38 .presence_559e9a38{background-color:#0f0;box-shadow:0 0 0 1px " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": " inset}}@media screen and (-ms-high-contrast:black-on-white){.root_559e9a38.rootIsOffline_559e9a38 .presence_559e9a38{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";box-shadow:0 0 0 1px " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": " inset}}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 287 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(278); var styles = stylesImport; var DocumentCardLocation = (function (_super) { __extends(DocumentCardLocation, _super); function DocumentCardLocation() { return _super !== null && _super.apply(this, arguments) || this; } DocumentCardLocation.prototype.render = function () { var _a = this.props, location = _a.location, locationHref = _a.locationHref, ariaLabel = _a.ariaLabel, onClick = _a.onClick; return (React.createElement("a", { className: Utilities_1.css('ms-DocumentCardLocation', styles.location), href: locationHref, onClick: onClick, "aria-label": ariaLabel }, location)); }; return DocumentCardLocation; }(Utilities_1.BaseComponent)); exports.DocumentCardLocation = DocumentCardLocation; /***/ }, /* 288 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Image_1 = __webpack_require__(187); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(278); var styles = stylesImport; var LIST_ITEM_COUNT = 3; var DocumentCardPreview = (function (_super) { __extends(DocumentCardPreview, _super); function DocumentCardPreview() { return _super !== null && _super.apply(this, arguments) || this; } DocumentCardPreview.prototype.render = function () { var previewImages = this.props.previewImages; var style, preview; var isFileList = false; if (previewImages.length > 1) { // Render a list of files preview = this._renderPreviewList(previewImages); isFileList = true; } else if (previewImages.length === 1) { // Render a single preview preview = this._renderPreviewImage(previewImages[0]); // Override the border color if an accent color was provided if (previewImages[0].accentColor) { style = { borderBottomColor: previewImages[0].accentColor }; } } return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardPreview', styles.preview, isFileList && ('is-fileList ' + styles.previewIsFileList)), style: style }, preview)); }; DocumentCardPreview.prototype._renderPreviewImage = function (previewImage) { var width = previewImage.width, height = previewImage.height, imageFit = previewImage.imageFit; var image = (React.createElement(Image_1.Image, { width: width, height: height, imageFit: imageFit, src: previewImage.previewImageSrc, role: 'presentation', alt: '' })); var icon; if (previewImage.iconSrc) { icon = React.createElement(Image_1.Image, { className: Utilities_1.css('ms-DocumentCardPreview-icon', styles.icon), src: previewImage.iconSrc, role: 'presentation', alt: '' }); } return (React.createElement("div", null, image, icon)); }; DocumentCardPreview.prototype._renderPreviewList = function (previewImages) { var getOverflowDocumentCountText = this.props.getOverflowDocumentCountText; // Determine how many documents we won't be showing var overflowDocumentCount = previewImages.length - LIST_ITEM_COUNT; // Determine the overflow text that will be rendered after the preview list. var overflowText = overflowDocumentCount ? (getOverflowDocumentCountText ? getOverflowDocumentCountText(overflowDocumentCount) : '+' + overflowDocumentCount) : null; // Create list items for the documents to be shown var fileListItems = previewImages.slice(0, LIST_ITEM_COUNT).map(function (file, fileIndex) { return (React.createElement("li", { key: fileIndex }, React.createElement(Image_1.Image, { className: Utilities_1.css('ms-DocumentCardPreview-fileListIcon', styles.fileListIcon), src: file.iconSrc, role: 'presentation', alt: '', width: '16px', height: '16px' }), React.createElement("a", { href: file.url }, file.name))); }); return (React.createElement("div", null, React.createElement("ul", { className: Utilities_1.css('ms-DocumentCardPreview-fileList', styles.fileList) }, fileListItems), overflowText && React.createElement("span", { className: Utilities_1.css('ms-DocumentCardPreview-fileListMore', styles.fileListMore) }, overflowText))); }; return DocumentCardPreview; }(Utilities_1.BaseComponent)); __decorate([ Utilities_1.autobind ], DocumentCardPreview.prototype, "_renderPreviewList", null); exports.DocumentCardPreview = DocumentCardPreview; /***/ }, /* 289 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable:no-unused-variable */ var React = __webpack_require__(2); /* tslint:enable:no-unused-variable */ var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(278); var styles = stylesImport; var TRUNCATION_SEPARATOR = '…'; var TRUNCATION_MINIMUM_LENGTH = 40; // This is the length we know can fit into the min width of DocumentCard. var TRUNCATION_MAXIMUM_LENGTH = 90 - TRUNCATION_SEPARATOR.length; var TRUNCATION_FIRST_PIECE_LONGER_BY = 10; var TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD = 5; var DocumentCardTitle = (function (_super) { __extends(DocumentCardTitle, _super); function DocumentCardTitle(props) { var _this = _super.call(this, props) || this; _this.state = { truncatedTitleFirstPiece: '', truncatedTitleSecondPiece: '' }; return _this; } DocumentCardTitle.prototype.componentDidMount = function () { var _a = this.props, title = _a.title, shouldTruncate = _a.shouldTruncate; if (shouldTruncate && title && title.length > TRUNCATION_MINIMUM_LENGTH) { if (this._doesTitleOverflow()) { this._startTruncation(this.props); } this._events.on(window, 'resize', this._updateTruncation); } }; DocumentCardTitle.prototype.componentWillReceiveProps = function (newProps) { this._events.off(window, 'resize'); this._isTruncated = false; if (newProps.shouldTruncate && newProps.title && newProps.title.length > TRUNCATION_MINIMUM_LENGTH) { this._startTruncation(newProps); this._events.on(window, 'resize', this._updateTruncation); } }; DocumentCardTitle.prototype.componentDidUpdate = function () { // If we're truncating, make sure the title fits if (this.props.shouldTruncate) { this._shrinkTitle(); } }; DocumentCardTitle.prototype.render = function () { var _a = this.props, title = _a.title, shouldTruncate = _a.shouldTruncate; var _b = this.state, truncatedTitleFirstPiece = _b.truncatedTitleFirstPiece, truncatedTitleSecondPiece = _b.truncatedTitleSecondPiece; var documentCardTitle; if (shouldTruncate && this._isTruncated) { documentCardTitle = (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardTitle', styles.title), ref: this._resolveRef('_titleElement'), title: title }, truncatedTitleFirstPiece, "\u2026", truncatedTitleSecondPiece)); } else { documentCardTitle = (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardTitle', styles.title), ref: this._resolveRef('_titleElement'), title: title }, title)); } return documentCardTitle; }; DocumentCardTitle.prototype._startTruncation = function (props) { var originalTitle = props.title; this._isTruncated = false; // If the title is really short, there's no need to truncate it if (originalTitle && originalTitle.length >= TRUNCATION_MINIMUM_LENGTH) { // Break the text into two pieces for assembly later if (originalTitle.length > TRUNCATION_MAXIMUM_LENGTH) { // The text is really long, so we can take a chunk out of the middle so the two pieces combine for the maximum length this._isTruncated = true; this.setState({ truncatedTitleFirstPiece: originalTitle.slice(0, TRUNCATION_MAXIMUM_LENGTH / 2 + TRUNCATION_FIRST_PIECE_LONGER_BY), truncatedTitleSecondPiece: originalTitle.slice(originalTitle.length - (TRUNCATION_MAXIMUM_LENGTH / 2 - TRUNCATION_FIRST_PIECE_LONGER_BY)) }); } else { // The text is not so long, so we'll just break it into two pieces this.setState({ truncatedTitleFirstPiece: originalTitle.slice(0, Math.ceil(originalTitle.length / 2) + TRUNCATION_FIRST_PIECE_LONGER_BY), truncatedTitleSecondPiece: originalTitle.slice(originalTitle.length - Math.floor(originalTitle.length / 2) + TRUNCATION_FIRST_PIECE_LONGER_BY) }); } } // Save the width we just started truncation at, so that later we will only update truncation if necessary this._truncatedTitleAtWidth = this._titleElement.clientWidth; }; DocumentCardTitle.prototype._shrinkTitle = function () { if (this._doesTitleOverflow()) { var _a = this.state, truncatedTitleFirstPiece = _a.truncatedTitleFirstPiece, truncatedTitleSecondPiece = _a.truncatedTitleSecondPiece; this._isTruncated = true; if (!truncatedTitleFirstPiece && !truncatedTitleSecondPiece) { this._startTruncation(this.props); } this.setState({ truncatedTitleFirstPiece: truncatedTitleFirstPiece.slice(0, truncatedTitleFirstPiece.length - 1), truncatedTitleSecondPiece: truncatedTitleSecondPiece.slice(1) }); } }; DocumentCardTitle.prototype._doesTitleOverflow = function () { var titleElement = this._titleElement; return titleElement.scrollHeight > titleElement.clientHeight + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD || titleElement.scrollWidth > titleElement.clientWidth; }; DocumentCardTitle.prototype._updateTruncation = function () { // Only update truncation if the title's size has changed since the last time we truncated if (this._titleElement.clientWidth !== this._truncatedTitleAtWidth) { // Throttle truncation so that it doesn't happen during a window resize clearTimeout(this._scrollTimerId); this._scrollTimerId = this._async.setTimeout(this._startTruncation.bind(this, this.props), 250); } }; return DocumentCardTitle; }(Utilities_1.BaseComponent)); __decorate([ Utilities_1.autobind ], DocumentCardTitle.prototype, "_startTruncation", null); exports.DocumentCardTitle = DocumentCardTitle; /***/ }, /* 290 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(291)); /***/ }, /* 291 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(292)); __export(__webpack_require__(293)); /***/ }, /* 292 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Dropdown_Props_1 = __webpack_require__(293); var DirectionalHint_1 = __webpack_require__(58); var Callout_1 = __webpack_require__(59); var Label_1 = __webpack_require__(189); var Button_1 = __webpack_require__(154); var Panel_1 = __webpack_require__(294); var Icon_1 = __webpack_require__(141); var FocusZone_1 = __webpack_require__(50); var withResponsiveMode_1 = __webpack_require__(269); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(299); var styles = stylesImport; var Dropdown = Dropdown_1 = (function (_super) { __extends(Dropdown, _super); function Dropdown(props) { var _this = _super.call(this, props) || this; _this._warnDeprecations({ 'isDisabled': 'disabled' }); _this._warnMutuallyExclusive({ 'defaultSelectedKey': 'selectedKey' }); _this._id = props.id || Utilities_1.getId('Dropdown'); var selectedKey = props.defaultSelectedKey !== undefined ? props.defaultSelectedKey : props.selectedKey; _this.state = { isOpen: false, selectedIndex: _this._getSelectedIndex(props.options, selectedKey) }; return _this; } Dropdown.prototype.componentWillReceiveProps = function (newProps) { // In controlled component usage where selectedKey is provided, update the selectedIndex // state if the key or options change. if (newProps.selectedKey !== undefined && (newProps.selectedKey !== this.props.selectedKey || newProps.options !== this.props.options)) { this.setState({ selectedIndex: this._getSelectedIndex(newProps.options, newProps.selectedKey) }); } }; Dropdown.prototype.componentDidUpdate = function (prevProps, prevState) { if (prevState.isOpen === true && this.state.isOpen === false) { this._dropDown.focus(); } }; // Primary Render Dropdown.prototype.render = function () { var id = this._id; var _a = this.props, className = _a.className, label = _a.label, options = _a.options, disabled = _a.disabled, isDisabled = _a.isDisabled, ariaLabel = _a.ariaLabel, required = _a.required, errorMessage = _a.errorMessage, _b = _a.onRenderTitle, onRenderTitle = _b === void 0 ? this._onRenderTitle : _b, _c = _a.onRenderContainer, onRenderContainer = _c === void 0 ? this._onRenderContainer : _c; var _d = this.state, isOpen = _d.isOpen, selectedIndex = _d.selectedIndex; var selectedOption = options[selectedIndex]; // Remove this deprecation workaround at 1.0.0 if (isDisabled !== undefined) { disabled = isDisabled; } return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-Dropdown-container') }, label && (React.createElement(Label_1.Label, { className: Utilities_1.css('ms-Dropdown-label'), id: id + '-label', ref: this._resolveRef('_dropdownLabel'), required: required }, label)), React.createElement("div", { "data-is-focusable": !disabled, ref: this._resolveRef('_dropDown'), id: id, className: Utilities_1.css('ms-Dropdown', styles.root, className, (_e = { 'is-open': isOpen }, _e['is-disabled ' + styles.rootIsDisabled] = disabled, _e['is-required '] = required, _e)), tabIndex: disabled ? -1 : 0, onKeyDown: this._onDropdownKeyDown, onKeyUp: this._onDropdownKeyUp, onClick: this._onDropdownClick, "aria-expanded": isOpen ? 'true' : 'false', role: 'combobox', "aria-readonly": true, "aria-live": disabled || isOpen ? 'off' : 'assertive', "aria-label": ariaLabel || label, "aria-describedby": id + '-option', "aria-activedescendant": isOpen && selectedIndex >= 0 ? (this._id + '-list' + selectedIndex) : null, "aria-disabled": disabled, "aria-owns": id + '-list' }, React.createElement("span", { id: id + '-option', className: Utilities_1.css('ms-Dropdown-title', styles.title, !selectedOption && styles.titleIsPlaceHolder, (errorMessage && errorMessage.length > 0 ? styles.titleIsError : null)), key: selectedIndex, "aria-atomic": true }, // If option is selected render title, otherwise render the placeholder text selectedOption ? (onRenderTitle(selectedOption, this._onRenderTitle)) : this._onRenderPlaceHolder(this.props)), React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Dropdown-caretDown', styles.caretDown), iconName: 'chevronDown' })), isOpen && (onRenderContainer(this.props, this._onRenderContainer)), errorMessage && React.createElement("div", { className: Utilities_1.css(styles.errorMessage) }, errorMessage))); var _e; }; Dropdown.prototype.focus = function () { if (this._dropDown && this._dropDown.tabIndex !== -1) { this._dropDown.focus(); } }; Dropdown.prototype.setSelectedIndex = function (index) { var _a = this.props, onChanged = _a.onChanged, options = _a.options; var selectedIndex = this.state.selectedIndex; index = Math.max(0, Math.min(options.length - 1, index)); if (index !== selectedIndex) { // Set the selected option. this.setState({ selectedIndex: index }); if (onChanged) { onChanged(options[index], index); } } }; // Render text in dropdown input Dropdown.prototype._onRenderTitle = function (item) { return React.createElement("span", null, item.text); }; // Render placeHolder text in dropdown input Dropdown.prototype._onRenderPlaceHolder = function (props) { if (!props.placeHolder) { return null; } return React.createElement("span", null, props.placeHolder); }; // Render Callout or Panel container and pass in list Dropdown.prototype._onRenderContainer = function (props) { var _a = this.props, _b = _a.onRenderList, onRenderList = _b === void 0 ? this._onRenderList : _b, responsiveMode = _a.responsiveMode, calloutProps = _a.calloutProps; var isSmall = responsiveMode <= withResponsiveMode_1.ResponsiveMode.medium; return (isSmall ? React.createElement(Panel_1.Panel, { className: Utilities_1.css('ms-Dropdown-panel', styles.panel), isOpen: true, isLightDismiss: true, onDismissed: this._onDismiss, hasCloseButton: false }, onRenderList(props, this._onRenderList)) : React.createElement(Callout_1.Callout, __assign({ isBeakVisible: false, gapSpace: 0, doNotLayer: false, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge }, calloutProps, { className: Utilities_1.css('ms-Dropdown-callout', styles.callout, calloutProps ? calloutProps.className : undefined), targetElement: this._dropDown, onDismiss: this._onDismiss, onPositioned: this._onPositioned }), React.createElement("div", { style: { width: this._dropDown.clientWidth - 2 } }, onRenderList(props, this._onRenderList)))); }; // Render List of items Dropdown.prototype._onRenderList = function (props) { var _this = this; var _a = this.props.onRenderItem, onRenderItem = _a === void 0 ? this._onRenderItem : _a; var id = this._id; var selectedIndex = this.state.selectedIndex; return (React.createElement(FocusZone_1.FocusZone, { ref: this._resolveRef('_focusZone'), direction: FocusZone_1.FocusZoneDirection.vertical, defaultActiveElement: '#' + id + '-list' + selectedIndex, id: id + '-list', className: Utilities_1.css('ms-Dropdown-items', styles.items), "aria-labelledby": id + '-label', onKeyDown: this._onZoneKeyDown, role: 'listbox' }, this.props.options.map(function (item, index) { return onRenderItem(__assign({}, item, { index: index }), _this._onRenderItem); }))); }; // Render items Dropdown.prototype._onRenderItem = function (item) { switch (item.itemType) { case Dropdown_Props_1.DropdownMenuItemType.Divider: return this._renderSeparator(item); case Dropdown_Props_1.DropdownMenuItemType.Header: return this._renderHeader(item); default: return this._renderOption(item); } }; // Render separator Dropdown.prototype._renderSeparator = function (item) { var index = item.index, key = item.key; if (index > 0) { return React.createElement("div", { role: 'separator', key: key, className: Utilities_1.css('ms-Dropdown-divider', styles.divider) }); } return null; }; Dropdown.prototype._renderHeader = function (item) { var _a = this.props.onRenderOption, onRenderOption = _a === void 0 ? this._onRenderOption : _a; return (React.createElement("div", { className: Utilities_1.css('ms-Dropdown-header', styles.header) }, onRenderOption(item, this._onRenderOption))); }; // Render menu item Dropdown.prototype._renderOption = function (item) { var _this = this; var _a = this.props.onRenderOption, onRenderOption = _a === void 0 ? this._onRenderOption : _a; var id = this._id; return (React.createElement(Button_1.CommandButton, { id: id + '-list' + item.index, ref: Dropdown_1.Option + item.index, key: item.key, "data-index": item.index, "data-is-focusable": true, className: Utilities_1.css('ms-Dropdown-item', styles.item, (_b = {}, _b['is-selected ' + styles.itemIsSelected] = this.state.selectedIndex === item.index, _b['is-disabled ' + styles.itemIsDisabled] = this.props.disabled === true, _b)), onClick: function () { return _this._onItemClick(item.index); }, role: 'option', "aria-selected": this.state.selectedIndex === item.index ? 'true' : 'false', ariaLabel: item.text, title: item.text }, " ", onRenderOption(item, this._onRenderOption))); var _b; }; // Render content of item (i.e. text/icon inside of button) Dropdown.prototype._onRenderOption = function (item) { return React.createElement("span", { className: Utilities_1.css('ms-Dropdown-optionText', styles.optionText) }, item.text); }; Dropdown.prototype._onPositioned = function () { this._focusZone.focus(); }; Dropdown.prototype._onItemClick = function (index) { this.setSelectedIndex(index); this.setState({ isOpen: false }); }; Dropdown.prototype._onDismiss = function () { this.setState({ isOpen: false }); this._dropDown.focus(); }; Dropdown.prototype._getSelectedIndex = function (options, selectedKey) { return Utilities_1.findIndex(options, (function (option) { return (option.isSelected || option.selected || (selectedKey != null) && option.key === selectedKey); })); }; Dropdown.prototype._onDropdownKeyDown = function (ev) { switch (ev.which) { case Utilities_1.KeyCodes.enter: this.setState({ isOpen: !this.state.isOpen }); break; case Utilities_1.KeyCodes.escape: if (!this.state.isOpen) { return; } this.setState({ isOpen: false }); break; case Utilities_1.KeyCodes.up: this.setSelectedIndex(this.state.selectedIndex - 1); break; case Utilities_1.KeyCodes.down: if (ev.altKey || ev.metaKey) { this.setState({ isOpen: true }); } else { this.setSelectedIndex(this.state.selectedIndex + 1); } break; case Utilities_1.KeyCodes.home: this.setSelectedIndex(0); break; case Utilities_1.KeyCodes.end: this.setSelectedIndex(this.props.options.length - 1); break; case Utilities_1.KeyCodes.space: // event handled in _onDropdownKeyUp break; default: return; } ev.stopPropagation(); ev.preventDefault(); }; Dropdown.prototype._onDropdownKeyUp = function (ev) { switch (ev.which) { case Utilities_1.KeyCodes.space: this.setState({ isOpen: !this.state.isOpen }); break; default: return; } ev.stopPropagation(); ev.preventDefault(); }; Dropdown.prototype._onZoneKeyDown = function (ev) { switch (ev.which) { case Utilities_1.KeyCodes.up: if (ev.altKey || ev.metaKey) { this.setState({ isOpen: false }); break; } return; case Utilities_1.KeyCodes.escape: this.setState({ isOpen: false }); break; case Utilities_1.KeyCodes.tab: this.setState({ isOpen: false }); return; default: return; } ev.stopPropagation(); ev.preventDefault(); }; Dropdown.prototype._onDropdownClick = function () { var _a = this.props, disabled = _a.disabled, isDisabled = _a.isDisabled; var isOpen = this.state.isOpen; // Remove this deprecation workaround at 1.0.0 if (isDisabled !== undefined) { disabled = isDisabled; } if (!disabled) { this.setState({ isOpen: !isOpen }); } }; return Dropdown; }(Utilities_1.BaseComponent)); Dropdown.defaultProps = { options: [] }; Dropdown.Option = 'option'; __decorate([ Utilities_1.autobind ], Dropdown.prototype, "_onRenderTitle", null); __decorate([ Utilities_1.autobind ], Dropdown.prototype, "_onRenderPlaceHolder", null); __decorate([ Utilities_1.autobind ], Dropdown.prototype, "_onRenderContainer", null); __decorate([ Utilities_1.autobind ], Dropdown.prototype, "_onRenderList", null); __decorate([ Utilities_1.autobind ], Dropdown.prototype, "_onRenderItem", null); __decorate([ Utilities_1.autobind ], Dropdown.prototype, "_renderOption", null); __decorate([ Utilities_1.autobind ], Dropdown.prototype, "_onRenderOption", null); __decorate([ Utilities_1.autobind ], Dropdown.prototype, "_onPositioned", null); __decorate([ Utilities_1.autobind ], Dropdown.prototype, "_onDismiss", null); __decorate([ Utilities_1.autobind ], Dropdown.prototype, "_onDropdownKeyDown", null); __decorate([ Utilities_1.autobind ], Dropdown.prototype, "_onDropdownKeyUp", null); __decorate([ Utilities_1.autobind ], Dropdown.prototype, "_onZoneKeyDown", null); __decorate([ Utilities_1.autobind ], Dropdown.prototype, "_onDropdownClick", null); Dropdown = Dropdown_1 = __decorate([ withResponsiveMode_1.withResponsiveMode ], Dropdown); exports.Dropdown = Dropdown; var Dropdown_1; /***/ }, /* 293 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var DropdownMenuItemType; (function (DropdownMenuItemType) { DropdownMenuItemType[DropdownMenuItemType["Normal"] = 0] = "Normal"; DropdownMenuItemType[DropdownMenuItemType["Divider"] = 1] = "Divider"; DropdownMenuItemType[DropdownMenuItemType["Header"] = 2] = "Header"; })(DropdownMenuItemType = exports.DropdownMenuItemType || (exports.DropdownMenuItemType = {})); /***/ }, /* 294 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(295)); /***/ }, /* 295 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(296)); __export(__webpack_require__(297)); /***/ }, /* 296 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable:no-unused-variable */ var React = __webpack_require__(2); /* tslint:enable:no-unused-variable */ var Utilities_1 = __webpack_require__(10); var index_1 = __webpack_require__(263); var Panel_Props_1 = __webpack_require__(297); var Layer_1 = __webpack_require__(134); var Overlay_1 = __webpack_require__(265); var Popup_1 = __webpack_require__(64); var Button_1 = __webpack_require__(154); var Styling_1 = __webpack_require__(68); var stylesImport = __webpack_require__(298); var styles = stylesImport; var Panel = (function (_super) { __extends(Panel, _super); function Panel(props) { var _this = _super.call(this, props) || this; _this.state = { isFooterSticky: false, isOpen: false, isAnimating: false, id: Utilities_1.getId('Panel') }; return _this; } Panel.prototype.componentDidMount = function () { this._events.on(window, 'resize', this._updateFooterPosition); if (this.props.isOpen) { this.open(); } }; Panel.prototype.componentWillReceiveProps = function (newProps) { if (newProps.isOpen !== this.state.isOpen) { if (newProps.isOpen) { this.open(); } else { this.dismiss(); } } }; Panel.prototype.render = function () { var _a = this.props, children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, closeButtonAriaLabel = _a.closeButtonAriaLabel, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, hasCloseButton = _a.hasCloseButton, headerText = _a.headerText, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isLightDismiss = _a.isLightDismiss, layerProps = _a.layerProps, type = _a.type, customWidth = _a.customWidth, _c = _a.onRenderNavigation, onRenderNavigation = _c === void 0 ? this._onRenderNavigation : _c, _d = _a.onRenderHeader, onRenderHeader = _d === void 0 ? this._onRenderHeader : _d, _e = _a.onRenderBody, onRenderBody = _e === void 0 ? this._onRenderBody : _e, _f = _a.onRenderFooter, onRenderFooter = _f === void 0 ? this._onRenderFooter : _f; var _g = this.state, isOpen = _g.isOpen, isAnimating = _g.isAnimating, id = _g.id, isFooterSticky = _g.isFooterSticky; var isLeft = type === Panel_Props_1.PanelType.smallFixedNear ? true : false; var isRTL = Utilities_1.getRTL(); var isOnRightSide = isRTL ? isLeft : !isLeft; var headerTextId = id + '-headerText'; var customWidthStyles = (type === Panel_Props_1.PanelType.custom) ? { width: customWidth } : {}; if (!isOpen && !isAnimating) { return null; } var overlay; if (isBlocking) { overlay = (React.createElement(Overlay_1.Overlay, { className: Utilities_1.css(styles.overlay, isOpen && isAnimating && Styling_1.AnimationClassNames.fadeIn200, !isOpen && isAnimating && Styling_1.AnimationClassNames.fadeOut200), isDarkThemed: false, onClick: isLightDismiss ? this._onPanelClick : null })); } return (React.createElement(Layer_1.Layer, __assign({}, layerProps), React.createElement(Popup_1.Popup, { role: 'dialog', ariaLabelledBy: headerText && headerTextId, onDismiss: this.dismiss }, React.createElement("div", { className: Utilities_1.css('ms-Panel', styles.root, className, // because the RTL animations are not being used, we need to set a class isOpen && ('is-open ' + styles.rootIsOpen), type === Panel_Props_1.PanelType.smallFluid && ('ms-Panel--smFluid ' + styles.rootIsSmallFluid), type === Panel_Props_1.PanelType.smallFixedNear && ('ms-Panel--smLeft ' + styles.rootIsSmallLeft), type === Panel_Props_1.PanelType.smallFixedFar && ('ms-Panel--sm ' + styles.rootIsSmall), type === Panel_Props_1.PanelType.medium && ('ms-Panel--md ' + styles.rootIsMedium), type === Panel_Props_1.PanelType.large || type === Panel_Props_1.PanelType.largeFixed && ('ms-Panel--lg ' + styles.rootIsLarge), type === Panel_Props_1.PanelType.largeFixed && ('ms-Panel--fixed ' + styles.rootIsFixed), type === Panel_Props_1.PanelType.extraLarge && ('ms-Panel--xl ' + styles.rootIsXLarge), type === Panel_Props_1.PanelType.custom && ('ms-Panel--custom ' + styles.rootIsCustom), hasCloseButton && ('ms-Panel--hasCloseButton ' + styles.rootHasCloseButton)) }, overlay, React.createElement(index_1.FocusTrapZone, { className: Utilities_1.css('ms-Panel-main', styles.main, isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideRightIn40, isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideLeftIn40, !isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideLeftOut40, !isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideRightOut40), style: customWidthStyles, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isLightDismiss, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector }, React.createElement("div", { className: Utilities_1.css('ms-Panel-commands'), "data-is-visible": true }, onRenderNavigation(this.props, this._onRenderNavigation)), React.createElement("div", { className: Utilities_1.css('ms-Panel-contentInner', styles.contentInner) }, onRenderHeader(this.props, this._onRenderHeader), onRenderBody(this.props, this._onRenderBody), onRenderFooter(this.props, this._onRenderFooter))))))); }; Panel.prototype.open = function () { var _this = this; if (!this.state.isOpen) { this.setState({ isOpen: true, isAnimating: true }, function () { _this._async.setTimeout(_this._onTransitionComplete, 200); }); } }; Panel.prototype.dismiss = function () { var _this = this; if (this.state.isOpen) { this.setState({ isOpen: false, isAnimating: true }, function () { _this._async.setTimeout(_this._onTransitionComplete, 200); }); if (this.props.onDismiss) { this.props.onDismiss(); } } }; Panel.prototype._onRenderNavigation = function (props) { var closeButtonAriaLabel = props.closeButtonAriaLabel, hasCloseButton = props.hasCloseButton; return (hasCloseButton && React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Panel-closeButton ms-PanelAction-close', styles.closeButton), onClick: this._onPanelClick, ariaLabel: closeButtonAriaLabel, "data-is-visible": true, iconProps: { iconName: 'Cancel' } })); }; Panel.prototype._onRenderHeader = function (props) { var headerText = props.headerText, headerTextId = props.headerTextId, _a = props.headerClassName, headerClassName = _a === void 0 ? '' : _a; return (headerText && React.createElement("div", { className: Utilities_1.css('ms-Panel-header', styles.header) }, React.createElement("p", { className: Utilities_1.css('ms-Panel-headerText', styles.headerText, headerClassName), id: headerTextId, role: 'heading' }, headerText))); }; Panel.prototype._onRenderBody = function (props) { return (React.createElement("div", { className: Utilities_1.css('ms-Panel-content', styles.content), ref: this._resolveRef('_content') }, props.children)); }; Panel.prototype._onRenderFooter = function (props) { var isFooterSticky = this.state.isFooterSticky; var _a = this.props.onRenderFooterContent, onRenderFooterContent = _a === void 0 ? null : _a; return (onRenderFooterContent != null && React.createElement("div", { className: Utilities_1.css('ms-Panel-footer', styles.footer, isFooterSticky && styles.footerIsSticky) }, React.createElement("div", { className: Utilities_1.css('ms-Panel-footerInner', styles.footerInner) }, onRenderFooterContent()))); }; Panel.prototype._updateFooterPosition = function () { var _content = this._content; if (_content) { var height = _content.clientHeight; var innerHeight_1 = _content.scrollHeight; this.setState({ isFooterSticky: height < innerHeight_1 ? true : false }); } }; Panel.prototype._onPanelClick = function () { this.dismiss(); }; Panel.prototype._onTransitionComplete = function () { this.setState({ isAnimating: false }); if (!this.state.isOpen && this.props.onDismissed) { this.props.onDismissed(); } }; return Panel; }(Utilities_1.BaseComponent)); Panel.defaultProps = { isOpen: false, isBlocking: true, hasCloseButton: true, type: Panel_Props_1.PanelType.smallFixedFar, }; __decorate([ Utilities_1.autobind ], Panel.prototype, "dismiss", null); __decorate([ Utilities_1.autobind ], Panel.prototype, "_onRenderNavigation", null); __decorate([ Utilities_1.autobind ], Panel.prototype, "_onRenderHeader", null); __decorate([ Utilities_1.autobind ], Panel.prototype, "_onRenderBody", null); __decorate([ Utilities_1.autobind ], Panel.prototype, "_onRenderFooter", null); __decorate([ Utilities_1.autobind ], Panel.prototype, "_onPanelClick", null); __decorate([ Utilities_1.autobind ], Panel.prototype, "_onTransitionComplete", null); exports.Panel = Panel; /***/ }, /* 297 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var PanelType; (function (PanelType) { /** * Renders the panel in 'small' mode, anchored to the far side (right in LTR mode), and has a fluid width. * Only used on Small screen breakpoints. * Small: 320-479px width (full screen), 16px Left/Right padding * Medium: <unused> * Large: <unused> * XLarge: <unused> * XXLarge: <unused> */ PanelType[PanelType["smallFluid"] = 0] = "smallFluid"; /** * Renders the panel in 'small' mode, anchored to the far side (right in LTR mode), and has a fixed width. * Small: 272px width, 16px Left/Right padding * Medium: 340px width, 16px Left/Right padding * Large: 340px width, 32px Left/Right padding * XLarge: 340px width, 32px Left/Right padding * XXLarge: 340px width, 40px Left/Right padding */ PanelType[PanelType["smallFixedFar"] = 1] = "smallFixedFar"; /** * Renders the panel in 'small' mode, anchored to the near side (left in LTR mode), and has a fixed width. * Small: 272px width, 16px Left/Right padding * Medium: 272px width, 16px Left/Right padding * Large: 272px width, 32px Left/Right padding * XLarge: 272px width, 32px Left/Right padding * XXLarge: 272px width, 32px Left/Right padding */ PanelType[PanelType["smallFixedNear"] = 2] = "smallFixedNear"; /** * Renders the panel in 'medium' mode, anchored to the far side (right in LTR mode). * Small: <adapts to smallFluid> * Medium: <adapts to smallFixedFar> * Large: 48px fixed left margin, 32px Left/Right padding * XLarge: 644px width, 32px Left/Right padding * XXLarge: 643px width, 40px Left/Right padding */ PanelType[PanelType["medium"] = 3] = "medium"; /** * Renders the panel in 'large' mode, anchored to the far side (right in LTR mode), and is fluid at XXX-Large breakpoint. * Small: <adapts to smallFluid> * Medium: <adapts to smallFixedFar> * Large: <adapts to medium> * XLarge: 48px fixed left margin, 32px Left/Right padding * XXLarge: 48px fixed left margin, 32px Left/Right padding * XXXLarge: 48px fixed left margin, (no redlines for padding, assuming previous breakpoint) */ PanelType[PanelType["large"] = 4] = "large"; /** * Renders the panel in 'large' mode, anchored to the far side (right in LTR mode), and is fixed at XXX-Large breakpoint. * Small: <adapts to smallFluid> * Medium: <adapts to smallFixedFar> * Large: <adapts to medium> * XLarge: 48px fixed left margin, 32px Left/Right padding * XXLarge: 48px fixed left margin, 32px Left/Right padding * XXXLarge: 940px width, (no redlines for padding, assuming previous breakpoint) */ PanelType[PanelType["largeFixed"] = 5] = "largeFixed"; /** * Renders the panel in 'extra large' mode, anchored to the far side (right in LTR mode). * Small: <adapts to smallFluid> * Medium: <adapts to smallFixedFar> * Large: <adapts to medium> * XLarge: <adapts to large> * XXLarge: 176px fixed left margin, 40px Left/Right padding * XXXLarge: 176px fixed left margin, 40px Left/Right padding */ PanelType[PanelType["extraLarge"] = 6] = "extraLarge"; /** * Renders the panel in 'custom' mode using customWidth, anchored to the far side (right in LTR mode). * Small: <adapts to smallFluid> * Medium: <adapts to smallFixedFar> * Large: 48px fixed left margin, 32px Left/Right padding * XLarge: 644px width, 32px Left/Right padding * XXLarge: 643px width, 40px Left/Right padding */ PanelType[PanelType["custom"] = 7] = "custom"; })(PanelType = exports.PanelType || (exports.PanelType = {})); /***/ }, /* 298 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_6639629e', overlay: 'overlay_6639629e', main: 'main_6639629e', rootIsSmall: 'rootIsSmall_6639629e', rootIsSmallLeft: 'rootIsSmallLeft_6639629e', rootIsSmallFluid: 'rootIsSmallFluid_6639629e', rootIsMedium: 'rootIsMedium_6639629e', rootIsLarge: 'rootIsLarge_6639629e', rootIsXLarge: 'rootIsXLarge_6639629e', rootIsCustom: 'rootIsCustom_6639629e', rootIsFixed: 'rootIsFixed_6639629e', rootIsOpen: 'rootIsOpen_6639629e', closeButton: 'closeButton_6639629e', contentInner: 'contentInner_6639629e', rootHasCloseButton: 'rootHasCloseButton_6639629e', header: 'header_6639629e', content: 'content_6639629e', footerInner: 'footerInner_6639629e', footer: 'footer_6639629e', footerIsSticky: 'footerIsSticky_6639629e', headerText: 'headerText_6639629e', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_6639629e{pointer-events:none;position:absolute;top:0;left:0;right:0;bottom:0}.root_6639629e .overlay_6639629e{pointer-events:none;opacity:1;cursor:pointer;transition:opacity 367ms cubic-bezier(.1,.9,.2,1)}.main_6639629e{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";position:absolute;width:100%;bottom:0;top:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}[dir=ltr] .main_6639629e{right:0}[dir=rtl] .main_6639629e{left:0}@media (min-width:480px){.main_6639629e{border-left:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";border-right:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}[dir=ltr] .main_6639629e{left:auto}[dir=rtl] .main_6639629e{right:auto}}.root_6639629e.rootIsSmall_6639629e .main_6639629e{width:272px}@media (min-width:480px){.root_6639629e.rootIsSmall_6639629e .main_6639629e{width:340px}}.root_6639629e.rootIsSmallLeft_6639629e .main_6639629e{width:272px;box-shadow:30px 0 30px -30px rgba(0,0,0,.2)}[dir=ltr] .root_6639629e.rootIsSmallLeft_6639629e .main_6639629e{right:auto}[dir=rtl] .root_6639629e.rootIsSmallLeft_6639629e .main_6639629e{left:auto}[dir=ltr] .root_6639629e.rootIsSmallLeft_6639629e .main_6639629e{left:0}[dir=rtl] .root_6639629e.rootIsSmallLeft_6639629e .main_6639629e{right:0}.root_6639629e.rootIsSmallFluid_6639629e .main_6639629e{width:100%}@media (min-width:640px){.root_6639629e.rootIsCustom_6639629e .main_6639629e,.root_6639629e.rootIsLarge_6639629e .main_6639629e,.root_6639629e.rootIsMedium_6639629e .main_6639629e,.root_6639629e.rootIsXLarge_6639629e .main_6639629e{width:auto}[dir=ltr] .root_6639629e.rootIsCustom_6639629e .main_6639629e,[dir=ltr] .root_6639629e.rootIsLarge_6639629e .main_6639629e,[dir=ltr] .root_6639629e.rootIsMedium_6639629e .main_6639629e,[dir=ltr] .root_6639629e.rootIsXLarge_6639629e .main_6639629e{left:48px}[dir=rtl] .root_6639629e.rootIsCustom_6639629e .main_6639629e,[dir=rtl] .root_6639629e.rootIsLarge_6639629e .main_6639629e,[dir=rtl] .root_6639629e.rootIsMedium_6639629e .main_6639629e,[dir=rtl] .root_6639629e.rootIsXLarge_6639629e .main_6639629e{right:48px}}@media (min-width:1024px){.root_6639629e.rootIsMedium_6639629e .main_6639629e{width:643px}[dir=ltr] .root_6639629e.rootIsMedium_6639629e .main_6639629e{left:auto}[dir=rtl] .root_6639629e.rootIsMedium_6639629e .main_6639629e{right:auto}}@media (min-width:1366px){[dir=ltr] .root_6639629e.rootIsLarge_6639629e .main_6639629e{left:428px}[dir=rtl] .root_6639629e.rootIsLarge_6639629e .main_6639629e{right:428px}}@media (min-width:1366px){.root_6639629e.rootIsLarge_6639629e.rootIsFixed_6639629e .main_6639629e{width:940px}[dir=ltr] .root_6639629e.rootIsLarge_6639629e.rootIsFixed_6639629e .main_6639629e{left:auto}[dir=rtl] .root_6639629e.rootIsLarge_6639629e.rootIsFixed_6639629e .main_6639629e{right:auto}}@media (min-width:1366px){[dir=ltr] .root_6639629e.rootIsXLarge_6639629e .main_6639629e{left:176px}[dir=rtl] .root_6639629e.rootIsXLarge_6639629e .main_6639629e{right:176px}}@media (min-width:1024px){[dir=ltr] .root_6639629e.rootIsCustom_6639629e .main_6639629e{left:auto}[dir=rtl] .root_6639629e.rootIsCustom_6639629e .main_6639629e{right:auto}}.root_6639629e.rootIsOpen_6639629e .main_6639629e{pointer-events:auto}.root_6639629e.rootIsOpen_6639629e .overlay_6639629e{cursor:pointer;pointer-events:auto}@media screen and (-ms-high-contrast:active){.root_6639629e.rootIsOpen_6639629e .overlay_6639629e{opacity:0}}.closeButton_6639629e{background:0 0;border:0;cursor:pointer;position:absolute;top:0;height:44px;width:44px;line-height:44px;padding:0;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:20px}[dir=ltr] .closeButton_6639629e{right:4px}[dir=rtl] .closeButton_6639629e{left:4px}.closeButton_6639629e:hover{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.contentInner_6639629e{position:absolute;top:0;bottom:0;left:0;right:0;overflow-y:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-overflow-scrolling:touch;-webkit-transform:translateZ(0);transform:translateZ(0)}.rootHasCloseButton_6639629e .contentInner_6639629e{top:44px}.content_6639629e,.footerInner_6639629e,.header_6639629e{padding-left:16px;padding-right:16px}@media (min-width:640px){.content_6639629e,.footerInner_6639629e,.header_6639629e{padding-left:32px;padding-right:32px}}@media (min-width:1366px){.content_6639629e,.footerInner_6639629e,.header_6639629e{padding-left:40px;padding-right:40px}}.header_6639629e{margin:14px 0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}@media (min-width:1024px){.header_6639629e{margin-top:30px}}.content_6639629e{margin-bottom:0;overflow-y:auto}.footer_6639629e{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid transparent;transition:border 367ms cubic-bezier(.1,.25,.75,.9)}.footerInner_6639629e{padding-bottom:20px;padding-top:20px}.footerIsSticky_6639629e{background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border-top-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.headerText_6639629e{font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";line-height:32px;margin:0}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 299 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_56083fec', title: 'title_56083fec', caretDown: 'caretDown_56083fec', titleIsPlaceHolder: 'titleIsPlaceHolder_56083fec', rootIsDisabled: 'rootIsDisabled_56083fec', titleIsError: 'titleIsError_56083fec', panel: 'panel_56083fec', callout: 'callout_56083fec', errorMessage: 'errorMessage_56083fec', items: 'items_56083fec', item: 'item_56083fec', itemIsDisabled: 'itemIsDisabled_56083fec', itemIsSelected: 'itemIsSelected_56083fec', header: 'header_56083fec', divider: 'divider_56083fec', optionText: 'optionText_56083fec', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_56083fec{box-sizing:border-box;box-shadow:none;margin:0;padding:0;font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";margin-bottom:10px;position:relative;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.root_56083fec:active .caretDown_56083fec,.root_56083fec:active .title_56083fec,.root_56083fec:focus .caretDown_56083fec,.root_56083fec:focus .title_56083fec,.root_56083fec:hover .caretDown_56083fec,.root_56083fec:hover .title_56083fec{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_56083fec:active .caretDown_56083fec,.root_56083fec:active .title_56083fec,.root_56083fec:focus .caretDown_56083fec,.root_56083fec:focus .title_56083fec,.root_56083fec:hover .caretDown_56083fec,.root_56083fec:hover .title_56083fec{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_56083fec:active .caretDown_56083fec,.root_56083fec:active .title_56083fec,.root_56083fec:focus .caretDown_56083fec,.root_56083fec:focus .title_56083fec,.root_56083fec:hover .caretDown_56083fec,.root_56083fec:hover .title_56083fec{color:#37006e}}.root_56083fec:active .titleIsPlaceHolder_56083fec,.root_56083fec:focus .titleIsPlaceHolder_56083fec,.root_56083fec:hover .titleIsPlaceHolder_56083fec{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.root_56083fec:active .title_56083fec,.root_56083fec:hover .title_56083fec{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_56083fec:active .title_56083fec,.root_56083fec:hover .title_56083fec{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_56083fec:active .title_56083fec,.root_56083fec:hover .title_56083fec{border-color:#37006e}}.root_56083fec:focus .title_56083fec{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_56083fec:focus .title_56083fec{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_56083fec:focus .title_56083fec{border-color:#37006e}}.root_56083fec .ms-Label{display:inline-block;margin-bottom:8px}.root_56083fec.rootIsDisabled_56083fec .title_56083fec{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";cursor:default}@media screen and (-ms-high-contrast:active){.root_56083fec.rootIsDisabled_56083fec .title_56083fec{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_56083fec.rootIsDisabled_56083fec .title_56083fec{border-color:#600000;color:#600000}}.root_56083fec.rootIsDisabled_56083fec .title_56083fec.titleIsError_56083fec{border-color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_56083fec.rootIsDisabled_56083fec .caretDown_56083fec{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_56083fec.rootIsDisabled_56083fec .caretDown_56083fec{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_56083fec.rootIsDisabled_56083fec .caretDown_56083fec{color:#600000}}.caretDown_56083fec{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": ";font-size:12px;position:absolute;top:1px;pointer-events:none;height:32px;line-height:30px}[dir=ltr] .caretDown_56083fec{right:12px}[dir=rtl] .caretDown_56083fec{left:12px}.title_56083fec{box-sizing:border-box;box-shadow:none;margin:0;padding:0;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 12px;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}html[dir=rtl] .title_56083fec{padding:0 12px 0 32px}.title_56083fec.titleIsError_56083fec{border-color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.title_56083fec.titleIsPlaceHolder_56083fec{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.panel_56083fec .ms-Panel-main{box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.panel_56083fec .ms-Panel-contentInner{padding:0 0 20px}.callout_56083fec{box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.errorMessage_56083fec{color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.errorMessage_56083fec::before{content:'* '}.items_56083fec{display:block}.item_56083fec{background:0 0;box-sizing:border-box;cursor:pointer;display:block;width:100%;height:auto;min-height:36px;line-height:20px;padding:5px 16px;position:relative;border:1px solid transparent;word-wrap:break-word;overflow-wrap:break-word;text-align:left}@media screen and (-ms-high-contrast:active){.item_56083fec{border-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.item_56083fec{border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}.item_56083fec:hover{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.item_56083fec:hover{background-color:#1aebff;border-color:#1aebff;color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.item_56083fec:hover:focus{border-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.item_56083fec:hover{background-color:#37006e;border-color:#37006e;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:black-on-white){.item_56083fec:hover{-ms-high-contrast-adjust:none}}.item_56083fec::-moz-focus-inner{border:0}.item_56083fec{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .item_56083fec:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.item_56083fec:focus{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.item_56083fec:active{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.item_56083fec.itemIsDisabled_56083fec{background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";cursor:default}.item_56083fec .ms-Button-flexContainer{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.item_56083fec.itemIsSelected_56083fec{background-color:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.item_56083fec.itemIsSelected_56083fec:hover{background-color:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": "}.item_56083fec.itemIsSelected_56083fec::-moz-focus-inner{border:0}.item_56083fec.itemIsSelected_56083fec{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .item_56083fec.itemIsSelected_56083fec:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.item_56083fec.itemIsSelected_56083fec{background-color:#1aebff;border-color:#1aebff;color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.item_56083fec.itemIsSelected_56083fec:focus{border-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.item_56083fec.itemIsSelected_56083fec{background-color:#37006e;border-color:#37006e;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:black-on-white){.item_56083fec.itemIsSelected_56083fec{-ms-high-contrast-adjust:none}}.header_56083fec{font-size:14px;font-weight:400;font-weight:600;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background:0 0;border:none;height:36px;line-height:36px;cursor:default;padding:0 16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html[dir=ltr] .header_56083fec{text-align:left}html[dir=rtl] .header_56083fec{text-align:right}.divider_56083fec{height:1px;background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.optionText_56083fec{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%;word-wrap:break-word;overflow-wrap:break-word;margin:1px}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 300 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(301)); /***/ }, /* 301 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(302)); __export(__webpack_require__(303)); /***/ }, /* 302 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var OverflowButtonType; (function (OverflowButtonType) { /** No overflow */ OverflowButtonType[OverflowButtonType["none"] = 0] = "none"; /** +1 overflow icon */ OverflowButtonType[OverflowButtonType["descriptive"] = 1] = "descriptive"; /** More overflow icon */ OverflowButtonType[OverflowButtonType["more"] = 2] = "more"; /** Chevron overflow icon */ OverflowButtonType[OverflowButtonType["downArrow"] = 3] = "downArrow"; })(OverflowButtonType = exports.OverflowButtonType || (exports.OverflowButtonType = {})); /***/ }, /* 303 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var Facepile_Props_1 = __webpack_require__(302); var FocusZone_1 = __webpack_require__(50); var Button_1 = __webpack_require__(154); var Icon_1 = __webpack_require__(141); var Persona_1 = __webpack_require__(281); var stylesImport = __webpack_require__(304); var styles = stylesImport; var Facepile = (function (_super) { __extends(Facepile, _super); function Facepile(props) { var _this = _super.call(this, props) || this; _this._ariaDescriptionId = Utilities_1.getId(); return _this; } Facepile.prototype.render = function () { var _this = this; var _a = this.props, chevronButtonProps = _a.chevronButtonProps, maxDisplayablePersonas = _a.maxDisplayablePersonas, overflowButtonProps = _a.overflowButtonProps, overflowButtonType = _a.overflowButtonType, ariaDescription = _a.ariaDescription, className = _a.className, personas = _a.personas, showAddButton = _a.showAddButton; var numPersonasToShow = Math.min(personas.length, maxDisplayablePersonas); // Added for deprecating chevronButtonProps. Can remove after v1.0 if (chevronButtonProps && !overflowButtonProps) { overflowButtonProps = chevronButtonProps; overflowButtonType = Facepile_Props_1.OverflowButtonType.downArrow; } return (React.createElement("div", { className: Utilities_1.css('ms-Facepile', styles.root, className) }, React.createElement("div", { className: Utilities_1.css('ms-Facepile-itemContainer', styles.itemContainer) }, showAddButton ? this._getAddNewElement() : null, this.onRenderAriaDescription(), React.createElement(FocusZone_1.FocusZone, { ariaDescribedBy: this._ariaDescriptionId, role: 'listbox', className: Utilities_1.css('ms-Facepile-members', styles.members), direction: FocusZone_1.FocusZoneDirection.horizontal }, personas.slice(0, numPersonasToShow).map(function (persona, index) { var personaControl = _this._getPersonaControl(persona); return persona.onClick ? _this._getElementWithOnClickEvent(personaControl, persona, index) : _this._getElementWithoutOnClickEvent(personaControl, persona, index); })), overflowButtonProps ? this._getOverflowElement(numPersonasToShow) : null))); }; Facepile.prototype.onRenderAriaDescription = function () { var ariaDescription = this.props.ariaDescription; // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan, // otherwise it will be assigned to descriptionSpan. return ariaDescription && (React.createElement("span", { className: styles.screenReaderOnly, id: this._ariaDescriptionId }, ariaDescription)); }; Facepile.prototype._getPersonaControl = function (persona) { var _a = this.props, getPersonaProps = _a.getPersonaProps, personaSize = _a.personaSize; return React.createElement(Persona_1.Persona, __assign({ imageInitials: persona.imageInitials, imageUrl: persona.imageUrl, initialsColor: persona.initialsColor, primaryText: persona.personaName, size: personaSize, hidePersonaDetails: true }, (getPersonaProps ? getPersonaProps(persona) : null))); }; Facepile.prototype._getElementWithOnClickEvent = function (personaControl, persona, index) { return React.createElement(Button_1.BaseButton, __assign({}, Utilities_1.getNativeProps(persona, Utilities_1.buttonProperties), { key: (!!persona.imageUrl ? 'i' : '') + index, "data-is-focusable": true, role: 'option', className: Utilities_1.css('ms-Facepile-itemButton ms-Facepile-person', styles.itemButton), title: persona.personaName, onClick: this._onPersonaClick.bind(this, persona), onMouseMove: this._onPersonaMouseMove.bind(this, persona), onMouseOut: this._onPersonaMouseOut.bind(this, persona) }), personaControl); }; Facepile.prototype._getElementWithoutOnClickEvent = function (personaControl, persona, index) { return React.createElement("div", __assign({}, Utilities_1.getNativeProps(persona, Utilities_1.divProperties), { key: (!!persona.imageUrl ? 'i' : '') + index, "data-is-focusable": true, role: 'option', className: Utilities_1.css('ms-Facepile-itemButton ms-Facepile-person', styles.itemButton), title: persona.personaName, onMouseMove: this._onPersonaMouseMove.bind(this, persona), onMouseOut: this._onPersonaMouseOut.bind(this, persona) }), personaControl); }; Facepile.prototype._getOverflowElement = function (numPersonasToShow) { switch (this.props.overflowButtonType) { case Facepile_Props_1.OverflowButtonType.descriptive: return this._getDescriptiveOverflowElement(numPersonasToShow); case Facepile_Props_1.OverflowButtonType.downArrow: return this._getIconElement('ChevronDown'); case Facepile_Props_1.OverflowButtonType.more: return this._getIconElement('More'); default: return null; } }; Facepile.prototype._getDescriptiveOverflowElement = function (numPersonasToShow) { var _a = this.props, overflowButtonProps = _a.overflowButtonProps, personas = _a.personas, personaSize = _a.personaSize; var numPersonasNotPictured = personas.length - numPersonasToShow; if (!overflowButtonProps || numPersonasNotPictured < 1) { return null; } var personaNames = personas.slice(numPersonasToShow).map(function (p) { return p.personaName; }).join(', '); return React.createElement(Button_1.BaseButton, __assign({}, overflowButtonProps, { ariaDescription: personaNames, className: Utilities_1.css('ms-Facepile-descriptiveOverflowButton', 'ms-Facepile-itemButton', styles.descriptiveOverflowButton, styles.itemButton) }), React.createElement(Persona_1.Persona, { title: personaNames, size: personaSize, hidePersonaDetails: true, onRenderInitials: function () { return (React.createElement("span", null, '+' + numPersonasNotPictured)); } })); }; Facepile.prototype._getIconElement = function (icon) { var _a = this.props, overflowButtonProps = _a.overflowButtonProps, personaSize = _a.personaSize; return React.createElement(Button_1.BaseButton, __assign({}, overflowButtonProps, { className: Utilities_1.css('ms-Facepile-overflowButton', 'ms-Facepile-itemButton', styles.overflowButton, styles.itemButton) }), React.createElement(Persona_1.Persona, { size: personaSize, hidePersonaDetails: true, onRenderInitials: function () { return (React.createElement(Icon_1.Icon, { iconName: icon })); } })); }; Facepile.prototype._getAddNewElement = function () { var _a = this.props, addButtonProps = _a.addButtonProps, personaSize = _a.personaSize; return React.createElement(Button_1.BaseButton, __assign({}, addButtonProps, { className: Utilities_1.css('ms-Facepile-addButton', 'ms-Facepile-itemButton', styles.itemButton, styles.addButton) }), React.createElement(Persona_1.Persona, { size: personaSize, hidePersonaDetails: true, onRenderInitials: function () { return (React.createElement(Icon_1.Icon, { iconName: 'addFriend' })); } })); }; Facepile.prototype._onPersonaClick = function (persona, ev) { persona.onClick(ev, persona); ev.preventDefault(); ev.stopPropagation(); }; Facepile.prototype._onPersonaMouseMove = function (persona, ev) { if (!!persona.onMouseMove) { persona.onMouseMove(ev, persona); } }; Facepile.prototype._onPersonaMouseOut = function (persona, ev) { if (!!persona.onMouseOut) { persona.onMouseOut(ev, persona); } }; return Facepile; }(Utilities_1.BaseComponent)); Facepile.defaultProps = { maxDisplayablePersonas: 5, personas: [], personaSize: Persona_1.PersonaSize.extraSmall }; exports.Facepile = Facepile; /***/ }, /* 304 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_ec63745c', clear: 'clear_ec63745c', itemContainer: 'itemContainer_ec63745c', members: 'members_ec63745c', itemButton: 'itemButton_ec63745c', addButton: 'addButton_ec63745c', overflowButton: 'overflowButton_ec63745c', descriptiveOverflowButton: 'descriptiveOverflowButton_ec63745c', screenReaderOnly: 'screenReaderOnly_ec63745c', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_ec63745c{width:auto}.clear_ec63745c{clear:both}.itemContainer_ec63745c{display:-webkit-box;display:-ms-flexbox;display:flex}.members_ec63745c{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:hidden;margin:-2px}.members_ec63745c>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:2px}.itemButton_ec63745c{text-align:center;padding:0;border-radius:50%;vertical-align:top}.itemButton_ec63745c::-moz-focus-inner{border:0}.itemButton_ec63745c{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .itemButton_ec63745c:focus:after{content:'';position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.itemButton_ec63745c .ms-Persona-details{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}button.itemButton_ec63745c{display:inline;background:0 0;padding:0;cursor:pointer;border:none}button.itemButton_ec63745c::-moz-focus-inner{padding:0;border:0}button.addButton_ec63745c{font-size:14px;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}html[dir=ltr] button.addButton_ec63745c{margin-right:4px}html[dir=rtl] button.addButton_ec63745c{margin-left:4px}button.addButton_ec63745c:focus,button.addButton_ec63745c:hover{background-color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}button.addButton_ec63745c:active{background-color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}button.addButton_ec63745c:disabled{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}button.overflowButton_ec63745c{font-size:14px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=ltr] button.overflowButton_ec63745c{margin-left:4px}html[dir=rtl] button.overflowButton_ec63745c{margin-right:4px}button.descriptiveOverflowButton_ec63745c{font-size:12px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=ltr] button.descriptiveOverflowButton_ec63745c{margin-left:4px}html[dir=rtl] button.descriptiveOverflowButton_ec63745c{margin-right:4px}.screenReaderOnly_ec63745c{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 305 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(263)); /***/ }, /* 306 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(307)); /***/ }, /* 307 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(308)); __export(__webpack_require__(309)); /***/ }, /* 308 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var Button_1 = __webpack_require__(154); var Icon_1 = __webpack_require__(141); var MessageBar_Props_1 = __webpack_require__(309); var stylesImport = __webpack_require__(310); var styles = stylesImport; var MessageBar = (function (_super) { __extends(MessageBar, _super); function MessageBar(props) { var _this = _super.call(this, props) || this; _this.ICON_MAP = (_a = {}, _a[MessageBar_Props_1.MessageBarType.info] = 'Info', _a[MessageBar_Props_1.MessageBarType.warning] = 'Info', _a[MessageBar_Props_1.MessageBarType.error] = 'ErrorBadge', _a[MessageBar_Props_1.MessageBarType.blocked] = 'Blocked', _a[MessageBar_Props_1.MessageBarType.remove] = 'Blocked', _a[MessageBar_Props_1.MessageBarType.severeWarning] = 'Warning', _a[MessageBar_Props_1.MessageBarType.success] = 'Completed', _a); _this.state = { labelId: Utilities_1.getId('MessageBar'), showContent: false }; return _this; var _a; } MessageBar.prototype.render = function () { var isMultiline = this.props.isMultiline; return isMultiline ? this._renderMultiLine() : this._renderSingleLine(); }; MessageBar.prototype._getActionsDiv = function () { if (this.props.actions) { return React.createElement("div", { className: this.props.isMultiline ? ('ms-MessageBar-actions ' + styles.actions) : ('ms-MessageBar-actionsOneline ' + styles.actionsOneline) }, this.props.actions); } return null; }; MessageBar.prototype._getClassName = function () { return Utilities_1.css(this.props.className, 'ms-MessageBar', styles.root, (_a = {}, _a['ms-MessageBar ' + styles.root] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.info, _a['ms-MessageBar--error ' + styles.rootIsError] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.error, _a['ms-MessageBar--blocked ' + styles.rootIsBlocked] = (this.props.messageBarType === MessageBar_Props_1.MessageBarType.blocked) || (this.props.messageBarType === MessageBar_Props_1.MessageBarType.remove), _a['ms-MessageBar--severeWarning ' + styles.rootIsSevereWarning] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.severeWarning, _a['ms-MessageBar--success ' + styles.rootIsSuccess] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.success, _a['ms-MessageBar--warning ' + styles.rootIsWarning] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.warning, _a)); var _a; }; MessageBar.prototype._getDismissDiv = function () { if (this.props.onDismiss != null) { return (React.createElement(Button_1.IconButton, { disabled: false, className: Utilities_1.css('ms-MessageBar-dismissal', styles.dismissal), onClick: this.props.onDismiss, iconProps: { iconName: 'Cancel' }, ariaLabel: this.props.dismissButtonAriaLabel })); } return null; }; MessageBar.prototype._getIconSpan = function () { return (React.createElement("div", { className: Utilities_1.css('ms-MessageBar-icon', styles.icon) }, React.createElement(Icon_1.Icon, { iconName: this.ICON_MAP[this.props.messageBarType] }))); }; MessageBar.prototype._getInnerTextClassName = function () { return this.props.onDismiss || this.props.actions ? 'ms-MessageBar-innerTextPadding ' + styles.innerTextPadding : 'ms-MessageBar-innerText ' + styles.innerText; }; MessageBar.prototype._renderMultiLine = function () { return (React.createElement("div", { className: this._getClassName() + ' ms-MessageBar-multiline ' + styles.multiline, role: 'status', "aria-live": this._getAnnouncementPriority() }, React.createElement("div", { className: Utilities_1.css('ms-MessageBar-content', styles.content) }, this._getIconSpan(), React.createElement("div", { className: Utilities_1.css('ms-MessageBar-actionables', styles.actionables) }, this._renderInnerText(), this._getActionsDiv(), this._getDismissDiv())))); }; MessageBar.prototype._renderSingleLine = function () { return (React.createElement("div", { className: this._getClassName() + ' ms-MessageBar-singleline ' + styles.singleline }, React.createElement("div", { className: Utilities_1.css('ms-MessageBar-content', styles.content) }, this._getIconSpan(), React.createElement("div", { className: Utilities_1.css('ms-MessageBar-actionables', styles.actionables) }, this._renderInnerText()), this._getActionsDiv(), React.createElement("div", { className: Utilities_1.css('ms-MessageBar-dismissalOneline', styles.dismissalOneline) }, this._getDismissDiv())))); }; MessageBar.prototype._renderInnerText = function () { return (React.createElement("div", { className: Utilities_1.css('ms-MessageBar-text', styles.text), id: this.state.labelId }, React.createElement("span", { className: this._getInnerTextClassName(), role: 'status', "aria-live": this._getAnnouncementPriority() }, React.createElement(Utilities_1.DelayedRender, null, React.createElement("span", null, this.props.children))))); }; MessageBar.prototype._getAnnouncementPriority = function () { switch (this.props.messageBarType) { case MessageBar_Props_1.MessageBarType.blocked: case MessageBar_Props_1.MessageBarType.error: case MessageBar_Props_1.MessageBarType.severeWarning: return 'assertive'; } return 'polite'; }; return MessageBar; }(Utilities_1.BaseComponent)); MessageBar.defaultProps = { messageBarType: MessageBar_Props_1.MessageBarType.info, onDismiss: null, isMultiline: true, }; exports.MessageBar = MessageBar; /***/ }, /* 309 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var MessageBarType; (function (MessageBarType) { /** Info styled MessageBar */ MessageBarType[MessageBarType["info"] = 0] = "info"; /** Error styled MessageBar */ MessageBarType[MessageBarType["error"] = 1] = "error"; /** Blocked styled MessageBar */ MessageBarType[MessageBarType["blocked"] = 2] = "blocked"; /** SevereWarning styled MessageBar */ MessageBarType[MessageBarType["severeWarning"] = 3] = "severeWarning"; /** Success styled MessageBar */ MessageBarType[MessageBarType["success"] = 4] = "success"; /** Warning styled MessageBar */ MessageBarType[MessageBarType["warning"] = 5] = "warning"; /** * Deprecated at v0.48.0, to be removed at >= v1.0.0. Use 'blocked' instead. * @deprecated */ MessageBarType[MessageBarType["remove"] = 90000] = "remove"; })(MessageBarType = exports.MessageBarType || (exports.MessageBarType = {})); /***/ }, /* 310 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_56c7fc1c', icon: 'icon_56c7fc1c', text: 'text_56c7fc1c', rootIsWarning: 'rootIsWarning_56c7fc1c', rootIsSevereWarning: 'rootIsSevereWarning_56c7fc1c', rootIsError: 'rootIsError_56c7fc1c', rootIsBlocked: 'rootIsBlocked_56c7fc1c', rootIsSuccess: 'rootIsSuccess_56c7fc1c', content: 'content_56c7fc1c', actionables: 'actionables_56c7fc1c', dismissal: 'dismissal_56c7fc1c', actions: 'actions_56c7fc1c', actionsOneline: 'actionsOneline_56c7fc1c', dismissalOneline: 'dismissalOneline_56c7fc1c', innerTextPadding: 'innerTextPadding_56c7fc1c', innerText: 'innerText_56c7fc1c', multiline: 'multiline_56c7fc1c', singleline: 'singleline_56c7fc1c', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_56c7fc1c{background-color:" }, { "theme": "infoBackground", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "infoText", "defaultValue": "#333333" }, { "rawString": ";width:100%;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.root_56c7fc1c .icon_56c7fc1c{color:" }, { "theme": "info", "defaultValue": "#767676" }, { "rawString": "}html[dir=ltr] .root_56c7fc1c .icon_56c7fc1c{padding-right:8px}html[dir=rtl] .root_56c7fc1c .icon_56c7fc1c{padding-left:8px}.root_56c7fc1c .ms-Link{font-size:12px;color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}html[dir=ltr] .root_56c7fc1c .ms-Button{margin-left:6px}html[dir=rtl] .root_56c7fc1c .ms-Button{margin-right:6px}.icon_56c7fc1c,.text_56c7fc1c{display:table-cell;vertical-align:top}.icon_56c7fc1c{font-size:16px;min-width:16px;min-height:16px;display:-webkit-box;display:-ms-flexbox;display:flex}.text_56c7fc1c{font-size:12px;font-weight:400;min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex}.root_56c7fc1c.rootIsWarning_56c7fc1c{background-color:" }, { "theme": "warningBackground", "defaultValue": "#fff4ce" }, { "rawString": ";color:" }, { "theme": "warningText", "defaultValue": "#333333" }, { "rawString": "}.root_56c7fc1c.rootIsSevereWarning_56c7fc1c{background-color:" }, { "theme": "severeWarningBackground", "defaultValue": "#fed9cc" }, { "rawString": ";color:" }, { "theme": "severeWarningText", "defaultValue": "#333333" }, { "rawString": "}.root_56c7fc1c.rootIsSevereWarning_56c7fc1c .icon_56c7fc1c{color:" }, { "theme": "severeWarning", "defaultValue": "#d83b01" }, { "rawString": "}.root_56c7fc1c.rootIsError_56c7fc1c{background-color:" }, { "theme": "errorBackground", "defaultValue": "#fde7e9" }, { "rawString": ";color:" }, { "theme": "errorText", "defaultValue": "#333333" }, { "rawString": "}.root_56c7fc1c.rootIsError_56c7fc1c .icon_56c7fc1c{color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_56c7fc1c.rootIsBlocked_56c7fc1c{background-color:" }, { "theme": "errorBackground", "defaultValue": "#fde7e9" }, { "rawString": ";color:" }, { "theme": "errorText", "defaultValue": "#333333" }, { "rawString": "}.root_56c7fc1c.rootIsBlocked_56c7fc1c .icon_56c7fc1c{color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_56c7fc1c.rootIsSuccess_56c7fc1c{background-color:" }, { "theme": "successBackground", "defaultValue": "#dff6dd" }, { "rawString": ";color:" }, { "theme": "successText", "defaultValue": "#333333" }, { "rawString": "}.root_56c7fc1c.rootIsSuccess_56c7fc1c .icon_56c7fc1c{color:" }, { "theme": "green", "defaultValue": "#107c10" }, { "rawString": "}.content_56c7fc1c{padding:16px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;box-sizing:border-box}.content_56c7fc1c:before{pointer-events:none;position:absolute;right:0;bottom:0;left:0;top:0;margin:0}@media screen and (-ms-high-contrast:active){.content_56c7fc1c:before{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";content:' '}}@media screen and (-ms-high-contrast:black-on-white){.content_56c7fc1c:before{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";content:' '}}.actionables_56c7fc1c{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;min-width:0}.actionables_56c7fc1c>.dismissal_56c7fc1c{right:0;top:0;position:absolute!important}.actionsOneline_56c7fc1c,.actions_56c7fc1c{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.actionsOneline_56c7fc1c{position:relative}.dismissal_56c7fc1c{min-width:0}.dismissal_56c7fc1c::-moz-focus-inner{border:0}.dismissal_56c7fc1c{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .dismissal_56c7fc1c:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}[dir=ltr] .dismissalOneline_56c7fc1c .dismissal_56c7fc1c{margin-right:-8px}[dir=rtl] .dismissalOneline_56c7fc1c .dismissal_56c7fc1c{margin-left:-8px}.root_56c7fc1c+.root_56c7fc1c{margin-top:6px}html[dir=ltr] .innerTextPadding_56c7fc1c{padding-right:24px}html[dir=rtl] .innerTextPadding_56c7fc1c{padding-left:24px}html[dir=ltr] .innerTextPadding_56c7fc1c .innerText_56c7fc1c>span,html[dir=ltr] .innerTextPadding_56c7fc1c span{padding-right:4px}html[dir=rtl] .innerTextPadding_56c7fc1c .innerText_56c7fc1c>span,html[dir=rtl] .innerTextPadding_56c7fc1c span{padding-left:4px}.multiline_56c7fc1c>.content_56c7fc1c>.actionables_56c7fc1c{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.singleline_56c7fc1c .content_56c7fc1c .icon_56c7fc1c{-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.singleline_56c7fc1c .content_56c7fc1c .actionables_56c7fc1c>.text_56c7fc1c{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.singleline_56c7fc1c .content_56c7fc1c .actionables_56c7fc1c>.text_56c7fc1c .innerTextPadding_56c7fc1c,.singleline_56c7fc1c .content_56c7fc1c .actionables_56c7fc1c>.text_56c7fc1c .innerText_56c7fc1c{max-height:1.3em;line-height:1.3em;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.singleline_56c7fc1c .content_56c7fc1c>.actionables_56c7fc1c{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.root_56c7fc1c .ms-Icon--Cancel{font-size:14px}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 311 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(312)); __export(__webpack_require__(216)); /***/ }, /* 312 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(313); var styles = stylesImport; // We want to make the marquee selection start when the user drags a minimum distance. Otherwise we'd start // the drag even if they just click an item without moving. var MIN_DRAG_DISTANCE = 5; /** * MarqueeSelection component abstracts managing a draggable rectangle which sets items selected/not selected. * Elements which have data-selectable-index attributes are queried and measured once to determine if they * fall within the bounds of the rectangle. The measure is memoized during the drag as a performance optimization * so if the items change sizes while dragging, that could cause incorrect results. */ var MarqueeSelection = (function (_super) { __extends(MarqueeSelection, _super); function MarqueeSelection(props) { var _this = _super.call(this, props) || this; _this.state = { dragRect: undefined }; return _this; } MarqueeSelection.prototype.componentDidMount = function () { this._scrollableParent = Utilities_1.findScrollableParent(this.refs.root); this._scrollableSurface = this._scrollableParent === window ? document.body : this._scrollableParent; // When scroll events come from window, we need to read scrollTop values from the body. this._events.on(this.props.isDraggingConstrainedToRoot ? this.refs.root : this._scrollableSurface, 'mousedown', this._onMouseDown); }; MarqueeSelection.prototype.componentWillUnmount = function () { if (this._autoScroll) { this._autoScroll.dispose(); } }; MarqueeSelection.prototype.render = function () { var _a = this.props, rootProps = _a.rootProps, children = _a.children; var dragRect = this.state.dragRect; return (React.createElement("div", __assign({}, rootProps, { className: Utilities_1.css('ms-MarqueeSelection', styles.root, rootProps.className), ref: 'root' }), children, dragRect && (React.createElement("div", { className: Utilities_1.css('ms-MarqueeSelection-dragMask', styles.dragMask) })), dragRect && (React.createElement("div", { className: Utilities_1.css('ms-MarqueeSelection-box', styles.box), style: dragRect }, React.createElement("div", { className: Utilities_1.css('ms-MarqueeSelection-boxFill', styles.boxFill) }))))); }; /** Determine if the mouse event occured on a scrollbar of the target element. */ MarqueeSelection.prototype._isMouseEventOnScrollbar = function (ev) { var targetElement = ev.target; var targetScrollbarWidth = (targetElement.offsetWidth - targetElement.clientWidth); if (targetScrollbarWidth) { var targetRect = targetElement.getBoundingClientRect(); // Check vertical scroll if (Utilities_1.getRTL()) { if (ev.clientX < (targetRect.left + targetScrollbarWidth)) { return true; } } else { if (ev.clientX > (targetRect.left + targetElement.clientWidth)) { return true; } } // Check horizontal scroll if (ev.clientY > (targetRect.top + targetElement.clientHeight)) { return true; } } return false; }; MarqueeSelection.prototype._onMouseDown = function (ev) { var _a = this.props, isEnabled = _a.isEnabled, onShouldStartSelection = _a.onShouldStartSelection; // Ensure the mousedown is within the boundaries of the target. If not, it may have been a click on a scrollbar. if (this._isMouseEventOnScrollbar(ev)) { return; } if (isEnabled && !this._isDragStartInSelection(ev) && (!onShouldStartSelection || onShouldStartSelection(ev))) { if (this._scrollableSurface && ev.button === 0) { this._selectedIndicies = {}; this._events.on(window, 'mousemove', this._onMouseMove); this._events.on(this._scrollableParent, 'scroll', this._onMouseMove); this._events.on(window, 'click', this._onMouseUp, true); this._autoScroll = new Utilities_1.AutoScroll(this.refs.root); this._scrollTop = this._scrollableSurface.scrollTop; this._rootRect = this.refs.root.getBoundingClientRect(); } } }; MarqueeSelection.prototype._getRootRect = function () { return { left: this._rootRect.left, top: this._rootRect.top + (this._scrollTop - this._scrollableSurface.scrollTop), width: this._rootRect.width, height: this._rootRect.height }; }; MarqueeSelection.prototype._onMouseMove = function (ev) { if (ev.clientX !== undefined) { this._lastMouseEvent = ev; } var rootRect = this._getRootRect(); var currentPoint = { x: ev.clientX - rootRect.left, y: ev.clientY - rootRect.top }; if (!this._dragOrigin) { this._dragOrigin = currentPoint; } if (ev.buttons !== undefined && ev.buttons === 0) { this._onMouseUp(ev); } else { if (this.state.dragRect || Utilities_1.getDistanceBetweenPoints(this._dragOrigin, currentPoint) > MIN_DRAG_DISTANCE) { // We need to constrain the current point to the rootRect boundaries. var constrainedPoint = this.props.isDraggingConstrainedToRoot ? { x: Math.max(0, Math.min(rootRect.width, this._lastMouseEvent.clientX - rootRect.left)), y: Math.max(0, Math.min(rootRect.height, this._lastMouseEvent.clientY - rootRect.top)) } : { x: this._lastMouseEvent.clientX - rootRect.left, y: this._lastMouseEvent.clientY - rootRect.top }; var dragRect = { left: Math.min(this._dragOrigin.x, constrainedPoint.x), top: Math.min(this._dragOrigin.y, constrainedPoint.y), width: Math.abs(constrainedPoint.x - this._dragOrigin.x), height: Math.abs(constrainedPoint.y - this._dragOrigin.y) }; this.setState({ dragRect: dragRect }); this._evaluateSelection(dragRect); } } ev.stopPropagation(); ev.preventDefault(); return false; }; MarqueeSelection.prototype._onMouseUp = function (ev) { this._events.off(window); this._events.off(this._scrollableParent, 'scroll'); this._autoScroll.dispose(); this._autoScroll = this._dragOrigin = this._lastMouseEvent = this._selectedIndicies = this._itemRectCache = undefined; if (this.state.dragRect) { this.setState({ dragRect: undefined }); ev.preventDefault(); ev.stopPropagation(); } }; MarqueeSelection.prototype._isPointInRectangle = function (rectangle, point) { return rectangle.top < point.y && rectangle.bottom > point.y && rectangle.left < point.x && rectangle.right > point.x; }; /** * We do not want to start the marquee if we're trying to marquee * from within an existing marquee selection. */ MarqueeSelection.prototype._isDragStartInSelection = function (ev) { var selection = this.props.selection; if (selection && selection.getSelectedCount() === 0) { return false; } var allElements = this.refs.root.querySelectorAll('[data-selection-index]'); for (var i = 0; i < allElements.length; i++) { var element = allElements[i]; var index = Number(element.getAttribute('data-selection-index')); if (selection.isIndexSelected(index)) { var itemRect = element.getBoundingClientRect(); if (this._isPointInRectangle(itemRect, { x: ev.x, y: ev.y })) { return true; } } } return false; }; MarqueeSelection.prototype._evaluateSelection = function (dragRect) { // Break early if we don't need to evaluate. if (!dragRect) { return; } var selection = this.props.selection; var rootRect = this._getRootRect(); var allElements = this.refs.root.querySelectorAll('[data-selection-index]'); if (!this._itemRectCache) { this._itemRectCache = {}; } // Stop change events, clear selection to re-populate. selection.setChangeEvents(false); selection.setAllSelected(false); for (var i = 0; i < allElements.length; i++) { var element = allElements[i]; var index = element.getAttribute('data-selection-index'); // Pull the memoized rectangle for the item, or the get the rect and memoize. var itemRect = this._itemRectCache[index]; if (!itemRect) { itemRect = element.getBoundingClientRect(); // Normalize the item rect to the dragRect coordinates. itemRect = { left: itemRect.left - rootRect.left, top: itemRect.top - rootRect.top, width: itemRect.width, height: itemRect.height, right: (itemRect.left - rootRect.left) + itemRect.width, bottom: (itemRect.top - rootRect.top) + itemRect.height }; if (itemRect.width > 0 && itemRect.height > 0) { this._itemRectCache[index] = itemRect; } } if (itemRect.top < (dragRect.top + dragRect.height) && itemRect.bottom > dragRect.top && itemRect.left < (dragRect.left + dragRect.width) && itemRect.right > dragRect.left) { this._selectedIndicies[index] = true; } else { delete this._selectedIndicies[index]; } } for (var index in this._selectedIndicies) { if (this._selectedIndicies.hasOwnProperty(index)) { selection.setIndexSelected(Number(index), true, false); } } selection.setChangeEvents(true); }; return MarqueeSelection; }(Utilities_1.BaseComponent)); MarqueeSelection.defaultProps = { rootTagName: 'div', rootProps: {}, isEnabled: true }; __decorate([ Utilities_1.autobind ], MarqueeSelection.prototype, "_onMouseDown", null); exports.MarqueeSelection = MarqueeSelection; /***/ }, /* 313 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_65d2317c', dragMask: 'dragMask_65d2317c', box: 'box_65d2317c', boxFill: 'boxFill_65d2317c', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_65d2317c{position:relative;cursor:default}.dragMask_65d2317c{position:absolute;background:rgba(255,0,0,0);left:0;top:0;right:0;bottom:0}.box_65d2317c{position:absolute;box-sizing:border-box;border:1px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";pointer-events:none}.boxFill_65d2317c{position:absolute;box-sizing:border-box;background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";opacity:.1;left:0;top:0;right:0;bottom:0}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 314 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(315)); /***/ }, /* 315 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(316)); /***/ }, /* 316 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var FocusZone_1 = __webpack_require__(50); var Button_1 = __webpack_require__(154); var Icon_1 = __webpack_require__(141); var stylesImport = __webpack_require__(317); var styles = stylesImport; var Styling_1 = __webpack_require__(68); // The number pixels per indentation level for Nav links. var _indentationSize = 14; // Tne number of pixels of left margin when there is expand/collaps button var _indentWithExpandButton = 28; // Tne number of pixels of left margin when there is expand/collaps button var _indentNoExpandButton = 20; // global var used in _isLinkSelectedKey var _urlResolver; var Nav = (function (_super) { __extends(Nav, _super); function Nav(props) { var _this = _super.call(this, props) || this; _this.state = { isGroupCollapsed: {}, isLinkExpandStateChanged: false, selectedKey: props.initialSelectedKey || props.selectedKey, }; _this._hasExpandButton = false; return _this; } Nav.prototype.render = function () { var _this = this; var _a = this.props, groups = _a.groups, className = _a.className, isOnTop = _a.isOnTop; if (!groups) { return null; } // when this.props.groups[x].name is specified or Any of the link has child link, chevorn Expand/collaps button is shown, // different padding is needed. _hasExpandButton marks this condition. this._hasExpandButton = groups.some(function (group, groupIndex) { return !!group && !!group.name || group.links && group.links.some(function (link, linkIndex) { return !!link && !!link.links && link.links.length > 0; }); }); var groupElements = groups.map(function (group, groupIndex) { return _this._renderGroup(group, groupIndex); }); return (React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.vertical }, React.createElement("nav", { role: 'navigation', className: Utilities_1.css('ms-Nav', styles.root, className, isOnTop && Utilities_1.css('is-onTop', styles.rootIsOnTop, Styling_1.AnimationClassNames.slideRightIn40)) }, groupElements))); }; Object.defineProperty(Nav.prototype, "selectedKey", { get: function () { return this.state.selectedKey; }, enumerable: true, configurable: true }); Nav.prototype._renderAnchorLink = function (link, linkIndex, nestingLevel) { // Determine the appropriate padding to add before this link. // In RTL, the "before" padding will go on the right instead of the left. var isRtl = Utilities_1.getRTL(); var paddingBefore = (_indentationSize * nestingLevel + (this._hasExpandButton ? _indentWithExpandButton : _indentNoExpandButton)).toString(10) + 'px'; return (React.createElement("a", { className: Utilities_1.css('ms-Nav-link', styles.link), style: (_a = {}, _a[isRtl ? 'paddingRight' : 'paddingLeft'] = paddingBefore, _a), href: link.url || 'javascript:', onClick: this._onNavAnchorLinkClicked.bind(this, link), "aria-label": link.ariaLabel, title: link.title || link.name, target: link.target }, link.iconClassName && (React.createElement(Icon_1.Icon, { className: Utilities_1.css(link.iconClassName, styles.iconLink), iconName: 'iconLink' })), this.props.onRenderLink(link))); var _a; }; Nav.prototype._renderButtonLink = function (link, linkIndex) { return (React.createElement(Button_1.CommandButton, { className: Utilities_1.css('ms-Nav-link ms-Nav-linkButton', styles.link, (_a = { 'isOnExpanded': this._hasExpandButton }, _a[styles.linkIsOnExpanded] = this._hasExpandButton, _a)), href: link.url, iconProps: { iconName: link.icon }, description: link.title || link.name, onClick: this._onNavButtonLinkClicked.bind(this, link) }, link.name)); var _a; }; Nav.prototype._renderCompositeLink = function (link, linkIndex, nestingLevel) { var isLinkSelected = this._isLinkSelected(link); return (React.createElement("div", { key: link.key || linkIndex, className: Utilities_1.css('ms-Nav-compositeLink', styles.compositeLink, (_a = { ' is-expanded': link.isExpanded, 'is-selected': isLinkSelected }, _a[styles.compositeLinkIsExpanded] = link.isExpanded, _a[styles.compositeLinkIsSelected] = isLinkSelected, _a)) }, (nestingLevel === 0 && link.links && link.links.length > 0 ? React.createElement("button", { className: Utilities_1.css('ms-Nav-chevronButton ms-Nav-chevronButton--link', styles.chevronButton, styles.chevronButtonLink), onClick: this._onLinkExpandClicked.bind(this, link), "aria-label": this.props.expandButtonAriaLabel, "aria-expanded": link.isExpanded ? 'true' : 'false' }, React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Nav-chevron', styles.chevronIcon, link.isExpanded), iconName: 'chevronDown' })) : null), !!link.onClick ? this._renderButtonLink(link, linkIndex) : this._renderAnchorLink(link, linkIndex, nestingLevel))); var _a; }; Nav.prototype._renderLink = function (link, linkIndex, nestingLevel) { return (React.createElement("li", { key: link.key || linkIndex, role: 'listitem', className: Utilities_1.css(styles.navItem) }, this._renderCompositeLink(link, linkIndex, nestingLevel), (link.isExpanded ? this._renderLinks(link.links, ++nestingLevel) : null))); }; Nav.prototype._renderLinks = function (links, nestingLevel) { var _this = this; if (!links || !links.length) { return null; } var linkElements = links.map(function (link, linkIndex) { return _this._renderLink(link, linkIndex, nestingLevel); }); return (React.createElement("ul", { role: 'list', "aria-label": this.props.ariaLabel, className: Utilities_1.css(styles.navItems) }, linkElements)); }; Nav.prototype._renderGroup = function (group, groupIndex) { var isGroupExpanded = !this.state.isGroupCollapsed[group.name]; return (React.createElement("div", { key: groupIndex, className: Utilities_1.css('ms-Nav-group', styles.group, (_a = { 'is-expanded': isGroupExpanded }, _a[styles.groupIsExpanded] = isGroupExpanded, _a)) }, (group.name ? React.createElement("button", { className: Utilities_1.css('ms-Nav-chevronButton ms-Nav-chevronButton--group ms-Nav-groupHeaderFontSize', styles.chevronButton, styles.chevronButtonIsGroup, styles.groupHeaderFontSize), onClick: this._onGroupHeaderClicked.bind(this, group.name) }, React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Nav-chevron', styles.chevronIcon, isGroupExpanded && styles.chevronIsExpanded), iconName: 'chevronDown' }), group.name) : null), React.createElement("div", { className: Utilities_1.css('ms-Nav-groupContent', Styling_1.AnimationClassNames.slideDownIn20, styles.groupContent) }, this._renderLinks(group.links, 0 /* nestingLevel */)))); var _a; }; Nav.prototype._onGroupHeaderClicked = function (groupKey, ev) { var isGroupCollapsed = this.state.isGroupCollapsed; isGroupCollapsed[groupKey] = !isGroupCollapsed[groupKey]; this.setState({ isGroupCollapsed: isGroupCollapsed }); ev.preventDefault(); ev.stopPropagation(); }; Nav.prototype._onLinkExpandClicked = function (link, ev) { link.isExpanded = !link.isExpanded; this.setState({ isLinkExpandStateChanged: true }); ev.preventDefault(); ev.stopPropagation(); }; Nav.prototype._onNavAnchorLinkClicked = function (link, ev) { if (this.props.onLinkClick) { this.props.onLinkClick(ev, link); } this.setState({ selectedKey: link.key }); }; Nav.prototype._onNavButtonLinkClicked = function (link, ev) { if (link.onClick) { link.onClick(ev, link); } this.setState({ selectedKey: link.key }); }; Nav.prototype._isLinkSelected = function (link) { // if caller passes in selectedKey, use it as first choice or // if current state.selectedKey (from addressbar) is match to the link if (this.props.selectedKey !== undefined) { return link.key === this.props.selectedKey; } else if (this.state.selectedKey !== undefined && link.key === this.state.selectedKey) { return true; } // resolve is not supported for ssr if (typeof (window) === 'undefined') { return false; } if (!link.url) { return false; } _urlResolver = _urlResolver || document.createElement('a'); _urlResolver.href = link.url || ''; var target = _urlResolver.href; if (location.href === target) { return true; } if (location.protocol + '//' + location.host + location.pathname === target) { return true; } if (location.hash) { // Match the hash to the url. if (location.hash === link.url) { return true; } // Match a rebased url. (e.g. #foo becomes http://hostname/foo) _urlResolver.href = location.hash.substring(1); return _urlResolver.href === target; } return false; }; return Nav; }(Utilities_1.BaseComponent)); Nav.defaultProps = { groups: null, onRenderLink: function (link) { return (React.createElement("span", { className: Utilities_1.css('ms-Nav-linkText', styles.linkText) }, link.name)); } }; exports.Nav = Nav; /***/ }, /* 317 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_0f532585', rootIsOnTop: 'rootIsOnTop_0f532585', navItems: 'navItems_0f532585', navItem: 'navItem_0f532585', groupContent: 'groupContent_0f532585', group: 'group_0f532585', groupIsExpanded: 'groupIsExpanded_0f532585', icon: 'icon_0f532585', iconLink: 'iconLink_0f532585', chevronButton: 'chevronButton_0f532585', chevronButtonIsGroup: 'chevronButtonIsGroup_0f532585', chevronIcon: 'chevronIcon_0f532585', chevronIsExpanded: 'chevronIsExpanded_0f532585', linkText: 'linkText_0f532585', compositeLink: 'compositeLink_0f532585', chevronButtonLink: 'chevronButtonLink_0f532585', compositeLinkIsExpanded: 'compositeLinkIsExpanded_0f532585', compositeLinkIsSelected: 'compositeLinkIsSelected_0f532585', link: 'link_0f532585', groupHeaderFontSize: 'groupHeaderFontSize_0f532585', chevronButtonGroup: 'chevronButtonGroup_0f532585', linkIsOnExpanded: 'linkIsOnExpanded_0f532585', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_0f532585{overflow-y:auto;-webkit-overflow-scrolling:touch;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rootIsOnTop_0f532585{position:absolute}.navItems_0f532585{list-style-type:none}.navItems_0f532585,.navItems_0f532585>.navItem_0f532585{padding:0}.groupContent_0f532585{display:none;margin-bottom:40px}.group_0f532585.groupIsExpanded_0f532585 .groupContent_0f532585{display:block}.icon_0f532585{padding:0;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear}[dir=ltr] .iconLink_0f532585{margin-right:4px}[dir=rtl] .iconLink_0f532585{margin-left:4px}.chevronButton_0f532585{display:block;font-weight:400;font-size:12px;line-height:36px;margin:5px 0;padding:0 20px 0 28px;background:0 0;border:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}html[dir=ltr] .chevronButton_0f532585{text-align:left}html[dir=rtl] .chevronButton_0f532585{text-align:right}html[dir=rtl] .chevronButton_0f532585{padding:0 28px 0 20px}.chevronButton_0f532585:visited{color:inherit}.chevronButton_0f532585:hover{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "neutralLighterAlt", "defaultValue": "#f8f8f8" }, { "rawString": "}.chevronButton_0f532585.chevronButtonIsGroup_0f532585{width:100%;height:36px;border-bottom:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.chevronIcon_0f532585{position:absolute;height:36px;line-height:36px;font-size:12px;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear}[dir=ltr] .chevronIcon_0f532585{left:8px}[dir=rtl] .chevronIcon_0f532585{right:8px}.chevronIsExpanded_0f532585{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.linkText_0f532585{vertical-align:middle}.compositeLink_0f532585{display:block;position:relative;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.compositeLink_0f532585 .chevronButton_0f532585.chevronButtonLink_0f532585{display:block;width:26px;height:34px;position:absolute;top:1px;z-index:1;padding:0;margin:0}[dir=ltr] .compositeLink_0f532585 .chevronButton_0f532585.chevronButtonLink_0f532585{left:1px}[dir=rtl] .compositeLink_0f532585 .chevronButton_0f532585.chevronButtonLink_0f532585{right:1px}.compositeLink_0f532585 .chevronButton_0f532585.chevronButtonLink_0f532585 .chevronIcon_0f532585{top:0}.compositeLink_0f532585 a{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.compositeLink_0f532585:hover .chevronButton_0f532585,.compositeLink_0f532585:hover a{background:" }, { "theme": "neutralLighterAlt", "defaultValue": "#f8f8f8" }, { "rawString": ";color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.compositeLink_0f532585.compositeLinkIsExpanded_0f532585 .chevronIcon_0f532585{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.compositeLink_0f532585.compositeLinkIsSelected_0f532585 .chevronButton_0f532585,.compositeLink_0f532585.compositeLinkIsSelected_0f532585 a{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.compositeLink_0f532585.compositeLinkIsSelected_0f532585 .chevronButton_0f532585:after,.compositeLink_0f532585.compositeLinkIsSelected_0f532585 a:after{content:'';position:absolute;top:0;bottom:0}html[dir=ltr] .compositeLink_0f532585.compositeLinkIsSelected_0f532585 .chevronButton_0f532585:after,html[dir=ltr] .compositeLink_0f532585.compositeLinkIsSelected_0f532585 a:after{border-left:2px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}html[dir=rtl] .compositeLink_0f532585.compositeLinkIsSelected_0f532585 .chevronButton_0f532585:after,html[dir=rtl] .compositeLink_0f532585.compositeLinkIsSelected_0f532585 a:after{border-right:2px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}[dir=ltr] .compositeLink_0f532585.compositeLinkIsSelected_0f532585 .chevronButton_0f532585:after,[dir=ltr] .compositeLink_0f532585.compositeLinkIsSelected_0f532585 a:after{right:0}[dir=rtl] .compositeLink_0f532585.compositeLinkIsSelected_0f532585 .chevronButton_0f532585:after,[dir=rtl] .compositeLink_0f532585.compositeLinkIsSelected_0f532585 a:after{left:0}[dir=ltr] .compositeLink_0f532585.compositeLinkIsSelected_0f532585 .chevronButton_0f532585:after,[dir=ltr] .compositeLink_0f532585.compositeLinkIsSelected_0f532585 a:after{left:0}[dir=rtl] .compositeLink_0f532585.compositeLinkIsSelected_0f532585 .chevronButton_0f532585:after,[dir=rtl] .compositeLink_0f532585.compositeLinkIsSelected_0f532585 a:after{right:0}.link_0f532585{display:block;position:relative;height:36px;line-height:36px;text-decoration:none;padding:0 20px;cursor:pointer;text-overflow:ellipsis;text-decoration:none;white-space:nowrap;overflow:hidden}.groupHeaderFontSize_0f532585{font-size:17px;font-weight:300}.chevronButtonGroup_0f532585::-moz-focus-inner,.chevronButtonLink_0f532585::-moz-focus-inner,.chevronButton_0f532585::-moz-focus-inner,.link_0f532585::-moz-focus-inner{border:0}.chevronButtonGroup_0f532585,.chevronButtonLink_0f532585,.chevronButton_0f532585,.link_0f532585{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .chevronButtonGroup_0f532585:focus:after,.ms-Fabric.is-focusVisible .chevronButtonLink_0f532585:focus:after,.ms-Fabric.is-focusVisible .chevronButton_0f532585:focus:after,.ms-Fabric.is-focusVisible .link_0f532585:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}[dir=ltr] .root_0f532585 .link_0f532585{padding-left:20px}[dir=rtl] .root_0f532585 .link_0f532585{padding-right:20px}.root_0f532585 .link_0f532585 .ms-Button-label{font-size:14px;font-weight:400;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}[dir=ltr] .root_0f532585 .link_0f532585.linkIsOnExpanded_0f532585{padding-left:28px}[dir=rtl] .root_0f532585 .link_0f532585.linkIsOnExpanded_0f532585{padding-right:28px}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 318 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(319)); /***/ }, /* 319 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(320)); __export(__webpack_require__(322)); __export(__webpack_require__(323)); __export(__webpack_require__(324)); __export(__webpack_require__(326)); __export(__webpack_require__(331)); __export(__webpack_require__(332)); /***/ }, /* 320 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var Button_1 = __webpack_require__(154); var Spinner_1 = __webpack_require__(242); var stylesImport = __webpack_require__(321); var styles = stylesImport; var SuggestionsItem = (function (_super) { __extends(SuggestionsItem, _super); function SuggestionsItem() { return _super !== null && _super.apply(this, arguments) || this; } SuggestionsItem.prototype.render = function () { var _a = this.props, suggestionModel = _a.suggestionModel, RenderSuggestion = _a.RenderSuggestion, onClick = _a.onClick, className = _a.className, onRemoveItem = _a.onRemoveItem, showRemoveButton = _a.showRemoveButton, id = _a.id; var itemProps = Utilities_1.assign({}, suggestionModel.item, { onRemoveItem: onRemoveItem }); return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-item', styles.suggestionsItem, (_b = {}, _b['is-suggested ' + styles.suggestionsItemIsSuggested] = suggestionModel.selected, _b), className) }, React.createElement(Button_1.CommandButton, { onClick: onClick, className: Utilities_1.css('ms-Suggestions-itemButton', styles.itemButton) }, RenderSuggestion(suggestionModel.item, this.props)), this.props.showRemoveButton ? (React.createElement(Button_1.IconButton, { iconProps: { iconName: 'Cancel' }, title: 'Remove', ariaLabel: 'Remove', onClick: onRemoveItem, className: Utilities_1.css('ms-Suggestions-closeButton', styles.closeButton) })) : (null))); var _b; }; return SuggestionsItem; }(Utilities_1.BaseComponent)); exports.SuggestionsItem = SuggestionsItem; var Suggestions = (function (_super) { __extends(Suggestions, _super); function Suggestions(suggestionsProps) { var _this = _super.call(this, suggestionsProps) || this; _this.SuggestionsItemOfProperType = SuggestionsItem; _this._getMoreResults = _this._getMoreResults.bind(_this); return _this; } Suggestions.prototype.componentDidUpdate = function () { this.scrollSelected(); }; Suggestions.prototype.render = function () { var _a = this.props, suggestionsHeaderText = _a.suggestionsHeaderText, mostRecentlyUsedHeaderText = _a.mostRecentlyUsedHeaderText, searchForMoreText = _a.searchForMoreText, className = _a.className, moreSuggestionsAvailable = _a.moreSuggestionsAvailable, noResultsFoundText = _a.noResultsFoundText, suggestions = _a.suggestions, isLoading = _a.isLoading, isSearching = _a.isSearching, loadingText = _a.loadingText, onRenderNoResultFound = _a.onRenderNoResultFound, searchingText = _a.searchingText, isMostRecentlyUsedVisible = _a.isMostRecentlyUsedVisible, resultsMaximumNumber = _a.resultsMaximumNumber, resultsFooterFull = _a.resultsFooterFull, resultsFooter = _a.resultsFooter, isResultsFooterVisible = _a.isResultsFooterVisible, showRemoveButtons = _a.showRemoveButtons; var noResults = function () { return noResultsFoundText ? React.createElement("div", { className: Utilities_1.css('ms-Suggestions-none', styles.suggestionsNone) }, noResultsFoundText) : null; }; var headerText = isMostRecentlyUsedVisible && mostRecentlyUsedHeaderText ? mostRecentlyUsedHeaderText : null; var footerTitle = (suggestions.length >= resultsMaximumNumber) ? resultsFooterFull : resultsFooter; return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions', className ? className : '', styles.root) }, headerText ? (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-title', styles.suggestionsTitle) }, headerText)) : (null), isLoading && (React.createElement(Spinner_1.Spinner, { className: Utilities_1.css('ms-Suggestions-spinner', styles.suggestionsSpinner), label: loadingText })), (!suggestions || !suggestions.length) && !isLoading ? (onRenderNoResultFound ? onRenderNoResultFound(null, noResults) : noResults()) : this._renderSuggestions(), searchForMoreText && moreSuggestionsAvailable && (React.createElement(Button_1.CommandButton, { componentRef: this._resolveRef('_searchForMoreButton'), className: Utilities_1.css('ms-SearchMore-button', styles.searchMoreButton), iconProps: { iconName: 'Search' }, onClick: this._getMoreResults.bind(this) }, searchForMoreText)), isSearching ? (React.createElement(Spinner_1.Spinner, { className: Utilities_1.css('ms-Suggestions-spinner', styles.suggestionsSpinner), label: searchingText })) : (null), !moreSuggestionsAvailable && !isMostRecentlyUsedVisible && !isSearching ? (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-title', styles.suggestionsTitle) }, footerTitle(this.props))) : (null))); }; Suggestions.prototype.focusSearchForMoreButton = function () { if (this._searchForMoreButton) { this._searchForMoreButton.focus(); } }; // TODO get the element to scroll into view properly regardless of direction. Suggestions.prototype.scrollSelected = function () { if (this._selectedElement) { this._selectedElement.scrollIntoView(false); } }; Suggestions.prototype._renderSuggestions = function () { var _this = this; var _a = this.props, suggestions = _a.suggestions, onRenderSuggestion = _a.onRenderSuggestion, suggestionsItemClassName = _a.suggestionsItemClassName, resultsMaximumNumber = _a.resultsMaximumNumber, showRemoveButtons = _a.showRemoveButtons; var TypedSuggestionsItem = this.SuggestionsItemOfProperType; if (resultsMaximumNumber) { suggestions = suggestions.slice(0, resultsMaximumNumber); } return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-container', styles.suggestionsContainer), id: 'suggestion-list', role: 'menu' }, suggestions.map(function (suggestion, index) { return React.createElement("div", { ref: _this._resolveRef(suggestion.selected ? '_selectedElement' : ''), key: index, id: 'sug-' + index, role: 'menuitem' }, React.createElement(TypedSuggestionsItem, { id: 'sug-item' + index, suggestionModel: suggestion, RenderSuggestion: onRenderSuggestion, onClick: function (ev) { _this.props.onSuggestionClick(ev, suggestion.item, index); }, className: suggestionsItemClassName, showRemoveButton: showRemoveButtons, onRemoveItem: function (ev) { _this.props.onSuggestionRemove(ev, suggestion.item, index); ev.stopPropagation(); } })); }))); }; Suggestions.prototype._getMoreResults = function () { if (this.props.onGetMoreResults) { this.props.onGetMoreResults(); } }; return Suggestions; }(Utilities_1.BaseComponent)); exports.Suggestions = Suggestions; /***/ }, /* 321 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_bc3cce41', suggestionsItem: 'suggestionsItem_bc3cce41', suggestionsItemIsSuggested: 'suggestionsItemIsSuggested_bc3cce41', closeButton: 'closeButton_bc3cce41', searchMoreButton: 'searchMoreButton_bc3cce41', suggestionsTitle: 'suggestionsTitle_bc3cce41', suggestionsContainer: 'suggestionsContainer_bc3cce41', suggestionsNone: 'suggestionsNone_bc3cce41', suggestionsSpinner: 'suggestionsSpinner_bc3cce41', itemButton: 'itemButton_bc3cce41', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_bc3cce41{min-width:260px}.suggestionsItem_bc3cce41{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;box-sizing:border-box;width:100%;position:relative}.suggestionsItem_bc3cce41:hover{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.suggestionsItem_bc3cce41.suggestionsItemIsSuggested_bc3cce41{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.suggestionsItem_bc3cce41.suggestionsItemIsSuggested_bc3cce41:hover{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.suggestionsItem_bc3cce41.suggestionsItemIsSuggested_bc3cce41 .closeButton_bc3cce41:hover{background:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.searchMoreButton_bc3cce41{background:0 0;border:0;cursor:pointer;margin:0;position:relative;border-top:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";height:40px;width:100%}[dir=ltr] .searchMoreButton_bc3cce41{padding-left:8px}[dir=rtl] .searchMoreButton_bc3cce41{padding-right:8px}[dir=ltr] .searchMoreButton_bc3cce41{text-align:left}[dir=rtl] .searchMoreButton_bc3cce41{text-align:right}.searchMoreButton_bc3cce41:hover{background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";cursor:pointer}.searchMoreButton_bc3cce41:active,.searchMoreButton_bc3cce41:focus{background-color:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.searchMoreButton_bc3cce41 .ms-Button-icon{font-size:16px;width:25px}.searchMoreButton_bc3cce41 .ms-Button-label{margin:0 4px 0 9px}html[dir=rtl] .searchMoreButton_bc3cce41 .ms-Button-label{margin:0 9px 0 4px}.suggestionsTitle_bc3cce41{padding:0 12px;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";font-size:12px;text-transform:uppercase;line-height:40px;border-bottom:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.suggestionsContainer_bc3cce41{overflow-y:auto;overflow-x:hidden;max-height:300px;border-bottom:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.suggestionsNone_bc3cce41{text-align:center;color:" }, { "theme": "info", "defaultValue": "#767676" }, { "rawString": ";font-size:12px;line-height:30px}.suggestionsSpinner_bc3cce41{margin:5px 0;white-space:nowrap;line-height:20px}html[dir=ltr] .suggestionsSpinner_bc3cce41{padding-left:14px}html[dir=rtl] .suggestionsSpinner_bc3cce41{padding-right:14px}html[dir=ltr] .suggestionsSpinner_bc3cce41{text-align:left}html[dir=rtl] .suggestionsSpinner_bc3cce41{text-align:right}.suggestionsSpinner_bc3cce41 .ms-Spinner-circle{display:inline-block;vertical-align:middle}.suggestionsSpinner_bc3cce41 .ms-Spinner-label{display:inline-block;margin:0 10px 0 16px;vertical-align:middle}html[dir=rtl] .suggestionsSpinner_bc3cce41 .ms-Spinner-label{margin:0 16px 0 10px}.itemButton_bc3cce41{height:100%;width:100%;padding:7px 12px}.closeButton_bc3cce41{padding:0 4px;height:auto;width:32px}.closeButton_bc3cce41:hover{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 322 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var SuggestionsController = (function () { function SuggestionsController() { this.suggestions = []; this.currentIndex = -1; } SuggestionsController.prototype.updateSuggestions = function (newSuggestions, selectedIndex) { if (newSuggestions && newSuggestions.length > 0) { this.suggestions = this._convertSuggestionsToSuggestionItems(newSuggestions); this.currentIndex = 0; if (selectedIndex !== undefined) { this.suggestions[selectedIndex].selected = true; this.currentSuggestion = this.suggestions[selectedIndex]; } } else { this.suggestions = []; this.currentIndex = -1; this.currentSuggestion = undefined; } }; /** * Increments the suggestion index and gets the next suggestion in the list. */ SuggestionsController.prototype.nextSuggestion = function () { if (this.suggestions && this.suggestions.length) { if (this.currentIndex < (this.suggestions.length - 1)) { this._setSelectedSuggestion(this.currentIndex + 1); return true; } else if (this.currentIndex === (this.suggestions.length - 1)) { this._setSelectedSuggestion(0); return true; } } return false; }; /** * Decrements the suggestion index and gets the previous suggestion in the list. */ SuggestionsController.prototype.previousSuggestion = function () { if (this.suggestions && this.suggestions.length) { if (this.currentIndex > 0) { this._setSelectedSuggestion(this.currentIndex - 1); return true; } else if (this.currentIndex === 0) { this._setSelectedSuggestion(this.suggestions.length - 1); return true; } } return false; }; SuggestionsController.prototype.getSuggestions = function () { return this.suggestions; }; SuggestionsController.prototype.getCurrentItem = function () { return this.currentSuggestion; }; SuggestionsController.prototype.getSuggestionAtIndex = function (index) { return this.suggestions[index]; }; SuggestionsController.prototype.hasSelectedSuggestion = function () { return this.currentSuggestion ? true : false; }; SuggestionsController.prototype.removeSuggestion = function (index) { this.suggestions.splice(index, 1); }; SuggestionsController.prototype._convertSuggestionsToSuggestionItems = function (suggestions) { var converted = []; suggestions.forEach(function (suggestion) { return converted.push({ item: suggestion, selected: false }); }); return converted; }; SuggestionsController.prototype._setSelectedSuggestion = function (index) { if (index > this.suggestions.length - 1 || index < 0) { this.currentIndex = 0; this.currentSuggestion.selected = false; this.currentSuggestion = this.suggestions[0]; this.currentSuggestion.selected = true; } else { if (this.currentIndex > -1) { this.suggestions[this.currentIndex].selected = false; } this.suggestions[index].selected = true; this.currentIndex = index; this.currentSuggestion = this.suggestions[index]; } }; return SuggestionsController; }()); exports.SuggestionsController = SuggestionsController; /***/ }, /* 323 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var SELECTION_FORWARD = 'forward'; var SELECTION_BACKWARD = 'backward'; var BaseAutoFill = (function (_super) { __extends(BaseAutoFill, _super); function BaseAutoFill(props) { var _this = _super.call(this, props) || this; _this._autoFillEnabled = true; _this._value = ''; _this.state = { displayValue: '' }; return _this; } Object.defineProperty(BaseAutoFill.prototype, "cursorLocation", { get: function () { if (this._inputElement) { var inputElement = this._inputElement; if (inputElement.selectionDirection !== SELECTION_FORWARD) { return inputElement.selectionEnd; } else { return inputElement.selectionStart; } } else { return -1; } }, enumerable: true, configurable: true }); Object.defineProperty(BaseAutoFill.prototype, "isValueSelected", { get: function () { return this.inputElement.selectionStart !== this.inputElement.selectionEnd; }, enumerable: true, configurable: true }); Object.defineProperty(BaseAutoFill.prototype, "value", { get: function () { return this._value; }, enumerable: true, configurable: true }); Object.defineProperty(BaseAutoFill.prototype, "selectionStart", { get: function () { return this._inputElement ? this._inputElement.selectionStart : -1; }, enumerable: true, configurable: true }); Object.defineProperty(BaseAutoFill.prototype, "selectionEnd", { get: function () { return this._inputElement ? this._inputElement.selectionEnd : -1; }, enumerable: true, configurable: true }); Object.defineProperty(BaseAutoFill.prototype, "inputElement", { get: function () { return this._inputElement; }, enumerable: true, configurable: true }); BaseAutoFill.prototype.componentWillReceiveProps = function (nextProps) { if (this._autoFillEnabled && this._doesTextStartWith(nextProps.suggestedDisplayValue, this._value)) { this.setState({ displayValue: nextProps.suggestedDisplayValue }); } }; BaseAutoFill.prototype.componentDidUpdate = function () { var value = this._value; var suggestedDisplayValue = this.props.suggestedDisplayValue; var differenceIndex = 0; if (this._autoFillEnabled && value && suggestedDisplayValue && this._doesTextStartWith(suggestedDisplayValue, value)) { while (differenceIndex < value.length && value[differenceIndex].toLocaleLowerCase() === suggestedDisplayValue[differenceIndex].toLocaleLowerCase()) { differenceIndex++; } if (differenceIndex > 0) { this._inputElement.setSelectionRange(differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD); } } }; BaseAutoFill.prototype.render = function () { var displayValue = this.state.displayValue; var nativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.inputProperties); return React.createElement("input", __assign({}, nativeProps, { ref: this._resolveRef('_inputElement'), value: displayValue, autoCapitalize: 'off', autoComplete: 'off', onChange: this._onChange, onKeyDown: this._onKeyDown, onClick: this._onClick })); }; BaseAutoFill.prototype.focus = function () { this._inputElement.focus(); }; BaseAutoFill.prototype.clear = function () { this._autoFillEnabled = true; this._updateValue(''); this._inputElement.setSelectionRange(0, 0); }; BaseAutoFill.prototype._onClick = function () { if (this._value && this._value !== '' && this._autoFillEnabled) { this._autoFillEnabled = false; } }; BaseAutoFill.prototype._onKeyDown = function (ev) { switch (ev.which) { case Utilities_1.KeyCodes.backspace: this._autoFillEnabled = false; break; case Utilities_1.KeyCodes.left: if (this._autoFillEnabled) { this._autoFillEnabled = false; } break; case Utilities_1.KeyCodes.right: if (this._autoFillEnabled) { this._autoFillEnabled = false; } break; default: if (!this._autoFillEnabled) { if (this.props.enableAutoFillOnKeyPress.indexOf(ev.which) !== -1) { this._autoFillEnabled = true; } } break; } }; BaseAutoFill.prototype._onChange = function (ev) { var value = ev.target.value; if (value && ev.target.selectionStart === value.length && !this._autoFillEnabled && value.length > this._value.length) { this._autoFillEnabled = true; } this._updateValue(value); }; BaseAutoFill.prototype._notifyInputChange = function (newValue) { if (this.props.onInputValueChange) { this.props.onInputValueChange(newValue); } }; BaseAutoFill.prototype._updateValue = function (newValue) { var _this = this; this._value = newValue; var displayValue = newValue; if (this.props.suggestedDisplayValue && this._doesTextStartWith(this.props.suggestedDisplayValue, displayValue) && this._autoFillEnabled) { displayValue = this.props.suggestedDisplayValue; } this.setState({ displayValue: newValue }, function () { return _this._notifyInputChange(newValue); }); }; BaseAutoFill.prototype._doesTextStartWith = function (text, startWith) { if (!text || !startWith) { return false; } return text.toLocaleLowerCase().indexOf(startWith.toLocaleLowerCase()) === 0; }; return BaseAutoFill; }(Utilities_1.BaseComponent)); BaseAutoFill.defaultProps = { enableAutoFillOnKeyPress: [Utilities_1.KeyCodes.down, Utilities_1.KeyCodes.up] }; __decorate([ Utilities_1.autobind ], BaseAutoFill.prototype, "_onClick", null); __decorate([ Utilities_1.autobind ], BaseAutoFill.prototype, "_onKeyDown", null); __decorate([ Utilities_1.autobind ], BaseAutoFill.prototype, "_onChange", null); exports.BaseAutoFill = BaseAutoFill; /***/ }, /* 324 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var FocusZone_1 = __webpack_require__(50); var Callout_1 = __webpack_require__(59); var index_1 = __webpack_require__(216); var Suggestions_1 = __webpack_require__(320); var SuggestionsController_1 = __webpack_require__(322); var BaseAutoFill_1 = __webpack_require__(323); var stylesImport = __webpack_require__(325); var styles = stylesImport; var BasePicker = (function (_super) { __extends(BasePicker, _super); function BasePicker(basePickerProps) { var _this = _super.call(this, basePickerProps) || this; _this.SuggestionOfProperType = Suggestions_1.Suggestions; var items = basePickerProps.defaultSelectedItems || []; _this.suggestionStore = new SuggestionsController_1.SuggestionsController(); _this.selection = new index_1.Selection({ onSelectionChanged: function () { return _this.onSelectionChange(); } }); _this.selection.setItems(items); _this.state = { items: items, suggestedDisplayValue: '', isMostRecentlyUsedVisible: false, moreSuggestionsAvailable: false, isSearching: false }; return _this; } Object.defineProperty(BasePicker.prototype, "items", { get: function () { return this.state.items; }, enumerable: true, configurable: true }); BasePicker.prototype.componentWillUpdate = function (newProps, newState) { if (newState.items && newState.items !== this.state.items) { this.selection.setItems(newState.items); } }; BasePicker.prototype.componentDidMount = function () { this.selection.setItems(this.state.items); }; BasePicker.prototype.focus = function () { this.focusZone.focus(); }; BasePicker.prototype.dismissSuggestions = function () { this.setState({ suggestionsVisible: false }); }; BasePicker.prototype.completeSuggestion = function () { if (this.suggestionStore.hasSelectedSuggestion()) { this.addItem(this.suggestionStore.currentSuggestion.item); this.updateValue(''); this.input.clear(); } }; BasePicker.prototype.render = function () { var suggestedDisplayValue = this.state.suggestedDisplayValue; var _a = this.props, className = _a.className, inputProps = _a.inputProps, disabled = _a.disabled; return (React.createElement("div", { ref: this._resolveRef('root'), className: Utilities_1.css('ms-BasePicker', className ? className : ''), onKeyDown: this.onKeyDown }, React.createElement(FocusZone_1.FocusZone, { ref: this._resolveRef('focusZone'), direction: FocusZone_1.FocusZoneDirection.horizontal }, React.createElement(index_1.SelectionZone, { selection: this.selection, selectionMode: index_1.SelectionMode.multiple }, React.createElement("div", { className: Utilities_1.css('ms-BasePicker-text', styles.pickerText) }, this.renderItems(), React.createElement(BaseAutoFill_1.BaseAutoFill, __assign({}, inputProps, { className: Utilities_1.css('ms-BasePicker-input', styles.pickerInput), ref: this._resolveRef('input'), onFocus: this.onInputFocus, onInputValueChange: this.onInputChange, suggestedDisplayValue: suggestedDisplayValue, "aria-activedescendant": 'sug-' + this.suggestionStore.currentIndex, "aria-owns": 'suggestion-list', "aria-expanded": 'true', "aria-haspopup": 'true', autoCapitalize: 'off', autoComplete: 'off', role: 'combobox', disabled: disabled }))))), this.renderSuggestions())); }; BasePicker.prototype.renderSuggestions = function () { var TypedSuggestion = this.SuggestionOfProperType; return this.state.suggestionsVisible ? (React.createElement(Callout_1.Callout, { isBeakVisible: false, gapSpace: 0, targetElement: this.input.inputElement, onDismiss: this.dismissSuggestions, directionalHint: Utilities_1.getRTL() ? Callout_1.DirectionalHint.bottomRightEdge : Callout_1.DirectionalHint.bottomLeftEdge }, React.createElement(TypedSuggestion, __assign({ onRenderSuggestion: this.props.onRenderSuggestionsItem, onSuggestionClick: this.onSuggestionClick, onSuggestionRemove: this.onSuggestionRemove, suggestions: this.suggestionStore.getSuggestions(), ref: this._resolveRef('suggestionElement'), onGetMoreResults: this.onGetMoreResults, moreSuggestionsAvailable: this.state.moreSuggestionsAvailable, isLoading: this.state.suggestionsLoading, isSearching: this.state.isSearching, isMostRecentlyUsedVisible: this.state.isMostRecentlyUsedVisible, isResultsFooterVisible: this.state.isResultsFooterVisible }, this.props.pickerSuggestionsProps)))) : (null); }; BasePicker.prototype.renderItems = function () { var _this = this; var onRenderItem = this.props.onRenderItem; var items = this.state.items; return items.map(function (item, index) { return onRenderItem({ item: item, index: index, key: index + _this._getTextFromItem(item), selected: _this.selection.isIndexSelected(index), onRemoveItem: function () { return _this.removeItem(item); }, onItemChange: _this.onItemChange }); }); }; BasePicker.prototype.resetFocus = function (index) { var items = this.state.items; if (items.length) { var newEl = this.root.querySelectorAll('[data-selection-index]')[Math.min(index, items.length - 1)]; if (newEl) { this.focusZone.focusElement(newEl); } } else { this.input.focus(); } }; BasePicker.prototype.onSuggestionSelect = function () { if (this.suggestionStore.currentSuggestion) { var currentValue = this.input.value; var itemValue = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, currentValue); this.setState({ suggestedDisplayValue: itemValue }); } }; BasePicker.prototype.onSelectionChange = function () { this.forceUpdate(); }; BasePicker.prototype.updateSuggestions = function (suggestions) { this.suggestionStore.updateSuggestions(suggestions, 0); this.forceUpdate(); }; BasePicker.prototype.onEmptyInputFocus = function () { var suggestions = this.props.onEmptyInputFocus(this.state.items); this.updateSuggestionsList(suggestions); }; BasePicker.prototype.updateValue = function (updatedValue) { var suggestions = this.props.onResolveSuggestions(updatedValue, this.state.items); this.updateSuggestionsList(suggestions, updatedValue); }; BasePicker.prototype.updateSuggestionsList = function (suggestions, updatedValue) { var _this = this; var suggestionsArray = suggestions; var suggestionsPromiseLike = suggestions; // Check to see if the returned value is an array, if it is then just pass it into the next function. // If the returned value is not an array then check to see if it's a promise or PromiseLike. If it is then resolve it asynchronously. if (Array.isArray(suggestionsArray)) { if (updatedValue !== undefined) { this.resolveNewValue(updatedValue, suggestionsArray); } else { this.suggestionStore.updateSuggestions(suggestionsArray); } } else if (suggestionsPromiseLike && suggestionsPromiseLike.then) { if (!this.loadingTimer) { this.loadingTimer = this._async.setTimeout(function () { return _this.setState({ suggestionsLoading: true }); }, 500); } // Clear suggestions this.suggestionStore.updateSuggestions([]); if (updatedValue !== undefined) { this.setState({ suggestionsVisible: this.input.value !== '' && this.input.inputElement === document.activeElement }); } else { this.setState({ suggestionsVisible: this.input.inputElement === document.activeElement }); } // Ensure that the promise will only use the callback if it was the most recent one. var promise_1 = this.currentPromise = suggestionsPromiseLike; promise_1.then(function (newSuggestions) { if (promise_1 === _this.currentPromise) { if (updatedValue !== undefined) { _this.resolveNewValue(updatedValue, newSuggestions); } else { _this.suggestionStore.updateSuggestions(newSuggestions); _this.setState({ suggestionsLoading: false }); } if (_this.loadingTimer) { _this._async.clearTimeout(_this.loadingTimer); _this.loadingTimer = undefined; } } }); } }; BasePicker.prototype.resolveNewValue = function (updatedValue, suggestions) { this.suggestionStore.updateSuggestions(suggestions, 0); var itemValue = undefined; if (this.suggestionStore.currentSuggestion) { itemValue = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, updatedValue); } this.setState({ suggestionsLoading: false, suggestedDisplayValue: itemValue, suggestionsVisible: this.input.value !== '' && this.input.inputElement === document.activeElement }); }; BasePicker.prototype.onChange = function () { if (this.props.onChange) { this.props.onChange(this.state.items); } }; BasePicker.prototype.onInputChange = function (value) { this.updateValue(value); this.setState({ moreSuggestionsAvailable: true, isMostRecentlyUsedVisible: false }); }; BasePicker.prototype.onSuggestionClick = function (ev, item, index) { this.addItemByIndex(index); }; BasePicker.prototype.onSuggestionRemove = function (ev, item, index) { if (this.props.onRemoveSuggestion) { this.props.onRemoveSuggestion(item); } this.suggestionStore.removeSuggestion(index); }; BasePicker.prototype.onInputFocus = function (ev) { this.selection.setAllSelected(false); if (this.input.value === '' && this.props.onEmptyInputFocus) { this.onEmptyInputFocus(); this.setState({ isMostRecentlyUsedVisible: true, moreSuggestionsAvailable: false, suggestionsVisible: true }); } else if (this.input.value) { this.setState({ isMostRecentlyUsedVisible: false, suggestionsVisible: true }); } }; BasePicker.prototype.onKeyDown = function (ev) { var value = this.input.value; switch (ev.which) { case Utilities_1.KeyCodes.escape: if (this.state.suggestionsVisible) { this.dismissSuggestions(); ev.preventDefault(); ev.stopPropagation(); } break; case Utilities_1.KeyCodes.tab: case Utilities_1.KeyCodes.enter: if (!ev.shiftKey && this.suggestionStore.hasSelectedSuggestion() && this.state.suggestionsVisible) { this.completeSuggestion(); ev.preventDefault(); ev.stopPropagation(); } break; case Utilities_1.KeyCodes.backspace: this.onBackspace(ev); break; case Utilities_1.KeyCodes.del: if (ev.target === this.input.inputElement && this.state.suggestionsVisible && this.suggestionStore.currentIndex !== -1) { if (this.props.onRemoveSuggestion) { this.props.onRemoveSuggestion(this.suggestionStore.currentSuggestion.item); } this.suggestionStore.removeSuggestion(this.suggestionStore.currentIndex); this.forceUpdate(); } break; case Utilities_1.KeyCodes.up: if (ev.target === this.input.inputElement && this.suggestionStore.previousSuggestion() && this.state.suggestionsVisible) { ev.preventDefault(); ev.stopPropagation(); this.onSuggestionSelect(); } break; case Utilities_1.KeyCodes.down: if (ev.target === this.input.inputElement && this.state.suggestionsVisible) { if (this.suggestionStore.nextSuggestion()) { ev.preventDefault(); ev.stopPropagation(); this.onSuggestionSelect(); } } break; } }; BasePicker.prototype.onItemChange = function (changedItem, index) { var _this = this; var items = this.state.items; if (index >= 0) { var newItems = items; newItems[index] = changedItem; this.setState({ items: newItems }, function () { return _this.onChange(); }); } }; BasePicker.prototype.onGetMoreResults = function () { var _this = this; this.setState({ isSearching: true }, function () { if (_this.props.onGetMoreResults) { var suggestions = _this.props.onGetMoreResults(_this.input.value, _this.state.items); var suggestionsArray = suggestions; var suggestionsPromiseLike = suggestions; if (Array.isArray(suggestionsArray)) { _this.updateSuggestions(suggestionsArray); _this.setState({ isSearching: false }); } else if (suggestionsPromiseLike.then) { suggestionsPromiseLike.then(function (newSuggestions) { _this.updateSuggestions(newSuggestions); _this.setState({ isSearching: false }); }); } } else { _this.setState({ isSearching: false }); } _this.input.focus(); _this.setState({ moreSuggestionsAvailable: false, isResultsFooterVisible: true }); }); }; BasePicker.prototype.addItemByIndex = function (index) { this.addItem(this.suggestionStore.getSuggestionAtIndex(index).item); this.input.clear(); this.updateValue(''); }; BasePicker.prototype.addItem = function (item) { var _this = this; var newItems = this.state.items.concat([item]); this.setState({ items: newItems }, function () { return _this.onChange(); }); }; BasePicker.prototype.removeItem = function (item) { var _this = this; var items = this.state.items; var index = items.indexOf(item); if (index >= 0) { var newItems = items.slice(0, index).concat(items.slice(index + 1)); this.setState({ items: newItems }, function () { return _this.onChange(); }); } }; BasePicker.prototype.removeItems = function (itemsToRemove) { var _this = this; var items = this.state.items; var newItems = items.filter(function (item) { return itemsToRemove.indexOf(item) === -1; }); var firstItemToRemove = this.selection.getSelection()[0]; var index = items.indexOf(firstItemToRemove); this.setState({ items: newItems }, function () { _this.resetFocus(index); _this.onChange(); }); }; // This is protected because we may expect the backspace key to work differently in a different kind of picker. // This lets the subclass override it and provide it's own onBackspace. For an example see the BasePickerListBelow BasePicker.prototype.onBackspace = function (ev) { if (this.state.items.length && !this.input.isValueSelected && this.input.cursorLocation === 0) { if (this.selection.getSelectedCount() > 0) { this.removeItems(this.selection.getSelection()); } else { this.removeItem(this.state.items[this.state.items.length - 1]); } } }; BasePicker.prototype._getTextFromItem = function (item, currentValue) { if (this.props.getTextFromItem) { return this.props.getTextFromItem(item, currentValue); } else { return ''; } }; return BasePicker; }(Utilities_1.BaseComponent)); __decorate([ Utilities_1.autobind ], BasePicker.prototype, "dismissSuggestions", null); __decorate([ Utilities_1.autobind ], BasePicker.prototype, "onInputChange", null); __decorate([ Utilities_1.autobind ], BasePicker.prototype, "onSuggestionClick", null); __decorate([ Utilities_1.autobind ], BasePicker.prototype, "onSuggestionRemove", null); __decorate([ Utilities_1.autobind ], BasePicker.prototype, "onInputFocus", null); __decorate([ Utilities_1.autobind ], BasePicker.prototype, "onKeyDown", null); __decorate([ Utilities_1.autobind ], BasePicker.prototype, "onItemChange", null); __decorate([ Utilities_1.autobind ], BasePicker.prototype, "onGetMoreResults", null); __decorate([ Utilities_1.autobind ], BasePicker.prototype, "addItemByIndex", null); __decorate([ Utilities_1.autobind ], BasePicker.prototype, "addItem", null); __decorate([ Utilities_1.autobind ], BasePicker.prototype, "removeItem", null); __decorate([ Utilities_1.autobind ], BasePicker.prototype, "removeItems", null); exports.BasePicker = BasePicker; var BasePickerListBelow = (function (_super) { __extends(BasePickerListBelow, _super); function BasePickerListBelow() { return _super !== null && _super.apply(this, arguments) || this; } BasePickerListBelow.prototype.render = function () { var suggestedDisplayValue = this.state.suggestedDisplayValue; var _a = this.props, className = _a.className, inputProps = _a.inputProps, disabled = _a.disabled; return (React.createElement("div", null, React.createElement("div", { ref: this._resolveRef('root'), className: Utilities_1.css('ms-BasePicker', className ? className : ''), onKeyDown: this.onKeyDown }, React.createElement(index_1.SelectionZone, { selection: this.selection, selectionMode: index_1.SelectionMode.multiple }, React.createElement("div", { className: Utilities_1.css('ms-BasePicker-text', styles.pickerText) }, React.createElement(BaseAutoFill_1.BaseAutoFill, __assign({}, inputProps, { className: Utilities_1.css('ms-BasePicker-input', styles.pickerInput), ref: this._resolveRef('input'), onFocus: this.onInputFocus, onInputValueChange: this.onInputChange, suggestedDisplayValue: suggestedDisplayValue, "aria-activedescendant": 'sug-' + this.suggestionStore.currentIndex, "aria-owns": 'suggestion-list', "aria-expanded": 'true', "aria-haspopup": 'true', autoCapitalize: 'off', autoComplete: 'off', role: 'combobox', disabled: disabled }))))), this.renderSuggestions(), React.createElement(FocusZone_1.FocusZone, { ref: this._resolveRef('focusZone'), className: 'ms-BasePicker-selectedItems', isInnerZoneKeystroke: this._isFocusZoneInnerKeystroke }, this.renderItems()))); }; BasePickerListBelow.prototype.onBackspace = function (ev) { // override the existing backspace method to not do anything because the list items appear below. }; BasePickerListBelow.prototype._isFocusZoneInnerKeystroke = function (ev) { switch (ev.which) { case Utilities_1.KeyCodes.down: return true; } return false; }; return BasePickerListBelow; }(BasePicker)); __decorate([ Utilities_1.autobind ], BasePickerListBelow.prototype, "_isFocusZoneInnerKeystroke", null); exports.BasePickerListBelow = BasePickerListBelow; /***/ }, /* 325 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { pickerText: 'pickerText_f28c4353', inputFocused: 'inputFocused_f28c4353', pickerInput: 'pickerInput_f28c4353', }; load_themed_styles_1.loadStyles([{ "rawString": ".pickerText_f28c4353{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;box-sizing:border-box;border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";min-width:180px;padding:1px;min-height:32px}.pickerText_f28c4353:hover{border-color:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.pickerText_f28c4353.inputFocused_f28c4353{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.pickerInput_f28c4353{height:26px;border:none;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;outline:0;padding:0 6px 0;margin:1px}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 326 */ /***/ 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 }); /* tslint:disable */ var React = __webpack_require__(2); /* tslint:enable */ var BasePicker_1 = __webpack_require__(324); var SelectedItemDefault_1 = __webpack_require__(327); var SuggestionItemDefault_1 = __webpack_require__(329); __webpack_require__(330); var BasePeoplePicker = (function (_super) { __extends(BasePeoplePicker, _super); function BasePeoplePicker() { return _super !== null && _super.apply(this, arguments) || this; } return BasePeoplePicker; }(BasePicker_1.BasePicker)); exports.BasePeoplePicker = BasePeoplePicker; var MemberListPeoplePicker = (function (_super) { __extends(MemberListPeoplePicker, _super); function MemberListPeoplePicker() { return _super !== null && _super.apply(this, arguments) || this; } return MemberListPeoplePicker; }(BasePicker_1.BasePickerListBelow)); exports.MemberListPeoplePicker = MemberListPeoplePicker; /** * Standard People Picker. */ var NormalPeoplePicker = (function (_super) { __extends(NormalPeoplePicker, _super); function NormalPeoplePicker() { return _super !== null && _super.apply(this, arguments) || this; } return NormalPeoplePicker; }(BasePeoplePicker)); NormalPeoplePicker.defaultProps = { onRenderItem: function (props) { return React.createElement(SelectedItemDefault_1.SelectedItemDefault, __assign({}, props)); }, onRenderSuggestionsItem: function (props, itemProps) { return SuggestionItemDefault_1.SuggestionItemNormal(__assign({}, props), __assign({}, itemProps)); } }; exports.NormalPeoplePicker = NormalPeoplePicker; /** * Compact layout. It uses small personas when displaying search results. */ var CompactPeoplePicker = (function (_super) { __extends(CompactPeoplePicker, _super); function CompactPeoplePicker() { return _super !== null && _super.apply(this, arguments) || this; } return CompactPeoplePicker; }(BasePeoplePicker)); CompactPeoplePicker.defaultProps = { onRenderItem: function (props) { return React.createElement(SelectedItemDefault_1.SelectedItemDefault, __assign({}, props)); }, onRenderSuggestionsItem: function (props, itemProps) { return SuggestionItemDefault_1.SuggestionItemSmall(__assign({}, props), __assign({}, itemProps)); } }; exports.CompactPeoplePicker = CompactPeoplePicker; /** * MemberList layout. The selected people show up below the search box. */ var ListPeoplePicker = (function (_super) { __extends(ListPeoplePicker, _super); function ListPeoplePicker() { return _super !== null && _super.apply(this, arguments) || this; } return ListPeoplePicker; }(MemberListPeoplePicker)); ListPeoplePicker.defaultProps = { onRenderItem: function (props) { return React.createElement(SelectedItemDefault_1.SelectedItemDefault, __assign({}, props)); }, onRenderSuggestionsItem: function (props, itemProps) { return SuggestionItemDefault_1.SuggestionItemNormal(__assign({}, props), __assign({}, itemProps)); } }; exports.ListPeoplePicker = ListPeoplePicker; /***/ }, /* 327 */ /***/ function(module, exports, __webpack_require__) { "use strict"; 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 }); /* tslint:disable */ var React = __webpack_require__(2); /* tslint:enable */ var Utilities_1 = __webpack_require__(10); var Persona_1 = __webpack_require__(281); var Button_1 = __webpack_require__(154); var stylesImport = __webpack_require__(328); var styles = stylesImport; exports.SelectedItemDefault = function (peoplePickerItemProps) { var item = peoplePickerItemProps.item, onRemoveItem = peoplePickerItemProps.onRemoveItem, index = peoplePickerItemProps.index, selected = peoplePickerItemProps.selected; return (React.createElement("div", { className: Utilities_1.css('ms-PickerPersona-container', styles.personaContainer, (_a = {}, _a['is-selected ' + styles.personaContainerIsSelected] = selected, _a)), "data-is-focusable": true, "data-selection-index": index }, React.createElement("div", { className: Utilities_1.css('ms-PickerItem-content', styles.itemContent) }, React.createElement(Persona_1.Persona, __assign({}, item, { presence: item.presence !== undefined ? item.presence : Persona_1.PersonaPresence.none, size: Persona_1.PersonaSize.size28 }))), React.createElement(Button_1.IconButton, { onClick: function () { if (onRemoveItem) { onRemoveItem(); } }, iconProps: { iconName: 'Cancel' }, className: Utilities_1.css('ms-PickerItem-removeButton', styles.removeButton), "data-is-focusable": false }))); var _a; }; /***/ }, /* 328 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { personaContainer: 'personaContainer_96a1c5bb', removeButton: 'removeButton_96a1c5bb', personaContainerIsSelected: 'personaContainerIsSelected_96a1c5bb', itemContent: 'itemContent_96a1c5bb', personaDetails: 'personaDetails_96a1c5bb', itemContainer: 'itemContainer_96a1c5bb', }; load_themed_styles_1.loadStyles([{ "rawString": ".personaContainer_96a1c5bb{border-radius:15px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";margin:1px;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:180px}.personaContainer_96a1c5bb::-moz-focus-inner{border:0}.personaContainer_96a1c5bb{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .personaContainer_96a1c5bb:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.personaContainer_96a1c5bb:hover{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.personaContainer_96a1c5bb:hover .removeButton_96a1c5bb{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.personaContainer_96a1c5bb.personaContainerIsSelected_96a1c5bb{background:" }, { "theme": "blue", "defaultValue": "#0078d7" }, { "rawString": "}.personaContainer_96a1c5bb.personaContainerIsSelected_96a1c5bb .ms-Persona-primaryText{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.personaContainer_96a1c5bb.personaContainerIsSelected_96a1c5bb .removeButton_96a1c5bb .ms-Button-icon{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.personaContainer_96a1c5bb.personaContainerIsSelected_96a1c5bb .removeButton_96a1c5bb:hover{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}.personaContainer_96a1c5bb .itemContent_96a1c5bb{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;min-width:0;max-width:100%;overflow-x:hidden}.personaContainer_96a1c5bb .removeButton_96a1c5bb{border-radius:15px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:28px;height:28px;-ms-flex-preferred-size:28px;flex-basis:28px}.personaContainer_96a1c5bb .removeButton_96a1c5bb:hover{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.personaContainer_96a1c5bb .personaDetails_96a1c5bb{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.itemContainer_96a1c5bb{display:inline-block;vertical-align:top}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 329 */ /***/ function(module, exports, __webpack_require__) { "use strict"; 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 }); /* tslint:disable */ var React = __webpack_require__(2); /* tslint:enable */ var Utilities_1 = __webpack_require__(10); var Persona_1 = __webpack_require__(281); var stylesImport = __webpack_require__(330); var styles = stylesImport; exports.SuggestionItemNormal = function (personaProps, suggestionItemProps) { var onRemoveItem = suggestionItemProps.onRemoveItem, onClick = suggestionItemProps.onClick, showRemoveButton = suggestionItemProps.showRemoveButton; return (React.createElement("div", { className: Utilities_1.css('ms-PeoplePicker-personaContent', styles.peoplePickerPersonaContent) }, React.createElement(Persona_1.Persona, __assign({}, personaProps, { presence: personaProps.presence !== undefined ? personaProps.presence : Persona_1.PersonaPresence.none, size: Persona_1.PersonaSize.extraExtraSmall, className: Utilities_1.css('ms-PeoplePicker-Persona', styles.peoplePickerPersona), showSecondaryText: true })))); }; exports.SuggestionItemSmall = function (personaProps, suggestionItemProps) { var onRemoveItem = suggestionItemProps.onRemoveItem, onClick = suggestionItemProps.onClick; return (React.createElement("div", { className: Utilities_1.css('ms-PeoplePicker-personaContent', styles.peoplePickerPersonaContent) }, React.createElement(Persona_1.Persona, __assign({}, personaProps, { presence: personaProps.presence !== undefined ? personaProps.presence : Persona_1.PersonaPresence.none, size: Persona_1.PersonaSize.extraExtraSmall, className: Utilities_1.css('ms-PeoplePicker-Persona', styles.peoplePickerPersona) })))); }; /***/ }, /* 330 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { resultContent: 'resultContent_bee420eb', resultItem: 'resultItem_bee420eb', peoplePickerPersona: 'peoplePickerPersona_bee420eb', peoplePicker: 'peoplePicker_bee420eb', peoplePickerPersonaContent: 'peoplePickerPersonaContent_bee420eb', }; load_themed_styles_1.loadStyles([{ "rawString": ".resultContent_bee420eb{display:table-row}.resultContent_bee420eb .resultItem_bee420eb{display:table-cell;vertical-align:bottom}.peoplePickerPersona_bee420eb{width:180px}.peoplePickerPersona_bee420eb .ms-Persona-details{width:100%}.peoplePicker_bee420eb .ms-BasePicker-text{min-height:40px}.peoplePickerPersonaContent_bee420eb{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 331 */ /***/ 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 }); /* tslint:disable */ var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); /* tslint:enable */ var BasePicker_1 = __webpack_require__(324); var TagItem_1 = __webpack_require__(332); var stylesImport = __webpack_require__(333); var styles = stylesImport; var TagPicker = (function (_super) { __extends(TagPicker, _super); function TagPicker() { return _super !== null && _super.apply(this, arguments) || this; } return TagPicker; }(BasePicker_1.BasePicker)); TagPicker.defaultProps = { onRenderItem: function (props) { return React.createElement(TagItem_1.TagItem, __assign({}, props), props.item.name); }, onRenderSuggestionsItem: function (props) { return React.createElement("div", { className: Utilities_1.css('ms-TagItem-TextOverflow', styles.tagItemTextOverflow) }, " ", props.name, " "); } }; exports.TagPicker = TagPicker; /***/ }, /* 332 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable */ var React = __webpack_require__(2); /* tslint:enable */ var Utilities_1 = __webpack_require__(10); var Icon_1 = __webpack_require__(141); var stylesImport = __webpack_require__(333); var styles = stylesImport; exports.TagItem = function (props) { return (React.createElement("div", { className: Utilities_1.css('ms-TagItem', styles.root, { 'is-selected': props.selected }, props.selected && styles.isSelected), key: props.index, "data-selection-index": props.index, "data-is-focusable": true }, React.createElement("span", { className: Utilities_1.css('ms-TagItem-text', styles.tagItemText) }, props.children), React.createElement("span", { className: Utilities_1.css('ms-TagItem-close', styles.tagItemClose), onClick: props.onRemoveItem }, React.createElement(Icon_1.Icon, { iconName: 'cancel' })))); }; /***/ }, /* 333 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_df64cf87', isSelected: 'isSelected_df64cf87', tagItemText: 'tagItemText_df64cf87', tagItemClose: 'tagItemClose_df64cf87', tagItemButton: 'tagItemButton_df64cf87', tagItemTextOverflow: 'tagItemTextOverflow_df64cf87', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_df64cf87{-ms-flex-negative:1;flex-shrink:1;background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";margin:1px;height:26px;line-height:26px;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;min-width:100px;max-width:100%}.root_df64cf87::-moz-focus-inner{border:0}.root_df64cf87{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .root_df64cf87:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.root_df64cf87:hover{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.root_df64cf87.isSelected_df64cf87{background:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.root_df64cf87.isSelected_df64cf87:hover{background:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": "}.tagItemText_df64cf87{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:100px;margin:0 8px}.tagItemClose_df64cf87{cursor:pointer;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:12px;display:inline-block;text-align:center;vertical-align:top;width:30px;height:100%;-ms-flex-negative:0;flex-shrink:0}.tagItemButton_df64cf87{width:100%;height:100%}.tagItemTextOverflow_df64cf87{overflow:hidden;text-overflow:ellipsis;max-width:60vw}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 334 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(335)); /***/ }, /* 335 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(336)); var PivotItem_1 = __webpack_require__(337); exports.PivotItem = PivotItem_1.PivotItem; __export(__webpack_require__(338)); /***/ }, /* 336 */ /***/ 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var Button_1 = __webpack_require__(154); var FocusZone_1 = __webpack_require__(50); var PivotItem_1 = __webpack_require__(337); var Pivot_Props_1 = __webpack_require__(338); var Pivot_Props_2 = __webpack_require__(338); var Icon_1 = __webpack_require__(141); var stylesImport = __webpack_require__(339); var styles = stylesImport; var Pivot = (function (_super) { __extends(Pivot, _super); function Pivot(props) { var _this = _super.call(this, props) || this; _this._pivotId = Utilities_1.getId('Pivot'); var links = _this._getPivotLinks(_this.props); var selectedKey; if (props.initialSelectedKey) { selectedKey = props.initialSelectedKey; } else if (props.initialSelectedIndex) { selectedKey = links[props.initialSelectedIndex].itemKey; } else if (props.selectedKey) { selectedKey = props.selectedKey; } else if (links.length) { selectedKey = links[0].itemKey; } _this.state = { links: links, selectedKey: selectedKey, selectedTabId: _this._keyToTabIds[selectedKey], }; _this._renderLink = _this._renderLink.bind(_this); return _this; } Pivot.prototype.componentWillReceiveProps = function (nextProps) { var _this = this; var links = this._getPivotLinks(nextProps); this.setState(function (prevState, props) { var selectedKey; if (_this._isKeyValid(nextProps.selectedKey)) { selectedKey = nextProps.selectedKey; } else if (_this._isKeyValid(prevState.selectedKey)) { selectedKey = prevState.selectedKey; } else if (links.length) { selectedKey = links[0].itemKey; } return { links: links, selectedKey: selectedKey, selectedTabId: _this._keyToTabIds[selectedKey], }; }); }; Pivot.prototype.render = function () { return (React.createElement("div", null, this._renderPivotLinks(), this._renderPivotItem())); }; /** * Renders the set of links to route between pivots */ Pivot.prototype._renderPivotLinks = function () { return (React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal }, React.createElement("ul", { className: Utilities_1.css('ms-Pivot', styles.root, (_a = {}, _a['ms-Pivot--large ' + styles.rootIsLarge] = this.props.linkSize === Pivot_Props_2.PivotLinkSize.large, _a), (_b = {}, _b['ms-Pivot--tabs ' + styles.rootIsTabs] = this.props.linkFormat === Pivot_Props_1.PivotLinkFormat.tabs, _b)), role: 'tablist' }, this.state.links.map(this._renderLink)))); var _a, _b; }; /** * Renders a pivot link */ Pivot.prototype._renderLink = function (link) { var itemKey = link.itemKey; var tabId = this._keyToTabIds[itemKey]; var onRenderItemLink = link.onRenderItemLink; var linkContent; if (onRenderItemLink) { linkContent = onRenderItemLink(link, this._renderLinkContent); } else { linkContent = this._renderLinkContent(link); } return (React.createElement(Button_1.CommandButton, { id: tabId, key: itemKey, className: Utilities_1.css('ms-Pivot-link', styles.link, (_a = {}, _a['is-selected ' + styles.linkIsSelected] = this.state.selectedKey === itemKey, _a)), onClick: this._onLinkClick.bind(this, itemKey), onKeyPress: this._onKeyPress.bind(this, itemKey), ariaLabel: link.ariaLabel, role: 'tab', "aria-selected": this.state.selectedKey === itemKey }, linkContent)); var _a; }; Pivot.prototype._renderLinkContent = function (link) { var itemCount = link.itemCount, itemIcon = link.itemIcon, linkText = link.linkText; return React.createElement("span", { className: Utilities_1.css('ms-Pivot-link-content') }, itemIcon !== undefined && (React.createElement("span", { className: Utilities_1.css('ms-Pivot-icon', styles.icon) }, React.createElement(Icon_1.Icon, { iconName: itemIcon }))), linkText !== undefined && React.createElement("span", { className: Utilities_1.css('ms-Pivot-text', styles.text) }, " ", link.linkText), itemCount !== undefined && React.createElement("span", { className: Utilities_1.css('ms-Pivot-count', styles.count) }, " (", itemCount, ")")); }; /** * Renders the current Pivot Item */ Pivot.prototype._renderPivotItem = function () { if (this.props.headersOnly) { return null; } var itemKey = this.state.selectedKey; var index = this._keyToIndexMapping[itemKey]; var selectedTabId = this.state.selectedTabId; return (React.createElement("div", { role: 'tabpanel', "aria-labelledby": selectedTabId }, React.Children.toArray(this.props.children)[index])); }; /** * Gets the set of PivotLinks as arrary of IPivotItemProps * The set of Links is determined by child components of type PivotItem */ Pivot.prototype._getPivotLinks = function (props) { var _this = this; var links = []; this._keyToIndexMapping = {}; this._keyToTabIds = {}; React.Children.map(props.children, function (child, index) { if (typeof child === 'object' && child.type === PivotItem_1.PivotItem) { var pivotItem = child; var itemKey = pivotItem.props.itemKey || index.toString(); links.push({ linkText: pivotItem.props.linkText, ariaLabel: pivotItem.props.ariaLabel, itemKey: itemKey, itemCount: pivotItem.props.itemCount, itemIcon: pivotItem.props.itemIcon, onRenderItemLink: pivotItem.props.onRenderItemLink }); _this._keyToIndexMapping[itemKey] = index; _this._keyToTabIds[itemKey] = _this.getTabId(itemKey, index); } }); return links; }; /** * Generates the Id for the tab button. */ Pivot.prototype.getTabId = function (itemKey, index) { if (this.props.getTabId) { return this.props.getTabId(itemKey, index); } return this._pivotId + ("-Tab" + index); }; /** * whether the key exists in the pivot items. */ Pivot.prototype._isKeyValid = function (itemKey) { return itemKey !== undefined && this._keyToIndexMapping[itemKey] !== undefined; }; /** * Handles the onClick event on PivotLinks */ Pivot.prototype._onLinkClick = function (itemKey, ev) { ev.preventDefault(); this._updateSelectedItem(itemKey, ev); }; /** * Handle the onKeyPress eventon the PivotLinks */ Pivot.prototype._onKeyPress = function (itemKey, ev) { ev.preventDefault(); if (ev.which === Utilities_1.KeyCodes.enter) { this._updateSelectedItem(itemKey); } }; /** * Updates the state with the new selected index */ Pivot.prototype._updateSelectedItem = function (itemKey, ev) { this.setState({ selectedKey: itemKey, selectedTabId: this._keyToTabIds[itemKey] }); if (this.props.onLinkClick && this._keyToIndexMapping[itemKey] >= 0) { var index = this._keyToIndexMapping[itemKey]; // React.Element<any> cannot directly convert to PivotItem. var item = React.Children.toArray(this.props.children)[index]; if (typeof item === 'object' && item.type === PivotItem_1.PivotItem) { this.props.onLinkClick(item, ev); } } }; return Pivot; }(Utilities_1.BaseComponent)); __decorate([ Utilities_1.autobind ], Pivot.prototype, "_renderLink", null); __decorate([ Utilities_1.autobind ], Pivot.prototype, "_renderLinkContent", null); exports.Pivot = Pivot; /***/ }, /* 337 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var PivotItem = (function (_super) { __extends(PivotItem, _super); function PivotItem() { return _super !== null && _super.apply(this, arguments) || this; } PivotItem.prototype.render = function () { return (React.createElement("div", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties)), this.props.children)); }; return PivotItem; }(Utilities_1.BaseComponent)); exports.PivotItem = PivotItem; /***/ }, /* 338 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var PivotLinkFormat; (function (PivotLinkFormat) { /** * Display Pivot Links as links */ PivotLinkFormat[PivotLinkFormat["links"] = 0] = "links"; /** * Display Pivot Links as Tabs */ PivotLinkFormat[PivotLinkFormat["tabs"] = 1] = "tabs"; })(PivotLinkFormat = exports.PivotLinkFormat || (exports.PivotLinkFormat = {})); var PivotLinkSize; (function (PivotLinkSize) { /** * Display Link using normal font size */ PivotLinkSize[PivotLinkSize["normal"] = 0] = "normal"; /** * Display links using large font size */ PivotLinkSize[PivotLinkSize["large"] = 1] = "large"; })(PivotLinkSize = exports.PivotLinkSize || (exports.PivotLinkSize = {})); /***/ }, /* 339 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_ca2b42d3', links: 'links_ca2b42d3', link: 'link_ca2b42d3', text: 'text_ca2b42d3', count: 'count_ca2b42d3', icon: 'icon_ca2b42d3', linkIsSelected: 'linkIsSelected_ca2b42d3', linkIsDisabled: 'linkIsDisabled_ca2b42d3', linkIsOverflow: 'linkIsOverflow_ca2b42d3', ellipsis: 'ellipsis_ca2b42d3', rootIsLarge: 'rootIsLarge_ca2b42d3', rootIsTabs: 'rootIsTabs_ca2b42d3', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_ca2b42d3{box-sizing:border-box;box-shadow:none;margin:0;padding:0;font-size:14px;font-weight:400;position:relative;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";white-space:nowrap}.links_ca2b42d3{font-size:0;height:40px;list-style-type:none;padding:0;white-space:nowrap}.root_ca2b42d3 .link_ca2b42d3{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";display:inline-block;font-size:14px;font-weight:400;line-height:40px;padding:0 8px;text-align:center;position:relative;background-color:transparent;border:0}[dir=ltr] .root_ca2b42d3 .link_ca2b42d3{margin-right:8px}[dir=rtl] .root_ca2b42d3 .link_ca2b42d3{margin-left:8px}.root_ca2b42d3 .link_ca2b42d3:hover{cursor:pointer}.root_ca2b42d3 .link_ca2b42d3:focus{outline:0}.root_ca2b42d3 .link_ca2b42d3::before{background-color:transparent;bottom:0;content:'';height:2px;left:8px;position:absolute;right:8px;transition:background-color 267ms cubic-bezier(.1,.25,.75,.9)}.root_ca2b42d3 .link_ca2b42d3::after{color:transparent;content:attr(title);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}.root_ca2b42d3 .link_ca2b42d3 .count_ca2b42d3,.root_ca2b42d3 .link_ca2b42d3 .text_ca2b42d3{display:inline-block;vertical-align:top}html[dir=ltr] .root_ca2b42d3 .link_ca2b42d3 .icon_ca2b42d3+.text_ca2b42d3{margin-left:4px}html[dir=rtl] .root_ca2b42d3 .link_ca2b42d3 .icon_ca2b42d3+.text_ca2b42d3{margin-right:4px}html[dir=ltr] .root_ca2b42d3 .link_ca2b42d3 .count_ca2b42d3{margin-left:4px}html[dir=rtl] .root_ca2b42d3 .link_ca2b42d3 .count_ca2b42d3{margin-right:4px}.root_ca2b42d3 .link_ca2b42d3.linkIsSelected_ca2b42d3{font-weight:600}.root_ca2b42d3 .link_ca2b42d3.linkIsSelected_ca2b42d3::before{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_ca2b42d3 .link_ca2b42d3.linkIsSelected_ca2b42d3::before{background-color:transparent;border-bottom:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_ca2b42d3 .link_ca2b42d3.linkIsSelected_ca2b42d3::before{background-color:transparent;border-bottom:2px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.root_ca2b42d3 .link_ca2b42d3.linkIsDisabled_ca2b42d3{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.ms-Fabric.is-focusVisible .link_ca2b42d3:focus{outline:1px solid " }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.link_ca2b42d3.linkIsOverflow_ca2b42d3{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.link_ca2b42d3.linkIsOverflow_ca2b42d3.linkIsSelected_ca2b42d3{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.link_ca2b42d3.linkIsOverflow_ca2b42d3:focus:not(.linkIsSelected_ca2b42d3),.link_ca2b42d3.linkIsOverflow_ca2b42d3:hover:not(.linkIsSelected_ca2b42d3){color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.link_ca2b42d3.linkIsOverflow_ca2b42d3:active{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.ellipsis_ca2b42d3{font-size:15px;position:relative;top:0}.root_ca2b42d3.rootIsLarge_ca2b42d3 .link_ca2b42d3{font-size:17px}.root_ca2b42d3.rootIsLarge_ca2b42d3 .link_ca2b42d3.linkIsOverflow_ca2b42d3::after{font-size:17px}.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3{height:40px;line-height:40px;background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";padding:0 10px;vertical-align:top}.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3::-moz-focus-inner{border:0}.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}[dir=ltr] .root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3{margin-right:0}[dir=rtl] .root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3{margin-left:0}.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3:focus:not(.linkIsSelected_ca2b42d3):not(.linkIsOverflow_ca2b42d3),.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3:hover:not(.linkIsSelected_ca2b42d3):not(.linkIsOverflow_ca2b42d3){color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3:active{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3.linkIsSelected_ca2b42d3{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-weight:300}.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3.linkIsSelected_ca2b42d3::before{background-color:transparent;transition:none;position:absolute;top:0;left:0;right:0;bottom:0;content:'';height:auto}@media screen and (-ms-high-contrast:active){.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3.linkIsSelected_ca2b42d3::before{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3.linkIsSelected_ca2b42d3::before{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3.linkIsOverflow_ca2b42d3:focus:not(.linkIsSelected_ca2b42d3),.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3.linkIsOverflow_ca2b42d3:hover:not(.linkIsSelected_ca2b42d3){background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3.linkIsOverflow_ca2b42d3:active{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.ms-Fabric.is-focusVisible .root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3:focus:before{height:auto;background:0 0;transition:none}@media screen and (-ms-high-contrast:active){.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3.linkIsSelected_ca2b42d3{font-weight:600}}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 340 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(341)); /***/ }, /* 341 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(342)); /***/ }, /* 342 */ /***/ 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 }); /* tslint:disable:no-unused-variable */ var React = __webpack_require__(2); /* tslint:enable:no-unused-variable */ var Utilities_1 = __webpack_require__(10); var stylesImport = __webpack_require__(343); var styles = stylesImport; // if the percentComplete is near 0, don't animate it. // This prevents animations on reset to 0 scenarios var ZERO_THRESHOLD = 0.01; var ProgressIndicator = (function (_super) { __extends(ProgressIndicator, _super); function ProgressIndicator(props) { var _this = _super.call(this, props) || this; _this._warnDeprecations({ title: 'label' }); return _this; } ProgressIndicator.prototype.render = function () { var _a = this.props, title = _a.title, label = _a.label, description = _a.description, percentComplete = _a.percentComplete, className = _a.className, ariaValueText = _a.ariaValueText; // Handle deprecated value. if (title) { label = title; } percentComplete = Math.min(100, Math.max(0, percentComplete * 100)); return (React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator', styles.root, className) }, React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-itemName', styles.itemName) }, label), React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-itemProgress', styles.itemProgress) }, React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-progressTrack', styles.progressTrack) }), React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-progressBar', styles.progressBar, { 'smoothTransition': percentComplete > ZERO_THRESHOLD }), style: { width: percentComplete + '%' }, role: 'progressbar', "aria-valuemin": '0', "aria-valuemax": '100', "aria-valuenow": percentComplete.toFixed().toString(), "aria-valuetext": ariaValueText })), React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-itemDescription', styles.itemDescription) }, description))); }; return ProgressIndicator; }(Utilities_1.BaseComponent)); ProgressIndicator.defaultProps = { label: '', description: '', percentComplete: 0, width: 180 }; exports.ProgressIndicator = ProgressIndicator; /***/ }, /* 343 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_40e2def2', itemName: 'itemName_40e2def2', itemDescription: 'itemDescription_40e2def2', itemProgress: 'itemProgress_40e2def2', progressTrack: 'progressTrack_40e2def2', progressBar: 'progressBar_40e2def2', smoothTransition: 'smoothTransition_40e2def2', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_40e2def2{font-weight:400}.itemName_40e2def2{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.itemDescription_40e2def2{color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";font-size:11px;line-height:18px}.itemProgress_40e2def2{position:relative;height:2px;padding:8px 0}.progressTrack_40e2def2{position:absolute;width:100%;height:2px;background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";outline:1px solid transparent}.progressBar_40e2def2{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";height:2px;position:absolute;transition:width .3s ease;width:0}@media screen and (-ms-high-contrast:active){.progressBar_40e2def2{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.progressBar_40e2def2{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.smoothTransition_40e2def2{transition-property:width;transition-timing-function:linear;transition-duration:150ms}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 344 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(345)); /***/ }, /* 345 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(346)); __export(__webpack_require__(347)); /***/ }, /* 346 */ /***/ 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__(2); var Utilities_1 = __webpack_require__(10); var Icon_1 = __webpack_require__(141); var Rating_Props_1 = __webpack_require__(347); var stylesImport = __webpack_require__(348); var styles = stylesImport; var Rating = (function (_super) { __extends(Rating, _super); function Rating(props) { var _this = _super.call(this, props) || this; _this.state = { rating: _this._getInitialValue(props), focusedRating: null }; _this._id = Utilities_1.getId('Rating'); _this._labelId = Utilities_1.getId('RatingLabel'); return _this; } Rating.prototype.componentWillReceiveProps = function (nextProps) { if (typeof nextProps.rating !== 'undefined' && nextProps.rating !== this.state.rating) { this.setState({ rating: this._getClampedRating(nextProps.rating) }); } }; Rating.prototype.render = function () { var stars = []; for (var i = this.props.min; i <= this.props.max; ++i) { stars.push(this._renderStar(i)); } return React.createElement("div", { className: Utilities_1.css('ms-Rating', this.props.className, (_a = {}, _a['ms-Rating--large ' + styles.rootIsLarge] = this.props.size === Rating_Props_1.RatingSize.Large, _a)), role: 'application' }, React.createElement("div", { className: Utilities_1.css('ms-Rating-container', styles.container), role: 'radiogroup', "aria-labelledby": this.props.ariaLabelId }, stars)); var _a; }; Rating.prototype._renderStar = function (rating) { var inputId = this._id + "-" + rating; return React.createElement("div", { className: Utilities_1.css('ms-Rating-star', styles.star, (_a = {}, _a['is-selected ' + styles.starIsSelected] = rating <= this.state.rating, _a['is-inFocus ' + styles.starIsInFocus] = rating === this.state.focusedRating, _a['is-disabled ' + styles.starIsDisabled] = this.props.disabled, _a)), key: rating }, React.createElement("input", { className: Utilities_1.css('ms-Rating-input', styles.input), type: 'radio', name: this._id, id: inputId, value: rating, "aria-labelledby": this._labelId + "-" + rating, disabled: this.props.disabled, checked: rating === this.state.rating, onChange: this._onChange.bind(this, rating), onFocus: this._onFocus.bind(this, rating), onBlur: this._onBlur.bind(this, rating) }), React.createElement("label", { className: Utilities_1.css('ms-Rating-label', styles.label), htmlFor: inputId }, this._getLabel(rating), this._getIcon())); var _a; }; Rating.prototype._onFocus = function (value, ev) { this.setState({ focusedRating: value }); }; Rating.prototype._onBlur = function (option, ev) { this.setState({ focusedRating: null }); }; Rating.prototype._onChange = function (rating, evt) { this.setState({ rating: rating }); var onChanged = this.props.onChanged; if (onChanged) { onChanged(rating); } }; Rating.prototype._getLabel = function (rating) { var text = this.props.ariaLabelIcon || 'Star'; return (React.createElement("span", { id: this._labelId + "-" + rating, className: Utilities_1.css('ms-Rating-labelText', styles.labelText) }, rating + " " + text)); }; Rating.prototype._getIcon = function () { return React.createElement(Icon_1.Icon, { iconName: this.props.icon || 'favoriteStarFill' }); }; Rating.prototype._getInitialValue = function (props) { if (typeof props.rating === 'undefined') { return props.min; } if (props.rating === null) { return null; } return this._getClampedRating(props.rating); }; Rating.prototype._getClampedRating = function (rating) { rating = Math.floor(rating); return Math.min(Math.max(rating, this.props.min), this.props.max); }; return Rating; }(Utilities_1.BaseComponent)); Rating.defaultProps = { min: 1, max: 5 }; exports.Rating = Rating; /***/ }, /* 347 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var RatingSize; (function (RatingSize) { RatingSize[RatingSize["Small"] = 0] = "Small"; RatingSize[RatingSize["Large"] = 1] = "Large"; })(RatingSize = exports.RatingSize || (exports.RatingSize = {})); /***/ }, /* 348 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { input: 'input_19b01ffa', container: 'container_19b01ffa', star: 'star_19b01ffa', starIsDisabled: 'starIsDisabled_19b01ffa', starIsSelected: 'starIsSelected_19b01ffa', label: 'label_19b01ffa', rootIsLarge: 'rootIsLarge_19b01ffa', labelText: 'labelText_19b01ffa', starIsInFocus: 'starIsInFocus_19b01ffa', }; load_themed_styles_1.loadStyles([{ "rawString": ".input_19b01ffa{position:absolute;opacity:0;top:0}.container_19b01ffa{position:relative;display:inline-block}.container_19b01ffa:hover .star_19b01ffa:not(.starIsDisabled_19b01ffa){color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.container_19b01ffa:hover .star_19b01ffa:not(.starIsDisabled_19b01ffa).star_19b01ffa:hover{color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.container_19b01ffa:hover .star_19b01ffa:not(.starIsDisabled_19b01ffa).star_19b01ffa:hover~.star_19b01ffa{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.container_19b01ffa .star_19b01ffa{display:inline-block;text-align:center;color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.container_19b01ffa .star_19b01ffa.starIsSelected_19b01ffa{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.container_19b01ffa .star_19b01ffa.starIsDisabled_19b01ffa{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.container_19b01ffa .star_19b01ffa.starIsDisabled_19b01ffa .label_19b01ffa{cursor:default}.container_19b01ffa .star_19b01ffa .label_19b01ffa{display:inline-block;cursor:pointer;font-size:16px;padding:12px 0;border:1px solid transparent}.rootIsLarge_19b01ffa .container_19b01ffa .label_19b01ffa{font-size:20px;padding:6px 2px 9px 2px}.labelText_19b01ffa{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ms-Fabric.is-focusVisible .starIsInFocus_19b01ffa .label_19b01ffa{border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 349 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(350)); /***/ }, /* 350 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(351)); /***/ }, /* 351 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var Icon_1 = __webpack_require__(141); var stylesImport = __webpack_require__(352); var styles = stylesImport; var SearchBox = (function (_super) { __extends(SearchBox, _super); function SearchBox(props) { var _this = _super.call(this, props) || this; _this.state = { value: props.value || '', hasFocus: false, id: Utilities_1.getId('SearchBox') }; return _this; } SearchBox.prototype.componentWillReceiveProps = function (newProps) { if (newProps.value !== undefined) { this._latestValue = newProps.value; this.setState({ value: newProps.value }); } }; SearchBox.prototype.render = function () { var _a = this.props, labelText = _a.labelText, className = _a.className; var _b = this.state, value = _b.value, hasFocus = _b.hasFocus, id = _b.id; return (React.createElement("div", __assign({ ref: this._resolveRef('_rootElement'), className: Utilities_1.css('ms-SearchBox', className, styles.root, (_c = {}, _c['is-active ' + styles.rootIsActive] = hasFocus, _c['can-clear ' + styles.rootCanClear] = value.length > 0, _c)) }, { onFocusCapture: this._onFocusCapture }), React.createElement("div", { className: Utilities_1.css('ms-SearchBox-iconContainer', styles.iconContainer) }, React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-SearchBox-icon', styles.icon), iconName: 'Search' })), React.createElement("input", { id: id, className: Utilities_1.css('ms-SearchBox-field', styles.field), placeholder: labelText, onChange: this._onInputChange, onInput: this._onInputChange, onKeyDown: this._onKeyDown, value: value, "aria-label": this.props.ariaLabel ? this.props.ariaLabel : this.props.labelText, ref: this._resolveRef('_inputElement') }), React.createElement("div", { className: Utilities_1.css('ms-SearchBox-clearButton', styles.clearButton), onClick: this._onClearClick }, React.createElement(Icon_1.Icon, { iconName: 'Clear' })))); var _c; }; /** * Sets focus to the search box input field */ SearchBox.prototype.focus = function () { if (this._inputElement) { this._inputElement.focus(); } }; SearchBox.prototype._onClearClick = function (ev) { this.setState({ value: '' }); this._callOnChange(''); ev.stopPropagation(); ev.preventDefault(); this._inputElement.focus(); }; SearchBox.prototype._onFocusCapture = function (ev) { this.setState({ hasFocus: true }); this._events.on(this._rootElement, 'blur', this._onBlur, true); }; SearchBox.prototype._onKeyDown = function (ev) { switch (ev.which) { case Utilities_1.KeyCodes.escape: this._onClearClick(ev); break; case Utilities_1.KeyCodes.enter: if (this.props.onSearch && this.state.value.length > 0) { this.props.onSearch(this.state.value); } break; default: return; } // We only get here if the keypress has been handled. ev.preventDefault(); ev.stopPropagation(); }; SearchBox.prototype._onBlur = function (ev) { this._events.off(this._rootElement, 'blur'); this.setState({ hasFocus: false }); }; SearchBox.prototype._onInputChange = function (ev) { var value = this._inputElement.value; if (value === this._latestValue) { return; } this._latestValue = value; this.setState({ value: value }); this._callOnChange(value); }; SearchBox.prototype._callOnChange = function (newValue) { var _a = this.props, onChange = _a.onChange, onChanged = _a.onChanged; // Call @deprecated method. if (onChanged) { onChanged(newValue); } if (onChange) { onChange(newValue); } }; return SearchBox; }(Utilities_1.BaseComponent)); SearchBox.defaultProps = { labelText: 'Search', }; __decorate([ Utilities_1.autobind ], SearchBox.prototype, "_onClearClick", null); __decorate([ Utilities_1.autobind ], SearchBox.prototype, "_onFocusCapture", null); __decorate([ Utilities_1.autobind ], SearchBox.prototype, "_onKeyDown", null); __decorate([ Utilities_1.autobind ], SearchBox.prototype, "_onBlur", null); __decorate([ Utilities_1.autobind ], SearchBox.prototype, "_onInputChange", null); exports.SearchBox = SearchBox; /***/ }, /* 352 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_ec2202a4', iconContainer: 'iconContainer_ec2202a4', icon: 'icon_ec2202a4', field: 'field_ec2202a4', clearButton: 'clearButton_ec2202a4', label: 'label_ec2202a4', rootIsActive: 'rootIsActive_ec2202a4', rootIsDisabled: 'rootIsDisabled_ec2202a4', rootCanClear: 'rootCanClear_ec2202a4', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_ec2202a4{font-size:14px;font-weight:400;box-sizing:border-box;box-shadow:none;margin:0;padding:0;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;margin-bottom:10px;padding:0 0 0 8px;border:1px solid " }, { "theme": "themeTertiary", "defaultValue": "#71afe5" }, { "rawString": ";height:32px}html[dir=rtl] .root_ec2202a4{padding:0 8px 0 0}@media screen and (-ms-high-contrast:active){.root_ec2202a4{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_ec2202a4{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.iconContainer_ec2202a4{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";font-size:16px;width:32px;text-align:center;transition:width 167ms;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.icon_ec2202a4{opacity:1;transition:opacity 167ms 0s}.field_ec2202a4{box-sizing:border-box;box-shadow:none;margin:0;padding:0;border:none;outline:0;font-weight:inherit;font-family:inherit;font-size:inherit;color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";background-color:transparent;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0px;overflow:hidden;text-overflow:ellipsis;padding-bottom:.5px}.field_ec2202a4::-ms-clear{display:none}.clearButton_ec2202a4{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:none;cursor:pointer;text-align:center;font-size:12px;-ms-flex-preferred-size:32px;flex-basis:32px;-ms-flex-negative:0;flex-shrink:0;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_ec2202a4:hover{border-color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.root_ec2202a4:hover .label_ec2202a4{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.root_ec2202a4:hover .label_ec2202a4 .iconContainer_ec2202a4{color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.rootIsActive_ec2202a4{border-color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.rootIsActive_ec2202a4 .iconContainer_ec2202a4{width:4px;transition:width 167ms}.rootIsActive_ec2202a4 .icon_ec2202a4{opacity:0;opacity:0 0s 167ms}.rootIsDisabled_ec2202a4{border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.rootIsDisabled_ec2202a4 .iconContainer_ec2202a4{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.rootIsDisabled_ec2202a4 .field_ec2202a4{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";pointer-events:none;cursor:default}.rootCanClear_ec2202a4 .clearButton_ec2202a4{display:-webkit-box;display:-ms-flexbox;display:flex}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 353 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(354)); /***/ }, /* 354 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(355)); /***/ }, /* 355 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var Label_1 = __webpack_require__(189); var stylesImport = __webpack_require__(356); var styles = stylesImport; var ValuePosition; (function (ValuePosition) { ValuePosition[ValuePosition["Previous"] = 0] = "Previous"; ValuePosition[ValuePosition["Next"] = 1] = "Next"; })(ValuePosition = exports.ValuePosition || (exports.ValuePosition = {})); var Slider = (function (_super) { __extends(Slider, _super); function Slider(props) { var _this = _super.call(this, props) || this; _this._warnMutuallyExclusive({ 'value': 'defaultValue' }); _this._id = Utilities_1.getId('Slider'); var value = props.value || props.defaultValue || props.min; _this.state = { value: value, renderedValue: value }; return _this; } /** * Invoked when a component is receiving new props. This method is not called for the initial render. */ Slider.prototype.componentWillReceiveProps = function (newProps) { if (newProps.value !== undefined) { var value = Math.max(newProps.min, Math.min(newProps.max, newProps.value)); this.setState({ value: value, renderedValue: value }); } }; Slider.prototype.render = function () { var _a = this.props, ariaLabel = _a.ariaLabel, className = _a.className, disabled = _a.disabled, label = _a.label, max = _a.max, min = _a.min, showValue = _a.showValue, buttonProps = _a.buttonProps; var _b = this.state, value = _b.value, renderedValue = _b.renderedValue; var thumbOffsetPercent = (renderedValue - min) / (max - min) * 100; var onMouseDownProp = disabled ? {} : { onMouseDown: this._onMouseDownOrTouchStart }; var onTouchStartProp = disabled ? {} : { onTouchStart: this._onMouseDownOrTouchStart }; var onKeyDownProp = disabled ? {} : { onKeyDown: this._onKeyDown }; return (React.createElement("div", { className: Utilities_1.css('ms-Slider', styles.root, className, (_c = {}, _c['ms-Slider-enabled ' + styles.rootIsEnabled] = !disabled, _c['ms-Slider-disabled ' + styles.rootIsDisabled] = disabled, _c)), ref: 'root' }, label && (React.createElement(Label_1.Label, __assign({ className: styles.titleLabel }, ariaLabel ? {} : { 'htmlFor': this._id }), label)), React.createElement("div", { className: Utilities_1.css('ms-Slider-container', styles.container) }, React.createElement("button", __assign({ "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, onMouseDownProp, onTouchStartProp, onKeyDownProp, buttonProps, { className: Utilities_1.css('ms-Slider-slideBox', styles.slideBox, buttonProps.className, (_d = { 'ms-Slider-showValue': showValue }, _d['ms-Slider-showTransitions ' + styles.showTransitions] = (renderedValue === value), _d)), id: this._id, disabled: disabled, type: 'button', role: 'slider' }), React.createElement("div", { ref: 'sliderLine', className: Utilities_1.css('ms-Slider-line', styles.line) }, React.createElement("span", __assign({ ref: 'thumb', className: Utilities_1.css('ms-Slider-thumb', styles.thumb) }, ariaLabel ? { 'aria-label': ariaLabel } : {}, { style: Utilities_1.getRTL() ? { 'right': thumbOffsetPercent + '%' } : { 'left': thumbOffsetPercent + '%' } })), React.createElement("span", { className: Utilities_1.css('ms-Slider-active', styles.activeSection), style: { 'width': thumbOffsetPercent + '%' } }), React.createElement("span", { className: Utilities_1.css('ms-Slider-inactive', styles.inactiveSection), style: { 'width': (100 - thumbOffsetPercent) + '%' } }))), showValue && React.createElement(Label_1.Label, { className: Utilities_1.css('ms-Slider-value', styles.valueLabel) }, value)))); var _c, _d; }; Slider.prototype.focus = function () { if (this.refs.thumb) { this.refs.thumb.focus(); } }; Object.defineProperty(Slider.prototype, "value", { get: function () { return this.state.value; }, enumerable: true, configurable: true }); Slider.prototype._onMouseDownOrTouchStart = function (event) { if (event.type === 'mousedown') { this._events.on(window, 'mousemove', this._onMouseMoveOrTouchMove, true); this._events.on(window, 'mouseup', this._onMouseUpOrTouchEnd, true); } else if (event.type === 'touchstart') { this._events.on(window, 'touchmove', this._onMouseMoveOrTouchMove, true); this._events.on(window, 'touchend', this._onMouseUpOrTouchEnd, true); } this._onMouseMoveOrTouchMove(event, true); }; Slider.prototype._onMouseMoveOrTouchMove = function (event, suppressEventCancelation) { var _a = this.props, max = _a.max, min = _a.min, step = _a.step; var steps = (max - min) / step; var sliderPositionRect = this.refs.sliderLine.getBoundingClientRect(); var sliderLength = sliderPositionRect.width; var stepLength = sliderLength / steps; var currentSteps; if (event.type === 'mousedown' || event.type === 'mousemove') { currentSteps = Utilities_1.getRTL() ? (sliderPositionRect.right - event.clientX) / stepLength : (event.clientX - sliderPositionRect.left) / stepLength; } else if (event.type === 'touchstart' || event.type === 'touchmove') { currentSteps = Utilities_1.getRTL() ? (sliderPositionRect.right - event.touches[0].clientX) / stepLength : (event.touches[0].clientX - sliderPositionRect.left) / stepLength; } var currentValue; var renderedValue; // The value shouldn't be bigger than max or be smaller than min. if (currentSteps > Math.floor(steps)) { renderedValue = currentValue = max; } else if (currentSteps < 0) { renderedValue = currentValue = min; } else { renderedValue = min + step * currentSteps; currentValue = min + step * Math.round(currentSteps); } this._updateValue(currentValue, renderedValue); if (!suppressEventCancelation) { event.preventDefault(); event.stopPropagation(); } }; Slider.prototype._updateValue = function (value, renderedValue) { var _this = this; var valueChanged = value !== this.state.value; this.setState({ value: value, renderedValue: renderedValue }, function () { if (valueChanged && _this.props.onChange) { _this.props.onChange(_this.state.value); } }); }; Slider.prototype._onMouseUpOrTouchEnd = function () { // Synchronize the renderedValue to the actual value. this.setState({ renderedValue: this.state.value }); this._events.off(); }; Slider.prototype._onKeyDown = function (event) { var value = this.state.value; var _a = this.props, max = _a.max, min = _a.min, step = _a.step; var diff = 0; switch (event.which) { case Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.left): case Utilities_1.KeyCodes.down: diff = -step; break; case Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.right): case Utilities_1.KeyCodes.up: diff = step; break; case Utilities_1.KeyCodes.home: value = min; break; case Utilities_1.KeyCodes.end: value = max; break; default: return; } var newValue = Math.min(max, Math.max(min, value + diff)); this._updateValue(newValue, newValue); event.preventDefault(); event.stopPropagation(); }; return Slider; }(Utilities_1.BaseComponent)); Slider.defaultProps = { step: 1, min: 0, max: 10, showValue: true, disabled: false, buttonProps: {} }; __decorate([ Utilities_1.autobind ], Slider.prototype, "_onMouseDownOrTouchStart", null); __decorate([ Utilities_1.autobind ], Slider.prototype, "_onMouseMoveOrTouchMove", null); __decorate([ Utilities_1.autobind ], Slider.prototype, "_onMouseUpOrTouchEnd", null); __decorate([ Utilities_1.autobind ], Slider.prototype, "_onKeyDown", null); exports.Slider = Slider; /***/ }, /* 356 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_6b213d59', titleLabel: 'titleLabel_6b213d59', line: 'line_6b213d59', activeSection: 'activeSection_6b213d59', inactiveSection: 'inactiveSection_6b213d59', showTransitions: 'showTransitions_6b213d59', thumb: 'thumb_6b213d59', slideBox: 'slideBox_6b213d59', container: 'container_6b213d59', valueLabel: 'valueLabel_6b213d59', rootIsEnabled: 'rootIsEnabled_6b213d59', rootIsDisabled: 'rootIsDisabled_6b213d59', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_6b213d59{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:8px}.titleLabel_6b213d59{padding:0}.line_6b213d59{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.line_6b213d59 span{height:4px;border-radius:4px;box-sizing:border-box}.activeSection_6b213d59{background:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.activeSection_6b213d59{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.activeSection_6b213d59{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.inactiveSection_6b213d59{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.inactiveSection_6b213d59{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.inactiveSection_6b213d59{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.showTransitions_6b213d59 .thumb_6b213d59{transition:left 367ms cubic-bezier(.1,.9,.2,1)}.showTransitions_6b213d59 .activeSection_6b213d59,.showTransitions_6b213d59 .inactiveSection_6b213d59{transition:width 367ms cubic-bezier(.1,.9,.2,1)}.slideBox_6b213d59{background:0 0;border:none;padding:0;margin:0}.slideBox_6b213d59 .thumb_6b213d59{border:2px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";box-sizing:border-box;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";display:block;width:16px;height:16px;position:absolute;top:-6px;border-radius:10px}html[dir=ltr] .slideBox_6b213d59 .thumb_6b213d59{-webkit-transform:translateX(-50%);transform:translateX(-50%)}html[dir=rtl] .slideBox_6b213d59 .thumb_6b213d59{-webkit-transform:translateX(50%);transform:translateX(50%)}.container_6b213d59{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.slideBox_6b213d59{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:28px;line-height:28px;padding:0 8px}.slideBox_6b213d59::-moz-focus-inner{border:0}.slideBox_6b213d59{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .slideBox_6b213d59:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.valueLabel_6b213d59{-ms-flex-negative:1;flex-shrink:1;width:30px;margin:0 8px;line-height:1}.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .thumb_6b213d59,.rootIsEnabled_6b213d59 .slideBox_6b213d59:hover .thumb_6b213d59{border:2px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .thumb_6b213d59,.rootIsEnabled_6b213d59 .slideBox_6b213d59:hover .thumb_6b213d59{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .thumb_6b213d59,.rootIsEnabled_6b213d59 .slideBox_6b213d59:hover .thumb_6b213d59{border-color:#37006e}}.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .activeSection_6b213d59,.rootIsEnabled_6b213d59 .slideBox_6b213d59:hover .activeSection_6b213d59{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .activeSection_6b213d59,.rootIsEnabled_6b213d59 .slideBox_6b213d59:hover .activeSection_6b213d59{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .activeSection_6b213d59,.rootIsEnabled_6b213d59 .slideBox_6b213d59:hover .activeSection_6b213d59{background-color:#37006e}}.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .inactiveSection_6b213d59,.rootIsEnabled_6b213d59 .slideBox_6b213d59:hover .inactiveSection_6b213d59{background-color:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .inactiveSection_6b213d59,.rootIsEnabled_6b213d59 .slideBox_6b213d59:hover .inactiveSection_6b213d59{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .inactiveSection_6b213d59,.rootIsEnabled_6b213d59 .slideBox_6b213d59:hover .inactiveSection_6b213d59{border-color:#37006e}}.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .thumb_6b213d59{border:2px solid " }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .activeSection_6b213d59{background-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.rootIsDisabled_6b213d59 .thumb_6b213d59{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.rootIsDisabled_6b213d59 .thumb_6b213d59{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.rootIsDisabled_6b213d59 .thumb_6b213d59{border-color:#600000}}@media screen and (-ms-high-contrast:active){.rootIsDisabled_6b213d59 .activeSection_6b213d59,.rootIsDisabled_6b213d59 .inactiveSection_6b213d59{background-color:#0f0;border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.rootIsDisabled_6b213d59 .activeSection_6b213d59,.rootIsDisabled_6b213d59 .inactiveSection_6b213d59{background-color:#600000;border-color:#600000}}.rootIsDisabled_6b213d59 .activeSection_6b213d59{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.rootIsDisabled_6b213d59 .inactiveSection_6b213d59{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 357 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(358)); /***/ }, /* 358 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(359)); __export(__webpack_require__(360)); /***/ }, /* 359 */ /***/ 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 }); /* tslint:disable:no-unused-variable */ var React = __webpack_require__(2); /* tslint:enable:no-unused-variable */ var Utilities_1 = __webpack_require__(10); var TeachingBubbleContent_1 = __webpack_require__(360); var Callout_1 = __webpack_require__(59); var DirectionalHint_1 = __webpack_require__(58); var stylesImport = __webpack_require__(361); var styles = stylesImport; var TeachingBubble = (function (_super) { __extends(TeachingBubble, _super); // Constructor function TeachingBubble(props) { var _this = _super.call(this, props) || this; _this.state = {}; return _this; } TeachingBubble.prototype.render = function () { var _a = this.props, calloutProps = _a.calloutProps, targetElement = _a.targetElement; return (React.createElement(Callout_1.Callout, __assign({ className: Utilities_1.css('ms-TeachingBubble', styles.root), ref: this._resolveRef('_callout'), targetElement: targetElement }, calloutProps), React.createElement(TeachingBubbleContent_1.TeachingBubbleContent, __assign({}, this.props)))); }; return TeachingBubble; }(Utilities_1.BaseComponent)); // Specify default props values TeachingBubble.defaultProps = { calloutProps: { beakWidth: 16, gapSpace: 0, setInitialFocus: true, doNotLayer: false, directionalHint: DirectionalHint_1.DirectionalHint.rightCenter } }; exports.TeachingBubble = TeachingBubble; /***/ }, /* 360 */ /***/ 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 }); /* tslint:disable:no-unused-variable */ var React = __webpack_require__(2); /* tslint:enable:no-unused-variable */ var Utilities_1 = __webpack_require__(10); var Button_1 = __webpack_require__(154); var Image_1 = __webpack_require__(187); var stylesImport = __webpack_require__(361); var styles = stylesImport; var TeachingBubbleContent = (function (_super) { __extends(TeachingBubbleContent, _super); // Constructor function TeachingBubbleContent(props) { var _this = _super.call(this, props) || this; _this._id = Utilities_1.getId('TeachingBubble'); _this.state = {}; return _this; } TeachingBubbleContent.prototype.render = function () { var _a = this.props, illustrationImage = _a.illustrationImage, primaryButtonProps = _a.primaryButtonProps, secondaryButtonProps = _a.secondaryButtonProps, headline = _a.headline, hasCondensedHeadline = _a.hasCondensedHeadline, hasCloseIcon = _a.hasCloseIcon, onDismiss = _a.onDismiss, closeButtonAriaLabel = _a.closeButtonAriaLabel; var imageContent; var headerContent; var bodyContent; var footerContent; var closeButton; if (illustrationImage && illustrationImage.src) { imageContent = (React.createElement("div", { className: 'ms-TeachingBubble-header' }, React.createElement(Image_1.Image, __assign({}, illustrationImage)))); } if (headline) { headerContent = (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-header', hasCondensedHeadline ? 'ms-TeachingBubble-header--small ' + styles.headerIsSmall : 'ms-TeachingBubble-header--large ' + styles.headerIsLarge) }, React.createElement("p", { className: Utilities_1.css('ms-TeachingBubble-headline', styles.headline) }, headline))); } if (this.props.children) { bodyContent = (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-body', styles.body) }, React.createElement("p", { className: Utilities_1.css('ms-TeachingBubble-subText', styles.subText) }, this.props.children))); } if (primaryButtonProps || secondaryButtonProps) { footerContent = (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-footer', styles.footer) }, primaryButtonProps && (React.createElement(Button_1.PrimaryButton, __assign({}, primaryButtonProps, { className: Utilities_1.css('ms-TeachingBubble-primaryButton', styles.primaryButton, primaryButtonProps.className) }))), secondaryButtonProps && (React.createElement(Button_1.DefaultButton, __assign({}, secondaryButtonProps, { className: Utilities_1.css('ms-TeachingBubble-secondaryButton', styles.secondaryButton, secondaryButtonProps.className) }))))); } if (hasCloseIcon) { closeButton = (React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-TeachingBubble-closebutton', styles.closeButton), iconProps: { iconName: 'Cancel' }, title: closeButtonAriaLabel, ariaLabel: closeButtonAriaLabel, onClick: onDismiss })); } return (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-content') }, imageContent, closeButton, React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-bodycontent', styles.bodyContent) }, headerContent, bodyContent, footerContent))); }; return TeachingBubbleContent; }(Utilities_1.BaseComponent)); // Specify default props values TeachingBubbleContent.defaultProps = { hasCondensedHeadline: false, imageProps: { imageFit: Image_1.ImageFit.cover, width: 364, height: 130 } }; exports.TeachingBubbleContent = TeachingBubbleContent; /***/ }, /* 361 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_f02ca86d', bodyContent: 'bodyContent_f02ca86d', headerIsLarge: 'headerIsLarge_f02ca86d', headline: 'headline_f02ca86d', headerIsSmall: 'headerIsSmall_f02ca86d', body: 'body_f02ca86d', subText: 'subText_f02ca86d', closeButton: 'closeButton_f02ca86d', footer: 'footer_f02ca86d', primaryButton: 'primaryButton_f02ca86d', secondaryButton: 'secondaryButton_f02ca86d', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_f02ca86d{display:block;max-width:364px}.bodyContent_f02ca86d{padding:20px}.headerIsLarge_f02ca86d:not(:last-child){margin-bottom:14px}.headline_f02ca86d{margin:0;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.headerIsLarge_f02ca86d .headline_f02ca86d{font-size:28px;font-weight:100;font-weight:100}.headerIsSmall_f02ca86d .headline_f02ca86d{font-size:14px;font-weight:400;font-weight:600}[dir=ltr] .headerIsSmall_f02ca86d .headline_f02ca86d{margin-right:10px}[dir=rtl] .headerIsSmall_f02ca86d .headline_f02ca86d{margin-left:10px}.body_f02ca86d:not(:last-child){margin-bottom:20px}.subText_f02ca86d{margin:0;font-size:14px;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-weight:300}.root_f02ca86d .closeButton_f02ca86d{position:absolute;top:0;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-size:12px}[dir=ltr] .root_f02ca86d .closeButton_f02ca86d{right:0}[dir=rtl] .root_f02ca86d .closeButton_f02ca86d{left:0}html[dir=ltr] .footer_f02ca86d .ms-Button:not(:first-child){margin-left:20px}html[dir=rtl] .footer_f02ca86d .ms-Button:not(:first-child){margin-right:20px}.root_f02ca86d .ms-Callout-beak,.root_f02ca86d .ms-Callout-main,.root_f02ca86d .ms-Callout-smallbeak{background:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_f02ca86d .primaryButton_f02ca86d{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_f02ca86d .primaryButton_f02ca86d .ms-Button-label{font-size:14px;font-weight:400;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_f02ca86d .primaryButton_f02ca86d:hover{background-color:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": ";border-color:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": "}.root_f02ca86d .primaryButton_f02ca86d:focus{background-color:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_f02ca86d .primaryButton_f02ca86d:active{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_f02ca86d .secondaryButton_f02ca86d{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_f02ca86d .secondaryButton_f02ca86d .ms-Button-label{font-size:14px;font-weight:400;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_f02ca86d .secondaryButton_f02ca86d:hover{background-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_f02ca86d .secondaryButton_f02ca86d:focus{background-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_f02ca86d .secondaryButton_f02ca86d:active{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 362 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(363)); /***/ }, /* 363 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(364)); /***/ }, /* 364 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __webpack_require__(2); var Utilities_1 = __webpack_require__(10); var Label_1 = __webpack_require__(189); var Styling_1 = __webpack_require__(68); var Toggle_styles_1 = __webpack_require__(365); var Toggle = (function (_super) { __extends(Toggle, _super); function Toggle(props) { var _this = _super.call(this) || this; _this._warnMutuallyExclusive({ checked: 'defaultChecked' }); _this.state = { isChecked: !!(props.checked || props.defaultChecked) }; _this._id = props.id || Utilities_1.getId('Toggle'); return _this; } Object.defineProperty(Toggle.prototype, "checked", { /** * Gets the current checked state of the toggle. */ get: function () { return this.state.isChecked; }, enumerable: true, configurable: true }); Toggle.prototype.componentWillReceiveProps = function (newProps) { if (newProps.checked !== undefined) { this.setState({ isChecked: !!newProps.checked // convert null to false }); } }; Toggle.prototype.render = function () { // This control is using an input element for more universal accessibility support. // Previously a button and the aria-pressed attribute were used. This technique works well with Narrator + Edge and NVDA + FireFox. // However, JAWS and VoiceOver did not announce anything when the toggle was checked or unchecked. // In the future when more screenreaders support aria-pressed it would be a good idea to change this control back to using it as it is // more semantically correct. var _this = this; var _a = this.props, className = _a.className, customStyles = _a.styles, disabled = _a.disabled, label = _a.label, offAriaLabel = _a.offAriaLabel, offText = _a.offText, onAriaLabel = _a.onAriaLabel, onText = _a.onText; var isChecked = this.state.isChecked; var stateText = isChecked ? onText : offText; var ariaLabel = isChecked ? onAriaLabel : offAriaLabel; var toggleNativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.inputProperties, ['defaultChecked']); var classNames = this._getClassNames(Toggle_styles_1.getStyles(undefined, customStyles), className, disabled, isChecked); return (React.createElement("div", { className: classNames.root }, label && (React.createElement(Label_1.Label, { htmlFor: this._id, className: classNames.label }, label)), React.createElement("div", { className: classNames.container }, React.createElement("button", __assign({}, toggleNativeProps, { className: classNames.pill, ref: function (c) { return _this._toggleButton = c; }, "aria-disabled": disabled, "aria-pressed": isChecked, id: this._id, onChange: function () { }, disabled: disabled, "data-is-focusable": true, onClick: this._onClick }), React.createElement("div", { className: classNames.thumb })), stateText && (React.createElement(Label_1.Label, { className: classNames.text }, stateText))))); }; Toggle.prototype.focus = function () { if (this._toggleButton) { this._toggleButton.focus(); } }; Toggle.prototype._onClick = function (ev) { var _a = this.props, checked = _a.checked, onChanged = _a.onChanged, onClick = _a.onClick; var isChecked = this.state.isChecked; // Only update the state if the user hasn't provided it. if (checked === undefined) { this.setState({ isChecked: !isChecked }); } if (onChanged) { onChanged(!isChecked); } if (onClick) { onClick(ev); } }; Toggle.prototype._getClassNames = function (styles, className, disabled, isChecked) { return { root: Styling_1.mergeStyles('ms-Toggle', isChecked && 'is-checked', !disabled && 'is-enabled', disabled && 'is-disabled', className, styles.root), label: Styling_1.mergeStyles('ms-Toggle-label', styles.label), container: Styling_1.mergeStyles('ms-Toggle-innerContainer', styles.container), pill: Styling_1.mergeStyles('ms-Toggle-background', styles.pill, !disabled && [ !isChecked && { ':hover': styles.pillHovered, ':hover .ms-Toggle-thumb': styles.thumbHovered }, isChecked && [ styles.pillChecked, { ':hover': styles.pillCheckedHovered, ':hover .ms-Toggle-thumb': styles.thumbCheckedHovered } ] ], disabled && [ !isChecked && styles.pillDisabled, isChecked && styles.pillCheckedDisabled, ]), thumb: Styling_1.mergeStyles('ms-Toggle-thumb', styles.thumb, !disabled && isChecked && styles.thumbChecked, disabled && [ !isChecked && styles.thumbDisabled, isChecked && styles.thumbCheckedDisabled ]), text: Styling_1.mergeStyles('ms-Toggle-stateText', styles.text), }; }; ; return Toggle; }(Utilities_1.BaseComponent)); __decorate([ Utilities_1.autobind ], Toggle.prototype, "_onClick", null); __decorate([ Utilities_1.memoize ], Toggle.prototype, "_getClassNames", null); exports.Toggle = Toggle; /***/ }, /* 365 */ /***/ function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var Styling_1 = __webpack_require__(68); var Utilities_1 = __webpack_require__(10); exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) { if (theme === void 0) { theme = Styling_1.getTheme(); } var semanticColors = theme.semanticColors; var pillUncheckedBackground = semanticColors.bodyBackground; var pillCheckedBackground = semanticColors.inputBackgroundSelected; var pillCheckedHoveredBackground = semanticColors.inputBackgroundSelectedHovered; var pillCheckedDisabledBackground = semanticColors.disabledText; var thumbBackground = semanticColors.inputBorderHovered; var thumbCheckedBackground = semanticColors.inputForegroundSelected; var thumbDisabledBackground = semanticColors.disabledText; var thumbCheckedDisabledBackground = semanticColors.disabledBackground; var pillBorderColor = semanticColors.inputBorder; var pillBorderHoveredColor = semanticColors.inputBorderHovered; var pillBorderDisabledColor = semanticColors.disabledText; var toggleFocusBorderColor = semanticColors.focusBorder; var styles = { root: { marginBottom: '8px' }, container: [ { display: 'inline-flex', position: 'relative', } ], pill: [ Styling_1.getFocusStyle(theme, '-1px'), { fontSize: '20px', lineHeight: '1em', boxSizing: 'border-box', position: 'relative', width: '2.2em', height: '1em', borderRadius: '1em', transition: 'all 0.1s ease', borderWidth: '1px', borderStyle: 'solid', background: pillUncheckedBackground, borderColor: pillBorderColor, } ], pillHovered: { borderColor: pillBorderHoveredColor }, pillChecked: { background: pillCheckedBackground, borderColor: 'transparent', }, pillCheckedHovered: { backgroundColor: pillCheckedHoveredBackground, borderColor: 'transparent' }, pillDisabled: { borderColor: pillBorderDisabledColor }, pillCheckedDisabled: { backgroundColor: pillCheckedDisabledBackground, borderColor: 'transparent' }, thumb: { width: '.5em', height: '.5em', borderRadius: '.5em', position: 'absolute', top: '.2em', transition: 'all 0.1s ease', backgroundColor: thumbBackground, left: '.2em' }, thumbChecked: { backgroundColor: thumbCheckedBackground, left: '1.4em' }, thumbDisabled: { backgroundColor: thumbDisabledBackground, left: '.2em', }, thumbCheckedDisabled: { backgroundColor: thumbCheckedDisabledBackground, left: '1.4em' }, text: { // Workaround; until Label is converted and we can pass in custom styles, we need to make this // more specific. Once Label is converted, we should be able to just pull in the customized styling. '.ms-Toggle-stateText': { padding: '0', margin: '0 10px', userSelect: 'none' } } }; return Styling_1.mergeStyleSets(styles, customStyles); }); /***/ }, /* 366 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(367)); /***/ }, /* 367 */ /***/ function(module, exports, __webpack_require__) { "use strict"; function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); __export(__webpack_require__(368)); __export(__webpack_require__(369)); __export(__webpack_require__(371)); __export(__webpack_require__(372)); __export(__webpack_require__(58)); /***/ }, /* 368 */ /***/ 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 }); /* tslint:disable:no-unused-variable */ var React = __webpack_require__(2); /* tslint:enable:no-unused-variable */ var Utilities_1 = __webpack_require__(10); var Tooltip_Props_1 = __webpack_require__(369); var Callout_1 = __webpack_require__(59); var DirectionalHint_1 = __webpack_require__(58); var stylesImport = __webpack_require__(370); var styles = stylesImport; var Styling_1 = __webpack_require__(68); var Tooltip = (function (_super) { __extends(Tooltip, _super); function Tooltip() { return _super !== null && _super.apply(this, arguments) || this; } Tooltip.prototype.render = function () { var _a = this.props, targetElement = _a.targetElement, content = _a.content, calloutProps = _a.calloutProps, directionalHint = _a.directionalHint, delay = _a.delay, id = _a.id, _b = _a.onRenderContent, onRenderContent = _b === void 0 ? this._onRenderContent : _b; return (React.createElement(Callout_1.Callout, __assign({ className: Utilities_1.css('ms-Tooltip', Styling_1.AnimationClassNames.fadeIn200, styles.root, (_c = {}, _c[styles.hasMediumDelay] = delay === Tooltip_Props_1.TooltipDelay.medium, _c)), targetElement: targetElement, directionalHint: directionalHint }, calloutProps, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties)), React.createElement("div", { className: Utilities_1.css('ms-Tooltip-content', styles.content), id: id, role: 'tooltip' }, onRenderContent(this.props, this._onRenderContent)))); var _c; }; Tooltip.prototype._onRenderContent = function (props) { return (React.createElement("p", { className: Utilities_1.css('ms-Tooltip-subText', styles.subText) }, props.content)); }; return Tooltip; }(Utilities_1.BaseComponent)); // Specify default props values Tooltip.defaultProps = { directionalHint: DirectionalHint_1.DirectionalHint.topCenter, delay: Tooltip_Props_1.TooltipDelay.medium, calloutProps: { isBeakVisible: true, beakWidth: 16, gapSpace: 0, setInitialFocus: true, doNotLayer: false } }; exports.Tooltip = Tooltip; /***/ }, /* 369 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var TooltipDelay; (function (TooltipDelay) { TooltipDelay[TooltipDelay["zero"] = 0] = "zero"; TooltipDelay[TooltipDelay["medium"] = 1] = "medium"; })(TooltipDelay = exports.TooltipDelay || (exports.TooltipDelay = {})); /***/ }, /* 370 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { root: 'root_9f132af5', hasMediumDelay: 'hasMediumDelay_9f132af5', content: 'content_9f132af5', subText: 'subText_9f132af5', }; load_themed_styles_1.loadStyles([{ "rawString": ".root_9f132af5{max-width:364px;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";padding:8px;pointer-events:none}.root_9f132af5.hasMediumDelay_9f132af5{-webkit-animation-delay:.3s;animation-delay:.3s}.content_9f132af5{font-size:12px;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";word-wrap:break-word;overflow-wrap:break-word}.subText_9f132af5{margin:0}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 371 */ /***/ 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; }; var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; Object.defineProperty(exports, "__esModule", { value: true }); /* tslint:disable:no-unused-variable */ var React = __webpack_require__(2); /* tslint:enable:no-unused-variable */ var Utilities_1 = __webpack_require__(10); var TooltipHost_Props_1 = __webpack_require__(372); var Tooltip_1 = __webpack_require__(368); var Tooltip_Props_1 = __webpack_require__(369); var stylesImport = __webpack_require__(373); var styles = stylesImport; var TooltipHost = (function (_super) { __extends(TooltipHost, _super); // Constructor function TooltipHost(props) { var _this = _super.call(this, props) || this; _this.state = { isTooltipVisible: false }; return _this; } // Render TooltipHost.prototype.render = function () { var _a = this.props, calloutProps = _a.calloutProps, tooltipProps = _a.tooltipProps, content = _a.content, children = _a.children, directionalHint = _a.directionalHint, delay = _a.delay, id = _a.id, hostClassName = _a.hostClassName; var isTooltipVisible = this.state.isTooltipVisible; var tooltipId = id || Utilities_1.getId('tooltip'); return (React.createElement("div", __assign({ className: Utilities_1.css('ms-TooltipHost', styles.host, hostClassName), ref: this._resolveRef('_tooltipHost') }, { onFocusCapture: this._onTooltipMouseEnter }, { onBlurCapture: this._onTooltipMouseLeave }, { onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave, "aria-describedby": isTooltipVisible ? tooltipId : undefined }), children, isTooltipVisible && (React.createElement(Tooltip_1.Tooltip, __assign({}, tooltipProps, { id: tooltipId, delay: delay, content: content, targetElement: this._getTargetElement(), directionalHint: directionalHint, calloutProps: Utilities_1.assign(calloutProps, { onDismiss: this._onTooltipCallOutDismiss }) }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties)))))); }; TooltipHost.prototype._getTargetElement = function () { var overflowMode = this.props.overflowMode; // Select target element based on overflow mode. For parent mode, you want to position the tooltip relative // to the parent element, otherwise it might look off. if (overflowMode !== undefined) { switch (overflowMode) { case TooltipHost_Props_1.TooltipOverflowMode.Parent: return this._tooltipHost.parentElement; case TooltipHost_Props_1.TooltipOverflowMode.Self: return this._tooltipHost; } } return this._tooltipHost; }; // Show Tooltip TooltipHost.prototype._onTooltipMouseEnter = function (ev) { var overflowMode = this.props.overflowMode; if (overflowMode !== undefined) { var overflowElement = this._getTargetElement(); if (overflowElement && !Utilities_1.hasOverflow(overflowElement)) { return; } } this.setState({ isTooltipVisible: true }); }; // Hide Tooltip TooltipHost.prototype._onTooltipMouseLeave = function (ev) { this.setState({ isTooltipVisible: false }); }; // Hide Tooltip TooltipHost.prototype._onTooltipCallOutDismiss = function () { this.setState({ isTooltipVisible: false }); }; return TooltipHost; }(Utilities_1.BaseComponent)); TooltipHost.defaultProps = { delay: Tooltip_Props_1.TooltipDelay.medium }; __decorate([ Utilities_1.autobind ], TooltipHost.prototype, "_onTooltipMouseEnter", null); __decorate([ Utilities_1.autobind ], TooltipHost.prototype, "_onTooltipMouseLeave", null); __decorate([ Utilities_1.autobind ], TooltipHost.prototype, "_onTooltipCallOutDismiss", null); exports.TooltipHost = TooltipHost; /***/ }, /* 372 */ /***/ function(module, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var TooltipOverflowMode; (function (TooltipOverflowMode) { /** Only show tooltip if parent DOM element is overflowing */ TooltipOverflowMode[TooltipOverflowMode["Parent"] = 0] = "Parent"; /** Only show tooltip if tooltip host's content is overflowing */ TooltipOverflowMode[TooltipOverflowMode["Self"] = 1] = "Self"; })(TooltipOverflowMode = exports.TooltipOverflowMode || (exports.TooltipOverflowMode = {})); /***/ }, /* 373 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ var load_themed_styles_1 = __webpack_require__(18); var styles = { host: 'host_e1b7b906', }; load_themed_styles_1.loadStyles([{ "rawString": ".host_e1b7b906{display:inline}" }]); module.exports = styles; /* tslint:enable */ /***/ }, /* 374 */, /* 375 */, /* 376 */, /* 377 */ /***/ function(module, exports) { /* MIT License http://www.opensource.org/licenses/mit-license.php Author Tobias Koppers @sokra */ // css base code, injected by the css-loader module.exports = function() { var list = []; // return the list of modules as css string list.toString = function toString() { var result = []; for(var i = 0; i < this.length; i++) { var item = this[i]; if(item[2]) { result.push("@media " + item[2] + "{" + item[1] + "}"); } else { result.push(item[1]); } } return result.join(""); }; // import a list of modules into the list list.i = function(modules, mediaQuery) { if(typeof modules === "string") modules = [[null, modules, ""]]; var alreadyImportedModules = {}; for(var i = 0; i < this.length; i++) { var id = this[i][0]; if(typeof id === "number") alreadyImportedModules[id] = true; } for(i = 0; i < modules.length; i++) { var item = modules[i]; // skip already imported module // this implementation is not 100% perfect for weird media query combinations // when a module is imported multiple times with different media queries. // I hope this will never occur (Hey this way we have smaller bundles) if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { if(mediaQuery && !item[2]) { item[2] = mediaQuery; } else if(mediaQuery) { item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; } list.push(item); } } }; return list; }; /***/ }, /* 378 */ /***/ function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE_378__; /***/ }, /* 379 */ /***/ function(module, exports) { "use strict"; var SearchUtils = (function () { function SearchUtils() { } SearchUtils.getValueFromResults = function (key, results) { var value = undefined; if (results && results.length > 0 && key) { for (var i = 0; i < results.length; i++) { var resultItem = results[i]; if (resultItem.Key === key) { value = resultItem.Value; break; } } } return value; }; SearchUtils.getPreviewImageUrl = function (result, siteUrl) { var uniqueID = SearchUtils.getValueFromResults('uniqueID', result); var siteId = SearchUtils.getValueFromResults('siteID', result); var webId = SearchUtils.getValueFromResults('webID', result); var docId = SearchUtils.getValueFromResults('DocId', result); if (uniqueID && siteId && webId && docId) { return siteUrl + "/_layouts/15/getpreview.ashx?guidFile=" + uniqueID + "&guidSite=" + siteId + "&guidWeb=" + webId + "&docid=" + docId + "\n &metadatatoken=300x424x2&ClientType=CodenameOsloWeb&size=small"; } else { return ''; } }; SearchUtils.getActionName = function (actionId) { switch (actionId) { case 1001: return 'Viewed'; case 1003: return 'Modified'; default: return ''; } }; return SearchUtils; }()); exports.SearchUtils = SearchUtils; /***/ }, /* 380 */ /***/ function(module, exports) { "use strict"; var Utils = (function () { function Utils() { } Utils.getUserPhotoUrl = function (userEmail, siteUrl, size) { if (size === void 0) { size = 'S'; } return siteUrl + "/_layouts/15/userphoto.aspx?size=" + size + "&accountname=" + userEmail; }; Utils.trim = function (s) { if (s && s.length > 0) { return s.replace(/^\s+|\s+$/gm, ''); } else { return s; } }; return Utils; }()); exports.Utils = Utils; /***/ }, /* 381 */, /* 382 */ /***/ function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE_382__; /***/ }, /* 383 */ /***/ function(module, exports, __webpack_require__) { "use strict"; var __extends = (this && this.__extends) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; var React = __webpack_require__(2); var office_ui_fabric_react_1 = __webpack_require__(6); var TrendingInTheSitesIFollow_module_scss_1 = __webpack_require__(384); var sp_http_1 = __webpack_require__(378); var SearchUtils_1 = __webpack_require__(379); var Utils_1 = __webpack_require__(380); var TrendingInTheSitesIFollow = (function (_super) { __extends(TrendingInTheSitesIFollow, _super); function TrendingInTheSitesIFollow(props, state) { var _this = _super.call(this, props) || this; _this.state = { trendingDocuments: [], loading: true, error: null }; return _this; } TrendingInTheSitesIFollow.prototype.componentDidMount = function () { this.loadDocuments(this.props.siteUrl, this.props.numberOfDocuments); }; TrendingInTheSitesIFollow.prototype.componentDidUpdate = function (prevProps, prevState, prevContext) { if (this.props.numberOfDocuments !== prevProps.numberOfDocuments || this.props.siteUrl !== prevProps.siteUrl && (this.props.numberOfDocuments && this.props.siteUrl)) { this.loadDocuments(this.props.siteUrl, this.props.numberOfDocuments); } }; TrendingInTheSitesIFollow.prototype.render = function () { var loading = this.state.loading ? React.createElement("div", { style: { margin: '0 auto' } }, React.createElement(office_ui_fabric_react_1.Spinner, { label: 'Loading...' })) : React.createElement("div", null); var error = this.state.error ? React.createElement("div", null, React.createElement("strong", null, "Error: "), " ", this.state.error) : React.createElement("div", null); var documents = this.state.trendingDocuments.map(function (doc, i) { var iconUrl = "https://spoprod-a.akamaihd.net/files/odsp-next-prod_ship-2016-08-15_20160815.002/odsp-media/images/filetypes/32/" + doc.extension + ".png"; return (React.createElement(office_ui_fabric_react_1.DocumentCard, { onClickHref: doc.url, key: doc.id }, React.createElement(office_ui_fabric_react_1.DocumentCardPreview, { previewImages: [ { previewImageSrc: doc.previewImageUrl, iconSrc: iconUrl, width: 318, height: 196, accentColor: '#ce4b1f' } ] }), React.createElement(office_ui_fabric_react_1.DocumentCardTitle, { title: doc.title }), React.createElement(office_ui_fabric_react_1.DocumentCardLocation, { location: doc.webTitle, locationHref: doc.webUrl }), React.createElement(office_ui_fabric_react_1.DocumentCardActivity, { activity: doc.activity.name + " " + doc.activity.date, people: [ { name: doc.activity.actorName, profileImageSrc: doc.activity.actorPhotoUrl } ] }))); }); return (React.createElement("div", { className: TrendingInTheSitesIFollow_module_scss_1.default.trendingInTheSitesIFollow }, React.createElement("div", { className: office_ui_fabric_react_1.css('ms-font-xl', TrendingInTheSitesIFollow_module_scss_1.default.webPartTitle) }, this.props.title), loading, error, documents, React.createElement("div", { style: { clear: 'both' } }))); }; TrendingInTheSitesIFollow.prototype.loadDocuments = function (siteUrl, numberOfDocuments) { var _this = this; this.setState({ loading: true, error: undefined, trendingDocuments: [] }); var trendingDocuments = []; this.getSitesIFollow(siteUrl) .then(function (sitesIFollow) { return _this.getTrendingDocuments(sitesIFollow, siteUrl, numberOfDocuments); }) .then(function (trendingDocuments) { _this.setState({ loading: false, error: undefined, trendingDocuments: trendingDocuments }); }, function (error) { _this.setState({ loading: false, error: error, trendingDocuments: [] }); }); return; }; TrendingInTheSitesIFollow.prototype.getSitesIFollow = function (siteUrl) { var _this = this; return new Promise(function (resolve, reject) { _this.props.httpClient.get(siteUrl + "/_api/social.following/my/followed(types=4)", sp_http_1.SPHttpClient.configurations.v1, { headers: { 'Accept': 'application/json;odata=nometadata', 'odata-version': '' } }) .then(function (response) { return response.json(); }) .then(function (sitesIFollowInfo) { var sitesIFollow = []; for (var i = 0; i < sitesIFollowInfo.value.length; i++) { sitesIFollow.push(sitesIFollowInfo.value[i].Uri); } resolve(sitesIFollow); }, function (error) { reject(error); }); }); }; TrendingInTheSitesIFollow.prototype.getTrendingDocuments = function (sitesIFollow, siteUrl, numberOfDocuments) { var _this = this; return new Promise(function (resolve, reject) { if (sitesIFollow.length === 0) { return resolve([]); } var query = '('; for (var i = 0; i < sitesIFollow.length; i++) { if (query.length > 1) { query += ' OR '; } query += "Path:\"" + sitesIFollow[i] + "\""; } query += ') AND (IsDocument:1)'; var postData = JSON.stringify({ 'request': { '__metadata': { 'type': 'Microsoft.Office.Server.Search.REST.SearchRequest' }, 'Querytext': query, 'SelectProperties': { 'results': ['Author', 'AuthorOwsUser', 'DocId', 'DocumentPreviewMetadata', 'Edges', 'EditorOwsUser', 'FileExtension', 'FileType', 'HitHighlightedProperties', 'HitHighlightedSummary', 'LastModifiedTime', 'LikeCountLifetime', 'ListID', 'ListItemID', 'OriginalPath', 'Path', 'Rank', 'SPWebUrl', 'SecondaryFileExtension', 'ServerRedirectedURL', 'SiteTitle', 'Title', 'ViewCountLifetime', 'siteID', 'uniqueID', 'webID'] }, 'ClientType': 'TrendingInTheSitesIFollow', 'BypassResultTypes': 'true', 'RowLimit': numberOfDocuments, 'StartRow': '0', 'RankingModelId': '0c77ded8-c3ef-466d-929d-905670ea1d72', 'Properties': { 'results': [{ 'Name': 'IncludeExternalContent', 'Value': { 'BoolVal': 'True', 'QueryPropertyValueTypeIndex': 3 } }, { 'Name': 'GraphQuery', 'Value': { 'StrVal': 'actor(ME,action:1021)', 'QueryPropertyValueTypeIndex': 1 } }] } } }); _this.props.httpClient.post(siteUrl + "/_api/search/postquery", sp_http_1.SPHttpClient.configurations.v1, { headers: { 'Accept': 'application/json;odata=nometadata', 'Content-type': 'application/json;odata=verbose', 'odata-version': '' }, body: postData }) .then(function (response) { return response.json(); }) .then(function (response) { if (!response || !response.PrimaryQueryResult || !response.PrimaryQueryResult.RelevantResults || response.PrimaryQueryResult.RelevantResults.RowCount === 0) { resolve([]); return; } var trendingDocuments = []; for (var i = 0; i < response.PrimaryQueryResult.RelevantResults.Table.Rows.length; i++) { var row = response.PrimaryQueryResult.RelevantResults.Table.Rows[i]; var cells = row.Cells; var editorInfo = SearchUtils_1.SearchUtils.getValueFromResults('EditorOwsUser', cells).split('|'); var modifiedDate = new Date(SearchUtils_1.SearchUtils.getValueFromResults('LastModifiedTime', cells).replace('.0000000', '')); var dateString = (modifiedDate.getMonth() + 1) + '/' + modifiedDate.getDate() + '/' + modifiedDate.getFullYear(); trendingDocuments.push({ id: SearchUtils_1.SearchUtils.getValueFromResults('DocId', cells), url: SearchUtils_1.SearchUtils.getValueFromResults('ServerRedirectedURL', cells), webUrl: SearchUtils_1.SearchUtils.getValueFromResults('SPWebUrl', cells), webTitle: SearchUtils_1.SearchUtils.getValueFromResults('SiteTitle', cells), title: SearchUtils_1.SearchUtils.getValueFromResults('Title', cells), previewImageUrl: SearchUtils_1.SearchUtils.getPreviewImageUrl(cells, siteUrl), extension: SearchUtils_1.SearchUtils.getValueFromResults('FileType', cells), activity: { actorId: -1, actorName: Utils_1.Utils.trim(editorInfo[1]), actorPhotoUrl: Utils_1.Utils.getUserPhotoUrl(Utils_1.Utils.trim(editorInfo[0]), siteUrl), date: dateString, name: 'Modified' } }); } resolve(trendingDocuments); }, function (error) { reject(error); }); }); }; return TrendingInTheSitesIFollow; }(React.Component)); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = TrendingInTheSitesIFollow; /***/ }, /* 384 */ /***/ function(module, exports, __webpack_require__) { "use strict"; /* tslint:disable */ __webpack_require__(385); var styles = { trendingInTheSitesIFollow: 'trendingInTheSitesIFollow_e41074f2', webPartTitle: 'webPartTitle_e41074f2', }; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = styles; /* tslint:enable */ /***/ }, /* 385 */ /***/ function(module, exports, __webpack_require__) { var content = __webpack_require__(386); var loader = __webpack_require__(18); if(typeof content === "string") content = [[module.id, content]]; // add the styles to the DOM for (var i = 0; i < content.length; i++) loader.loadStyles(content[i][1]); if(content.locals) module.exports = content.locals; /***/ }, /* 386 */ /***/ function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__(377)(); // imports // module exports.push([module.id, ".trendingInTheSitesIFollow_e41074f2 .webPartTitle_e41074f2{margin-bottom:.7em;margin-left:.38em}.trendingInTheSitesIFollow_e41074f2 .ms-DocumentCard{float:left;margin:.5em}.trendingInTheSitesIFollow_e41074f2 .ms-Spinner{width:7em;margin:0 auto}", ""]); // exports /***/ } /******/ ])});; //# sourceMappingURL=trending-in-the-sites-i-follow.bundle.js.map