...
\n * }\n */\nexport function useMergeRefs(refs, defaultValue) {\n return useCallbackRef(defaultValue, function (newValue) {\n return refs.forEach(function (ref) { return assignRef(ref, newValue); });\n });\n}\n","import { useState } from 'react';\n/**\n * creates a MutableRef with ref change callback\n * @param initialValue - initial ref value\n * @param {Function} callback - a callback to run when value changes\n *\n * @example\n * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);\n * ref.current = 1;\n * // prints 0 -> 1\n *\n * @see https://reactjs.org/docs/hooks-reference.html#useref\n * @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref\n * @returns {MutableRefObject}\n */\nexport function useCallbackRef(initialValue, callback) {\n var ref = useState(function () { return ({\n // value\n value: initialValue,\n // last callback\n callback: callback,\n // \"memoized\" public interface\n facade: {\n get current() {\n return ref.value;\n },\n set current(value) {\n var last = ref.value;\n if (last !== value) {\n ref.value = value;\n ref.callback(value, last);\n }\n }\n }\n }); })[0];\n // update callback\n ref.callback = callback;\n return ref.facade;\n}\n","/**\n * Assigns a value for a given ref, no matter of the ref format\n * @param {RefObject} ref - a callback function or ref object\n * @param value - a new value\n *\n * @see https://github.com/theKashey/use-callback-ref#assignref\n * @example\n * const refObject = useRef();\n * const refFn = (ref) => {....}\n *\n * assignRef(refObject, \"refValue\");\n * assignRef(refFn, \"refValue\");\n */\nexport function assignRef(ref, value) {\n if (typeof ref === 'function') {\n ref(value);\n }\n else if (ref) {\n ref.current = value;\n }\n return ref;\n}\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nexport var hiddenGuard = {\n width: '1px',\n height: '0px',\n padding: 0,\n overflow: 'hidden',\n position: 'fixed',\n top: '1px',\n left: '1px'\n};\n\nvar InFocusGuard = function InFocusGuard(_ref) {\n var children = _ref.children;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"div\", {\n key: \"guard-first\",\n \"data-focus-guard\": true,\n \"data-focus-auto-guard\": true,\n style: hiddenGuard\n }), children, children && /*#__PURE__*/React.createElement(\"div\", {\n key: \"guard-last\",\n \"data-focus-guard\": true,\n \"data-focus-auto-guard\": true,\n style: hiddenGuard\n }));\n};\n\nInFocusGuard.propTypes = process.env.NODE_ENV !== \"production\" ? {\n children: PropTypes.node\n} : {};\nInFocusGuard.defaultProps = {\n children: null\n};\nexport default InFocusGuard;","import * as tslib_1 from \"tslib\";\nfunction ItoI(a) {\n return a;\n}\nfunction innerCreateMedium(defaults, middleware) {\n if (middleware === void 0) { middleware = ItoI; }\n var buffer = [];\n var assigned = false;\n var medium = {\n read: function () {\n if (assigned) {\n throw new Error('Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.');\n }\n if (buffer.length) {\n return buffer[buffer.length - 1];\n }\n return defaults;\n },\n useMedium: function (data) {\n var item = middleware(data, assigned);\n buffer.push(item);\n return function () {\n buffer = buffer.filter(function (x) { return x !== item; });\n };\n },\n assignSyncMedium: function (cb) {\n assigned = true;\n while (buffer.length) {\n var cbs = buffer;\n buffer = [];\n cbs.forEach(cb);\n }\n buffer = {\n push: function (x) { return cb(x); },\n filter: function () { return buffer; },\n };\n },\n assignMedium: function (cb) {\n assigned = true;\n var pendingQueue = [];\n if (buffer.length) {\n var cbs = buffer;\n buffer = [];\n cbs.forEach(cb);\n pendingQueue = buffer;\n }\n var executeQueue = function () {\n var cbs = pendingQueue;\n pendingQueue = [];\n cbs.forEach(cb);\n };\n var cycle = function () { return Promise.resolve().then(executeQueue); };\n cycle();\n buffer = {\n push: function (x) {\n pendingQueue.push(x);\n cycle();\n },\n filter: function (filter) {\n pendingQueue = pendingQueue.filter(filter);\n return buffer;\n },\n };\n },\n };\n return medium;\n}\nexport function createMedium(defaults, middleware) {\n if (middleware === void 0) { middleware = ItoI; }\n return innerCreateMedium(defaults, middleware);\n}\nexport function createSidecarMedium(options) {\n if (options === void 0) { options = {}; }\n var medium = innerCreateMedium(null);\n medium.options = tslib_1.__assign({ async: true, ssr: false }, options);\n return medium;\n}\n","import { createMedium, createSidecarMedium } from 'use-sidecar';\nexport var mediumFocus = createMedium({}, function (_ref) {\n var target = _ref.target,\n currentTarget = _ref.currentTarget;\n return {\n target: target,\n currentTarget: currentTarget\n };\n});\nexport var mediumBlur = createMedium();\nexport var mediumEffect = createMedium();\nexport var mediumSidecar = createSidecarMedium({\n async: true\n});","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport { node, bool, string, any, arrayOf, oneOfType, object, func } from 'prop-types';\nimport * as constants from 'focus-lock/constants';\nimport { useMergeRefs } from 'use-callback-ref';\nimport { hiddenGuard } from './FocusGuard';\nimport { mediumFocus, mediumBlur, mediumSidecar } from './medium';\nvar emptyArray = [];\nvar FocusLock = /*#__PURE__*/React.forwardRef(function (props, parentRef) {\n var _extends2;\n\n var _React$useState = React.useState(),\n realObserved = _React$useState[0],\n setObserved = _React$useState[1];\n\n var observed = React.useRef();\n var isActive = React.useRef(false);\n var originalFocusedElement = React.useRef(null);\n var children = props.children,\n disabled = props.disabled,\n noFocusGuards = props.noFocusGuards,\n persistentFocus = props.persistentFocus,\n crossFrame = props.crossFrame,\n autoFocus = props.autoFocus,\n allowTextSelection = props.allowTextSelection,\n group = props.group,\n className = props.className,\n whiteList = props.whiteList,\n _props$shards = props.shards,\n shards = _props$shards === void 0 ? emptyArray : _props$shards,\n _props$as = props.as,\n Container = _props$as === void 0 ? 'div' : _props$as,\n _props$lockProps = props.lockProps,\n containerProps = _props$lockProps === void 0 ? {} : _props$lockProps,\n SideCar = props.sideCar,\n shouldReturnFocus = props.returnFocus,\n onActivationCallback = props.onActivation,\n onDeactivationCallback = props.onDeactivation;\n\n var _React$useState2 = React.useState({}),\n id = _React$useState2[0]; // SIDE EFFECT CALLBACKS\n\n\n var onActivation = React.useCallback(function () {\n originalFocusedElement.current = originalFocusedElement.current || document && document.activeElement;\n\n if (observed.current && onActivationCallback) {\n onActivationCallback(observed.current);\n }\n\n isActive.current = true;\n }, [onActivationCallback]);\n var onDeactivation = React.useCallback(function () {\n isActive.current = false;\n\n if (onDeactivationCallback) {\n onDeactivationCallback(observed.current);\n }\n }, [onDeactivationCallback]);\n var returnFocus = React.useCallback(function (allowDefer) {\n var current = originalFocusedElement.current;\n\n if (Boolean(shouldReturnFocus) && current && current.focus) {\n var focusOptions = typeof shouldReturnFocus === 'object' ? shouldReturnFocus : undefined;\n originalFocusedElement.current = null;\n\n if (allowDefer) {\n // React might return focus after update\n // it's safer to defer the action\n Promise.resolve().then(function () {\n return current.focus(focusOptions);\n });\n } else {\n current.focus(focusOptions);\n }\n }\n }, [shouldReturnFocus]); // MEDIUM CALLBACKS\n\n var onFocus = React.useCallback(function (event) {\n if (isActive.current) {\n mediumFocus.useMedium(event);\n }\n }, []);\n var onBlur = mediumBlur.useMedium; // REF PROPAGATION\n // not using real refs due to race conditions\n\n var setObserveNode = React.useCallback(function (newObserved) {\n if (observed.current !== newObserved) {\n observed.current = newObserved;\n setObserved(newObserved);\n }\n }, []);\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof allowTextSelection !== 'undefined') {\n // eslint-disable-next-line no-console\n console.warn('React-Focus-Lock: allowTextSelection is deprecated and enabled by default');\n }\n\n React.useEffect(function () {\n if (!observed.current) {\n // eslint-disable-next-line no-console\n console.error('FocusLock: could not obtain ref to internal node');\n }\n }, []);\n }\n\n var lockProps = _extends((_extends2 = {}, _extends2[constants.FOCUS_DISABLED] = disabled && 'disabled', _extends2[constants.FOCUS_GROUP] = group, _extends2), containerProps);\n\n var hasLeadingGuards = noFocusGuards !== true;\n var hasTailingGuards = hasLeadingGuards && noFocusGuards !== 'tail';\n var mergedRef = useMergeRefs([parentRef, setObserveNode]);\n return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeadingGuards && [/*#__PURE__*/React.createElement(\"div\", {\n key: \"guard-first\",\n \"data-focus-guard\": true,\n tabIndex: disabled ? -1 : 0,\n style: hiddenGuard\n }),\n /*#__PURE__*/\n // nearest focus guard\n React.createElement(\"div\", {\n key: \"guard-nearest\",\n \"data-focus-guard\": true,\n tabIndex: disabled ? -1 : 1,\n style: hiddenGuard\n }) // first tabbed element guard\n ], !disabled && /*#__PURE__*/React.createElement(SideCar, {\n id: id,\n sideCar: mediumSidecar,\n observed: realObserved,\n disabled: disabled,\n persistentFocus: persistentFocus,\n crossFrame: crossFrame,\n autoFocus: autoFocus,\n whiteList: whiteList,\n shards: shards,\n onActivation: onActivation,\n onDeactivation: onDeactivation,\n returnFocus: returnFocus\n }), /*#__PURE__*/React.createElement(Container, _extends({\n ref: mergedRef\n }, lockProps, {\n className: className,\n onBlur: onBlur,\n onFocus: onFocus\n }), children), hasTailingGuards && /*#__PURE__*/React.createElement(\"div\", {\n \"data-focus-guard\": true,\n tabIndex: disabled ? -1 : 0,\n style: hiddenGuard\n }));\n});\nFocusLock.propTypes = process.env.NODE_ENV !== \"production\" ? {\n children: node,\n disabled: bool,\n returnFocus: oneOfType([bool, object]),\n noFocusGuards: bool,\n allowTextSelection: bool,\n autoFocus: bool,\n persistentFocus: bool,\n crossFrame: bool,\n group: string,\n className: string,\n whiteList: func,\n shards: arrayOf(any),\n as: oneOfType([string, func, object]),\n lockProps: object,\n onActivation: func,\n onDeactivation: func,\n sideCar: any.isRequired\n} : {};\nFocusLock.defaultProps = {\n children: undefined,\n disabled: false,\n returnFocus: false,\n noFocusGuards: false,\n autoFocus: true,\n persistentFocus: false,\n crossFrame: true,\n allowTextSelection: undefined,\n group: undefined,\n className: undefined,\n whiteList: undefined,\n shards: undefined,\n as: 'div',\n lockProps: {},\n onActivation: undefined,\n onDeactivation: undefined\n};\nexport default FocusLock;","export var FOCUS_GROUP = 'data-focus-lock';\nexport var FOCUS_DISABLED = 'data-focus-lock-disabled';\nexport var FOCUS_ALLOW = 'data-no-focus-lock';\nexport var FOCUS_AUTO = 'data-autofocus-inside';","import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';\nimport _defineProperty from '@babel/runtime/helpers/esm/defineProperty';\nimport React, { PureComponent } from 'react';\n\nfunction withSideEffect(reducePropsToState, handleStateChangeOnClient) {\n if (process.env.NODE_ENV !== \"production\") {\n if (typeof reducePropsToState !== 'function') {\n throw new Error('Expected reducePropsToState to be a function.');\n }\n\n if (typeof handleStateChangeOnClient !== 'function') {\n throw new Error('Expected handleStateChangeOnClient to be a function.');\n }\n }\n\n function getDisplayName(WrappedComponent) {\n return WrappedComponent.displayName || WrappedComponent.name || 'Component';\n }\n\n return function wrap(WrappedComponent) {\n if (process.env.NODE_ENV !== \"production\") {\n if (typeof WrappedComponent !== 'function') {\n throw new Error('Expected WrappedComponent to be a React component.');\n }\n }\n\n var mountedInstances = [];\n var state;\n\n function emitChange() {\n state = reducePropsToState(mountedInstances.map(function (instance) {\n return instance.props;\n }));\n handleStateChangeOnClient(state);\n }\n\n var SideEffect =\n /*#__PURE__*/\n function (_PureComponent) {\n _inheritsLoose(SideEffect, _PureComponent);\n\n function SideEffect() {\n return _PureComponent.apply(this, arguments) || this;\n }\n\n // Try to use displayName of wrapped component\n SideEffect.peek = function peek() {\n return state;\n };\n\n var _proto = SideEffect.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n mountedInstances.push(this);\n emitChange();\n };\n\n _proto.componentDidUpdate = function componentDidUpdate() {\n emitChange();\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n var index = mountedInstances.indexOf(this);\n mountedInstances.splice(index, 1);\n emitChange();\n };\n\n _proto.render = function render() {\n return React.createElement(WrappedComponent, this.props);\n };\n\n return SideEffect;\n }(PureComponent);\n\n _defineProperty(SideEffect, \"displayName\", \"SideEffect(\" + getDisplayName(WrappedComponent) + \")\");\n\n return SideEffect;\n };\n}\n\nexport default withSideEffect;\n","export default function _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}","export var toArray = function toArray(a) {\n var ret = Array(a.length);\n for (var i = 0; i < a.length; ++i) {\n ret[i] = a[i];\n }\n return ret;\n};\n\nexport var arrayFind = function arrayFind(array, search) {\n return array.filter(function (a) {\n return a === search;\n })[0];\n};\n\nexport var asArray = function asArray(a) {\n return Array.isArray(a) ? a : [a];\n};","import { toArray } from './utils/array';\nimport { FOCUS_ALLOW } from './constants';\n\nvar focusIsHidden = function focusIsHidden() {\n return document && toArray(document.querySelectorAll('[' + FOCUS_ALLOW + ']')).some(function (node) {\n return node.contains(document.activeElement);\n });\n};\n\nexport default focusIsHidden;","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; };\n\nimport { FOCUS_DISABLED, FOCUS_GROUP } from '../constants';\nimport { asArray, toArray } from './array';\n\nvar filterNested = function filterNested(nodes) {\n var l = nodes.length;\n for (var i = 0; i < l; i += 1) {\n var _loop = function _loop(j) {\n if (i !== j) {\n if (nodes[i].contains(nodes[j])) {\n return {\n v: filterNested(nodes.filter(function (x) {\n return x !== nodes[j];\n }))\n };\n }\n }\n };\n\n for (var j = 0; j < l; j += 1) {\n var _ret = _loop(j);\n\n if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === \"object\") return _ret.v;\n }\n }\n return nodes;\n};\n\nvar getTopParent = function getTopParent(node) {\n return node.parentNode ? getTopParent(node.parentNode) : node;\n};\n\nvar getAllAffectedNodes = function getAllAffectedNodes(node) {\n var nodes = asArray(node);\n return nodes.filter(Boolean).reduce(function (acc, currentNode) {\n var group = currentNode.getAttribute(FOCUS_GROUP);\n acc.push.apply(acc, group ? filterNested(toArray(getTopParent(currentNode).querySelectorAll('[' + FOCUS_GROUP + '=\"' + group + '\"]:not([' + FOCUS_DISABLED + '=\"disabled\"])'))) : [currentNode]);\n return acc;\n }, []);\n};\n\nexport default getAllAffectedNodes;","import getAllAffectedNodes from './utils/all-affected';\nimport { arrayFind, toArray } from './utils/array';\n\nvar focusInFrame = function focusInFrame(frame) {\n return frame === document.activeElement;\n};\n\nvar focusInsideIframe = function focusInsideIframe(topNode) {\n return !!arrayFind(toArray(topNode.querySelectorAll('iframe')), focusInFrame);\n};\n\nvar focusInside = function focusInside(topNode) {\n var activeElement = document && document.activeElement;\n\n if (!activeElement || activeElement.dataset && activeElement.dataset.focusGuard) {\n return false;\n }\n return getAllAffectedNodes(topNode).reduce(function (result, node) {\n return result || node.contains(activeElement) || focusInsideIframe(node);\n }, false);\n};\n\nexport default focusInside;","import { toArray } from './array';\n\nexport var tabSort = function tabSort(a, b) {\n var tabDiff = a.tabIndex - b.tabIndex;\n var indexDiff = a.index - b.index;\n\n if (tabDiff) {\n if (!a.tabIndex) return 1;\n if (!b.tabIndex) return -1;\n }\n\n return tabDiff || indexDiff;\n};\n\nexport var orderByTabIndex = function orderByTabIndex(nodes, filterNegative, keepGuards) {\n return toArray(nodes).map(function (node, index) {\n return {\n node: node,\n index: index,\n tabIndex: keepGuards && node.tabIndex === -1 ? (node.dataset || {}).focusGuard ? 0 : -1 : node.tabIndex\n };\n }).filter(function (data) {\n return !filterNegative || data.tabIndex >= 0;\n }).sort(tabSort);\n};","export default ['button:enabled:not([readonly])', 'select:enabled:not([readonly])', 'textarea:enabled:not([readonly])', 'input:enabled:not([readonly])', 'a[href]', 'area[href]', 'iframe', 'object', 'embed', '[tabindex]', '[contenteditable]', '[autofocus]'];","import tabbables from './tabbables';\nimport { toArray } from './array';\nimport { FOCUS_AUTO } from '../constants';\n\nvar queryTabbables = tabbables.join(',');\nvar queryGuardTabbables = queryTabbables + ', [data-focus-guard]';\n\nexport var getFocusables = function getFocusables(parents, withGuards) {\n return parents.reduce(function (acc, parent) {\n return acc.concat(\n // add all tabbables inside\n toArray(parent.querySelectorAll(withGuards ? queryGuardTabbables : queryTabbables)),\n // add if node is tabble itself\n parent.parentNode ? toArray(parent.parentNode.querySelectorAll(tabbables.join(','))).filter(function (node) {\n return node === parent;\n }) : []);\n }, []);\n};\n\nexport var getParentAutofocusables = function getParentAutofocusables(parent) {\n var parentFocus = parent.querySelectorAll('[' + FOCUS_AUTO + ']');\n return toArray(parentFocus).map(function (node) {\n return getFocusables([node]);\n }).reduce(function (acc, nodes) {\n return acc.concat(nodes);\n }, []);\n};","import { orderByTabIndex } from './tabOrder';\nimport { getFocusables, getParentAutofocusables } from './tabUtils';\nimport { toArray } from './array';\n\nvar isElementHidden = function isElementHidden(computedStyle) {\n if (!computedStyle || !computedStyle.getPropertyValue) {\n return false;\n }\n return computedStyle.getPropertyValue('display') === 'none' || computedStyle.getPropertyValue('visibility') === 'hidden';\n};\n\nexport var isVisible = function isVisible(node) {\n return !node || node === document || node.nodeType === Node.DOCUMENT_NODE || !isElementHidden(window.getComputedStyle(node, null)) && isVisible(node.parentNode && node.parentNode.nodeType === node.DOCUMENT_FRAGMENT_NODE ? node.parentNode.host : node.parentNode);\n};\n\nexport var notHiddenInput = function notHiddenInput(node) {\n return !((node.tagName === 'INPUT' || node.tagName === 'BUTTON') && (node.type === 'hidden' || node.disabled));\n};\n\nvar getParents = function getParents(node) {\n var parents = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n\n parents.push(node);\n if (node.parentNode) {\n getParents(node.parentNode, parents);\n }\n return parents;\n};\n\nexport var getCommonParent = function getCommonParent(nodea, nodeb) {\n var parentsA = getParents(nodea);\n var parentsB = getParents(nodeb);\n\n for (var i = 0; i < parentsA.length; i += 1) {\n var currentParent = parentsA[i];\n if (parentsB.indexOf(currentParent) >= 0) {\n return currentParent;\n }\n }\n return false;\n};\n\nexport var filterFocusable = function filterFocusable(nodes) {\n return toArray(nodes).filter(function (node) {\n return isVisible(node);\n }).filter(function (node) {\n return notHiddenInput(node);\n });\n};\n\nexport var getTabbableNodes = function getTabbableNodes(topNodes, withGuards) {\n return orderByTabIndex(filterFocusable(getFocusables(topNodes, withGuards)), true, withGuards);\n};\n\n/**\n * actually anything focusable\n */\nexport var getAllTabbableNodes = function getAllTabbableNodes(topNodes) {\n return orderByTabIndex(filterFocusable(getFocusables(topNodes)), false);\n};\n\nexport var parentAutofocusables = function parentAutofocusables(topNode) {\n return filterFocusable(getParentAutofocusables(topNode));\n};","var isRadio = function isRadio(node) {\n return node.tagName === 'INPUT' && node.type === 'radio';\n};\n\nvar findSelectedRadio = function findSelectedRadio(node, nodes) {\n return nodes.filter(isRadio).filter(function (el) {\n return el.name === node.name;\n }).filter(function (el) {\n return el.checked;\n })[0] || node;\n};\n\nexport var correctNode = function correctNode(node, nodes) {\n if (isRadio(node) && node.name) {\n return findSelectedRadio(node, nodes);\n }\n return node;\n};\n\nexport var correctNodes = function correctNodes(nodes) {\n // IE11 has no Set constructor\n var resultSet = new Set();\n nodes.forEach(function (node) {\n return resultSet.add(correctNode(node, nodes));\n });\n // using filter to support IE11\n return nodes.filter(function (node) {\n return resultSet.has(node);\n });\n};","import { correctNode } from './correctFocus';\n\nvar pickFirstFocus = function pickFirstFocus(nodes) {\n if (nodes[0] && nodes.length > 1) {\n return correctNode(nodes[0], nodes);\n }\n return nodes[0];\n};\n\nexport var pickFocusable = function pickFocusable(nodes, index) {\n if (nodes.length > 1) {\n return nodes.indexOf(correctNode(nodes[index], nodes));\n }\n return index;\n};\n\nexport default pickFirstFocus;","import { getCommonParent, getTabbableNodes, getAllTabbableNodes, parentAutofocusables } from './utils/DOMutils';\nimport pickFirstFocus, { pickFocusable } from './utils/firstFocus';\nimport getAllAffectedNodes from './utils/all-affected';\nimport { asArray } from './utils/array';\nimport { correctNodes } from './utils/correctFocus';\n\nvar findAutoFocused = function findAutoFocused(autoFocusables) {\n return function (node) {\n return !!node.autofocus || node.dataset && !!node.dataset.autofocus || autoFocusables.indexOf(node) >= 0;\n };\n};\n\nvar isGuard = function isGuard(node) {\n return node && node.dataset && node.dataset.focusGuard;\n};\nvar notAGuard = function notAGuard(node) {\n return !isGuard(node);\n};\n\nexport var NEW_FOCUS = 'NEW_FOCUS';\n\nexport var newFocus = function newFocus(innerNodes, outerNodes, activeElement, lastNode) {\n var cnt = innerNodes.length;\n var firstFocus = innerNodes[0];\n var lastFocus = innerNodes[cnt - 1];\n var isOnGuard = isGuard(activeElement);\n\n // focus is inside\n if (innerNodes.indexOf(activeElement) >= 0) {\n return undefined;\n }\n\n var activeIndex = outerNodes.indexOf(activeElement);\n var lastIndex = outerNodes.indexOf(lastNode || activeIndex);\n var lastNodeInside = innerNodes.indexOf(lastNode);\n var indexDiff = activeIndex - lastIndex;\n var firstNodeIndex = outerNodes.indexOf(firstFocus);\n var lastNodeIndex = outerNodes.indexOf(lastFocus);\n\n var correctedNodes = correctNodes(outerNodes);\n var correctedIndexDiff = correctedNodes.indexOf(activeElement) - correctedNodes.indexOf(lastNode || activeIndex);\n\n var returnFirstNode = pickFocusable(innerNodes, 0);\n var returnLastNode = pickFocusable(innerNodes, cnt - 1);\n\n // new focus\n if (activeIndex === -1 || lastNodeInside === -1) {\n return NEW_FOCUS;\n }\n // old focus\n if (!indexDiff && lastNodeInside >= 0) {\n return lastNodeInside;\n }\n // first element\n if (activeIndex <= firstNodeIndex && isOnGuard && Math.abs(indexDiff) > 1) {\n return returnLastNode;\n }\n // last element\n if (activeIndex >= lastNodeIndex && isOnGuard && Math.abs(indexDiff) > 1) {\n return returnFirstNode;\n }\n // jump out, but not on the guard\n if (indexDiff && Math.abs(correctedIndexDiff) > 1) {\n return lastNodeInside;\n }\n // focus above lock\n if (activeIndex <= firstNodeIndex) {\n return returnLastNode;\n }\n // focus below lock\n if (activeIndex > lastNodeIndex) {\n return returnFirstNode;\n }\n // index is inside tab order, but outside Lock\n if (indexDiff) {\n if (Math.abs(indexDiff) > 1) {\n return lastNodeInside;\n }\n return (cnt + lastNodeInside + indexDiff) % cnt;\n }\n // do nothing\n return undefined;\n};\n\nvar getTopCommonParent = function getTopCommonParent(baseActiveElement, leftEntry, rightEntries) {\n var activeElements = asArray(baseActiveElement);\n var leftEntries = asArray(leftEntry);\n var activeElement = activeElements[0];\n var topCommon = null;\n leftEntries.filter(Boolean).forEach(function (entry) {\n topCommon = getCommonParent(topCommon || entry, entry) || topCommon;\n rightEntries.filter(Boolean).forEach(function (subEntry) {\n var common = getCommonParent(activeElement, subEntry);\n if (common) {\n if (!topCommon || common.contains(topCommon)) {\n topCommon = common;\n } else {\n topCommon = getCommonParent(common, topCommon);\n }\n }\n });\n });\n return topCommon;\n};\n\nvar allParentAutofocusables = function allParentAutofocusables(entries) {\n return entries.reduce(function (acc, node) {\n return acc.concat(parentAutofocusables(node));\n }, []);\n};\n\nvar reorderNodes = function reorderNodes(srcNodes, dstNodes) {\n var remap = new Map();\n // no Set(dstNodes) for IE11 :(\n dstNodes.forEach(function (entity) {\n return remap.set(entity.node, entity);\n });\n // remap to dstNodes\n return srcNodes.map(function (node) {\n return remap.get(node);\n }).filter(Boolean);\n};\n\nexport var getFocusabledIn = function getFocusabledIn(topNode) {\n var entries = getAllAffectedNodes(topNode).filter(notAGuard);\n var commonParent = getTopCommonParent(topNode, topNode, entries);\n var outerNodes = getTabbableNodes([commonParent], true);\n var innerElements = getTabbableNodes(entries).filter(function (_ref) {\n var node = _ref.node;\n return notAGuard(node);\n }).map(function (_ref2) {\n var node = _ref2.node;\n return node;\n });\n\n return outerNodes.map(function (_ref3) {\n var node = _ref3.node,\n index = _ref3.index;\n return {\n node: node,\n index: index,\n lockItem: innerElements.indexOf(node) >= 0,\n guard: isGuard(node)\n };\n });\n};\n\nvar getFocusMerge = function getFocusMerge(topNode, lastNode) {\n var activeElement = document && document.activeElement;\n var entries = getAllAffectedNodes(topNode).filter(notAGuard);\n\n var commonParent = getTopCommonParent(activeElement || topNode, topNode, entries);\n\n var anyFocusable = getAllTabbableNodes(entries);\n var innerElements = getTabbableNodes(entries).filter(function (_ref4) {\n var node = _ref4.node;\n return notAGuard(node);\n });\n\n if (!innerElements[0]) {\n innerElements = anyFocusable;\n if (!innerElements[0]) {\n return undefined;\n }\n }\n\n var outerNodes = getAllTabbableNodes([commonParent]).map(function (_ref5) {\n var node = _ref5.node;\n return node;\n });\n var orderedInnerElements = reorderNodes(outerNodes, innerElements);\n var innerNodes = orderedInnerElements.map(function (_ref6) {\n var node = _ref6.node;\n return node;\n });\n\n var newId = newFocus(innerNodes, outerNodes, activeElement, lastNode);\n\n if (newId === \"NEW_FOCUS\") {\n var autoFocusable = anyFocusable.map(function (_ref7) {\n var node = _ref7.node;\n return node;\n }).filter(findAutoFocused(allParentAutofocusables(entries)));\n\n return {\n node: autoFocusable && autoFocusable.length ? pickFirstFocus(autoFocusable) : pickFirstFocus(innerNodes)\n };\n }\n\n if (newId === undefined) {\n return newId;\n }\n return orderedInnerElements[newId];\n};\n\nexport default getFocusMerge;","import getFocusMerge from './focusMerge';\n\nexport var focusOn = function focusOn(target) {\n target.focus();\n if (target.contentWindow) {\n target.contentWindow.focus();\n }\n};\n\nvar guardCount = 0;\nvar lockDisabled = false;\n\nexport default (function (topNode, lastNode) {\n var focusable = getFocusMerge(topNode, lastNode);\n\n if (lockDisabled) {\n return;\n }\n\n if (focusable) {\n if (guardCount > 2) {\n // eslint-disable-next-line no-console\n console.error('FocusLock: focus-fighting detected. Only one focus management system could be active. ' + 'See https://github.com/theKashey/focus-lock/#focus-fighting');\n lockDisabled = true;\n setTimeout(function () {\n lockDisabled = false;\n }, 1);\n return;\n }\n guardCount++;\n focusOn(focusable.node);\n guardCount--;\n }\n});","import tabHook from './tabHook';\nimport focusMerge, { getFocusabledIn } from './focusMerge';\nimport focusInside from './focusInside';\nimport focusIsHidden from './focusIsHidden';\nimport setFocus from './setFocus';\nimport * as constants from './constants';\nimport getAllAffectedNodes from './utils/all-affected';\n\nexport { tabHook, focusInside, focusIsHidden, focusMerge, getFocusabledIn, constants, getAllAffectedNodes };\n\nexport default setFocus;","export function deferAction(action) {\n // Hidding setImmediate from Webpack to avoid inserting polyfill\n var _window = window,\n setImmediate = _window.setImmediate;\n\n if (typeof setImmediate !== 'undefined') {\n setImmediate(action);\n } else {\n setTimeout(action, 1);\n }\n}\nexport var inlineProp = function inlineProp(name, value) {\n var obj = {};\n obj[name] = value;\n return obj;\n};","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport withSideEffect from 'react-clientside-effect';\nimport moveFocusInside, { focusInside, focusIsHidden, getFocusabledIn } from 'focus-lock';\nimport { deferAction } from './util';\nimport { mediumFocus, mediumBlur, mediumEffect } from './medium';\n\nvar focusOnBody = function focusOnBody() {\n return document && document.activeElement === document.body;\n};\n\nvar isFreeFocus = function isFreeFocus() {\n return focusOnBody() || focusIsHidden();\n};\n\nvar lastActiveTrap = null;\nvar lastActiveFocus = null;\nvar lastPortaledElement = null;\nvar focusWasOutsideWindow = false;\n\nvar defaultWhitelist = function defaultWhitelist() {\n return true;\n};\n\nvar focusWhitelisted = function focusWhitelisted(activeElement) {\n return (lastActiveTrap.whiteList || defaultWhitelist)(activeElement);\n};\n\nvar recordPortal = function recordPortal(observerNode, portaledElement) {\n lastPortaledElement = {\n observerNode: observerNode,\n portaledElement: portaledElement\n };\n};\n\nvar focusIsPortaledPair = function focusIsPortaledPair(element) {\n return lastPortaledElement && lastPortaledElement.portaledElement === element;\n};\n\nfunction autoGuard(startIndex, end, step, allNodes) {\n var lastGuard = null;\n var i = startIndex;\n\n do {\n var item = allNodes[i];\n\n if (item.guard) {\n if (item.node.dataset.focusAutoGuard) {\n lastGuard = item;\n }\n } else if (item.lockItem) {\n if (i !== startIndex) {\n // we will tab to the next element\n return;\n }\n\n lastGuard = null;\n } else {\n break;\n }\n } while ((i += step) !== end);\n\n if (lastGuard) {\n lastGuard.node.tabIndex = 0;\n }\n}\n\nvar extractRef = function extractRef(ref) {\n return ref && 'current' in ref ? ref.current : ref;\n};\n\nvar focusWasOutside = function focusWasOutside(crossFrameOption) {\n if (crossFrameOption) {\n // with cross frame return true for any value\n return Boolean(focusWasOutsideWindow);\n } // in other case return only of focus went a while aho\n\n\n return focusWasOutsideWindow === 'meanwhile';\n};\n\nvar activateTrap = function activateTrap() {\n var result = false;\n\n if (lastActiveTrap) {\n var _lastActiveTrap = lastActiveTrap,\n observed = _lastActiveTrap.observed,\n persistentFocus = _lastActiveTrap.persistentFocus,\n autoFocus = _lastActiveTrap.autoFocus,\n shards = _lastActiveTrap.shards,\n crossFrame = _lastActiveTrap.crossFrame;\n var workingNode = observed || lastPortaledElement && lastPortaledElement.portaledElement;\n var activeElement = document && document.activeElement;\n\n if (workingNode) {\n var workingArea = [workingNode].concat(shards.map(extractRef).filter(Boolean));\n\n if (!activeElement || focusWhitelisted(activeElement)) {\n if (persistentFocus || focusWasOutside(crossFrame) || !isFreeFocus() || !lastActiveFocus && autoFocus) {\n if (workingNode && !(focusInside(workingArea) || focusIsPortaledPair(activeElement, workingNode))) {\n if (document && !lastActiveFocus && activeElement && !autoFocus) {\n // Check if blur() exists, which is missing on certain elements on IE\n if (activeElement.blur) {\n activeElement.blur();\n }\n\n document.body.focus();\n } else {\n result = moveFocusInside(workingArea, lastActiveFocus);\n lastPortaledElement = {};\n }\n }\n\n focusWasOutsideWindow = false;\n lastActiveFocus = document && document.activeElement;\n }\n }\n\n if (document) {\n var newActiveElement = document && document.activeElement;\n var allNodes = getFocusabledIn(workingArea);\n var focusedIndex = allNodes.map(function (_ref) {\n var node = _ref.node;\n return node;\n }).indexOf(newActiveElement);\n\n if (focusedIndex > -1) {\n // remove old focus\n allNodes.filter(function (_ref2) {\n var guard = _ref2.guard,\n node = _ref2.node;\n return guard && node.dataset.focusAutoGuard;\n }).forEach(function (_ref3) {\n var node = _ref3.node;\n return node.removeAttribute('tabIndex');\n });\n autoGuard(focusedIndex, allNodes.length, +1, allNodes);\n autoGuard(focusedIndex, -1, -1, allNodes);\n }\n }\n }\n }\n\n return result;\n};\n\nvar onTrap = function onTrap(event) {\n if (activateTrap() && event) {\n // prevent scroll jump\n event.stopPropagation();\n event.preventDefault();\n }\n};\n\nvar onBlur = function onBlur() {\n return deferAction(activateTrap);\n};\n\nvar onFocus = function onFocus(event) {\n // detect portal\n var source = event.target;\n var currentNode = event.currentTarget;\n\n if (!currentNode.contains(source)) {\n recordPortal(currentNode, source);\n }\n};\n\nvar FocusWatcher = function FocusWatcher() {\n return null;\n};\n\nvar FocusTrap = function FocusTrap(_ref4) {\n var children = _ref4.children;\n return /*#__PURE__*/React.createElement(\"div\", {\n onBlur: onBlur,\n onFocus: onFocus\n }, children);\n};\n\nFocusTrap.propTypes = process.env.NODE_ENV !== \"production\" ? {\n children: PropTypes.node.isRequired\n} : {};\n\nvar onWindowBlur = function onWindowBlur() {\n focusWasOutsideWindow = 'just'; // using setTimeout to set this variable after React/sidecar reaction\n\n setTimeout(function () {\n focusWasOutsideWindow = 'meanwhile';\n }, 0);\n};\n\nvar attachHandler = function attachHandler() {\n document.addEventListener('focusin', onTrap, true);\n document.addEventListener('focusout', onBlur);\n window.addEventListener('blur', onWindowBlur);\n};\n\nvar detachHandler = function detachHandler() {\n document.removeEventListener('focusin', onTrap, true);\n document.removeEventListener('focusout', onBlur);\n window.removeEventListener('blur', onWindowBlur);\n};\n\nfunction reducePropsToState(propsList) {\n return propsList.filter(function (_ref5) {\n var disabled = _ref5.disabled;\n return !disabled;\n });\n}\n\nfunction handleStateChangeOnClient(traps) {\n var trap = traps.slice(-1)[0];\n\n if (trap && !lastActiveTrap) {\n attachHandler();\n }\n\n var lastTrap = lastActiveTrap;\n var sameTrap = lastTrap && trap && trap.id === lastTrap.id;\n lastActiveTrap = trap;\n\n if (lastTrap && !sameTrap) {\n lastTrap.onDeactivation(); // return focus only of last trap was removed\n\n if (!traps.filter(function (_ref6) {\n var id = _ref6.id;\n return id === lastTrap.id;\n }).length) {\n // allow defer is no other trap is awaiting restore\n lastTrap.returnFocus(!trap);\n }\n }\n\n if (trap) {\n lastActiveFocus = null;\n\n if (!sameTrap || lastTrap.observed !== trap.observed) {\n trap.onActivation();\n }\n\n activateTrap(true);\n deferAction(activateTrap);\n } else {\n detachHandler();\n lastActiveFocus = null;\n }\n} // bind medium\n\n\nmediumFocus.assignSyncMedium(onFocus);\nmediumBlur.assignMedium(onBlur);\nmediumEffect.assignMedium(function (cb) {\n return cb({\n moveFocusInside: moveFocusInside,\n focusInside: focusInside\n });\n});\nexport default withSideEffect(reducePropsToState, handleStateChangeOnClient)(FocusWatcher);","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport FocusLockUI from './Lock';\nimport FocusTrap from './Trap';\n/* that would be a BREAKING CHANGE!\n// delaying sidecar execution till the first usage\nconst RequireSideCar = (props) => {\n // eslint-disable-next-line global-require\n const SideCar = require('./Trap').default;\n return \n ${when(x => x.childItems && x.childItemLength() > 0, html `\n x.handleExpandCollapseButtonClick()}\"\n ${ref(\"expandCollapseButton\")}\n >\n \n \n \n
\n `)}\n ${startTemplate}\n \n
\n `)}\n \n`;\n","import { canUseDOM } from \"exenv-es6\";\nimport { isBoolean } from \"lodash-es\";\n/**\n * A test that ensures that all arguments are HTML Elements\n */\nexport function isHTMLElement(...args) {\n return args.every((arg) => arg instanceof HTMLElement);\n}\n/**\n * Returns all displayed elements inside of a root node that match a provided selector\n */\nexport function getDisplayedNodes(rootNode, selector) {\n if (!isHTMLElement(rootNode)) {\n return;\n }\n const nodes = Array.from(rootNode.querySelectorAll(selector));\n // offsetParent will be null if the element isn't currently displayed,\n // so this will allow us to operate only on visible nodes\n return nodes.filter((node) => node.offsetParent !== null);\n}\n/**\n * Gets the numeric key code associated with a keyboard event. This method is for use with DOM level 3 events\n * that still use the deprecated keyCode property.\n */\nexport function getKeyCode(event) {\n return event === null ? null : event.which || event.keyCode || event.charCode;\n}\n/**\n * Test if the document supports :focus-visible\n */\nlet _canUseFocusVisible;\nexport function canUseFocusVisible() {\n if (isBoolean(_canUseFocusVisible)) {\n return _canUseFocusVisible;\n }\n if (!canUseDOM()) {\n _canUseFocusVisible = false;\n return _canUseFocusVisible;\n }\n // Check to see if the document supports the focus-visible element\n const styleElement = document.createElement(\"style\");\n document.head.appendChild(styleElement);\n try {\n styleElement.sheet.insertRule(\"foo:focus-visible {color:inherit}\", 0);\n _canUseFocusVisible = true;\n }\n catch (e) {\n _canUseFocusVisible = false;\n }\n finally {\n document.head.removeChild(styleElement);\n }\n return _canUseFocusVisible;\n}\nlet _canUseCssGrid;\nexport function canUseCssGrid() {\n if (isBoolean(_canUseCssGrid)) {\n return _canUseCssGrid;\n }\n try {\n _canUseCssGrid = CSS.supports(\"display\", \"grid\");\n }\n catch (_a) {\n _canUseCssGrid = false;\n }\n return _canUseCssGrid;\n}\nexport function canUseForcedColors() {\n return (canUseDOM() &&\n (window.matchMedia(\"(forced-colors: none)\").matches ||\n window.matchMedia(\"(forced-colors: active)\").matches));\n}\n/**\n * @deprecated Use 'canUseForcedColors' instead\n */\nexport const canUsedForcedColors = canUseForcedColors;\n","// © Microsoft Corporation. All rights reserved.\nimport { __decorate } from \"tslib\";\nimport { TreeItem } from \"@microsoft/fast-foundation\";\nimport { isHTMLElement } from \"@microsoft/fast-web-utilities\";\nimport { attr } from \"@microsoft/fast-element\";\nexport class HamburgerMenuItem extends TreeItem {\n constructor() {\n super(...arguments);\n /**\n * Handles clicks on the hamburger menu item\n * @param e mouse event\n */\n this.handleContainerClick = (e) => {\n const expandButton = this.expandCollapseButton;\n const isButtonAnHTMLElement = isHTMLElement(expandButton);\n if ((!isButtonAnHTMLElement ||\n (isButtonAnHTMLElement && expandButton !== e.target)) &&\n !this.disabled) {\n this.handleMenuItemSelection(e);\n }\n };\n }\n /**\n * Handles menu item selection. For hamburger menu, we don't want users to be able to deselect items so we use this\n * method to protect against that. Emits a custom selected-change event\n * @param e mouse or keyboard event\n */\n handleMenuItemSelection(e) {\n if (this.selected) {\n return;\n }\n this.selected = !this.selected;\n // Keeping as \"selected-change\" event because TreeView and TreeItem depend on that event in their base classes\n this.$emit(\"selected-change\", e);\n }\n}\n__decorate([\n attr()\n], HamburgerMenuItem.prototype, \"id\", void 0);\n","/**\n * Define system colors for use in CSS stylesheets.\n *\n * https://drafts.csswg.org/css-color/#css-system-colors\n */\nexport var SystemColors;\n(function (SystemColors) {\n SystemColors[\"Canvas\"] = \"Canvas\";\n SystemColors[\"CanvasText\"] = \"CanvasText\";\n SystemColors[\"LinkText\"] = \"LinkText\";\n SystemColors[\"VisitedText\"] = \"VisitedText\";\n SystemColors[\"ActiveText\"] = \"ActiveText\";\n SystemColors[\"ButtonFace\"] = \"ButtonFace\";\n SystemColors[\"ButtonText\"] = \"ButtonText\";\n SystemColors[\"Field\"] = \"Field\";\n SystemColors[\"FieldText\"] = \"FieldText\";\n SystemColors[\"Highlight\"] = \"Highlight\";\n SystemColors[\"HighlightText\"] = \"HighlightText\";\n SystemColors[\"GrayText\"] = \"GrayText\";\n})(SystemColors || (SystemColors = {}));\n","// © Microsoft Corporation. All rights reserved.\nimport { accentForegroundRestBehavior, heightNumber, neutralFillStealthActiveBehavior, neutralFillStealthHoverBehavior, neutralFillStealthRestBehavior, neutralFillStealthSelectedBehavior, neutralFocusBehavior, neutralFocusInnerAccentBehavior, neutralForegroundActiveBehavior, neutralForegroundRestBehavior, neutralLayerFloatingBehavior, } from \"@fluentui/web-components\";\nimport { DirectionalStyleSheetBehavior, disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from \"@microsoft/fast-foundation\";\nimport { SystemColors } from \"@microsoft/fast-web-utilities\";\nimport { css } from \"@microsoft/fast-element\";\nconst ltr = css `\n .expand-collapse-glyph {\n transform: rotate(-45deg);\n }\n :host(.nested) .expand-collapse-button {\n left: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));\n }\n :host([selected])::after {\n left: calc(var(--focus-outline-width) * 1px);\n }\n :host(.expanded) > .positioning-region .expand-collapse-glyph {\n transform: rotate(0deg);\n }\n`;\nconst rtl = css `\n .expand-collapse-glyph {\n transform: rotate(135deg);\n }\n :host(.nested) .expand-collapse-button {\n right: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));\n }\n :host([selected])::after {\n right: calc(var(--focus-outline-width) * 1px);\n }\n :host(.expanded) > .positioning-region .expand-collapse-glyph {\n transform: rotate(90deg);\n }\n`;\nexport const HamburgerMenuItemStyles = css `\n ${display(\"block\")} :host {\n background: ${neutralLayerFloatingBehavior.var};\n color: ${neutralForegroundRestBehavior.var};\n contain: content;\n cursor: pointer;\n font-family: var(--body-font);\n outline: none;\n position: relative;\n --expand-collapse-button-size: calc(${heightNumber} * 1px);\n --tree-item-nested-width: 0;\n }\n :host([disabled]) .content-region {\n cursor: ${disabledCursor};\n opacity: var(--disabled-opacity);\n }\n :host([expanded]) > .items {\n display: block;\n }\n :host(:focus) .content-region {\n outline: none;\n }\n :host(:focus) > .positioning-region {\n outline: none;\n }\n :host(:${focusVisible}) .positioning-region {\n border: ${neutralFocusBehavior.var} 1px solid;\n border-radius: calc(var(--corner-radius) * 1px);\n color: ${neutralForegroundActiveBehavior.var};\n }\n :host([nested]) .content-region {\n font-size: var(--type-ramp-base-font-size);\n font-weight: 400;\n line-height: var(--type-ramp-base-line-height);\n margin-inline-start: var(--expand-collapse-button-size);\n position: relative;\n }\n :host([nested]) .expand-collapse-button {\n position: absolute;\n }\n :host([selected])::after {\n background: ${accentForegroundRestBehavior.var};\n border-radius: calc(var(--corner-radius) * 1px);\n content: \"\";\n display: block;\n height: 25px;\n position: absolute;\n top: 12px;\n width: 3px;\n }\n :host([selected]) .positioning-region {\n background: ${neutralFillStealthSelectedBehavior.var};\n }\n\n .content-region {\n align-items: center;\n display: flex;\n font-size: var(--type-ramp-plus-1-font-size);\n font-weight: 600;\n height: calc(${heightNumber} * 1px);\n line-height: var(--type-ramp-plus-1-line-height);\n margin-inline-end: 20px;\n margin-inline-start: calc(var(--design-unit) * 2px + 2px);\n width: 100%;\n white-space: nowrap;\n }\n .content-region .start:first-child {\n margin-inline-start: 32px;\n width: 16px;\n }\n .content-region span:first-child {\n width: 58px;\n }\n .end {\n ${\n/* need to swap out once we understand how horizontalSpacing will work */ \"\"} margin-inline-start: calc(var(--design-unit) * 2px + 2px);\n }\n .expand-collapse-button {\n align-items: center;\n background: none;\n border: none;\n cursor: pointer;\n display: flex;\n height: var(--expand-collapse-button-size);\n justify-content: center;\n outline: none;\n padding: 0;\n ${\n/* Width and Height should be based off calc(glyph-size-number + (design-unit * 4) * 1px) -\nupdate when density story is figured out */ \"\"} width: var(--expand-collapse-button-size);\n }\n .expand-collapse-glyph {\n fill: ${neutralForegroundRestBehavior.var};\n height: 16px;\n pointer-events: none;\n transition: transform 0.1s linear;\n ${\n/* Glyph size is temporary -\nreplace when glyph-size var is added */ \"\"} width: 16px;\n }\n .items {\n display: none;\n ${\n/* Font size should be based off calc(1em + (design-unit + glyph-size-number) * 1px) -\nupdate when density story is figured out */ \"\"} font-size: calc(1em + var(--type-ramp-base-font-size));\n }\n .positioning-region {\n align-items: center;\n border: transparent 1px solid;\n box-sizing: border-box;\n display: flex;\n height: 50px;\n position: relative;\n }\n .positioning-region::before {\n content: \"\";\n display: block;\n flex-shrink: 0;\n width: var(--tree-item-nested-width);\n }\n .positioning-region:hover {\n background: ${neutralFillStealthHoverBehavior.var};\n }\n .positioning-region:active {\n background: ${neutralFillStealthActiveBehavior.var};\n }\n .start, .end {\n fill: ${neutralForegroundRestBehavior.var};\n height: 16px;\n ${\n/* Glyph size is temporary -\nreplace when glyph-size var is added */ \"\"} width: 16px;\n }\n .start {\n ${\n/* need to swap out once we understand how horizontalSpacing will work */ \"\"} margin-inline-end: calc(var(--design-unit) * 2px + 2px);\n }\n ::slotted(fluent-tree-item) {\n --expand-collapse-button-nested-width: calc(${heightNumber} * -1px);\n --tree-item-nested-width: 1em;\n }\n`.withBehaviors(accentForegroundRestBehavior, neutralFillStealthSelectedBehavior, neutralFillStealthActiveBehavior, neutralFillStealthHoverBehavior, neutralFillStealthRestBehavior, neutralFocusBehavior, neutralFocusInnerAccentBehavior, neutralForegroundActiveBehavior, neutralForegroundRestBehavior, neutralLayerFloatingBehavior, new DirectionalStyleSheetBehavior(ltr, rtl), forcedColorsStylesheetBehavior(css `\n :host {\n background: ${SystemColors.Field};\n border-color: transparent;\n forced-color-adjust: none;\n }\n :host .content-region {\n color: ${SystemColors.FieldText};\n }\n :host .content-region .expand-collapse-glyph,\n :host .content-region .start,\n :host .content-region .end {\n fill: ${SystemColors.FieldText};\n }\n :host .positioning-region:hover,\n :host([selected]) .positioning-region {\n background: ${SystemColors.Highlight};\n }\n :host .positioning-region:hover .content-region,\n :host([selected]) .positioning-region .content-region {\n color: ${SystemColors.HighlightText};\n }\n :host .positioning-region:hover .content-region .expand-collapse-glyph,\n :host .positioning-region:hover .content-region .start,\n :host .positioning-region:hover .content-region .end,\n :host([selected]) .content-region .expand-collapse-glyph,\n :host([selected]) .content-region .start,\n :host([selected]) .content-region .end {\n fill: ${SystemColors.HighlightText};\n }\n :host([selected])::after {\n background: ${SystemColors.Field}\n }\n :host(:${focusVisible}) .positioning-region {\n border-color: ${SystemColors.FieldText};\n box-shadow: 0 0 0 2px inset ${SystemColors.Field};\n }\n :host([disabled]) .content-region,\n :host([disabled]) .positioning-region:hover .content-region {\n color: ${SystemColors.GrayText};\n opacity: 1;\n }\n :host([disabled]) .content-region .expand-collapse-glyph,\n :host([disabled]) .content-region .start,\n :host([disabled]) .content-region .end,\n :host([disabled]) .positioning-region:hover .content-region .expand-collapse-glyph,\n :host([disabled]) .positioning-region:hover .content-region .start,\n :host([disabled]) .positioning-region:hover .content-region .end {\n fill: ${SystemColors.GrayText};\n }\n :host([disabled]) .positioning-region:hover {\n background: ${SystemColors.Field};\n }\n `));\n","// © Microsoft Corporation. All rights reserved.\nimport { __decorate } from \"tslib\";\nimport { customElement } from \"@microsoft/fast-element\";\nimport { TreeItemTemplate as template } from \"@microsoft/fast-foundation\";\nimport { HamburgerMenuItem } from \"./hamburger-menu-item\";\nimport { HamburgerMenuItemStyles as styles } from \"./hamburger-menu-item.styles\";\n/**\n * @public\n */\nlet MsftHamburgerMenuItem = class MsftHamburgerMenuItem extends HamburgerMenuItem {\n};\nMsftHamburgerMenuItem = __decorate([\n customElement({\n name: \"msft-hamburger-menu-item\",\n template,\n styles,\n })\n], MsftHamburgerMenuItem);\nexport { MsftHamburgerMenuItem };\n","import { canUseDOM } from \"exenv-es6\";\n/*\n * Check for backdrop-filter support within the current browser\n */\nexport const backdropFilterSupport = canUseDOM() &&\n (\"backdrop-filter\" in document.documentElement.style ||\n \"-webkit-backdrop-filter\" in document.documentElement.style);\n/*\n * Applies a partially transparent \"acrylic\" background to an element\n */\nexport function applyAcrylic(config) {\n const backdropFilterStyles = {\n background: config.backgroundColor,\n \"-webkit-backdrop-filter\": `blur(${config.blurRadius || \"30px\"}) saturate(${config.saturation || \"125%\"})`,\n \"backdrop-filter\": `blur(${config.blurRadius || \"30px\"}) saturate(${config.saturation || \"125%\"})`,\n };\n const fallbackStyles = {\n background: config.fallbackBackgroundColor,\n };\n const styles = backdropFilterSupport\n ? backdropFilterStyles\n : fallbackStyles;\n return Object.assign(Object.assign({}, styles), { \"&::before\": {\n content: '\"\"',\n background: config.textureImage\n ? `url(${config.textureImage}) repeat`\n : undefined,\n position: \"absolute\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\",\n opacity: \".02\",\n \"pointer-events\": \"none\",\n } });\n}\n","import { applyAcrylic, toPx } from \"@microsoft/fast-jss-utilities\";\nimport { ColorRGBA64 } from \"@microsoft/fast-colors\";\nimport { parseColorString } from \"../utilities/color/common\";\nexport const acrylicNoise = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAA+VBMVEWAgIB3d3dwcHCHh4d7e3tjY2NeXl6RkZF0dHSOjo5mZmaLi4ttbW1WVlaUlJSEhIRqamqgoKBaWlqXl5ednZ2jo6NTU1NMTEympqaampqpqamsrKyvr6+1tbWysrK9vb1GRkZJSUlDQ0PCwsJQUFBOTk64uLg8PDw5OTnQ0NA2NjbHx8ckJCQvLy+/v7+6uro+Pj7ExMTNzc3KysozMzMfHx8rKytAQEDV1dXa2tr///8oKCjg4OAAAADX19cYGBjS0tLs7Ozc3Nzv7+8bGxvp6ekUFBQODg4HBwfk5OTi4uIKCgrm5ub19fURERHy8vL5+fn39/f7+/tAOzJwAAATFUlEQVR42uSbxbYuNRSEdzyddnf93V2O+wEuzvs/DDZhsWChF+6BYU/TyU7VVxXIamfmJiE79H3JvPYQ4mgYDfT2rDDYDPUYs5Ii2hme8KI9WZnYMTcjr++HNAg0IhTXZovPLCuwiBgn+QDCDa1Eqe11TbziPB2i1aWdsQ65JOjZ+1MgEhZlZ7uktm3EnPM133ob9iVbaJga1DhYUTft5Mbi7klzYecBvpSzyFfTOuZDATMkj9PcdI91T/oXrCLZtaHfZr2UQXCYJloL2S2SBCka+jjTw8R1UqqLAbzauqN9HqsWPoLtZeDnZd4EkX0NhkIBs+Hz616Xqi62iO1MAxmysCq0YonwIwKEbpwYexYCtmQizfZDBp7NPHHANhHYOSMLY95aqTS13jw1wzkpXnPsvzKcBFvJYgO1ptoHTCdMCbJLo5k5lSjqSkf0T3x9KJ1XszdluHsSh8uciLXfDSLayNNqi4rj+sp4bOgdzppOd+6YF80Hohp5WI48m1xmrtEvBilCzu2nngOAhD1IezgvLDGSofMxXFBmna1j0XI9StBuoLKJNQY9WMpFNpMpaA9J/BDnz4r2w/noSa3GxDJif+4uFK60GIa100SDSleSf4RNWD9FGLSmcG+0FSl4HMQQd+lrPlA6Q9Harj5uQdKtG4ZOeclZ7cxujJXhFfZcuM5kbT/mnzGR8tbn1koOw9scUO4eYtRpWF5l94TTahYX68em3M4f8U25P9/LAY8nvGqZ96gLBwnyMVl5jaNtcOKqI0/qKJfKGOeNcWIJjjOtCWi5MHEiVk1o65rh7FpV2dICJgnjvgK70OKBXERGZDGQPtC+h4dmot07isn+mjmWq0SHsp3sq8DZgsD9La11lposD6wSJFzwpw6GsYTKiOEmbqFhiZssqnLYk3uiI2PW63RzVJrowEhuKhyyldbaHbf9cop6BivM0G0Qq5j83E3GDza5iKCwMkNuM9A9YY+pZEdwc5OCpmilQhPNrr3MRMU1tx5ndMfoQjU0vXBwr5hvNkW0Up96DMM+tvyvMyw+Yiogul3AM3TEf/fsaZEV19qk6vZ3Bp7o9u0DN3eDfg4j275ZgoX00cmqeHVF1rGWkpxYxdD+xHNROdEoGCctw1rkcG9+cWoX+CT5xkCUok517mnu6zoLCXPtib9pmaAbVY+OX1QmodkYWaiyYNnk5hWO5RNJ+NWa2a6NyvRJCZ675rv09hq1+WrWMBVnOFJU7ZlpCWfdIToOD6lkHrKQ72lu4buRafaGfZ4idK08pX/ExgN3vcNa87EdSEjw6Pkwb+rejFvxzjRtyi1+i1Xi5mImMe+5JtoafnZcLrWsMrD5DJ8oagoQGw8XJHSIK/DHUW8ZgI/wlR2kwaA30tijmj4CTvvrKhxb+wTLyDPPn2aaF+BqUXK5EYTMFawPCZtEdLTT6odzYyPD8eZAE3CRXnZYQ8kyALacIHsYpkYwrMuotzvbt6WhdI4/uTnTjaGNqqIZZ1hDdwMUGHc8K3V378TA4ksEVaYb5CYyso/stI9MeylyX+UiWL/EPTUZjU5a+UVZ5ZwnI+M2sb8h2mc6hHuWrvfpBXhXfLYR73SkE/fOTphf9ssANL3nwdSkPej7J3otuKGb4eG+8xflCjeTSUWp/9lXmnGTga37SKMTLS9RG6oQnsZWjVL9pdFVGnCLwqOBnfJi/NkXIVi92EZOGXE0K+QnT3wyf/IK2mBia63FQ9zXzZoSiLu+4xol6eVfPOgnyE/60nMMZsV6IZEBnukF+uUV1b5sy4XG7LFHVAR40CtSWTO+7YBO4ukLxaICNFwGPATXzDyWONmFC/yLFOPX5yAPjaPWsem0ycQYWdjFOpAi6eoHI0ne3LXlck601qO6afiLjzHXNOI9xPkV93LSRM6TabXVACYnOFrYb5xPN4iMtjM/psglA0M+XNTb4eWOTT+tUeHXUQbrINa+1HDX0xJ/5054aA1RD69DcLGYTEVMZO3XZ42JkWEjs+ZLJA5LS3mEOMjSx8W7IE2vWh7aeHJHfTKg/tQsEfIIjAV1qNSRT3Ji5xW6IAdNG+dpwkiF+2Eh6doPx/nZnDiRrZzPAK3kjUKd0cOTJN5yzYPHdJ/ktWbpQVA0CmQfURXIYfnKnq3pcKchZ/oJ6eZ7QaaPrQIyZ0YU92F1Y4UbPW0fee9oi3oW9MBx6U0QCPJgl/ruzk42Pe3zO0dcxEB4ZV8l43fcCgCkyRzr3BFHzz87qWvadwmtkUF05CwQtpw+IOzHtu7RBn2UVdQhfDzsZ9YiSr9efno7AM8zCyb0/h21Qxp7SEA469H0i2AtuTbaBBvytPCamLgzOLjBnJsBd1fatG8I4yJdHm0Sh3lkCcM1PyaOv8t2DyN/CODD3JiHk20fr/s8lrIuBUlSCtT5LJ7vFfnibnid5X2aKILrGFuveVxbo5Vz6vVu7ZWkGCZNqBY7edF+JPuPcjz3XswDjlKHwm/skKYToUl89/r1QTezcJk5aGQ7Q0V0f7s3wMDeIEpFaTh1uBHKK6qFxHmvNzLcsNAiSpjyF1oq+k1CUmKA7a6bBuYq0rJdVA3GcGy3RrPyuWN2NfnSNstiYqYLPpBs7i6qe6bdjdNYZGUv2unPn5fDtaGow1yakMy23FmSFtnZZGlYq+VRy6TDqlvTVVgfdXNXU0VLzP14xeaHYTA/JslXtv5JZjGBO8cTo5wYooJ/cf4QzZtts88poBtjQnq5TzyhD+8LqWKWodUoBw51LeYHDHoFqsFRj51AgvuVgQYFp74X1CDS+uZ+mfNiI5bttHEvgdP+p9TGhQgDHQ073wgQ8XgynthRBaNjV2smNOdgj8W1pSH4jyrcwoA9jS3ArZFVKJVGmEOsgO+0c9s/WF8azqYdYrpq4H98AfxwvAGbz0V/Yftykg+pz670/jS9XEAwz0KzgOu0riQJA3iKdMvyPr+ZM2+QaZZ5KB/c0F8iKxmw5PYkrMKySbbyYXT/+Ugf09Du03Cz0oK5cTStEF1qVIiQJyT47nvkv7s678tFJExSN/1AoCRCUdc/Dj6pHiJ9os02lZ+UV3VceEe/kiHKUl+qeCrA31YuEuWNvdVoOgz3ImCp3VgeoQoiiHMoQmWc4hxHklHfRGS8bAOpT6VcbqOvCoBmnEvpmhcJxKzT7RV8tIXh7T1uk6t+YClRJm0qX/FdcOfy2JChckJZkkr3LvGWDS00fVSgR2x17KE8oXhYRzjM37Kchg/rRF703GrH+k6DvGLqxEo6YjQ3M++lR/0hstjaH28xHKbUqT5BjtA36ImqbYiwE6HMdR2LDJOO68l6JkfG9MACEyvZti7mRfnLvg/+McXhKFzaggtdjh6W2F8qTMuxPhaCkRwJbexqONcG+svqqZYjOQlGSfmUOO36eh+I9lnNw/vJjpAlCFHXBnqXtlcTa+LanjlIAtO3kCA6ATPNggTtXq5N9wR39dowaoQtDQZ3iEKQSruy51vUFFPHe44EttgN2AvgH1+GweE8/F/6IvibTBWe+sNiwWk3SViTTHchdqJ390KoagMfU73jE9e8hF7xvYVq89Tf3byoQkqXxZUVMmkepujfEeXwVshNmHSbi0xzTCelVofC7EuE8vKvC3l4KS71Me/5iPj3eqcRvgtYdaRpoiN1Ia1bWuUEfRJlVo3Z/HxKW6jqUYs/UasXReQ9O4fvjCKWVadh3XHkLLjP8Agb9tyEAhTxLJS5gD9c8AaKGbJU6DWNm5wlOzPZX4UcLXmvyIBpN+bXe0kI417War0QjfVFaem0sGDFSU9KbHrJQ7dxokv9uX/zFgEr/JpLiirDNR17gNrM7N1UEB3EJBnsNSoJ1+vcFtfEy5Lt49WRqcTPdl44LCmnrr1M/MkwzfcRNwyK/SJ3U+/MI1B8dBJR6JDVWBOo5ECIzInTskJFRwuiwERLexfGgK4i05uhl9xInWhEJ6OrlftipDeIl2cTt3gxUBD7pp0PMM25dQmNuKTfdIctsCK6XZpIyC51M/t8Wc+6hjecIB2PxyaCmbl2qcg2ei5I2Q87xTIKvh/7S+XUvgc2l4oGsMh8TG2VkqbxOHUPvXRoQs/QCh213HQ7I9IDTQ68QMtz6fvRuXK1euao2As9ns5sGA7dfRkkqUMh92L7bM5C6gW4Jh+i6II3N7b/ZpYCb+VPvS95DKIqx3ogS8caaHxgUUzY9nLA1s/EdI1ZbAh/D5fBhbtqrr7YHaTRfLWk1+ZzYe8HZrt0yFu/ReCXwoIBD2tzlbl6DLyp64uj8BQzmoQ7Hrv3gmPngOb+R3AyvGma8Td4J3hPNrtAiMI+aen1QZetMZlUayXtNhtG2/VHuRInZ6brOMTXUZmetCa27nmgTzE3daxp9qVhxdhaBOZFGVN0a+GOkfcUY8O/iONcKNHR1+TZhvV48VhY16KH5af1Ie1PB603cBBv37tXgw9nHr+X9O83gdcHosfQ4qPY8VJleHx0xbyvDGXU8XF2o9Zbvc95m7iUlnZ0ZJob7DcnnmHD3huRpvdeEs9j5rtnxDi22u0GmDUMPcR2gW54obsjN06irT52/cmQiAKpV4yIHfhzKlJrV3kAf++Cvz3CCG9Fs7+vPQJvq8/x91MBeJPNpr8xIYDfscD/6fwUPoiWwr+YEsIbgDbvVWXDnwmV/0sOEj6IkP5fXE/4kAfUTwoe7w1dwv9u6v3MjMEHlVT+Cw1V+O9KnN/XcYL/NQyoH87wXy9D/xbfhA96Qv0DOwQ+LD7zz+MC+H/nQoLAfyzs/cO+Ad7uDf43jdU3VO1/L8P5/wyDfnwv8HtaWP/lIhW8h+qd2LS0i1eZEUf3SywPH3QHA37Ffv5vmjPwJ07Vf+qNxbfsnNENwzAIRN8O/eoEXaH7T1ZF7UdUyWpsg81BN4hijI/jAcGFmjs5jgjO59d3SRfTnZYklUXgUVsT9cOaRb8x1EQq3mVAz3K/1aaEqIjGncsxglzFbT8Rzc+2K8XRnfaxqTOJJsxW8xrUkz5faU3Bu/ccyyNNLA+29gn8bUuwA2TdTKMalQyDTzP4NiUz30mioH1+8/g9YY5ik1pMzoJfmBcoG/sftIGgr9MyB5XwWt3ZgihMCL7PjEDU6pa2Ifketr52O49AW512GMnIGBdOyRDJ7UeGCAZa8x32jWnyQK+DNYs23jCfQhEjW813uRF0qn0ZjENlO+w4dxJF89DbTFrD/6Kp/l+pKf6KTRMlCKtYE5AY3VkPmytHnnw+FqUomRceU1okFHddSZz9aWivlkSrlWl/UwmWlJfb8SiMtnlaMChQHJ59MopPzj5RH3ycDTLK7NBuBAeC9YupcCB3jv8tbahChLYMIiTfLsPFXYmCeUynv9g7l5yGoRiKHiaICRIMkFgFI2bsf19IDKq2JFHez762u4O0cfyu78ePEBvPFiqMFFXELlwi2TZCtHYwdB/NprlSZH3wrmUUJZXGY+OiOFJfz79QD/ze4gWkbZwGbjNCz7ITvhBqqQD/4RdBPc7TPg6SpOD74+SiDla7/zLoGD9tGiXrDzs7ZqM8qlosUqHQibf5Fsm0IbbHqUKQC6GWVRnREx+j5+XDHxA+9DNYAql/3Bk8SJYAZC/9SKSHXcGVUmdhzjYzS/yfMEYuZxN7m4cphOI7LtiTFK9xYCau1/bvJDIKhkRuTFbkMr21jyooWNU8Gy5pEE0nHKBUy99wG1HnXW/7CtDb6WC70xZBsco0q0GZcNBOjE+ft16csCTniHOeXidhGLRJkEEdqa2uG0ofAS+8k8362gpYib8ScUzE6RHVU91R+LDLh6d0BskIVCGqFbggdR7mhMmIwkbxvxmPFJ1sAGJQwgZyAFEI4WJYiLgpp4TcHZvEMLKsKwEKSQCbtDB5ya5zXzE1rlTbL0CCmbunz6GPDRLBvM3TRxTC1OoiWoKCR/8N30qORRj9siz+0UVfzzUVYjFHiIuSy4SvpiMiOLlWsg2kIPYGDm1ycbztrYuiF05fALUQN+PjryQunztHMkYFkHgBaLSAqb1fECnDjgNUJGcS6PzQRjqOq5E3QIef9ZkjqCiJX5ctGRrZSBWjA0l82iQqEpXXbb68Fb9jg4DPPHXmRm2vj/Upwevn98/H89NX1XsGSFrZp6cbJIg5R1SM5mPZOfaIketYJ0kjMZE4cou4OxWdwxRkgrU9+y/Q5GkMxXV1wmJ1e6AK5N1DLmh6uA07Y6rhvqMLElrZnGAVDBlymPmBENrpPOFgooojdO8gIj/xfVx0iEp2ZlCQMgrITiGg2ZvtfKkUcMMemk8I98om/3mosLNu3pPCFsE/IC2yy8UvcE446DaZQyCB023oy0Layv1bztnlAAyCMPi7/6n3uGTZNFMh0J4BTUt/yLBmnLIAb/hG1cFkeWYdm25H0Qi3SMzzG9CTvhw8QKATdVgj08g3IibxQ9QFj5ncikErZvgGaHULP6BBicfO952AxRP7bvOT2sXWeNJNybEketJYZOEGig6SK96P4isKWL5j4bWYUiQRuwD7ieLQ5Z03zgAAAABJRU5ErkJggg==\";\n/*\n * Applies a Microsoft implementation of acrylic to a surface\n *\n * - backgroundColor: This should be an RGBa color value to achieve the acrylic effect\n * - opacity: The opacity of the background\n * - fallbackOpacity?: Applied in the event that backdrop-filter is not supported in the current browser, defaults to 0.9\n * - topHighlight?: The option to highlight the top border of the surface acrylic is applied to, defaults to false\n */\nexport function applyAcrylicMaterial(backgroundColor, opacity, fallbackOpacity = 0.9, topHighlight = false) {\n const background = parseColorString(backgroundColor);\n const acrylicConfig = {\n textureImage: acrylicNoise,\n backgroundColor: new ColorRGBA64(background.r, background.g, background.b, opacity).toStringWebRGBA(),\n fallbackBackgroundColor: new ColorRGBA64(background.r, background.g, background.b, fallbackOpacity).toStringWebRGBA(),\n };\n return Object.assign({ \"border-top\": topHighlight\n ? `${toPx(1)} solid ${new ColorRGBA64(background.r, background.g, background.b, 0.1).toStringWebRGBA()}`\n : \"\" }, applyAcrylic(acrylicConfig));\n}\n","'use strict';\n\n/**\n * Copyright 2015, Yahoo! Inc.\n * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.\n */\nvar ReactIs = require('react-is');\nvar REACT_STATICS = {\n childContextTypes: true,\n contextType: true,\n contextTypes: true,\n defaultProps: true,\n displayName: true,\n getDefaultProps: true,\n getDerivedStateFromError: true,\n getDerivedStateFromProps: true,\n mixins: true,\n propTypes: true,\n type: true\n};\n\nvar KNOWN_STATICS = {\n name: true,\n length: true,\n prototype: true,\n caller: true,\n callee: true,\n arguments: true,\n arity: true\n};\n\nvar FORWARD_REF_STATICS = {\n '$$typeof': true,\n render: true,\n defaultProps: true,\n displayName: true,\n propTypes: true\n};\n\nvar MEMO_STATICS = {\n '$$typeof': true,\n compare: true,\n defaultProps: true,\n displayName: true,\n propTypes: true,\n type: true\n};\n\nvar TYPE_STATICS = {};\nTYPE_STATICS[ReactIs.ForwardRef] = FORWARD_REF_STATICS;\n\nfunction getStatics(component) {\n if (ReactIs.isMemo(component)) {\n return MEMO_STATICS;\n }\n return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;\n}\n\nvar defineProperty = Object.defineProperty;\nvar getOwnPropertyNames = Object.getOwnPropertyNames;\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;\nvar getPrototypeOf = Object.getPrototypeOf;\nvar objectPrototype = Object.prototype;\n\nfunction hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {\n if (typeof sourceComponent !== 'string') {\n // don't hoist over string (html) components\n\n if (objectPrototype) {\n var inheritedComponent = getPrototypeOf(sourceComponent);\n if (inheritedComponent && inheritedComponent !== objectPrototype) {\n hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);\n }\n }\n\n var keys = getOwnPropertyNames(sourceComponent);\n\n if (getOwnPropertySymbols) {\n keys = keys.concat(getOwnPropertySymbols(sourceComponent));\n }\n\n var targetStatics = getStatics(targetComponent);\n var sourceStatics = getStatics(sourceComponent);\n\n for (var i = 0; i < keys.length; ++i) {\n var key = keys[i];\n if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {\n var descriptor = getOwnPropertyDescriptor(sourceComponent, key);\n try {\n // Avoid failures from read-only properties\n defineProperty(targetComponent, key, descriptor);\n } catch (e) {}\n }\n }\n\n return targetComponent;\n }\n\n return targetComponent;\n}\n\nmodule.exports = hoistNonReactStatics;\n","export default function symbolObservablePonyfill(root) {\n\tvar result;\n\tvar Symbol = root.Symbol;\n\n\tif (typeof Symbol === 'function') {\n\t\tif (Symbol.observable) {\n\t\t\tresult = Symbol.observable;\n\t\t} else {\n\t\t\tresult = Symbol('observable');\n\t\t\tSymbol.observable = result;\n\t\t}\n\t} else {\n\t\tresult = '@@observable';\n\t}\n\n\treturn result;\n};\n","/**\n * This method returns `false`.\n *\n * @static\n * @memberOf _\n * @since 4.13.0\n * @category Util\n * @returns {boolean} Returns `false`.\n * @example\n *\n * _.times(2, _.stubFalse);\n * // => [false, false]\n */\nfunction stubFalse() {\n return false;\n}\n\nexport default stubFalse;\n","'use strict';\n\n/**\n * Copyright 2015, Yahoo! Inc.\n * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.\n */\nvar ReactIs = require('react-is');\nvar REACT_STATICS = {\n childContextTypes: true,\n contextType: true,\n contextTypes: true,\n defaultProps: true,\n displayName: true,\n getDefaultProps: true,\n getDerivedStateFromError: true,\n getDerivedStateFromProps: true,\n mixins: true,\n propTypes: true,\n type: true\n};\n\nvar KNOWN_STATICS = {\n name: true,\n length: true,\n prototype: true,\n caller: true,\n callee: true,\n arguments: true,\n arity: true\n};\n\nvar FORWARD_REF_STATICS = {\n '$$typeof': true,\n render: true,\n defaultProps: true,\n displayName: true,\n propTypes: true\n};\n\nvar MEMO_STATICS = {\n '$$typeof': true,\n compare: true,\n defaultProps: true,\n displayName: true,\n propTypes: true,\n type: true\n};\n\nvar TYPE_STATICS = {};\nTYPE_STATICS[ReactIs.ForwardRef] = FORWARD_REF_STATICS;\n\nfunction getStatics(component) {\n if (ReactIs.isMemo(component)) {\n return MEMO_STATICS;\n }\n return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;\n}\n\nvar defineProperty = Object.defineProperty;\nvar getOwnPropertyNames = Object.getOwnPropertyNames;\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;\nvar getPrototypeOf = Object.getPrototypeOf;\nvar objectPrototype = Object.prototype;\n\nfunction hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {\n if (typeof sourceComponent !== 'string') {\n // don't hoist over string (html) components\n\n if (objectPrototype) {\n var inheritedComponent = getPrototypeOf(sourceComponent);\n if (inheritedComponent && inheritedComponent !== objectPrototype) {\n hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);\n }\n }\n\n var keys = getOwnPropertyNames(sourceComponent);\n\n if (getOwnPropertySymbols) {\n keys = keys.concat(getOwnPropertySymbols(sourceComponent));\n }\n\n var targetStatics = getStatics(targetComponent);\n var sourceStatics = getStatics(sourceComponent);\n\n for (var i = 0; i < keys.length; ++i) {\n var key = keys[i];\n if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {\n var descriptor = getOwnPropertyDescriptor(sourceComponent, key);\n try {\n // Avoid failures from read-only properties\n defineProperty(targetComponent, key, descriptor);\n } catch (e) {}\n }\n }\n\n return targetComponent;\n }\n\n return targetComponent;\n}\n\nmodule.exports = hoistNonReactStatics;\n","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _getDisplayName = _interopRequireDefault(require(\"./getDisplayName\"));\n\nvar wrapDisplayName = function wrapDisplayName(BaseComponent, hocName) {\n return hocName + \"(\" + (0, _getDisplayName.default)(BaseComponent) + \")\";\n};\n\nvar _default = wrapDisplayName;\nexports.default = _default;","/**\n * This method returns `undefined`.\n *\n * @static\n * @memberOf _\n * @since 2.3.0\n * @category Util\n * @example\n *\n * _.times(2, _.noop);\n * // => [undefined, undefined]\n */\nfunction noop() {\n // No operation performed.\n}\n\nexport default noop;\n","import Foundation from \"@microsoft/fast-components-foundation-react\";\nimport { ContextMenu as BaseContextMenu } from \"@microsoft/fast-components-react-base\";\nimport React from \"react\";\nimport { neutralLayerFloating } from \"@microsoft/fast-components-styles-msft\";\nimport { DisplayNamePrefix } from \"../utilities\";\nimport { Background } from \"../background\";\nclass ContextMenu extends Foundation {\n constructor() {\n super(...arguments);\n this.handledProps = {\n children: void 0,\n managedClasses: void 0,\n enableAutoFocus: void 0,\n };\n }\n /**\n * Renders the component\n */\n render() {\n return (React.createElement(Background, { value: neutralLayerFloating, tag: null },\n React.createElement(BaseContextMenu, Object.assign({}, this.unhandledProps(), { enableAutoFocus: this.props.enableAutoFocus, managedClasses: this.props.managedClasses }), this.props.children)));\n }\n}\nContextMenu.displayName = `${DisplayNamePrefix}ContextMenu`;\nContextMenu.defaultProps = {\n managedClasses: {},\n};\nexport default ContextMenu;\nexport * from \"./context-menu.props\";\n","import Foundation from \"@microsoft/fast-components-foundation-react\";\nimport { ContextMenuItem as BaseContextMenuItem } from \"@microsoft/fast-components-react-base\";\nimport { classNames } from \"@microsoft/fast-web-utilities\";\nimport React from \"react\";\nimport { DisplayNamePrefix } from \"../utilities\";\nclass ContextMenuItem extends Foundation {\n constructor() {\n super(...arguments);\n this.handledProps = {\n after: void 0,\n before: void 0,\n };\n }\n render() {\n return (React.createElement(BaseContextMenuItem, Object.assign({}, this.unhandledProps()),\n this.props.before !== undefined ? this.props.before : undefined,\n React.createElement(\"span\", { className: classNames(this.props.managedClasses.contextMenuItem_contentRegion) }, this.props.children),\n this.props.after !== undefined ? this.props.after : undefined));\n }\n}\nContextMenuItem.displayName = `${DisplayNamePrefix}ContextMenuItem`;\nContextMenuItem.defaultProps = {\n managedClasses: {},\n};\nexport default ContextMenuItem;\nexport * from \"./context-menu-item.props\";\n","import { neutralDividerRestDelta, neutralPalette } from \"../design-system\";\nimport { findClosestBackgroundIndex, getSwatch, isDarkMode } from \"./palette\";\nimport { colorRecipeFactory } from \"./common\";\nconst neutralDividerAlgorithm = (designSystem) => {\n const palette = neutralPalette(designSystem);\n const backgroundIndex = findClosestBackgroundIndex(designSystem);\n const delta = neutralDividerRestDelta(designSystem);\n const direction = isDarkMode(designSystem) ? -1 : 1;\n const index = backgroundIndex + direction * delta;\n return getSwatch(index, palette);\n};\nexport const neutralDividerRest = colorRecipeFactory(neutralDividerAlgorithm);\n","Object.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports[\"default\"] = val;\nexports.h = void 0;\n\nfunction _objectSpread(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i] != null ? arguments[i] : {};\n var ownKeys = Object.keys(source);\n\n if (typeof Object.getOwnPropertySymbols === 'function') {\n ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {\n return Object.getOwnPropertyDescriptor(source, sym).enumerable;\n }));\n }\n\n ownKeys.forEach(function (key) {\n _defineProperty(target, key, source[key]);\n });\n }\n\n return target;\n}\n\nfunction _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nfunction _objectWithoutProperties(source, excluded) {\n if (source == null) return {};\n\n var target = _objectWithoutPropertiesLoose(source, excluded);\n\n var key, i;\n\n if (Object.getOwnPropertySymbols) {\n var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n\n for (i = 0; i < sourceSymbolKeys.length; i++) {\n key = sourceSymbolKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n target[key] = source[key];\n }\n }\n\n return target;\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nvar _window = window,\n customElements = _window.customElements;\nvar cacheCtorLocalNames = new Map();\nvar cacheElementEventHandlers = new WeakMap(); // Override customElements.define() to cache constructor local names. This is\n// required for all virtual DOM implementations that don't natively support\n// custom element constructors as node names.\n\nif (customElements) {\n var define = customElements.define;\n\n customElements.define = function (name, Ctor) {\n cacheCtorLocalNames.set(Ctor, name);\n return define.call(customElements, name, Ctor);\n };\n} // Applies attributes to the ref element. It doesn't traverse through\n// existing attributes and assumes that the supplied object will supply\n// all attributes that the applicator should care about, even ones that\n// should be removed.\n\n\nfunction applyAttrs(e, attrs) {\n if (!attrs) return;\n Object.keys(attrs).forEach(function (name) {\n var value = attrs[name];\n\n if (value == null) {\n e.removeAttribute(name);\n } else {\n e.setAttribute(name, value);\n }\n });\n}\n\nfunction applyEvents(e) {\n var events = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n var handlers = cacheElementEventHandlers.get(e) || {};\n cacheElementEventHandlers.set(e, events); // Remove any old listeners that are different - or aren't specified\n // in - the new set.\n\n Object.keys(handlers).forEach(function (name) {\n if (handlers[name] && handlers[name] !== events[name]) {\n e.removeEventListener(name, handlers[name]);\n }\n }); // Bind new listeners.\n\n Object.keys(events).forEach(function (name) {\n if (events[name] !== handlers[name]) {\n e.addEventListener(name, events[name]);\n }\n });\n} // Sets props. Straight up.\n\n\nfunction applyProps(e, props) {\n Object.keys(props || {}).forEach(function (name) {\n e[name] = props[name];\n });\n} // Ensures that if a ref was specified that it's called as normal.\n\n\nfunction applyRef(e, ref) {\n if (ref) {\n ref(e);\n }\n} // Ensures attrs, events and props are all set as the consumer intended.\n\n\nfunction ensureProps(objs) {\n var _ref = objs || {},\n attrs = _ref.attrs,\n events = _ref.events,\n props = _ref.props,\n ref = _ref.ref,\n pass = _objectWithoutProperties(_ref, [\"attrs\", \"events\", \"props\", \"ref\"]);\n\n var newRef = ensureRef(attrs, events, props, ref);\n return _objectSpread({}, pass, {\n ref: newRef\n });\n} // Ensures a ref is supplied that set each member appropriately and that\n// the original ref is called.\n\n\nfunction ensureRef(attrs, events, props, ref) {\n return function (e) {\n if (e) {\n applyAttrs(e, attrs);\n applyEvents(e, events);\n applyProps(e, props);\n }\n\n applyRef(e, ref);\n };\n} // Returns the custom element local name if it exists or the original\n// value.\n\n\nfunction ensureLocalName(lname) {\n var temp = cacheCtorLocalNames.get(lname);\n return temp || lname;\n} // Default adapter for rendering DOM.\n\n\nfunction defaultCreateElement(lname, _ref2) {\n var ref = _ref2.ref,\n props = _objectWithoutProperties(_ref2, [\"ref\"]);\n\n var node = typeof lname === \"function\" ? new lname() : document.createElement(lname);\n\n if (ref) {\n ref(node);\n }\n\n for (var name in props) {\n node[name] = props[name];\n }\n\n for (var _len = arguments.length, chren = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {\n chren[_key - 2] = arguments[_key];\n }\n\n chren.forEach(function (c) {\n return node.appendChild(typeof c === \"string\" ? document.createTextNode(c) : c);\n });\n return node;\n} // Provides a function that takes the original createElement that is being\n// wrapped. It returns a function that you call like you normally would.\n//\n// It requires support for:\n// - `ref`\n\n\nfunction val() {\n var createElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultCreateElement;\n return function (lname, props) {\n lname = ensureLocalName(lname);\n props = ensureProps(props);\n\n for (var _len2 = arguments.length, chren = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {\n chren[_key2 - 2] = arguments[_key2];\n }\n\n return createElement.apply(void 0, [lname, props].concat(chren));\n };\n}\n\nvar h = val();\nexports.h = h;\n","import { __decorate } from \"tslib\";\nimport { attr, DOM, emptyArray, FASTElement, observable } from \"@microsoft/fast-element\";\nimport { keyCodeEnter } from \"@microsoft/fast-web-utilities\";\nconst proxySlotName = \"form-associated-proxy\";\n/**\n * @alpha\n */\nexport const supportsElementInternals = \"ElementInternals\" in window;\n/**\n * Base class for providing Custom Element Form Association.\n *\n * @alpha\n */\nexport class FormAssociated extends FASTElement {\n constructor() {\n super();\n /**\n * Track whether the value has been changed from the initial value\n */\n this.dirtyValue = false;\n /**\n * The initial value of the form. This value sets the `value` property\n * only when the `value` property has not been explicitly set.\n *\n * @remarks\n * HTML Attribute: value\n */\n this.initialValue = \"\";\n /**\n * Sets the element's disabled state. A disabled element will not be included during form submission.\n *\n * @remarks\n * HTML Attribute: disabled\n */\n this.disabled = false;\n /**\n * Require the field to be completed prior to form submission.\n *\n * @remarks\n * HTML Attribute: required\n */\n this.required = false;\n /**\n * These are events that are still fired by the proxy\n * element based on user / programmatic interaction.\n *\n * The proxy implementation should be transparent to\n * the app author, so block these events from emitting.\n */\n this.proxyEventsToBlock = [\"change\", \"click\"];\n this.proxyInitialized = false;\n if (supportsElementInternals) {\n this.elementInternals = this.attachInternals();\n }\n }\n /**\n * Must evaluate to true to enable elementInternals.\n * Feature detects API support and resolve respectively\n *\n * @internal\n */\n static get formAssociated() {\n return supportsElementInternals;\n }\n /**\n * Returns the validity state of the element\n */\n get validity() {\n return supportsElementInternals\n ? this.elementInternals.validity\n : this.proxy.validity;\n }\n /**\n * Retrieve a reference to the associated form.\n * Returns null if not associated to any form.\n */\n get form() {\n return supportsElementInternals ? this.elementInternals.form : this.proxy.form;\n }\n /**\n * Retrieve the localized validation message,\n * or custom validation message if set.\n */\n get validationMessage() {\n return supportsElementInternals\n ? this.elementInternals.validationMessage\n : this.proxy.validationMessage;\n }\n /**\n * Whether the element will be validated when the\n * form is submitted\n */\n get willValidate() {\n return supportsElementInternals\n ? this.elementInternals.willValidate\n : this.proxy.willValidate;\n }\n /**\n * A reference to all associated label elements\n */\n get labels() {\n if (supportsElementInternals) {\n return Object.freeze(Array.from(this.elementInternals.labels));\n }\n else if (this.proxy instanceof HTMLElement &&\n this.proxy.ownerDocument &&\n this.id) {\n // Labels associated by wrapping the element: \n const parentLabels = this.proxy.labels;\n // Labels associated using the `for` attribute\n const forLabels = Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`));\n const labels = parentLabels\n ? forLabels.concat(Array.from(parentLabels))\n : forLabels;\n return Object.freeze(labels);\n }\n else {\n return emptyArray;\n }\n }\n /**\n * Invoked when the `value` property changes\n * @param previous - the previous value\n * @param next - the new value\n *\n * @remarks\n * If elements extending `FormAssociated` implement a `valueChanged` method\n * They must be sure to invoke `super.valueChanged(previous, next)` to ensure\n * proper functioning of `FormAssociated`\n */\n valueChanged(previous, next) {\n this.dirtyValue = true;\n if (this.proxy instanceof HTMLElement) {\n this.proxy.value = this.value;\n }\n this.setFormValue(this.value);\n }\n /**\n * Invoked when the `initialValue` property changes\n *\n * @param previous - the previous value\n * @param next - the new value\n *\n * @remarks\n * If elements extending `FormAssociated` implement a `initialValueChanged` method\n * They must be sure to invoke `super.initialValueChanged(previous, next)` to ensure\n * proper functioning of `FormAssociated`\n */\n initialValueChanged(previous, next) {\n // If the value is clean and the component is connected to the DOM\n // then set value equal to the attribute value.\n if (!this.dirtyValue && this.$fastController.isConnected) {\n this.value = this.initialValue;\n this.dirtyValue = false;\n }\n }\n /**\n * Invoked when the `disabled` property changes\n *\n * @param previous - the previous value\n * @param next - the new value\n *\n * @remarks\n * If elements extending `FormAssociated` implement a `disabledChanged` method\n * They must be sure to invoke `super.disabledChanged(previous, next)` to ensure\n * proper functioning of `FormAssociated`\n */\n disabledChanged(previous, next) {\n if (this.proxy instanceof HTMLElement) {\n this.proxy.disabled = this.disabled;\n }\n DOM.queueUpdate(() => this.classList.toggle(\"disabled\", this.disabled));\n }\n /**\n * Invoked when the `name` property changes\n *\n * @param previous - the previous value\n * @param next - the new value\n *\n * @remarks\n * If elements extending `FormAssociated` implement a `nameChanged` method\n * They must be sure to invoke `super.nameChanged(previous, next)` to ensure\n * proper functioning of `FormAssociated`\n */\n nameChanged() {\n if (this.proxy instanceof HTMLElement) {\n this.proxy.name = this.name;\n }\n }\n /**\n * Invoked when the `required` property changes\n *\n * @param previous - the previous value\n * @param next - the new value\n *\n * @remarks\n * If elements extending `FormAssociated` implement a `requiredChanged` method\n * They must be sure to invoke `super.requiredChanged(previous, next)` to ensure\n * proper functioning of `FormAssociated`\n */\n requiredChanged() {\n if (this.proxy instanceof HTMLElement) {\n this.proxy.required = this.required;\n }\n DOM.queueUpdate(() => this.classList.toggle(\"required\", this.required));\n }\n /**\n * @internal\n */\n connectedCallback() {\n super.connectedCallback();\n this.value = this.initialValue;\n this.dirtyValue = false;\n if (!supportsElementInternals) {\n this.attachProxy();\n }\n }\n /**\n * @internal\n */\n disconnectedCallback() {\n this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));\n }\n /**\n * Return the current validity of the element.\n */\n checkValidity() {\n return supportsElementInternals\n ? this.elementInternals.checkValidity()\n : this.proxy.checkValidity();\n }\n /**\n * Return the current validity of the element.\n * If false, fires an invalid event at the element.\n */\n reportValidity() {\n return supportsElementInternals\n ? this.elementInternals.reportValidity()\n : this.proxy.reportValidity();\n }\n /**\n * Set the validity of the control. In cases when the elementInternals object is not\n * available (and the proxy element is used to report validity), this function will\n * do nothing unless a message is provided, at which point the setCustomValidity method\n * of the proxy element will be invoked with the provided message.\n * @param flags - Validity flags\n * @param message - Optional message to supply\n * @param anchor - Optional element used by UA to display an interactive validation UI\n */\n setValidity(flags, message, anchor) {\n if (supportsElementInternals) {\n this.elementInternals.setValidity(flags, message, anchor);\n }\n else if (typeof message === \"string\") {\n this.proxy.setCustomValidity(message);\n }\n }\n /**\n * Invoked when a connected component's form or fieldset has it's disabled\n * state changed.\n * @param disabled - the disabled value of the form / fieldset\n */\n formDisabledCallback(disabled) {\n this.disabled = disabled;\n }\n /**\n * Attach the proxy element to the DOM\n */\n attachProxy() {\n var _a;\n if (!this.proxyInitialized) {\n this.proxyInitialized = true;\n this.proxy.style.display = \"none\";\n this.proxyEventsToBlock.forEach(name => this.proxy.addEventListener(name, this.stopPropagation));\n // These are typically mapped to the proxy during\n // property change callbacks, but during initialization\n // on the initial call of the callback, the proxy is\n // still undefined. We should find a better way to address this.\n this.proxy.disabled = this.disabled;\n this.proxy.required = this.required;\n if (typeof this.name === \"string\") {\n this.proxy.name = this.name;\n }\n if (typeof this.value === \"string\") {\n this.proxy.value = this.value;\n }\n this.proxy.setAttribute(\"slot\", proxySlotName);\n this.proxySlot = document.createElement(\"slot\");\n this.proxySlot.setAttribute(\"name\", proxySlotName);\n }\n (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(this.proxySlot);\n this.appendChild(this.proxy);\n }\n /**\n * Detach the proxy element from the DOM\n */\n detachProxy() {\n var _a;\n this.removeChild(this.proxy);\n (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeChild(this.proxySlot);\n }\n /**\n * Associates the provided value (and optional state) with the parent form.\n * @param value - The value to set\n * @param state - The state object provided to during session restores and when autofilling.\n */\n setFormValue(value, state) {\n if (supportsElementInternals && this.elementInternals) {\n this.elementInternals.setFormValue(value, state);\n }\n }\n keypressHandler(e) {\n switch (e.keyCode) {\n case keyCodeEnter:\n if (this.form instanceof HTMLFormElement) {\n // Match native behavior\n this.form.submit();\n }\n break;\n }\n }\n /**\n * Used to stop propagation of proxy element events\n * @param e - Event object\n */\n stopPropagation(e) {\n e.stopPropagation();\n }\n}\n__decorate([\n observable\n], FormAssociated.prototype, \"value\", void 0);\n__decorate([\n attr({ mode: \"fromView\", attribute: \"value\" })\n], FormAssociated.prototype, \"initialValue\", void 0);\n__decorate([\n attr({ mode: \"boolean\" })\n], FormAssociated.prototype, \"disabled\", void 0);\n__decorate([\n attr\n], FormAssociated.prototype, \"name\", void 0);\n__decorate([\n attr({ mode: \"boolean\" })\n], FormAssociated.prototype, \"required\", void 0);\n","import StackPanel from \"./stack-panel\";\nimport StackPanelSchema from \"./stack-panel.schema\";\nexport { StackPanelSchema };\nexport default StackPanel;\nexport * from \"./stack-panel\";\n","import Foundation from \"@microsoft/fast-components-foundation-react\";\nimport { AutoSuggestContext, ListboxItem as BaseListboxItem, } from \"@microsoft/fast-components-react-base\";\nimport { classNames, startsWith } from \"@microsoft/fast-web-utilities\";\nimport { isNil } from \"lodash-es\";\nimport React from \"react\";\nimport { DisplayNamePrefix } from \"../utilities\";\nclass AutoSuggestOption extends Foundation {\n constructor() {\n super(...arguments);\n this.handledProps = {\n value: void 0,\n id: void 0,\n displayFormatter: void 0,\n formatDisplayString: void 0,\n managedClasses: void 0,\n };\n /**\n * Calls the right function to format the display string\n */\n this.formatDisplayString = () => {\n const displayString = this.props.displayString !== undefined\n ? this.props.displayString\n : this.props.value;\n if (!this.props.formatDisplayString) {\n return displayString;\n }\n return typeof this.props.displayFormatter === \"function\"\n ? this.props.displayFormatter(displayString, this.context.currentValue)\n : this.defaultDisplayFormatter(displayString, this.context.currentValue);\n };\n /**\n * Default display string formatter function\n */\n this.defaultDisplayFormatter = (displayString, searchString) => {\n if (!isNil(displayString) &&\n !isNil(searchString) &&\n startsWith(displayString.toLowerCase(), searchString.toLowerCase())) {\n return (React.createElement(\"span\", null,\n React.createElement(\"b\", null, displayString.substring(0, searchString.length)),\n displayString.substring(searchString.length, displayString.length)));\n }\n return displayString;\n };\n }\n render() {\n const { autoSuggestOption, autoSuggestOption__selected, autoSuggestOption__disabled, autoSuggestOption_contentRegion, } = this.props.managedClasses;\n return (React.createElement(BaseListboxItem, Object.assign({}, this.unhandledProps(), { id: this.props.id, value: this.props.value, managedClasses: {\n listboxItem: classNames(autoSuggestOption),\n listboxItem__disabled: classNames(autoSuggestOption__disabled),\n listboxItem__selected: classNames(autoSuggestOption__selected),\n } }),\n React.createElement(\"span\", { className: classNames(autoSuggestOption_contentRegion) },\n this.formatDisplayString(),\n this.props.children)));\n }\n}\nAutoSuggestOption.displayName = `${DisplayNamePrefix}AutoSuggestOption`;\nAutoSuggestOption.contextType = AutoSuggestContext;\nAutoSuggestOption.defaultProps = {\n formatDisplayString: true,\n managedClasses: {},\n};\nAutoSuggestOption.contextType = AutoSuggestContext;\nexport default AutoSuggestOption;\nexport * from \"./auto-suggest-option.props\";\n","import Foundation from \"@microsoft/fast-components-foundation-react\";\nimport { AutoSuggest as BaseAutoSuggest, } from \"@microsoft/fast-components-react-base\";\nimport React from \"react\";\nimport { TextAction } from \"../text-action\";\nimport { DisplayNamePrefix } from \"../utilities\";\nclass AutoSuggest extends Foundation {\n constructor() {\n super(...arguments);\n this.handledProps = {\n listboxId: void 0,\n disabled: void 0,\n inputRegion: void 0,\n managedClasses: void 0,\n };\n /**\n * The default function that renders an unstyled content display\n */\n this.defaultInputRegionRenderFunction = (props, state, onChange, onClick, onKeyDown) => {\n const listboxId = state.isMenuOpen ? props.listboxId : null;\n const activedescendantId = state.focusedItem !== null ? state.focusedItem.id : null;\n return (React.createElement(TextAction, { disabled: props.disabled, onChange: onChange, onClick: onClick, onKeyDown: onKeyDown, value: state.value, placeholder: props.placeholder, beforeGlyph: this.generateGlyph, role: \"combobox\", \"aria-label\": props.label || null, \"aria-autocomplete\": \"both\", \"aria-activedescendant\": activedescendantId || null, \"aria-expanded\": state.isMenuOpen, \"aria-owns\": listboxId || null, \"aria-controls\": listboxId || null }));\n };\n /**\n * Gets the search glyph\n * TODO: scomea - replace with ref to a glyph resource (https://github.com/Microsoft/fast/issues/1488)\n */\n this.generateGlyph = (className) => {\n return (React.createElement(\"svg\", { width: \"16\", height: \"16\", viewBox: \"0 0 16 16\", className: className, xmlns: \"http://www.w3.org/2000/svg\" },\n React.createElement(\"path\", { d: \"M10.5 0C11.0052 0 11.4922 0.0651042 11.9609 0.195312C12.4297 0.325521 12.8672 0.510417 13.2734 0.75C13.6797 0.989583 14.0495 1.27865 14.3828 1.61719C14.7214 1.95052 15.0104 2.32031 15.25 2.72656C15.4896 3.13281 15.6745 3.57031 15.8047 4.03906C15.9349 4.50781 16 4.99479 16 5.5C16 6.00521 15.9349 6.49219 15.8047 6.96094C15.6745 7.42969 15.4896 7.86719 15.25 8.27344C15.0104 8.67969 14.7214 9.05208 14.3828 9.39062C14.0495 9.72396 13.6797 10.0104 13.2734 10.25C12.8672 10.4896 12.4297 10.6745 11.9609 10.8047C11.4922 10.9349 11.0052 11 10.5 11C9.84896 11 9.22396 10.8906 8.625 10.6719C8.03125 10.4531 7.48438 10.138 6.98438 9.72656L0.851562 15.8516C0.752604 15.9505 0.635417 16 0.5 16C0.364583 16 0.247396 15.9505 0.148438 15.8516C0.0494792 15.7526 0 15.6354 0 15.5C0 15.3646 0.0494792 15.2474 0.148438 15.1484L6.27344 9.01562C5.86198 8.51562 5.54688 7.96875 5.32812 7.375C5.10938 6.77604 5 6.15104 5 5.5C5 4.99479 5.0651 4.50781 5.19531 4.03906C5.32552 3.57031 5.51042 3.13281 5.75 2.72656C5.98958 2.32031 6.27604 1.95052 6.60938 1.61719C6.94792 1.27865 7.32031 0.989583 7.72656 0.75C8.13281 0.510417 8.57031 0.325521 9.03906 0.195312C9.50781 0.0651042 9.99479 0 10.5 0ZM10.5 10C11.1198 10 11.7031 9.88281 12.25 9.64844C12.7969 9.40885 13.2734 9.08594 13.6797 8.67969C14.0859 8.27344 14.4062 7.79688 14.6406 7.25C14.8802 6.70312 15 6.11979 15 5.5C15 4.88021 14.8802 4.29688 14.6406 3.75C14.4062 3.20312 14.0859 2.72656 13.6797 2.32031C13.2734 1.91406 12.7969 1.59375 12.25 1.35938C11.7031 1.11979 11.1198 1 10.5 1C9.88021 1 9.29688 1.11979 8.75 1.35938C8.20312 1.59375 7.72656 1.91406 7.32031 2.32031C6.91406 2.72656 6.59115 3.20312 6.35156 3.75C6.11719 4.29688 6 4.88021 6 5.5C6 6.11979 6.11719 6.70312 6.35156 7.25C6.59115 7.79688 6.91406 8.27344 7.32031 8.67969C7.72656 9.08594 8.20312 9.40885 8.75 9.64844C9.29688 9.88281 9.88021 10 10.5 10Z\" })));\n };\n }\n /**\n * Renders the component\n */\n render() {\n return (React.createElement(BaseAutoSuggest, Object.assign({}, this.unhandledProps(), { listboxId: this.props.listboxId, managedClasses: this.props.managedClasses, disabled: this.props.disabled, inputRegion: typeof this.props.inputRegion === \"function\"\n ? this.props.inputRegion\n : this.defaultInputRegionRenderFunction }), this.props.children));\n }\n}\nAutoSuggest.displayName = `${DisplayNamePrefix}AutoSuggest`;\nAutoSuggest.defaultProps = {\n managedClasses: {},\n};\nexport default AutoSuggest;\nexport * from \"./auto-suggest.props\";\n","var __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { get } from \"lodash-es\";\nimport Foundation from \"@microsoft/fast-components-foundation-react\";\nimport { CancelIcon } from \"@edge-web-ui/edge-icons\";\nimport { Dialog as BaseDialog } from \"@microsoft/fast-components-react-base\";\nimport { Button, ButtonAppearance, Heading, HeadingSize, } from \"@microsoft/fast-components-react-msft\";\nimport { canUseDOM } from \"exenv-es6\";\nimport { classNames } from \"@microsoft/fast-web-utilities\";\n/**\n * @deprecated - Will be removed in next major version (v5)\n * Use Dialog from @edge-web-ui/components instead\n */\nclass Dialog extends Foundation {\n constructor() {\n super(...arguments);\n this.handledProps = {\n closeButton: void 0,\n contentWidth: void 0,\n contentHeight: void 0,\n describedBy: void 0,\n heading: void 0,\n label: void 0,\n labelledBy: void 0,\n modal: void 0,\n managedClasses: void 0,\n onDismiss: void 0,\n primaryButton: void 0,\n secondaryButton: void 0,\n visible: void 0,\n };\n this.closeButtonElement = React.createRef();\n /**\n * Handle the close button click and keyboard events\n */\n this.handleCloseButtonClick = (e) => {\n if (typeof get(this.props, \"closeButton.onInvoke\") === \"function\") {\n this.props.closeButton.onInvoke(e);\n }\n };\n }\n /**\n * Renders the component\n */\n render() {\n const { dialog_body, dialog_heading, } = this.props.managedClasses;\n return (React.createElement(BaseDialog, Object.assign({}, this.unhandledProps(), { contentWidth: this.props.contentWidth, contentHeight: this.props.contentHeight, describedBy: this.props.describedBy, label: this.props.label, labelledBy: this.props.labelledBy, modal: this.props.modal, managedClasses: this.props.managedClasses, onDismiss: this.props.onDismiss, className: this.generateClassNames(), visible: this.props.visible }),\n this.generateCloseButton(),\n React.createElement(Heading, Object.assign({ className: classNames(dialog_heading) }, this.getHeadingProps())),\n React.createElement(\"div\", { className: classNames(dialog_body) }, this.props.children),\n this.generateActions()));\n }\n /**\n * React life-cycle method\n */\n componentDidMount() {\n if (canUseDOM() && this.props.visible) {\n this.focusDialogCloseButton();\n }\n }\n /**\n * React life-cycle method\n */\n componentDidUpdate(prevProps) {\n if (!prevProps.visible && this.props.visible) {\n this.focusDialogCloseButton();\n }\n }\n /**\n * Generates class names\n */\n generateClassNames() {\n return super.generateClassNames(classNames([\n this.props.managedClasses.dialog__singleAction,\n !this.props.secondaryButton,\n ]));\n }\n /**\n * Set default props for the heading\n */\n getHeadingProps() {\n return Object.assign({}, { size: HeadingSize._6 }, this.props.heading);\n }\n /**\n * Set default props for the primary button\n */\n getPrimaryButtonProps() {\n return Object.assign({}, { appearance: ButtonAppearance.primary }, this.props.primaryButton);\n }\n generateCloseButton() {\n if (this.props.closeButton) {\n // Destructure the close button prop object so we can pass \"unhandled\" props\n const _a = this.props.closeButton, { label, onInvoke, autofocus } = _a, props = __rest(_a, [\"label\", \"onInvoke\", \"autofocus\"]);\n const { dialog_closeButton, dialog_closeButtonGlyph, } = this.props.managedClasses;\n return (React.createElement(Button, Object.assign({}, props, { appearance: ButtonAppearance.stealth, \"aria-label\": label, className: classNames(dialog_closeButton), onClick: this.handleCloseButtonClick, ref: this.closeButtonElement }),\n React.createElement(CancelIcon, { className: classNames(dialog_closeButtonGlyph) })));\n }\n }\n /**\n * Generates the dialog actions\n */\n generateActions() {\n const { dialog_actionWrapper, dialog_primaryButton, dialog_secondaryButton, } = this.props.managedClasses;\n return (React.createElement(\"div\", { className: classNames(dialog_actionWrapper) },\n React.createElement(Button, Object.assign({ className: classNames(dialog_primaryButton) }, this.getPrimaryButtonProps())),\n this.props.secondaryButton ? (React.createElement(Button, Object.assign({ className: classNames(dialog_secondaryButton) }, this.props.secondaryButton))) : null));\n }\n /**\n * Focus the dialog close button\n */\n focusDialogCloseButton() {\n // exit out of the function if the close button doesn't exist or autofocus is set to true\n if (!this.props.closeButton || this.props.closeButton.autofocus === false) {\n return;\n }\n if (this.closeButtonElement && this.closeButtonElement.current) {\n ReactDOM.findDOMNode(this.closeButtonElement.current).focus();\n }\n }\n}\nDialog.defaultProps = {\n contentHeight: \"auto\",\n contentWidth: \"400px\",\n managedClasses: {},\n visible: false,\n};\nDialog.displayName = \"Dialog\";\nexport default Dialog;\nexport * from \"./dialog.props\";\n","const glyphArrowright = ``;\nexport { glyphArrowright };\nconst glyphBuildingblocks = ``;\nexport { glyphBuildingblocks };\nconst glyphExamples = ``;\nexport { glyphExamples };\nconst glyphGlobalnavbutton = ``;\nexport { glyphGlobalnavbutton };\nconst glyphPage = ``;\nexport { glyphPage };\nconst glyphTransparency = ``;\nexport { glyphTransparency };\n","var __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React from \"react\";\nimport Foundation from \"@microsoft/fast-components-foundation-react\";\nimport { Typography, TypographySize, } from \"@microsoft/fast-components-react-msft\";\nimport { Hypertext } from \"@microsoft/fast-components-react-base\";\nimport { typeRamp } from \"@microsoft/fast-components-styles-msft\";\nimport { Attribution } from \"../attribution\";\nimport { applyMaxLines } from \"@microsoft/fast-jss-utilities\";\nimport { classNames } from \"@microsoft/fast-web-utilities\";\nimport { memoize } from \"lodash-es\";\nclass PreviewCard extends Foundation {\n constructor() {\n super(...arguments);\n this.handledProps = {\n attribution: void 0,\n destination: void 0,\n icon: void 0,\n heading: void 0,\n height: void 0,\n image: void 0,\n imageOverlay: void 0,\n managedClasses: void 0,\n width: void 0,\n };\n }\n /**\n * Renders the component\n */\n render() {\n return (React.createElement(\"div\", Object.assign({}, this.generateAttributes(), { className: this.generateClassNames() }),\n this.renderImage(),\n this.renderContentArea()));\n }\n /**\n * Generates class names\n */\n generateClassNames() {\n const { previewCard } = this.props.managedClasses;\n return super.generateClassNames(classNames(previewCard));\n }\n generateAttributes() {\n const attributes = Object.assign({}, this.unhandledProps());\n return Object.assign(Object.assign({}, attributes), { style: Object.assign(Object.assign({}, attributes.style), { height: this.props.height, width: this.props.width }) });\n }\n /**\n * Render image based on props\n */\n renderImage() {\n const { previewCard_imageRegion, previewCard_obscuredRegion, previewCard_image, } = this.props.managedClasses;\n if (typeof this.props.image === \"function\") {\n return (React.createElement(\"div\", { className: classNames(previewCard_imageRegion, [\n previewCard_obscuredRegion,\n this.props.imageOverlay,\n ]) },\n this.props.image(classNames(previewCard_image)),\n this.generateIcon()));\n }\n }\n /**\n * Render content area based on props\n */\n renderContentArea() {\n return (React.createElement(\"div\", { className: classNames(this.props.managedClasses.previewCard_contentRegion) },\n this.renderHeading(),\n this.renderAttribution()));\n }\n /**\n * Render the article title with destination\n */\n renderHeading() {\n const _a = this.getHeadingProps(), { children } = _a, headingProps = __rest(_a, [\"children\"]);\n const { previewCard_heading, previewCard_headingContent, previewCard_obscuredRegion, } = this.props.managedClasses;\n return (React.createElement(Hypertext, Object.assign({}, this.props.destination, { className: classNames(previewCard_heading, previewCard_obscuredRegion) }),\n React.createElement(Typography, Object.assign({}, headingProps, { jssStyleSheet: PreviewCard.generateHeadingMaxlines(headingProps.size), className: classNames(previewCard_headingContent) }), children)));\n }\n renderAttribution() {\n if (this.props.attribution) {\n return (React.createElement(Attribution, Object.assign({}, this.props.attribution, { className: classNames(this.props.managedClasses.previewCard_attribution) })));\n }\n }\n /**\n * Generates icon based on props\n */\n generateIcon() {\n if (typeof this.props.icon === \"function\") {\n const { previewCard_icon, previewCard_iconWrapper, } = this.props.managedClasses;\n return (React.createElement(\"span\", { className: classNames(previewCard_iconWrapper) }, this.props.icon(classNames(previewCard_icon))));\n }\n }\n /**\n * Gets props for the heading and sets default props if needed\n */\n getHeadingProps() {\n return Object.assign({}, { size: TypographySize._7 }, this.props.heading);\n }\n}\nPreviewCard.defaultProps = {\n height: \"77px\",\n width: \"300px\",\n imageOverlay: true,\n managedClasses: {},\n};\nPreviewCard.displayName = \"PreviewCard\";\n/**\n * Memoized function to get the heading stylesheet to avoid profileration of per-instance inline stylesheets.\n */\nPreviewCard.generateHeadingMaxlines = memoize((headingSize) => ({\n typography: Object.assign({}, applyMaxLines(2, typeRamp[`t${headingSize}`].lineHeight)),\n}), (...args) => args.join());\nexport default PreviewCard;\nexport * from \"./preview-card.props\";\n","import React from \"react\";\nimport Foundation from \"@microsoft/fast-components-foundation-react\";\nimport { classNames } from \"@microsoft/fast-web-utilities\";\nclass Attribution extends Foundation {\n constructor() {\n super(...arguments);\n this.handledProps = {\n image: void 0,\n managedClasses: void 0,\n };\n }\n /**\n * Renders the component\n */\n render() {\n const { attribution_image, attribution_contentRegion, } = this.props.managedClasses;\n return (React.createElement(\"div\", Object.assign({}, this.unhandledProps(), { className: this.generateClassNames() }),\n typeof this.props.image === \"function\"\n ? this.props.image(classNames(attribution_image))\n : null,\n React.createElement(\"span\", { className: classNames(attribution_contentRegion) }, this.props.children)));\n }\n /**\n * Generates class names\n */\n generateClassNames() {\n return super.generateClassNames(classNames(this.props.managedClasses.attribution));\n }\n}\nAttribution.displayName = \"Attribution\";\nAttribution.defaultProps = {\n managedClasses: {},\n};\nexport default Attribution;\nexport * from \"./attribution.props\";\n","import Foundation from \"@microsoft/fast-components-foundation-react\";\nimport { Tabs as BaseTabs } from \"@microsoft/fast-components-react-base\";\nimport { toPx } from \"@microsoft/fast-jss-utilities\";\nimport { classNames, Direction } from \"@microsoft/fast-web-utilities\";\nimport { canUseDOM } from \"exenv-es6\";\nimport { get } from \"lodash-es\";\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { DisplayNamePrefix } from \"../utilities\";\nclass Pivot extends Foundation {\n /**\n * The constructor\n */\n constructor(props) {\n super(props);\n this.handledProps = {\n label: void 0,\n items: void 0,\n managedClasses: void 0,\n };\n this.handleTabsUpdate = (activeTabId) => {\n this.setState({\n activeId: activeTabId,\n });\n if (typeof this.props.onUpdate === \"function\") {\n this.props.onUpdate(activeTabId);\n }\n };\n if (Array.isArray(this.props.items)) {\n this.state = {\n offsetX: 0,\n tabPanelIndex: 0,\n activeId: typeof this.props.activeId === \"string\"\n ? this.props.activeId\n : get(this.props.items[0], \"id\", \"\"),\n };\n }\n this.tabsRef = React.createRef();\n }\n /**\n * React life-cycle method\n */\n static getDerivedStateFromProps(nextProps, prevState) {\n if (nextProps.activeId && nextProps.activeId !== prevState.activeId) {\n return {\n activeId: nextProps.activeId,\n };\n }\n return null;\n }\n componentDidMount() {\n this.ltr = this.getLTR();\n this.setActiveIndicatorOffset();\n this.prevTabPanelIndex = this.state.tabPanelIndex;\n }\n componentDidUpdate(prevProps, prevState) {\n if (this.ltr !== this.getLTR()) {\n this.setActiveIndicatorOffset();\n this.ltr = this.getLTR();\n }\n if (this.state.activeId !== prevState.activeId) {\n this.setActiveIndicatorOffset();\n this.updateTabPanelIndex();\n }\n if (this.state.tabPanelIndex !== prevState.tabPanelIndex) {\n this.prevTabPanelIndex = this.state.tabPanelIndex;\n }\n }\n /**\n * Renders the component\n */\n render() {\n return (React.createElement(BaseTabs, Object.assign({}, this.unhandledProps(), { ref: this.tabsRef, managedClasses: this.generatePivotClassNames(), activeId: this.state.activeId, onUpdate: this.handleTabsUpdate, orientation: this.props.orientation, items: this.props.items, label: this.props.label }),\n React.createElement(\"span\", { style: { transform: `translateX(${toPx(this.state.offsetX)})` }, className: classNames(this.props.managedClasses.pivot_activeIndicator) })));\n }\n /**\n * Returns tabs managedclasses with new carousel-specific JSS\n */\n generatePivotClassNames() {\n const { pivot, pivot_tabList, pivot_tabContent, pivot_tabPanelContent, pivot_tab, pivot_tab__active, pivot_tabPanel, pivot_tabPanel__hidden, } = this.props.managedClasses;\n return {\n tabs: pivot,\n tabs_tabPanels: this.generateTabPanelsClassNames(),\n tabs_tabList: pivot_tabList,\n tabs_tabContent: pivot_tabContent,\n tabs_tabPanelContent: pivot_tabPanelContent,\n tab: pivot_tab,\n tab__active: pivot_tab__active,\n tabPanel: pivot_tabPanel,\n tabPanel__hidden: pivot_tabPanel__hidden,\n };\n }\n isSelected(element) {\n return element.attributes[\"aria-selected\"].value === \"true\";\n }\n updateTabPanelIndex() {\n if (canUseDOM() && this.tabsRef.current && Array.isArray(this.props.items)) {\n const tabElement = ReactDOM.findDOMNode(this.tabsRef.current);\n const mytabsArray = Array.prototype.slice.call(tabElement.querySelectorAll(\"[role='tab']\"));\n this.setState({\n tabPanelIndex: mytabsArray.findIndex(this.isSelected),\n });\n }\n }\n generateTabPanelsClassNames() {\n const { pivot_tabPanels, pivot_tabPanels__animatePrevious, pivot_tabPanels__animateNext, } = this.props.managedClasses;\n const indexNotChanged = this.state.tabPanelIndex === this.prevTabPanelIndex;\n const shouldReverse = this.state.tabPanelIndex < this.prevTabPanelIndex;\n return classNames(pivot_tabPanels, [pivot_tabPanels__animatePrevious, shouldReverse], [pivot_tabPanels__animateNext, !shouldReverse && !indexNotChanged]);\n }\n setActiveIndicatorOffset() {\n if (canUseDOM() && this.tabsRef.current && Array.isArray(this.props.items)) {\n const tabElement = ReactDOM.findDOMNode(this.tabsRef.current);\n const mytab = tabElement.querySelector(\"[aria-selected='true']\");\n if (mytab !== null && tabElement !== null) {\n const width = mytab.getBoundingClientRect().width;\n const center = width / 2;\n const offsetX = mytab.getBoundingClientRect().left -\n tabElement.getBoundingClientRect().left +\n center;\n if (offsetX !== this.state.offsetX) {\n this.setState({\n offsetX,\n });\n }\n }\n }\n }\n // TODO #1438: Add optional direction prop to Pivot and Horizontal overflow\n /**\n * Gets the direction of the element\n */\n getLTR() {\n if (canUseDOM()) {\n const tabElement = ReactDOM.findDOMNode(this.tabsRef.current);\n return !tabElement\n ? Direction.ltr\n : getComputedStyle(tabElement).direction === Direction.rtl\n ? Direction.rtl\n : Direction.ltr;\n }\n }\n}\nPivot.displayName = `${DisplayNamePrefix}Pivot`;\nPivot.defaultProps = {\n managedClasses: {},\n};\nexport default Pivot;\nexport * from \"./pivot.props\";\n","export var TextActionAppearance;\n(function (TextActionAppearance) {\n TextActionAppearance[\"filled\"] = \"filled\";\n TextActionAppearance[\"outline\"] = \"outline\";\n})(TextActionAppearance || (TextActionAppearance = {}));\nexport var TextActionButtonPosition;\n(function (TextActionButtonPosition) {\n TextActionButtonPosition[\"before\"] = \"before\";\n TextActionButtonPosition[\"after\"] = \"after\";\n})(TextActionButtonPosition || (TextActionButtonPosition = {}));\n","import Foundation from \"@microsoft/fast-components-foundation-react\";\nimport { textFieldOverrides } from \"@microsoft/fast-components-styles-msft\";\nimport { classNames } from \"@microsoft/fast-web-utilities\";\nimport { get } from \"lodash-es\";\nimport React from \"react\";\nimport { TextField } from \"../text-field\";\nimport { DisplayNamePrefix } from \"../utilities\";\nimport { TextActionAppearance, TextActionButtonPosition, } from \"./text-action.props\";\nclass TextAction extends Foundation {\n constructor(props) {\n super(props);\n this.handledProps = {\n appearance: void 0,\n afterGlyph: void 0,\n beforeGlyph: void 0,\n button: void 0,\n buttonPosition: void 0,\n className: void 0,\n managedClasses: void 0,\n };\n /**\n * Adds focus state to outer wrapper and fires callback if passed\n * In order to correctly focus the input and then the\n * possible button, a class must be added instead of using\n * focus-within via style\n */\n this.handleOnFocus = (e) => {\n this.setState({ focused: true });\n if (typeof this.props.onFocus === \"function\") {\n this.props.onFocus(e);\n }\n };\n /**\n * Removes focus state and fires callback if passed\n */\n this.handleOnBlur = (e) => {\n this.setState({ focused: false });\n if (typeof this.props.onBlur === \"function\") {\n this.props.onBlur(e);\n }\n };\n this.state = {\n focused: false,\n };\n }\n /**\n * Renders the component\n */\n render() {\n return (React.createElement(\"div\", { className: this.generateClassNames() },\n this.buttonExists() &&\n this.props.buttonPosition === TextActionButtonPosition.before\n ? this.generateButton()\n : null,\n this.generateBeforeGlyph(),\n React.createElement(TextField, Object.assign({}, this.unhandledProps(), { disabled: get(this.props, \"disabled\", null), placeholder: get(this.props, \"placeholder\", null), jssStyleSheet: textFieldOverrides, onBlur: this.handleOnBlur, onFocus: this.handleOnFocus })),\n this.generateAfterGlyph(),\n this.buttonExists() &&\n this.props.buttonPosition === TextActionButtonPosition.after\n ? this.generateButton()\n : null));\n }\n /**\n * Generates class names\n */\n generateClassNames() {\n const { textAction, textAction__disabled, textAction__focus, } = this.props.managedClasses;\n return super.generateClassNames(classNames(textAction, [\n this.props.managedClasses[`textAction__${TextActionAppearance[this.props.appearance]}`],\n !!this.props.appearance,\n ], [textAction__disabled, this.props.disabled], [textAction__focus, this.state.focused]));\n }\n /**\n * Returns truthy if button exist\n */\n buttonExists() {\n return typeof this.props.button === \"function\";\n }\n /**\n * Generate button\n */\n generateButton() {\n return this.props.button(classNames(this.props.managedClasses.textAction_button), this.props.disabled);\n }\n /**\n * Generates after glyph based on props\n */\n generateAfterGlyph() {\n if (typeof this.props.afterGlyph === \"function\") {\n return this.props.afterGlyph(classNames(this.props.managedClasses.textAction_afterGlyph));\n }\n }\n /**\n * Generates before glyph based on props\n */\n generateBeforeGlyph() {\n if (typeof this.props.beforeGlyph === \"function\") {\n return this.props.beforeGlyph(classNames(this.props.managedClasses.textAction_beforeGlyph));\n }\n }\n}\nTextAction.displayName = `${DisplayNamePrefix}TextAction`;\nTextAction.defaultProps = {\n buttonPosition: TextActionButtonPosition.after,\n managedClasses: {},\n};\nexport default TextAction;\nexport * from \"./text-action.props\";\n","import manageJss from \"@microsoft/fast-jss-manager-react\";\nimport { TextActionStyles } from \"@microsoft/fast-components-styles-msft\";\nimport textActionSchema from \"./text-action.schema\";\nimport textActionSchema2 from \"./text-action.schema.2\";\nimport { TextActionAppearance, TextActionButtonPosition, } from \"./text-action.props\";\nimport MSFTTextAction from \"./text-action\";\n/*\n * The type returned by manageJss type is very complicated so we'll let the\n * compiler infer the type instead of re-declaring just for the package export\n */\nconst TextAction = manageJss(TextActionStyles)(MSFTTextAction);\nexport { TextAction, TextActionAppearance, TextActionButtonPosition, textActionSchema, textActionSchema2, };\n","export var TextFieldAppearance;\n(function (TextFieldAppearance) {\n TextFieldAppearance[\"filled\"] = \"filled\";\n TextFieldAppearance[\"outline\"] = \"outline\";\n})(TextFieldAppearance || (TextFieldAppearance = {}));\n","import Foundation from \"@microsoft/fast-components-foundation-react\";\nimport { TextField as BaseTextField } from \"@microsoft/fast-components-react-base\";\nimport { classNames } from \"@microsoft/fast-web-utilities\";\nimport React from \"react\";\nimport { DisplayNamePrefix } from \"../utilities\";\nimport { TextFieldAppearance, } from \"./text-field.props\";\nclass TextField extends Foundation {\n constructor() {\n super(...arguments);\n this.handledProps = {\n appearance: void 0,\n managedClasses: void 0,\n };\n }\n /**\n * Renders the component\n */\n render() {\n return (React.createElement(BaseTextField, Object.assign({}, this.unhandledProps(), { className: this.generateClassNames(), managedClasses: this.props.managedClasses })));\n }\n /**\n * Generates class names\n */\n generateClassNames() {\n return super.generateClassNames(classNames([\n this.props.managedClasses[`textField__${TextFieldAppearance[this.props.appearance]}`],\n !!this.props.appearance,\n ]));\n }\n}\nTextField.displayName = `${DisplayNamePrefix}TextField`;\nTextField.defaultProps = {\n managedClasses: {},\n};\nexport default TextField;\nexport * from \"./text-field.props\";\n","import { TextFieldType } from \"@microsoft/fast-components-react-base\";\nimport manageJss from \"@microsoft/fast-jss-manager-react\";\nimport { TextFieldStyles } from \"@microsoft/fast-components-styles-msft\";\nimport textFieldSchema from \"./text-field.schema\";\nimport MSFTTextField, { TextFieldAppearance, } from \"./text-field\";\n/*\n * The type returned by manageJss type is very complicated so we'll let the\n * compiler infer the type instead of re-declaring just for the package export\n */\nconst TextField = manageJss(TextFieldStyles)(MSFTTextField);\nexport { TextField, TextFieldAppearance, textFieldSchema, TextFieldType, };\n","import { BaseAppender } from \"./BaseAppender\";\r\nimport { LogLevel } from \"../models/LogLevel\";\r\n/**\r\n * Class to represent an console appender.\r\n * @class\r\n */\r\nexport class ConsoleAppender extends BaseAppender {\r\n /**\r\n * Initializes a new instance of the `ConsoleAppender` class.\r\n * @constructor\r\n * @param logLevel {LogLevel} Logging level or threshold.\r\n * @param console {Console} The implementation of console to use.\r\n */\r\n constructor(logLevel, console) {\r\n super(logLevel);\r\n this.console = console;\r\n if (!(this.console && this.console.log)) {\r\n throw `${this.toString()} requires a Console to log to.`;\r\n }\r\n }\r\n /**\r\n * Returns a string representation of the appender.\r\n * @method\r\n * @return {string} The string representation of the appender.\r\n */\r\n toString() {\r\n return \"ConsoleAppender\";\r\n }\r\n /**\r\n * Appender specific method to append a log message. In this case, appender logs the message to the browser console.\r\n * @method\r\n * @param logItems {Array'],\n\t' ' : ['
'],\n\t'-': ['
']\n};\n\n/** Outdent a string based on the first indented line's leading whitespace\n *\t@private\n */\nfunction outdent(str) {\n\treturn str.replace(RegExp('^'+(str.match(/^(\\t| )+/) || '')[0], 'gm'), '');\n}\n\n/** Encode special attribute characters to HTML entities in a String.\n *\t@private\n */\nfunction encodeAttr(str) {\n\treturn (str+'').replace(/\"/g, '"').replace(//g, '>');\n}\n\n/** Parse Markdown into an HTML String. */\nfunction parse(md) {\n\tvar tokenizer = /((?:^|\\n+)(?:\\n---+|\\* \\*(?: \\*)+)\\n)|(?:^```(\\w*)\\n([\\s\\S]*?)\\n```$)|((?:(?:^|\\n+)(?:\\t| {2,}).+)+\\n*)|((?:(?:^|\\n)([>*+-]|\\d+\\.)\\s+.*)+)|(?:\\!\\[([^\\]]*?)\\]\\(([^\\)]+?)\\))|(\\[)|(\\](?:\\(([^\\)]+?)\\))?)|(?:(?:^|\\n+)([^\\s].*)\\n(\\-{3,}|={3,})(?:\\n+|$))|(?:(?:^|\\n+)(#{1,3})\\s*(.+)(?:\\n+|$))|(?:`([^`].*?)`)|( \\n\\n*|\\n{2,}|__|\\*\\*|[_*])/gm,\n\t\tcontext = [],\n\t\tout = '',\n\t\tlast = 0,\n\t\tlinks = {},\n\t\tchunk, prev, token, inner, t;\n\n\tfunction tag(token) {\n\t\tvar desc = TAGS[token.replace(/\\*/g,'_')[1] || ''],\n\t\t\tend = context[context.length-1]==token;\n\t\tif (!desc) { return token; }\n\t\tif (!desc[1]) { return desc[0]; }\n\t\tcontext[end?'pop':'push'](token);\n\t\treturn desc[end|0];\n\t}\n\n\tfunction flush() {\n\t\tvar str = '';\n\t\twhile (context.length) { str += tag(context[context.length-1]); }\n\t\treturn str;\n\t}\n\n\tmd = md.replace(/^\\[(.+?)\\]:\\s*(.+)$/gm, function (s, name, url) {\n\t\tlinks[name.toLowerCase()] = url;\n\t\treturn '';\n\t}).replace(/^\\n+|\\n+$/g, '');\n\n\twhile ( (token=tokenizer.exec(md)) ) {\n\t\tprev = md.substring(last, token.index);\n\t\tlast = tokenizer.lastIndex;\n\t\tchunk = token[0];\n\t\tif (prev.match(/[^\\\\](\\\\\\\\)*\\\\$/)) {\n\t\t\t// escaped\n\t\t}\n\t\t// Code/Indent blocks:\n\t\telse if (token[3] || token[4]) {\n\t\t\tchunk = '
'+outdent(encodeAttr(token[3] || token[4]).replace(/^\\n+|\\n+$/g, ''))+'';\n\t\t}\n\t\t// > Quotes, -* lists:\n\t\telse if (token[6]) {\n\t\t\tt = token[6];\n\t\t\tif (t.match(/\\./)) {\n\t\t\t\ttoken[5] = token[5].replace(/^\\d+/gm, '');\n\t\t\t}\n\t\t\tinner = parse(outdent(token[5].replace(/^\\s*[>*+.-]/gm, '')));\n\t\t\tif (t==='>') { t = 'blockquote'; }\n\t\t\telse {\n\t\t\t\tt = t.match(/\\./) ? 'ol' : 'ul';\n\t\t\t\tinner = inner.replace(/^(.*)(\\n|$)/gm, '
'+encodeAttr(token[16])+'';\n\t\t}\n\t\t// Inline formatting: *em*, **strong** & friends\n\t\telse if (token[17] || token[1]) {\n\t\t\tchunk = tag(token[17] || '--');\n\t\t}\n\t\tout += prev;\n\t\tout += chunk;\n\t}\n\n\treturn (out + md.substring(last) + flush()).trim();\n}\n\nexport default parse;\n//# sourceMappingURL=snarkdown.es.js.map\n","/**\n * Copyright 2016 Google Inc. All Rights Reserved.\n *\n * Licensed under the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE.\n *\n * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document\n *\n */\n(function() {\n'use strict';\n\n// Exit early if we're not running in a browser.\nif (typeof window !== 'object') {\n return;\n}\n\n// Exit early if all IntersectionObserver and IntersectionObserverEntry\n// features are natively supported.\nif ('IntersectionObserver' in window &&\n 'IntersectionObserverEntry' in window &&\n 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {\n\n // Minimal polyfill for Edge 15's lack of `isIntersecting`\n // See: https://github.com/w3c/IntersectionObserver/issues/211\n if (!('isIntersecting' in window.IntersectionObserverEntry.prototype)) {\n Object.defineProperty(window.IntersectionObserverEntry.prototype,\n 'isIntersecting', {\n get: function () {\n return this.intersectionRatio > 0;\n }\n });\n }\n return;\n}\n\n\n/**\n * A local reference to the document.\n */\nvar document = window.document;\n\n\n/**\n * An IntersectionObserver registry. This registry exists to hold a strong\n * reference to IntersectionObserver instances currently observing a target\n * element. Without this registry, instances without another reference may be\n * garbage collected.\n */\nvar registry = [];\n\n\n/**\n * Creates the global IntersectionObserverEntry constructor.\n * https://w3c.github.io/IntersectionObserver/#intersection-observer-entry\n * @param {Object} entry A dictionary of instance properties.\n * @constructor\n */\nfunction IntersectionObserverEntry(entry) {\n this.time = entry.time;\n this.target = entry.target;\n this.rootBounds = entry.rootBounds;\n this.boundingClientRect = entry.boundingClientRect;\n this.intersectionRect = entry.intersectionRect || getEmptyRect();\n this.isIntersecting = !!entry.intersectionRect;\n\n // Calculates the intersection ratio.\n var targetRect = this.boundingClientRect;\n var targetArea = targetRect.width * targetRect.height;\n var intersectionRect = this.intersectionRect;\n var intersectionArea = intersectionRect.width * intersectionRect.height;\n\n // Sets intersection ratio.\n if (targetArea) {\n // Round the intersection ratio to avoid floating point math issues:\n // https://github.com/w3c/IntersectionObserver/issues/324\n this.intersectionRatio = Number((intersectionArea / targetArea).toFixed(4));\n } else {\n // If area is zero and is intersecting, sets to 1, otherwise to 0\n this.intersectionRatio = this.isIntersecting ? 1 : 0;\n }\n}\n\n\n/**\n * Creates the global IntersectionObserver constructor.\n * https://w3c.github.io/IntersectionObserver/#intersection-observer-interface\n * @param {Function} callback The function to be invoked after intersection\n * changes have queued. The function is not invoked if the queue has\n * been emptied by calling the `takeRecords` method.\n * @param {Object=} opt_options Optional configuration options.\n * @constructor\n */\nfunction IntersectionObserver(callback, opt_options) {\n\n var options = opt_options || {};\n\n if (typeof callback != 'function') {\n throw new Error('callback must be a function');\n }\n\n if (options.root && options.root.nodeType != 1) {\n throw new Error('root must be an Element');\n }\n\n // Binds and throttles `this._checkForIntersections`.\n this._checkForIntersections = throttle(\n this._checkForIntersections.bind(this), this.THROTTLE_TIMEOUT);\n\n // Private properties.\n this._callback = callback;\n this._observationTargets = [];\n this._queuedEntries = [];\n this._rootMarginValues = this._parseRootMargin(options.rootMargin);\n\n // Public properties.\n this.thresholds = this._initThresholds(options.threshold);\n this.root = options.root || null;\n this.rootMargin = this._rootMarginValues.map(function(margin) {\n return margin.value + margin.unit;\n }).join(' ');\n}\n\n\n/**\n * The minimum interval within which the document will be checked for\n * intersection changes.\n */\nIntersectionObserver.prototype.THROTTLE_TIMEOUT = 100;\n\n\n/**\n * The frequency in which the polyfill polls for intersection changes.\n * this can be updated on a per instance basis and must be set prior to\n * calling `observe` on the first target.\n */\nIntersectionObserver.prototype.POLL_INTERVAL = null;\n\n/**\n * Use a mutation observer on the root element\n * to detect intersection changes.\n */\nIntersectionObserver.prototype.USE_MUTATION_OBSERVER = true;\n\n\n/**\n * Starts observing a target element for intersection changes based on\n * the thresholds values.\n * @param {Element} target The DOM element to observe.\n */\nIntersectionObserver.prototype.observe = function(target) {\n var isTargetAlreadyObserved = this._observationTargets.some(function(item) {\n return item.element == target;\n });\n\n if (isTargetAlreadyObserved) {\n return;\n }\n\n if (!(target && target.nodeType == 1)) {\n throw new Error('target must be an Element');\n }\n\n this._registerInstance();\n this._observationTargets.push({element: target, entry: null});\n this._monitorIntersections();\n this._checkForIntersections();\n};\n\n\n/**\n * Stops observing a target element for intersection changes.\n * @param {Element} target The DOM element to observe.\n */\nIntersectionObserver.prototype.unobserve = function(target) {\n this._observationTargets =\n this._observationTargets.filter(function(item) {\n\n return item.element != target;\n });\n if (!this._observationTargets.length) {\n this._unmonitorIntersections();\n this._unregisterInstance();\n }\n};\n\n\n/**\n * Stops observing all target elements for intersection changes.\n */\nIntersectionObserver.prototype.disconnect = function() {\n this._observationTargets = [];\n this._unmonitorIntersections();\n this._unregisterInstance();\n};\n\n\n/**\n * Returns any queue entries that have not yet been reported to the\n * callback and clears the queue. This can be used in conjunction with the\n * callback to obtain the absolute most up-to-date intersection information.\n * @return {Array} The currently queued entries.\n */\nIntersectionObserver.prototype.takeRecords = function() {\n var records = this._queuedEntries.slice();\n this._queuedEntries = [];\n return records;\n};\n\n\n/**\n * Accepts the threshold value from the user configuration object and\n * returns a sorted array of unique threshold values. If a value is not\n * between 0 and 1 and error is thrown.\n * @private\n * @param {Array|number=} opt_threshold An optional threshold value or\n * a list of threshold values, defaulting to [0].\n * @return {Array} A sorted list of unique and valid threshold values.\n */\nIntersectionObserver.prototype._initThresholds = function(opt_threshold) {\n var threshold = opt_threshold || [0];\n if (!Array.isArray(threshold)) threshold = [threshold];\n\n return threshold.sort().filter(function(t, i, a) {\n if (typeof t != 'number' || isNaN(t) || t < 0 || t > 1) {\n throw new Error('threshold must be a number between 0 and 1 inclusively');\n }\n return t !== a[i - 1];\n });\n};\n\n\n/**\n * Accepts the rootMargin value from the user configuration object\n * and returns an array of the four margin values as an object containing\n * the value and unit properties. If any of the values are not properly\n * formatted or use a unit other than px or %, and error is thrown.\n * @private\n * @param {string=} opt_rootMargin An optional rootMargin value,\n * defaulting to '0px'.\n * @return {Array\n`;\n","import { css } from '@microsoft/fast-element';\nimport { AccentButtonStyles, accentFillActiveBehavior, accentFillHoverBehavior, accentFillRestBehavior, accentForegroundActiveBehavior, accentForegroundCutRestBehavior, accentForegroundHoverBehavior, accentForegroundRestBehavior, BaseButtonStyles, HypertextStyles, LightweightButtonStyles, neutralFillActiveBehavior, neutralFillFocusBehavior, neutralFillHoverBehavior, neutralFillRestBehavior, neutralFillStealthActiveBehavior, neutralFillStealthHoverBehavior, neutralFillStealthRestBehavior, neutralFocusBehavior, neutralFocusInnerAccentBehavior, neutralForegroundRestBehavior, neutralOutlineActiveBehavior, neutralOutlineHoverBehavior, neutralOutlineRestBehavior, OutlineButtonStyles, StealthButtonStyles, } from '../styles/';\nexport const AnchorStyles = css `\n ${BaseButtonStyles}\n ${AccentButtonStyles}\n ${HypertextStyles}\n ${LightweightButtonStyles}\n ${OutlineButtonStyles}\n ${StealthButtonStyles}\n`.withBehaviors(accentFillActiveBehavior, accentFillHoverBehavior, accentFillRestBehavior, accentForegroundActiveBehavior, accentForegroundCutRestBehavior, accentForegroundHoverBehavior, accentForegroundRestBehavior, neutralFillActiveBehavior, neutralFillFocusBehavior, neutralFillHoverBehavior, neutralFillRestBehavior, neutralFillStealthActiveBehavior, neutralFillStealthHoverBehavior, neutralFillStealthRestBehavior, neutralFocusBehavior, neutralFocusInnerAccentBehavior, neutralForegroundRestBehavior, neutralOutlineActiveBehavior, neutralOutlineHoverBehavior, neutralOutlineRestBehavior);\n","import { __decorate } from \"tslib\";\nimport { attr, customElement } from '@microsoft/fast-element';\nimport { Anchor, AnchorTemplate as template } from '@microsoft/fast-foundation';\nimport { AnchorStyles as styles } from './anchor.styles';\n/**\n * The Fluent Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor},\n * {@link @microsoft/fast-foundation#AnchorTemplate}\n *\n *\n * @public\n * @remarks\n * HTML Element: \\