{"version":3,"file":"fluent-ui-CSFj97ey.js","sources":["../../node_modules/@fluentui/set-version/lib/setVersion.js","../../node_modules/@fluentui/set-version/lib/index.js","../../node_modules/@fluentui/merge-styles/lib/Stylesheet.js","../../node_modules/@fluentui/merge-styles/lib/extractStyleParts.js","../../node_modules/@fluentui/merge-styles/lib/StyleOptionsState.js","../../node_modules/@fluentui/merge-styles/lib/transforms/kebabRules.js","../../node_modules/@fluentui/merge-styles/lib/getVendorSettings.js","../../node_modules/@fluentui/merge-styles/lib/transforms/prefixRules.js","../../node_modules/@fluentui/merge-styles/lib/transforms/provideUnits.js","../../node_modules/@fluentui/merge-styles/lib/transforms/rtlifyRules.js","../../node_modules/@fluentui/merge-styles/lib/tokenizeWithParentheses.js","../../node_modules/@fluentui/merge-styles/lib/styleToClassName.js","../../node_modules/@fluentui/merge-styles/lib/mergeStyles.js","../../node_modules/@fluentui/merge-styles/lib/concatStyleSets.js","../../node_modules/@fluentui/merge-styles/lib/mergeStyleSets.js","../../node_modules/@fluentui/merge-styles/lib/concatStyleSetsWithProps.js","../../node_modules/@fluentui/merge-styles/lib/fontFace.js","../../node_modules/@fluentui/merge-styles/lib/keyframes.js","../../node_modules/@fluentui/style-utilities/lib/utilities/buildClassMap.js","../../node_modules/@fluentui/utilities/lib/dom/canUseDOM.js","../../node_modules/@fluentui/utilities/lib/dom/getWindow.js","../../node_modules/@fluentui/utilities/lib/Async.js","../../node_modules/@fluentui/utilities/lib/object.js","../../node_modules/@fluentui/utilities/lib/EventGroup.js","../../node_modules/@fluentui/utilities/lib/dom/getDocument.js","../../node_modules/@fluentui/utilities/lib/scroll.js","../../node_modules/@fluentui/utilities/lib/dom/getRect.js","../../node_modules/@fluentui/utilities/lib/warn/warn.js","../../node_modules/@fluentui/utilities/lib/warn/warnConditionallyRequiredProps.js","../../node_modules/@fluentui/utilities/lib/BaseComponent.js","../../node_modules/@fluentui/utilities/lib/DelayedRender.js","../../node_modules/@fluentui/utilities/lib/GlobalSettings.js","../../node_modules/@fluentui/utilities/lib/KeyCodes.js","../../node_modules/@fluentui/utilities/lib/Rectangle.js","../../node_modules/@fluentui/utilities/lib/appendFunction.js","../../node_modules/@fluentui/utilities/lib/aria.js","../../node_modules/@fluentui/utilities/lib/array.js","../../node_modules/@fluentui/utilities/lib/sessionStorage.js","../../node_modules/@fluentui/utilities/lib/rtl.js","../../node_modules/@fluentui/dom-utilities/lib/isVirtualElement.js","../../node_modules/@fluentui/dom-utilities/lib/getVirtualParent.js","../../node_modules/@fluentui/dom-utilities/lib/getParent.js","../../node_modules/@fluentui/dom-utilities/lib/elementContains.js","../../node_modules/@fluentui/dom-utilities/lib/findElementRecursive.js","../../node_modules/@fluentui/dom-utilities/lib/elementContainsAttribute.js","../../node_modules/@fluentui/dom-utilities/lib/setPortalAttribute.js","../../node_modules/@fluentui/dom-utilities/lib/portalContainsElement.js","../../node_modules/@fluentui/dom-utilities/lib/setVirtualParent.js","../../node_modules/@fluentui/utilities/lib/focus.js","../../node_modules/@fluentui/utilities/lib/dom/on.js","../../node_modules/@fluentui/utilities/lib/classNamesFunction.js","../../node_modules/@fluentui/utilities/lib/memoize.js","../../node_modules/@fluentui/utilities/lib/componentAs/composeComponentAs.js","../../node_modules/@fluentui/utilities/lib/controlled.js","../../node_modules/@fluentui/utilities/lib/css.js","../../node_modules/@fluentui/utilities/lib/customizations/Customizations.js","../../node_modules/@fluentui/utilities/lib/customizations/CustomizerContext.js","../../node_modules/@fluentui/utilities/lib/customizations/mergeSettings.js","../../node_modules/@fluentui/utilities/lib/customizations/mergeCustomizations.js","../../node_modules/@fluentui/utilities/lib/customizations/Customizer.js","../../node_modules/@fluentui/utilities/lib/hoistStatics.js","../../node_modules/@fluentui/utilities/lib/customizations/customizable.js","../../node_modules/@fluentui/utilities/lib/customizations/useCustomizationSettings.js","../../node_modules/@fluentui/utilities/lib/extendComponent.js","../../node_modules/@fluentui/utilities/lib/getId.js","../../node_modules/@fluentui/utilities/lib/properties.js","../../node_modules/@fluentui/utilities/lib/getNativeElementProps.js","../../node_modules/@fluentui/utilities/lib/hoist.js","../../node_modules/@fluentui/utilities/lib/initializeComponentRef.js","../../node_modules/@fluentui/utilities/lib/keyboard.js","../../node_modules/@fluentui/utilities/lib/setFocusVisibility.js","../../node_modules/@fluentui/utilities/lib/useFocusRects.js","../../node_modules/@fluentui/utilities/lib/FocusRectsProvider.js","../../node_modules/@fluentui/utilities/lib/initials.js","../../node_modules/@fluentui/utilities/lib/localStorage.js","../../node_modules/@fluentui/utilities/lib/language.js","../../node_modules/@fluentui/utilities/lib/math.js","../../node_modules/@fluentui/utilities/lib/merge.js","../../node_modules/@fluentui/utilities/lib/mobileDetector.js","../../node_modules/@fluentui/utilities/lib/modalize.js","../../node_modules/@fluentui/utilities/lib/osDetector.js","../../node_modules/@fluentui/utilities/lib/overflow.js","../../node_modules/@fluentui/utilities/lib/renderFunction/composeRenderFunction.js","../../node_modules/@fluentui/utilities/lib/safeRequestAnimationFrame.js","../../node_modules/@fluentui/utilities/lib/selection/Selection.types.js","../../node_modules/@fluentui/utilities/lib/selection/Selection.js","../../node_modules/@fluentui/utilities/lib/string.js","../../node_modules/@fluentui/utilities/lib/styled.js","../../node_modules/@fluentui/utilities/lib/ie11Detector.js","../../node_modules/@fluentui/utilities/lib/getPropsWithDefaults.js","../../node_modules/@fluentui/utilities/lib/createMergedRef.js","../../node_modules/@fluentui/utilities/lib/useIsomorphicLayoutEffect.js","../../node_modules/@fluentui/style-utilities/lib/utilities/icons.js","../../node_modules/@fluentui/theme/lib/utilities/makeSemanticColors.js","../../node_modules/@fluentui/theme/lib/mergeThemes.js","../../node_modules/@fluentui/theme/lib/colors/DefaultPalette.js","../../node_modules/@fluentui/theme/lib/effects/FluentDepths.js","../../node_modules/@fluentui/theme/lib/effects/DefaultEffects.js","../../node_modules/@fluentui/theme/lib/spacing/DefaultSpacing.js","../../node_modules/@fluentui/theme/lib/motion/AnimationStyles.js","../../node_modules/@fluentui/theme/lib/fonts/FluentFonts.js","../../node_modules/@fluentui/theme/lib/fonts/createFontStyles.js","../../node_modules/@fluentui/theme/lib/fonts/DefaultFontStyles.js","../../node_modules/@fluentui/theme/lib/createTheme.js","../../node_modules/@fluentui/style-utilities/lib/styles/CommonStyles.js","../../node_modules/@fluentui/style-utilities/lib/styles/zIndexes.js","../../node_modules/@fluentui/style-utilities/lib/styles/getFocusStyle.js","../../node_modules/@fluentui/style-utilities/lib/styles/hiddenContentStyle.js","../../node_modules/@fluentui/style-utilities/lib/styles/getGlobalClassNames.js","../../node_modules/@fluentui/style-utilities/lib/styles/theme.js","../../node_modules/@fluentui/style-utilities/lib/styles/GeneralStyles.js","../../node_modules/@fluentui/style-utilities/lib/styles/getPlaceholderStyles.js","../../node_modules/@fluentui/style-utilities/lib/classNames/AnimationClassNames.js","../../node_modules/@fluentui/style-utilities/lib/cdn.js","../../node_modules/@fluentui/style-utilities/lib/version.js","../../node_modules/@fluentui/style-utilities/lib/index.js","../../node_modules/@fluentui/react/lib/common/DirectionalHint.js","../../node_modules/@fluentui/react/lib/utilities/positioning/positioning.types.js","../../node_modules/@fluentui/react/lib/utilities/positioning/positioning.js","../../node_modules/@fluentui/react-hooks/lib/useAsync.js","../../node_modules/@fluentui/react-hooks/lib/useConst.js","../../node_modules/@fluentui/react-hooks/lib/useBoolean.js","../../node_modules/@fluentui/react-hooks/lib/useControllableValue.js","../../node_modules/@fluentui/react-hooks/lib/useEventCallback.js","../../node_modules/@fluentui/react-hooks/lib/useId.js","../../node_modules/@fluentui/react-hooks/lib/useMergedRefs.js","../../node_modules/@fluentui/react-hooks/lib/useOnEvent.js","../../node_modules/@fluentui/react-hooks/lib/usePrevious.js","../../node_modules/@fluentui/react-hooks/lib/useRefEffect.js","../../node_modules/@fluentui/react-hooks/lib/useSetTimeout.js","../../node_modules/@fluentui/react-window-provider/lib/WindowProvider.js","../../node_modules/@fluentui/react-hooks/lib/useTarget.js","../../node_modules/@fluentui/react-hooks/lib/useUnmount.js","../../node_modules/@fluentui/react/lib/components/Popup/Popup.js","../../node_modules/@fluentui/react/lib/components/Callout/CalloutContent.base.js","../../node_modules/@fluentui/react/lib/components/Callout/CalloutContent.styles.js","../../node_modules/@fluentui/react/lib/components/Callout/CalloutContent.js","../../node_modules/@fluentui/react-portal-compat-context/lib/PortalCompatContext.js","../../node_modules/@fluentui/react/lib/components/Fabric/Fabric.base.js","../../node_modules/@fluentui/react/lib/components/Fabric/Fabric.styles.js","../../node_modules/@fluentui/react/lib/components/Fabric/Fabric.js","../../node_modules/@fluentui/react/lib/components/Layer/Layer.notification.js","../../node_modules/@fluentui/react/lib/components/Layer/Layer.base.js","../../node_modules/@fluentui/react/lib/components/Layer/Layer.styles.js","../../node_modules/@fluentui/react/lib/components/Layer/Layer.js","../../node_modules/@fluentui/react/lib/components/Callout/Callout.js","../../node_modules/@fluentui/react/lib/components/FocusTrapZone/FocusTrapZone.js","../../node_modules/@fluentui/react/lib/components/Tooltip/Tooltip.base.js","../../node_modules/@fluentui/react/lib/components/Tooltip/Tooltip.styles.js","../../node_modules/@fluentui/react/lib/components/Tooltip/Tooltip.js","../../node_modules/@fluentui/react/lib/components/Tooltip/Tooltip.types.js","../../node_modules/@fluentui/react/lib/components/Tooltip/TooltipHost.types.js","../../node_modules/@fluentui/react/lib/components/Tooltip/TooltipHost.base.js","../../node_modules/@fluentui/react/lib/components/Tooltip/TooltipHost.styles.js","../../node_modules/@fluentui/react/lib/components/Tooltip/TooltipHost.js","../../node_modules/@fluentui/react/lib/components/Icon/Icon.types.js","../../node_modules/@fluentui/react/lib/components/Image/Image.types.js","../../node_modules/@fluentui/react/lib/components/Image/Image.base.js","../../node_modules/@fluentui/react/lib/components/Image/Image.styles.js","../../node_modules/@fluentui/react/lib/components/Image/Image.js","../../node_modules/@fluentui/react/lib/components/Icon/Icon.styles.js","../../node_modules/@fluentui/react/lib/components/Icon/FontIcon.js","../../node_modules/@fluentui/react/lib/components/Icon/Icon.base.js","../../node_modules/@fluentui/react/lib/components/Icon/Icon.js","../../node_modules/@fluentui/react/lib/components/Icon/ImageIcon.js","../../node_modules/@fluentui/react/lib/components/Persona/Persona.types.js","../../node_modules/@fluentui/react/lib/components/Persona/PersonaConsts.js","../../node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.base.js","../../node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.styles.js","../../node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.js","../../node_modules/@fluentui/react/lib/components/Persona/PersonaInitialsColor.js","../../node_modules/@fluentui/react/lib/components/Persona/PersonaCoin/PersonaCoin.base.js","../../node_modules/@fluentui/react/lib/components/Persona/PersonaCoin/PersonaCoin.styles.js","../../node_modules/@fluentui/react/lib/components/Persona/PersonaCoin/PersonaCoin.js","../../node_modules/@fluentui/react/lib/components/Persona/Persona.base.js","../../node_modules/@fluentui/react/lib/components/Persona/Persona.styles.js","../../node_modules/@fluentui/react/lib/components/Persona/Persona.js","../../node_modules/@fluentui/react/lib/components/Autofill/Autofill.js","../../node_modules/@fluentui/react-focus/lib/components/FocusZone/FocusZone.types.js","../../node_modules/@fluentui/react-focus/lib/components/FocusZone/FocusZone.js","../../node_modules/@fluentui/react/lib/components/Link/useLink.js","../../node_modules/@fluentui/react/lib/components/Link/Link.base.js","../../node_modules/@fluentui/react/lib/components/Link/Link.styles.js","../../node_modules/@fluentui/react/lib/components/Link/Link.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenu.types.js","../../node_modules/@fluentui/react/lib/utilities/contextualMenu/contextualMenuUtility.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenuItem.base.js","../../node_modules/@fluentui/react/lib/components/Divider/VerticalDivider.classNames.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenu.cnstyles.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenu.classNames.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenuItem.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuItemWrapper.js","../../node_modules/@fluentui/react/lib/utilities/keytips/KeytipConstants.js","../../node_modules/@fluentui/react/lib/utilities/keytips/KeytipManager.js","../../node_modules/@fluentui/react/lib/utilities/keytips/KeytipUtils.js","../../node_modules/@fluentui/react/lib/components/KeytipData/useKeytipData.js","../../node_modules/@fluentui/react/lib/components/KeytipData/KeytipData.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.js","../../node_modules/@fluentui/react/lib/components/Divider/VerticalDivider.styles.js","../../node_modules/@fluentui/react/lib/components/Divider/VerticalDivider.base.js","../../node_modules/@fluentui/react/lib/components/Divider/VerticalDivider.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.js","../../node_modules/@fluentui/react/lib/utilities/decorators/BaseDecorator.js","../../node_modules/@fluentui/react/lib/utilities/decorators/withResponsiveMode.js","../../node_modules/@fluentui/react/lib/utilities/hooks/useResponsiveMode.js","../../node_modules/@fluentui/react/lib/utilities/MenuContext/MenuContext.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenu.base.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenu.styles.js","../../node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenu.js","../../node_modules/@fluentui/react/lib/components/Button/BaseButton.classNames.js","../../node_modules/@fluentui/react/lib/components/Button/SplitButton/SplitButton.classNames.js","../../node_modules/@fluentui/react/lib/components/Button/BaseButton.js","../../node_modules/@fluentui/react/lib/components/Button/BaseButton.styles.js","../../node_modules/@fluentui/react/lib/components/Button/SplitButton/SplitButton.styles.js","../../node_modules/@fluentui/react/lib/components/Button/ButtonThemes.js","../../node_modules/@fluentui/react/lib/components/Button/DefaultButton/DefaultButton.styles.js","../../node_modules/@fluentui/react/lib/components/Button/DefaultButton/DefaultButton.js","../../node_modules/@fluentui/react/lib/components/Button/ActionButton/ActionButton.styles.js","../../node_modules/@fluentui/react/lib/components/Button/ActionButton/ActionButton.js","../../node_modules/@fluentui/react/lib/components/Button/IconButton/IconButton.styles.js","../../node_modules/@fluentui/react/lib/components/Button/IconButton/IconButton.js","../../node_modules/@fluentui/react/lib/components/Button/PrimaryButton/PrimaryButton.js","../../node_modules/@fluentui/react/lib/components/Button/CommandButton/CommandButton.js","../../node_modules/@fluentui/react/lib/components/ResizeGroup/ResizeGroup.types.js","../../node_modules/@fluentui/react/lib/components/ResizeGroup/ResizeGroup.base.js","../../node_modules/@fluentui/react/lib/components/ResizeGroup/ResizeGroup.js","../../node_modules/@fluentui/react/lib/components/Breadcrumb/Breadcrumb.base.js","../../node_modules/@fluentui/react/lib/components/Breadcrumb/Breadcrumb.styles.js","../../node_modules/@fluentui/react/lib/components/Breadcrumb/Breadcrumb.js","../../node_modules/@fluentui/date-time-utilities/lib/dateValues/dateValues.js","../../node_modules/@fluentui/date-time-utilities/lib/dateValues/timeConstants.js","../../node_modules/@fluentui/date-time-utilities/lib/dateMath/dateMath.js","../../node_modules/@fluentui/date-time-utilities/lib/dateFormatting/dateFormatting.defaults.js","../../node_modules/@fluentui/date-time-utilities/lib/dateGrid/isBeforeMinDate.js","../../node_modules/@fluentui/date-time-utilities/lib/dateGrid/isAfterMaxDate.js","../../node_modules/@fluentui/date-time-utilities/lib/dateGrid/isRestrictedDate.js","../../node_modules/@fluentui/date-time-utilities/lib/dateGrid/findAvailableDate.js","../../node_modules/@fluentui/date-time-utilities/lib/dateGrid/getBoundedDateRange.js","../../node_modules/@fluentui/date-time-utilities/lib/dateGrid/isContiguous.js","../../node_modules/@fluentui/date-time-utilities/lib/dateGrid/getDateRangeTypeToUse.js","../../node_modules/@fluentui/date-time-utilities/lib/dateGrid/getDayGrid.js","../../node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarMonthHeaderRow.js","../../node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarGridDayCell.js","../../node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarGridRow.js","../../node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.base.js","../../node_modules/@fluentui/react/lib/components/Calendar/Calendar.types.js","../../node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.styles.js","../../node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.js","../../node_modules/@fluentui/react/lib/components/Calendar/CalendarDay/CalendarDay.base.js","../../node_modules/@fluentui/react/lib/components/Calendar/CalendarDay/CalendarDay.styles.js","../../node_modules/@fluentui/react/lib/components/Calendar/CalendarDay/CalendarDay.js","../../node_modules/@fluentui/react/lib/components/Calendar/CalendarPicker/CalendarPicker.styles.js","../../node_modules/@fluentui/react/lib/components/Calendar/CalendarMonth/CalendarMonth.styles.js","../../node_modules/@fluentui/react/lib/components/Calendar/CalendarYear/CalendarYear.styles.js","../../node_modules/@fluentui/react/lib/components/Calendar/defaults.js","../../node_modules/@fluentui/react/lib/components/Calendar/CalendarYear/CalendarYear.base.js","../../node_modules/@fluentui/react/lib/components/Calendar/CalendarYear/CalendarYear.js","../../node_modules/@fluentui/react/lib/components/Calendar/CalendarMonth/CalendarMonth.base.js","../../node_modules/@fluentui/react/lib/components/Calendar/CalendarMonth/CalendarMonth.js","../../node_modules/@fluentui/react/lib/components/Calendar/Calendar.base.js","../../node_modules/@fluentui/react/lib/components/Calendar/Calendar.styles.js","../../node_modules/@fluentui/react/lib/components/Calendar/Calendar.js","../../node_modules/@fluentui/react/lib/components/Check/Check.base.js","../../node_modules/@fluentui/react/lib/components/Check/Check.styles.js","../../node_modules/@fluentui/react/lib/components/Check/Check.js","../../node_modules/@fluentui/react/lib/utilities/color/consts.js","../../node_modules/@fluentui/react/lib/utilities/color/hsl2hsv.js","../../node_modules/@fluentui/react/lib/utilities/color/hsv2rgb.js","../../node_modules/@fluentui/react/lib/utilities/color/hsl2rgb.js","../../node_modules/@fluentui/react/lib/utilities/color/cssColor.js","../../node_modules/@fluentui/react/lib/utilities/color/clamp.js","../../node_modules/@fluentui/react/lib/utilities/color/rgb2hex.js","../../node_modules/@fluentui/react/lib/utilities/color/rgb2hsv.js","../../node_modules/@fluentui/react/lib/utilities/color/_rgbaOrHexString.js","../../node_modules/@fluentui/react/lib/utilities/color/getColorFromRGBA.js","../../node_modules/@fluentui/react/lib/utilities/color/getColorFromString.js","../../node_modules/@fluentui/react/lib/utilities/color/updateA.js","../../node_modules/@fluentui/react/lib/components/Label/Label.base.js","../../node_modules/@fluentui/react/lib/components/Label/Label.styles.js","../../node_modules/@fluentui/react/lib/components/Label/Label.js","../../node_modules/@fluentui/react/lib/components/TextField/TextField.base.js","../../node_modules/@fluentui/react/lib/components/TextField/TextField.styles.js","../../node_modules/@fluentui/react/lib/components/TextField/TextField.js","../../node_modules/@fluentui/react/lib/components/TextField/MaskedTextField/inputMask.js","../../node_modules/@fluentui/react/lib/components/TextField/MaskedTextField/MaskedTextField.js","../../node_modules/@fluentui/react/lib/components/Dialog/DialogContent.types.js","../../node_modules/@fluentui/react/lib/components/Modal/Modal.styles.js","../../node_modules/@fluentui/react/lib/components/Overlay/Overlay.base.js","../../node_modules/@fluentui/react/lib/components/Overlay/Overlay.styles.js","../../node_modules/@fluentui/react/lib/components/Overlay/Overlay.js","../../node_modules/@fluentui/react/lib/utilities/DraggableZone/DraggableZone.styles.js","../../node_modules/@fluentui/react/lib/utilities/DraggableZone/DraggableZone.js","../../node_modules/@fluentui/react/lib/components/Modal/Modal.base.js","../../node_modules/@fluentui/react/lib/components/Modal/Modal.js","../../node_modules/@fluentui/react/lib/components/Dialog/DialogFooter.base.js","../../node_modules/@fluentui/react/lib/components/Dialog/DialogFooter.styles.js","../../node_modules/@fluentui/react/lib/components/Dialog/DialogFooter.js","../../node_modules/@fluentui/react/lib/components/Dialog/DialogContent.base.js","../../node_modules/@fluentui/react/lib/components/Dialog/DialogContent.styles.js","../../node_modules/@fluentui/react/lib/components/Dialog/DialogContent.js","../../node_modules/@fluentui/react/lib/components/Dialog/Dialog.base.js","../../node_modules/@fluentui/react/lib/components/Dialog/Dialog.styles.js","../../node_modules/@fluentui/react/lib/components/Dialog/Dialog.js","../../node_modules/@fluentui/react/lib/utilities/dragdrop/DragDropHelper.js","../../node_modules/@fluentui/react/lib/utilities/selection/SelectionZone.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-0.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-1.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-2.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-3.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-4.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-5.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-6.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-7.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-8.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-9.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-10.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-11.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-12.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-13.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-14.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-15.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-16.js","../../node_modules/@fluentui/font-icons-mdl2/lib/fabric-icons-17.js","../../node_modules/@fluentui/font-icons-mdl2/lib/iconAliases.js","../../node_modules/@fluentui/font-icons-mdl2/lib/version.js","../../node_modules/@fluentui/font-icons-mdl2/lib/index.js","../../node_modules/@fluentui/react/lib/components/MessageBar/MessageBar.types.js","../../node_modules/@fluentui/react/lib/components/MessageBar/MessageBar.base.js","../../node_modules/@fluentui/react/lib/components/MessageBar/MessageBar.styles.js","../../node_modules/@fluentui/react/lib/components/MessageBar/MessageBar.js","../../node_modules/@fluentui/react/lib/components/Panel/Panel.types.js","../../node_modules/@fluentui/react/lib/components/Panel/Panel.base.js","../../node_modules/@fluentui/react/lib/components/Panel/Panel.styles.js","../../node_modules/@fluentui/react/lib/components/Panel/Panel.js","../../node_modules/@fluentui/react/lib/utilities/observeResize.js","../../node_modules/@fluentui/react/lib/utilities/useOverflow.js","../../node_modules/@fluentui/react/lib/components/Pivot/PivotItem.js","../../node_modules/@fluentui/react/lib/components/Pivot/Pivot.base.js","../../node_modules/@fluentui/react/lib/components/Pivot/Pivot.styles.js","../../node_modules/@fluentui/react/lib/components/Pivot/Pivot.js","../../node_modules/@fluentui/react/lib/components/ScrollablePane/ScrollablePane.styles.js","../../node_modules/@fluentui/react/lib/components/ScrollablePane/ScrollablePane.types.js","../../node_modules/@fluentui/react/lib/components/ScrollablePane/ScrollablePane.base.js","../../node_modules/@fluentui/react/lib/components/ScrollablePane/ScrollablePane.js","../../node_modules/@fluentui/react/lib/utilities/selectableOption/SelectableOption.js","../../node_modules/@fluentui/react/lib/utilities/selectableOption/SelectableOption.types.js","../../node_modules/@fluentui/react/lib/components/Separator/Separator.base.js","../../node_modules/@fluentui/react/lib/components/Separator/Separator.styles.js","../../node_modules/@fluentui/react/lib/components/Separator/Separator.js","../../node_modules/@fluentui/react/lib/components/Shimmer/Shimmer.styles.js","../../node_modules/@fluentui/react/lib/components/Shimmer/Shimmer.types.js","../../node_modules/@fluentui/react/lib/components/Shimmer/ShimmerLine/ShimmerLine.base.js","../../node_modules/@fluentui/react/lib/components/Shimmer/ShimmerLine/ShimmerLine.styles.js","../../node_modules/@fluentui/react/lib/components/Shimmer/ShimmerLine/ShimmerLine.js","../../node_modules/@fluentui/react/lib/components/Shimmer/ShimmerGap/ShimmerGap.base.js","../../node_modules/@fluentui/react/lib/components/Shimmer/ShimmerGap/ShimmerGap.styles.js","../../node_modules/@fluentui/react/lib/components/Shimmer/ShimmerGap/ShimmerGap.js","../../node_modules/@fluentui/react/lib/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.js","../../node_modules/@fluentui/react/lib/components/Shimmer/ShimmerCircle/ShimmerCircle.base.js","../../node_modules/@fluentui/react/lib/components/Shimmer/ShimmerCircle/ShimmerCircle.js","../../node_modules/@fluentui/react/lib/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.js","../../node_modules/@fluentui/react/lib/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.styles.js","../../node_modules/@fluentui/react/lib/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.js","../../node_modules/@fluentui/react/lib/components/Shimmer/Shimmer.base.js","../../node_modules/@fluentui/react/lib/components/Shimmer/Shimmer.js","../../node_modules/@fluentui/react/lib/components/SpinButton/SpinButton.styles.js","../../node_modules/@fluentui/react/lib/components/SpinButton/SpinButton.types.js","../../node_modules/@fluentui/react/lib/components/SpinButton/SpinButton.base.js","../../node_modules/@fluentui/react/lib/components/SpinButton/SpinButton.js","../../node_modules/@fluentui/react/lib/components/Spinner/Spinner.types.js","../../node_modules/@fluentui/react/lib/components/Spinner/Spinner.base.js","../../node_modules/@fluentui/react/lib/components/Spinner/Spinner.styles.js","../../node_modules/@fluentui/react/lib/components/Spinner/Spinner.js","../../node_modules/@fluentui/foundation-legacy/lib/utilities.js","../../node_modules/@fluentui/foundation-legacy/lib/slots.js","../../node_modules/@fluentui/foundation-legacy/lib/createComponent.js","../../node_modules/@fluentui/react/lib/components/Stack/StackItem/StackItem.styles.js","../../node_modules/@fluentui/react/lib/components/Stack/StackItem/StackItem.js","../../node_modules/@fluentui/react/lib/components/Stack/StackUtils.js","../../node_modules/@fluentui/react/lib/components/Stack/Stack.styles.js","../../node_modules/@fluentui/react/lib/components/Stack/Stack.js","../../node_modules/@fluentui/react/lib/components/Sticky/Sticky.types.js","../../node_modules/@fluentui/react/lib/components/Sticky/util/scroll.js","../../node_modules/@fluentui/react/lib/components/Sticky/util/comparison.js","../../node_modules/@fluentui/react/lib/components/Sticky/Sticky.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/ThemeContext.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/useTheme.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/styleRenderers/mergeStylesRenderer.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/makeStyles.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/useThemeProviderClasses.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/renderThemeProvider.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/useThemeProviderState.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/useThemeProvider.js","../../node_modules/@fluentui/react/lib/utilities/ThemeProvider/ThemeProvider.js","../../node_modules/@fluentui/react/lib/components/Announced/Announced.base.js","../../node_modules/@fluentui/react/lib/components/Announced/Announced.styles.js","../../node_modules/@fluentui/react/lib/components/Announced/Announced.js","../../node_modules/@fluentui/react/lib/components/pickers/Suggestions/Suggestions.types.js","../../node_modules/@fluentui/react/lib/components/pickers/Suggestions/Suggestions.scss.js","../../node_modules/@fluentui/react/lib/components/pickers/Suggestions/SuggestionsItem.js","../../node_modules/@fluentui/react/lib/components/pickers/Suggestions/SuggestionsItem.styles.js","../../node_modules/@fluentui/react/lib/components/pickers/Suggestions/Suggestions.js","../../node_modules/@fluentui/react/lib/components/pickers/Suggestions/Suggestions.styles.js","../../node_modules/@fluentui/react/lib/components/pickers/Suggestions/SuggestionsController.js","../../node_modules/@fluentui/react/lib/components/pickers/BasePicker.types.js","../../node_modules/@fluentui/react/lib/components/pickers/BasePicker.scss.js","../../node_modules/@fluentui/react/lib/components/pickers/BasePicker.js","../../node_modules/@fluentui/react/lib/components/pickers/BasePicker.styles.js","../../node_modules/@fluentui/react/lib/components/pickers/TagPicker/TagItem.styles.js","../../node_modules/@fluentui/react/lib/components/pickers/TagPicker/TagItem.js","../../node_modules/@fluentui/react/lib/components/pickers/TagPicker/TagItemSuggestion.styles.js","../../node_modules/@fluentui/react/lib/components/pickers/TagPicker/TagItemSuggestion.js","../../node_modules/@fluentui/react/lib/components/pickers/TagPicker/TagPicker.js","../../node_modules/@fluentui/react/lib/components/List/List.types.js","../../node_modules/@fluentui/react/lib/components/List/utils/scroll.js","../../node_modules/@fluentui/react/lib/components/List/List.js","../../node_modules/@fluentui/react/lib/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.js","../../node_modules/@fluentui/react/lib/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.styles.js","../../node_modules/@fluentui/react/lib/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.js","../../node_modules/@bps/fluent-ui/dist/lib/utilities/data-attribute.js","../../node_modules/@fluentui/react/lib/components/Checkbox/Checkbox.base.js","../../node_modules/@fluentui/react/lib/components/Checkbox/Checkbox.styles.js","../../node_modules/@fluentui/react/lib/components/Checkbox/Checkbox.js","../../node_modules/@fluentui/react/lib/components/ChoiceGroup/ChoiceGroup.base.js","../../node_modules/@fluentui/react/lib/components/ChoiceGroup/ChoiceGroup.styles.js","../../node_modules/@fluentui/react/lib/components/ChoiceGroup/ChoiceGroup.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupedList.types.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsList.types.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupSpacer.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupedList.styles.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRow.styles.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsHeader.styles.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRowCheck.styles.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupHeader.styles.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupHeader.base.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupHeader.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupShowAll.styles.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupShowAll.base.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupShowAll.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupFooter.styles.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupFooter.base.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupFooter.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupedListSection.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupedList.base.js","../../node_modules/@fluentui/react/lib/components/GroupedList/GroupedList.js","../../node_modules/@fluentui/react/lib/utilities/groupedList/GroupedListUtility.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRowCheck.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsColumn.base.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsColumn.styles.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsColumn.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsHeader.types.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsHeader.base.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsHeader.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRowFields.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRow.base.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsRow.js","../../node_modules/@fluentui/react/lib/utilities/decorators/withViewport.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsList.base.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsList.styles.js","../../node_modules/@fluentui/react/lib/components/DetailsList/DetailsList.js","../../node_modules/@fluentui/react/lib/components/Dropdown/utilities/DropdownSizePosCache.js","../../node_modules/@fluentui/react/lib/components/Dropdown/Dropdown.base.js","../../node_modules/@fluentui/react/lib/components/Dropdown/Dropdown.styles.js","../../node_modules/@fluentui/react/lib/components/Dropdown/Dropdown.js","../../node_modules/@fluentui/react/lib/components/ProgressIndicator/ProgressIndicator.base.js","../../node_modules/@fluentui/react/lib/components/ProgressIndicator/ProgressIndicator.styles.js","../../node_modules/@fluentui/react/lib/components/ProgressIndicator/ProgressIndicator.js","../../node_modules/@fluentui/react/lib/components/SearchBox/SearchBox.base.js","../../node_modules/@fluentui/react/lib/components/SearchBox/SearchBox.styles.js","../../node_modules/@fluentui/react/lib/components/SearchBox/SearchBox.js","../../node_modules/@fluentui/react/lib/components/DetailsList/ShimmeredDetailsList.base.js","../../node_modules/@fluentui/react/lib/components/DetailsList/ShimmeredDetailsList.styles.js","../../node_modules/@fluentui/react/lib/components/DetailsList/ShimmeredDetailsList.js","../../node_modules/@fluentui/react/lib/components/Slider/useSlider.js","../../node_modules/@fluentui/react/lib/components/Slider/Slider.base.js","../../node_modules/@fluentui/react/lib/components/Slider/Slider.styles.js","../../node_modules/@fluentui/react/lib/components/Slider/Slider.js","../../node_modules/@fluentui/react/lib/components/Text/Text.view.js","../../node_modules/@fluentui/react/lib/components/Text/Text.styles.js","../../node_modules/@fluentui/react/lib/components/Text/Text.js","../../node_modules/@fluentui/react/lib/components/Toggle/Toggle.base.js","../../node_modules/@fluentui/react/lib/components/Toggle/Toggle.styles.js","../../node_modules/@fluentui/react/lib/components/Toggle/Toggle.js","../../node_modules/@bps/fluent-ui/dist/lib/utilities/fleunt-ui-utils.js","../../node_modules/@bps/fluent-ui/dist/lib/utilities/common.js","../../node_modules/@bps/fluent-ui/dist/lib/utilities/calendar-strings.js","../../node_modules/@bps/fluent-ui/dist/lib/utilities/canvas-measure.js","../../node_modules/@bps/fluent-ui/dist/lib/utilities/common-styles.js","../../node_modules/@bps/fluent-ui/dist/lib/utilities/transitions.js","../../node_modules/@bps/fluent-ui/dist/lib/api/form-api/form.types.js","../../node_modules/@bps/fluent-ui/dist/lib/api/form-api/form-actions.js","../../node_modules/@bps/fluent-ui/dist/lib/api/form-api/form-context.js","../../node_modules/@bps/fluent-ui/dist/lib/api/form-api/utils.js","../../node_modules/@bps/fluent-ui/dist/lib/api/form-api/form-reducer.js","../../node_modules/@bps/fluent-ui/dist/lib/api/form-api/Form.js","../../node_modules/@bps/fluent-ui/dist/lib/api/form-api/useFormContext.js","../../node_modules/@bps/fluent-ui/dist/lib/api/form-api/useFieldContext.js","../../node_modules/@bps/fluent-ui/dist/lib/api/form-api/useFieldRegister.js","../../node_modules/@bps/fluent-ui/dist/lib/components/typography/Heading/Heading.js","../../node_modules/@bps/fluent-ui/dist/lib/components/typography/Text.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Badge.js","../../node_modules/@bps/fluent-ui/dist/lib/components/layout-helpers/CenteredBox/CenteredBox.js","../../node_modules/@bps/fluent-ui/dist/lib/components/layout-helpers/HideStack/HideStack.js","../../node_modules/@bps/fluent-ui/dist/lib/components/layout-helpers/Grid/utils.js","../../node_modules/@bps/fluent-ui/dist/lib/components/layout-helpers/Grid/Grid.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/layout-helpers/Grid/Grid.js","../../node_modules/@bps/fluent-ui/dist/lib/components/layout-helpers/Grid/GridItem/GridItem.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/layout-helpers/Grid/GridItem/GridItem.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FieldItem/FieldItem.types.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FieldItem/FieldItem.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FieldItem/FieldItemError.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FieldItem/FieldItem.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Dropdown/Dropdown.js","../../node_modules/@bps/fluent-ui/dist/lib/components/ChoiceGroup/ChoiceGroup.js","../../node_modules/@bps/fluent-ui/dist/lib/components/SearchBox/SearchBox.js","../../node_modules/@bps/fluent-ui/dist/lib/components/TextBadge/TextBadge.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FromNow.js","../../node_modules/@bps/fluent-ui/dist/lib/components/TopBar/TopBar.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/TopBar/TopBar.js","../../node_modules/@bps/fluent-ui/dist/lib/components/TopBar/TopBarWrapper.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/TopBar/TopBarWrapper.js","../../node_modules/@bps/fluent-ui/dist/lib/components/TopBar/TopBarDefaultHeader.js","../../node_modules/@bps/fluent-ui/dist/lib/components/BestPracticeSvgLogo.js","../../node_modules/@bps/fluent-ui/dist/lib/components/LabeledText/LabeledTextGroup.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/LabeledText/LabeledTextGroup.js","../../node_modules/@bps/fluent-ui/dist/lib/components/LabeledText/LabeledText.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/LabeledText/LabeledText.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Slider/Slider.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Slider/Slider.js","../../node_modules/@bps/fluent-ui/dist/lib/components/SpinNumberInput/SpinNumberInput.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/SpinNumberInput/utils.js","../../node_modules/@bps/fluent-ui/dist/lib/components/SpinNumberInput/SpinNumberInput.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Tile/Tile.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Tile/Tile.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FontIcon/FontIcon.js","../../node_modules/@bps/fluent-ui/dist/lib/components/buttons/PillButton.js","../../node_modules/@bps/fluent-ui/dist/lib/components/buttons/ButtonsGroupChoice/ButtonsGroupChoice.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/buttons/ButtonsGroupChoice/ButtonsGroupChoiceItem.js","../../node_modules/@bps/fluent-ui/dist/lib/components/buttons/ButtonsGroupChoice/ButtonsGroupChoice.js","../../node_modules/@bps/fluent-ui/dist/lib/components/buttons/ButtonsGroupChoice/ButtonsGroupSingleChoice.js","../../node_modules/@bps/fluent-ui/dist/lib/components/buttons/CopyToClipboardButton/CopyToClipboardButton.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Card/Card.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Card/Card.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Card/Card.types.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Card/CollapsibleCard.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Card/CollapsibleCardControlled.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Card/CollapsibleCard.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/GenericSelect/GenericSelect.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/buttons/ClearCloseButton.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/GenericSelect/GenericSelectCalloutFooter.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/GenericSelect/utils.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/GenericSelect/GenericSelectField.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/GenericSelect/GenericSelectShowAllOption.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/GenericSelect/GenericSelectOptionsList.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/GenericSelect/GenericSelectSearchBox.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/GenericSelect/GenericSelect.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/DatePicker/DatePicker.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/DatePicker/DatePicker.types.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/DatePicker/utils.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/DatePicker/ReadOnlyInFormatField.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/DatePicker/Suffix.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/DatePicker/DatePickerInputField.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/DatePicker/DatePicker.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/DatePicker/DatesRangePicker/YearCarousel.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/DatePicker/DatesRangePicker/DateRangeCalendar.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/DatePicker/DatesRangePicker/DatesRangePicker.types.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/DatePicker/DatesRangePicker/PasteStartDateButton.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/DatePicker/DatesRangePicker/DatesRangeCallout.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/DatePicker/DatesRangePicker/utils.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/DatePicker/DatesRangePicker/DatesRangePicker.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/selects/OptionsSelect.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/TimePicker/TimePicker.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/TimePicker/TimePicker.types.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/TimePicker/TimePickerHelper.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/TimePicker/TimePicker.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/ProfilePhotoPicker/ProfilePhotoPicker.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/ProfilePhotoPicker/RemoveButton.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/ProfilePhotoPicker/RemoveOverlay.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/ProfilePhotoPicker/UploadingOverlay.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/ProfilePhotoPicker/ProfilePhotoPicker.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/MultiTagPicker/MultiTagPickerItem/MultiTagPickerItem.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/MultiTagPicker/MultiTagPickerItem/MultiTagPickerItem.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/MultiTagPicker/extendPicker.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/MultiTagPicker/withStaticItems.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/MultiTagPicker/MultiTagPicker.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/MultiTagPicker/extendToSinglePicker.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/MultiTagPicker/extendToSingleTagPicker.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/MultiTagPicker/StaticPicker.js","../../node_modules/@bps/fluent-ui/dist/lib/components/pickers/MultiTagPicker/GenericPicker.js","../../node_modules/@bps/fluent-ui/dist/lib/components/CheckboxGroup/CheckboxGroup.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/CheckboxGroup/CheckboxGroup.js","../../node_modules/@bps/fluent-ui/dist/lib/components/NoDataTile/NoDataTile.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/NoDataTile/NoDataTile.js","../../node_modules/@bps/fluent-ui/dist/lib/components/PivotTabs/PivotTabs.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/PivotTabs/PivotTabs.js","../../node_modules/@bps/fluent-ui/dist/lib/components/ResizableOverflowBar/ResizableOverflowBar.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/ResizableOverflowBar/ResizableOverflowBar.js","../../node_modules/@bps/fluent-ui/dist/lib/components/StateBlock/StateBlock.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/StateBlock/StateBlock.js","../../node_modules/@bps/fluent-ui/dist/lib/components/SideRailMenu/SideRailMenu.types.js","../../node_modules/@bps/fluent-ui/dist/lib/components/SideRailMenu/SideRailMenu.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/SideRailMenu/SideRailMenuListItem.js","../../node_modules/@bps/fluent-ui/dist/lib/components/SideRailMenu/SideRailMenu.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Lists/utils.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Lists/withBorderStyles/withBorderStyles.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Lists/withBorderStyles/withBorderStyles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Lists/ShimmeredDetailsList/ShimmeredDetailsList.types.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Lists/ShimmeredDetailsList/ShimmeredDetailsList.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Lists/DetailsLists/DetailsList.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Lists/DtoDetailRow.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Lists/NativeList/NativeList.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Lists/NativeList/NativeList.js","../../node_modules/@bps/fluent-ui/dist/lib/theme/defaultTheme.js","../../node_modules/@bps/fluent-ui/dist/lib/theme/scopedSettings.js","../../node_modules/@bps/fluent-ui/dist/lib/components/dialogs/ConfirmDialog.js","../../node_modules/@bps/fluent-ui/dist/lib/components/dialogs/confirm.js","../../node_modules/@bps/fluent-ui/dist/lib/components/hooks/useResizeElementObserver.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Toggle/Toggle.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FilterBar/FilterBar.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FilterBar/options/ToggleButtonFilterItem.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FilterBar/utils.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FilterBar/options/ButtonsGroupSingleChoiceFilterItem.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FilterBar/options/DatesRangePickerFilterItem.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FilterBar/options/SearchBoxFilterItem.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FilterBar/FilterBarPresets.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FilterBar/options/DatePickerFilterItem.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FilterBar/options/ToggleFilterItem.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FilterBar/options/OptionsSelectFilterItem.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FilterBar/FilterOption.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FilterBar/FilterCallout.js","../../node_modules/@bps/fluent-ui/dist/lib/components/FilterBar/FilterBar.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Checkbox/Checkbox.js","../../node_modules/@bps/fluent-ui/dist/lib/components/CenteredLargeSpinner.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Persona.js","../../node_modules/@bps/fluent-ui/dist/lib/components/NotFoundErrorBox.js","../../node_modules/@bps/fluent-ui/dist/lib/components/ProgressIndicator/ProgressIndicator.types.js","../../node_modules/@bps/fluent-ui/dist/lib/components/ProgressIndicator/stat-label/StatLabel.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/ProgressIndicator/stat-label/StatLabel.js","../../node_modules/@bps/fluent-ui/dist/lib/components/ProgressIndicator/ProgressIndicator.js","../../node_modules/@bps/fluent-ui/dist/lib/components/SubmissionForm/ExpSubmissionForm.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/SubmissionForm/ExpSubmissionFormButtons.js","../../node_modules/@bps/fluent-ui/dist/lib/components/SubmissionForm/ExpSubmissionForm.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Header/Header.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Header/Logo.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Header/Header.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Accordion/Accordion.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Accordion/AccordionContext.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Accordion/Accordion.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Accordion/AccordionItem/AccordionItem.styles.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Accordion/AccordionItem/AccordionItem.types.js","../../node_modules/@bps/fluent-ui/dist/lib/components/Accordion/AccordionItem/AccordionItem.js"],"sourcesContent":["// A packages cache that makes sure that we don't inject the same packageName twice in the same bundle -\n// this cache is local to the module closure inside this bundle\nvar packagesCache = {};\n// Cache access to window to avoid IE11 memory leak.\nvar _win = undefined;\ntry {\n _win = window;\n}\ncatch (e) {\n /* no-op */\n}\nexport function setVersion(packageName, packageVersion) {\n if (typeof _win !== 'undefined') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var packages = (_win.__packages__ = _win.__packages__ || {});\n // We allow either the global packages or local packages caches to invalidate so testing can\n // just clear the global to set this state\n if (!packages[packageName] || !packagesCache[packageName]) {\n packagesCache[packageName] = packageVersion;\n var versions = (packages[packageName] = packages[packageName] || []);\n versions.push(packageVersion);\n }\n }\n}\n//# sourceMappingURL=setVersion.js.map","import { setVersion } from './setVersion';\nexport { setVersion };\nsetVersion('@fluentui/set-version', '6.0.0');\n//# sourceMappingURL=index.js.map","import { __assign } from \"tslib\";\nexport var InjectionMode = {\n /**\n * Avoids style injection, use getRules() to read the styles.\n */\n none: 0,\n /**\n * Inserts rules using the insertRule api.\n */\n insertNode: 1,\n /**\n * Appends rules using appendChild.\n */\n appendChild: 2,\n};\nvar STYLESHEET_SETTING = '__stylesheet__';\n/**\n * MSIE 11 doesn't cascade styles based on DOM ordering, but rather on the order that each style node\n * is created. As such, to maintain consistent priority, IE11 should reuse a single style node.\n */\nvar REUSE_STYLE_NODE = typeof navigator !== 'undefined' && /rv:11.0/.test(navigator.userAgent);\nvar _global = {};\n// Grab window.\ntry {\n // Why the cast?\n // if compiled/type checked in same program with `@fluentui/font-icons-mdl2` which extends `Window` on global\n // ( check packages/font-icons-mdl2/src/index.ts ) the definitions don't match! Thus the need of this extra assertion\n _global = (window || {});\n}\ncatch (_a) {\n /* leave as blank object */\n}\nvar _stylesheet;\n/**\n * Represents the state of styles registered in the page. Abstracts\n * the surface for adding styles to the stylesheet, exposes helpers\n * for reading the styles registered in server rendered scenarios.\n *\n * @public\n */\nvar Stylesheet = /** @class */ (function () {\n function Stylesheet(config, serializedStylesheet) {\n var _a, _b, _c, _d, _e, _f;\n this._rules = [];\n this._preservedRules = [];\n this._counter = 0;\n this._keyToClassName = {};\n this._onInsertRuleCallbacks = [];\n this._onResetCallbacks = [];\n this._classNameToArgs = {};\n this._config = __assign({ \n // If there is no document we won't have an element to inject into.\n injectionMode: typeof document === 'undefined' ? InjectionMode.none : InjectionMode.insertNode, defaultPrefix: 'css', namespace: undefined, cspSettings: undefined }, config);\n this._classNameToArgs = (_a = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.classNameToArgs) !== null && _a !== void 0 ? _a : this._classNameToArgs;\n this._counter = (_b = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.counter) !== null && _b !== void 0 ? _b : this._counter;\n this._keyToClassName = (_d = (_c = this._config.classNameCache) !== null && _c !== void 0 ? _c : serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.keyToClassName) !== null && _d !== void 0 ? _d : this._keyToClassName;\n this._preservedRules = (_e = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.preservedRules) !== null && _e !== void 0 ? _e : this._preservedRules;\n this._rules = (_f = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.rules) !== null && _f !== void 0 ? _f : this._rules;\n }\n /**\n * Gets the singleton instance.\n */\n Stylesheet.getInstance = function () {\n _stylesheet = _global[STYLESHEET_SETTING];\n if (!_stylesheet || (_stylesheet._lastStyleElement && _stylesheet._lastStyleElement.ownerDocument !== document)) {\n var fabricConfig = (_global === null || _global === void 0 ? void 0 : _global.FabricConfig) || {};\n var stylesheet = new Stylesheet(fabricConfig.mergeStyles, fabricConfig.serializedStylesheet);\n _stylesheet = stylesheet;\n _global[STYLESHEET_SETTING] = stylesheet;\n }\n return _stylesheet;\n };\n /**\n * Serializes the Stylesheet instance into a format which allows rehydration on creation.\n * @returns string representation of `ISerializedStylesheet` interface.\n */\n Stylesheet.prototype.serialize = function () {\n return JSON.stringify({\n classNameToArgs: this._classNameToArgs,\n counter: this._counter,\n keyToClassName: this._keyToClassName,\n preservedRules: this._preservedRules,\n rules: this._rules,\n });\n };\n /**\n * Configures the stylesheet.\n */\n Stylesheet.prototype.setConfig = function (config) {\n this._config = __assign(__assign({}, this._config), config);\n };\n /**\n * Configures a reset callback.\n *\n * @param callback - A callback which will be called when the Stylesheet is reset.\n * @returns function which when called un-registers provided callback.\n */\n Stylesheet.prototype.onReset = function (callback) {\n var _this = this;\n this._onResetCallbacks.push(callback);\n return function () {\n _this._onResetCallbacks = _this._onResetCallbacks.filter(function (cb) { return cb !== callback; });\n };\n };\n /**\n * Configures an insert rule callback.\n *\n * @param callback - A callback which will be called when a rule is inserted.\n * @returns function which when called un-registers provided callback.\n */\n Stylesheet.prototype.onInsertRule = function (callback) {\n var _this = this;\n this._onInsertRuleCallbacks.push(callback);\n return function () {\n _this._onInsertRuleCallbacks = _this._onInsertRuleCallbacks.filter(function (cb) { return cb !== callback; });\n };\n };\n /**\n * Generates a unique classname.\n *\n * @param displayName - Optional value to use as a prefix.\n */\n Stylesheet.prototype.getClassName = function (displayName) {\n var namespace = this._config.namespace;\n var prefix = displayName || this._config.defaultPrefix;\n return \"\".concat(namespace ? namespace + '-' : '').concat(prefix, \"-\").concat(this._counter++);\n };\n /**\n * Used internally to cache information about a class which was\n * registered with the stylesheet.\n */\n Stylesheet.prototype.cacheClassName = function (className, key, args, rules) {\n this._keyToClassName[key] = className;\n this._classNameToArgs[className] = {\n args: args,\n rules: rules,\n };\n };\n /**\n * Gets the appropriate classname given a key which was previously\n * registered using cacheClassName.\n */\n Stylesheet.prototype.classNameFromKey = function (key) {\n return this._keyToClassName[key];\n };\n /**\n * Gets all classnames cache with the stylesheet.\n */\n Stylesheet.prototype.getClassNameCache = function () {\n return this._keyToClassName;\n };\n /**\n * Gets the arguments associated with a given classname which was\n * previously registered using cacheClassName.\n */\n Stylesheet.prototype.argsFromClassName = function (className) {\n var entry = this._classNameToArgs[className];\n return entry && entry.args;\n };\n /**\n * Gets the rules associated with a given classname which was\n * previously registered using cacheClassName.\n */\n Stylesheet.prototype.insertedRulesFromClassName = function (className) {\n var entry = this._classNameToArgs[className];\n return entry && entry.rules;\n };\n /**\n * Inserts a css rule into the stylesheet.\n * @param preserve - Preserves the rule beyond a reset boundary.\n */\n Stylesheet.prototype.insertRule = function (rule, preserve) {\n var injectionMode = this._config.injectionMode;\n var element = injectionMode !== InjectionMode.none ? this._getStyleElement() : undefined;\n if (preserve) {\n this._preservedRules.push(rule);\n }\n if (element) {\n switch (injectionMode) {\n case InjectionMode.insertNode:\n var sheet = element.sheet;\n try {\n sheet.insertRule(rule, sheet.cssRules.length);\n }\n catch (e) {\n // The browser will throw exceptions on unsupported rules (such as a moz prefix in webkit.)\n // We need to swallow the exceptions for this scenario, otherwise we'd need to filter\n // which could be slower and bulkier.\n }\n break;\n case InjectionMode.appendChild:\n element.appendChild(document.createTextNode(rule));\n break;\n }\n }\n else {\n this._rules.push(rule);\n }\n // eslint-disable-next-line deprecation/deprecation\n if (this._config.onInsertRule) {\n // eslint-disable-next-line deprecation/deprecation\n this._config.onInsertRule(rule);\n }\n this._onInsertRuleCallbacks.forEach(function (callback) { return callback(); });\n };\n /**\n * Gets all rules registered with the stylesheet; only valid when\n * using InsertionMode.none.\n */\n Stylesheet.prototype.getRules = function (includePreservedRules) {\n return (includePreservedRules ? this._preservedRules.join('') : '') + this._rules.join('');\n };\n /**\n * Resets the internal state of the stylesheet. Only used in server\n * rendered scenarios where we're using InsertionMode.none.\n */\n Stylesheet.prototype.reset = function () {\n this._rules = [];\n this._counter = 0;\n this._classNameToArgs = {};\n this._keyToClassName = {};\n this._onResetCallbacks.forEach(function (callback) { return callback(); });\n };\n // Forces the regeneration of incoming styles without totally resetting the stylesheet.\n Stylesheet.prototype.resetKeys = function () {\n this._keyToClassName = {};\n };\n Stylesheet.prototype._getStyleElement = function () {\n var _this = this;\n if (!this._styleElement && typeof document !== 'undefined') {\n this._styleElement = this._createStyleElement();\n if (!REUSE_STYLE_NODE) {\n // Reset the style element on the next frame.\n window.requestAnimationFrame(function () {\n _this._styleElement = undefined;\n });\n }\n }\n return this._styleElement;\n };\n Stylesheet.prototype._createStyleElement = function () {\n var head = document.head;\n var styleElement = document.createElement('style');\n var nodeToInsertBefore = null;\n styleElement.setAttribute('data-merge-styles', 'true');\n var cspSettings = this._config.cspSettings;\n if (cspSettings) {\n if (cspSettings.nonce) {\n styleElement.setAttribute('nonce', cspSettings.nonce);\n }\n }\n if (this._lastStyleElement) {\n // If the `nextElementSibling` is null, then the insertBefore will act as a regular append.\n // https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore#Syntax\n nodeToInsertBefore = this._lastStyleElement.nextElementSibling;\n }\n else {\n var placeholderStyleTag = this._findPlaceholderStyleTag();\n if (placeholderStyleTag) {\n nodeToInsertBefore = placeholderStyleTag.nextElementSibling;\n }\n else {\n nodeToInsertBefore = head.childNodes[0];\n }\n }\n head.insertBefore(styleElement, head.contains(nodeToInsertBefore) ? nodeToInsertBefore : null);\n this._lastStyleElement = styleElement;\n return styleElement;\n };\n Stylesheet.prototype._findPlaceholderStyleTag = function () {\n var head = document.head;\n if (head) {\n return head.querySelector('style[data-merge-styles]');\n }\n return null;\n };\n return Stylesheet;\n}());\nexport { Stylesheet };\n//# sourceMappingURL=Stylesheet.js.map","import { Stylesheet } from './Stylesheet';\n/**\n * Separates the classes and style objects. Any classes that are pre-registered\n * args are auto expanded into objects.\n */\nexport function extractStyleParts() {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n var classes = [];\n var objects = [];\n var stylesheet = Stylesheet.getInstance();\n function _processArgs(argsList) {\n for (var _i = 0, argsList_1 = argsList; _i < argsList_1.length; _i++) {\n var arg = argsList_1[_i];\n if (arg) {\n if (typeof arg === 'string') {\n if (arg.indexOf(' ') >= 0) {\n _processArgs(arg.split(' '));\n }\n else {\n var translatedArgs = stylesheet.argsFromClassName(arg);\n if (translatedArgs) {\n _processArgs(translatedArgs);\n }\n else {\n // Avoid adding the same class twice.\n if (classes.indexOf(arg) === -1) {\n classes.push(arg);\n }\n }\n }\n }\n else if (Array.isArray(arg)) {\n _processArgs(arg);\n }\n else if (typeof arg === 'object') {\n objects.push(arg);\n }\n }\n }\n }\n _processArgs(args);\n return {\n classes: classes,\n objects: objects,\n };\n}\n//# sourceMappingURL=extractStyleParts.js.map","/**\n * Sets the current RTL value.\n */\nexport function setRTL(isRTL) {\n if (_rtl !== isRTL) {\n _rtl = isRTL;\n }\n}\n/**\n * Gets the current RTL value.\n */\nexport function getRTL() {\n if (_rtl === undefined) {\n _rtl =\n typeof document !== 'undefined' &&\n !!document.documentElement &&\n document.documentElement.getAttribute('dir') === 'rtl';\n }\n return _rtl;\n}\n// This has been split into 2 lines because it was working in Fabric due to the code being transpiled to es5, so this\n// was converted to var while not working in Fluent that uses babel to transpile the code to be es6-like. Splitting the\n// logic into two lines, however, allows it to work in both scenarios.\nvar _rtl;\n_rtl = getRTL();\nexport function getStyleOptions() {\n return {\n rtl: getRTL(),\n };\n}\n//# sourceMappingURL=StyleOptionsState.js.map","var rules = {};\nexport function kebabRules(rulePairs, index) {\n var rule = rulePairs[index];\n if (rule.charAt(0) !== '-') {\n rulePairs[index] = rules[rule] = rules[rule] || rule.replace(/([A-Z])/g, '-$1').toLowerCase();\n }\n}\n//# sourceMappingURL=kebabRules.js.map","var _vendorSettings;\nexport function getVendorSettings() {\n var _a;\n if (!_vendorSettings) {\n var doc = typeof document !== 'undefined' ? document : undefined;\n var nav = typeof navigator !== 'undefined' ? navigator : undefined;\n var userAgent = (_a = nav === null || nav === void 0 ? void 0 : nav.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase();\n if (!doc) {\n _vendorSettings = {\n isWebkit: true,\n isMoz: true,\n isOpera: true,\n isMs: true,\n };\n }\n else {\n _vendorSettings = {\n isWebkit: !!(doc && 'WebkitAppearance' in doc.documentElement.style),\n isMoz: !!(userAgent && userAgent.indexOf('firefox') > -1),\n isOpera: !!(userAgent && userAgent.indexOf('opera') > -1),\n isMs: !!(nav && (/rv:11.0/i.test(nav.userAgent) || /Edge\\/\\d./i.test(navigator.userAgent))),\n };\n }\n }\n return _vendorSettings;\n}\n/**\n * Sets the vendor settings for prefixing and vendor specific operations.\n */\nexport function setVendorSettings(vendorSettings) {\n _vendorSettings = vendorSettings;\n}\n//# sourceMappingURL=getVendorSettings.js.map","import { getVendorSettings } from '../getVendorSettings';\nvar autoPrefixNames = {\n 'user-select': 1,\n};\nexport function prefixRules(rulePairs, index) {\n var vendorSettings = getVendorSettings();\n var name = rulePairs[index];\n if (autoPrefixNames[name]) {\n var value = rulePairs[index + 1];\n if (autoPrefixNames[name]) {\n if (vendorSettings.isWebkit) {\n rulePairs.push('-webkit-' + name, value);\n }\n if (vendorSettings.isMoz) {\n rulePairs.push('-moz-' + name, value);\n }\n if (vendorSettings.isMs) {\n rulePairs.push('-ms-' + name, value);\n }\n if (vendorSettings.isOpera) {\n rulePairs.push('-o-' + name, value);\n }\n }\n }\n}\n//# sourceMappingURL=prefixRules.js.map","var NON_PIXEL_NUMBER_PROPS = [\n 'column-count',\n 'font-weight',\n 'flex',\n 'flex-grow',\n 'flex-shrink',\n 'fill-opacity',\n 'opacity',\n 'order',\n 'z-index',\n 'zoom',\n];\nexport function provideUnits(rulePairs, index) {\n var name = rulePairs[index];\n var value = rulePairs[index + 1];\n if (typeof value === 'number') {\n var isNonPixelProp = NON_PIXEL_NUMBER_PROPS.indexOf(name) > -1;\n var isVariableOrPrefixed = name.indexOf('--') > -1;\n var unit = isNonPixelProp || isVariableOrPrefixed ? '' : 'px';\n rulePairs[index + 1] = \"\".concat(value).concat(unit);\n }\n}\n//# sourceMappingURL=provideUnits.js.map","var _a;\nvar LEFT = 'left';\nvar RIGHT = 'right';\nvar NO_FLIP = '@noflip';\nvar NAME_REPLACEMENTS = (_a = {},\n _a[LEFT] = RIGHT,\n _a[RIGHT] = LEFT,\n _a);\nvar VALUE_REPLACEMENTS = {\n 'w-resize': 'e-resize',\n 'sw-resize': 'se-resize',\n 'nw-resize': 'ne-resize',\n};\n/**\n * RTLifies the rulePair in the array at the current index. This mutates the array for performance\n * reasons.\n */\nexport function rtlifyRules(options, rulePairs, index) {\n if (options.rtl) {\n var name_1 = rulePairs[index];\n if (!name_1) {\n return;\n }\n var value = rulePairs[index + 1];\n if (typeof value === 'string' && value.indexOf(NO_FLIP) >= 0) {\n rulePairs[index + 1] = value.replace(/\\s*(?:\\/\\*\\s*)?\\@noflip\\b(?:\\s*\\*\\/)?\\s*?/g, '');\n }\n else if (name_1.indexOf(LEFT) >= 0) {\n rulePairs[index] = name_1.replace(LEFT, RIGHT);\n }\n else if (name_1.indexOf(RIGHT) >= 0) {\n rulePairs[index] = name_1.replace(RIGHT, LEFT);\n }\n else if (String(value).indexOf(LEFT) >= 0) {\n rulePairs[index + 1] = value.replace(LEFT, RIGHT);\n }\n else if (String(value).indexOf(RIGHT) >= 0) {\n rulePairs[index + 1] = value.replace(RIGHT, LEFT);\n }\n else if (NAME_REPLACEMENTS[name_1]) {\n rulePairs[index] = NAME_REPLACEMENTS[name_1];\n }\n else if (VALUE_REPLACEMENTS[value]) {\n rulePairs[index + 1] = VALUE_REPLACEMENTS[value];\n }\n else {\n switch (name_1) {\n case 'margin':\n case 'padding':\n rulePairs[index + 1] = flipQuad(value);\n break;\n case 'box-shadow':\n rulePairs[index + 1] = negateNum(value, 0);\n break;\n }\n }\n }\n}\n/**\n * Given a string value in a space delimited format (e.g. \"1 2 3 4\"), negates a particular value.\n */\nfunction negateNum(value, partIndex) {\n var parts = value.split(' ');\n var numberVal = parseInt(parts[partIndex], 10);\n parts[0] = parts[0].replace(String(numberVal), String(numberVal * -1));\n return parts.join(' ');\n}\n/**\n * Given a string quad, flips the left and right values.\n */\nfunction flipQuad(value) {\n if (typeof value === 'string') {\n var parts = value.split(' ');\n if (parts.length === 4) {\n return \"\".concat(parts[0], \" \").concat(parts[3], \" \").concat(parts[2], \" \").concat(parts[1]);\n }\n }\n return value;\n}\n//# sourceMappingURL=rtlifyRules.js.map","/**\n * Split a string into tokens separated by whitespace, except all text within parentheses\n * is treated as a single token (whitespace is ignored within parentheses).\n *\n * Unlike String.split(' '), multiple consecutive space characters are collapsed and\n * removed from the returned array (including leading and trailing spaces).\n *\n * For example:\n * `tokenizeWithParentheses(\"3px calc(var(--x) / 2) 9px 0 \")`\n * => `[\"3px\", \"calc(var(--x) / 2)\", \"9px\", \"0\"]`\n *\n * @returns The array of tokens. Returns an empty array if the string was empty or contained only whitespace.\n */\nexport function tokenizeWithParentheses(value) {\n var parts = [];\n var partStart = 0;\n var parens = 0;\n for (var i = 0; i < value.length; i++) {\n switch (value[i]) {\n case '(':\n parens++;\n break;\n case ')':\n if (parens) {\n parens--;\n }\n break;\n case '\\t':\n case ' ':\n if (!parens) {\n // Add the new part if it's not an empty string\n if (i > partStart) {\n parts.push(value.substring(partStart, i));\n }\n partStart = i + 1;\n }\n break;\n }\n }\n // Add the last part\n if (partStart < value.length) {\n parts.push(value.substring(partStart));\n }\n return parts;\n}\n//# sourceMappingURL=tokenizeWithParentheses.js.map","import { __spreadArray } from \"tslib\";\nimport { Stylesheet } from './Stylesheet';\nimport { kebabRules } from './transforms/kebabRules';\nimport { prefixRules } from './transforms/prefixRules';\nimport { provideUnits } from './transforms/provideUnits';\nimport { rtlifyRules } from './transforms/rtlifyRules';\nimport { tokenizeWithParentheses } from './tokenizeWithParentheses';\nvar DISPLAY_NAME = 'displayName';\nfunction getDisplayName(rules) {\n var rootStyle = rules && rules['&'];\n return rootStyle ? rootStyle.displayName : undefined;\n}\nvar globalSelectorRegExp = /\\:global\\((.+?)\\)/g;\n/**\n * Finds comma separated selectors in a :global() e.g. \":global(.class1, .class2, .class3)\"\n * and wraps them each in their own global \":global(.class1), :global(.class2), :global(.class3)\"\n *\n * @param selectorWithGlobals The selector to process\n * @returns The updated selector\n */\nfunction expandCommaSeparatedGlobals(selectorWithGlobals) {\n // We the selector does not have a :global() we can shortcut\n if (!globalSelectorRegExp.test(selectorWithGlobals)) {\n return selectorWithGlobals;\n }\n var replacementInfo = [];\n var findGlobal = /\\:global\\((.+?)\\)/g;\n var match = null;\n // Create a result list for global selectors so we can replace them.\n while ((match = findGlobal.exec(selectorWithGlobals))) {\n // Only if the found selector is a comma separated list we'll process it.\n if (match[1].indexOf(',') > -1) {\n replacementInfo.push([\n match.index,\n match.index + match[0].length,\n // Wrap each of the found selectors in :global()\n match[1]\n .split(',')\n .map(function (v) { return \":global(\".concat(v.trim(), \")\"); })\n .join(', '),\n ]);\n }\n }\n // Replace the found selectors with their wrapped variants in reverse order\n return replacementInfo\n .reverse()\n .reduce(function (selector, _a) {\n var matchIndex = _a[0], matchEndIndex = _a[1], replacement = _a[2];\n var prefix = selector.slice(0, matchIndex);\n var suffix = selector.slice(matchEndIndex);\n return prefix + replacement + suffix;\n }, selectorWithGlobals);\n}\nfunction expandSelector(newSelector, currentSelector) {\n if (newSelector.indexOf(':global(') >= 0) {\n return newSelector.replace(globalSelectorRegExp, '$1');\n }\n else if (newSelector.indexOf(':') === 0) {\n return currentSelector + newSelector;\n }\n else if (newSelector.indexOf('&') < 0) {\n return currentSelector + ' ' + newSelector;\n }\n return newSelector;\n}\nfunction extractSelector(currentSelector, rules, selector, value) {\n if (rules === void 0) { rules = { __order: [] }; }\n if (selector.indexOf('@') === 0) {\n selector = selector + '{' + currentSelector;\n extractRules([value], rules, selector);\n }\n else if (selector.indexOf(',') > -1) {\n expandCommaSeparatedGlobals(selector)\n .split(',')\n .map(function (s) { return s.trim(); })\n .forEach(function (separatedSelector) {\n return extractRules([value], rules, expandSelector(separatedSelector, currentSelector));\n });\n }\n else {\n extractRules([value], rules, expandSelector(selector, currentSelector));\n }\n}\nfunction extractRules(args, rules, currentSelector) {\n if (rules === void 0) { rules = { __order: [] }; }\n if (currentSelector === void 0) { currentSelector = '&'; }\n var stylesheet = Stylesheet.getInstance();\n var currentRules = rules[currentSelector];\n if (!currentRules) {\n currentRules = {};\n rules[currentSelector] = currentRules;\n rules.__order.push(currentSelector);\n }\n for (var _i = 0, args_1 = args; _i < args_1.length; _i++) {\n var arg = args_1[_i];\n // If the arg is a string, we need to look up the class map and merge.\n if (typeof arg === 'string') {\n var expandedRules = stylesheet.argsFromClassName(arg);\n if (expandedRules) {\n extractRules(expandedRules, rules, currentSelector);\n }\n // Else if the arg is an array, we need to recurse in.\n }\n else if (Array.isArray(arg)) {\n extractRules(arg, rules, currentSelector);\n }\n else {\n for (var prop in arg) {\n if (arg.hasOwnProperty(prop)) {\n var propValue = arg[prop];\n if (prop === 'selectors') {\n // every child is a selector.\n var selectors = arg.selectors;\n for (var newSelector in selectors) {\n if (selectors.hasOwnProperty(newSelector)) {\n extractSelector(currentSelector, rules, newSelector, selectors[newSelector]);\n }\n }\n }\n else if (typeof propValue === 'object') {\n // prop is a selector.\n if (propValue !== null) {\n extractSelector(currentSelector, rules, prop, propValue);\n }\n }\n else {\n if (propValue !== undefined) {\n // Else, add the rule to the currentSelector.\n if (prop === 'margin' || prop === 'padding') {\n expandQuads(currentRules, prop, propValue);\n }\n else {\n currentRules[prop] = propValue;\n }\n }\n }\n }\n }\n }\n }\n return rules;\n}\nfunction expandQuads(currentRules, name, value) {\n var parts = typeof value === 'string' ? tokenizeWithParentheses(value) : [value];\n if (parts.length === 0) {\n parts.push(value);\n }\n if (parts[parts.length - 1] === '!important') {\n // Remove !important from parts, and append it to each part individually\n parts = parts.slice(0, -1).map(function (p) { return p + ' !important'; });\n }\n currentRules[name + 'Top'] = parts[0];\n currentRules[name + 'Right'] = parts[1] || parts[0];\n currentRules[name + 'Bottom'] = parts[2] || parts[0];\n currentRules[name + 'Left'] = parts[3] || parts[1] || parts[0];\n}\nfunction getKeyForRules(options, rules) {\n var serialized = [options.rtl ? 'rtl' : 'ltr'];\n var hasProps = false;\n for (var _i = 0, _a = rules.__order; _i < _a.length; _i++) {\n var selector = _a[_i];\n serialized.push(selector);\n var rulesForSelector = rules[selector];\n for (var propName in rulesForSelector) {\n if (rulesForSelector.hasOwnProperty(propName) && rulesForSelector[propName] !== undefined) {\n hasProps = true;\n serialized.push(propName, rulesForSelector[propName]);\n }\n }\n }\n return hasProps ? serialized.join('') : undefined;\n}\nfunction repeatString(target, count) {\n if (count <= 0) {\n return '';\n }\n if (count === 1) {\n return target;\n }\n return target + repeatString(target, count - 1);\n}\nexport function serializeRuleEntries(options, ruleEntries) {\n if (!ruleEntries) {\n return '';\n }\n var allEntries = [];\n for (var entry in ruleEntries) {\n if (ruleEntries.hasOwnProperty(entry) && entry !== DISPLAY_NAME && ruleEntries[entry] !== undefined) {\n allEntries.push(entry, ruleEntries[entry]);\n }\n }\n // Apply transforms.\n for (var i = 0; i < allEntries.length; i += 2) {\n kebabRules(allEntries, i);\n provideUnits(allEntries, i);\n rtlifyRules(options, allEntries, i);\n prefixRules(allEntries, i);\n }\n // Apply punctuation.\n for (var i = 1; i < allEntries.length; i += 4) {\n allEntries.splice(i, 1, ':', allEntries[i], ';');\n }\n return allEntries.join('');\n}\nexport function styleToRegistration(options) {\n var args = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n args[_i - 1] = arguments[_i];\n }\n var rules = extractRules(args);\n var key = getKeyForRules(options, rules);\n if (key) {\n var stylesheet = Stylesheet.getInstance();\n var registration = {\n className: stylesheet.classNameFromKey(key),\n key: key,\n args: args,\n };\n if (!registration.className) {\n registration.className = stylesheet.getClassName(getDisplayName(rules));\n var rulesToInsert = [];\n for (var _a = 0, _b = rules.__order; _a < _b.length; _a++) {\n var selector = _b[_a];\n rulesToInsert.push(selector, serializeRuleEntries(options, rules[selector]));\n }\n registration.rulesToInsert = rulesToInsert;\n }\n return registration;\n }\n return undefined;\n}\n/**\n * Insert style to stylesheet.\n * @param registration Style registration.\n * @param specificityMultiplier Number of times classname selector is repeated in the css rule.\n * This is to increase css specificity in case it's needed. Default to 1.\n */\nexport function applyRegistration(registration, specificityMultiplier) {\n if (specificityMultiplier === void 0) { specificityMultiplier = 1; }\n var stylesheet = Stylesheet.getInstance();\n var className = registration.className, key = registration.key, args = registration.args, rulesToInsert = registration.rulesToInsert;\n if (rulesToInsert) {\n // rulesToInsert is an ordered array of selector/rule pairs.\n for (var i = 0; i < rulesToInsert.length; i += 2) {\n var rules = rulesToInsert[i + 1];\n if (rules) {\n var selector = rulesToInsert[i];\n selector = selector.replace(/&/g, repeatString(\".\".concat(registration.className), specificityMultiplier));\n // Insert. Note if a media query, we must close the query with a final bracket.\n var processedRule = \"\".concat(selector, \"{\").concat(rules, \"}\").concat(selector.indexOf('@') === 0 ? '}' : '');\n stylesheet.insertRule(processedRule);\n }\n }\n stylesheet.cacheClassName(className, key, args, rulesToInsert);\n }\n}\nexport function styleToClassName(options) {\n var args = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n args[_i - 1] = arguments[_i];\n }\n var registration = styleToRegistration.apply(void 0, __spreadArray([options], args, false));\n if (registration) {\n applyRegistration(registration, options.specificityMultiplier);\n return registration.className;\n }\n return '';\n}\n//# sourceMappingURL=styleToClassName.js.map","import { extractStyleParts } from './extractStyleParts';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { styleToClassName } from './styleToClassName';\n/**\n * Concatenation helper, which can merge class names together. Skips over falsey values.\n *\n * @public\n */\nexport function mergeStyles() {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return mergeCss(args, getStyleOptions());\n}\n/**\n * Concatenation helper, which can merge class names together. Skips over falsey values.\n * Accepts a set of options that will be used when calculating styles.\n *\n * @public\n */\nexport function mergeCss(args, options) {\n var styleArgs = args instanceof Array ? args : [args];\n var _a = extractStyleParts(styleArgs), classes = _a.classes, objects = _a.objects;\n if (objects.length) {\n classes.push(styleToClassName(options || {}, objects));\n }\n return classes.join(' ');\n}\n//# sourceMappingURL=mergeStyles.js.map","import { __spreadArray } from \"tslib\";\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSets - One or more stylesets to be merged (each param can also be falsy).\n */\nexport function concatStyleSets() {\n var styleSets = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n styleSets[_i] = arguments[_i];\n }\n if (styleSets && styleSets.length === 1 && styleSets[0] && !styleSets[0].subComponentStyles) {\n return styleSets[0];\n }\n var mergedSet = {};\n // We process sub component styles in two phases. First we collect them, then we combine them into 1 style function.\n var workingSubcomponentStyles = {};\n for (var _a = 0, styleSets_1 = styleSets; _a < styleSets_1.length; _a++) {\n var currentSet = styleSets_1[_a];\n if (currentSet) {\n for (var prop in currentSet) {\n if (currentSet.hasOwnProperty(prop)) {\n if (prop === 'subComponentStyles' && currentSet.subComponentStyles !== undefined) {\n // subcomponent styles - style functions or objects\n var currentComponentStyles = currentSet.subComponentStyles;\n for (var subCompProp in currentComponentStyles) {\n if (currentComponentStyles.hasOwnProperty(subCompProp)) {\n if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {\n workingSubcomponentStyles[subCompProp].push(currentComponentStyles[subCompProp]);\n }\n else {\n workingSubcomponentStyles[subCompProp] = [currentComponentStyles[subCompProp]];\n }\n }\n }\n continue;\n }\n // the as any casts below is a workaround for ts 2.8.\n // todo: remove cast to any in ts 2.9.\n var mergedValue = mergedSet[prop];\n var currentValue = currentSet[prop];\n if (mergedValue === undefined) {\n mergedSet[prop] = currentValue;\n }\n else {\n mergedSet[prop] = __spreadArray(__spreadArray([], (Array.isArray(mergedValue) ? mergedValue : [mergedValue]), true), (Array.isArray(currentValue) ? currentValue : [currentValue]), true);\n }\n }\n }\n }\n }\n if (Object.keys(workingSubcomponentStyles).length > 0) {\n mergedSet.subComponentStyles = {};\n var mergedSubStyles = mergedSet.subComponentStyles;\n var _loop_1 = function (subCompProp) {\n if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {\n var workingSet_1 = workingSubcomponentStyles[subCompProp];\n mergedSubStyles[subCompProp] = function (styleProps) {\n return concatStyleSets.apply(void 0, workingSet_1.map(function (styleFunctionOrObject) {\n return typeof styleFunctionOrObject === 'function' ? styleFunctionOrObject(styleProps) : styleFunctionOrObject;\n }));\n };\n }\n };\n // now we process the subcomponent styles if there are any\n for (var subCompProp in workingSubcomponentStyles) {\n _loop_1(subCompProp);\n }\n }\n return mergedSet;\n}\n//# sourceMappingURL=concatStyleSets.js.map","import { concatStyleSets } from './concatStyleSets';\nimport { extractStyleParts } from './extractStyleParts';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { applyRegistration, styleToRegistration } from './styleToClassName';\n/**\n * Takes in one or more style set objects, each consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeStyles` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n */\nexport function mergeStyleSets() {\n var styleSets = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n styleSets[_i] = arguments[_i];\n }\n return mergeCssSets(styleSets, getStyleOptions());\n}\n/**\n * Takes in one or more style set objects, each1consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeCss` for each property in the object, but ensures the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(styleSets, options) {\n var classNameSet = { subComponentStyles: {} };\n var styleSet = styleSets[0];\n if (!styleSet && styleSets.length <= 1) {\n return { subComponentStyles: {} };\n }\n var concatenatedStyleSet = concatStyleSets.apply(void 0, styleSets);\n var registrations = [];\n for (var styleSetArea in concatenatedStyleSet) {\n if (concatenatedStyleSet.hasOwnProperty(styleSetArea)) {\n if (styleSetArea === 'subComponentStyles') {\n classNameSet.subComponentStyles = concatenatedStyleSet.subComponentStyles || {};\n continue;\n }\n var styles = concatenatedStyleSet[styleSetArea];\n var _a = extractStyleParts(styles), classes = _a.classes, objects = _a.objects;\n if (objects === null || objects === void 0 ? void 0 : objects.length) {\n var registration = styleToRegistration(options || {}, { displayName: styleSetArea }, objects);\n if (registration) {\n registrations.push(registration);\n // FIXME: classNameSet invalid types - exposed in TS 4.5 - cast needed\n classNameSet[styleSetArea] = classes.concat([registration.className]).join(' ');\n }\n }\n else {\n // FIXME: classNameSet invalid types - exposed in TS 4.5 - cast needed\n classNameSet[styleSetArea] = classes.join(' ');\n }\n }\n }\n for (var _i = 0, registrations_1 = registrations; _i < registrations_1.length; _i++) {\n var registration = registrations_1[_i];\n if (registration) {\n applyRegistration(registration, options === null || options === void 0 ? void 0 : options.specificityMultiplier);\n }\n }\n return classNameSet;\n}\n//# sourceMappingURL=mergeStyleSets.js.map","import { concatStyleSets } from './concatStyleSets';\n/**\n * Concatenates style sets into one, but resolves functional sets using the given props.\n * @param styleProps - Props used to resolve functional sets.\n * @param allStyles - Style sets, which can be functions or objects.\n */\nexport function concatStyleSetsWithProps(styleProps) {\n var allStyles = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n allStyles[_i - 1] = arguments[_i];\n }\n var result = [];\n for (var _a = 0, allStyles_1 = allStyles; _a < allStyles_1.length; _a++) {\n var styles = allStyles_1[_a];\n if (styles) {\n result.push(typeof styles === 'function' ? styles(styleProps) : styles);\n }\n }\n if (result.length === 1) {\n return result[0];\n }\n else if (result.length) {\n // cliffkoh: I cannot figure out how to avoid the cast to any here.\n // It is something to do with the use of Omit in IStyleSet.\n // It might not be necessary once Omit becomes part of lib.d.ts (when we remove our own Omit and rely on\n // the official version).\n return concatStyleSets.apply(void 0, result);\n }\n return {};\n}\n//# sourceMappingURL=concatStyleSetsWithProps.js.map","import { getStyleOptions } from './StyleOptionsState';\nimport { Stylesheet } from './Stylesheet';\nimport { serializeRuleEntries } from './styleToClassName';\n/**\n * Registers a font face.\n * @public\n */\nexport function fontFace(font) {\n var stylesheet = Stylesheet.getInstance();\n var rule = serializeRuleEntries(getStyleOptions(), font);\n var className = stylesheet.classNameFromKey(rule);\n if (className) {\n return;\n }\n var name = stylesheet.getClassName();\n stylesheet.insertRule(\"@font-face{\".concat(rule, \"}\"), true);\n stylesheet.cacheClassName(name, rule, [], ['font-face', rule]);\n}\n//# sourceMappingURL=fontFace.js.map","import { getStyleOptions } from './StyleOptionsState';\nimport { Stylesheet } from './Stylesheet';\nimport { serializeRuleEntries } from './styleToClassName';\n/**\n * Registers keyframe definitions.\n *\n * @public\n */\nexport function keyframes(timeline) {\n var stylesheet = Stylesheet.getInstance();\n var rulesArray = [];\n for (var prop in timeline) {\n if (timeline.hasOwnProperty(prop)) {\n rulesArray.push(prop, '{', serializeRuleEntries(getStyleOptions(), timeline[prop]), '}');\n }\n }\n var rules = rulesArray.join('');\n var className = stylesheet.classNameFromKey(rules);\n if (className) {\n return className;\n }\n var name = stylesheet.getClassName();\n stylesheet.insertRule(\"@keyframes \".concat(name, \"{\").concat(rules, \"}\"), true);\n stylesheet.cacheClassName(name, rules, [], ['keyframes', rules]);\n return name;\n}\n//# sourceMappingURL=keyframes.js.map","import { mergeStyles } from '../MergeStyles';\n/**\n * Builds a class names object from a given map.\n *\n * @param styles - Map of unprocessed styles.\n * @returns Map of property name to class name.\n */\nexport function buildClassMap(styles) {\n var classes = {};\n var _loop_1 = function (styleName) {\n if (styles.hasOwnProperty(styleName)) {\n var className_1;\n Object.defineProperty(classes, styleName, {\n get: function () {\n if (className_1 === undefined) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n className_1 = mergeStyles(styles[styleName]).toString();\n }\n return className_1;\n },\n enumerable: true,\n configurable: true,\n });\n }\n };\n for (var styleName in styles) {\n _loop_1(styleName);\n }\n return classes;\n}\n//# sourceMappingURL=buildClassMap.js.map","/**\n * Verifies if an application can use DOM.\n */\nexport function canUseDOM() {\n return (typeof window !== 'undefined' &&\n !!(window.document &&\n // eslint-disable-next-line deprecation/deprecation\n window.document.createElement));\n}\n//# sourceMappingURL=canUseDOM.js.map","import { canUseDOM } from './canUseDOM';\nvar _window = undefined;\n// Note: Accessing \"window\" in IE11 is somewhat expensive, and calling \"typeof window\"\n// hits a memory leak, whereas aliasing it and calling \"typeof _window\" does not.\n// Caching the window value at the file scope lets us minimize the impact.\ntry {\n _window = window;\n}\ncatch (e) {\n /* no-op */\n}\n/**\n * Helper to get the window object. The helper will make sure to use a cached variable\n * of \"window\", to avoid overhead and memory leaks in IE11. Note that in popup scenarios the\n * window object won't match the \"global\" window object, and for these scenarios, you should\n * pass in an element hosted within the popup.\n *\n * @public\n */\nexport function getWindow(rootElement) {\n if (!canUseDOM() || typeof _window === 'undefined') {\n return undefined;\n }\n else {\n var el = rootElement;\n return el && el.ownerDocument && el.ownerDocument.defaultView ? el.ownerDocument.defaultView : _window;\n }\n}\n//# sourceMappingURL=getWindow.js.map","import { getWindow } from './dom/getWindow';\n/**\n * Bugs often appear in async code when stuff gets disposed, but async operations don't get canceled.\n * This Async helper class solves these issues by tying async code to the lifetime of a disposable object.\n *\n * Usage: Anything class extending from BaseModel can access this helper via this.async. Otherwise create a\n * new instance of the class and remember to call dispose() during your code's dispose handler.\n *\n * @public\n */\nvar Async = /** @class */ (function () {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n function Async(parent, onError) {\n this._timeoutIds = null;\n this._immediateIds = null;\n this._intervalIds = null;\n this._animationFrameIds = null;\n this._isDisposed = false;\n this._parent = parent || null;\n this._onErrorHandler = onError;\n this._noop = function () {\n /* do nothing */\n };\n }\n /**\n * Dispose function, clears all async operations.\n */\n Async.prototype.dispose = function () {\n var id;\n this._isDisposed = true;\n this._parent = null;\n // Clear timeouts.\n if (this._timeoutIds) {\n for (id in this._timeoutIds) {\n if (this._timeoutIds.hasOwnProperty(id)) {\n this.clearTimeout(parseInt(id, 10));\n }\n }\n this._timeoutIds = null;\n }\n // Clear immediates.\n if (this._immediateIds) {\n for (id in this._immediateIds) {\n if (this._immediateIds.hasOwnProperty(id)) {\n this.clearImmediate(parseInt(id, 10));\n }\n }\n this._immediateIds = null;\n }\n // Clear intervals.\n if (this._intervalIds) {\n for (id in this._intervalIds) {\n if (this._intervalIds.hasOwnProperty(id)) {\n this.clearInterval(parseInt(id, 10));\n }\n }\n this._intervalIds = null;\n }\n // Clear animation frames.\n if (this._animationFrameIds) {\n for (id in this._animationFrameIds) {\n if (this._animationFrameIds.hasOwnProperty(id)) {\n this.cancelAnimationFrame(parseInt(id, 10));\n }\n }\n this._animationFrameIds = null;\n }\n };\n /**\n * SetTimeout override, which will auto cancel the timeout during dispose.\n * @param callback - Callback to execute.\n * @param duration - Duration in milliseconds.\n * @returns The setTimeout id.\n */\n Async.prototype.setTimeout = function (callback, duration) {\n var _this = this;\n var timeoutId = 0;\n if (!this._isDisposed) {\n if (!this._timeoutIds) {\n this._timeoutIds = {};\n }\n timeoutId = setTimeout(function () {\n // Time to execute the timeout, enqueue it as a foreground task to be executed.\n try {\n // Now delete the record and call the callback.\n if (_this._timeoutIds) {\n delete _this._timeoutIds[timeoutId];\n }\n callback.apply(_this._parent);\n }\n catch (e) {\n _this._logError(e);\n }\n }, duration);\n this._timeoutIds[timeoutId] = true;\n }\n return timeoutId;\n };\n /**\n * Clears the timeout.\n * @param id - Id to cancel.\n */\n Async.prototype.clearTimeout = function (id) {\n if (this._timeoutIds && this._timeoutIds[id]) {\n clearTimeout(id);\n delete this._timeoutIds[id];\n }\n };\n /**\n * SetImmediate override, which will auto cancel the immediate during dispose.\n * @param callback - Callback to execute.\n * @param targetElement - Optional target element to use for identifying the correct window.\n * @returns The setTimeout id.\n */\n Async.prototype.setImmediate = function (callback, targetElement) {\n var _this = this;\n var immediateId = 0;\n var win = getWindow(targetElement);\n if (!this._isDisposed) {\n if (!this._immediateIds) {\n this._immediateIds = {};\n }\n var setImmediateCallback = function () {\n // Time to execute the timeout, enqueue it as a foreground task to be executed.\n try {\n // Now delete the record and call the callback.\n if (_this._immediateIds) {\n delete _this._immediateIds[immediateId];\n }\n callback.apply(_this._parent);\n }\n catch (e) {\n _this._logError(e);\n }\n };\n immediateId = win.setTimeout(setImmediateCallback, 0);\n this._immediateIds[immediateId] = true;\n }\n return immediateId;\n };\n /**\n * Clears the immediate.\n * @param id - Id to cancel.\n * @param targetElement - Optional target element to use for identifying the correct window.\n */\n Async.prototype.clearImmediate = function (id, targetElement) {\n var win = getWindow(targetElement);\n if (this._immediateIds && this._immediateIds[id]) {\n win.clearTimeout(id);\n delete this._immediateIds[id];\n }\n };\n /**\n * SetInterval override, which will auto cancel the timeout during dispose.\n * @param callback - Callback to execute.\n * @param duration - Duration in milliseconds.\n * @returns The setTimeout id.\n */\n Async.prototype.setInterval = function (callback, duration) {\n var _this = this;\n var intervalId = 0;\n if (!this._isDisposed) {\n if (!this._intervalIds) {\n this._intervalIds = {};\n }\n intervalId = setInterval(function () {\n // Time to execute the interval callback, enqueue it as a foreground task to be executed.\n try {\n callback.apply(_this._parent);\n }\n catch (e) {\n _this._logError(e);\n }\n }, duration);\n this._intervalIds[intervalId] = true;\n }\n return intervalId;\n };\n /**\n * Clears the interval.\n * @param id - Id to cancel.\n */\n Async.prototype.clearInterval = function (id) {\n if (this._intervalIds && this._intervalIds[id]) {\n clearInterval(id);\n delete this._intervalIds[id];\n }\n };\n /**\n * Creates a function that, when executed, will only call the func function at most once per\n * every wait milliseconds. Provide an options object to indicate that func should be invoked\n * on the leading and/or trailing edge of the wait timeout. Subsequent calls to the throttled\n * function will return the result of the last func call.\n *\n * Note: If leading and trailing options are true func will be called on the trailing edge of\n * the timeout only if the throttled function is invoked more than once during the wait timeout.\n *\n * @param func - The function to throttle.\n * @param wait - The number of milliseconds to throttle executions to. Defaults to 0.\n * @param options - The options object.\n * @returns The new throttled function.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Async.prototype.throttle = function (func, wait, options) {\n var _this = this;\n if (this._isDisposed) {\n return this._noop;\n }\n var waitMS = wait || 0;\n var leading = true;\n var trailing = true;\n var lastExecuteTime = 0;\n var lastResult;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var lastArgs;\n var timeoutId = null;\n if (options && typeof options.leading === 'boolean') {\n leading = options.leading;\n }\n if (options && typeof options.trailing === 'boolean') {\n trailing = options.trailing;\n }\n var callback = function (userCall) {\n var now = Date.now();\n var delta = now - lastExecuteTime;\n var waitLength = leading ? waitMS - delta : waitMS;\n if (delta >= waitMS && (!userCall || leading)) {\n lastExecuteTime = now;\n if (timeoutId) {\n _this.clearTimeout(timeoutId);\n timeoutId = null;\n }\n lastResult = func.apply(_this._parent, lastArgs);\n }\n else if (timeoutId === null && trailing) {\n timeoutId = _this.setTimeout(callback, waitLength);\n }\n return lastResult;\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var resultFunction = (function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n lastArgs = args;\n return callback(true);\n });\n return resultFunction;\n };\n /**\n * Creates a function that will delay the execution of func until after wait milliseconds have\n * elapsed since the last time it was invoked. Provide an options object to indicate that func\n * should be invoked on the leading and/or trailing edge of the wait timeout. Subsequent calls\n * to the debounced function will return the result of the last func call.\n *\n * Note: If leading and trailing options are true func will be called on the trailing edge of\n * the timeout only if the debounced function is invoked more than once during the wait\n * timeout.\n *\n * @param func - The function to debounce.\n * @param wait - The number of milliseconds to delay.\n * @param options - The options object.\n * @returns The new debounced function.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Async.prototype.debounce = function (func, wait, options) {\n var _this = this;\n if (this._isDisposed) {\n var noOpFunction = (function () {\n /** Do nothing */\n });\n noOpFunction.cancel = function () {\n return;\n };\n noOpFunction.flush = (function () { return null; });\n noOpFunction.pending = function () { return false; };\n return noOpFunction;\n }\n var waitMS = wait || 0;\n var leading = false;\n var trailing = true;\n var maxWait = null;\n var lastCallTime = 0;\n var lastExecuteTime = Date.now();\n var lastResult;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var lastArgs;\n var timeoutId = null;\n if (options && typeof options.leading === 'boolean') {\n leading = options.leading;\n }\n if (options && typeof options.trailing === 'boolean') {\n trailing = options.trailing;\n }\n if (options && typeof options.maxWait === 'number' && !isNaN(options.maxWait)) {\n maxWait = options.maxWait;\n }\n var markExecuted = function (time) {\n if (timeoutId) {\n _this.clearTimeout(timeoutId);\n timeoutId = null;\n }\n lastExecuteTime = time;\n };\n var invokeFunction = function (time) {\n markExecuted(time);\n lastResult = func.apply(_this._parent, lastArgs);\n };\n var callback = function (userCall) {\n var now = Date.now();\n var executeImmediately = false;\n if (userCall) {\n if (leading && now - lastCallTime >= waitMS) {\n executeImmediately = true;\n }\n lastCallTime = now;\n }\n var delta = now - lastCallTime;\n var waitLength = waitMS - delta;\n var maxWaitDelta = now - lastExecuteTime;\n var maxWaitExpired = false;\n if (maxWait !== null) {\n // maxWait only matters when there is a pending callback\n if (maxWaitDelta >= maxWait && timeoutId) {\n maxWaitExpired = true;\n }\n else {\n waitLength = Math.min(waitLength, maxWait - maxWaitDelta);\n }\n }\n if (delta >= waitMS || maxWaitExpired || executeImmediately) {\n invokeFunction(now);\n }\n else if ((timeoutId === null || !userCall) && trailing) {\n timeoutId = _this.setTimeout(callback, waitLength);\n }\n return lastResult;\n };\n var pending = function () {\n return !!timeoutId;\n };\n var cancel = function () {\n if (pending()) {\n // Mark the debounced function as having executed\n markExecuted(Date.now());\n }\n };\n var flush = function () {\n if (pending()) {\n invokeFunction(Date.now());\n }\n return lastResult;\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var resultFunction = (function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n lastArgs = args;\n return callback(true);\n });\n resultFunction.cancel = cancel;\n resultFunction.flush = flush;\n resultFunction.pending = pending;\n return resultFunction;\n };\n Async.prototype.requestAnimationFrame = function (callback, targetElement) {\n var _this = this;\n var animationFrameId = 0;\n var win = getWindow(targetElement);\n if (!this._isDisposed) {\n if (!this._animationFrameIds) {\n this._animationFrameIds = {};\n }\n var animationFrameCallback = function () {\n try {\n // Now delete the record and call the callback.\n if (_this._animationFrameIds) {\n delete _this._animationFrameIds[animationFrameId];\n }\n callback.apply(_this._parent);\n }\n catch (e) {\n _this._logError(e);\n }\n };\n animationFrameId = win.requestAnimationFrame\n ? win.requestAnimationFrame(animationFrameCallback)\n : win.setTimeout(animationFrameCallback, 0);\n this._animationFrameIds[animationFrameId] = true;\n }\n return animationFrameId;\n };\n Async.prototype.cancelAnimationFrame = function (id, targetElement) {\n var win = getWindow(targetElement);\n if (this._animationFrameIds && this._animationFrameIds[id]) {\n win.cancelAnimationFrame ? win.cancelAnimationFrame(id) : win.clearTimeout(id);\n delete this._animationFrameIds[id];\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Async.prototype._logError = function (e) {\n if (this._onErrorHandler) {\n this._onErrorHandler(e);\n }\n };\n return Async;\n}());\nexport { Async };\n//# sourceMappingURL=Async.js.map","/**\n * Compares a to b and b to a.\n *\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function shallowCompare(a, b) {\n if (!a || !b) {\n // only return true if both a and b are falsy\n return !a && !b;\n }\n for (var propName in a) {\n if (a.hasOwnProperty(propName)) {\n if (!b.hasOwnProperty(propName) || b[propName] !== a[propName]) {\n return false;\n }\n }\n }\n for (var propName in b) {\n if (b.hasOwnProperty(propName)) {\n if (!a.hasOwnProperty(propName)) {\n return false;\n }\n }\n }\n return true;\n}\n/**\n * Makes a resulting merge of a bunch of objects. Pass in the target object followed by 1 or more\n * objects as arguments and they will be merged sequentially into the target. Note that this will\n * shallow merge; it will not create new cloned values for target members.\n *\n * @public\n * @param target - Target object to merge following object arguments into.\n * @param args - One or more objects that will be mixed into the target in the order they are provided.\n * @returns Resulting merged target.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function assign(target) {\n var args = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n args[_i - 1] = arguments[_i];\n }\n return filteredAssign.apply(this, [null, target].concat(args));\n}\n/**\n * Makes a resulting merge of a bunch of objects, but allows a filter function to be passed in to filter\n * the resulting merges. This allows for scenarios where you want to merge \"everything except that one thing\"\n * or \"properties that start with data-\". Note that this will shallow merge; it will not create new cloned\n * values for target members.\n *\n * @public\n * @param isAllowed - Callback to determine if the given propName is allowed in the result.\n * @param target - Target object to merge following object arguments into.\n * @param args - One or more objects that will be mixed into the target in the order they are provided.\n * @returns Resulting merged target.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function filteredAssign(isAllowed, target) {\n var args = [];\n for (var _i = 2; _i < arguments.length; _i++) {\n args[_i - 2] = arguments[_i];\n }\n target = target || {};\n for (var _a = 0, args_1 = args; _a < args_1.length; _a++) {\n var sourceObject = args_1[_a];\n if (sourceObject) {\n for (var propName in sourceObject) {\n if (sourceObject.hasOwnProperty(propName) && (!isAllowed || isAllowed(propName))) {\n target[propName] = sourceObject[propName];\n }\n }\n }\n }\n return target;\n}\n/**\n * Takes an enum and iterates over each value of the enum (as a string), running the callback on each,\n * returning a mapped array.\n * @param theEnum - Enum to iterate over\n * @param callback - The first parameter the name of the entry, and the second parameter is the value\n * of that entry, which is the value you'd normally use when using the enum (usually a number).\n */\nexport function mapEnumByName(\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntheEnum, callback) {\n // map to satisfy compiler since it doesn't realize we strip out undefineds in the .filter() call\n return Object.keys(theEnum)\n .map(function (p) {\n // map on each property name as a string\n if (String(Number(p)) !== p) {\n // if the property is not just a number (because enums in TypeScript will map both ways)\n return callback(p, theEnum[p]);\n }\n return undefined;\n })\n .filter(function (v) { return !!v; }); // only return elements with values\n}\n/**\n * Get all values in an object dictionary\n *\n * @param obj - The dictionary to get values for\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function values(obj) {\n return Object.keys(obj).reduce(function (arr, key) {\n arr.push(obj[key]);\n return arr;\n }, []);\n}\n/**\n * Tiny helper to do the minimal amount of work in duplicating an object but omitting some\n * props. This ends up faster than using object ...rest or reduce to filter.\n *\n * This behaves very much like filteredAssign, but does not merge many objects together,\n * uses an exclusion object map, and avoids spreads all for optimal performance.\n *\n * See perf test for background:\n * https://jsperf.com/omit-vs-rest-vs-reduce/1\n *\n * @param obj - The object to clone\n * @param exclusions - The array of keys to exclude\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function omit(obj, exclusions) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var result = {};\n for (var key in obj) {\n if (exclusions.indexOf(key) === -1 && obj.hasOwnProperty(key)) {\n result[key] = obj[key];\n }\n }\n return result;\n}\n//# sourceMappingURL=object.js.map","import { assign } from './object';\n/** An instance of EventGroup allows anything with a handle to it to trigger events on it.\n * If the target is an HTMLElement, the event will be attached to the element and can be\n * triggered as usual (like clicking for onClick).\n * The event can be triggered by calling EventGroup.raise() here. If the target is an\n * HTMLElement, the event gets raised and is handled by the browser. Otherwise, it gets\n * handled here in EventGroup, and the handler is called in the context of the parent\n * (which is passed in in the constructor).\n *\n * @public\n * {@docCategory EventGroup}\n */\nvar EventGroup = /** @class */ (function () {\n /** parent: the context in which events attached to non-HTMLElements are called */\n function EventGroup(parent) {\n this._id = EventGroup._uniqueId++;\n this._parent = parent;\n this._eventRecords = [];\n }\n /** For IE8, bubbleEvent is ignored here and must be dealt with by the handler.\n * Events raised here by default have bubbling set to false and cancelable set to true.\n * This applies also to built-in events being raised manually here on HTMLElements,\n * which may lead to unexpected behavior if it differs from the defaults.\n *\n */\n EventGroup.raise = function (target, eventName, eventArgs, bubbleEvent) {\n var retVal;\n if (EventGroup._isElement(target)) {\n if (typeof document !== 'undefined' && document.createEvent) {\n var ev = document.createEvent('HTMLEvents');\n // eslint-disable-next-line deprecation/deprecation\n ev.initEvent(eventName, bubbleEvent || false, true);\n assign(ev, eventArgs);\n retVal = target.dispatchEvent(ev);\n }\n else if (typeof document !== 'undefined' && document.createEventObject) {\n // IE8\n var evObj = document.createEventObject(eventArgs);\n // cannot set cancelBubble on evObj, fireEvent will overwrite it\n target.fireEvent('on' + eventName, evObj);\n }\n }\n else {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore -- FIXME: strictBindCallApply error - https://github.com/microsoft/fluentui/issues/17331\n while (target && retVal !== false) {\n var events = target.__events__;\n var eventRecords = events ? events[eventName] : null;\n if (eventRecords) {\n for (var id in eventRecords) {\n if (eventRecords.hasOwnProperty(id)) {\n var eventRecordList = eventRecords[id];\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore -- FIXME: strictBindCallApply error - https://github.com/microsoft/fluentui/issues/17331\n for (var listIndex = 0; retVal !== false && listIndex < eventRecordList.length; listIndex++) {\n var record = eventRecordList[listIndex];\n if (record.objectCallback) {\n retVal = record.objectCallback.call(record.parent, eventArgs);\n }\n }\n }\n }\n }\n // If the target has a parent, bubble the event up.\n target = bubbleEvent ? target.parent : null;\n }\n }\n return retVal;\n };\n EventGroup.isObserved = function (target, eventName) {\n var events = target && target.__events__;\n return !!events && !!events[eventName];\n };\n /** Check to see if the target has declared support of the given event. */\n EventGroup.isDeclared = function (target, eventName) {\n var declaredEvents = target && target.__declaredEvents;\n return !!declaredEvents && !!declaredEvents[eventName];\n };\n EventGroup.stopPropagation = function (event) {\n if (event.stopPropagation) {\n event.stopPropagation();\n }\n else {\n // IE8\n event.cancelBubble = true;\n }\n };\n EventGroup._isElement = function (target) {\n return (!!target && (!!target.addEventListener || (typeof HTMLElement !== 'undefined' && target instanceof HTMLElement)));\n };\n EventGroup.prototype.dispose = function () {\n if (!this._isDisposed) {\n this._isDisposed = true;\n this.off();\n this._parent = null;\n }\n };\n /** On the target, attach a set of events, where the events object is a name to function mapping. */\n EventGroup.prototype.onAll = function (target, events, useCapture) {\n for (var eventName in events) {\n if (events.hasOwnProperty(eventName)) {\n this.on(target, eventName, events[eventName], useCapture);\n }\n }\n };\n /**\n * On the target, attach an event whose handler will be called in the context of the parent\n * of this instance of EventGroup.\n */\n EventGroup.prototype.on = function (target, eventName, callback, options) {\n var _this = this;\n if (eventName.indexOf(',') > -1) {\n var events = eventName.split(/[ ,]+/);\n for (var i = 0; i < events.length; i++) {\n this.on(target, events[i], callback, options);\n }\n }\n else {\n var parent_1 = this._parent;\n var eventRecord = {\n target: target,\n eventName: eventName,\n parent: parent_1,\n callback: callback,\n options: options,\n };\n // Initialize and wire up the record on the target, so that it can call the callback if the event fires.\n var events = (target.__events__ = target.__events__ || {});\n events[eventName] =\n events[eventName] ||\n {\n count: 0,\n };\n events[eventName][this._id] = events[eventName][this._id] || [];\n events[eventName][this._id].push(eventRecord);\n events[eventName].count++;\n if (EventGroup._isElement(target)) {\n var processElementEvent = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n if (_this._isDisposed) {\n return;\n }\n var result;\n try {\n result = callback.apply(parent_1, args);\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore -- FIXME: strictBindCallApply error - https://github.com/microsoft/fluentui/issues/17331\n if (result === false && args[0]) {\n var e = args[0];\n if (e.preventDefault) {\n e.preventDefault();\n }\n if (e.stopPropagation) {\n e.stopPropagation();\n }\n e.cancelBubble = true;\n }\n }\n catch (e) {\n // ignore\n }\n return result;\n };\n eventRecord.elementCallback = processElementEvent;\n if (target.addEventListener) {\n target.addEventListener(eventName, processElementEvent, options);\n }\n else if (target.attachEvent) {\n // IE8\n target.attachEvent('on' + eventName, processElementEvent);\n }\n }\n else {\n var processObjectEvent = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n if (_this._isDisposed) {\n return;\n }\n return callback.apply(parent_1, args);\n };\n eventRecord.objectCallback = processObjectEvent;\n }\n // Remember the record locally, so that it can be removed.\n this._eventRecords.push(eventRecord);\n }\n };\n EventGroup.prototype.off = function (target, eventName, callback, options) {\n for (var i = 0; i < this._eventRecords.length; i++) {\n var eventRecord = this._eventRecords[i];\n if ((!target || target === eventRecord.target) &&\n (!eventName || eventName === eventRecord.eventName) &&\n (!callback || callback === eventRecord.callback) &&\n (typeof options !== 'boolean' || options === eventRecord.options)) {\n var events = eventRecord.target.__events__;\n var targetArrayLookup = events[eventRecord.eventName];\n var targetArray = targetArrayLookup ? targetArrayLookup[this._id] : null;\n // We may have already target's entries, so check for null.\n if (targetArray) {\n if (targetArray.length === 1 || !callback) {\n targetArrayLookup.count -= targetArray.length;\n delete events[eventRecord.eventName][this._id];\n }\n else {\n targetArrayLookup.count--;\n targetArray.splice(targetArray.indexOf(eventRecord), 1);\n }\n if (!targetArrayLookup.count) {\n delete events[eventRecord.eventName];\n }\n }\n if (eventRecord.elementCallback) {\n if (eventRecord.target.removeEventListener) {\n eventRecord.target.removeEventListener(eventRecord.eventName, eventRecord.elementCallback, eventRecord.options);\n }\n else if (eventRecord.target.detachEvent) {\n // IE8\n eventRecord.target.detachEvent('on' + eventRecord.eventName, eventRecord.elementCallback);\n }\n }\n this._eventRecords.splice(i--, 1);\n }\n }\n };\n /** Trigger the given event in the context of this instance of EventGroup. */\n EventGroup.prototype.raise = function (eventName, eventArgs, bubbleEvent) {\n return EventGroup.raise(this._parent, eventName, eventArgs, bubbleEvent);\n };\n /** Declare an event as being supported by this instance of EventGroup. */\n EventGroup.prototype.declare = function (event) {\n var declaredEvents = (this._parent.__declaredEvents = this._parent.__declaredEvents || {});\n if (typeof event === 'string') {\n declaredEvents[event] = true;\n }\n else {\n for (var i = 0; i < event.length; i++) {\n declaredEvents[event[i]] = true;\n }\n }\n };\n EventGroup._uniqueId = 0;\n return EventGroup;\n}());\nexport { EventGroup };\n//# sourceMappingURL=EventGroup.js.map","import { canUseDOM } from './canUseDOM';\n/**\n * Helper to get the document object. Note that in popup window cases, document\n * might be the wrong document, which is why we look at ownerDocument for the\n * truth.\n *\n * @public\n */\nexport function getDocument(rootElement) {\n if (!canUseDOM() || typeof document === 'undefined') {\n return undefined;\n }\n else {\n var el = rootElement;\n return el && el.ownerDocument ? el.ownerDocument : document;\n }\n}\n//# sourceMappingURL=getDocument.js.map","import { getDocument } from './dom/getDocument';\nimport { mergeStyles } from '@fluentui/merge-styles';\nimport { getWindow } from './dom/getWindow';\nvar _scrollbarWidth;\nvar _bodyScrollDisabledCount = 0;\nvar DisabledScrollClassName = mergeStyles({\n overflow: 'hidden !important',\n});\n/**\n * Placing this attribute on scrollable divs optimizes detection to know\n * if the div is scrollable or not (given we can avoid expensive operations\n * like getComputedStyle.)\n *\n * @public\n */\nexport var DATA_IS_SCROLLABLE_ATTRIBUTE = 'data-is-scrollable';\n/**\n * Allows the user to scroll within a element,\n * while preventing the user from scrolling the body\n */\nexport var allowScrollOnElement = function (element, events) {\n if (!element) {\n return;\n }\n var _previousClientY = 0;\n var _element = null;\n // remember the clientY for future calls of _preventOverscrolling\n var _saveClientY = function (event) {\n if (event.targetTouches.length === 1) {\n _previousClientY = event.targetTouches[0].clientY;\n }\n };\n // prevent the body from scrolling when the user attempts\n // to scroll past the top or bottom of the element\n var _preventOverscrolling = function (event) {\n // only respond to a single-finger touch\n if (event.targetTouches.length !== 1) {\n return;\n }\n // prevent the body touchmove handler from firing\n // so that scrolling is allowed within the element\n event.stopPropagation();\n if (!_element) {\n return;\n }\n var clientY = event.targetTouches[0].clientY - _previousClientY;\n var scrollableParent = findScrollableParent(event.target);\n if (scrollableParent) {\n _element = scrollableParent;\n }\n // if the element is scrolled to the top,\n // prevent the user from scrolling up\n if (_element.scrollTop === 0 && clientY > 0) {\n event.preventDefault();\n }\n // if the element is scrolled to the bottom,\n // prevent the user from scrolling down\n if (_element.scrollHeight - Math.ceil(_element.scrollTop) <= _element.clientHeight && clientY < 0) {\n event.preventDefault();\n }\n };\n events.on(element, 'touchstart', _saveClientY, { passive: false });\n events.on(element, 'touchmove', _preventOverscrolling, { passive: false });\n _element = element;\n};\n/**\n * Same as allowScrollOnElement but does not prevent overscrolling.\n */\nexport var allowOverscrollOnElement = function (element, events) {\n if (!element) {\n return;\n }\n var _allowElementScroll = function (event) {\n event.stopPropagation();\n };\n events.on(element, 'touchmove', _allowElementScroll, { passive: false });\n};\nvar _disableIosBodyScroll = function (event) {\n event.preventDefault();\n};\n/**\n * Disables the body scrolling.\n *\n * @public\n */\nexport function disableBodyScroll() {\n var doc = getDocument();\n if (doc && doc.body && !_bodyScrollDisabledCount) {\n doc.body.classList.add(DisabledScrollClassName);\n doc.body.addEventListener('touchmove', _disableIosBodyScroll, { passive: false, capture: false });\n }\n _bodyScrollDisabledCount++;\n}\n/**\n * Enables the body scrolling.\n *\n * @public\n */\nexport function enableBodyScroll() {\n if (_bodyScrollDisabledCount > 0) {\n var doc = getDocument();\n if (doc && doc.body && _bodyScrollDisabledCount === 1) {\n doc.body.classList.remove(DisabledScrollClassName);\n doc.body.removeEventListener('touchmove', _disableIosBodyScroll);\n }\n _bodyScrollDisabledCount--;\n }\n}\n/**\n * Calculates the width of a scrollbar for the browser/os.\n *\n * @public\n */\nexport function getScrollbarWidth() {\n if (_scrollbarWidth === undefined) {\n var scrollDiv = document.createElement('div');\n scrollDiv.style.setProperty('width', '100px');\n scrollDiv.style.setProperty('height', '100px');\n scrollDiv.style.setProperty('overflow', 'scroll');\n scrollDiv.style.setProperty('position', 'absolute');\n scrollDiv.style.setProperty('top', '-9999px');\n document.body.appendChild(scrollDiv);\n // Get the scrollbar width\n _scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;\n // Delete the DIV\n document.body.removeChild(scrollDiv);\n }\n return _scrollbarWidth;\n}\n/**\n * Traverses up the DOM for the element with the data-is-scrollable=true attribute, or returns\n * document.body.\n *\n * @public\n */\nexport function findScrollableParent(startingElement) {\n var el = startingElement;\n var doc = getDocument(startingElement);\n // First do a quick scan for the scrollable attribute.\n while (el && el !== doc.body) {\n if (el.getAttribute(DATA_IS_SCROLLABLE_ATTRIBUTE) === 'true') {\n return el;\n }\n el = el.parentElement;\n }\n // If we haven't found it, the use the slower method: compute styles to evaluate if overflow is set.\n el = startingElement;\n while (el && el !== doc.body) {\n if (el.getAttribute(DATA_IS_SCROLLABLE_ATTRIBUTE) !== 'false') {\n var computedStyles = getComputedStyle(el);\n var overflowY = computedStyles ? computedStyles.getPropertyValue('overflow-y') : '';\n if (overflowY && (overflowY === 'scroll' || overflowY === 'auto')) {\n return el;\n }\n }\n el = el.parentElement;\n }\n // Fall back to window scroll.\n if (!el || el === doc.body) {\n el = getWindow(startingElement);\n }\n return el;\n}\n//# sourceMappingURL=scroll.js.map","/**\n * Helper to get bounding client rect. Passing in window will get the window size.\n *\n * @public\n */\nexport function getRect(element) {\n var rect;\n if (element) {\n if (element === window) {\n rect = {\n left: 0,\n top: 0,\n width: window.innerWidth,\n height: window.innerHeight,\n right: window.innerWidth,\n bottom: window.innerHeight,\n };\n }\n else if (element.getBoundingClientRect) {\n rect = element.getBoundingClientRect();\n }\n }\n return rect;\n}\n//# sourceMappingURL=getRect.js.map","/* eslint-disable no-console */\nvar _warningCallback = undefined;\n/**\n * Sends a warning to console, if the api is present.\n *\n * @public\n * @param message - Warning message.\n */\nexport function warn(message) {\n if (_warningCallback && process.env.NODE_ENV !== 'production') {\n _warningCallback(message);\n }\n else if (console && console.warn) {\n console.warn(message);\n }\n}\n/**\n * Configures the warning callback. Passing in undefined will reset it to use the default\n * console.warn function.\n *\n * @public\n * @param warningCallback - Callback to override the generated warnings.\n */\nexport function setWarningCallback(warningCallback) {\n _warningCallback = warningCallback;\n}\n//# sourceMappingURL=warn.js.map","import { warn } from './warn';\n/**\n * Warns when props are required if a condition is met.\n *\n * @public\n * @param componentName - The name of the component being used.\n * @param props - The props passed into the component.\n * @param requiredProps - The name of the props that are required when the condition is met.\n * @param conditionalPropName - The name of the prop that the condition is based on.\n * @param condition - Whether the condition is met.\n */\nexport function warnConditionallyRequiredProps(componentName, props, requiredProps, conditionalPropName, condition) {\n if (condition === true && process.env.NODE_ENV !== 'production') {\n for (var _i = 0, requiredProps_1 = requiredProps; _i < requiredProps_1.length; _i++) {\n var requiredPropName = requiredProps_1[_i];\n if (!(requiredPropName in props)) {\n warn(\"\".concat(componentName, \" property '\").concat(requiredPropName, \"' is required when '\").concat(conditionalPropName, \"' is used.'\"));\n }\n }\n }\n}\n//# sourceMappingURL=warnConditionallyRequiredProps.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Async } from './Async';\nimport { EventGroup } from './EventGroup';\nimport { warnConditionallyRequiredProps } from './warn/warnConditionallyRequiredProps';\nimport { warnMutuallyExclusive } from './warn/warnMutuallyExclusive';\nimport { warnDeprecations } from './warn/warnDeprecations';\n/**\n * BaseComponent class, which provides basic helpers for all components.\n *\n * @public\n * {@docCategory BaseComponent}\n *\n * @deprecated Do not use. We are moving away from class component.\n */\nvar BaseComponent = /** @class */ (function (_super) {\n __extends(BaseComponent, _super);\n /**\n * BaseComponent constructor\n * @param props - The props for the component.\n * @param context - The context for the component.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n function BaseComponent(props, context) {\n var _this = _super.call(this, props, context) || this;\n // eslint-disable-next-line deprecation/deprecation\n _makeAllSafe(_this, BaseComponent.prototype, [\n 'componentDidMount',\n 'shouldComponentUpdate',\n 'getSnapshotBeforeUpdate',\n 'render',\n 'componentDidUpdate',\n 'componentWillUnmount',\n ]);\n return _this;\n }\n /**\n * When the component receives props, make sure the componentRef is updated.\n */\n BaseComponent.prototype.componentDidUpdate = function (prevProps, prevState) {\n this._updateComponentRef(prevProps, this.props);\n };\n /**\n * When the component has mounted, update the componentRef.\n */\n BaseComponent.prototype.componentDidMount = function () {\n this._setComponentRef(this.props.componentRef, this);\n };\n /**\n * If we have disposables, dispose them automatically on unmount.\n */\n BaseComponent.prototype.componentWillUnmount = function () {\n this._setComponentRef(this.props.componentRef, null);\n if (this.__disposables) {\n for (var i = 0, len = this._disposables.length; i < len; i++) {\n var disposable = this.__disposables[i];\n if (disposable.dispose) {\n disposable.dispose();\n }\n }\n this.__disposables = null;\n }\n };\n Object.defineProperty(BaseComponent.prototype, \"className\", {\n /**\n * Gets the object's class name.\n */\n get: function () {\n if (!this.__className) {\n var funcNameRegex = /function (.{1,})\\(/;\n var results = funcNameRegex.exec(this.constructor.toString());\n this.__className = results && results.length > 1 ? results[1] : '';\n }\n return this.__className;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(BaseComponent.prototype, \"_disposables\", {\n /**\n * Allows subclasses to push things to this._disposables to be auto disposed.\n */\n get: function () {\n if (!this.__disposables) {\n this.__disposables = [];\n }\n return this.__disposables;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(BaseComponent.prototype, \"_async\", {\n /**\n * Gets the async instance associated with the component, created on demand. The async instance gives\n * subclasses a way to execute setTimeout/setInterval async calls safely, where the callbacks\n * will be cleared/ignored automatically after unmounting. The helpers within the async object also\n * preserve the this pointer so that you don't need to \"bind\" the callbacks.\n */\n get: function () {\n if (!this.__async) {\n this.__async = new Async(this);\n this._disposables.push(this.__async);\n }\n return this.__async;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(BaseComponent.prototype, \"_events\", {\n /**\n * Gets the event group instance assocaited with the component, created on demand. The event instance\n * provides on/off methods for listening to DOM (or regular javascript object) events. The event callbacks\n * will be automatically disconnected after unmounting. The helpers within the events object also\n * preserve the this reference so that you don't need to \"bind\" the callbacks.\n */\n get: function () {\n if (!this.__events) {\n this.__events = new EventGroup(this);\n this._disposables.push(this.__events);\n }\n return this.__events;\n },\n enumerable: false,\n configurable: true\n });\n /**\n * Helper to return a memoized ref resolver function.\n * @param refName - Name of the member to assign the ref to.\n * @returns A function instance keyed from the given refname.\n * @deprecated Use `createRef` from React.createRef.\n */\n BaseComponent.prototype._resolveRef = function (refName) {\n var _this = this;\n if (!this.__resolves) {\n this.__resolves = {};\n }\n if (!this.__resolves[refName]) {\n this.__resolves[refName] = function (ref) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return (_this[refName] = ref);\n };\n }\n return this.__resolves[refName];\n };\n /**\n * Updates the componentRef (by calling it with \"this\" when necessary.)\n */\n BaseComponent.prototype._updateComponentRef = function (currentProps, newProps) {\n if (newProps === void 0) { newProps = {}; }\n // currentProps *should* always be defined, but verify that just in case a subclass is manually\n // calling a lifecycle method with no parameters (which has happened) or other odd usage.\n if (currentProps && newProps && currentProps.componentRef !== newProps.componentRef) {\n this._setComponentRef(currentProps.componentRef, null);\n this._setComponentRef(newProps.componentRef, this);\n }\n };\n /**\n * Warns when a deprecated props are being used.\n *\n * @param deprecationMap - The map of deprecations, where key is the prop name and the value is\n * either null or a replacement prop name.\n */\n BaseComponent.prototype._warnDeprecations = function (deprecationMap) {\n warnDeprecations(this.className, this.props, deprecationMap);\n };\n /**\n * Warns when props which are mutually exclusive with each other are both used.\n *\n * @param mutuallyExclusiveMap - The map of mutually exclusive props.\n */\n BaseComponent.prototype._warnMutuallyExclusive = function (mutuallyExclusiveMap) {\n warnMutuallyExclusive(this.className, this.props, mutuallyExclusiveMap);\n };\n /**\n * Warns when props are required if a condition is met.\n *\n * @param requiredProps - The name of the props that are required when the condition is met.\n * @param conditionalPropName - The name of the prop that the condition is based on.\n * @param condition - Whether the condition is met.\n */\n BaseComponent.prototype._warnConditionallyRequiredProps = function (requiredProps, conditionalPropName, condition) {\n warnConditionallyRequiredProps(this.className, this.props, requiredProps, conditionalPropName, condition);\n };\n BaseComponent.prototype._setComponentRef = function (ref, value) {\n if (!this._skipComponentRefResolution && ref) {\n if (typeof ref === 'function') {\n ref(value);\n }\n if (typeof ref === 'object') {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref.current = value;\n }\n }\n };\n return BaseComponent;\n}(React.Component));\nexport { BaseComponent };\n/**\n * Helper to override a given method with a wrapper method that can try/catch the original, but also\n * ensures that the BaseComponent's methods are called before the subclass's. This ensures that\n * componentWillUnmount in the base is called and that things in the _disposables array are disposed.\n */\n// eslint-disable-next-line deprecation/deprecation\nfunction _makeAllSafe(obj, prototype, methodNames) {\n for (var i = 0, len = methodNames.length; i < len; i++) {\n _makeSafe(obj, prototype, methodNames[i]);\n }\n}\n// eslint-disable-next-line deprecation/deprecation\nfunction _makeSafe(obj, prototype, methodName) {\n /* eslint-disable @typescript-eslint/no-explicit-any */\n var classMethod = obj[methodName];\n var prototypeMethod = prototype[methodName];\n if (classMethod || prototypeMethod) {\n obj[methodName] = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n /* eslint-enable @typescript-eslint/no-explicit-any */\n var retVal;\n if (prototypeMethod) {\n retVal = prototypeMethod.apply(this, args);\n }\n if (classMethod !== prototypeMethod) {\n retVal = classMethod.apply(this, args);\n }\n return retVal;\n };\n }\n}\n/**\n * Simple constant function for returning null, used to render empty templates in JSX.\n *\n * @public\n */\nexport function nullRender() {\n return null;\n}\n//# sourceMappingURL=BaseComponent.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { getWindow } from './dom/getWindow';\n/**\n * Utility component for delaying the render of a child component after a given delay. This component\n * requires a single child component; don't pass in many components. Wrap multiple components in a DIV\n * if necessary.\n *\n * @public\n * {@docCategory DelayedRender}\n */\nvar DelayedRender = /** @class */ (function (_super) {\n __extends(DelayedRender, _super);\n function DelayedRender(props) {\n var _this = _super.call(this, props) || this;\n _this.state = {\n isRendered: getWindow() === undefined,\n };\n return _this;\n }\n DelayedRender.prototype.componentDidMount = function () {\n var _this = this;\n var delay = this.props.delay;\n this._timeoutId = window.setTimeout(function () {\n _this.setState({\n isRendered: true,\n });\n }, delay);\n };\n DelayedRender.prototype.componentWillUnmount = function () {\n if (this._timeoutId) {\n clearTimeout(this._timeoutId);\n }\n };\n DelayedRender.prototype.render = function () {\n return this.state.isRendered ? React.Children.only(this.props.children) : null;\n };\n DelayedRender.defaultProps = {\n delay: 0,\n };\n return DelayedRender;\n}(React.Component));\nexport { DelayedRender };\n//# sourceMappingURL=DelayedRender.js.map","import { getWindow } from './dom/getWindow';\n/**\n * Storing global state in local module variables has issues when more than one copy\n * if the module gets loaded on the page (due to a bundling error or simply by consuming\n * a prebundled script.)\n *\n * This file contains helpers to deal with the getting and setting local state, and allows\n * callers to get called back when it mutates.\n */\nvar GLOBAL_SETTINGS_PROP_NAME = '__globalSettings__';\nvar CALLBACK_STATE_PROP_NAME = '__callbacks__';\nvar _counter = 0;\n/**\n * Global settings helper, which stores settings in the global (window) namespace.\n * If window is not provided, it will store settings in module scope. Provides a\n * way to observe changes as well when their values change.\n *\n * @public\n * {@docCategory GlobalSettings}\n */\nvar GlobalSettings = /** @class */ (function () {\n function GlobalSettings() {\n }\n GlobalSettings.getValue = function (key, defaultValue) {\n var globalSettings = _getGlobalSettings();\n if (globalSettings[key] === undefined) {\n globalSettings[key] = typeof defaultValue === 'function' ? defaultValue() : defaultValue;\n }\n return globalSettings[key];\n };\n GlobalSettings.setValue = function (key, value) {\n var globalSettings = _getGlobalSettings();\n var callbacks = globalSettings[CALLBACK_STATE_PROP_NAME];\n var oldValue = globalSettings[key];\n if (value !== oldValue) {\n globalSettings[key] = value;\n var changeDescription = {\n oldValue: oldValue,\n value: value,\n key: key,\n };\n for (var id in callbacks) {\n if (callbacks.hasOwnProperty(id)) {\n callbacks[id](changeDescription);\n }\n }\n }\n return value;\n };\n GlobalSettings.addChangeListener = function (cb) {\n // Note: we use generated ids on the callbacks to create a map of the callbacks, which optimizes removal.\n // (It's faster to delete a key than it is to look up the index of an object and splice an array.)\n var id = cb.__id__;\n var callbacks = _getCallbacks();\n if (!id) {\n id = cb.__id__ = String(_counter++);\n }\n callbacks[id] = cb;\n };\n GlobalSettings.removeChangeListener = function (cb) {\n var callbacks = _getCallbacks();\n delete callbacks[cb.__id__];\n };\n return GlobalSettings;\n}());\nexport { GlobalSettings };\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _getGlobalSettings() {\n var _a;\n var win = getWindow();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var globalObj = win || {};\n if (!globalObj[GLOBAL_SETTINGS_PROP_NAME]) {\n globalObj[GLOBAL_SETTINGS_PROP_NAME] = (_a = {},\n _a[CALLBACK_STATE_PROP_NAME] = {},\n _a);\n }\n return globalObj[GLOBAL_SETTINGS_PROP_NAME];\n}\nfunction _getCallbacks() {\n var globalSettings = _getGlobalSettings();\n return globalSettings[CALLBACK_STATE_PROP_NAME];\n}\n//# sourceMappingURL=GlobalSettings.js.map","/**\n * Simulated enum for keycodes. These will get inlined by uglify when used much like an enum\n *\n * @public\n * {@docCategory KeyCodes}\n */\nexport var KeyCodes = {\n backspace: 8,\n tab: 9,\n enter: 13,\n shift: 16,\n ctrl: 17,\n alt: 18,\n pauseBreak: 19,\n capslock: 20,\n escape: 27,\n space: 32,\n pageUp: 33,\n pageDown: 34,\n end: 35,\n home: 36,\n left: 37,\n up: 38,\n right: 39,\n down: 40,\n insert: 45,\n del: 46,\n zero: 48,\n one: 49,\n two: 50,\n three: 51,\n four: 52,\n five: 53,\n six: 54,\n seven: 55,\n eight: 56,\n nine: 57,\n colon: 58,\n a: 65,\n b: 66,\n c: 67,\n d: 68,\n e: 69,\n f: 70,\n g: 71,\n h: 72,\n i: 73,\n j: 74,\n k: 75,\n l: 76,\n m: 77,\n n: 78,\n o: 79,\n p: 80,\n q: 81,\n r: 82,\n s: 83,\n t: 84,\n u: 85,\n v: 86,\n w: 87,\n x: 88,\n y: 89,\n z: 90,\n leftWindow: 91,\n rightWindow: 92,\n select: 93,\n /* eslint-disable @typescript-eslint/naming-convention */\n zero_numpad: 96,\n one_numpad: 97,\n two_numpad: 98,\n three_numpad: 99,\n four_numpad: 100,\n five_numpad: 101,\n six_numpad: 102,\n seven_numpad: 103,\n eight_numpad: 104,\n nine_numpad: 105,\n /* eslint-enable @typescript-eslint/naming-convention */\n multiply: 106,\n add: 107,\n subtract: 109,\n decimalPoint: 110,\n divide: 111,\n f1: 112,\n f2: 113,\n f3: 114,\n f4: 115,\n f5: 116,\n f6: 117,\n f7: 118,\n f8: 119,\n f9: 120,\n f10: 121,\n f11: 122,\n f12: 123,\n numlock: 144,\n scrollLock: 145,\n semicolon: 186,\n equalSign: 187,\n comma: 188,\n dash: 189,\n period: 190,\n forwardSlash: 191,\n graveAccent: 192,\n openBracket: 219,\n backSlash: 220,\n closeBracket: 221,\n singleQuote: 222,\n};\n//# sourceMappingURL=KeyCodes.js.map","/**\n * Rectangle helper class.\n *\n * @public\n * {@docCategory Rectangle}\n */\nvar Rectangle = /** @class */ (function () {\n function Rectangle(left, right, top, bottom) {\n if (left === void 0) { left = 0; }\n if (right === void 0) { right = 0; }\n if (top === void 0) { top = 0; }\n if (bottom === void 0) { bottom = 0; }\n this.top = top;\n this.bottom = bottom;\n this.left = left;\n this.right = right;\n }\n Object.defineProperty(Rectangle.prototype, \"width\", {\n /**\n * Calculated automatically by subtracting the right from left\n */\n get: function () {\n return this.right - this.left;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(Rectangle.prototype, \"height\", {\n /**\n * Calculated automatically by subtracting the bottom from top.\n */\n get: function () {\n return this.bottom - this.top;\n },\n enumerable: false,\n configurable: true\n });\n /**\n * Tests if another rect is approximately equal to this rect (within 4 decimal places.)\n */\n Rectangle.prototype.equals = function (rect) {\n // Fixing to 4 decimal places because it allows enough precision and will handle cases when something\n // should be rounded, like .999999 should round to 1.\n return (parseFloat(this.top.toFixed(4)) === parseFloat(rect.top.toFixed(4)) &&\n parseFloat(this.bottom.toFixed(4)) === parseFloat(rect.bottom.toFixed(4)) &&\n parseFloat(this.left.toFixed(4)) === parseFloat(rect.left.toFixed(4)) &&\n parseFloat(this.right.toFixed(4)) === parseFloat(rect.right.toFixed(4)));\n };\n return Rectangle;\n}());\nexport { Rectangle };\n//# sourceMappingURL=Rectangle.js.map","/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * Returns a single function which will call each of the given functions in the context of the\n * parent.\n */\nexport function appendFunction(parent) {\n var functions = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n functions[_i - 1] = arguments[_i];\n }\n if (functions.length < 2) {\n return functions[0];\n }\n return function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n functions.forEach(function (f) { return f && f.apply(parent, args); });\n };\n}\n//# sourceMappingURL=appendFunction.js.map","/**\n * ARIA helper to concatenate attributes, returning undefined if all attributes\n * are undefined. (Empty strings are not a valid ARIA attribute value.)\n *\n * @param ariaAttributes - ARIA attributes to merge\n */\nexport function mergeAriaAttributeValues() {\n var ariaAttributes = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n ariaAttributes[_i] = arguments[_i];\n }\n var mergedAttribute = ariaAttributes\n .filter(function (arg) { return arg; })\n .join(' ')\n .trim();\n return mergedAttribute === '' ? undefined : mergedAttribute;\n}\n//# sourceMappingURL=aria.js.map","/**\n * Helper to find the index of an item within an array, using a callback to\n * determine the match.\n *\n * @public\n * @param array - Array to search.\n * @param cb - Callback which returns true on matches.\n * @param fromIndex - Optional index to start from (defaults to 0)\n */\nexport function findIndex(array, cb, fromIndex) {\n if (fromIndex === void 0) { fromIndex = 0; }\n var index = -1;\n for (var i = fromIndex; array && i < array.length; i++) {\n if (cb(array[i], i)) {\n index = i;\n break;\n }\n }\n return index;\n}\n/**\n * Helper to find the first item within an array that satisfies the callback.\n * @param array - Array to search\n * @param cb - Callback which returns true on matches\n */\nexport function find(array, cb) {\n var index = findIndex(array, cb);\n if (index < 0) {\n return undefined;\n }\n return array[index];\n}\n/**\n * Creates an array of a given size and helper method to populate.\n *\n * @public\n * @param size - Size of array.\n * @param getItem - Callback to populate given cell index.\n */\nexport function createArray(size, getItem) {\n var array = [];\n for (var i = 0; i < size; i++) {\n array.push(getItem(i));\n }\n return array;\n}\n/**\n * Convert the given array to a matrix with columnCount number\n * of columns.\n *\n * @public\n * @param items - The array to convert\n * @param columnCount - The number of columns for the resulting matrix\n * @returns A matrix of items\n */\nexport function toMatrix(items, columnCount) {\n return items.reduce(function (rows, currentValue, index) {\n if (index % columnCount === 0) {\n rows.push([currentValue]);\n }\n else {\n rows[rows.length - 1].push(currentValue);\n }\n return rows;\n }, []);\n}\n/**\n * Given an array, it returns a new array that does not contain the item at the given index.\n * @param array - The array to operate on\n * @param index - The index of the element to remove\n */\nexport function removeIndex(array, index) {\n return array.filter(function (_, i) { return index !== i; });\n}\n/**\n * Given an array, this function returns a new array where the element at a given index has been replaced.\n * @param array - The array to operate on\n * @param newElement - The element that will be placed in the new array\n * @param index - The index of the element that should be replaced\n */\nexport function replaceElement(array, newElement, index) {\n var copy = array.slice();\n copy[index] = newElement;\n return copy;\n}\n/**\n * Given an array, this function returns a new array where an element has been inserted at the given index.\n * @param array - The array to operate on\n * @param index - The index where an element should be inserted\n * @param itemToAdd - The element to insert\n */\nexport function addElementAtIndex(array, index, itemToAdd) {\n var copy = array.slice();\n copy.splice(index, 0, itemToAdd);\n return copy;\n}\n/**\n * Given an array where each element is of type T or T[], flatten it into an array of T\n * @param array - The array where each element can optionally also be an array\n */\nexport function flatten(array) {\n var result = [];\n array.forEach(function (item) { return (result = result.concat(item)); });\n return result;\n}\n/**\n * Returns a boolean indicating if the two given arrays are equal in length and values.\n *\n * @param array1 - First array to compare\n * @param array2 - Second array to compare\n * @returns True if the arrays are the same length and have the same values in the same positions, false otherwise.\n */\nexport function arraysEqual(array1, array2) {\n if (array1.length !== array2.length) {\n return false;\n }\n for (var i = 0; i < array1.length; i++) {\n if (array1[i] !== array2[i]) {\n return false;\n }\n }\n return true;\n}\n//# sourceMappingURL=array.js.map","import { getWindow } from './dom/getWindow';\n/**\n * Fetches an item from session storage without throwing an exception\n * @param key The key of the item to fetch from session storage\n */\nexport function getItem(key) {\n var result = null;\n try {\n var win = getWindow();\n result = win ? win.sessionStorage.getItem(key) : null;\n }\n catch (e) {\n /* Eat the exception */\n }\n return result;\n}\n/**\n * Inserts an item into session storage without throwing an exception\n * @param key The key of the item to add to session storage\n * @param data The data to put into session storage\n */\nexport function setItem(key, data) {\n var _a;\n try {\n (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.sessionStorage.setItem(key, data);\n }\n catch (e) {\n /* Eat the exception */\n }\n}\n//# sourceMappingURL=sessionStorage.js.map","import { KeyCodes } from './KeyCodes';\nimport { getDocument } from './dom/getDocument';\nimport { getItem, setItem } from './sessionStorage';\nimport { setRTL as mergeStylesSetRTL } from '@fluentui/merge-styles';\nvar RTL_LOCAL_STORAGE_KEY = 'isRTL';\n// Default to undefined so that we initialize on first read.\nvar _isRTL;\n/**\n * Gets the rtl state of the page (returns true if in rtl.)\n */\nexport function getRTL(theme) {\n if (theme === void 0) { theme = {}; }\n if (theme.rtl !== undefined) {\n return theme.rtl;\n }\n if (_isRTL === undefined) {\n // Fabric supports persisting the RTL setting between page refreshes via session storage\n var savedRTL = getItem(RTL_LOCAL_STORAGE_KEY);\n if (savedRTL !== null) {\n _isRTL = savedRTL === '1';\n setRTL(_isRTL);\n }\n var doc = getDocument();\n if (_isRTL === undefined && doc) {\n _isRTL = ((doc.body && doc.body.getAttribute('dir')) || doc.documentElement.getAttribute('dir')) === 'rtl';\n mergeStylesSetRTL(_isRTL);\n }\n }\n return !!_isRTL;\n}\n/**\n * Sets the rtl state of the page (by adjusting the dir attribute of the html element.)\n */\nexport function setRTL(isRTL, persistSetting) {\n if (persistSetting === void 0) { persistSetting = false; }\n var doc = getDocument();\n if (doc) {\n doc.documentElement.setAttribute('dir', isRTL ? 'rtl' : 'ltr');\n }\n if (persistSetting) {\n setItem(RTL_LOCAL_STORAGE_KEY, isRTL ? '1' : '0');\n }\n _isRTL = isRTL;\n mergeStylesSetRTL(_isRTL);\n}\n/**\n * Returns the given key, but flips right/left arrows if necessary.\n */\nexport function getRTLSafeKeyCode(key, theme) {\n if (theme === void 0) { theme = {}; }\n if (getRTL(theme)) {\n if (key === KeyCodes.left) {\n key = KeyCodes.right;\n }\n else if (key === KeyCodes.right) {\n key = KeyCodes.left;\n }\n }\n return key;\n}\n//# sourceMappingURL=rtl.js.map","/**\n * Determines whether or not an element has the virtual hierarchy extension.\n *\n * @public\n */\nexport function isVirtualElement(element) {\n return element && !!element._virtual;\n}\n//# sourceMappingURL=isVirtualElement.js.map","import { isVirtualElement } from './isVirtualElement';\n/**\n * Gets the virtual parent given the child element, if it exists.\n *\n * @public\n */\nexport function getVirtualParent(child) {\n var parent;\n if (child && isVirtualElement(child)) {\n parent = child._virtual.parent;\n }\n return parent;\n}\n//# sourceMappingURL=getVirtualParent.js.map","import { getVirtualParent } from './getVirtualParent';\n/**\n * Gets the element which is the parent of a given element.\n * If `allowVirtuaParents` is `true`, this method prefers the virtual parent over\n * real DOM parent when present.\n *\n * @public\n */\nexport function getParent(child, allowVirtualParents) {\n if (allowVirtualParents === void 0) { allowVirtualParents = true; }\n return (child &&\n ((allowVirtualParents && getVirtualParent(child)) || (child.parentNode && child.parentNode)));\n}\n//# sourceMappingURL=getParent.js.map","import { getParent } from './getParent';\n/**\n * Determines whether or not a parent element contains a given child element.\n * If `allowVirtualParents` is true, this method may return `true` if the child\n * has the parent in its virtual element hierarchy.\n *\n * @public\n */\nexport function elementContains(parent, child, allowVirtualParents) {\n if (allowVirtualParents === void 0) { allowVirtualParents = true; }\n var isContained = false;\n if (parent && child) {\n if (allowVirtualParents) {\n if (parent === child) {\n isContained = true;\n }\n else {\n isContained = false;\n while (child) {\n var nextParent = getParent(child);\n if (nextParent === parent) {\n isContained = true;\n break;\n }\n child = nextParent;\n }\n }\n }\n else if (parent.contains) {\n isContained = parent.contains(child);\n }\n }\n return isContained;\n}\n//# sourceMappingURL=elementContains.js.map","import { getParent } from './getParent';\n/**\n * Finds the first parent element where the matchFunction returns true\n * @param element - element to start searching at\n * @param matchFunction - the function that determines if the element is a match\n * @returns the matched element or null no match was found\n */\nexport function findElementRecursive(element, matchFunction) {\n if (!element || element === document.body) {\n return null;\n }\n return matchFunction(element) ? element : findElementRecursive(getParent(element), matchFunction);\n}\n//# sourceMappingURL=findElementRecursive.js.map","import { findElementRecursive } from './findElementRecursive';\n/**\n * Determines if an element, or any of its ancestors, contain the given attribute\n * @param element - element to start searching at\n * @param attribute - the attribute to search for\n * @returns the value of the first instance found\n */\nexport function elementContainsAttribute(element, attribute) {\n var elementMatch = findElementRecursive(element, function (testElement) { return testElement.hasAttribute(attribute); });\n return elementMatch && elementMatch.getAttribute(attribute);\n}\n//# sourceMappingURL=elementContainsAttribute.js.map","export var DATA_PORTAL_ATTRIBUTE = 'data-portal-element';\n/**\n * Identify element as a portal by setting an attribute.\n * @param element - Element to mark as a portal.\n */\nexport function setPortalAttribute(element) {\n element.setAttribute(DATA_PORTAL_ATTRIBUTE, 'true');\n}\n//# sourceMappingURL=setPortalAttribute.js.map","import { findElementRecursive } from './findElementRecursive';\nimport { DATA_PORTAL_ATTRIBUTE } from './setPortalAttribute';\n/**\n * Determine whether a target is within a portal from perspective of root or optional parent.\n * This function only works against portal components that use the setPortalAttribute function.\n * If both parent and child are within the same portal this function will return false.\n * @param target - Element to query portal containment status of.\n * @param parent - Optional parent perspective. Search for containing portal stops at parent\n * (or root if parent is undefined or invalid.)\n */\nexport function portalContainsElement(target, parent) {\n var elementMatch = findElementRecursive(target, function (testElement) { return parent === testElement || testElement.hasAttribute(DATA_PORTAL_ATTRIBUTE); });\n return elementMatch !== null && elementMatch.hasAttribute(DATA_PORTAL_ATTRIBUTE);\n}\n//# sourceMappingURL=portalContainsElement.js.map","/**\n * Sets the virtual parent of an element.\n * Pass `undefined` as the `parent` to clear the virtual parent.\n *\n * @public\n */\nexport function setVirtualParent(child, parent) {\n var virtualChild = child;\n var virtualParent = parent;\n if (!virtualChild._virtual) {\n virtualChild._virtual = {\n children: [],\n };\n }\n var oldParent = virtualChild._virtual.parent;\n if (oldParent && oldParent !== parent) {\n // Remove the child from its old parent.\n var index = oldParent._virtual.children.indexOf(virtualChild);\n if (index > -1) {\n oldParent._virtual.children.splice(index, 1);\n }\n }\n virtualChild._virtual.parent = virtualParent || undefined;\n if (virtualParent) {\n if (!virtualParent._virtual) {\n virtualParent._virtual = {\n children: [],\n };\n }\n virtualParent._virtual.children.push(virtualChild);\n }\n}\n//# sourceMappingURL=setVirtualParent.js.map","import { elementContainsAttribute } from './dom/elementContainsAttribute';\nimport { elementContains } from './dom/elementContains';\nimport { getParent } from './dom/getParent';\nimport { getWindow } from './dom/getWindow';\nimport { getDocument } from './dom/getDocument';\nvar IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';\nvar IS_VISIBLE_ATTRIBUTE = 'data-is-visible';\nvar FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id';\nvar FOCUSZONE_SUB_ATTRIBUTE = 'data-is-sub-focuszone';\n/**\n * Gets the first focusable element.\n *\n * @public\n */\nexport function getFirstFocusable(rootElement, currentElement, includeElementsInFocusZones) {\n return getNextElement(rootElement, currentElement, true /*checkNode*/, false /*suppressParentTraversal*/, false /*suppressChildTraversal*/, includeElementsInFocusZones);\n}\n/**\n * Gets the last focusable element.\n *\n * @public\n */\nexport function getLastFocusable(rootElement, currentElement, includeElementsInFocusZones) {\n return getPreviousElement(rootElement, currentElement, true /*checkNode*/, false /*suppressParentTraversal*/, true /*traverseChildren*/, includeElementsInFocusZones);\n}\n/**\n * Gets the first tabbable element. (The difference between focusable and tabbable is that tabbable elements are\n * focusable elements that also have tabIndex != -1.)\n * @param rootElement - The parent element to search beneath.\n * @param currentElement - The descendant of rootElement to start the search at. This element is the first one checked,\n * and iteration continues forward. Typical use passes rootElement.firstChild.\n * @param includeElementsInFocusZones - true if traversal should go into FocusZone descendants.\n * @param checkNode - Include currentElement in search when true. Defaults to true.\n * @public\n */\nexport function getFirstTabbable(rootElement, currentElement, includeElementsInFocusZones, checkNode) {\n if (checkNode === void 0) { checkNode = true; }\n return getNextElement(rootElement, currentElement, checkNode, false /*suppressParentTraversal*/, false /*suppressChildTraversal*/, includeElementsInFocusZones, false /*allowFocusRoot*/, true /*tabbable*/);\n}\n/**\n * Gets the last tabbable element. (The difference between focusable and tabbable is that tabbable elements are\n * focusable elements that also have tabIndex != -1.)\n * @param rootElement - The parent element to search beneath.\n * @param currentElement - The descendant of rootElement to start the search at. This element is the first one checked,\n * and iteration continues in reverse. Typical use passes rootElement.lastChild.\n * @param includeElementsInFocusZones - true if traversal should go into FocusZone descendants.\n * @param checkNode - Include currentElement in search when true. Defaults to true.\n * @public\n */\nexport function getLastTabbable(rootElement, currentElement, includeElementsInFocusZones, checkNode) {\n if (checkNode === void 0) { checkNode = true; }\n return getPreviousElement(rootElement, currentElement, checkNode, false /*suppressParentTraversal*/, true /*traverseChildren*/, includeElementsInFocusZones, false /*allowFocusRoot*/, true /*tabbable*/);\n}\n/**\n * Attempts to focus the first focusable element that is a child or child's child of the rootElement.\n *\n * @public\n * @param rootElement - Element to start the search for a focusable child.\n * @param bypassHiddenElements - If true, focus will be not be set on hidden elements.\n * @returns True if focus was set, false if it was not.\n */\nexport function focusFirstChild(rootElement, bypassHiddenElements) {\n var element = getNextElement(rootElement, rootElement, true, false, false, true, undefined, undefined, bypassHiddenElements);\n if (element) {\n focusAsync(element);\n return true;\n }\n return false;\n}\n/**\n * Traverse to find the previous element.\n * If tabbable is true, the element must have tabIndex != -1.\n *\n * @public\n */\nexport function getPreviousElement(rootElement, currentElement, checkNode, suppressParentTraversal, traverseChildren, includeElementsInFocusZones, allowFocusRoot, tabbable) {\n if (!currentElement || (!allowFocusRoot && currentElement === rootElement)) {\n return null;\n }\n var isCurrentElementVisible = isElementVisible(currentElement);\n // Check its children.\n if (traverseChildren &&\n isCurrentElementVisible &&\n (includeElementsInFocusZones || !(isElementFocusZone(currentElement) || isElementFocusSubZone(currentElement)))) {\n var childMatch = getPreviousElement(rootElement, currentElement.lastElementChild, true, true, true, includeElementsInFocusZones, allowFocusRoot, tabbable);\n if (childMatch) {\n if ((tabbable && isElementTabbable(childMatch, true)) || !tabbable) {\n return childMatch;\n }\n var childMatchSiblingMatch = getPreviousElement(rootElement, childMatch.previousElementSibling, true, true, true, includeElementsInFocusZones, allowFocusRoot, tabbable);\n if (childMatchSiblingMatch) {\n return childMatchSiblingMatch;\n }\n var childMatchParent = childMatch.parentElement;\n // At this point if we have not found any potential matches\n // start looking at the rest of the subtree under the currentParent.\n // NOTE: We do not want to recurse here because doing so could\n // cause elements to get skipped.\n while (childMatchParent && childMatchParent !== currentElement) {\n var childMatchParentMatch = getPreviousElement(rootElement, childMatchParent.previousElementSibling, true, true, true, includeElementsInFocusZones, allowFocusRoot, tabbable);\n if (childMatchParentMatch) {\n return childMatchParentMatch;\n }\n childMatchParent = childMatchParent.parentElement;\n }\n }\n }\n // Check the current node, if it's not the first traversal.\n if (checkNode && isCurrentElementVisible && isElementTabbable(currentElement, tabbable)) {\n return currentElement;\n }\n // Check its previous sibling.\n var siblingMatch = getPreviousElement(rootElement, currentElement.previousElementSibling, true, true, true, includeElementsInFocusZones, allowFocusRoot, tabbable);\n if (siblingMatch) {\n return siblingMatch;\n }\n // Check its parent.\n if (!suppressParentTraversal) {\n return getPreviousElement(rootElement, currentElement.parentElement, true, false, false, includeElementsInFocusZones, allowFocusRoot, tabbable);\n }\n return null;\n}\n/**\n * Traverse to find the next focusable element.\n * If tabbable is true, the element must have tabIndex != -1.\n *\n * @public\n * @param checkNode - Include currentElement in search when true.\n */\nexport function getNextElement(rootElement, currentElement, checkNode, suppressParentTraversal, suppressChildTraversal, includeElementsInFocusZones, allowFocusRoot, tabbable, bypassHiddenElements) {\n if (!currentElement || (currentElement === rootElement && suppressChildTraversal && !allowFocusRoot)) {\n return null;\n }\n var checkElementVisibility = bypassHiddenElements ? isElementVisibleAndNotHidden : isElementVisible;\n var isCurrentElementVisible = checkElementVisibility(currentElement);\n // Check the current node, if it's not the first traversal.\n if (checkNode && isCurrentElementVisible && isElementTabbable(currentElement, tabbable)) {\n return currentElement;\n }\n // Check its children.\n if (!suppressChildTraversal &&\n isCurrentElementVisible &&\n (includeElementsInFocusZones || !(isElementFocusZone(currentElement) || isElementFocusSubZone(currentElement)))) {\n var childMatch = getNextElement(rootElement, currentElement.firstElementChild, true, true, false, includeElementsInFocusZones, allowFocusRoot, tabbable, bypassHiddenElements);\n if (childMatch) {\n return childMatch;\n }\n }\n if (currentElement === rootElement) {\n return null;\n }\n // Check its sibling.\n var siblingMatch = getNextElement(rootElement, currentElement.nextElementSibling, true, true, false, includeElementsInFocusZones, allowFocusRoot, tabbable, bypassHiddenElements);\n if (siblingMatch) {\n return siblingMatch;\n }\n if (!suppressParentTraversal) {\n return getNextElement(rootElement, currentElement.parentElement, false, false, true, includeElementsInFocusZones, allowFocusRoot, tabbable, bypassHiddenElements);\n }\n return null;\n}\n/**\n * Determines if an element is visible.\n *\n * @public\n */\nexport function isElementVisible(element) {\n // If the element is not valid, return false.\n if (!element || !element.getAttribute) {\n return false;\n }\n var visibilityAttribute = element.getAttribute(IS_VISIBLE_ATTRIBUTE);\n // If the element is explicitly marked with the visibility attribute, return that value as boolean.\n if (visibilityAttribute !== null && visibilityAttribute !== undefined) {\n return visibilityAttribute === 'true';\n }\n // Fallback to other methods of determining actual visibility.\n return (element.offsetHeight !== 0 ||\n element.offsetParent !== null ||\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n element.isVisible === true); // used as a workaround for testing.\n}\n/**\n * Determines if an element is visible and not hidden\n * @param element - Element to check\n * @returns Returns true if the given element is visible and not hidden\n *\n * @public\n */\nexport function isElementVisibleAndNotHidden(element) {\n return (!!element &&\n isElementVisible(element) &&\n !element.hidden &&\n window.getComputedStyle(element).visibility !== 'hidden');\n}\n/**\n * Determines if an element can receive focus programmatically or via a mouse click.\n * If checkTabIndex is true, additionally checks to ensure the element can be focused with the tab key,\n * meaning tabIndex != -1.\n *\n * @public\n */\nexport function isElementTabbable(element, checkTabIndex) {\n // If this element is null or is disabled, it is not considered tabbable.\n if (!element || element.disabled) {\n return false;\n }\n var tabIndex = 0;\n var tabIndexAttributeValue = null;\n if (element && element.getAttribute) {\n tabIndexAttributeValue = element.getAttribute('tabIndex');\n if (tabIndexAttributeValue) {\n tabIndex = parseInt(tabIndexAttributeValue, 10);\n }\n }\n var isFocusableAttribute = element.getAttribute ? element.getAttribute(IS_FOCUSABLE_ATTRIBUTE) : null;\n var isTabIndexSet = tabIndexAttributeValue !== null && tabIndex >= 0;\n var result = !!element &&\n isFocusableAttribute !== 'false' &&\n (element.tagName === 'A' ||\n element.tagName === 'BUTTON' ||\n element.tagName === 'INPUT' ||\n element.tagName === 'TEXTAREA' ||\n element.tagName === 'SELECT' ||\n isFocusableAttribute === 'true' ||\n isTabIndexSet);\n return checkTabIndex ? tabIndex !== -1 && result : result;\n}\n/**\n * Determines if a given element is a focus zone.\n *\n * @public\n */\nexport function isElementFocusZone(element) {\n return !!(element && element.getAttribute && !!element.getAttribute(FOCUSZONE_ID_ATTRIBUTE));\n}\n/**\n * Determines if a given element is a focus sub zone.\n *\n * @public\n */\nexport function isElementFocusSubZone(element) {\n return !!(element && element.getAttribute && element.getAttribute(FOCUSZONE_SUB_ATTRIBUTE) === 'true');\n}\n/**\n * Determines if an element, or any of its children, contain focus.\n *\n * @public\n */\nexport function doesElementContainFocus(element) {\n var document = getDocument(element);\n var currentActiveElement = document && document.activeElement;\n if (currentActiveElement && elementContains(element, currentActiveElement)) {\n return true;\n }\n return false;\n}\n/**\n * Determines if an, or any of its ancestors, sepcificies that it doesn't want focus to wrap\n * @param element - element to start searching from\n * @param noWrapDataAttribute - the no wrap data attribute to match (either)\n * @returns true if focus should wrap, false otherwise\n */\nexport function shouldWrapFocus(element, noWrapDataAttribute) {\n return elementContainsAttribute(element, noWrapDataAttribute) === 'true' ? false : true;\n}\nvar animationId = undefined;\n/**\n * Sets focus to an element asynchronously. The focus will be set at the next browser repaint,\n * meaning it won't cause any extra recalculations. If more than one focusAsync is called during one frame,\n * only the latest called focusAsync element will actually be focused\n * @param element - The element to focus\n */\nexport function focusAsync(element) {\n if (element) {\n var win = getWindow(element);\n if (win) {\n // cancel any previous focus queues\n if (animationId !== undefined) {\n win.cancelAnimationFrame(animationId);\n }\n // element.focus() is a no-op if the element is no longer in the DOM, meaning this is always safe\n animationId = win.requestAnimationFrame(function () {\n element && element.focus();\n // We are done focusing for this frame, so reset the queued focus element\n animationId = undefined;\n });\n }\n }\n}\n/**\n * Finds the closest focusable element via an index path from a parent. See\n * `getElementIndexPath` for getting an index path from an element to a child.\n */\nexport function getFocusableByIndexPath(parent, path) {\n var element = parent;\n for (var _i = 0, path_1 = path; _i < path_1.length; _i++) {\n var index = path_1[_i];\n var nextChild = element.children[Math.min(index, element.children.length - 1)];\n if (!nextChild) {\n break;\n }\n element = nextChild;\n }\n element =\n isElementTabbable(element) && isElementVisible(element)\n ? element\n : getNextElement(parent, element, true) || getPreviousElement(parent, element);\n return element;\n}\n/**\n * Finds the element index path from a parent element to a child element.\n *\n * If you had this node structure: \"A has children [B, C] and C has child D\",\n * the index path from A to D would be [1, 0], or `parent.chidren[1].children[0]`.\n */\nexport function getElementIndexPath(fromElement, toElement) {\n var path = [];\n while (toElement && fromElement && toElement !== fromElement) {\n var parent_1 = getParent(toElement, true);\n if (parent_1 === null) {\n return [];\n }\n path.unshift(Array.prototype.indexOf.call(parent_1.children, toElement));\n toElement = parent_1;\n }\n return path;\n}\n//# sourceMappingURL=focus.js.map","export function on(element, eventName, callback, options) {\n element.addEventListener(eventName, callback, options);\n return function () { return element.removeEventListener(eventName, callback, options); };\n}\n//# sourceMappingURL=on.js.map","import { mergeCssSets, Stylesheet } from '@fluentui/merge-styles';\nimport { getRTL } from './rtl';\nimport { getWindow } from './dom';\nvar MAX_CACHE_COUNT = 50;\nvar DEFAULT_SPECIFICITY_MULTIPLIER = 5;\nvar _memoizedClassNames = 0;\nvar stylesheet = Stylesheet.getInstance();\nif (stylesheet && stylesheet.onReset) {\n stylesheet.onReset(function () { return _memoizedClassNames++; });\n}\n// Note that because of the caching nature within the classNames memoization,\n// I've disabled this rule to simply be able to work with any types.\n/* eslint-disable @typescript-eslint/no-explicit-any */\n// This represents a prop we attach to each Map to indicate the cached return value\n// associated with the graph node.\nvar retVal = '__retval__';\n/**\n * Creates a getClassNames function which calls getStyles given the props, and injects them\n * into mergeStyleSets.\n *\n * Note that the props you pass in on every render should be in the same order and\n * immutable (numbers, strings, and booleans). This will allow the results to be memoized. Violating\n * these will cause extra recalcs to occur.\n */\nexport function classNamesFunction(options) {\n // We build a trie where each node is a Map. The map entry key represents an argument\n // value, and the entry value is another node (Map). Each node has a `__retval__`\n // property which is used to hold the cached response.\n if (options === void 0) { options = {}; }\n // To derive the response, we can simply ensure the arguments are added or already\n // exist in the trie. At the last node, if there is a `__retval__` we return that. Otherwise\n // we call the `getStyles` api to evaluate, cache on the property, and return that.\n var map = new Map();\n var styleCalcCount = 0;\n var getClassNamesCount = 0;\n var currentMemoizedClassNames = _memoizedClassNames;\n var getClassNames = function (styleFunctionOrObject, styleProps) {\n var _a;\n if (styleProps === void 0) { styleProps = {}; }\n // If useStaticStyles is true, styleFunctionOrObject returns slot to classname mappings.\n // If there is also no style overrides, we can skip merge styles completely and\n // simply return the result from the style funcion.\n if (options.useStaticStyles &&\n typeof styleFunctionOrObject === 'function' &&\n styleFunctionOrObject.__noStyleOverride__) {\n return styleFunctionOrObject(styleProps);\n }\n getClassNamesCount++;\n var current = map;\n var theme = styleProps.theme;\n var rtl = theme && theme.rtl !== undefined ? theme.rtl : getRTL();\n var disableCaching = options.disableCaching;\n // On reset of our stylesheet, reset memoized cache.\n if (currentMemoizedClassNames !== _memoizedClassNames) {\n currentMemoizedClassNames = _memoizedClassNames;\n map = new Map();\n styleCalcCount = 0;\n }\n if (!options.disableCaching) {\n current = _traverseMap(map, styleFunctionOrObject);\n current = _traverseMap(current, styleProps);\n }\n if (disableCaching || !current[retVal]) {\n if (styleFunctionOrObject === undefined) {\n current[retVal] = {};\n }\n else {\n current[retVal] = mergeCssSets([\n (typeof styleFunctionOrObject === 'function'\n ? styleFunctionOrObject(styleProps)\n : styleFunctionOrObject),\n ], { rtl: !!rtl, specificityMultiplier: options.useStaticStyles ? DEFAULT_SPECIFICITY_MULTIPLIER : undefined });\n }\n if (!disableCaching) {\n styleCalcCount++;\n }\n }\n if (styleCalcCount > (options.cacheSize || MAX_CACHE_COUNT)) {\n var win = getWindow();\n if ((_a = win === null || win === void 0 ? void 0 : win.FabricConfig) === null || _a === void 0 ? void 0 : _a.enableClassNameCacheFullWarning) {\n // eslint-disable-next-line no-console\n console.warn(\"Styles are being recalculated too frequently. Cache miss rate is \".concat(styleCalcCount, \"/\").concat(getClassNamesCount, \".\"));\n // eslint-disable-next-line no-console\n console.trace();\n }\n map.clear();\n styleCalcCount = 0;\n // Mutate the options passed in, that's all we can do.\n options.disableCaching = true;\n }\n // Note: the retVal is an attached property on the Map; not a key in the Map. We use this attached property to\n // cache the return value for this branch of the graph.\n return current[retVal];\n };\n return getClassNames;\n}\nfunction _traverseEdge(current, value) {\n value = _normalizeValue(value);\n if (!current.has(value)) {\n current.set(value, new Map());\n }\n return current.get(value);\n}\nfunction _traverseMap(current, inputs) {\n if (typeof inputs === 'function') {\n var cachedInputsFromStyled = inputs.__cachedInputs__;\n if (cachedInputsFromStyled) {\n // The styled helper will generate the styles function and will attach the cached\n // inputs (consisting of the default styles, customzied styles, and user provided styles.)\n // These should be used as cache keys for deriving the memoized value.\n for (var _i = 0, _a = inputs.__cachedInputs__; _i < _a.length; _i++) {\n var input = _a[_i];\n current = _traverseEdge(current, input);\n }\n }\n else {\n current = _traverseEdge(current, inputs);\n }\n }\n else if (typeof inputs === 'object') {\n for (var propName in inputs) {\n if (inputs.hasOwnProperty(propName)) {\n current = _traverseEdge(current, inputs[propName]);\n }\n }\n }\n return current;\n}\nfunction _normalizeValue(value) {\n switch (value) {\n case undefined:\n return '__undefined__';\n case null:\n return '__null__';\n default:\n return value;\n }\n}\n//# sourceMappingURL=classNamesFunction.js.map","import { Stylesheet } from '@fluentui/merge-styles';\nvar _initializedStylesheetResets = false;\nvar _resetCounter = 0;\nvar _emptyObject = { empty: true };\nvar _dictionary = {};\nvar _weakMap = typeof WeakMap === 'undefined' ? null : WeakMap;\n/**\n * Test utility for providing a custom weakmap.\n *\n * @internal\n * */\nexport function setMemoizeWeakMap(weakMap) {\n _weakMap = weakMap;\n}\n/**\n * Reset memoizations.\n */\nexport function resetMemoizations() {\n _resetCounter++;\n}\n/**\n * Memoize decorator to be used on class methods. WARNING: the `this` reference\n * will be inaccessible within a memoized method, given that a cached method's `this`\n * would not be instance-specific.\n *\n * @public\n */\nexport function memoize(_target, _key, descriptor) {\n // We bind to \"null\" to prevent people from inadvertently pulling values from \"this\",\n // rather than passing them in as input values which can be memoized.\n var fn = memoizeFunction(descriptor.value && descriptor.value.bind(null));\n return {\n configurable: true,\n get: function () {\n return fn;\n },\n };\n}\n/**\n * Memoizes a function; when you pass in the same parameters multiple times, it returns a cached result.\n * Be careful when passing in objects, you need to pass in the same INSTANCE for caching to work. Otherwise\n * it will grow the cache unnecessarily. Also avoid using default values that evaluate functions; passing in\n * undefined for a value and relying on a default function will execute it the first time, but will not\n * re-evaluate subsequent times which may have been unexpected.\n *\n * By default, the cache will reset after 100 permutations, to avoid abuse cases where the function is\n * unintendedly called with unique objects. Without a reset, the cache could grow infinitely, so we safeguard\n * by resetting. To override this behavior, pass a value of 0 to the maxCacheSize parameter.\n *\n * @public\n * @param cb - The function to memoize.\n * @param maxCacheSize - Max results to cache. If the cache exceeds this value, it will reset on the next call.\n * @param ignoreNullOrUndefinedResult - Flag to decide whether to cache callback result if it is undefined/null.\n * If the flag is set to true, the callback result is recomputed every time till the callback result is\n * not undefined/null for the first time, and then the non-undefined/null version gets cached.\n * @returns A memoized version of the function.\n */\nexport function memoizeFunction(cb, maxCacheSize, ignoreNullOrUndefinedResult) {\n if (maxCacheSize === void 0) { maxCacheSize = 100; }\n if (ignoreNullOrUndefinedResult === void 0) { ignoreNullOrUndefinedResult = false; }\n // Avoid breaking scenarios which don't have weak map.\n if (!_weakMap) {\n return cb;\n }\n if (!_initializedStylesheetResets) {\n var stylesheet = Stylesheet.getInstance();\n if (stylesheet && stylesheet.onReset) {\n Stylesheet.getInstance().onReset(resetMemoizations);\n }\n _initializedStylesheetResets = true;\n }\n var rootNode;\n var cacheSize = 0;\n var localResetCounter = _resetCounter;\n return function memoizedFunction() {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n var currentNode = rootNode;\n if (rootNode === undefined ||\n localResetCounter !== _resetCounter ||\n (maxCacheSize > 0 && cacheSize > maxCacheSize)) {\n rootNode = _createNode();\n cacheSize = 0;\n localResetCounter = _resetCounter;\n }\n currentNode = rootNode;\n // Traverse the tree until we find the match.\n for (var i = 0; i < args.length; i++) {\n var arg = _normalizeArg(args[i]);\n if (!currentNode.map.has(arg)) {\n currentNode.map.set(arg, _createNode());\n }\n currentNode = currentNode.map.get(arg);\n }\n if (!currentNode.hasOwnProperty('value')) {\n currentNode.value = cb.apply(void 0, args);\n cacheSize++;\n }\n if (ignoreNullOrUndefinedResult && (currentNode.value === null || currentNode.value === undefined)) {\n currentNode.value = cb.apply(void 0, args);\n }\n return currentNode.value;\n };\n}\n/**\n * Creates a memoizer for a single-value function, backed by a WeakMap.\n * With a WeakMap, the memoized values are only kept as long as the source objects,\n * ensuring that there is no memory leak.\n *\n * This function assumes that the input values passed to the wrapped function will be\n * `function` or `object` types. To memoize functions which accept other inputs, use\n * `memoizeFunction`, which memoizes against arbitrary inputs using a lookup cache.\n *\n * @public\n */\nexport function createMemoizer(getValue) {\n if (!_weakMap) {\n // Without a `WeakMap` implementation, memoization is not possible.\n return getValue;\n }\n var cache = new _weakMap();\n function memoizedGetValue(input) {\n if (!input || (typeof input !== 'function' && typeof input !== 'object')) {\n // A WeakMap can only be used to test against reference values, i.e. 'function' and 'object'.\n // All other inputs cannot be memoized against in this manner.\n return getValue(input);\n }\n if (cache.has(input)) {\n return cache.get(input);\n }\n var value = getValue(input);\n cache.set(input, value);\n return value;\n }\n return memoizedGetValue;\n}\nfunction _normalizeArg(val) {\n if (!val) {\n return _emptyObject;\n }\n else if (typeof val === 'object' || typeof val === 'function') {\n return val;\n }\n else if (!_dictionary[val]) {\n _dictionary[val] = { val: val };\n }\n return _dictionary[val];\n}\nfunction _createNode() {\n return {\n map: _weakMap ? new _weakMap() : null,\n };\n}\n//# sourceMappingURL=memoize.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { createMemoizer } from '../memoize';\nfunction createComposedComponent(outer) {\n var Outer = outer;\n var outerMemoizer = createMemoizer(function (inner) {\n if (outer === inner) {\n throw new Error('Attempted to compose a component with itself.');\n }\n var Inner = inner;\n var innerMemoizer = createMemoizer(function (defaultRender) {\n var InnerWithDefaultRender = function (innerProps) {\n return React.createElement(Inner, __assign({}, innerProps, { defaultRender: defaultRender }));\n };\n return InnerWithDefaultRender;\n });\n var OuterWithDefaultRender = function (outerProps) {\n var defaultRender = outerProps.defaultRender;\n return React.createElement(Outer, __assign({}, outerProps, { defaultRender: defaultRender ? innerMemoizer(defaultRender) : Inner }));\n };\n return OuterWithDefaultRender;\n });\n return outerMemoizer;\n}\nvar componentAsMemoizer = createMemoizer(createComposedComponent);\n/**\n * Composes two components which conform to the `IComponentAs` specification; that is, two\n * components which accept a `defaultRender` prop, which is a 'default' implementation of\n * a component which accepts the same overall props.\n *\n * @public\n */\nexport function composeComponentAs(outer, inner) {\n return componentAsMemoizer(outer)(inner);\n}\n//# sourceMappingURL=composeComponentAs.js.map","/**\n * Determines whether a component is controlled.\n * @param props - Component props\n * @param valueProp - Prop containing the controlled value\n * @returns true if controlled, false if uncontrolled\n */\nexport function isControlled(props, valueProp) {\n // React's built-in considers a prop to be provided if its value is non-null/undefined.\n // Mirror that behavior here (rather than checking for just undefined).\n return props[valueProp] !== undefined && props[valueProp] !== null;\n}\n//# sourceMappingURL=controlled.js.map","/**\n * Concatination helper, which can merge class names together. Skips over falsey values.\n *\n * @public\n */\nexport function css() {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n var classes = [];\n for (var _a = 0, args_1 = args; _a < args_1.length; _a++) {\n var arg = args_1[_a];\n if (arg) {\n if (typeof arg === 'string') {\n classes.push(arg);\n }\n else if (arg.hasOwnProperty('toString') && typeof arg.toString === 'function') {\n classes.push(arg.toString());\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n for (var key in arg) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (arg[key]) {\n classes.push(key);\n }\n }\n }\n }\n }\n return classes.join(' ');\n}\n//# sourceMappingURL=css.js.map","import { __assign } from \"tslib\";\nimport { GlobalSettings } from '../GlobalSettings';\nvar CustomizationsGlobalKey = 'customizations';\nvar NO_CUSTOMIZATIONS = { settings: {}, scopedSettings: {}, inCustomizerContext: false };\nvar _allSettings = GlobalSettings.getValue(CustomizationsGlobalKey, {\n settings: {},\n scopedSettings: {},\n inCustomizerContext: false,\n});\nvar _events = [];\nvar Customizations = /** @class */ (function () {\n function Customizations() {\n }\n Customizations.reset = function () {\n _allSettings.settings = {};\n _allSettings.scopedSettings = {};\n };\n /** Apply global Customization settings.\n * @example Customizations.applySettings(\\{ theme: \\{...\\} \\});\n */\n Customizations.applySettings = function (settings) {\n _allSettings.settings = __assign(__assign({}, _allSettings.settings), settings);\n Customizations._raiseChange();\n };\n /** Apply Customizations to a particular named scope, like a component.\n * @example Customizations.applyScopedSettings('Nav', \\{ styles: () =\\> \\{\\} \\});\n */\n Customizations.applyScopedSettings = function (scopeName, settings) {\n _allSettings.scopedSettings[scopeName] = __assign(__assign({}, _allSettings.scopedSettings[scopeName]), settings);\n Customizations._raiseChange();\n };\n Customizations.getSettings = function (properties, scopeName, localSettings) {\n if (localSettings === void 0) { localSettings = NO_CUSTOMIZATIONS; }\n var settings = {};\n var localScopedSettings = (scopeName && localSettings.scopedSettings[scopeName]) || {};\n var globalScopedSettings = (scopeName && _allSettings.scopedSettings[scopeName]) || {};\n for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {\n var property = properties_1[_i];\n settings[property] =\n localScopedSettings[property] ||\n localSettings.settings[property] ||\n globalScopedSettings[property] ||\n _allSettings.settings[property];\n }\n return settings;\n };\n /** Used to run some code that sets Customizations without triggering an update until the end.\n * Useful for applying Customizations that don't affect anything currently rendered, or for\n * applying many customizations at once.\n * @param suppressUpdate - Do not raise the change event at the end, preventing all updates\n */\n Customizations.applyBatchedUpdates = function (code, suppressUpdate) {\n Customizations._suppressUpdates = true;\n try {\n code();\n }\n catch (_a) {\n /* do nothing */\n }\n Customizations._suppressUpdates = false;\n if (!suppressUpdate) {\n Customizations._raiseChange();\n }\n };\n Customizations.observe = function (onChange) {\n _events.push(onChange);\n };\n Customizations.unobserve = function (onChange) {\n _events = _events.filter(function (cb) { return cb !== onChange; });\n };\n Customizations._raiseChange = function () {\n if (!Customizations._suppressUpdates) {\n _events.forEach(function (cb) { return cb(); });\n }\n };\n return Customizations;\n}());\nexport { Customizations };\n//# sourceMappingURL=Customizations.js.map","import * as React from 'react';\nexport var CustomizerContext = React.createContext({\n customizations: {\n inCustomizerContext: false,\n settings: {},\n scopedSettings: {},\n },\n});\n//# sourceMappingURL=CustomizerContext.js.map","import { __assign } from \"tslib\";\n/**\n * Merge new and old settings, giving priority to new settings.\n * New settings is optional in which case oldSettings is returned as-is.\n * @param oldSettings - Old settings to fall back to.\n * @param newSettings - New settings that will be merged over oldSettings.\n * @returns Merged settings.\n */\nexport function mergeSettings(oldSettings, newSettings) {\n if (oldSettings === void 0) { oldSettings = {}; }\n var mergeSettingsWith = _isSettingsFunction(newSettings) ? newSettings : _settingsMergeWith(newSettings);\n return mergeSettingsWith(oldSettings);\n}\nexport function mergeScopedSettings(oldSettings, newSettings) {\n if (oldSettings === void 0) { oldSettings = {}; }\n var mergeSettingsWith = _isSettingsFunction(newSettings) ? newSettings : _scopedSettingsMergeWith(newSettings);\n return mergeSettingsWith(oldSettings);\n}\nfunction _isSettingsFunction(settings) {\n return typeof settings === 'function';\n}\nfunction _settingsMergeWith(newSettings) {\n return function (settings) { return (newSettings ? __assign(__assign({}, settings), newSettings) : settings); };\n}\nfunction _scopedSettingsMergeWith(scopedSettingsFromProps) {\n if (scopedSettingsFromProps === void 0) { scopedSettingsFromProps = {}; }\n return function (oldScopedSettings) {\n var newScopedSettings = __assign({}, oldScopedSettings);\n for (var scopeName in scopedSettingsFromProps) {\n if (scopedSettingsFromProps.hasOwnProperty(scopeName)) {\n newScopedSettings[scopeName] = __assign(__assign({}, oldScopedSettings[scopeName]), scopedSettingsFromProps[scopeName]);\n }\n }\n return newScopedSettings;\n };\n}\n//# sourceMappingURL=mergeSettings.js.map","import { mergeSettings, mergeScopedSettings } from './mergeSettings';\n/**\n * Merge props and customizations giving priority to props over context.\n * NOTE: This function will always perform multiple merge operations. Use with caution.\n * @param props - New settings to merge in.\n * @param parentContext - Context containing current settings.\n * @returns Merged customizations.\n */\nexport function mergeCustomizations(props, parentContext) {\n var _a = (parentContext || {}).customizations, customizations = _a === void 0 ? { settings: {}, scopedSettings: {} } : _a;\n return {\n customizations: {\n settings: mergeSettings(customizations.settings, props.settings),\n scopedSettings: mergeScopedSettings(customizations.scopedSettings, props.scopedSettings),\n inCustomizerContext: true,\n },\n };\n}\n//# sourceMappingURL=mergeCustomizations.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Customizations } from './Customizations';\nimport { CustomizerContext } from './CustomizerContext';\nimport { mergeCustomizations } from './mergeCustomizations';\n/**\n * The Customizer component allows for default props to be mixed into components which\n * are decorated with the customizable() decorator, or use the styled HOC. This enables\n * injection scenarios like:\n *\n * 1. render svg icons instead of the icon font within all buttons\n * 2. inject a custom theme object into a component\n *\n * Props are provided via the settings prop which should be one of the following:\n * - A json map which contains 1 or more name/value pairs representing injectable props.\n * - A function that receives the current settings and returns the new ones that apply to the scope\n *\n * @public\n *\n * @deprecated This component is deprecated for purpose of applying theme to components\n * as of `@fluentui/react` version 8. Use `ThemeProvider` for applying theme instead.\n */\nvar Customizer = /** @class */ (function (_super) {\n __extends(Customizer, _super);\n function Customizer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._onCustomizationChange = function () { return _this.forceUpdate(); };\n return _this;\n }\n Customizer.prototype.componentDidMount = function () {\n Customizations.observe(this._onCustomizationChange);\n };\n Customizer.prototype.componentWillUnmount = function () {\n Customizations.unobserve(this._onCustomizationChange);\n };\n Customizer.prototype.render = function () {\n var _this = this;\n var contextTransform = this.props.contextTransform;\n return (React.createElement(CustomizerContext.Consumer, null, function (parentContext) {\n var newContext = mergeCustomizations(_this.props, parentContext);\n if (contextTransform) {\n newContext = contextTransform(newContext);\n }\n return React.createElement(CustomizerContext.Provider, { value: newContext }, _this.props.children);\n }));\n };\n return Customizer;\n}(React.Component));\nexport { Customizer };\n//# sourceMappingURL=Customizer.js.map","/**\n * Allows you to hoist static functions in components.\n * Created for the purpose of fixing broken static functions in classes\n * that utilize decorators.\n *\n * @public\n * @param source - The object where the methods are hoisted from.\n * @param dest - The object to hoist the methods onto.\n * @returns The dest object with methods added\n */\nexport function hoistStatics(source, dest) {\n for (var name_1 in source) {\n if (source.hasOwnProperty(name_1)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n dest[name_1] = source[name_1];\n }\n }\n return dest;\n}\n//# sourceMappingURL=hoistStatics.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Customizations } from './Customizations';\nimport { hoistStatics } from '../hoistStatics';\nimport { CustomizerContext } from './CustomizerContext';\nimport { concatStyleSets } from '@fluentui/merge-styles';\nexport function customizable(scope, fields, concatStyles) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return function customizableFactory(ComposedComponent) {\n var _a;\n var resultClass = (_a = /** @class */ (function (_super) {\n __extends(ComponentWithInjectedProps, _super);\n function ComponentWithInjectedProps(props) {\n var _this = _super.call(this, props) || this;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this._styleCache = {};\n _this._onSettingChanged = _this._onSettingChanged.bind(_this);\n return _this;\n }\n ComponentWithInjectedProps.prototype.componentDidMount = function () {\n Customizations.observe(this._onSettingChanged);\n };\n ComponentWithInjectedProps.prototype.componentWillUnmount = function () {\n Customizations.unobserve(this._onSettingChanged);\n };\n ComponentWithInjectedProps.prototype.render = function () {\n var _this = this;\n return (React.createElement(CustomizerContext.Consumer, null, function (context) {\n var defaultProps = Customizations.getSettings(fields, scope, context.customizations);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var componentProps = _this.props;\n // If defaultProps.styles is a function, evaluate it before calling concatStyleSets\n if (defaultProps.styles && typeof defaultProps.styles === 'function') {\n defaultProps.styles = defaultProps.styles(__assign(__assign({}, defaultProps), componentProps));\n }\n // If concatStyles is true and custom styles have been defined compute those styles\n if (concatStyles && defaultProps.styles) {\n if (_this._styleCache.default !== defaultProps.styles ||\n _this._styleCache.component !== componentProps.styles) {\n var mergedStyles = concatStyleSets(defaultProps.styles, componentProps.styles);\n _this._styleCache.default = defaultProps.styles;\n _this._styleCache.component = componentProps.styles;\n _this._styleCache.merged = mergedStyles;\n }\n return React.createElement(ComposedComponent, __assign({}, defaultProps, componentProps, { styles: _this._styleCache.merged }));\n }\n return React.createElement(ComposedComponent, __assign({}, defaultProps, componentProps));\n }));\n };\n ComponentWithInjectedProps.prototype._onSettingChanged = function () {\n this.forceUpdate();\n };\n return ComponentWithInjectedProps;\n }(React.Component)),\n _a.displayName = 'Customized' + scope,\n _a);\n return hoistStatics(ComposedComponent, resultClass);\n };\n}\n//# sourceMappingURL=customizable.js.map","import * as React from 'react';\nimport { Customizations } from './Customizations';\nimport { CustomizerContext } from './CustomizerContext';\n/**\n * Hook to get Customizations settings from Customizations singleton or CustomizerContext.\n * It will trigger component state update on settings change observed.\n */\nexport function useCustomizationSettings(properties, scopeName) {\n var forceUpdate = useForceUpdate();\n var customizations = React.useContext(CustomizerContext).customizations;\n var inCustomizerContext = customizations.inCustomizerContext;\n React.useEffect(function () {\n if (!inCustomizerContext) {\n Customizations.observe(forceUpdate);\n }\n return function () {\n if (!inCustomizerContext) {\n Customizations.unobserve(forceUpdate);\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- exclude forceUpdate\n }, [inCustomizerContext]);\n return Customizations.getSettings(properties, scopeName, customizations);\n}\nfunction useForceUpdate() {\n var _a = React.useState(0), setValue = _a[1];\n return function () { return setValue(function (value) { return ++value; }); };\n}\n//# sourceMappingURL=useCustomizationSettings.js.map","import { appendFunction } from './appendFunction';\n/**\n * Extends a component's lifetime methods by appending new functions to the existing lifetime functions.\n */\nexport function extendComponent(parent, methods) {\n for (var name_1 in methods) {\n if (methods.hasOwnProperty(name_1)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n parent[name_1] = appendFunction(parent, parent[name_1], methods[name_1]);\n }\n }\n}\n//# sourceMappingURL=extendComponent.js.map","import { getWindow } from './dom/getWindow';\nimport { Stylesheet } from '@fluentui/merge-styles';\n// Initialize global window id.\nvar CURRENT_ID_PROPERTY = '__currentId__';\nvar DEFAULT_ID_STRING = 'id__';\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nvar _global = getWindow() || {};\nif (_global[CURRENT_ID_PROPERTY] === undefined) {\n _global[CURRENT_ID_PROPERTY] = 0;\n}\nvar _initializedStylesheetResets = false;\n/**\n * Generates a unique id in the global scope (this spans across duplicate copies of the same library.)\n *\n * @public\n */\nexport function getId(prefix) {\n if (!_initializedStylesheetResets) {\n // Configure ids to reset on stylesheet resets.\n var stylesheet = Stylesheet.getInstance();\n if (stylesheet && stylesheet.onReset) {\n stylesheet.onReset(resetIds);\n }\n _initializedStylesheetResets = true;\n }\n var index = _global[CURRENT_ID_PROPERTY]++;\n return (prefix === undefined ? DEFAULT_ID_STRING : prefix) + index;\n}\n/**\n * Resets id counter to an (optional) number.\n *\n * @public\n */\nexport function resetIds(counter) {\n if (counter === void 0) { counter = 0; }\n _global[CURRENT_ID_PROPERTY] = counter;\n}\n//# sourceMappingURL=getId.js.map","var toObjectMap = function () {\n var items = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n items[_i] = arguments[_i];\n }\n var result = {};\n for (var _a = 0, items_1 = items; _a < items_1.length; _a++) {\n var item = items_1[_a];\n var keys = Array.isArray(item) ? item : Object.keys(item);\n for (var _b = 0, keys_1 = keys; _b < keys_1.length; _b++) {\n var key = keys_1[_b];\n result[key] = 1;\n }\n }\n return result;\n};\n/**\n * An array of events that are allowed on every html element type.\n *\n * @public\n */\nexport var baseElementEvents = toObjectMap([\n 'onCopy',\n 'onCut',\n 'onPaste',\n 'onCompositionEnd',\n 'onCompositionStart',\n 'onCompositionUpdate',\n 'onFocus',\n 'onFocusCapture',\n 'onBlur',\n 'onBlurCapture',\n 'onChange',\n 'onInput',\n 'onSubmit',\n 'onLoad',\n 'onError',\n 'onKeyDown',\n 'onKeyDownCapture',\n 'onKeyPress',\n 'onKeyUp',\n 'onAbort',\n 'onCanPlay',\n 'onCanPlayThrough',\n 'onDurationChange',\n 'onEmptied',\n 'onEncrypted',\n 'onEnded',\n 'onLoadedData',\n 'onLoadedMetadata',\n 'onLoadStart',\n 'onPause',\n 'onPlay',\n 'onPlaying',\n 'onProgress',\n 'onRateChange',\n 'onSeeked',\n 'onSeeking',\n 'onStalled',\n 'onSuspend',\n 'onTimeUpdate',\n 'onVolumeChange',\n 'onWaiting',\n 'onClick',\n 'onClickCapture',\n 'onContextMenu',\n 'onDoubleClick',\n 'onDrag',\n 'onDragEnd',\n 'onDragEnter',\n 'onDragExit',\n 'onDragLeave',\n 'onDragOver',\n 'onDragStart',\n 'onDrop',\n 'onMouseDown',\n 'onMouseDownCapture',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOut',\n 'onMouseOver',\n 'onMouseUp',\n 'onMouseUpCapture',\n 'onSelect',\n 'onTouchCancel',\n 'onTouchEnd',\n 'onTouchMove',\n 'onTouchStart',\n 'onScroll',\n 'onWheel',\n 'onPointerCancel',\n 'onPointerDown',\n 'onPointerEnter',\n 'onPointerLeave',\n 'onPointerMove',\n 'onPointerOut',\n 'onPointerOver',\n 'onPointerUp',\n 'onGotPointerCapture',\n 'onLostPointerCapture',\n]);\n/**\n * An array of element attributes which are allowed on every html element type.\n *\n * @public\n */\nexport var baseElementProperties = toObjectMap([\n 'accessKey',\n 'children',\n 'className',\n 'contentEditable',\n 'dir',\n 'draggable',\n 'hidden',\n 'htmlFor',\n 'id',\n 'lang',\n 'ref',\n 'role',\n 'style',\n 'tabIndex',\n 'title',\n 'translate',\n 'spellCheck',\n 'name', // global\n]);\n/**\n * An array of HTML element properties and events.\n *\n * @public\n */\nexport var htmlElementProperties = toObjectMap(baseElementProperties, baseElementEvents);\n/**\n * An array of LABEL tag properties and events.\n *\n * @public\n */\nexport var labelProperties = toObjectMap(htmlElementProperties, [\n 'form', // button, fieldset, input, label, meter, object, output, select, textarea\n]);\n/**\n * An array of AUDIO tag properties and events.\n\n * @public\n */\nexport var audioProperties = toObjectMap(htmlElementProperties, [\n 'height',\n 'loop',\n 'muted',\n 'preload',\n 'src',\n 'width', // canvas, embed, iframe, img, input, object, video\n]);\n/**\n * An array of VIDEO tag properties and events.\n *\n * @public\n */\nexport var videoProperties = toObjectMap(audioProperties, [\n 'poster', // video\n]);\n/**\n * An array of OL tag properties and events.\n *\n * @public\n */\nexport var olProperties = toObjectMap(htmlElementProperties, [\n 'start', // ol\n]);\n/**\n * An array of LI tag properties and events.\n *\n * @public\n */\nexport var liProperties = toObjectMap(htmlElementProperties, [\n 'value', // button, input, li, option, meter, progress, param\n]);\n/**\n * An array of A tag properties and events.\n *\n * @public\n */\nexport var anchorProperties = toObjectMap(htmlElementProperties, [\n 'download',\n 'href',\n 'hrefLang',\n 'media',\n 'rel',\n 'target',\n 'type', // a, button, input, link, menu, object, script, source, style\n]);\n/**\n * An array of BUTTON tag properties and events.\n *\n * @public\n */\nexport var buttonProperties = toObjectMap(htmlElementProperties, [\n 'autoFocus',\n 'disabled',\n 'form',\n 'formAction',\n 'formEncType',\n 'formMethod',\n 'formNoValidate',\n 'formTarget',\n 'type',\n 'value', // button, input, li, option, meter, progress, param,\n]);\n/**\n * An array of INPUT tag properties and events.\n *\n * @public\n */\nexport var inputProperties = toObjectMap(buttonProperties, [\n 'accept',\n 'alt',\n 'autoCapitalize',\n 'autoComplete',\n 'checked',\n 'dirname',\n 'form',\n 'height',\n 'inputMode',\n 'list',\n 'max',\n 'maxLength',\n 'min',\n 'minLength',\n 'multiple',\n 'pattern',\n 'placeholder',\n 'readOnly',\n 'required',\n 'src',\n 'step',\n 'size',\n 'type',\n 'value',\n 'width', // canvas, embed, iframe, img, input, object, video\n]);\n/**\n * An array of TEXTAREA tag properties and events.\n *\n * @public\n */\nexport var textAreaProperties = toObjectMap(buttonProperties, [\n 'autoCapitalize',\n 'cols',\n 'dirname',\n 'form',\n 'maxLength',\n 'minLength',\n 'placeholder',\n 'readOnly',\n 'required',\n 'rows',\n 'wrap', // textarea\n]);\n/**\n * An array of SELECT tag properties and events.\n *\n * @public\n */\nexport var selectProperties = toObjectMap(buttonProperties, [\n 'form',\n 'multiple',\n 'required', // input, select, textarea\n]);\nexport var optionProperties = toObjectMap(htmlElementProperties, [\n 'selected',\n 'value', // button, input, li, option, meter, progress, param\n]);\n/**\n * An array of TABLE tag properties and events.\n *\n * @public\n */\nexport var tableProperties = toObjectMap(htmlElementProperties, [\n 'cellPadding',\n 'cellSpacing', // table\n]);\n/**\n * An array of TR tag properties and events.\n *\n * @public\n */\nexport var trProperties = htmlElementProperties;\n/**\n * An array of TH tag properties and events.\n *\n * @public\n */\nexport var thProperties = toObjectMap(htmlElementProperties, [\n 'rowSpan',\n 'scope', // th\n]);\n/**\n * An array of TD tag properties and events.\n *\n * @public\n */\nexport var tdProperties = toObjectMap(htmlElementProperties, [\n 'colSpan',\n 'headers',\n 'rowSpan',\n 'scope', // th\n]);\nexport var colGroupProperties = toObjectMap(htmlElementProperties, [\n 'span', // col, colgroup\n]);\nexport var colProperties = toObjectMap(htmlElementProperties, [\n 'span', // col, colgroup\n]);\n/**\n * An array of FORM tag properties and events.\n *\n * @public\n */\nexport var formProperties = toObjectMap(htmlElementProperties, [\n 'acceptCharset',\n 'action',\n 'encType',\n 'encType',\n 'method',\n 'noValidate',\n 'target', // form\n]);\n/**\n * An array of IFRAME tag properties and events.\n *\n * @public\n */\nexport var iframeProperties = toObjectMap(htmlElementProperties, [\n 'allow',\n 'allowFullScreen',\n 'allowPaymentRequest',\n 'allowTransparency',\n 'csp',\n 'height',\n 'importance',\n 'referrerPolicy',\n 'sandbox',\n 'src',\n 'srcDoc',\n 'width', // canvas, embed, iframe, img, input, object, video,\n]);\n/**\n * An array of IMAGE tag properties and events.\n *\n * @public\n */\nexport var imgProperties = toObjectMap(htmlElementProperties, [\n 'alt',\n 'crossOrigin',\n 'height',\n 'src',\n 'srcSet',\n 'useMap',\n 'width', // canvas, embed, iframe, img, input, object, video\n]);\n/**\n * @deprecated Use imgProperties for img elements.\n */\nexport var imageProperties = imgProperties;\n/**\n * An array of DIV tag properties and events.\n *\n * @public\n */\nexport var divProperties = htmlElementProperties;\n/**\n * Gets native supported props for an html element provided the allowance set. Use one of the property\n * sets defined (divProperties, buttonPropertes, etc) to filter out supported properties from a given\n * props set. Note that all data- and aria- prefixed attributes will be allowed.\n * NOTE: getNativeProps should always be applied first when adding props to a react component. The\n * non-native props should be applied second. This will prevent getNativeProps from overriding your custom props.\n * For example, if props passed to getNativeProps has an onClick function and getNativeProps is added to\n * the component after an onClick function is added, then the getNativeProps onClick will override it.\n *\n * @public\n * @param props - The unfiltered input props\n * @param allowedPropsNames - The array or record of allowed prop names.\n * @returns The filtered props\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function getNativeProps(\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nprops, allowedPropNames, excludedPropNames) {\n // It'd be great to properly type this while allowing 'aria-` and 'data-' attributes like TypeScript does for\n // JSX attributes, but that ability is hardcoded into the TS compiler with no analog in TypeScript typings.\n // Then we'd be able to enforce props extends native props (including aria- and data- attributes), and then\n // return native props.\n // We should be able to do this once this PR is merged: https://github.com/microsoft/TypeScript/pull/26797\n var isArray = Array.isArray(allowedPropNames);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var result = {};\n var keys = Object.keys(props);\n for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {\n var key = keys_2[_i];\n var isNativeProp = (!isArray && allowedPropNames[key]) ||\n (isArray && allowedPropNames.indexOf(key) >= 0) ||\n key.indexOf('data-') === 0 ||\n key.indexOf('aria-') === 0;\n if (isNativeProp && (!excludedPropNames || (excludedPropNames === null || excludedPropNames === void 0 ? void 0 : excludedPropNames.indexOf(key)) === -1)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n result[key] = props[key];\n }\n }\n return result;\n}\n//# sourceMappingURL=properties.js.map","import { labelProperties, audioProperties, videoProperties, olProperties, liProperties, anchorProperties, buttonProperties, inputProperties, textAreaProperties, selectProperties, optionProperties, tableProperties, trProperties, thProperties, tdProperties, colGroupProperties, colProperties, formProperties, iframeProperties, imgProperties, htmlElementProperties, getNativeProps, } from './properties';\nvar nativeElementMap = {\n label: labelProperties,\n audio: audioProperties,\n video: videoProperties,\n ol: olProperties,\n li: liProperties,\n a: anchorProperties,\n button: buttonProperties,\n input: inputProperties,\n textarea: textAreaProperties,\n select: selectProperties,\n option: optionProperties,\n table: tableProperties,\n tr: trProperties,\n th: thProperties,\n td: tdProperties,\n colGroup: colGroupProperties,\n col: colProperties,\n form: formProperties,\n iframe: iframeProperties,\n img: imgProperties,\n};\n/**\n * Given an element tagname and user props, filters the props to only allowed props for the given\n * element type.\n * @param tagName - Tag name (e.g. \"div\")\n * @param props - Props object\n * @param excludedPropNames - List of props to disallow\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function getNativeElementProps(tagName, props, excludedPropNames) {\n var allowedPropNames = (tagName && nativeElementMap[tagName]) || htmlElementProperties;\n return getNativeProps(props, allowedPropNames, excludedPropNames);\n}\n//# sourceMappingURL=getNativeElementProps.js.map","var REACT_LIFECYCLE_EXCLUSIONS = [\n 'setState',\n 'render',\n 'componentWillMount',\n 'UNSAFE_componentWillMount',\n 'componentDidMount',\n 'componentWillReceiveProps',\n 'UNSAFE_componentWillReceiveProps',\n 'shouldComponentUpdate',\n 'componentWillUpdate',\n 'getSnapshotBeforeUpdate',\n 'UNSAFE_componentWillUpdate',\n 'componentDidUpdate',\n 'componentWillUnmount',\n];\n/**\n * Allows you to hoist methods, except those in an exclusion set from a source object into a destination object.\n *\n * @public\n * @param destination - The instance of the object to hoist the methods onto.\n * @param source - The instance of the object where the methods are hoisted from.\n * @param exclusions - (Optional) What methods to exclude from being hoisted.\n * @returns An array of names of methods that were hoisted.\n */\nexport function hoistMethods(\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ndestination, \n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nsource, exclusions) {\n if (exclusions === void 0) { exclusions = REACT_LIFECYCLE_EXCLUSIONS; }\n var hoisted = [];\n var _loop_1 = function (methodName) {\n if (typeof source[methodName] === 'function' &&\n destination[methodName] === undefined &&\n (!exclusions || exclusions.indexOf(methodName) === -1)) {\n hoisted.push(methodName);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n destination[methodName] = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n source[methodName].apply(source, args);\n };\n }\n };\n for (var methodName in source) {\n _loop_1(methodName);\n }\n return hoisted;\n}\n/**\n * Provides a method for convenience to unhoist hoisted methods.\n *\n * @public\n * @param source - The source object upon which methods were hoisted.\n * @param methodNames - An array of method names to unhoist.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function unhoistMethods(source, methodNames) {\n methodNames.forEach(function (methodName) { return delete source[methodName]; });\n}\n//# sourceMappingURL=hoist.js.map","import { extendComponent } from './extendComponent';\n/**\n * Helper to manage componentRef resolution. Internally appends logic to\n * lifetime methods to resolve componentRef to the passed in object.\n *\n * Usage: call initializeComponentRef(this) in the constructor,\n */\nexport function initializeComponentRef(obj) {\n extendComponent(obj, {\n componentDidMount: _onMount,\n componentDidUpdate: _onUpdate,\n componentWillUnmount: _onUnmount,\n });\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _onMount() {\n _setComponentRef(this.props.componentRef, this);\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _onUpdate(prevProps) {\n if (prevProps.componentRef !== this.props.componentRef) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _setComponentRef(prevProps.componentRef, null);\n _setComponentRef(this.props.componentRef, this);\n }\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _onUnmount() {\n _setComponentRef(this.props.componentRef, null);\n}\nfunction _setComponentRef(componentRef, value) {\n if (componentRef) {\n if (typeof componentRef === 'object') {\n componentRef.current = value;\n }\n else if (typeof componentRef === 'function') {\n componentRef(value);\n }\n }\n}\n//# sourceMappingURL=initializeComponentRef.js.map","var _a;\nimport { KeyCodes } from './KeyCodes';\nvar DirectionalKeyCodes = (_a = {},\n _a[KeyCodes.up] = 1,\n _a[KeyCodes.down] = 1,\n _a[KeyCodes.left] = 1,\n _a[KeyCodes.right] = 1,\n _a[KeyCodes.home] = 1,\n _a[KeyCodes.end] = 1,\n _a[KeyCodes.tab] = 1,\n _a[KeyCodes.pageUp] = 1,\n _a[KeyCodes.pageDown] = 1,\n _a);\n/**\n * Returns true if the keycode is a directional keyboard key.\n */\nexport function isDirectionalKeyCode(which) {\n return !!DirectionalKeyCodes[which];\n}\n/**\n * Adds a keycode to the list of keys that, when pressed, should cause the focus outlines to be visible.\n * This can be used to add global shortcut keys that directionally move from section to section within\n * an app or between focus trap zones.\n */\nexport function addDirectionalKeyCode(which) {\n DirectionalKeyCodes[which] = 1;\n}\n/**\n * Removes a keycode to the list of keys that, when pressed, should cause the focus outlines to be visible.\n * This can be used to remove global shortcut keys that directionally move from section to section within\n * an app or between focus trap zones.\n */\nexport function removeDirectionalKeyCode(which) {\n delete DirectionalKeyCodes[which];\n}\n//# sourceMappingURL=keyboard.js.map","import { getWindow } from './dom/getWindow';\nexport var IsFocusVisibleClassName = 'ms-Fabric--isFocusVisible';\nexport var IsFocusHiddenClassName = 'ms-Fabric--isFocusHidden';\nfunction updateClassList(el, enabled) {\n if (el) {\n el.classList.add(enabled ? IsFocusVisibleClassName : IsFocusHiddenClassName);\n el.classList.remove(enabled ? IsFocusHiddenClassName : IsFocusVisibleClassName);\n }\n}\n/**\n * Sets the visibility of focus styling.\n *\n * By default, focus styles (the box surrounding a focused Button, for example) only show up when navigational\n * keypresses occur (through Tab, arrows, PgUp/PgDn, Home and End), and are hidden when mouse interactions occur.\n * This API provides an imperative way to turn them on/off.\n *\n * A use case might be when you have a keypress like ctrl-f6 navigate to a particular region on the page,\n * and want focus to show up.\n *\n * @param enabled - Whether to turn focus visibility on or off.\n * @param target - Optional target from which to get window in case no `providerElem` has been specified.\n * @param registeredProviders - Array of provider refs that are associated with a FocusRectsProvider. If no array\n * is passed in, the classnames are attached to the document body that contains `target`.\n */\nexport function setFocusVisibility(enabled, target, registeredProviders) {\n var _a;\n if (registeredProviders) {\n registeredProviders.forEach(function (ref) { return updateClassList(ref.current, enabled); });\n }\n else {\n updateClassList((_a = getWindow(target)) === null || _a === void 0 ? void 0 : _a.document.body, enabled);\n }\n}\n//# sourceMappingURL=setFocusVisibility.js.map","import * as React from 'react';\nimport { getWindow } from './dom/getWindow';\nimport { isDirectionalKeyCode } from './keyboard';\nimport { setFocusVisibility } from './setFocusVisibility';\nvar mountCounters = new WeakMap();\nvar callbackMap = new WeakMap();\nfunction setMountCounters(key, delta) {\n var newValue;\n var currValue = mountCounters.get(key);\n if (currValue) {\n newValue = currValue + delta;\n }\n else {\n newValue = 1;\n }\n mountCounters.set(key, newValue);\n return newValue;\n}\nfunction setCallbackMap(context) {\n var callbacks = callbackMap.get(context);\n if (callbacks) {\n return callbacks;\n }\n var onMouseDown = function (ev) { return _onMouseDown(ev, context.registeredProviders); };\n var onPointerDown = function (ev) { return _onPointerDown(ev, context.registeredProviders); };\n var onKeyDown = function (ev) { return _onKeyDown(ev, context.registeredProviders); };\n var onKeyUp = function (ev) { return _onKeyUp(ev, context.registeredProviders); };\n callbacks = { onMouseDown: onMouseDown, onPointerDown: onPointerDown, onKeyDown: onKeyDown, onKeyUp: onKeyUp };\n callbackMap.set(context, callbacks);\n return callbacks;\n}\nexport var FocusRectsContext = React.createContext(undefined);\n/**\n * Initializes the logic which:\n *\n * 1. Subscribes keydown, keyup, mousedown and pointerdown events. (It will only do it once for the current element of\n * the FocusRectsContext providerRef or once per window if no such element is provided via context, so it's safe to\n * call this method multiple times.)\n * 2. When the user presses triggers a keydown or keyup event via directional keyboard keys, adds the\n * 'ms-Fabric--isFocusVisible' classname to the current element of the FocusRectsContext providerRef or the document\n * body if no such element is provided via context, and removes the 'ms-Fabric-isFocusHidden' classname.\n * 3. When the user triggers a mousedown or pointerdown event, adds the 'ms-Fabric-isFocusHidden' classname to the\n * current element of the FocusRectsContext providerRef or the document body if no such element is provided via\n * context, and removes the 'ms-Fabric--isFocusVisible' classname.\n *\n * This logic allows components on the page to conditionally render focus treatments based on\n * the existence of global classnames, which simplifies logic overall.\n *\n * @param rootRef - A Ref object. Focus rectangle can be applied on itself and all its children.\n */\nexport function useFocusRects(rootRef) {\n var context = React.useContext(FocusRectsContext);\n React.useEffect(function () {\n var _a, _b, _c, _d;\n var win = getWindow(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current);\n if (!win || ((_a = win.FabricConfig) === null || _a === void 0 ? void 0 : _a.disableFocusRects) === true) {\n return undefined;\n }\n var el = win;\n var onMouseDown;\n var onPointerDown;\n var onKeyDown;\n var onKeyUp;\n if (((_b = context === null || context === void 0 ? void 0 : context.providerRef) === null || _b === void 0 ? void 0 : _b.current) &&\n ((_d = (_c = context === null || context === void 0 ? void 0 : context.providerRef) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.addEventListener)) {\n el = context.providerRef.current;\n // The NOINLINE directive tells terser not to move the setCallbackMap implementation into the call site during\n // minification.\n // This prevents the function from capturing additional variables in the closure, which can cause memory leaks.\n var callbacks = /*@__NOINLINE__*/ setCallbackMap(context);\n onMouseDown = callbacks.onMouseDown;\n onPointerDown = callbacks.onPointerDown;\n onKeyDown = callbacks.onKeyDown;\n onKeyUp = callbacks.onKeyUp;\n }\n else {\n onMouseDown = _onMouseDown;\n onPointerDown = _onPointerDown;\n onKeyDown = _onKeyDown;\n onKeyUp = _onKeyUp;\n }\n var count = setMountCounters(el, 1);\n if (count <= 1) {\n el.addEventListener('mousedown', onMouseDown, true);\n el.addEventListener('pointerdown', onPointerDown, true);\n el.addEventListener('keydown', onKeyDown, true);\n el.addEventListener('keyup', onKeyUp, true);\n }\n return function () {\n var _a;\n if (!win || ((_a = win.FabricConfig) === null || _a === void 0 ? void 0 : _a.disableFocusRects) === true) {\n return;\n }\n count = setMountCounters(el, -1);\n if (count === 0) {\n el.removeEventListener('mousedown', onMouseDown, true);\n el.removeEventListener('pointerdown', onPointerDown, true);\n el.removeEventListener('keydown', onKeyDown, true);\n el.removeEventListener('keyup', onKeyUp, true);\n }\n };\n }, [context, rootRef]);\n}\n/**\n * Function Component wrapper which enables calling `useFocusRects` hook.\n * Renders nothing.\n */\nexport var FocusRects = function (props) {\n useFocusRects(props.rootRef);\n return null;\n};\nfunction _onMouseDown(ev, registeredProviders) {\n setFocusVisibility(false, ev.target, registeredProviders);\n}\nfunction _onPointerDown(ev, registeredProviders) {\n if (ev.pointerType !== 'mouse') {\n setFocusVisibility(false, ev.target, registeredProviders);\n }\n}\n// You need both a keydown and a keyup listener that sets focus visibility to true to handle two distinct scenarios when\n// attaching the listeners and classnames to the provider instead of the document body.\n// If you only have a keydown listener, then the focus rectangles will not show when moving from outside of the provider\n// to inside it. That is why a keyup listener is needed, since it will always trigger after the focus event is fired.\n// If you only have a keyup listener, then the focus rectangles will not show moving between different tabbable elements\n// if the tab key is pressed without being released. That's is why we need a keydown listener, since it will trigger for\n// every element that is being tabbed into.\n// This works because `classList.add` is smart and will not duplicate a classname that already exists on the classList\n// when focus visibility is turned on.\nfunction _onKeyDown(ev, registeredProviders) {\n // eslint-disable-next-line deprecation/deprecation\n if (isDirectionalKeyCode(ev.which)) {\n setFocusVisibility(true, ev.target, registeredProviders);\n }\n}\nfunction _onKeyUp(ev, registeredProviders) {\n // eslint-disable-next-line deprecation/deprecation\n if (isDirectionalKeyCode(ev.which)) {\n setFocusVisibility(true, ev.target, registeredProviders);\n }\n}\n//# sourceMappingURL=useFocusRects.js.map","import * as React from 'react';\nimport { FocusRectsContext } from './useFocusRects';\nexport var FocusRectsProvider = function (props) {\n var providerRef = props.providerRef, layerRoot = props.layerRoot;\n var registeredProviders = React.useState([])[0];\n var parentContext = React.useContext(FocusRectsContext);\n // Inherit the parent context if it exists, unless this is a layer root.\n // This allows the topmost provider element in the DOM tree to handle the focus events.\n // Since layers are in a separate HTML tree from their parent, they shouldn't use the parent's providerRef.\n var inheritParentContext = parentContext !== undefined && !layerRoot;\n var context = React.useMemo(function () {\n return inheritParentContext\n ? undefined\n : {\n providerRef: providerRef,\n registeredProviders: registeredProviders,\n registerProvider: function (ref) {\n // Register this child provider with the current context, and any parent contexts\n registeredProviders.push(ref);\n parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerProvider(ref);\n },\n unregisterProvider: function (ref) {\n parentContext === null || parentContext === void 0 ? void 0 : parentContext.unregisterProvider(ref);\n var i = registeredProviders.indexOf(ref);\n if (i >= 0) {\n registeredProviders.splice(i, 1);\n }\n },\n };\n }, [providerRef, registeredProviders, parentContext, inheritParentContext]);\n React.useEffect(function () {\n if (context) {\n context.registerProvider(context.providerRef);\n return function () { return context.unregisterProvider(context.providerRef); };\n }\n }, [context]);\n // Create a new context provider if this is not inheriting from the parent.\n if (context) {\n return React.createElement(FocusRectsContext.Provider, { value: context }, props.children);\n }\n else {\n return React.createElement(React.Fragment, null, props.children);\n }\n};\n//# sourceMappingURL=FocusRectsProvider.js.map","/**\n * Regular expressions matching characters to ignore when calculating the initials.\n */\n/**\n * Regular expression matching characters within various types of enclosures, including the enclosures themselves\n * so for example, (xyz) [xyz] {xyz} all would be ignored\n */\nvar UNWANTED_ENCLOSURES_REGEX = /[\\(\\[\\{\\<][^\\)\\]\\}\\>]*[\\)\\]\\}\\>]/g;\n/**\n * Regular expression matching special ASCII characters except space, plus some unicode special characters.\n * Applies after unwanted enclosures have been removed\n */\nvar UNWANTED_CHARS_REGEX = /[\\0-\\u001F\\!-/:-@\\[-`\\{-\\u00BF\\u0250-\\u036F\\uD800-\\uFFFF]/g;\n/**\n * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed\n * and number has been trimmed for whitespaces\n */\nvar PHONENUMBER_REGEX = /^\\d+[\\d\\s]*(:?ext|x|)\\s*\\d+$/i;\n/** Regular expression matching one or more spaces. */\nvar MULTIPLE_WHITESPACES_REGEX = /\\s+/g;\n/**\n * Regular expression matching languages for which we currently don't support initials.\n * Arabic: Arabic, Arabic Supplement, Arabic Extended-A.\n * Korean: Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.\n * Japanese: Hiragana, Katakana.\n * CJK: CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,\n * CJK Unified Ideographs Extension B\n */\nvar UNSUPPORTED_TEXT_REGEX = \n// eslint-disable-next-line @fluentui/max-len\n/[\\u0600-\\u06FF\\u0750-\\u077F\\u08A0-\\u08FF\\u1100-\\u11FF\\u3130-\\u318F\\uA960-\\uA97F\\uAC00-\\uD7AF\\uD7B0-\\uD7FF\\u3040-\\u309F\\u30A0-\\u30FF\\u3400-\\u4DBF\\u4E00-\\u9FFF\\uF900-\\uFAFF]|[\\uD840-\\uD869][\\uDC00-\\uDED6]/;\nfunction getInitialsLatin(displayName, isRtl) {\n var initials = '';\n var splits = displayName.split(' ');\n if (splits.length === 2) {\n initials += splits[0].charAt(0).toUpperCase();\n initials += splits[1].charAt(0).toUpperCase();\n }\n else if (splits.length === 3) {\n initials += splits[0].charAt(0).toUpperCase();\n initials += splits[2].charAt(0).toUpperCase();\n }\n else if (splits.length !== 0) {\n initials += splits[0].charAt(0).toUpperCase();\n }\n if (isRtl && initials.length > 1) {\n return initials.charAt(1) + initials.charAt(0);\n }\n return initials;\n}\nfunction cleanupDisplayName(displayName) {\n displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');\n displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');\n displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');\n displayName = displayName.trim();\n return displayName;\n}\n/**\n * Get (up to 2 characters) initials based on display name of the persona.\n *\n * @public\n */\nexport function getInitials(displayName, isRtl, allowPhoneInitials) {\n if (!displayName) {\n return '';\n }\n displayName = cleanupDisplayName(displayName);\n // For names containing CJK characters, and phone numbers, we don't display initials\n if (UNSUPPORTED_TEXT_REGEX.test(displayName) || (!allowPhoneInitials && PHONENUMBER_REGEX.test(displayName))) {\n return '';\n }\n return getInitialsLatin(displayName, isRtl);\n}\n//# sourceMappingURL=initials.js.map","import { getWindow } from './dom/getWindow';\n/**\n * Fetches an item from local storage without throwing an exception\n * @param key The key of the item to fetch from local storage\n */\nexport function getItem(key) {\n var result = null;\n try {\n var win = getWindow();\n result = win ? win.localStorage.getItem(key) : null;\n }\n catch (e) {\n /* Eat the exception */\n }\n return result;\n}\n/**\n * Inserts an item into local storage without throwing an exception\n * @param key The key of the item to add to local storage\n * @param data The data to put into local storage\n */\nexport function setItem(key, data) {\n try {\n var win = getWindow();\n win && win.localStorage.setItem(key, data);\n }\n catch (e) {\n /* Eat the exception */\n }\n}\n//# sourceMappingURL=localStorage.js.map","import { getDocument } from './dom/getDocument';\nimport * as localStorage from './localStorage';\nimport * as sessionStorage from './sessionStorage';\n// Default to undefined so that we initialize on first read.\nvar _language;\nvar STORAGE_KEY = 'language';\n/**\n * Gets the language set for the page.\n * @param persistenceType - Where to persist the value. Default is `sessionStorage` if available.\n */\nexport function getLanguage(persistenceType) {\n if (persistenceType === void 0) { persistenceType = 'sessionStorage'; }\n if (_language === undefined) {\n var doc = getDocument();\n var savedLanguage = persistenceType === 'localStorage'\n ? localStorage.getItem(STORAGE_KEY)\n : persistenceType === 'sessionStorage'\n ? sessionStorage.getItem(STORAGE_KEY)\n : undefined;\n if (savedLanguage) {\n _language = savedLanguage;\n }\n if (_language === undefined && doc) {\n _language = doc.documentElement.getAttribute('lang');\n }\n if (_language === undefined) {\n _language = 'en';\n }\n }\n return _language;\n}\nexport function setLanguage(language, persistenceParam) {\n var doc = getDocument();\n if (doc) {\n doc.documentElement.setAttribute('lang', language);\n }\n var persistenceType = persistenceParam === true ? 'none' : !persistenceParam ? 'sessionStorage' : persistenceParam;\n if (persistenceType === 'localStorage') {\n localStorage.setItem(STORAGE_KEY, language);\n }\n else if (persistenceType === 'sessionStorage') {\n sessionStorage.setItem(STORAGE_KEY, language);\n }\n _language = language;\n}\n//# sourceMappingURL=language.js.map","/**\n * Determines the distance between two points.\n *\n * @public\n */\n/* eslint-disable deprecation/deprecation */\nexport function getDistanceBetweenPoints(point1, point2) {\n var left1 = point1.left || point1.x || 0;\n var top1 = point1.top || point1.y || 0;\n var left2 = point2.left || point2.x || 0;\n var top2 = point2.top || point2.y || 0;\n /* eslint-enable deprecation/deprecation */\n var distance = Math.sqrt(Math.pow(left1 - left2, 2) + Math.pow(top1 - top2, 2));\n return distance;\n}\n/**\n * Produces a proportionally-scaled version of an input content size when fit to a bounding size.\n * Given a `contentSize` and a `boundsSize`, this function scales `contentSize` proportionally\n * using either `contain` or `cover` fit behaviors.\n * Use this function to pre-calculate the layout for the CSS `object-fit` and `background-fit` behaviors.\n * With `contain`, the output size must be the largest it can be while completely within the `boundsSize`.\n * With `cover`, the output size must be the smallest it can be while completely around the `boundsSize`.\n * By default, there is a `maxScale` value of 1, which prevents the `contentSize` from being scaled larger.\n *\n * @param options - the options for the bounds fit operation\n */\nexport function fitContentToBounds(options) {\n var contentSize = options.contentSize, boundsSize = options.boundsSize, _a = options.mode, mode = _a === void 0 ? 'contain' : _a, _b = options.maxScale, maxScale = _b === void 0 ? 1 : _b;\n var contentAspectRatio = contentSize.width / contentSize.height;\n var boundsAspectRatio = boundsSize.width / boundsSize.height;\n var scale;\n if (mode === 'contain' ? contentAspectRatio > boundsAspectRatio : contentAspectRatio < boundsAspectRatio) {\n scale = boundsSize.width / contentSize.width;\n }\n else {\n scale = boundsSize.height / contentSize.height;\n }\n var finalScale = Math.min(maxScale, scale);\n return {\n width: contentSize.width * finalScale,\n height: contentSize.height * finalScale,\n };\n}\n/**\n * Calculates a number's precision based on the number of trailing\n * zeros if the number does not have a decimal indicated by a negative\n * precision. Otherwise, it calculates the number of digits after\n * the decimal point indicated by a positive precision.\n * @param value - the value to determine the precision of\n */\nexport function calculatePrecision(value) {\n /**\n * Group 1:\n * [1-9]([0]+$) matches trailing zeros\n * Group 2:\n * \\.([0-9]*) matches all digits after a decimal point.\n */\n var groups = /[1-9]([0]+$)|\\.([0-9]*)/.exec(String(value));\n if (!groups) {\n return 0;\n }\n if (groups[1]) {\n return -groups[1].length;\n }\n if (groups[2]) {\n return groups[2].length;\n }\n return 0;\n}\n/**\n * Rounds a number to a certain level of precision. Accepts negative precision.\n * @param value - The value that is being rounded.\n * @param precision - The number of decimal places to round the number to\n */\nexport function precisionRound(value, precision, base) {\n if (base === void 0) { base = 10; }\n var exp = Math.pow(base, precision);\n return Math.round(value * exp) / exp;\n}\n//# sourceMappingURL=math.js.map","/**\n * Simple deep merge function. Takes all arguments and returns a deep copy of the objects merged\n * together in the order provided. If an object creates a circular reference, it will assign the\n * original reference.\n */\nexport function merge(target) {\n var args = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n args[_i - 1] = arguments[_i];\n }\n for (var _a = 0, args_1 = args; _a < args_1.length; _a++) {\n var arg = args_1[_a];\n _merge(target || {}, arg);\n }\n return target;\n}\n/**\n * The _merge helper iterates through all props on source and assigns them to target.\n * When the value is an object, we will create a deep clone of the object. However if\n * there is a circular reference, the value will not be deep cloned and will persist\n * the reference.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction _merge(target, source, circularReferences) {\n if (circularReferences === void 0) { circularReferences = []; }\n circularReferences.push(source);\n for (var name_1 in source) {\n if (source.hasOwnProperty(name_1)) {\n if (name_1 !== '__proto__' && name_1 !== 'constructor' && name_1 !== 'prototype') {\n var value = source[name_1];\n if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n var isCircularReference = circularReferences.indexOf(value) > -1;\n target[name_1] = (isCircularReference ? value : _merge(target[name_1] || {}, value, circularReferences));\n }\n else {\n target[name_1] = value;\n }\n }\n }\n }\n circularReferences.pop();\n return target;\n}\n//# sourceMappingURL=merge.js.map","/**\n * Returns true if and only if the user is on a iOS device.\n * Used to determine whether iOS-specific behavior should be applied.\n */\nexport var isIOS = function () {\n if (!window || !window.navigator || !window.navigator.userAgent) {\n return false;\n }\n return /iPad|iPhone|iPod/i.test(window.navigator.userAgent);\n};\n//# sourceMappingURL=mobileDetector.js.map","/**\n * The helper functions here will make the target element as modal to screen readers, by placing aria-hidden on elements\n * that are siblings to the target element and the target element's ancestors (because aria-hidden gets inherited).\n * That way, all other elements on the page are hidden to the screen reader.\n */\nimport { getDocument } from './dom/getDocument';\n/** Tag names to ignore when modalizing */\nvar tagsToIgnore = ['TEMPLATE', 'STYLE', 'SCRIPT'];\n/**\n * Call this on a target element to make it modal to screen readers.\n * Returns a function that undoes the changes it made.\n */\nexport function modalize(target) {\n var targetDocument = getDocument(target);\n if (!targetDocument) {\n // can't do this in SSR\n return function () { return undefined; };\n }\n var affectedNodes = [];\n // start at target, then recurse and do the same for parent, until we reach \n while (target !== targetDocument.body && target.parentElement) {\n // grab all siblings of current element\n for (var _i = 0, _a = target.parentElement.children; _i < _a.length; _i++) {\n var sibling = _a[_i];\n // but ignore elements that are already aria-hidden\n var ariaHidden = sibling.getAttribute('aria-hidden');\n if (sibling !== target && (ariaHidden === null || ariaHidden === void 0 ? void 0 : ariaHidden.toLowerCase()) !== 'true' && tagsToIgnore.indexOf(sibling.tagName) === -1) {\n affectedNodes.push([sibling, ariaHidden]);\n }\n }\n target = target.parentElement;\n }\n // take all those elements and set aria-hidden=true on them\n affectedNodes.forEach(function (_a) {\n var node = _a[0];\n node.setAttribute('aria-hidden', 'true');\n });\n return function () {\n unmodalize(affectedNodes);\n affectedNodes = []; // dispose\n };\n}\n/**\n * Undoes the changes that modalize() did.\n */\nfunction unmodalize(affectedNodes) {\n affectedNodes.forEach(function (_a) {\n var node = _a[0], originalValue = _a[1];\n // Restore the original value (false or unset)\n if (originalValue) {\n node.setAttribute('aria-hidden', originalValue);\n }\n else {\n node.removeAttribute('aria-hidden');\n }\n });\n}\n//# sourceMappingURL=modalize.js.map","import { getWindow } from './dom/getWindow';\nvar isMacResult;\n/**\n * Returns true if the user is on a Mac. Caches the result value.\n * @param reset - Reset the cached result value (mainly for testing).\n */\nexport function isMac(reset) {\n var _a;\n if (typeof isMacResult === 'undefined' || reset) {\n var win = getWindow();\n // In certain SSR frameworks, `window` will be defined even on the server but `navigator` will be undefined\n var userAgent = (_a = win === null || win === void 0 ? void 0 : win.navigator) === null || _a === void 0 ? void 0 : _a.userAgent;\n isMacResult = !!userAgent && userAgent.indexOf('Macintosh') !== -1;\n }\n return !!isMacResult;\n}\n//# sourceMappingURL=osDetector.js.map","/**\n * Detects whether an element's content has horizontal overflow\n *\n * @public\n * @param element - Element to check for overflow\n * @returns True if element's content overflows\n */\nexport function hasHorizontalOverflow(element) {\n return element.clientWidth < element.scrollWidth;\n}\n/**\n * Detects whether an element's content has vertical overflow\n *\n * @public\n * @param element - Element to check for overflow\n * @returns True if element's content overflows\n */\nexport function hasVerticalOverflow(element) {\n return element.clientHeight < element.scrollHeight;\n}\n/**\n * Detects whether an element's content has overflow in any direction\n *\n * @public\n * @param element - Element to check for overflow\n * @returns True if element's content overflows\n */\nexport function hasOverflow(element) {\n return hasHorizontalOverflow(element) || hasVerticalOverflow(element);\n}\n//# sourceMappingURL=overflow.js.map","import { createMemoizer } from '../memoize';\nfunction createComposedRenderFunction(outer) {\n var outerMemoizer = createMemoizer(function (inner) {\n var innerMemoizer = createMemoizer(function (defaultRender) {\n return function (innerProps) {\n return inner(innerProps, defaultRender);\n };\n });\n return function (outerProps, defaultRender) {\n return outer(outerProps, defaultRender ? innerMemoizer(defaultRender) : inner);\n };\n });\n return outerMemoizer;\n}\nvar memoizer = createMemoizer(createComposedRenderFunction);\n/**\n * Composes two 'render functions' to produce a final render function that renders\n * the outer function, passing the inner function as 'default render'. The inner function\n * is then passed the original 'default render' prop.\n * @public\n */\nexport function composeRenderFunction(outer, inner) {\n return memoizer(outer)(inner);\n}\n//# sourceMappingURL=composeRenderFunction.js.map","import { extendComponent } from './extendComponent';\n/**\n * Generates a function to be attached to a React component, which can be called\n * as a replacement to RAF. In-flight async calls will be auto canceled if the component\n * is unmounting before the async code is executed, preventing bugs where code\n * accesses things within the component after being unmounted.\n */\nexport var safeRequestAnimationFrame = function (component) {\n var activeTimeouts;\n return function (cb) {\n if (!activeTimeouts) {\n activeTimeouts = new Set();\n extendComponent(component, {\n componentWillUnmount: function () {\n activeTimeouts.forEach(function (id) { return cancelAnimationFrame(id); });\n },\n });\n }\n var timeoutId = requestAnimationFrame(function () {\n activeTimeouts.delete(timeoutId);\n cb();\n });\n activeTimeouts.add(timeoutId);\n };\n};\n//# sourceMappingURL=safeRequestAnimationFrame.js.map","export var SELECTION_CHANGE = 'change';\nexport var SELECTION_ITEMS_CHANGE = 'items-change';\n/**\n * {@docCategory Selection}\n */\nexport var SelectionMode;\n(function (SelectionMode) {\n SelectionMode[SelectionMode[\"none\"] = 0] = \"none\";\n SelectionMode[SelectionMode[\"single\"] = 1] = \"single\";\n SelectionMode[SelectionMode[\"multiple\"] = 2] = \"multiple\";\n})(SelectionMode || (SelectionMode = {}));\n/**\n * {@docCategory Selection}\n */\nexport var SelectionDirection;\n(function (SelectionDirection) {\n SelectionDirection[SelectionDirection[\"horizontal\"] = 0] = \"horizontal\";\n SelectionDirection[SelectionDirection[\"vertical\"] = 1] = \"vertical\";\n})(SelectionDirection || (SelectionDirection = {}));\n//# sourceMappingURL=Selection.types.js.map","import { SELECTION_CHANGE, SelectionMode, SELECTION_ITEMS_CHANGE } from './Selection.types';\nimport { EventGroup } from '../EventGroup';\n/**\n * {@docCategory Selection}\n */\nvar Selection = /** @class */ (function () {\n /**\n * Create a new Selection. If `TItem` does not have a `key` property, you must provide an options\n * object with a `getKey` implementation. Providing options is optional otherwise.\n * (At most one `options` object is accepted.)\n */\n function Selection() {\n var options = []; // Otherwise, arguments require options with `getKey`.\n for (var _i = 0 // Otherwise, arguments require options with `getKey`.\n ; _i < arguments.length // Otherwise, arguments require options with `getKey`.\n ; _i++ // Otherwise, arguments require options with `getKey`.\n ) {\n options[_i] = arguments[_i]; // Otherwise, arguments require options with `getKey`.\n }\n var _a = options[0] || {}, onSelectionChanged = _a.onSelectionChanged, onItemsChanged = _a.onItemsChanged, getKey = _a.getKey, _b = _a.canSelectItem, canSelectItem = _b === void 0 ? function () { return true; } : _b, items = _a.items, _c = _a.selectionMode, selectionMode = _c === void 0 ? SelectionMode.multiple : _c;\n this.mode = selectionMode;\n this._getKey = getKey || defaultGetKey;\n this._changeEventSuppressionCount = 0;\n this._exemptedCount = 0;\n this._anchoredIndex = 0;\n this._unselectableCount = 0;\n this._onSelectionChanged = onSelectionChanged;\n this._onItemsChanged = onItemsChanged;\n this._canSelectItem = canSelectItem;\n this._keyToIndexMap = {};\n this._isModal = false;\n this.setItems(items || [], true);\n this.count = this.getSelectedCount();\n }\n Selection.prototype.canSelectItem = function (item, index) {\n if (typeof index === 'number' && index < 0) {\n return false;\n }\n return this._canSelectItem(item, index);\n };\n Selection.prototype.getKey = function (item, index) {\n var key = this._getKey(item, index);\n return typeof key === 'number' || key ? \"\".concat(key) : '';\n };\n Selection.prototype.setChangeEvents = function (isEnabled, suppressChange) {\n this._changeEventSuppressionCount += isEnabled ? -1 : 1;\n if (this._changeEventSuppressionCount === 0 && this._hasChanged) {\n this._hasChanged = false;\n if (!suppressChange) {\n this._change();\n }\n }\n };\n Selection.prototype.isModal = function () {\n return this._isModal;\n };\n Selection.prototype.setModal = function (isModal) {\n if (this._isModal !== isModal) {\n this.setChangeEvents(false);\n this._isModal = isModal;\n if (!isModal) {\n this.setAllSelected(false);\n }\n this._change();\n this.setChangeEvents(true);\n }\n };\n /**\n * Selection needs the items, call this method to set them. If the set\n * of items is the same, this will re-evaluate selection and index maps.\n * Otherwise, shouldClear should be set to true, so that selection is\n * cleared.\n */\n Selection.prototype.setItems = function (items, shouldClear) {\n if (shouldClear === void 0) { shouldClear = true; }\n var newKeyToIndexMap = {};\n var newUnselectableIndices = {};\n var hasSelectionChanged = false;\n this.setChangeEvents(false);\n // Reset the unselectable count.\n this._unselectableCount = 0;\n var haveItemsChanged = false;\n // Build lookup table for quick selection evaluation.\n for (var i = 0; i < items.length; i++) {\n var item = items[i];\n if (item) {\n var key = this.getKey(item, i);\n if (key) {\n if (!haveItemsChanged && (!(key in this._keyToIndexMap) || this._keyToIndexMap[key] !== i)) {\n haveItemsChanged = true;\n }\n newKeyToIndexMap[key] = i;\n }\n }\n newUnselectableIndices[i] = item && !this.canSelectItem(item);\n if (newUnselectableIndices[i]) {\n this._unselectableCount++;\n }\n }\n if (shouldClear || items.length === 0) {\n this._setAllSelected(false, true);\n }\n // Check the exemption list for discrepencies.\n var newExemptedIndicies = {};\n var newExemptedCount = 0;\n for (var indexProperty in this._exemptedIndices) {\n if (this._exemptedIndices.hasOwnProperty(indexProperty)) {\n var index = Number(indexProperty);\n var item = this._items[index];\n var exemptKey = item ? this.getKey(item, Number(index)) : undefined;\n var newIndex = exemptKey ? newKeyToIndexMap[exemptKey] : index;\n if (newIndex === undefined) {\n // The item has likely been replaced or removed.\n hasSelectionChanged = true;\n }\n else {\n // We know the new index of the item. update the existing exemption table.\n newExemptedIndicies[newIndex] = true;\n newExemptedCount++;\n hasSelectionChanged = hasSelectionChanged || newIndex !== index;\n }\n }\n }\n if (this._items && this._exemptedCount === 0 && items.length !== this._items.length && this._isAllSelected) {\n // If everything was selected but the number of items has changed, selection has changed.\n hasSelectionChanged = true;\n }\n if (!haveItemsChanged) {\n for (var _i = 0, _a = Object.keys(this._keyToIndexMap); _i < _a.length; _i++) {\n var key = _a[_i];\n if (!(key in newKeyToIndexMap)) {\n haveItemsChanged = true;\n break;\n }\n }\n }\n this._exemptedIndices = newExemptedIndicies;\n this._exemptedCount = newExemptedCount;\n this._keyToIndexMap = newKeyToIndexMap;\n this._unselectableIndices = newUnselectableIndices;\n this._items = items;\n this._selectedItems = null;\n if (hasSelectionChanged) {\n this._updateCount();\n }\n if (haveItemsChanged) {\n EventGroup.raise(this, SELECTION_ITEMS_CHANGE);\n if (this._onItemsChanged) {\n this._onItemsChanged();\n }\n }\n if (hasSelectionChanged) {\n this._change();\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.getItems = function () {\n return this._items;\n };\n Selection.prototype.getSelection = function () {\n if (!this._selectedItems) {\n this._selectedItems = [];\n var items = this._items;\n if (items) {\n for (var i = 0; i < items.length; i++) {\n if (this.isIndexSelected(i)) {\n this._selectedItems.push(items[i]);\n }\n }\n }\n }\n return this._selectedItems;\n };\n Selection.prototype.getSelectedCount = function () {\n return this._isAllSelected\n ? this._items.length - this._exemptedCount - this._unselectableCount\n : this._exemptedCount;\n };\n Selection.prototype.getSelectedIndices = function () {\n if (!this._selectedIndices) {\n this._selectedIndices = [];\n var items = this._items;\n if (items) {\n for (var i = 0; i < items.length; i++) {\n if (this.isIndexSelected(i)) {\n this._selectedIndices.push(i);\n }\n }\n }\n }\n return this._selectedIndices;\n };\n Selection.prototype.getItemIndex = function (key) {\n var index = this._keyToIndexMap[key];\n return index !== null && index !== void 0 ? index : -1;\n };\n Selection.prototype.isRangeSelected = function (fromIndex, count) {\n if (count === 0) {\n return false;\n }\n var endIndex = fromIndex + count;\n for (var i = fromIndex; i < endIndex; i++) {\n if (!this.isIndexSelected(i)) {\n return false;\n }\n }\n return true;\n };\n Selection.prototype.isAllSelected = function () {\n var selectableCount = this._items.length - this._unselectableCount;\n // In single mode, we can only have a max of 1 item.\n if (this.mode === SelectionMode.single) {\n selectableCount = Math.min(selectableCount, 1);\n }\n return ((this.count > 0 && this._isAllSelected && this._exemptedCount === 0) ||\n (!this._isAllSelected && this._exemptedCount === selectableCount && selectableCount > 0));\n };\n Selection.prototype.isKeySelected = function (key) {\n var index = this._keyToIndexMap[key];\n return this.isIndexSelected(index);\n };\n Selection.prototype.isIndexSelected = function (index) {\n return !!((this.count > 0 && this._isAllSelected && !this._exemptedIndices[index] && !this._unselectableIndices[index]) ||\n (!this._isAllSelected && this._exemptedIndices[index]));\n };\n Selection.prototype.setAllSelected = function (isAllSelected) {\n if (isAllSelected && this.mode !== SelectionMode.multiple) {\n return;\n }\n var selectableCount = this._items ? this._items.length - this._unselectableCount : 0;\n this.setChangeEvents(false);\n if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {\n this._exemptedIndices = {};\n if (isAllSelected !== this._isAllSelected || this._exemptedCount > 0) {\n this._exemptedCount = 0;\n this._isAllSelected = isAllSelected;\n this._change();\n }\n this._updateCount();\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.setKeySelected = function (key, isSelected, shouldAnchor) {\n var index = this._keyToIndexMap[key];\n if (index >= 0) {\n this.setIndexSelected(index, isSelected, shouldAnchor);\n }\n };\n Selection.prototype.setIndexSelected = function (index, isSelected, shouldAnchor) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n // Clamp the index.\n index = Math.min(Math.max(0, index), this._items.length - 1);\n // No-op on out of bounds selections.\n if (index < 0 || index >= this._items.length) {\n return;\n }\n this.setChangeEvents(false);\n var isExempt = this._exemptedIndices[index];\n var canSelect = !this._unselectableIndices[index];\n if (canSelect) {\n if (isSelected && this.mode === SelectionMode.single) {\n // If this is single-select, the previous selection should be removed.\n this._setAllSelected(false, true);\n }\n // Determine if we need to remove the exemption.\n if (isExempt && ((isSelected && this._isAllSelected) || (!isSelected && !this._isAllSelected))) {\n delete this._exemptedIndices[index];\n this._exemptedCount--;\n }\n // Determine if we need to add the exemption.\n if (!isExempt && ((isSelected && !this._isAllSelected) || (!isSelected && this._isAllSelected))) {\n this._exemptedIndices[index] = true;\n this._exemptedCount++;\n }\n if (shouldAnchor) {\n this._anchoredIndex = index;\n }\n }\n this._updateCount();\n this.setChangeEvents(true);\n };\n Selection.prototype.setRangeSelected = function (fromIndex, count, isSelected, shouldAnchor) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n // Clamp the index.\n fromIndex = Math.min(Math.max(0, fromIndex), this._items.length - 1);\n // Clamp the range.\n count = Math.min(Math.max(0, count), this._items.length - fromIndex);\n // No-op on out of bounds selections.\n if (fromIndex < 0 || fromIndex >= this._items.length || count === 0) {\n return;\n }\n this.setChangeEvents(false);\n var anchorIndex = this._anchoredIndex || 0;\n var startIndex = fromIndex;\n var endIndex = fromIndex + count - 1;\n var newAnchorIndex = anchorIndex >= endIndex ? startIndex : endIndex;\n for (; startIndex <= endIndex; startIndex++) {\n this.setIndexSelected(startIndex, isSelected, shouldAnchor ? startIndex === newAnchorIndex : false);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.selectToKey = function (key, clearSelection) {\n this.selectToIndex(this._keyToIndexMap[key], clearSelection);\n };\n Selection.prototype.selectToRange = function (fromIndex, count, clearSelection) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n if (this.mode === SelectionMode.single) {\n if (count === 1) {\n this.setIndexSelected(fromIndex, true, true);\n }\n return;\n }\n var anchorIndex = this._anchoredIndex || 0;\n var startIndex = Math.min(fromIndex, anchorIndex);\n var endIndex = Math.max(fromIndex + count - 1, anchorIndex);\n this.setChangeEvents(false);\n if (clearSelection) {\n this._setAllSelected(false, true);\n }\n for (; startIndex <= endIndex; startIndex++) {\n this.setIndexSelected(startIndex, true, false);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.selectToIndex = function (index, clearSelection) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n if (this.mode === SelectionMode.single) {\n this.setIndexSelected(index, true, true);\n return;\n }\n var anchorIndex = this._anchoredIndex || 0;\n var startIndex = Math.min(index, anchorIndex);\n var endIndex = Math.max(index, anchorIndex);\n this.setChangeEvents(false);\n if (clearSelection) {\n this._setAllSelected(false, true);\n }\n for (; startIndex <= endIndex; startIndex++) {\n this.setIndexSelected(startIndex, true, false);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.toggleAllSelected = function () {\n this.setAllSelected(!this.isAllSelected());\n };\n Selection.prototype.toggleKeySelected = function (key) {\n this.setKeySelected(key, !this.isKeySelected(key), true);\n };\n Selection.prototype.toggleIndexSelected = function (index) {\n this.setIndexSelected(index, !this.isIndexSelected(index), true);\n };\n Selection.prototype.toggleRangeSelected = function (fromIndex, count) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n var isRangeSelected = this.isRangeSelected(fromIndex, count);\n var endIndex = fromIndex + count;\n if (this.mode === SelectionMode.single && count > 1) {\n return;\n }\n this.setChangeEvents(false);\n for (var i = fromIndex; i < endIndex; i++) {\n this.setIndexSelected(i, !isRangeSelected, false);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype._updateCount = function (preserveModalState) {\n if (preserveModalState === void 0) { preserveModalState = false; }\n var count = this.getSelectedCount();\n if (count !== this.count) {\n this.count = count;\n this._change();\n }\n if (!this.count && !preserveModalState) {\n this.setModal(false);\n }\n };\n Selection.prototype._setAllSelected = function (isAllSelected, preserveModalState) {\n if (preserveModalState === void 0) { preserveModalState = false; }\n if (isAllSelected && this.mode !== SelectionMode.multiple) {\n return;\n }\n var selectableCount = this._items ? this._items.length - this._unselectableCount : 0;\n this.setChangeEvents(false);\n if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {\n this._exemptedIndices = {};\n if (isAllSelected !== this._isAllSelected || this._exemptedCount > 0) {\n this._exemptedCount = 0;\n this._isAllSelected = isAllSelected;\n this._change();\n }\n this._updateCount(preserveModalState);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype._change = function () {\n if (this._changeEventSuppressionCount === 0) {\n this._selectedItems = null;\n this._selectedIndices = undefined;\n EventGroup.raise(this, SELECTION_CHANGE);\n if (this._onSelectionChanged) {\n this._onSelectionChanged();\n }\n }\n else {\n this._hasChanged = true;\n }\n };\n return Selection;\n}());\nexport { Selection };\nfunction defaultGetKey(item, index) {\n // 0 may be used as a key\n var _a = (item || {}).key, key = _a === void 0 ? \"\".concat(index) : _a;\n return key;\n}\n//# sourceMappingURL=Selection.js.map","// Regex that finds { and } so they can be removed on a lookup for string format\nvar FORMAT_ARGS_REGEX = /[\\{\\}]/g;\n// Regex that finds {#} so it can be replaced by the arguments in string format\nvar FORMAT_REGEX = /\\{\\d+\\}/g;\n/**\n * String format method, used for scenarios where at runtime you\n * need to evaluate a formatted string given a tokenized string. This\n * usually only is needed in localization scenarios.\n\n * @example\n * ```tsx\n * \"I love {0} every {1}\".format(\"CXP\")\n * ```\n * will result in a Debug Exception.\n *\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function format(s) {\n var values = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n values[_i - 1] = arguments[_i];\n }\n var args = values;\n // Callback match function\n function replaceFunc(match) {\n // looks up in the args\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var replacement = args[match.replace(FORMAT_ARGS_REGEX, '')];\n // catches undefined in nondebug and null in debug and nondebug\n if (replacement === null || replacement === undefined) {\n replacement = '';\n }\n return replacement;\n }\n return s.replace(FORMAT_REGEX, replaceFunc);\n}\n//# sourceMappingURL=string.js.map","import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { concatStyleSetsWithProps } from '@fluentui/merge-styles';\nimport { useCustomizationSettings } from './customizations/useCustomizationSettings';\nvar DefaultFields = ['theme', 'styles'];\nexport function styled(Component, baseStyles, getProps, customizable, pure) {\n customizable = customizable || { scope: '', fields: undefined };\n var scope = customizable.scope, _a = customizable.fields, fields = _a === void 0 ? DefaultFields : _a;\n var Wrapped = React.forwardRef(function (props, forwardedRef) {\n var styles = React.useRef();\n var settings = useCustomizationSettings(fields, scope);\n var customizedStyles = settings.styles, dir = settings.dir, rest = __rest(settings, [\"styles\", \"dir\"]);\n var additionalProps = getProps ? getProps(props) : undefined;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var cache = (styles.current && styles.current.__cachedInputs__) || [];\n var propStyles = props.styles;\n if (!styles.current || customizedStyles !== cache[1] || propStyles !== cache[2]) {\n // Using styled components as the Component arg will result in nested styling arrays.\n // The function can be cached and in order to prevent the props from being retained within it's closure\n // we pass in just the styles and not the entire props\n var concatenatedStyles = function (styleProps) {\n return concatStyleSetsWithProps(styleProps, baseStyles, customizedStyles, propStyles);\n };\n // The __cachedInputs__ array is attached to the function and consumed by the\n // classNamesFunction as a list of keys to include for memoizing classnames.\n concatenatedStyles.__cachedInputs__ = [\n baseStyles,\n customizedStyles,\n propStyles,\n ];\n concatenatedStyles.__noStyleOverride__ =\n !customizedStyles && !propStyles;\n styles.current = concatenatedStyles;\n }\n return React.createElement(Component, __assign({ ref: forwardedRef }, rest, additionalProps, props, { styles: styles.current }));\n });\n // Function.prototype.name is an ES6 feature, so the cast to any is required until we're\n // able to drop IE 11 support and compile with ES6 libs\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Wrapped.displayName = \"Styled\".concat(Component.displayName || Component.name);\n // This preserves backwards compatibility.\n var pureComponent = pure ? React.memo(Wrapped) : Wrapped;\n // Check if the wrapper has a displayName after it has been memoized. Then assign it to the pure component.\n if (Wrapped.displayName) {\n pureComponent.displayName = Wrapped.displayName;\n }\n return pureComponent;\n}\n//# sourceMappingURL=styled.js.map","import { getWindow } from './dom/getWindow';\nexport var isIE11 = function () {\n var _a;\n var win = getWindow();\n if (!((_a = win === null || win === void 0 ? void 0 : win.navigator) === null || _a === void 0 ? void 0 : _a.userAgent)) {\n return false;\n }\n return win.navigator.userAgent.indexOf('rv:11.0') > -1;\n};\n//# sourceMappingURL=ie11Detector.js.map","import { __assign } from \"tslib\";\n/**\n * Function to apply default values to a component props object. This function is intended for function components,\n * to maintain parity with the `defaultProps` feature of class components. It accounts for properties that are\n * specified, but undefined.\n * @param defaultProps- An object with default values for various properties\n * @param propsWithoutDefaults- The props object passed into the component\n */\nexport function getPropsWithDefaults(defaultProps, propsWithoutDefaults) {\n var props = __assign({}, propsWithoutDefaults);\n for (var _i = 0, _a = Object.keys(defaultProps); _i < _a.length; _i++) {\n var key = _a[_i];\n if (props[key] === undefined) {\n props[key] = defaultProps[key];\n }\n }\n return props;\n}\n//# sourceMappingURL=getPropsWithDefaults.js.map","import { arraysEqual } from './array';\n/**\n * Set up a ref resolver function given internal state managed for the ref.\n * @param local Set\n */\nvar createResolver = function (local) {\n return function (newValue) {\n for (var _i = 0, _a = local.refs; _i < _a.length; _i++) {\n var ref = _a[_i];\n if (typeof ref === 'function') {\n ref(newValue);\n }\n else if (ref) {\n // work around the immutability of the React.Ref type\n ref.current = newValue;\n }\n }\n };\n};\n/**\n * Helper to merge refs from within class components.\n */\nexport var createMergedRef = function (value) {\n var local = {\n refs: [],\n };\n return function () {\n var newRefs = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n newRefs[_i] = arguments[_i];\n }\n if (!local.resolver || !arraysEqual(local.refs, newRefs)) {\n local.resolver = createResolver(local);\n }\n local.refs = newRefs;\n return local.resolver;\n };\n};\n//# sourceMappingURL=createMergedRef.js.map","import * as React from 'react';\nimport { canUseDOM } from './dom/canUseDOM';\n/**\n * React currently throws a warning when using `useLayoutEffect` on the server. To get around it,\n * this hook calls `useEffect` on the server (no-op) and `useLayoutEffect` in the browser.\n *\n * Prefer `useEffect` unless you have a specific need to do something after mount and before paint,\n * such as to avoid a render flash for certain operations.\n *\n * Server-side rendering is detected based on `canUseDOM` from `@fluentui/utilities`.\n *\n * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\n * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js\n */\n// eslint-disable-next-line no-restricted-properties\nexport var useIsomorphicLayoutEffect = canUseDOM() ? React.useLayoutEffect : React.useEffect;\n//# sourceMappingURL=useIsomorphicLayoutEffect.js.map","import { __assign } from \"tslib\";\nimport { GlobalSettings, warn } from '@fluentui/utilities';\nimport { fontFace, mergeStyles, Stylesheet } from '@fluentui/merge-styles';\nvar ICON_SETTING_NAME = 'icons';\nvar _iconSettings = GlobalSettings.getValue(ICON_SETTING_NAME, {\n __options: {\n disableWarnings: false,\n warnOnMissingIcons: true,\n },\n __remapped: {},\n});\n// Reset icon registration on stylesheet resets.\nvar stylesheet = Stylesheet.getInstance();\nif (stylesheet && stylesheet.onReset) {\n stylesheet.onReset(function () {\n for (var name_1 in _iconSettings) {\n if (_iconSettings.hasOwnProperty(name_1) && !!_iconSettings[name_1].subset) {\n _iconSettings[name_1].subset.className = undefined;\n }\n }\n });\n}\n/**\n * Normalizes an icon name for consistent mapping.\n * Current implementation is to convert the icon name to lower case.\n *\n * @param name - Icon name to normalize.\n * @returns {string} Normalized icon name to use for indexing and mapping.\n */\nvar normalizeIconName = function (name) { return name.toLowerCase(); };\n/**\n * Registers a given subset of icons.\n *\n * @param iconSubset - the icon subset definition.\n */\nexport function registerIcons(iconSubset, options) {\n var subset = __assign(__assign({}, iconSubset), { isRegistered: false, className: undefined });\n var icons = iconSubset.icons;\n // Grab options, optionally mix user provided ones on top.\n options = options ? __assign(__assign({}, _iconSettings.__options), options) : _iconSettings.__options;\n for (var iconName in icons) {\n if (icons.hasOwnProperty(iconName)) {\n var code = icons[iconName];\n var normalizedIconName = normalizeIconName(iconName);\n if (_iconSettings[normalizedIconName]) {\n _warnDuplicateIcon(iconName);\n }\n else {\n _iconSettings[normalizedIconName] = {\n code: code,\n subset: subset,\n };\n }\n }\n }\n}\n/**\n * Unregisters icons by name.\n *\n * @param iconNames - List of icons to unregister.\n */\nexport function unregisterIcons(iconNames) {\n var options = _iconSettings.__options;\n var _loop_1 = function (iconName) {\n var normalizedIconName = normalizeIconName(iconName);\n if (_iconSettings[normalizedIconName]) {\n delete _iconSettings[normalizedIconName];\n }\n else {\n // Warn that we are trying to delete an icon that doesn't exist\n if (!options.disableWarnings) {\n warn(\"The icon \\\"\".concat(iconName, \"\\\" tried to unregister but was not registered.\"));\n }\n }\n // Delete any aliases for this iconName\n if (_iconSettings.__remapped[normalizedIconName]) {\n delete _iconSettings.__remapped[normalizedIconName];\n }\n // Delete any items that were an alias for this iconName\n Object.keys(_iconSettings.__remapped).forEach(function (key) {\n if (_iconSettings.__remapped[key] === normalizedIconName) {\n delete _iconSettings.__remapped[key];\n }\n });\n };\n for (var _i = 0, iconNames_1 = iconNames; _i < iconNames_1.length; _i++) {\n var iconName = iconNames_1[_i];\n _loop_1(iconName);\n }\n}\n/**\n * Remaps one icon name to another.\n */\nexport function registerIconAlias(iconName, mappedToName) {\n _iconSettings.__remapped[normalizeIconName(iconName)] = normalizeIconName(mappedToName);\n}\n/**\n * Gets an icon definition. If an icon is requested but the subset has yet to be registered,\n * it will get registered immediately.\n *\n * @public\n * @param name - Name of icon.\n */\nexport function getIcon(name) {\n var icon = undefined;\n var options = _iconSettings.__options;\n name = name ? normalizeIconName(name) : '';\n name = _iconSettings.__remapped[name] || name;\n if (name) {\n icon = _iconSettings[name];\n if (icon) {\n var subset = icon.subset;\n if (subset && subset.fontFace) {\n if (!subset.isRegistered) {\n fontFace(subset.fontFace);\n subset.isRegistered = true;\n }\n if (!subset.className) {\n subset.className = mergeStyles(subset.style, {\n fontFamily: subset.fontFace.fontFamily,\n fontWeight: subset.fontFace.fontWeight || 'normal',\n fontStyle: subset.fontFace.fontStyle || 'normal',\n });\n }\n }\n }\n else {\n // eslint-disable-next-line deprecation/deprecation\n if (!options.disableWarnings && options.warnOnMissingIcons) {\n warn(\"The icon \\\"\".concat(name, \"\\\" was used but not registered. See https://github.com/microsoft/fluentui/wiki/Using-icons for more information.\"));\n }\n }\n }\n return icon;\n}\n/**\n * Sets the icon options.\n *\n * @public\n */\nexport function setIconOptions(options) {\n _iconSettings.__options = __assign(__assign({}, _iconSettings.__options), options);\n}\nvar _missingIcons = [];\nvar _missingIconsTimer = undefined;\nfunction _warnDuplicateIcon(iconName) {\n var options = _iconSettings.__options;\n var warningDelay = 2000;\n var maxIconsInMessage = 10;\n if (!options.disableWarnings) {\n _missingIcons.push(iconName);\n if (_missingIconsTimer === undefined) {\n _missingIconsTimer = setTimeout(function () {\n warn(\"Some icons were re-registered. Applications should only call registerIcons for any given \" +\n \"icon once. Redefining what an icon is may have unintended consequences. Duplicates \" +\n \"include: \\n\" +\n _missingIcons.slice(0, maxIconsInMessage).join(', ') +\n (_missingIcons.length > maxIconsInMessage ? \" (+ \".concat(_missingIcons.length - maxIconsInMessage, \" more)\") : ''));\n _missingIconsTimer = undefined;\n _missingIcons = [];\n }, warningDelay);\n }\n }\n}\n//# sourceMappingURL=icons.js.map","import { __assign } from \"tslib\";\n/** Generates all the semantic slot colors based on the theme so far\n * We'll use these as fallbacks for semantic slots that the passed in theme did not define.\n * The caller must still mix in the customized semantic slots at the end.\n */\nexport function makeSemanticColors(p, e, s, isInverted, depComments) {\n if (depComments === void 0) { depComments = false; }\n var semanticColors = __assign({ primaryButtonBorder: 'transparent', errorText: !isInverted ? '#a4262c' : '#F1707B', messageText: !isInverted ? '#323130' : '#F3F2F1', messageLink: !isInverted ? '#005A9E' : '#6CB8F6', messageLinkHovered: !isInverted ? '#004578' : '#82C7FF', infoIcon: !isInverted ? '#605e5c' : '#C8C6C4', errorIcon: !isInverted ? '#A80000' : '#F1707B', blockingIcon: !isInverted ? '#FDE7E9' : '#442726', warningIcon: !isInverted ? '#797775' : '#C8C6C4', severeWarningIcon: !isInverted ? '#D83B01' : '#FCE100', successIcon: !isInverted ? '#107C10' : '#92C353', infoBackground: !isInverted ? '#f3f2f1' : '#323130', errorBackground: !isInverted ? '#FDE7E9' : '#442726', blockingBackground: !isInverted ? '#FDE7E9' : '#442726', warningBackground: !isInverted ? '#FFF4CE' : '#433519', severeWarningBackground: !isInverted ? '#FED9CC' : '#4F2A0F', successBackground: !isInverted ? '#DFF6DD' : '#393D1B', \n // deprecated\n warningHighlight: !isInverted ? '#ffb900' : '#fff100', successText: !isInverted ? '#107C10' : '#92c353' }, s);\n var fullSemanticColors = getSemanticColors(p, e, semanticColors, isInverted);\n return _fixDeprecatedSlots(fullSemanticColors, depComments);\n}\n/**\n * Map partial platte and effects to partial semantic colors.\n */\nexport function getSemanticColors(p, e, s, isInverted, depComments) {\n if (depComments === void 0) { depComments = false; }\n var result = {};\n // map palette\n var _a = p || {}, white = _a.white, black = _a.black, themePrimary = _a.themePrimary, themeDark = _a.themeDark, themeDarker = _a.themeDarker, themeDarkAlt = _a.themeDarkAlt, themeLighter = _a.themeLighter, neutralLight = _a.neutralLight, neutralLighter = _a.neutralLighter, neutralDark = _a.neutralDark, neutralQuaternary = _a.neutralQuaternary, neutralQuaternaryAlt = _a.neutralQuaternaryAlt, neutralPrimary = _a.neutralPrimary, neutralSecondary = _a.neutralSecondary, neutralSecondaryAlt = _a.neutralSecondaryAlt, neutralTertiary = _a.neutralTertiary, neutralTertiaryAlt = _a.neutralTertiaryAlt, neutralLighterAlt = _a.neutralLighterAlt, accent = _a.accent;\n if (white) {\n result.bodyBackground = white;\n result.bodyFrameBackground = white;\n result.accentButtonText = white;\n result.buttonBackground = white;\n result.primaryButtonText = white;\n result.primaryButtonTextHovered = white;\n result.primaryButtonTextPressed = white;\n result.inputBackground = white;\n result.inputForegroundChecked = white;\n result.listBackground = white;\n result.menuBackground = white;\n result.cardStandoutBackground = white;\n }\n if (black) {\n result.bodyTextChecked = black;\n result.buttonTextCheckedHovered = black;\n }\n if (themePrimary) {\n result.link = themePrimary;\n result.primaryButtonBackground = themePrimary;\n result.inputBackgroundChecked = themePrimary;\n result.inputIcon = themePrimary;\n result.inputFocusBorderAlt = themePrimary;\n result.menuIcon = themePrimary;\n result.menuHeader = themePrimary;\n result.accentButtonBackground = themePrimary;\n }\n if (themeDark) {\n result.primaryButtonBackgroundPressed = themeDark;\n result.inputBackgroundCheckedHovered = themeDark;\n result.inputIconHovered = themeDark;\n }\n if (themeDarker) {\n result.linkHovered = themeDarker;\n }\n if (themeDarkAlt) {\n result.primaryButtonBackgroundHovered = themeDarkAlt;\n }\n if (themeLighter) {\n result.inputPlaceholderBackgroundChecked = themeLighter;\n }\n if (neutralLight) {\n result.bodyBackgroundChecked = neutralLight;\n result.bodyFrameDivider = neutralLight;\n result.bodyDivider = neutralLight;\n result.variantBorder = neutralLight;\n result.buttonBackgroundCheckedHovered = neutralLight;\n result.buttonBackgroundPressed = neutralLight;\n result.listItemBackgroundChecked = neutralLight;\n result.listHeaderBackgroundPressed = neutralLight;\n result.menuItemBackgroundPressed = neutralLight;\n // eslint-disable-next-line deprecation/deprecation\n result.menuItemBackgroundChecked = neutralLight;\n }\n if (neutralLighter) {\n result.bodyBackgroundHovered = neutralLighter;\n result.buttonBackgroundHovered = neutralLighter;\n result.buttonBackgroundDisabled = neutralLighter;\n result.buttonBorderDisabled = neutralLighter;\n result.primaryButtonBackgroundDisabled = neutralLighter;\n result.disabledBackground = neutralLighter;\n result.listItemBackgroundHovered = neutralLighter;\n result.listHeaderBackgroundHovered = neutralLighter;\n result.menuItemBackgroundHovered = neutralLighter;\n }\n if (neutralQuaternary) {\n result.primaryButtonTextDisabled = neutralQuaternary;\n result.disabledSubtext = neutralQuaternary;\n }\n if (neutralQuaternaryAlt) {\n result.listItemBackgroundCheckedHovered = neutralQuaternaryAlt;\n }\n if (neutralTertiary) {\n result.disabledBodyText = neutralTertiary;\n result.variantBorderHovered = (s === null || s === void 0 ? void 0 : s.variantBorderHovered) || neutralTertiary;\n result.buttonTextDisabled = neutralTertiary;\n result.inputIconDisabled = neutralTertiary;\n result.disabledText = neutralTertiary;\n }\n if (neutralPrimary) {\n result.bodyText = neutralPrimary;\n result.actionLink = neutralPrimary;\n result.buttonText = neutralPrimary;\n result.inputBorderHovered = neutralPrimary;\n result.inputText = neutralPrimary;\n result.listText = neutralPrimary;\n result.menuItemText = neutralPrimary;\n }\n if (neutralLighterAlt) {\n result.bodyStandoutBackground = neutralLighterAlt;\n result.defaultStateBackground = neutralLighterAlt;\n }\n if (neutralDark) {\n result.actionLinkHovered = neutralDark;\n result.buttonTextHovered = neutralDark;\n result.buttonTextChecked = neutralDark;\n result.buttonTextPressed = neutralDark;\n result.inputTextHovered = neutralDark;\n result.menuItemTextHovered = neutralDark;\n }\n if (neutralSecondary) {\n result.bodySubtext = neutralSecondary;\n result.focusBorder = neutralSecondary;\n result.inputBorder = neutralSecondary;\n result.smallInputBorder = neutralSecondary;\n result.inputPlaceholderText = neutralSecondary;\n }\n if (neutralSecondaryAlt) {\n result.buttonBorder = neutralSecondaryAlt;\n }\n if (neutralTertiaryAlt) {\n result.disabledBodySubtext = neutralTertiaryAlt;\n result.disabledBorder = neutralTertiaryAlt;\n result.buttonBackgroundChecked = neutralTertiaryAlt;\n result.menuDivider = neutralTertiaryAlt;\n }\n if (accent) {\n result.accentButtonBackground = accent;\n }\n // map effects\n if (e === null || e === void 0 ? void 0 : e.elevation4) {\n result.cardShadow = e.elevation4;\n }\n if (!isInverted && (e === null || e === void 0 ? void 0 : e.elevation8)) {\n result.cardShadowHovered = e.elevation8;\n }\n else if (result.variantBorderHovered) {\n result.cardShadowHovered = '0 0 1px ' + result.variantBorderHovered;\n }\n result = __assign(__assign({}, result), s);\n return result;\n}\nfunction _fixDeprecatedSlots(s, depComments) {\n // Add @deprecated tag as comment if enabled\n var dep = '';\n if (depComments === true) {\n dep = ' /* @deprecated */';\n }\n /* eslint-disable deprecation/deprecation */\n s.listTextColor = s.listText + dep;\n s.menuItemBackgroundChecked += dep;\n s.warningHighlight += dep;\n s.warningText = s.messageText + dep;\n s.successText += dep;\n /* eslint-enable deprecation/deprecation */\n return s;\n}\n//# sourceMappingURL=makeSemanticColors.js.map","import { merge } from '@fluentui/utilities';\nimport { getSemanticColors } from './utilities/makeSemanticColors';\n/**\n * Merge a partial/full theme into a full theme and returns a merged full theme.\n */\nexport function mergeThemes(theme, partialTheme) {\n var _a, _b, _c;\n if (partialTheme === void 0) { partialTheme = {}; }\n var mergedTheme = merge({}, theme, partialTheme, {\n semanticColors: getSemanticColors(partialTheme.palette, partialTheme.effects, partialTheme.semanticColors, partialTheme.isInverted === undefined ? theme.isInverted : partialTheme.isInverted),\n });\n if (((_a = partialTheme.palette) === null || _a === void 0 ? void 0 : _a.themePrimary) && !((_b = partialTheme.palette) === null || _b === void 0 ? void 0 : _b.accent)) {\n mergedTheme.palette.accent = partialTheme.palette.themePrimary;\n }\n if (partialTheme.defaultFontStyle) {\n for (var _i = 0, _d = Object.keys(mergedTheme.fonts); _i < _d.length; _i++) {\n var fontStyle = _d[_i];\n mergedTheme.fonts[fontStyle] = merge(mergedTheme.fonts[fontStyle], partialTheme.defaultFontStyle, (_c = partialTheme === null || partialTheme === void 0 ? void 0 : partialTheme.fonts) === null || _c === void 0 ? void 0 : _c[fontStyle]);\n }\n }\n return mergedTheme;\n}\n//# sourceMappingURL=mergeThemes.js.map","// When adding or removing a color, make sure you keep this consistent with IColorClassNames\n// by adding the color variants.\nexport var DefaultPalette = {\n themeDarker: '#004578',\n themeDark: '#005a9e',\n themeDarkAlt: '#106ebe',\n themePrimary: '#0078d4',\n themeSecondary: '#2b88d8',\n themeTertiary: '#71afe5',\n themeLight: '#c7e0f4',\n themeLighter: '#deecf9',\n themeLighterAlt: '#eff6fc',\n black: '#000000',\n blackTranslucent40: 'rgba(0,0,0,.4)',\n neutralDark: '#201f1e',\n neutralPrimary: '#323130',\n neutralPrimaryAlt: '#3b3a39',\n neutralSecondary: '#605e5c',\n neutralSecondaryAlt: '#8a8886',\n neutralTertiary: '#a19f9d',\n neutralTertiaryAlt: '#c8c6c4',\n neutralQuaternary: '#d2d0ce',\n neutralQuaternaryAlt: '#e1dfdd',\n neutralLight: '#edebe9',\n neutralLighter: '#f3f2f1',\n neutralLighterAlt: '#faf9f8',\n accent: '#0078d4',\n white: '#ffffff',\n whiteTranslucent40: 'rgba(255,255,255,.4)',\n yellowDark: '#d29200',\n yellow: '#ffb900',\n yellowLight: '#fff100',\n orange: '#d83b01',\n orangeLight: '#ea4300',\n orangeLighter: '#ff8c00',\n redDark: '#a4262c',\n red: '#e81123',\n magentaDark: '#5c005c',\n magenta: '#b4009e',\n magentaLight: '#e3008c',\n purpleDark: '#32145a',\n purple: '#5c2d91',\n purpleLight: '#b4a0ff',\n blueDark: '#002050',\n blueMid: '#00188f',\n blue: '#0078d4',\n blueLight: '#00bcf2',\n tealDark: '#004b50',\n teal: '#008272',\n tealLight: '#00b294',\n greenDark: '#004b1c',\n green: '#107c10',\n greenLight: '#bad80a',\n};\n//# sourceMappingURL=DefaultPalette.js.map","export var Depths;\n(function (Depths) {\n Depths.depth0 = '0 0 0 0 transparent';\n Depths.depth4 = '0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)';\n Depths.depth8 = '0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)';\n Depths.depth16 = '0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)';\n Depths.depth64 = '0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)';\n})(Depths || (Depths = {}));\n//# sourceMappingURL=FluentDepths.js.map","import { Depths } from './FluentDepths';\nexport var DefaultEffects = {\n elevation4: Depths.depth4,\n elevation8: Depths.depth8,\n elevation16: Depths.depth16,\n elevation64: Depths.depth64,\n roundedCorner2: '2px',\n roundedCorner4: '4px',\n roundedCorner6: '6px',\n};\n//# sourceMappingURL=DefaultEffects.js.map","export var DefaultSpacing = {\n s2: '4px',\n s1: '8px',\n m: '16px',\n l1: '20px',\n l2: '32px',\n};\n//# sourceMappingURL=DefaultSpacing.js.map","import { keyframes } from '@fluentui/merge-styles';\n/* Register the keyframes */\nvar EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';\nvar EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';\nvar DURATION_1 = '0.167s';\nvar DURATION_2 = '0.267s';\nvar DURATION_3 = '0.367s';\nvar DURATION_4 = '0.467s';\nvar FADE_IN = keyframes({\n from: { opacity: 0 },\n to: { opacity: 1 },\n});\nvar FADE_OUT = keyframes({\n from: { opacity: 1 },\n to: { opacity: 0, visibility: 'hidden' },\n});\nvar SLIDE_RIGHT_IN10 = _createSlideInX(-10);\nvar SLIDE_RIGHT_IN20 = _createSlideInX(-20);\nvar SLIDE_RIGHT_IN40 = _createSlideInX(-40);\nvar SLIDE_RIGHT_IN400 = _createSlideInX(-400);\nvar SLIDE_LEFT_IN10 = _createSlideInX(10);\nvar SLIDE_LEFT_IN20 = _createSlideInX(20);\nvar SLIDE_LEFT_IN40 = _createSlideInX(40);\nvar SLIDE_LEFT_IN400 = _createSlideInX(400);\nvar SLIDE_UP_IN10 = _createSlideInY(10);\nvar SLIDE_UP_IN20 = _createSlideInY(20);\nvar SLIDE_DOWN_IN10 = _createSlideInY(-10);\nvar SLIDE_DOWN_IN20 = _createSlideInY(-20);\nvar SLIDE_RIGHT_OUT10 = _createSlideOutX(10);\nvar SLIDE_RIGHT_OUT20 = _createSlideOutX(20);\nvar SLIDE_RIGHT_OUT40 = _createSlideOutX(40);\nvar SLIDE_RIGHT_OUT400 = _createSlideOutX(400);\nvar SLIDE_LEFT_OUT10 = _createSlideOutX(-10);\nvar SLIDE_LEFT_OUT20 = _createSlideOutX(-20);\nvar SLIDE_LEFT_OUT40 = _createSlideOutX(-40);\nvar SLIDE_LEFT_OUT400 = _createSlideOutX(-400);\nvar SLIDE_UP_OUT10 = _createSlideOutY(-10);\nvar SLIDE_UP_OUT20 = _createSlideOutY(-20);\nvar SLIDE_DOWN_OUT10 = _createSlideOutY(10);\nvar SLIDE_DOWN_OUT20 = _createSlideOutY(20);\nvar SCALE_UP100 = keyframes({\n from: { transform: 'scale3d(.98,.98,1)' },\n to: { transform: 'scale3d(1,1,1)' },\n});\nvar SCALE_DOWN98 = keyframes({\n from: { transform: 'scale3d(1,1,1)' },\n to: { transform: 'scale3d(.98,.98,1)' },\n});\nvar SCALE_DOWN100 = keyframes({\n from: { transform: 'scale3d(1.03,1.03,1)' },\n to: { transform: 'scale3d(1,1,1)' },\n});\nvar SCALE_UP103 = keyframes({\n from: { transform: 'scale3d(1,1,1)' },\n to: { transform: 'scale3d(1.03,1.03,1)' },\n});\nvar ROTATE90 = keyframes({\n from: { transform: 'rotateZ(0deg)' },\n to: { transform: 'rotateZ(90deg)' },\n});\nvar ROTATE_N90 = keyframes({\n from: { transform: 'rotateZ(0deg)' },\n to: { transform: 'rotateZ(-90deg)' },\n});\n/**\n * Exporting raw duraction values and easing functions to be used in custom animations\n */\nexport var AnimationVariables = {\n easeFunction1: EASING_FUNCTION_1,\n easeFunction2: EASING_FUNCTION_2,\n durationValue1: DURATION_1,\n durationValue2: DURATION_2,\n durationValue3: DURATION_3,\n durationValue4: DURATION_4,\n};\n/**\n * All Fabric standard animations, exposed as json objects referencing predefined\n * keyframes. These objects can be mixed in with other class definitions.\n */\nexport var AnimationStyles = {\n slideRightIn10: _createAnimation(\"\".concat(FADE_IN, \",\").concat(SLIDE_RIGHT_IN10), DURATION_3, EASING_FUNCTION_1),\n slideRightIn20: _createAnimation(\"\".concat(FADE_IN, \",\").concat(SLIDE_RIGHT_IN20), DURATION_3, EASING_FUNCTION_1),\n slideRightIn40: _createAnimation(\"\".concat(FADE_IN, \",\").concat(SLIDE_RIGHT_IN40), DURATION_3, EASING_FUNCTION_1),\n slideRightIn400: _createAnimation(\"\".concat(FADE_IN, \",\").concat(SLIDE_RIGHT_IN400), DURATION_3, EASING_FUNCTION_1),\n slideLeftIn10: _createAnimation(\"\".concat(FADE_IN, \",\").concat(SLIDE_LEFT_IN10), DURATION_3, EASING_FUNCTION_1),\n slideLeftIn20: _createAnimation(\"\".concat(FADE_IN, \",\").concat(SLIDE_LEFT_IN20), DURATION_3, EASING_FUNCTION_1),\n slideLeftIn40: _createAnimation(\"\".concat(FADE_IN, \",\").concat(SLIDE_LEFT_IN40), DURATION_3, EASING_FUNCTION_1),\n slideLeftIn400: _createAnimation(\"\".concat(FADE_IN, \",\").concat(SLIDE_LEFT_IN400), DURATION_3, EASING_FUNCTION_1),\n slideUpIn10: _createAnimation(\"\".concat(FADE_IN, \",\").concat(SLIDE_UP_IN10), DURATION_3, EASING_FUNCTION_1),\n slideUpIn20: _createAnimation(\"\".concat(FADE_IN, \",\").concat(SLIDE_UP_IN20), DURATION_3, EASING_FUNCTION_1),\n slideDownIn10: _createAnimation(\"\".concat(FADE_IN, \",\").concat(SLIDE_DOWN_IN10), DURATION_3, EASING_FUNCTION_1),\n slideDownIn20: _createAnimation(\"\".concat(FADE_IN, \",\").concat(SLIDE_DOWN_IN20), DURATION_3, EASING_FUNCTION_1),\n slideRightOut10: _createAnimation(\"\".concat(FADE_OUT, \",\").concat(SLIDE_RIGHT_OUT10), DURATION_3, EASING_FUNCTION_1),\n slideRightOut20: _createAnimation(\"\".concat(FADE_OUT, \",\").concat(SLIDE_RIGHT_OUT20), DURATION_3, EASING_FUNCTION_1),\n slideRightOut40: _createAnimation(\"\".concat(FADE_OUT, \",\").concat(SLIDE_RIGHT_OUT40), DURATION_3, EASING_FUNCTION_1),\n slideRightOut400: _createAnimation(\"\".concat(FADE_OUT, \",\").concat(SLIDE_RIGHT_OUT400), DURATION_3, EASING_FUNCTION_1),\n slideLeftOut10: _createAnimation(\"\".concat(FADE_OUT, \",\").concat(SLIDE_LEFT_OUT10), DURATION_3, EASING_FUNCTION_1),\n slideLeftOut20: _createAnimation(\"\".concat(FADE_OUT, \",\").concat(SLIDE_LEFT_OUT20), DURATION_3, EASING_FUNCTION_1),\n slideLeftOut40: _createAnimation(\"\".concat(FADE_OUT, \",\").concat(SLIDE_LEFT_OUT40), DURATION_3, EASING_FUNCTION_1),\n slideLeftOut400: _createAnimation(\"\".concat(FADE_OUT, \",\").concat(SLIDE_LEFT_OUT400), DURATION_3, EASING_FUNCTION_1),\n slideUpOut10: _createAnimation(\"\".concat(FADE_OUT, \",\").concat(SLIDE_UP_OUT10), DURATION_3, EASING_FUNCTION_1),\n slideUpOut20: _createAnimation(\"\".concat(FADE_OUT, \",\").concat(SLIDE_UP_OUT20), DURATION_3, EASING_FUNCTION_1),\n slideDownOut10: _createAnimation(\"\".concat(FADE_OUT, \",\").concat(SLIDE_DOWN_OUT10), DURATION_3, EASING_FUNCTION_1),\n slideDownOut20: _createAnimation(\"\".concat(FADE_OUT, \",\").concat(SLIDE_DOWN_OUT20), DURATION_3, EASING_FUNCTION_1),\n scaleUpIn100: _createAnimation(\"\".concat(FADE_IN, \",\").concat(SCALE_UP100), DURATION_3, EASING_FUNCTION_1),\n scaleDownIn100: _createAnimation(\"\".concat(FADE_IN, \",\").concat(SCALE_DOWN100), DURATION_3, EASING_FUNCTION_1),\n scaleUpOut103: _createAnimation(\"\".concat(FADE_OUT, \",\").concat(SCALE_UP103), DURATION_1, EASING_FUNCTION_2),\n scaleDownOut98: _createAnimation(\"\".concat(FADE_OUT, \",\").concat(SCALE_DOWN98), DURATION_1, EASING_FUNCTION_2),\n fadeIn100: _createAnimation(FADE_IN, DURATION_1, EASING_FUNCTION_2),\n fadeIn200: _createAnimation(FADE_IN, DURATION_2, EASING_FUNCTION_2),\n fadeIn400: _createAnimation(FADE_IN, DURATION_3, EASING_FUNCTION_2),\n fadeIn500: _createAnimation(FADE_IN, DURATION_4, EASING_FUNCTION_2),\n fadeOut100: _createAnimation(FADE_OUT, DURATION_1, EASING_FUNCTION_2),\n fadeOut200: _createAnimation(FADE_OUT, DURATION_2, EASING_FUNCTION_2),\n fadeOut400: _createAnimation(FADE_OUT, DURATION_3, EASING_FUNCTION_2),\n fadeOut500: _createAnimation(FADE_OUT, DURATION_4, EASING_FUNCTION_2),\n rotate90deg: _createAnimation(ROTATE90, '0.1s', EASING_FUNCTION_2),\n rotateN90deg: _createAnimation(ROTATE_N90, '0.1s', EASING_FUNCTION_2),\n // expandCollapse 100/200/400, delay 100/200\n};\nfunction _createAnimation(animationName, animationDuration, animationTimingFunction) {\n return {\n animationName: animationName,\n animationDuration: animationDuration,\n animationTimingFunction: animationTimingFunction,\n animationFillMode: 'both',\n };\n}\nfunction _createSlideInX(fromX) {\n return keyframes({\n from: { transform: \"translate3d(\".concat(fromX, \"px,0,0)\"), pointerEvents: 'none' },\n to: { transform: \"translate3d(0,0,0)\", pointerEvents: 'auto' },\n });\n}\nfunction _createSlideInY(fromY) {\n return keyframes({\n from: { transform: \"translate3d(0,\".concat(fromY, \"px,0)\"), pointerEvents: 'none' },\n to: { transform: \"translate3d(0,0,0)\", pointerEvents: 'auto' },\n });\n}\nfunction _createSlideOutX(toX) {\n return keyframes({\n from: { transform: \"translate3d(0,0,0)\" },\n to: { transform: \"translate3d(\".concat(toX, \"px,0,0)\") },\n });\n}\nfunction _createSlideOutY(toY) {\n return keyframes({\n from: { transform: \"translate3d(0,0,0)\" },\n to: { transform: \"translate3d(0,\".concat(toY, \"px,0)\") },\n });\n}\n//# sourceMappingURL=AnimationStyles.js.map","// Font face names to be registered.\nexport var LocalizedFontNames;\n(function (LocalizedFontNames) {\n LocalizedFontNames.Arabic = 'Segoe UI Web (Arabic)';\n LocalizedFontNames.Cyrillic = 'Segoe UI Web (Cyrillic)';\n LocalizedFontNames.EastEuropean = 'Segoe UI Web (East European)';\n LocalizedFontNames.Greek = 'Segoe UI Web (Greek)';\n LocalizedFontNames.Hebrew = 'Segoe UI Web (Hebrew)';\n LocalizedFontNames.Thai = 'Leelawadee UI Web';\n LocalizedFontNames.Vietnamese = 'Segoe UI Web (Vietnamese)';\n LocalizedFontNames.WestEuropean = 'Segoe UI Web (West European)';\n LocalizedFontNames.Selawik = 'Selawik Web';\n LocalizedFontNames.Armenian = 'Segoe UI Web (Armenian)';\n LocalizedFontNames.Georgian = 'Segoe UI Web (Georgian)';\n})(LocalizedFontNames || (LocalizedFontNames = {}));\n// Font families with fallbacks, for the general regions.\nexport var LocalizedFontFamilies;\n(function (LocalizedFontFamilies) {\n LocalizedFontFamilies.Arabic = \"'\".concat(LocalizedFontNames.Arabic, \"'\");\n LocalizedFontFamilies.ChineseSimplified = \"'Microsoft Yahei UI', Verdana, Simsun\";\n LocalizedFontFamilies.ChineseTraditional = \"'Microsoft Jhenghei UI', Pmingliu\";\n LocalizedFontFamilies.Cyrillic = \"'\".concat(LocalizedFontNames.Cyrillic, \"'\");\n LocalizedFontFamilies.EastEuropean = \"'\".concat(LocalizedFontNames.EastEuropean, \"'\");\n LocalizedFontFamilies.Greek = \"'\".concat(LocalizedFontNames.Greek, \"'\");\n LocalizedFontFamilies.Hebrew = \"'\".concat(LocalizedFontNames.Hebrew, \"'\");\n LocalizedFontFamilies.Hindi = \"'Nirmala UI'\";\n LocalizedFontFamilies.Japanese = \"'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka\";\n LocalizedFontFamilies.Korean = \"'Malgun Gothic', Gulim\";\n LocalizedFontFamilies.Selawik = \"'\".concat(LocalizedFontNames.Selawik, \"'\");\n LocalizedFontFamilies.Thai = \"'Leelawadee UI Web', 'Kmer UI'\";\n LocalizedFontFamilies.Vietnamese = \"'\".concat(LocalizedFontNames.Vietnamese, \"'\");\n LocalizedFontFamilies.WestEuropean = \"'\".concat(LocalizedFontNames.WestEuropean, \"'\");\n LocalizedFontFamilies.Armenian = \"'\".concat(LocalizedFontNames.Armenian, \"'\");\n LocalizedFontFamilies.Georgian = \"'\".concat(LocalizedFontNames.Georgian, \"'\");\n})(LocalizedFontFamilies || (LocalizedFontFamilies = {}));\n// Standard font sizes.\nexport var FontSizes;\n(function (FontSizes) {\n FontSizes.size10 = '10px';\n FontSizes.size12 = '12px';\n FontSizes.size14 = '14px';\n FontSizes.size16 = '16px';\n FontSizes.size18 = '18px';\n FontSizes.size20 = '20px';\n FontSizes.size24 = '24px';\n FontSizes.size28 = '28px';\n FontSizes.size32 = '32px';\n FontSizes.size42 = '42px';\n FontSizes.size68 = '68px';\n FontSizes.mini = '10px';\n FontSizes.xSmall = '10px';\n FontSizes.small = '12px';\n FontSizes.smallPlus = '12px';\n FontSizes.medium = '14px';\n FontSizes.mediumPlus = '16px';\n FontSizes.icon = '16px';\n FontSizes.large = '18px';\n FontSizes.xLarge = '20px';\n FontSizes.xLargePlus = '24px';\n FontSizes.xxLarge = '28px';\n FontSizes.xxLargePlus = '32px';\n FontSizes.superLarge = '42px';\n FontSizes.mega = '68px';\n})(FontSizes || (FontSizes = {}));\n// Standard font weights.\nexport var FontWeights;\n(function (FontWeights) {\n FontWeights.light = 100;\n FontWeights.semilight = 300;\n FontWeights.regular = 400;\n FontWeights.semibold = 600;\n FontWeights.bold = 700;\n})(FontWeights || (FontWeights = {}));\n// Standard Icon Sizes.\nexport var IconFontSizes;\n(function (IconFontSizes) {\n IconFontSizes.xSmall = '10px';\n IconFontSizes.small = '12px';\n IconFontSizes.medium = '16px';\n IconFontSizes.large = '20px';\n})(IconFontSizes || (IconFontSizes = {}));\n//# sourceMappingURL=FluentFonts.js.map","import { FontSizes, FontWeights, LocalizedFontFamilies, LocalizedFontNames } from './FluentFonts';\n// Fallback fonts, if specified system or web fonts are unavailable.\nvar FontFamilyFallbacks = \"'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif\";\n// By default, we favor system fonts for the default.\n// All localized fonts use a web font and never use the system font.\nvar defaultFontFamily = \"'Segoe UI', '\".concat(LocalizedFontNames.WestEuropean, \"'\");\n// Mapping of language prefix to to font family.\nvar LanguageToFontMap = {\n ar: LocalizedFontFamilies.Arabic,\n bg: LocalizedFontFamilies.Cyrillic,\n cs: LocalizedFontFamilies.EastEuropean,\n el: LocalizedFontFamilies.Greek,\n et: LocalizedFontFamilies.EastEuropean,\n he: LocalizedFontFamilies.Hebrew,\n hi: LocalizedFontFamilies.Hindi,\n hr: LocalizedFontFamilies.EastEuropean,\n hu: LocalizedFontFamilies.EastEuropean,\n ja: LocalizedFontFamilies.Japanese,\n kk: LocalizedFontFamilies.EastEuropean,\n ko: LocalizedFontFamilies.Korean,\n lt: LocalizedFontFamilies.EastEuropean,\n lv: LocalizedFontFamilies.EastEuropean,\n pl: LocalizedFontFamilies.EastEuropean,\n ru: LocalizedFontFamilies.Cyrillic,\n sk: LocalizedFontFamilies.EastEuropean,\n 'sr-latn': LocalizedFontFamilies.EastEuropean,\n th: LocalizedFontFamilies.Thai,\n tr: LocalizedFontFamilies.EastEuropean,\n uk: LocalizedFontFamilies.Cyrillic,\n vi: LocalizedFontFamilies.Vietnamese,\n 'zh-hans': LocalizedFontFamilies.ChineseSimplified,\n 'zh-hant': LocalizedFontFamilies.ChineseTraditional,\n hy: LocalizedFontFamilies.Armenian,\n ka: LocalizedFontFamilies.Georgian,\n};\nfunction _fontFamilyWithFallbacks(fontFamily) {\n return \"\".concat(fontFamily, \", \").concat(FontFamilyFallbacks);\n}\n/**\n * If there is a localized font for this language, return that.\n * Returns undefined if there is no localized font for that language.\n */\nfunction _getLocalizedFontFamily(language) {\n for (var lang in LanguageToFontMap) {\n if (LanguageToFontMap.hasOwnProperty(lang) && language && lang.indexOf(language) === 0) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return LanguageToFontMap[lang];\n }\n }\n return defaultFontFamily;\n}\nfunction _createFont(size, weight, fontFamily) {\n return {\n fontFamily: fontFamily,\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontSize: size,\n fontWeight: weight,\n };\n}\nexport function createFontStyles(localeCode) {\n var localizedFont = _getLocalizedFontFamily(localeCode);\n var fontFamilyWithFallback = _fontFamilyWithFallbacks(localizedFont);\n var fontStyles = {\n tiny: _createFont(FontSizes.mini, FontWeights.regular, fontFamilyWithFallback),\n xSmall: _createFont(FontSizes.xSmall, FontWeights.regular, fontFamilyWithFallback),\n small: _createFont(FontSizes.small, FontWeights.regular, fontFamilyWithFallback),\n smallPlus: _createFont(FontSizes.smallPlus, FontWeights.regular, fontFamilyWithFallback),\n medium: _createFont(FontSizes.medium, FontWeights.regular, fontFamilyWithFallback),\n mediumPlus: _createFont(FontSizes.mediumPlus, FontWeights.regular, fontFamilyWithFallback),\n large: _createFont(FontSizes.large, FontWeights.regular, fontFamilyWithFallback),\n xLarge: _createFont(FontSizes.xLarge, FontWeights.semibold, fontFamilyWithFallback),\n xLargePlus: _createFont(FontSizes.xLargePlus, FontWeights.semibold, fontFamilyWithFallback),\n xxLarge: _createFont(FontSizes.xxLarge, FontWeights.semibold, fontFamilyWithFallback),\n xxLargePlus: _createFont(FontSizes.xxLargePlus, FontWeights.semibold, fontFamilyWithFallback),\n superLarge: _createFont(FontSizes.superLarge, FontWeights.semibold, fontFamilyWithFallback),\n mega: _createFont(FontSizes.mega, FontWeights.semibold, fontFamilyWithFallback),\n };\n return fontStyles;\n}\n//# sourceMappingURL=createFontStyles.js.map","import { fontFace } from '@fluentui/merge-styles';\nimport { FontWeights, LocalizedFontFamilies, LocalizedFontNames } from './FluentFonts';\nimport { createFontStyles } from './createFontStyles';\nimport { getLanguage, getWindow } from '@fluentui/utilities';\n// Default urls.\nvar DefaultBaseUrl = 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets';\n// Standard font styling.\nexport var DefaultFontStyles = createFontStyles(getLanguage());\nfunction _registerFontFace(fontFamily, url, fontWeight, localFontName) {\n fontFamily = \"'\".concat(fontFamily, \"'\");\n var localFontSrc = localFontName !== undefined ? \"local('\".concat(localFontName, \"'),\") : '';\n fontFace({\n fontFamily: fontFamily,\n src: localFontSrc + \"url('\".concat(url, \".woff2') format('woff2'),\") + \"url('\".concat(url, \".woff') format('woff')\"),\n fontWeight: fontWeight,\n fontStyle: 'normal',\n fontDisplay: 'swap',\n });\n}\nfunction _registerFontFaceSet(baseUrl, fontFamily, cdnFolder, cdnFontName, localFontName) {\n if (cdnFontName === void 0) { cdnFontName = 'segoeui'; }\n var urlBase = \"\".concat(baseUrl, \"/\").concat(cdnFolder, \"/\").concat(cdnFontName);\n _registerFontFace(fontFamily, urlBase + '-light', FontWeights.light, localFontName && localFontName + ' Light');\n _registerFontFace(fontFamily, urlBase + '-semilight', FontWeights.semilight, localFontName && localFontName + ' SemiLight');\n _registerFontFace(fontFamily, urlBase + '-regular', FontWeights.regular, localFontName);\n _registerFontFace(fontFamily, urlBase + '-semibold', FontWeights.semibold, localFontName && localFontName + ' SemiBold');\n _registerFontFace(fontFamily, urlBase + '-bold', FontWeights.bold, localFontName && localFontName + ' Bold');\n}\nexport function registerDefaultFontFaces(baseUrl) {\n if (baseUrl) {\n var fontUrl = \"\".concat(baseUrl, \"/fonts\");\n // Produce @font-face definitions for all supported web fonts.\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Thai, 'leelawadeeui-thai', 'leelawadeeui');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Arabic, 'segoeui-arabic');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Cyrillic, 'segoeui-cyrillic');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.EastEuropean, 'segoeui-easteuropean');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Greek, 'segoeui-greek');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Hebrew, 'segoeui-hebrew');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Vietnamese, 'segoeui-vietnamese');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.WestEuropean, 'segoeui-westeuropean', 'segoeui', 'Segoe UI');\n _registerFontFaceSet(fontUrl, LocalizedFontFamilies.Selawik, 'selawik', 'selawik');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Armenian, 'segoeui-armenian');\n _registerFontFaceSet(fontUrl, LocalizedFontNames.Georgian, 'segoeui-georgian');\n // Leelawadee UI (Thai) does not have a 'light' weight, so we override\n // the font-face generated above to use the 'semilight' weight instead.\n _registerFontFace('Leelawadee UI Web', \"\".concat(fontUrl, \"/leelawadeeui-thai/leelawadeeui-semilight\"), FontWeights.light);\n // Leelawadee UI (Thai) does not have a 'semibold' weight, so we override\n // the font-face generated above to use the 'bold' weight instead.\n _registerFontFace('Leelawadee UI Web', \"\".concat(fontUrl, \"/leelawadeeui-thai/leelawadeeui-bold\"), FontWeights.semibold);\n }\n}\n/**\n * Reads the fontBaseUrl from window.FabricConfig.fontBaseUrl or falls back to a default.\n */\nfunction _getFontBaseUrl() {\n var _a, _b;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var fabricConfig = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.FabricConfig;\n return (_b = fabricConfig === null || fabricConfig === void 0 ? void 0 : fabricConfig.fontBaseUrl) !== null && _b !== void 0 ? _b : DefaultBaseUrl;\n}\n/**\n * Register the font faces.\n */\nregisterDefaultFontFaces(_getFontBaseUrl());\n//# sourceMappingURL=DefaultFontStyles.js.map","import { DefaultPalette } from './colors/index';\nimport { DefaultEffects } from './effects/index';\nimport { DefaultFontStyles } from './fonts/index';\nimport { mergeThemes } from './mergeThemes';\nimport { DefaultSpacing } from './spacing/index';\nimport { makeSemanticColors } from './utilities/makeSemanticColors';\n/**\n * Creates a custom theme definition.\n * @param theme - Partial theme object.\n * @param depComments - Whether to include deprecated tags as comments for deprecated slots.\n */\nexport function createTheme(theme, depComments) {\n if (theme === void 0) { theme = {}; }\n if (depComments === void 0) { depComments = false; }\n var isInverted = !!theme.isInverted;\n var baseTheme = {\n palette: DefaultPalette,\n effects: DefaultEffects,\n fonts: DefaultFontStyles,\n spacing: DefaultSpacing,\n isInverted: isInverted,\n disableGlobalClassNames: false,\n semanticColors: makeSemanticColors(DefaultPalette, DefaultEffects, undefined, isInverted, depComments),\n rtl: undefined,\n };\n return mergeThemes(baseTheme, theme);\n}\n//# sourceMappingURL=createTheme.js.map","export var HighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';\nexport var HighContrastSelectorWhite = \n// eslint-disable-next-line @fluentui/max-len\n'@media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light)';\nexport var HighContrastSelectorBlack = \n// eslint-disable-next-line @fluentui/max-len\n'@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)';\n/**\n * @deprecated Use `HighContrastSelector`\n */\nexport var EdgeChromiumHighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';\nexport var ScreenWidthMinSmall = 320;\nexport var ScreenWidthMinMedium = 480;\nexport var ScreenWidthMinLarge = 640;\nexport var ScreenWidthMinXLarge = 1024;\nexport var ScreenWidthMinXXLarge = 1366;\nexport var ScreenWidthMinXXXLarge = 1920;\nexport var ScreenWidthMaxSmall = ScreenWidthMinMedium - 1;\nexport var ScreenWidthMaxMedium = ScreenWidthMinLarge - 1;\nexport var ScreenWidthMaxLarge = ScreenWidthMinXLarge - 1;\nexport var ScreenWidthMaxXLarge = ScreenWidthMinXXLarge - 1;\nexport var ScreenWidthMaxXXLarge = ScreenWidthMinXXXLarge - 1;\nexport var ScreenWidthMinUhfMobile = 768;\nexport function getScreenSelector(min, max) {\n var minSelector = typeof min === 'number' ? \" and (min-width: \".concat(min, \"px)\") : '';\n var maxSelector = typeof max === 'number' ? \" and (max-width: \".concat(max, \"px)\") : '';\n return \"@media only screen\".concat(minSelector).concat(maxSelector);\n}\n/**\n * The style which turns off high contrast adjustment in browsers.\n */\nexport function getHighContrastNoAdjustStyle() {\n return {\n forcedColorAdjust: 'none',\n MsHighContrastAdjust: 'none',\n };\n}\n/**\n * The style which turns off high contrast adjustment in (only) Edge Chromium browser.\n * @deprecated Use `getHighContrastNoAdjustStyle`\n */\n// eslint-disable-next-line deprecation/deprecation\nexport function getEdgeChromiumNoHighContrastAdjustSelector() {\n var _a;\n return _a = {},\n // eslint-disable-next-line deprecation/deprecation\n _a[EdgeChromiumHighContrastSelector] = {\n forcedColorAdjust: 'none',\n MsHighContrastAdjust: 'none',\n },\n _a;\n}\n//# sourceMappingURL=CommonStyles.js.map","export var ZIndexes;\n(function (ZIndexes) {\n ZIndexes.Nav = 1;\n /**\n * @deprecated Do not use\n */\n ZIndexes.ScrollablePane = 1;\n ZIndexes.FocusStyle = 1;\n ZIndexes.Coachmark = 1000;\n ZIndexes.Layer = 1000000;\n ZIndexes.KeytipLayer = 1000001;\n})(ZIndexes || (ZIndexes = {}));\n//# sourceMappingURL=zIndexes.js.map","import { HighContrastSelector } from './CommonStyles';\nimport { IsFocusVisibleClassName } from '@fluentui/utilities';\nimport { ZIndexes } from './zIndexes';\nexport function getFocusStyle(theme, insetOrOptions, position, highContrastStyle, borderColor, outlineColor, isFocusedOnly, borderRadius) {\n if (typeof insetOrOptions === 'number' || !insetOrOptions) {\n return _getFocusStyleInternal(theme, {\n inset: insetOrOptions,\n position: position,\n highContrastStyle: highContrastStyle,\n borderColor: borderColor,\n outlineColor: outlineColor,\n isFocusedOnly: isFocusedOnly,\n borderRadius: borderRadius,\n });\n }\n else {\n return _getFocusStyleInternal(theme, insetOrOptions);\n }\n}\nfunction _getFocusStyleInternal(theme, options) {\n var _a, _b;\n if (options === void 0) { options = {}; }\n var borderRadius = options.borderRadius, _c = options.inset, inset = _c === void 0 ? 0 : _c, _d = options.width, width = _d === void 0 ? 1 : _d, _e = options.position, position = _e === void 0 ? 'relative' : _e, highContrastStyle = options.highContrastStyle, _f = options.borderColor, borderColor = _f === void 0 ? theme.palette.white : _f, _g = options.outlineColor, outlineColor = _g === void 0 ? theme.palette.neutralSecondary : _g, _h = options.isFocusedOnly, isFocusedOnly = _h === void 0 ? true : _h, pointerEvents = options.pointerEvents;\n return {\n // Clear browser-specific focus styles and use 'transparent' as placeholder for focus style.\n outline: 'transparent',\n // Requirement because pseudo-element is absolutely positioned.\n position: position,\n selectors: (_a = {\n // Clear the focus border in Firefox.\n // Reference: http://stackoverflow.com/a/199319/1436671\n '::-moz-focus-inner': {\n border: '0',\n }\n },\n // When the element that uses this mixin is in a :focus state, add a pseudo-element to\n // create a border.\n _a[\".\".concat(IsFocusVisibleClassName, \" &\").concat(isFocusedOnly ? ':focus' : '', \":after\")] = {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: pointerEvents,\n left: inset + 1,\n top: inset + 1,\n bottom: inset + 1,\n right: inset + 1,\n border: \"\".concat(width, \"px solid \").concat(borderColor),\n outline: \"\".concat(width, \"px solid \").concat(outlineColor),\n zIndex: ZIndexes.FocusStyle,\n borderRadius: borderRadius,\n selectors: (_b = {},\n _b[HighContrastSelector] = highContrastStyle,\n _b),\n },\n _a),\n };\n}\n/**\n * Generates style to clear browser specific focus styles.\n */\nexport function focusClear() {\n return {\n selectors: {\n '&::-moz-focus-inner': {\n // Clear the focus border in Firefox. Reference: http://stackoverflow.com/a/199319/1436671\n border: 0,\n },\n '&': {\n // Clear browser specific focus styles and use transparent as placeholder for focus style\n outline: 'transparent',\n },\n },\n };\n}\n/**\n * Generates a style which can be used to set a border on focus.\n *\n * @param theme - The theme object to use.\n * @param inset - The number of pixels to inset the border (default 0)\n * @param width - The border width in pixels (default 1)\n * @param color - Color of the outline (default `theme.palette.neutralSecondary`)\n * @returns The style object.\n */\nexport function getFocusOutlineStyle(theme, inset, width, color) {\n var _a;\n if (inset === void 0) { inset = 0; }\n if (width === void 0) { width = 1; }\n return {\n selectors: (_a = {},\n _a[\":global(\".concat(IsFocusVisibleClassName, \") &:focus\")] = {\n outline: \"\".concat(width, \" solid \").concat(color || theme.palette.neutralSecondary),\n outlineOffset: \"\".concat(-inset, \"px\"),\n },\n _a),\n };\n}\n/**\n * Generates text input border styles on focus.\n *\n * @param borderColor - Color of the border.\n * @param borderRadius - Radius of the border.\n * @param borderType - Type of the border.\n * @param borderPosition - Position of the border relative to the input element (default to -1\n * as it's the most common border width of the input element)\n * @returns The style object.\n */\nexport var getInputFocusStyle = function (borderColor, borderRadius, borderType, borderPosition) {\n var _a, _b, _c;\n if (borderType === void 0) { borderType = 'border'; }\n if (borderPosition === void 0) { borderPosition = -1; }\n var isBorderBottom = borderType === 'borderBottom';\n return {\n borderColor: borderColor,\n selectors: {\n ':after': (_a = {\n pointerEvents: 'none',\n content: \"''\",\n position: 'absolute',\n left: isBorderBottom ? 0 : borderPosition,\n top: borderPosition,\n bottom: borderPosition,\n right: isBorderBottom ? 0 : borderPosition\n },\n _a[borderType] = \"2px solid \".concat(borderColor),\n _a.borderRadius = borderRadius,\n _a.width = borderType === 'borderBottom' ? '100%' : undefined,\n _a.selectors = (_b = {},\n _b[HighContrastSelector] = (_c = {},\n _c[borderType === 'border' ? 'borderColor' : 'borderBottomColor'] = 'Highlight',\n _c),\n _b),\n _a),\n },\n };\n};\n//# sourceMappingURL=getFocusStyle.js.map","export var hiddenContentStyle = {\n position: 'absolute',\n width: 1,\n height: 1,\n margin: -1,\n padding: 0,\n border: 0,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n};\n//# sourceMappingURL=hiddenContentStyle.js.map","import { Stylesheet } from '@fluentui/merge-styles';\nimport { memoizeFunction } from '@fluentui/utilities';\n/**\n * Internal memoized function which simply takes in the class map and the\n * disable boolean. These immutable values can be memoized.\n */\nvar _getGlobalClassNames = memoizeFunction(function (classNames, disableGlobalClassNames) {\n var styleSheet = Stylesheet.getInstance();\n if (disableGlobalClassNames) {\n // disable global classnames\n return Object.keys(classNames).reduce(function (acc, className) {\n acc[className] = styleSheet.getClassName(classNames[className]);\n return acc;\n }, {});\n }\n // use global classnames\n return classNames;\n});\n/**\n * Checks for the `disableGlobalClassNames` property on the `theme` to determine if it should return `classNames`\n * Note that calls to this function are memoized.\n *\n * @param classNames - The collection of global class names that apply when the flag is false. Make sure to pass in\n * the same instance on each call to benefit from memoization.\n * @param theme - The theme to check the flag on\n * @param disableGlobalClassNames - Optional. Explicitly opt in/out of disabling global classnames. Defaults to false.\n */\nexport function getGlobalClassNames(classNames, theme, disableGlobalClassNames) {\n return _getGlobalClassNames(classNames, disableGlobalClassNames !== undefined ? disableGlobalClassNames : theme.disableGlobalClassNames);\n}\n//# sourceMappingURL=getGlobalClassNames.js.map","import { __assign } from \"tslib\";\nimport { Customizations, getWindow } from '@fluentui/utilities';\nimport { loadTheme as legacyLoadTheme } from '@microsoft/load-themed-styles';\nimport { createTheme } from '@fluentui/theme';\nexport { createTheme } from '@fluentui/theme';\nvar _theme = createTheme({});\nvar _onThemeChangeCallbacks = [];\nexport var ThemeSettingName = 'theme';\nexport function initializeThemeInCustomizations() {\n var _a;\n var _b, _c;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var win = getWindow();\n if ((_b = win === null || win === void 0 ? void 0 : win.FabricConfig) === null || _b === void 0 ? void 0 : _b.legacyTheme) {\n // does everything the `else` clause does and more, such as invoke legacy theming\n loadTheme(win.FabricConfig.legacyTheme);\n }\n else if (!Customizations.getSettings([ThemeSettingName]).theme) {\n if ((_c = win === null || win === void 0 ? void 0 : win.FabricConfig) === null || _c === void 0 ? void 0 : _c.theme) {\n _theme = createTheme(win.FabricConfig.theme);\n }\n // Set the default theme.\n Customizations.applySettings((_a = {}, _a[ThemeSettingName] = _theme, _a));\n }\n}\ninitializeThemeInCustomizations();\n/**\n * Gets the theme object\n * @param depComments - Whether to include deprecated tags as comments for deprecated slots.\n */\nexport function getTheme(depComments) {\n if (depComments === void 0) { depComments = false; }\n if (depComments === true) {\n _theme = createTheme({}, depComments);\n }\n return _theme;\n}\n/**\n * Registers a callback that gets called whenever the theme changes.\n * This should only be used when the component cannot automatically get theme changes through its state.\n * This will not register duplicate callbacks.\n */\nexport function registerOnThemeChangeCallback(callback) {\n if (_onThemeChangeCallbacks.indexOf(callback) === -1) {\n _onThemeChangeCallbacks.push(callback);\n }\n}\n/**\n * See registerOnThemeChangeCallback().\n * Removes previously registered callbacks.\n */\nexport function removeOnThemeChangeCallback(callback) {\n var i = _onThemeChangeCallbacks.indexOf(callback);\n if (i === -1) {\n return;\n }\n _onThemeChangeCallbacks.splice(i, 1);\n}\n/**\n * Applies the theme, while filling in missing slots.\n * @param theme - Partial theme object.\n * @param depComments - Whether to include deprecated tags as comments for deprecated slots.\n */\nexport function loadTheme(theme, depComments) {\n var _a;\n if (depComments === void 0) { depComments = false; }\n _theme = createTheme(theme, depComments);\n // Invoke the legacy method of theming the page as well.\n legacyLoadTheme(__assign(__assign(__assign(__assign({}, _theme.palette), _theme.semanticColors), _theme.effects), _loadFonts(_theme)));\n Customizations.applySettings((_a = {}, _a[ThemeSettingName] = _theme, _a));\n _onThemeChangeCallbacks.forEach(function (callback) {\n try {\n callback(_theme);\n }\n catch (e) {\n // don't let a bad callback break everything else\n }\n });\n return _theme;\n}\n/**\n * Loads font variables into a JSON object.\n * @param theme - The theme object\n */\nfunction _loadFonts(theme) {\n var lines = {};\n for (var _i = 0, _a = Object.keys(theme.fonts); _i < _a.length; _i++) {\n var fontName = _a[_i];\n var font = theme.fonts[fontName];\n for (var _b = 0, _c = Object.keys(font); _b < _c.length; _b++) {\n var propName = _c[_b];\n var name_1 = fontName + propName.charAt(0).toUpperCase() + propName.slice(1);\n var value = font[propName];\n if (propName === 'fontSize' && typeof value === 'number') {\n // if it's a number, convert it to px by default like our theming system does\n value = value + 'px';\n }\n lines[name_1] = value;\n }\n }\n return lines;\n}\n//# sourceMappingURL=theme.js.map","// This file mimics styles and mixins from _General.Mixins.scss\nexport var normalize = {\n boxShadow: 'none',\n margin: 0,\n padding: 0,\n boxSizing: 'border-box',\n};\nexport var noWrap = {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n};\n//# sourceMappingURL=GeneralStyles.js.map","/**\n * Generates placeholder style for each of the browsers supported by `@fluentui/react`.\n * @param styles - The style to use.\n * @returns The placeholder style object for each browser depending on the placeholder directive it uses.\n */\nexport function getPlaceholderStyles(styles) {\n return {\n selectors: {\n '::placeholder': styles,\n ':-ms-input-placeholder': styles,\n '::-ms-input-placeholder': styles, // Edge\n },\n };\n}\n//# sourceMappingURL=getPlaceholderStyles.js.map","import { buildClassMap } from '../utilities/index';\nimport { AnimationStyles } from '../styles/index';\n/**\n * {@docCategory AnimationClassNames}\n */\nexport var AnimationClassNames = buildClassMap(AnimationStyles);\n//# sourceMappingURL=AnimationClassNames.js.map","export var FLUENT_CDN_BASE_URL = 'https://res.cdn.office.net/files/fabric-cdn-prod_20230815.002';\n//# sourceMappingURL=cdn.js.map","// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/style-utilities', '8.9.19');\n//# sourceMappingURL=version.js.map","export * from './classNames/index';\nexport * from './styles/index';\nexport * from './utilities/index';\nexport * from './interfaces/index';\nexport * from './MergeStyles';\nexport * from './cdn';\nimport './version';\n// Ensure theme is initialized when this package is referenced.\nimport { initializeThemeInCustomizations } from './styles/theme';\ninitializeThemeInCustomizations();\n//# sourceMappingURL=index.js.map","export var DirectionalHint = {\n /**\n * Appear above the target element, with the left edges of the callout and target aligning.\n */\n topLeftEdge: 0,\n /**\n * Appear above the target element, with the centers of the callout and target aligning.\n */\n topCenter: 1,\n /**\n * Appear above the target element, with the right edges of the callout and target aligning.\n */\n topRightEdge: 2,\n /**\n * Appear above the target element, aligning with the target element such that the callout tends toward\n * the center of the screen.\n */\n topAutoEdge: 3,\n /**\n * Appear below the target element, with the left edges of the callout and target aligning.\n */\n bottomLeftEdge: 4,\n /**\n * Appear below the target element, with the centers of the callout and target aligning.\n */\n bottomCenter: 5,\n /**\n * Appear below the target element, with the right edges of the callout and target aligning.\n */\n bottomRightEdge: 6,\n /**\n * Appear below the target element, aligning with the target element such that the callout tends toward\n * the center of the screen.\n */\n bottomAutoEdge: 7,\n /**\n * Appear to the left of the target element, with the top edges of the callout and target aligning.\n */\n leftTopEdge: 8,\n /**\n * Appear to the left of the target element, with the centers of the callout and target aligning.\n */\n leftCenter: 9,\n /**\n * Appear to the left of the target element, with the bottom edges of the callout and target aligning.\n */\n leftBottomEdge: 10,\n /**\n * Appear to the right of the target element, with the top edges of the callout and target aligning.\n */\n rightTopEdge: 11,\n /**\n * Appear to the right of the target element, with the centers of the callout and target aligning.\n */\n rightCenter: 12,\n /**\n * Appear to the right of the target element, with the bottom edges of the callout and target aligning.\n */\n rightBottomEdge: 13,\n};\n//# sourceMappingURL=DirectionalHint.js.map","export var RectangleEdge;\n(function (RectangleEdge) {\n RectangleEdge[RectangleEdge[\"top\"] = 1] = \"top\";\n RectangleEdge[RectangleEdge[\"bottom\"] = -1] = \"bottom\";\n RectangleEdge[RectangleEdge[\"left\"] = 2] = \"left\";\n RectangleEdge[RectangleEdge[\"right\"] = -2] = \"right\";\n})(RectangleEdge || (RectangleEdge = {}));\nexport var Position;\n(function (Position) {\n Position[Position[\"top\"] = 0] = \"top\";\n Position[Position[\"bottom\"] = 1] = \"bottom\";\n Position[Position[\"start\"] = 2] = \"start\";\n Position[Position[\"end\"] = 3] = \"end\";\n})(Position || (Position = {}));\n//# sourceMappingURL=positioning.types.js.map","var _a;\nimport { __assign } from \"tslib\";\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { getScrollbarWidth, getRTL } from '../../Utilities';\nimport { RectangleEdge } from './positioning.types';\nimport { Rectangle } from '../../Utilities';\nfunction _createPositionData(targetEdge, alignmentEdge, isAuto) {\n return {\n targetEdge: targetEdge,\n alignmentEdge: alignmentEdge,\n isAuto: isAuto,\n };\n}\n// Currently the beakPercent is set to 50 for all positions meaning that it should tend to the center of the target\nvar DirectionalDictionary = (_a = {},\n _a[DirectionalHint.topLeftEdge] = _createPositionData(RectangleEdge.top, RectangleEdge.left),\n _a[DirectionalHint.topCenter] = _createPositionData(RectangleEdge.top),\n _a[DirectionalHint.topRightEdge] = _createPositionData(RectangleEdge.top, RectangleEdge.right),\n _a[DirectionalHint.topAutoEdge] = _createPositionData(RectangleEdge.top, undefined, true),\n _a[DirectionalHint.bottomLeftEdge] = _createPositionData(RectangleEdge.bottom, RectangleEdge.left),\n _a[DirectionalHint.bottomCenter] = _createPositionData(RectangleEdge.bottom),\n _a[DirectionalHint.bottomRightEdge] = _createPositionData(RectangleEdge.bottom, RectangleEdge.right),\n _a[DirectionalHint.bottomAutoEdge] = _createPositionData(RectangleEdge.bottom, undefined, true),\n _a[DirectionalHint.leftTopEdge] = _createPositionData(RectangleEdge.left, RectangleEdge.top),\n _a[DirectionalHint.leftCenter] = _createPositionData(RectangleEdge.left),\n _a[DirectionalHint.leftBottomEdge] = _createPositionData(RectangleEdge.left, RectangleEdge.bottom),\n _a[DirectionalHint.rightTopEdge] = _createPositionData(RectangleEdge.right, RectangleEdge.top),\n _a[DirectionalHint.rightCenter] = _createPositionData(RectangleEdge.right),\n _a[DirectionalHint.rightBottomEdge] = _createPositionData(RectangleEdge.right, RectangleEdge.bottom),\n _a);\nfunction _isRectangleWithinBounds(rect, boundingRect) {\n if (rect.top < boundingRect.top) {\n return false;\n }\n if (rect.bottom > boundingRect.bottom) {\n return false;\n }\n if (rect.left < boundingRect.left) {\n return false;\n }\n if (rect.right > boundingRect.right) {\n return false;\n }\n return true;\n}\n/**\n * Gets all of the edges of a rectangle that are outside of the given bounds.\n * If there are no out of bounds edges it returns an empty array.\n */\nfunction _getOutOfBoundsEdges(rect, boundingRect) {\n var outOfBounds = [];\n if (rect.top < boundingRect.top) {\n outOfBounds.push(RectangleEdge.top);\n }\n if (rect.bottom > boundingRect.bottom) {\n outOfBounds.push(RectangleEdge.bottom);\n }\n if (rect.left < boundingRect.left) {\n outOfBounds.push(RectangleEdge.left);\n }\n if (rect.right > boundingRect.right) {\n outOfBounds.push(RectangleEdge.right);\n }\n return outOfBounds;\n}\nfunction _getEdgeValue(rect, edge) {\n return rect[RectangleEdge[edge]];\n}\nfunction _setEdgeValue(rect, edge, value) {\n rect[RectangleEdge[edge]] = value;\n return rect;\n}\n/**\n * Returns the middle value of an edge. Only returns 1 value rather than xy coordinates as\n * the itself already contains the other coordinate.\n * For instance, a bottom edge's current value is it's y coordinate, so the number returned is the x.\n */\nfunction _getCenterValue(rect, edge) {\n var edges = _getFlankingEdges(edge);\n return (_getEdgeValue(rect, edges.positiveEdge) + _getEdgeValue(rect, edges.negativeEdge)) / 2;\n}\n/**\n * Flips the value depending on the edge.\n * If the edge is a \"positive\" edge, Top or Left, then the value should stay as it is.\n * If the edge is a \"negative\" edge, Bottom or Right, then the value should be flipped.\n * This is to account for the fact that the coordinates are effectively reserved in certain cases for the\n * \"negative\" edges.\n *\n * For example, when testing to see if a bottom edge 1 is within the bounds of another bottom edge 2:\n * If edge 1 is greater than edge 2 then it is out of bounds. This is reversed for top edge 1 and top edge 2.\n * If top edge 1 is less than edge 2 then it is out of bounds.\n */\nfunction _getRelativeEdgeValue(edge, value) {\n if (edge > 0) {\n return value;\n }\n else {\n return value * -1;\n }\n}\nfunction _getRelativeRectEdgeValue(edge, rect) {\n return _getRelativeEdgeValue(edge, _getEdgeValue(rect, edge));\n}\nfunction _getRelativeEdgeDifference(rect, hostRect, edge) {\n var edgeDifference = _getEdgeValue(rect, edge) - _getEdgeValue(hostRect, edge);\n return _getRelativeEdgeValue(edge, edgeDifference);\n}\n/**\n * Moves the edge of a rectangle to the value given. It only moves the edge in a linear direction based on that edge.\n * For example, if it's a bottom edge it will only change y coordinates.\n * if maintainSize is set to false, it will only adjust the specified edge value\n */\nfunction _moveEdge(rect, edge, newValue, maintainSize) {\n if (maintainSize === void 0) { maintainSize = true; }\n var difference = _getEdgeValue(rect, edge) - newValue;\n var returnRect = _setEdgeValue(rect, edge, newValue);\n if (maintainSize) {\n returnRect = _setEdgeValue(rect, edge * -1, _getEdgeValue(rect, edge * -1) - difference);\n }\n return returnRect;\n}\n/**\n * Aligns the edge on the passed in rect to the target. If there is a gap then it will have that space between the two.\n */\nfunction _alignEdges(rect, target, edge, gap) {\n if (gap === void 0) { gap = 0; }\n return _moveEdge(rect, edge, _getEdgeValue(target, edge) + _getRelativeEdgeValue(edge, gap));\n}\n/**\n * Aligns the targetEdge on the passed in target to the rects corresponding opposite edge.\n * For instance if targetEdge is bottom, then the rects top will be moved to match it.\n */\nfunction _alignOppositeEdges(rect, target, targetEdge, gap) {\n if (gap === void 0) { gap = 0; }\n var oppositeEdge = targetEdge * -1;\n var adjustedGap = _getRelativeEdgeValue(oppositeEdge, gap);\n return _moveEdge(rect, targetEdge * -1, _getEdgeValue(target, targetEdge) + adjustedGap);\n}\n/**\n * Tests to see if the given edge is within the bounds of the given rectangle.\n */\nfunction _isEdgeInBounds(rect, bounds, edge) {\n var adjustedRectValue = _getRelativeRectEdgeValue(edge, rect);\n return adjustedRectValue > _getRelativeRectEdgeValue(edge, bounds);\n}\n/**\n * Returns a measure of how much a rectangle is out of bounds for a given alignment;\n * this can be used to compare which rectangle is more or less out of bounds.\n * A value of 0 means the rectangle is entirely in bounds\n */\nfunction _getOutOfBoundsDegree(rect, bounds) {\n var breakingEdges = _getOutOfBoundsEdges(rect, bounds);\n var total = 0;\n for (var _i = 0, breakingEdges_1 = breakingEdges; _i < breakingEdges_1.length; _i++) {\n var edge = breakingEdges_1[_i];\n total += Math.pow(_getRelativeEdgeDifference(rect, bounds, edge), 2);\n }\n return total;\n}\n/**\n * Attempts to move the rectangle through various sides of the target to find a place to fit.\n * If no fit is found, the least bad option should be returned.\n */\nfunction _flipToFit(rect, target, bounding, positionData, gap) {\n if (gap === void 0) { gap = 0; }\n var directions = [\n RectangleEdge.left,\n RectangleEdge.right,\n RectangleEdge.bottom,\n RectangleEdge.top,\n ];\n // In RTL page, RectangleEdge.right has a higher priority than RectangleEdge.left, so the order should be updated.\n if (getRTL()) {\n directions[0] *= -1;\n directions[1] *= -1;\n }\n var currentEstimate = rect;\n var currentEdge = positionData.targetEdge;\n var currentAlignment = positionData.alignmentEdge;\n // keep track of least bad option, in case no sides fit\n var oobDegree;\n var bestEdge = currentEdge;\n var bestAlignment = currentAlignment;\n // Keep switching sides until one is found with enough space.\n // If all sides don't fit then return the unmodified element.\n for (var i = 0; i < 4; i++) {\n if (!_isEdgeInBounds(currentEstimate, bounding, currentEdge)) {\n // update least-bad edges\n var currentOOBDegree = _getOutOfBoundsDegree(currentEstimate, bounding);\n if (!oobDegree || currentOOBDegree < oobDegree) {\n oobDegree = currentOOBDegree;\n bestEdge = currentEdge;\n bestAlignment = currentAlignment;\n }\n directions.splice(directions.indexOf(currentEdge), 1);\n if (directions.length > 0) {\n if (directions.indexOf(currentEdge * -1) > -1) {\n currentEdge = currentEdge * -1;\n }\n else {\n currentAlignment = currentEdge;\n currentEdge = directions.slice(-1)[0];\n }\n currentEstimate = _estimatePosition(rect, target, { targetEdge: currentEdge, alignmentEdge: currentAlignment }, gap);\n }\n }\n else {\n return {\n elementRectangle: currentEstimate,\n targetEdge: currentEdge,\n alignmentEdge: currentAlignment,\n };\n }\n }\n // nothing fits, use least-bad option\n currentEstimate = _estimatePosition(rect, target, { targetEdge: bestEdge, alignmentEdge: bestAlignment }, gap);\n return {\n elementRectangle: currentEstimate,\n targetEdge: bestEdge,\n alignmentEdge: bestAlignment,\n };\n}\n/**\n * Flips only the alignment edge of an element rectangle. This is used instead of nudging the alignment edges\n * into position, when `alignTargetEdge` is specified.\n */\nfunction _flipAlignmentEdge(elementEstimate, target, gap, coverTarget) {\n var alignmentEdge = elementEstimate.alignmentEdge, targetEdge = elementEstimate.targetEdge, elementRectangle = elementEstimate.elementRectangle;\n var oppositeEdge = alignmentEdge * -1;\n var newEstimate = _estimatePosition(elementRectangle, target, { targetEdge: targetEdge, alignmentEdge: oppositeEdge }, gap, coverTarget);\n return {\n elementRectangle: newEstimate,\n targetEdge: targetEdge,\n alignmentEdge: oppositeEdge,\n };\n}\n/**\n * Adjusts a element rectangle to fit within the bounds given. If directionalHintFixed or covertarget is passed in\n * then the element will not flip sides on the target. They will, however, be nudged to fit within the bounds given.\n */\nfunction _adjustFitWithinBounds(element, target, bounding, positionData, gap, directionalHintFixed, coverTarget) {\n if (gap === void 0) { gap = 0; }\n var alignmentEdge = positionData.alignmentEdge, alignTargetEdge = positionData.alignTargetEdge;\n var elementEstimate = {\n elementRectangle: element,\n targetEdge: positionData.targetEdge,\n alignmentEdge: alignmentEdge,\n };\n if (!directionalHintFixed && !coverTarget) {\n elementEstimate = _flipToFit(element, target, bounding, positionData, gap);\n }\n var outOfBounds = _getOutOfBoundsEdges(elementEstimate.elementRectangle, bounding);\n // if directionalHintFixed is specified, we need to force the target edge to not change\n // we need *-1 because targetEdge refers to the target's edge; the callout edge is the opposite\n var fixedEdge = directionalHintFixed ? -elementEstimate.targetEdge : undefined;\n if (outOfBounds.length > 0) {\n if (alignTargetEdge) {\n // The edge opposite to the alignment edge might be out of bounds.\n // Flip alignment to see if we can get it within bounds.\n if (elementEstimate.alignmentEdge && outOfBounds.indexOf(elementEstimate.alignmentEdge * -1) > -1) {\n var flippedElementEstimate = _flipAlignmentEdge(elementEstimate, target, gap, coverTarget);\n if (_isRectangleWithinBounds(flippedElementEstimate.elementRectangle, bounding)) {\n return flippedElementEstimate;\n }\n else {\n // If the flipped elements edges are still out of bounds, try nudging it.\n elementEstimate = _alignOutOfBoundsEdges(_getOutOfBoundsEdges(flippedElementEstimate.elementRectangle, bounding), elementEstimate, bounding, fixedEdge);\n }\n }\n else {\n elementEstimate = _alignOutOfBoundsEdges(outOfBounds, elementEstimate, bounding, fixedEdge);\n }\n }\n else {\n elementEstimate = _alignOutOfBoundsEdges(outOfBounds, elementEstimate, bounding, fixedEdge);\n }\n }\n return elementEstimate;\n}\n/**\n * Iterates through a list of out of bounds edges and tries to nudge and align them.\n * @param outOfBoundsEdges - Array of edges that are out of bounds\n * @param elementEstimate - The current element positioning estimate\n * @param bounding - The current bounds\n * @param preserveEdge - Specify an edge that should not be modified\n */\nfunction _alignOutOfBoundsEdges(outOfBoundsEdges, elementEstimate, bounding, preserveEdge) {\n for (var _i = 0, outOfBoundsEdges_1 = outOfBoundsEdges; _i < outOfBoundsEdges_1.length; _i++) {\n var direction = outOfBoundsEdges_1[_i];\n var edgeAttempt = void 0;\n // if preserveEdge is specified, do not call _alignEdges, skip directly to _moveEdge\n // this is because _alignEdges will move the opposite edge\n if (preserveEdge && preserveEdge === direction * -1) {\n edgeAttempt = _moveEdge(elementEstimate.elementRectangle, direction, _getEdgeValue(bounding, direction), false);\n elementEstimate.forcedInBounds = true;\n }\n else {\n edgeAttempt = _alignEdges(elementEstimate.elementRectangle, bounding, direction);\n var inBounds = _isEdgeInBounds(edgeAttempt, bounding, direction * -1);\n // only update estimate if the attempt didn't break out of the opposite bounding edge\n if (!inBounds) {\n edgeAttempt = _moveEdge(edgeAttempt, direction * -1, _getEdgeValue(bounding, direction * -1), false);\n elementEstimate.forcedInBounds = true;\n }\n }\n elementEstimate.elementRectangle = edgeAttempt;\n }\n return elementEstimate;\n}\n/**\n * Moves the middle point on an edge to the point given.\n * Only moves in one direction. For instance if a bottom edge is passed in, then\n * the bottom edge will be moved in the x axis to match the point.\n */\nfunction _centerEdgeToPoint(rect, edge, point) {\n var positiveEdge = _getFlankingEdges(edge).positiveEdge;\n var elementMiddle = _getCenterValue(rect, edge);\n var distanceToMiddle = elementMiddle - _getEdgeValue(rect, positiveEdge);\n return _moveEdge(rect, positiveEdge, point - distanceToMiddle);\n}\n/**\n * Moves the element rectangle to be appropriately positioned relative to a given target.\n * Does not flip or adjust the element.\n */\nfunction _estimatePosition(elementToPosition, target, positionData, gap, coverTarget) {\n if (gap === void 0) { gap = 0; }\n var estimatedElementPosition = new Rectangle(elementToPosition.left, elementToPosition.right, elementToPosition.top, elementToPosition.bottom);\n var alignmentEdge = positionData.alignmentEdge, targetEdge = positionData.targetEdge;\n var elementEdge = coverTarget ? targetEdge : targetEdge * -1;\n estimatedElementPosition = coverTarget\n ? _alignEdges(estimatedElementPosition, target, targetEdge, gap)\n : _alignOppositeEdges(estimatedElementPosition, target, targetEdge, gap);\n // if no alignment edge is provided it's supposed to be centered.\n if (!alignmentEdge) {\n var targetMiddlePoint = _getCenterValue(target, targetEdge);\n estimatedElementPosition = _centerEdgeToPoint(estimatedElementPosition, elementEdge, targetMiddlePoint);\n }\n else {\n estimatedElementPosition = _alignEdges(estimatedElementPosition, target, alignmentEdge);\n }\n return estimatedElementPosition;\n}\n/**\n * Returns the non-opposite edges of the target edge.\n * For instance if bottom is passed in then left and right will be returned.\n */\nfunction _getFlankingEdges(edge) {\n if (edge === RectangleEdge.top || edge === RectangleEdge.bottom) {\n return {\n positiveEdge: RectangleEdge.left,\n negativeEdge: RectangleEdge.right,\n };\n }\n else {\n return {\n positiveEdge: RectangleEdge.top,\n negativeEdge: RectangleEdge.bottom,\n };\n }\n}\n/**\n * Retrieve the final value for the return edge of `elementRectangle`. If the `elementRectangle` is closer to one side\n * of the bounds versus the other, the return edge is flipped to grow inward.\n */\nfunction _finalizeReturnEdge(elementRectangle, returnEdge, bounds) {\n if (bounds &&\n Math.abs(_getRelativeEdgeDifference(elementRectangle, bounds, returnEdge)) >\n Math.abs(_getRelativeEdgeDifference(elementRectangle, bounds, returnEdge * -1))) {\n return returnEdge * -1;\n }\n return returnEdge;\n}\n/**\n * Whether or not the considered edge of the elementRectangle is lying on the edge of the bounds\n * @param elementRectangle The rectangle whose edge we are considering\n * @param bounds The rectangle marking the bounds\n * @param edge The target edge we're considering\n * @returns If the target edge of the elementRectangle is in the same location as that edge of the bounds\n */\nfunction _isEdgeOnBounds(elementRectangle, edge, bounds) {\n return bounds !== undefined && _getEdgeValue(elementRectangle, edge) === _getEdgeValue(bounds, edge);\n}\n/**\n * Finalizes the element position based on the hostElement. Only returns the\n * rectangle values to position such that they are anchored to the target.\n * This helps prevent resizing from looking very strange.\n * For instance, if the target edge is top and aligned with the left side then\n * the bottom and left values are returned so as the Callout shrinks it shrinks towards that corner.\n */\nfunction _finalizeElementPosition(elementRectangle, hostElement, targetEdge, bounds, alignmentEdge, coverTarget, doNotFinalizeReturnEdge, forceWithinBounds) {\n var returnValue = {};\n var hostRect = _getRectangleFromElement(hostElement);\n var elementEdge = coverTarget ? targetEdge : targetEdge * -1;\n var returnEdge = alignmentEdge ? alignmentEdge : _getFlankingEdges(targetEdge).positiveEdge;\n // If we are finalizing the return edge, choose the edge such that we grow away from the bounds\n // If we are not finalizing the return edge but the opposite edge is flush against the bounds,\n // choose that as the anchor edge so the element rect can grow away from the bounds' edge\n // In this case there will not be a visual difference because there is no more room for the elementRectangle to grow\n // in the usual direction\n if (!doNotFinalizeReturnEdge || _isEdgeOnBounds(elementRectangle, getOppositeEdge(returnEdge), bounds)) {\n returnEdge = _finalizeReturnEdge(elementRectangle, returnEdge, bounds);\n }\n returnValue[RectangleEdge[elementEdge]] = _getRelativeEdgeDifference(elementRectangle, hostRect, elementEdge);\n returnValue[RectangleEdge[returnEdge]] = _getRelativeEdgeDifference(elementRectangle, hostRect, returnEdge);\n // if the positioned element will still overflow, return all four edges with in-bounds values\n if (forceWithinBounds) {\n returnValue[RectangleEdge[elementEdge * -1]] = _getRelativeEdgeDifference(elementRectangle, hostRect, elementEdge * -1);\n returnValue[RectangleEdge[returnEdge * -1]] = _getRelativeEdgeDifference(elementRectangle, hostRect, returnEdge * -1);\n }\n return returnValue;\n}\n// Since the beak is rotated 45 degrees the actual height/width is the length of the diagonal.\n// We still want to position the beak based on it's midpoint which does not change. It will\n// be at (beakwidth / 2, beakwidth / 2)\nfunction _calculateActualBeakWidthInPixels(beakWidth) {\n return Math.sqrt(beakWidth * beakWidth * 2);\n}\n/**\n * Returns the appropriate IPositionData based on the props altered for RTL.\n * If directionalHintForRTL is passed in that is used if the page is RTL.\n * If directionalHint is specified, no directionalHintForRTL is available, and the page is RTL, the hint will be\n * flipped (e.g. bottomLeftEdge would become bottomRightEdge).\n *\n * If there is no directionalHint passed in, bottomAutoEdge is chosen automatically.\n */\nfunction _getPositionData(directionalHint, directionalHintForRTL, previousPositions) {\n if (directionalHint === void 0) { directionalHint = DirectionalHint.bottomAutoEdge; }\n if (previousPositions) {\n return {\n alignmentEdge: previousPositions.alignmentEdge,\n isAuto: previousPositions.isAuto,\n targetEdge: previousPositions.targetEdge,\n };\n }\n var positionInformation = __assign({}, DirectionalDictionary[directionalHint]);\n if (getRTL()) {\n // If alignment edge exists and that alignment edge is -2 or 2, right or left, then flip it.\n if (positionInformation.alignmentEdge && positionInformation.alignmentEdge % 2 === 0) {\n positionInformation.alignmentEdge = positionInformation.alignmentEdge * -1;\n }\n return directionalHintForRTL !== undefined ? DirectionalDictionary[directionalHintForRTL] : positionInformation;\n }\n return positionInformation;\n}\n/**\n * Gets the alignment data for the given information. This only really matters if the positioning is Auto.\n * If it is auto then the alignmentEdge should be chosen based on the target edge's position relative to\n * the center of the page.\n */\nfunction _getAlignmentData(positionData, target, boundingRect, coverTarget, alignTargetEdge) {\n if (positionData.isAuto) {\n positionData.alignmentEdge = getClosestEdge(positionData.targetEdge, target, boundingRect);\n }\n positionData.alignTargetEdge = alignTargetEdge;\n return positionData;\n}\nfunction getClosestEdge(targetEdge, target, boundingRect) {\n var targetCenter = _getCenterValue(target, targetEdge);\n var boundingCenter = _getCenterValue(boundingRect, targetEdge);\n var _a = _getFlankingEdges(targetEdge), positiveEdge = _a.positiveEdge, negativeEdge = _a.negativeEdge;\n if (targetCenter <= boundingCenter) {\n return positiveEdge;\n }\n else {\n return negativeEdge;\n }\n}\nfunction _positionElementWithinBounds(elementToPosition, target, bounding, positionData, gap, directionalHintFixed, coverTarget) {\n var estimatedElementPosition = _estimatePosition(elementToPosition, target, positionData, gap, coverTarget);\n if (_isRectangleWithinBounds(estimatedElementPosition, bounding)) {\n return {\n elementRectangle: estimatedElementPosition,\n targetEdge: positionData.targetEdge,\n alignmentEdge: positionData.alignmentEdge,\n };\n }\n else {\n return _adjustFitWithinBounds(estimatedElementPosition, target, bounding, positionData, gap, directionalHintFixed, coverTarget);\n }\n}\nfunction _finalizeBeakPosition(elementPosition, positionedBeak, bounds) {\n var targetEdge = elementPosition.targetEdge * -1;\n // The \"host\" element that we will use to help position the beak.\n var actualElement = new Rectangle(0, elementPosition.elementRectangle.width, 0, elementPosition.elementRectangle.height);\n var returnValue = {};\n var returnEdge = _finalizeReturnEdge(elementPosition.elementRectangle, elementPosition.alignmentEdge ? elementPosition.alignmentEdge : _getFlankingEdges(targetEdge).positiveEdge, bounds);\n // only show the beak if the callout is not fully covering the target\n var beakEdgeDifference = _getRelativeEdgeDifference(elementPosition.elementRectangle, elementPosition.targetRectangle, targetEdge);\n var showBeak = beakEdgeDifference > Math.abs(_getEdgeValue(positionedBeak, targetEdge));\n returnValue[RectangleEdge[targetEdge]] = _getEdgeValue(positionedBeak, targetEdge);\n returnValue[RectangleEdge[returnEdge]] = _getRelativeEdgeDifference(positionedBeak, actualElement, returnEdge);\n return {\n elementPosition: __assign({}, returnValue),\n closestEdge: getClosestEdge(elementPosition.targetEdge, positionedBeak, actualElement),\n targetEdge: targetEdge,\n hideBeak: !showBeak,\n };\n}\nfunction _positionBeak(beakWidth, elementPosition) {\n var target = elementPosition.targetRectangle;\n /**\n * Note about beak positioning: The actual beak width only matters for getting the gap between the callout and\n * target, it does not impact the beak placement within the callout. For example example, if the beakWidth is 8,\n * then the actual beakWidth is sqrroot(8^2 + 8^2) = 11.31x11.31. So the callout will need to be an extra 3 pixels\n * away from its target. While the beak is being positioned in the callout it still acts as though it were 8x8.\n */\n var _a = _getFlankingEdges(elementPosition.targetEdge), positiveEdge = _a.positiveEdge, negativeEdge = _a.negativeEdge;\n var beakTargetPoint = _getCenterValue(target, elementPosition.targetEdge);\n var elementBounds = new Rectangle(beakWidth / 2, elementPosition.elementRectangle.width - beakWidth / 2, beakWidth / 2, elementPosition.elementRectangle.height - beakWidth / 2);\n var beakPosition = new Rectangle(0, beakWidth, 0, beakWidth);\n beakPosition = _moveEdge(beakPosition, elementPosition.targetEdge * -1, -beakWidth / 2);\n beakPosition = _centerEdgeToPoint(beakPosition, elementPosition.targetEdge * -1, beakTargetPoint - _getRelativeRectEdgeValue(positiveEdge, elementPosition.elementRectangle));\n if (!_isEdgeInBounds(beakPosition, elementBounds, positiveEdge)) {\n beakPosition = _alignEdges(beakPosition, elementBounds, positiveEdge);\n }\n else if (!_isEdgeInBounds(beakPosition, elementBounds, negativeEdge)) {\n beakPosition = _alignEdges(beakPosition, elementBounds, negativeEdge);\n }\n return beakPosition;\n}\nfunction _getRectangleFromElement(element) {\n // eslint-disable-next-line deprecation/deprecation\n var clientRect = element.getBoundingClientRect();\n return new Rectangle(clientRect.left, clientRect.right, clientRect.top, clientRect.bottom);\n}\nfunction _getRectangleFromIRect(rect) {\n return new Rectangle(rect.left, rect.right, rect.top, rect.bottom);\n}\nfunction _getTargetRect(bounds, target) {\n var targetRectangle;\n if (target) {\n // eslint-disable-next-line no-extra-boolean-cast\n if (!!target.preventDefault) {\n var ev = target;\n targetRectangle = new Rectangle(ev.clientX, ev.clientX, ev.clientY, ev.clientY);\n // eslint-disable-next-line no-extra-boolean-cast\n }\n else if (!!target.getBoundingClientRect) {\n targetRectangle = _getRectangleFromElement(target);\n // HTMLImgElements can have x and y values. The check for it being a point must go last.\n }\n else {\n var rectOrPoint = target;\n // eslint-disable-next-line deprecation/deprecation\n var left = rectOrPoint.left || rectOrPoint.x;\n // eslint-disable-next-line deprecation/deprecation\n var top_1 = rectOrPoint.top || rectOrPoint.y;\n var right = rectOrPoint.right || left;\n var bottom = rectOrPoint.bottom || top_1;\n targetRectangle = new Rectangle(left, right, top_1, bottom);\n }\n if (!_isRectangleWithinBounds(targetRectangle, bounds)) {\n var outOfBounds = _getOutOfBoundsEdges(targetRectangle, bounds);\n for (var _i = 0, outOfBounds_1 = outOfBounds; _i < outOfBounds_1.length; _i++) {\n var direction = outOfBounds_1[_i];\n targetRectangle[RectangleEdge[direction]] = bounds[RectangleEdge[direction]];\n }\n }\n }\n else {\n targetRectangle = new Rectangle(0, 0, 0, 0);\n }\n return targetRectangle;\n}\n/**\n * If max height is less than zero it returns the bounds height instead.\n */\nfunction _getMaxHeightFromTargetRectangle(targetRectangle, targetEdge, gapSpace, bounds, coverTarget) {\n var maxHeight = 0;\n var directionalHint = DirectionalDictionary[targetEdge];\n // If cover target is set, then the max height should be calculated using the opposite of the target edge since\n // that's the direction that the callout will expand in.\n // For instance, if the directionalhint is bottomLeftEdge then the callout will position so it's bottom edge\n // is aligned with the bottom of the target and expand up towards the top of the screen and the calculated max height\n // is (bottom of target) - (top of screen) - gapSpace.\n var target = coverTarget ? directionalHint.targetEdge * -1 : directionalHint.targetEdge;\n if (target === RectangleEdge.top) {\n maxHeight = _getEdgeValue(targetRectangle, directionalHint.targetEdge) - bounds.top - gapSpace;\n }\n else if (target === RectangleEdge.bottom) {\n maxHeight = bounds.bottom - _getEdgeValue(targetRectangle, directionalHint.targetEdge) - gapSpace;\n }\n else {\n maxHeight = bounds.bottom - targetRectangle.top - gapSpace;\n }\n return maxHeight > 0 ? maxHeight : bounds.height;\n}\nfunction _positionElementRelative(props, elementToPosition, boundingRect, previousPositions) {\n var gap = props.gapSpace ? props.gapSpace : 0;\n var targetRect = _getTargetRect(boundingRect, props.target);\n var positionData = _getAlignmentData(_getPositionData(props.directionalHint, props.directionalHintForRTL, previousPositions), targetRect, boundingRect, props.coverTarget, props.alignTargetEdge);\n var positionedElement = _positionElementWithinBounds(_getRectangleFromElement(elementToPosition), targetRect, boundingRect, positionData, gap, props.directionalHintFixed, props.coverTarget);\n return __assign(__assign({}, positionedElement), { targetRectangle: targetRect });\n}\nfunction _finalizePositionData(positionedElement, hostElement, bounds, coverTarget, doNotFinalizeReturnEdge) {\n var finalizedElement = _finalizeElementPosition(positionedElement.elementRectangle, hostElement, positionedElement.targetEdge, bounds, positionedElement.alignmentEdge, coverTarget, doNotFinalizeReturnEdge, positionedElement.forcedInBounds);\n return {\n elementPosition: finalizedElement,\n targetEdge: positionedElement.targetEdge,\n alignmentEdge: positionedElement.alignmentEdge,\n };\n}\nfunction _positionElement(props, hostElement, elementToPosition, previousPositions) {\n var boundingRect = props.bounds\n ? _getRectangleFromIRect(props.bounds)\n : new Rectangle(0, window.innerWidth - getScrollbarWidth(), 0, window.innerHeight);\n var positionedElement = _positionElementRelative(props, elementToPosition, boundingRect, previousPositions);\n return _finalizePositionData(positionedElement, hostElement, boundingRect, props.coverTarget);\n}\nfunction _positionCallout(props, hostElement, callout, previousPositions, doNotFinalizeReturnEdge) {\n var beakWidth = props.isBeakVisible ? props.beakWidth || 0 : 0;\n var gap = _calculateActualBeakWidthInPixels(beakWidth) / 2 + (props.gapSpace ? props.gapSpace : 0);\n var positionProps = props;\n positionProps.gapSpace = gap;\n var boundingRect = props.bounds\n ? _getRectangleFromIRect(props.bounds)\n : new Rectangle(0, window.innerWidth - getScrollbarWidth(), 0, window.innerHeight);\n var positionedElement = _positionElementRelative(positionProps, callout, boundingRect, previousPositions);\n var beakPositioned = _positionBeak(beakWidth, positionedElement);\n var finalizedBeakPosition = _finalizeBeakPosition(positionedElement, beakPositioned, boundingRect);\n return __assign(__assign({}, _finalizePositionData(positionedElement, hostElement, boundingRect, props.coverTarget, doNotFinalizeReturnEdge)), { beakPosition: finalizedBeakPosition });\n}\nfunction _positionCard(props, hostElement, callout, previousPositions) {\n return _positionCallout(props, hostElement, callout, previousPositions, true);\n}\n// END PRIVATE FUNCTIONS\nexport var __positioningTestPackage = {\n _finalizePositionData: _finalizePositionData,\n _finalizeBeakPosition: _finalizeBeakPosition,\n _calculateActualBeakWidthInPixels: _calculateActualBeakWidthInPixels,\n _positionElementWithinBounds: _positionElementWithinBounds,\n _positionBeak: _positionBeak,\n _getPositionData: _getPositionData,\n _getMaxHeightFromTargetRectangle: _getMaxHeightFromTargetRectangle,\n};\n/**\n * Used to position an element relative to the given positioning props.\n * If positioning has been completed before, previousPositions can be passed to ensure that the positioning element\n * repositions based on its previous targets rather than starting with directionalhint.\n */\nexport function positionElement(props, hostElement, elementToPosition, previousPositions) {\n return _positionElement(props, hostElement, elementToPosition, previousPositions);\n}\nexport function positionCallout(props, hostElement, elementToPosition, previousPositions) {\n return _positionCallout(props, hostElement, elementToPosition, previousPositions);\n}\nexport function positionCard(props, hostElement, elementToPosition, previousPositions) {\n return _positionCard(props, hostElement, elementToPosition, previousPositions);\n}\n/**\n * Gets the maximum height that a rectangle can have in order to fit below or above a target.\n * If the directional hint specifies a left or right edge (i.e. leftCenter) it will limit the height to the topBorder\n * of the target given.\n * If no bounds are provided then the window is treated as the bounds.\n */\nexport function getMaxHeight(target, targetEdge, gapSpace, bounds, coverTarget) {\n if (gapSpace === void 0) { gapSpace = 0; }\n var mouseTarget = target;\n var elementTarget = target;\n var rectOrPointTarget = target;\n var targetRect;\n var boundingRectangle = bounds\n ? _getRectangleFromIRect(bounds)\n : new Rectangle(0, window.innerWidth - getScrollbarWidth(), 0, window.innerHeight);\n // eslint-disable-next-line deprecation/deprecation\n var left = rectOrPointTarget.left || rectOrPointTarget.x;\n // eslint-disable-next-line deprecation/deprecation\n var top = rectOrPointTarget.top || rectOrPointTarget.y;\n var right = rectOrPointTarget.right || left;\n var bottom = rectOrPointTarget.bottom || top;\n // eslint-disable-next-line no-extra-boolean-cast -- may not actually be a MouseEvent\n if (!!mouseTarget.stopPropagation) {\n targetRect = new Rectangle(mouseTarget.clientX, mouseTarget.clientX, mouseTarget.clientY, mouseTarget.clientY);\n }\n else if (left !== undefined && top !== undefined) {\n targetRect = new Rectangle(left, right, top, bottom);\n }\n else {\n targetRect = _getRectangleFromElement(elementTarget);\n }\n return _getMaxHeightFromTargetRectangle(targetRect, targetEdge, gapSpace, boundingRectangle, coverTarget);\n}\n/**\n * Returns the opposite edge of the given RectangleEdge.\n */\nexport function getOppositeEdge(edge) {\n return edge * -1;\n}\nfunction _getBoundsFromTargetWindow(target, targetWindow) {\n var segments = undefined;\n if (targetWindow.getWindowSegments) {\n segments = targetWindow.getWindowSegments();\n }\n // Identify if we're dealing with single screen scenarios.\n if (segments === undefined || segments.length <= 1) {\n return {\n top: 0,\n left: 0,\n right: targetWindow.innerWidth,\n bottom: targetWindow.innerHeight,\n width: targetWindow.innerWidth,\n height: targetWindow.innerHeight,\n };\n }\n // Logic for determining dual screen scenarios.\n var x = 0;\n var y = 0;\n // If the target is an Element get coordinates for its center.\n if (target !== null && !!target.getBoundingClientRect) {\n var clientRect = target.getBoundingClientRect();\n x = (clientRect.left + clientRect.right) / 2;\n y = (clientRect.top + clientRect.bottom) / 2;\n }\n // If the target is not null get x-axis and y-axis coordinates directly.\n else if (target !== null) {\n // eslint-disable-next-line deprecation/deprecation\n x = target.left || target.x;\n // eslint-disable-next-line deprecation/deprecation\n y = target.top || target.y;\n }\n var bounds = { top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0 };\n // Define which window segment are the coordinates in and calculate bounds based on that.\n for (var _i = 0, segments_1 = segments; _i < segments_1.length; _i++) {\n var segment = segments_1[_i];\n if (x && segment.left <= x && segment.right >= x && y && segment.top <= y && segment.bottom >= y) {\n bounds = {\n top: segment.top,\n left: segment.left,\n right: segment.right,\n bottom: segment.bottom,\n width: segment.width,\n height: segment.height,\n };\n }\n }\n return bounds;\n}\nexport function getBoundsFromTargetWindow(target, targetWindow) {\n return _getBoundsFromTargetWindow(target, targetWindow);\n}\n//# sourceMappingURL=positioning.js.map","import { Async } from '@fluentui/utilities';\nimport * as React from 'react';\n/**\n * Hook to provide an Async instance that is automatically cleaned up on dismount.\n */\nexport function useAsync() {\n var asyncRef = React.useRef();\n if (!asyncRef.current) {\n asyncRef.current = new Async();\n }\n React.useEffect(function () {\n return function () {\n var _a;\n (_a = asyncRef.current) === null || _a === void 0 ? void 0 : _a.dispose();\n asyncRef.current = undefined;\n };\n }, []);\n return asyncRef.current;\n}\n//# sourceMappingURL=useAsync.js.map","import * as React from 'react';\n/**\n * Hook to initialize and return a constant value. Unlike `React.useMemo`, this is guaranteed to\n * always return the same value (and if the initializer is a function, only call it once).\n * This is similar to setting a private member in a class constructor.\n *\n * If the value should ever change based on dependencies, use `React.useMemo` instead.\n *\n * @param initialValue - Initial value, or function to get the initial value. Similar to `useState`,\n * only the value/function passed in the first time this is called is respected.\n * @returns The value. The identity of this value will always be the same.\n */\nexport function useConst(initialValue) {\n // Use useRef to store the value because it's the least expensive built-in hook that works here\n // (we could also use `const [value] = React.useState(initialValue)` but that's more expensive\n // internally due to reducer handling which we don't need)\n var ref = React.useRef();\n if (ref.current === undefined) {\n // Box the value in an object so we can tell if it's initialized even if the initializer\n // returns/is undefined\n ref.current = {\n value: typeof initialValue === 'function' ? initialValue() : initialValue,\n };\n }\n return ref.current.value;\n}\n//# sourceMappingURL=useConst.js.map","import * as React from 'react';\nimport { useConst } from './useConst';\n/**\n * Hook to store a value and generate callbacks for setting the value to true or false.\n * The identity of the callbacks will always stay the same.\n *\n * @param initialState - Initial value\n * @returns Array with the current value and an object containing the updater callbacks.\n */\nexport function useBoolean(initialState) {\n var _a = React.useState(initialState), value = _a[0], setValue = _a[1];\n var setTrue = useConst(function () { return function () {\n setValue(true);\n }; });\n var setFalse = useConst(function () { return function () {\n setValue(false);\n }; });\n var toggle = useConst(function () { return function () {\n setValue(function (currentValue) { return !currentValue; });\n }; });\n return [value, { setTrue: setTrue, setFalse: setFalse, toggle: toggle }];\n}\n//# sourceMappingURL=useBoolean.js.map","import * as React from 'react';\nimport { useConst } from './useConst';\nexport function useControllableValue(controlledValue, defaultUncontrolledValue, onChange) {\n var _a = React.useState(defaultUncontrolledValue), value = _a[0], setValue = _a[1];\n var isControlled = useConst(controlledValue !== undefined);\n var currentValue = isControlled ? controlledValue : value;\n // Duplicate the current value and onChange in refs so they're accessible from\n // setValueOrCallOnChange without creating a new callback every time\n var valueRef = React.useRef(currentValue);\n var onChangeRef = React.useRef(onChange);\n React.useEffect(function () {\n valueRef.current = currentValue;\n onChangeRef.current = onChange;\n });\n // To match the behavior of the setter returned by React.useState, this callback's identity\n // should never change. This means it MUST NOT directly reference variables that can change.\n var setValueOrCallOnChange = useConst(function () { return function (update, ev) {\n // Assuming here that TValue is not a function, because a controllable value will typically\n // be something a user can enter as input\n var newValue = typeof update === 'function' ? update(valueRef.current) : update;\n if (onChangeRef.current) {\n onChangeRef.current(ev, newValue);\n }\n if (!isControlled) {\n setValue(newValue);\n }\n }; });\n return [currentValue, setValueOrCallOnChange];\n}\n//# sourceMappingURL=useControllableValue.js.map","import * as React from 'react';\nimport { useConst } from './useConst';\nimport { useIsomorphicLayoutEffect } from '@fluentui/utilities';\n/**\n * Modified `useCallback` that returns the same function reference every time, but internally calls\n * the most-recently passed callback implementation. Can be useful in situations such as:\n * - Event handler dependencies change too frequently, such as user props which might change on\n * every render, or volatile values such as useState/useDispatch\n * - Callback must be referenced in a captured context (such as a window event handler or unmount\n * handler that's registered once) but needs access to the latest props\n *\n * In general, prefer `useCallback` unless you've encountered one of the problems above.\n *\n * https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n *\n * @param fn - The callback function that will be used\n * @returns A function which is referentially stable but internally calls the most recently passed callback\n */\nexport function useEventCallback(fn) {\n var callbackRef = React.useRef(function () {\n throw new Error('Cannot call an event handler while rendering');\n });\n useIsomorphicLayoutEffect(function () {\n callbackRef.current = fn;\n }, [fn]);\n // useConst rather than useCallback to ensure the reference is always stable\n // (useCallback's deps list is an optimization, not a guarantee)\n return useConst(function () { return function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n var callback = callbackRef.current;\n return callback.apply(void 0, args);\n }; });\n}\n//# sourceMappingURL=useEventCallback.js.map","import * as React from 'react';\nimport { getId } from '@fluentui/utilities';\n/**\n * Hook to generate a unique ID in the global scope (spanning across duplicate copies of the same library).\n *\n * @param prefix - Optional prefix for the ID\n * @param providedId - Optional id provided by a parent component. Defaults to the provided value if present,\n * without conditioning the hook call\n * @returns The ID\n */\nexport function useId(prefix, providedId) {\n // getId should only be called once since it updates the global constant for the next ID value.\n // (While an extra update isn't likely to cause problems in practice, it's better to avoid it.)\n var ref = React.useRef(providedId);\n if (!ref.current) {\n ref.current = getId(prefix);\n }\n return ref.current;\n}\n//# sourceMappingURL=useId.js.map","import { __spreadArray } from \"tslib\";\nimport * as React from 'react';\n/**\n * React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that\n * updates all provided refs\n * @param refs - Refs to collectively update with one ref value.\n * @returns A function with an attached \"current\" prop, so that it can be treated like a RefObject.\n */\nexport function useMergedRefs() {\n var refs = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n refs[_i] = arguments[_i];\n }\n var mergedCallback = React.useCallback(function (value) {\n // Update the \"current\" prop hanging on the function.\n mergedCallback.current = value;\n for (var _i = 0, refs_1 = refs; _i < refs_1.length; _i++) {\n var ref = refs_1[_i];\n if (typeof ref === 'function') {\n ref(value);\n }\n else if (ref) {\n // work around the immutability of the React.Ref type\n ref.current = value;\n }\n }\n }, __spreadArray([], refs, true));\n return mergedCallback;\n}\n//# sourceMappingURL=useMergedRefs.js.map","import { on } from '@fluentui/utilities';\nimport * as React from 'react';\n/**\n * Hook to attach an event handler on mount and handle cleanup.\n * @param element - Element (or ref to an element) to attach the event handler to\n * @param eventName - The event to attach a handler for\n * @param callback - The handler for the event\n * @param useCapture - Whether or not to attach the handler for the capture phase\n */\nexport function useOnEvent(element, eventName, callback, useCapture) {\n // Use a ref for the callback to prevent repeatedly attaching/unattaching callbacks that are unstable across renders\n var callbackRef = React.useRef(callback);\n callbackRef.current = callback;\n React.useEffect(function () {\n var actualElement = element && 'current' in element ? element.current : element;\n if (!actualElement || !actualElement.addEventListener) {\n return;\n }\n var dispose = on(actualElement, eventName, function (ev) { return callbackRef.current(ev); }, useCapture);\n return dispose;\n }, [element, eventName, useCapture]);\n}\n//# sourceMappingURL=useOnEvent.js.map","import { useRef, useEffect } from 'react';\n/**\n * Hook keeping track of a given value from a previous execution of the component the Hook is used in.\n *\n * See [React Hooks FAQ](https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state)\n */\nexport function usePrevious(value) {\n var ref = useRef();\n useEffect(function () {\n ref.current = value;\n });\n return ref.current;\n}\n//# sourceMappingURL=usePrevious.js.map","import * as React from 'react';\n/**\n * Creates a ref, and calls a callback whenever the ref changes to a non-null value. The callback can optionally return\n * a cleanup function that'll be called before the value changes, and when the ref is unmounted.\n *\n * This can be used to work around a limitation that useEffect cannot depend on `ref.current` (see\n * https://github.com/facebook/react/issues/14387#issuecomment-503616820).\n *\n * Usage example:\n * ```ts\n * const myRef = useRefEffect(element => {\n * ...\n * return () => { ... cleanup ... };\n * });\n * ```\n * ```jsx\n *
\n * ```\n *\n * @param callback - Called whenever the ref's value changes to non-null. Can optionally return a cleanup function.\n * @param initial - (Optional) The initial value for the ref.\n *\n * @returns A function that should be called to set the ref's value. The object also has a `.current` member that can be\n * used to access the ref's value (like a normal RefObject). It can be hooked up to an element's `ref` property.\n */\nexport function useRefEffect(callback, initial) {\n if (initial === void 0) { initial = null; }\n var createRefCallback = function () {\n var refCallback = function (value) {\n if (data.ref.current !== value) {\n if (data.cleanup) {\n data.cleanup();\n data.cleanup = undefined;\n }\n data.ref.current = value;\n if (value !== null) {\n data.cleanup = data.callback(value);\n }\n }\n };\n refCallback.current = initial;\n return refCallback;\n };\n var data = React.useRef({\n ref: createRefCallback(),\n callback: callback,\n }).current;\n data.callback = callback;\n return data.ref;\n}\n//# sourceMappingURL=useRefEffect.js.map","import * as React from 'react';\nimport { useConst } from './useConst';\n/**\n * Returns a wrapper function for `setTimeout` which automatically handles disposal.\n */\nexport var useSetTimeout = function () {\n var timeoutIds = useConst({});\n // Cleanup function.\n React.useEffect(function () { return function () {\n for (var _i = 0, _a = Object.keys(timeoutIds); _i < _a.length; _i++) {\n var id = _a[_i];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n clearTimeout(id);\n }\n }; }, \n // useConst ensures this will never change, but react-hooks/exhaustive-deps doesn't know that\n [timeoutIds]);\n // Return wrapper which will auto cleanup.\n return useConst({\n setTimeout: function (func, duration) {\n var id = setTimeout(func, duration);\n timeoutIds[id] = 1;\n return id;\n },\n clearTimeout: function (id) {\n delete timeoutIds[id];\n clearTimeout(id);\n },\n });\n};\n//# sourceMappingURL=useSetTimeout.js.map","import * as React from 'react';\n/**\n * Context for providing the window.\n */\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport var WindowContext = React.createContext({\n window: typeof window === 'object' ? window : undefined,\n});\n/**\n * Hook to access the window object. This can be overridden contextually using the `WindowProvider`.\n */\nexport var useWindow = function () { return React.useContext(WindowContext).window; };\n/**\n * Hook to access the document object. This can be overridden contextually using the `WindowProvider`.\n */\nexport var useDocument = function () { var _a; return (_a = React.useContext(WindowContext).window) === null || _a === void 0 ? void 0 : _a.document; };\n/**\n * Component to provide the window object contextually. This is useful when rendering content to an element\n * contained within a child window or iframe element, where event handlers and styling must be projected\n * to an alternative window or document.\n */\nexport var WindowProvider = function (props) {\n return React.createElement(WindowContext.Provider, { value: props }, props.children);\n};\n//# sourceMappingURL=WindowProvider.js.map","import { getDocument } from '@fluentui/utilities';\nimport * as React from 'react';\nimport { useWindow } from '@fluentui/react-window-provider';\n/**\n * Hook to calculate and cache the target element specified by the given target attribute,\n * as well as the target element's (or host element's) parent window\n * @param target- Target selector passed to the component as a property, describing the element that\n * the callout should target\n * @param hostElement- The callout's host element, used for determining the parent window.\n */\nexport function useTarget(target, hostElement) {\n var previousTargetProp = React.useRef();\n var targetRef = React.useRef(null);\n /**\n * Stores an instance of Window, used to check\n * for server side rendering and if focus was lost.\n */\n var targetWindow = useWindow();\n // If the target element changed, find the new one. If we are tracking\n // target with class name, always find element because we do not know if\n // fabric has rendered a new element and disposed the old element.\n if (!target || target !== previousTargetProp.current || typeof target === 'string') {\n var currentElement = hostElement === null || hostElement === void 0 ? void 0 : hostElement.current;\n if (target) {\n if (typeof target === 'string') {\n var currentDoc = getDocument(currentElement);\n targetRef.current = currentDoc ? currentDoc.querySelector(target) : null;\n }\n else if ('stopPropagation' in target) {\n targetRef.current = target;\n }\n else if ('getBoundingClientRect' in target) {\n targetRef.current = target;\n }\n else if ('current' in target) {\n targetRef.current = target.current;\n }\n else {\n targetRef.current = target;\n }\n }\n previousTargetProp.current = target;\n }\n return [targetRef, targetWindow];\n}\n//# sourceMappingURL=useTarget.js.map","import * as React from 'react';\n/**\n * Hook which synchronously executes a callback when the component is about to unmount.\n *\n * @param callback - Function to call during unmount.\n */\nexport var useUnmount = function (callback) {\n var unmountRef = React.useRef(callback);\n unmountRef.current = callback;\n React.useEffect(function () { return function () {\n var _a;\n (_a = unmountRef.current) === null || _a === void 0 ? void 0 : _a.call(unmountRef);\n }; }, []);\n};\n//# sourceMappingURL=useUnmount.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { KeyCodes, divProperties, doesElementContainFocus, getDocument, getNativeProps, getPropsWithDefaults, getWindow, modalize, } from '../../Utilities';\nimport { useMergedRefs, useAsync, useOnEvent } from '@fluentui/react-hooks';\nimport { useWindow } from '@fluentui/react-window-provider';\nfunction useScrollbarAsync(props, root) {\n var async = useAsync();\n var _a = React.useState(false), needsVerticalScrollBarState = _a[0], setNeedsVerticalScrollBar = _a[1];\n React.useEffect(function () {\n async.requestAnimationFrame(function () {\n var _a;\n // If overflowY is overridden, don't waste time calculating whether the scrollbar is necessary.\n if (props.style && props.style.overflowY) {\n return;\n }\n var needsVerticalScrollBar = false;\n if (root && root.current && ((_a = root.current) === null || _a === void 0 ? void 0 : _a.firstElementChild)) {\n // ClientHeight returns the client height of an element rounded to an\n // integer. On some browsers at different zoom levels this rounding\n // can generate different results for the root container and child even\n // though they are the same height. This causes us to show a scroll bar\n // when not needed. Ideally we would use BoundingClientRect().height\n // instead however seems that the API is 90% slower than using ClientHeight.\n // Therefore instead we will calculate the difference between heights and\n // allow for a 1px difference to still be considered ok and not show the\n // scroll bar.\n var rootHeight = root.current.clientHeight;\n var firstChildHeight = root.current.firstElementChild.clientHeight;\n if (rootHeight > 0 && firstChildHeight > rootHeight) {\n needsVerticalScrollBar = firstChildHeight - rootHeight > 1;\n }\n }\n if (needsVerticalScrollBarState !== needsVerticalScrollBar) {\n setNeedsVerticalScrollBar(needsVerticalScrollBar);\n }\n });\n return function () { return async.dispose(); };\n });\n return needsVerticalScrollBarState;\n}\nfunction defaultFocusRestorer(options) {\n var originalElement = options.originalElement, containsFocus = options.containsFocus;\n if (originalElement && containsFocus && originalElement !== getWindow()) {\n // Make sure that the focus method actually exists\n // In some cases the object might exist but not be a real element.\n // This is primarily for IE 11 and should be removed once IE 11 is no longer in use.\n // This is wrapped in a setTimeout because of a React 16 bug that is resolved in 17.\n // Once we move to 17, the setTimeout should be removed (ref: https://github.com/facebook/react/issues/17894#issuecomment-656094405)\n setTimeout(function () {\n var _a;\n (_a = originalElement.focus) === null || _a === void 0 ? void 0 : _a.call(originalElement);\n }, 0);\n }\n}\nfunction useRestoreFocus(props, root) {\n var _a = props.onRestoreFocus, onRestoreFocus = _a === void 0 ? defaultFocusRestorer : _a;\n var originalFocusedElement = React.useRef();\n var containsFocus = React.useRef(false);\n React.useEffect(function () {\n originalFocusedElement.current = getDocument().activeElement;\n if (doesElementContainFocus(root.current)) {\n containsFocus.current = true;\n }\n return function () {\n var _a;\n onRestoreFocus === null || onRestoreFocus === void 0 ? void 0 : onRestoreFocus({\n originalElement: originalFocusedElement.current,\n containsFocus: containsFocus.current,\n documentContainsFocus: ((_a = getDocument()) === null || _a === void 0 ? void 0 : _a.hasFocus()) || false,\n });\n // De-reference DOM Node to avoid retainment via transpiled closure of _onKeyDown\n originalFocusedElement.current = undefined;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on first render\n }, []);\n useOnEvent(root, 'focus', React.useCallback(function () {\n containsFocus.current = true;\n }, []), true);\n useOnEvent(root, 'blur', React.useCallback(function (ev) {\n /** The popup should update this._containsFocus when:\n * relatedTarget exists AND\n * the relatedTarget is not contained within the popup.\n * If the relatedTarget is within the popup, that means the popup still has focus\n * and focused moved from one element to another within the popup.\n * If relatedTarget is undefined or null that usually means that a\n * keyboard event occurred and focus didn't change\n */\n if (root.current && ev.relatedTarget && !root.current.contains(ev.relatedTarget)) {\n containsFocus.current = false;\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on first render\n }, []), true);\n}\nfunction useHideSiblingNodes(props, root) {\n // eslint-disable-next-line deprecation/deprecation\n var shouldHideSiblings = String(props['aria-modal']).toLowerCase() === 'true' && props.enableAriaHiddenSiblings;\n React.useEffect(function () {\n if (!(shouldHideSiblings && root.current)) {\n return;\n }\n var unmodalize = modalize(root.current);\n return unmodalize;\n }, [root, shouldHideSiblings]);\n}\n/**\n * This adds accessibility to Dialog and Panel controls\n */\nexport var Popup = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults({ shouldRestoreFocus: true, enableAriaHiddenSiblings: true }, propsWithoutDefaults);\n var root = React.useRef();\n var mergedRootRef = useMergedRefs(root, forwardedRef);\n useHideSiblingNodes(props, root);\n useRestoreFocus(props, root);\n var role = props.role, className = props.className, ariaLabel = props.ariaLabel, ariaLabelledBy = props.ariaLabelledBy, ariaDescribedBy = props.ariaDescribedBy, style = props.style, children = props.children, onDismiss = props.onDismiss;\n var needsVerticalScrollBar = useScrollbarAsync(props, root);\n var onKeyDown = React.useCallback(function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.escape:\n if (onDismiss) {\n onDismiss(ev);\n ev.preventDefault();\n ev.stopPropagation();\n }\n break;\n }\n }, [onDismiss]);\n var win = useWindow();\n useOnEvent(win, 'keydown', onKeyDown);\n return (React.createElement(\"div\", __assign({ ref: mergedRootRef }, getNativeProps(props, divProperties), { className: className, role: role, \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy, \"aria-describedby\": ariaDescribedBy, onKeyDown: onKeyDown, style: __assign({ overflowY: needsVerticalScrollBar ? 'scroll' : undefined, outline: 'none' }, style) }), children));\n});\nPopup.displayName = 'Popup';\n//# sourceMappingURL=Popup.js.map","var _a;\nimport { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { css, divProperties, elementContains, focusFirstChild, getNativeProps, on, shallowCompare, getPropsWithDefaults, } from '../../Utilities';\nimport { positionCallout, RectangleEdge, positionCard, getBoundsFromTargetWindow } from '../../Positioning';\nimport { Popup } from '../../Popup';\nimport { classNamesFunction } from '../../Utilities';\nimport { AnimationClassNames } from '../../Styling';\nimport { useMergedRefs, useAsync, useConst, useTarget, useOnEvent } from '@fluentui/react-hooks';\nvar COMPONENT_NAME = 'CalloutContentBase';\nvar ANIMATIONS = (_a = {},\n _a[RectangleEdge.top] = AnimationClassNames.slideUpIn10,\n _a[RectangleEdge.bottom] = AnimationClassNames.slideDownIn10,\n _a[RectangleEdge.left] = AnimationClassNames.slideLeftIn10,\n _a[RectangleEdge.right] = AnimationClassNames.slideRightIn10,\n _a);\nvar BEAK_ORIGIN_POSITION = { top: 0, left: 0 };\n// Microsoft Edge will overwrite inline styles if there is an animation pertaining to that style.\n// To help ensure that edge will respect the offscreen style opacity\n// filter needs to be added as an additional way to set opacity.\n// Also set pointer-events: none so that the callout will not occlude the element it is\n// going to be positioned against\nvar OFF_SCREEN_STYLE = {\n opacity: 0,\n filter: 'opacity(0)',\n pointerEvents: 'none',\n};\n// role and role description go hand-in-hand. Both would be included by spreading getNativeProps for a basic element\n// This constant array can be used to filter these out of native props spread on callout root and apply them together on\n// calloutMain (the Popup component within the callout)\nvar ARIA_ROLE_ATTRIBUTES = ['role', 'aria-roledescription'];\nvar DEFAULT_PROPS = {\n preventDismissOnLostFocus: false,\n preventDismissOnScroll: false,\n preventDismissOnResize: false,\n isBeakVisible: true,\n beakWidth: 16,\n gapSpace: 0,\n minPagePadding: 8,\n directionalHint: DirectionalHint.bottomAutoEdge,\n};\nvar getClassNames = classNamesFunction({\n disableCaching: true, // disabling caching because stylesProp.position mutates often\n});\n/**\n * (Hook) to return a function to lazily fetch the bounds of the target element for the callout.\n */\nfunction useBounds(_a, targetRef, targetWindow) {\n var bounds = _a.bounds, _b = _a.minPagePadding, minPagePadding = _b === void 0 ? DEFAULT_PROPS.minPagePadding : _b, target = _a.target;\n var _c = React.useState(false), targetWindowResized = _c[0], setTargetWindowResized = _c[1];\n var cachedBounds = React.useRef();\n var getBounds = React.useCallback(function () {\n if (!cachedBounds.current || targetWindowResized) {\n var currentBounds = typeof bounds === 'function' ? (targetWindow ? bounds(target, targetWindow) : undefined) : bounds;\n if (!currentBounds && targetWindow) {\n currentBounds = getBoundsFromTargetWindow(targetRef.current, targetWindow);\n currentBounds = {\n top: currentBounds.top + minPagePadding,\n left: currentBounds.left + minPagePadding,\n right: currentBounds.right - minPagePadding,\n bottom: currentBounds.bottom - minPagePadding,\n width: currentBounds.width - minPagePadding * 2,\n height: currentBounds.height - minPagePadding * 2,\n };\n }\n cachedBounds.current = currentBounds;\n targetWindowResized && setTargetWindowResized(false);\n }\n return cachedBounds.current;\n }, [bounds, minPagePadding, target, targetRef, targetWindow, targetWindowResized]);\n var async = useAsync();\n useOnEvent(targetWindow, 'resize', async.debounce(function () {\n setTargetWindowResized(true);\n }, 500, { leading: true }));\n return getBounds;\n}\n/**\n * (Hook) to return the maximum available height for the Callout to render into.\n */\nfunction useMaxHeight(_a, getBounds, positions) {\n var _b;\n var calloutMaxHeight = _a.calloutMaxHeight, finalHeight = _a.finalHeight, directionalHint = _a.directionalHint, directionalHintFixed = _a.directionalHintFixed, hidden = _a.hidden;\n var _c = React.useState(), maxHeight = _c[0], setMaxHeight = _c[1];\n var _d = (_b = positions === null || positions === void 0 ? void 0 : positions.elementPosition) !== null && _b !== void 0 ? _b : {}, top = _d.top, bottom = _d.bottom;\n React.useEffect(function () {\n var _a;\n var _b = (_a = getBounds()) !== null && _a !== void 0 ? _a : {}, topBounds = _b.top, bottomBounds = _b.bottom;\n var calculatedHeight;\n if (typeof top === 'number' && bottomBounds) {\n calculatedHeight = bottomBounds - top;\n }\n else if (typeof bottom === 'number' && typeof topBounds === 'number' && bottomBounds) {\n calculatedHeight = bottomBounds - topBounds - bottom;\n }\n if ((!calloutMaxHeight && !hidden) ||\n (calloutMaxHeight && calculatedHeight && calloutMaxHeight > calculatedHeight)) {\n setMaxHeight(calculatedHeight);\n }\n else if (calloutMaxHeight) {\n setMaxHeight(calloutMaxHeight);\n }\n else {\n setMaxHeight(undefined);\n }\n }, [bottom, calloutMaxHeight, finalHeight, directionalHint, directionalHintFixed, getBounds, hidden, positions, top]);\n return maxHeight;\n}\n/**\n * (Hook) to find the current position of Callout. If Callout is resized then a new position is calculated.\n */\nfunction usePositions(props, hostElement, calloutElement, targetRef, getBounds) {\n var _a = React.useState(), positions = _a[0], setPositions = _a[1];\n var positionAttempts = React.useRef(0);\n var previousTarget = React.useRef();\n var async = useAsync();\n var hidden = props.hidden, target = props.target, finalHeight = props.finalHeight, calloutMaxHeight = props.calloutMaxHeight, onPositioned = props.onPositioned, directionalHint = props.directionalHint;\n React.useEffect(function () {\n if (!hidden) {\n var timerId_1 = async.requestAnimationFrame(function () {\n var _a, _b;\n if (hostElement.current && calloutElement) {\n var currentProps = __assign(__assign({}, props), { target: targetRef.current, bounds: getBounds() });\n // duplicate calloutElement & remove useMaxHeight's maxHeight for position calc\n var dupeCalloutElement = calloutElement.cloneNode(true);\n dupeCalloutElement.style.maxHeight = calloutMaxHeight ? \"\".concat(calloutMaxHeight) : '';\n dupeCalloutElement.style.visibility = 'hidden';\n (_a = calloutElement.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(dupeCalloutElement);\n var previousPositions = previousTarget.current === target ? positions : undefined;\n // If there is a finalHeight given then we assume that the user knows and will handle\n // additional positioning adjustments so we should call positionCard\n var newPositions = finalHeight\n ? positionCard(currentProps, hostElement.current, dupeCalloutElement, previousPositions)\n : positionCallout(currentProps, hostElement.current, dupeCalloutElement, previousPositions);\n // clean up duplicate calloutElement\n (_b = calloutElement.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(dupeCalloutElement);\n // Set the new position only when the positions do not exist or one of the new callout positions\n // is different. The position should not change if the position is within 2 decimal places.\n if ((!positions && newPositions) ||\n (positions && newPositions && !arePositionsEqual(positions, newPositions) && positionAttempts.current < 5)) {\n // We should not reposition the callout more than a few times, if it is then the content is likely resizing\n // and we should stop trying to reposition to prevent a stack overflow.\n positionAttempts.current++;\n setPositions(newPositions);\n }\n else if (positionAttempts.current > 0) {\n // Only call the onPositioned callback if the callout has been re-positioned at least once.\n positionAttempts.current = 0;\n onPositioned === null || onPositioned === void 0 ? void 0 : onPositioned(positions);\n }\n }\n }, calloutElement);\n previousTarget.current = target;\n return function () {\n async.cancelAnimationFrame(timerId_1);\n previousTarget.current = undefined;\n };\n }\n else {\n // When the callout is hidden, clear position state so that it is not accidentally used next render.\n setPositions(undefined);\n positionAttempts.current = 0;\n }\n }, [\n hidden,\n directionalHint,\n async,\n calloutElement,\n calloutMaxHeight,\n hostElement,\n targetRef,\n finalHeight,\n getBounds,\n onPositioned,\n positions,\n props,\n target,\n ]);\n return positions;\n}\n/**\n * (Hook) to set up behavior to automatically focus the callout when it appears, if indicated by props.\n */\nfunction useAutoFocus(_a, positions, calloutElement) {\n var hidden = _a.hidden, setInitialFocus = _a.setInitialFocus;\n var async = useAsync();\n var hasPositions = !!positions;\n React.useEffect(function () {\n if (!hidden && setInitialFocus && hasPositions && calloutElement) {\n var timerId_2 = async.requestAnimationFrame(function () { return focusFirstChild(calloutElement); }, calloutElement);\n return function () { return async.cancelAnimationFrame(timerId_2); };\n }\n }, [hidden, hasPositions, async, calloutElement, setInitialFocus]);\n}\n/**\n * (Hook) to set up various handlers to dismiss the popup when it loses focus or the window scrolls or similar cases.\n */\nfunction useDismissHandlers(_a, positions, hostElement, targetRef, targetWindow) {\n var hidden = _a.hidden, onDismiss = _a.onDismiss, \n // eslint-disable-next-line deprecation/deprecation\n preventDismissOnScroll = _a.preventDismissOnScroll, \n // eslint-disable-next-line deprecation/deprecation\n preventDismissOnResize = _a.preventDismissOnResize, \n // eslint-disable-next-line deprecation/deprecation\n preventDismissOnLostFocus = _a.preventDismissOnLostFocus, dismissOnTargetClick = _a.dismissOnTargetClick, shouldDismissOnWindowFocus = _a.shouldDismissOnWindowFocus, preventDismissOnEvent = _a.preventDismissOnEvent;\n var isMouseDownOnPopup = React.useRef(false);\n var async = useAsync();\n var mouseDownHandlers = useConst([\n function () {\n isMouseDownOnPopup.current = true;\n },\n function () {\n isMouseDownOnPopup.current = false;\n },\n ]);\n var positionsExists = !!positions;\n React.useEffect(function () {\n var dismissOnScroll = function (ev) {\n if (positionsExists && !preventDismissOnScroll) {\n dismissOnClickOrScroll(ev);\n }\n };\n var dismissOnResize = function (ev) {\n if (!preventDismissOnResize && !(preventDismissOnEvent && preventDismissOnEvent(ev))) {\n onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(ev);\n }\n };\n var dismissOnLostFocus = function (ev) {\n if (!preventDismissOnLostFocus) {\n dismissOnClickOrScroll(ev);\n }\n };\n var dismissOnClickOrScroll = function (ev) {\n var eventPaths = ev.composedPath ? ev.composedPath() : [];\n var target = eventPaths.length > 0 ? eventPaths[0] : ev.target;\n var isEventTargetOutsideCallout = hostElement.current && !elementContains(hostElement.current, target);\n // If mouse is pressed down on callout but moved outside then released, don't dismiss the callout.\n if (isEventTargetOutsideCallout && isMouseDownOnPopup.current) {\n isMouseDownOnPopup.current = false;\n return;\n }\n if ((!targetRef.current && isEventTargetOutsideCallout) ||\n (ev.target !== targetWindow &&\n isEventTargetOutsideCallout &&\n (!targetRef.current ||\n 'stopPropagation' in targetRef.current ||\n dismissOnTargetClick ||\n (target !== targetRef.current && !elementContains(targetRef.current, target))))) {\n if (preventDismissOnEvent && preventDismissOnEvent(ev)) {\n return;\n }\n onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(ev);\n }\n };\n var dismissOnTargetWindowBlur = function (ev) {\n // Do nothing\n if (!shouldDismissOnWindowFocus) {\n return;\n }\n if (((preventDismissOnEvent && !preventDismissOnEvent(ev)) ||\n (!preventDismissOnEvent && !preventDismissOnLostFocus)) &&\n !(targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document.hasFocus()) &&\n ev.relatedTarget === null) {\n onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(ev);\n }\n };\n // This is added so the callout will dismiss when the window is scrolled\n // but not when something inside the callout is scrolled. The delay seems\n // to be required to avoid React firing an async focus event in IE from\n // the target changing focus quickly prior to rendering the callout.\n var disposablesPromise = new Promise(function (resolve) {\n async.setTimeout(function () {\n if (!hidden && targetWindow) {\n var disposables_1 = [\n on(targetWindow, 'scroll', dismissOnScroll, true),\n on(targetWindow, 'resize', dismissOnResize, true),\n on(targetWindow.document.documentElement, 'focus', dismissOnLostFocus, true),\n on(targetWindow.document.documentElement, 'click', dismissOnLostFocus, true),\n on(targetWindow, 'blur', dismissOnTargetWindowBlur, true),\n ];\n resolve(function () {\n disposables_1.forEach(function (dispose) { return dispose(); });\n });\n }\n }, 0);\n });\n return function () {\n disposablesPromise.then(function (dispose) { return dispose(); });\n };\n }, [\n hidden,\n async,\n hostElement,\n targetRef,\n targetWindow,\n onDismiss,\n shouldDismissOnWindowFocus,\n dismissOnTargetClick,\n preventDismissOnLostFocus,\n preventDismissOnResize,\n preventDismissOnScroll,\n positionsExists,\n preventDismissOnEvent,\n ]);\n return mouseDownHandlers;\n}\nexport var CalloutContentBase = React.memo(React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var styles = props.styles, style = props.style, ariaLabel = props.ariaLabel, ariaDescribedBy = props.ariaDescribedBy, ariaLabelledBy = props.ariaLabelledBy, className = props.className, isBeakVisible = props.isBeakVisible, children = props.children, beakWidth = props.beakWidth, calloutWidth = props.calloutWidth, calloutMaxWidth = props.calloutMaxWidth, calloutMinWidth = props.calloutMinWidth, doNotLayer = props.doNotLayer, finalHeight = props.finalHeight, _a = props.hideOverflow, hideOverflow = _a === void 0 ? !!finalHeight : _a, backgroundColor = props.backgroundColor, calloutMaxHeight = props.calloutMaxHeight, onScroll = props.onScroll, \n // eslint-disable-next-line deprecation/deprecation\n _b = props.shouldRestoreFocus, \n // eslint-disable-next-line deprecation/deprecation\n shouldRestoreFocus = _b === void 0 ? true : _b, target = props.target, hidden = props.hidden, onLayerMounted = props.onLayerMounted, popupProps = props.popupProps;\n var hostElement = React.useRef(null);\n var _c = React.useState(null), calloutElement = _c[0], setCalloutElement = _c[1];\n var calloutCallback = React.useCallback(function (calloutEl) {\n setCalloutElement(calloutEl);\n }, []);\n var rootRef = useMergedRefs(hostElement, forwardedRef);\n var _d = useTarget(props.target, {\n current: calloutElement,\n }), targetRef = _d[0], targetWindow = _d[1];\n var getBounds = useBounds(props, targetRef, targetWindow);\n var positions = usePositions(props, hostElement, calloutElement, targetRef, getBounds);\n var maxHeight = useMaxHeight(props, getBounds, positions);\n var _e = useDismissHandlers(props, positions, hostElement, targetRef, targetWindow), mouseDownOnPopup = _e[0], mouseUpOnPopup = _e[1];\n // do not set both top and bottom css props from positions\n // instead, use maxHeight\n var isForcedInBounds = (positions === null || positions === void 0 ? void 0 : positions.elementPosition.top) && (positions === null || positions === void 0 ? void 0 : positions.elementPosition.bottom);\n var cssPositions = __assign(__assign({}, positions === null || positions === void 0 ? void 0 : positions.elementPosition), { maxHeight: maxHeight });\n if (isForcedInBounds) {\n cssPositions.bottom = undefined;\n }\n useAutoFocus(props, positions, calloutElement);\n React.useEffect(function () {\n if (!hidden) {\n onLayerMounted === null || onLayerMounted === void 0 ? void 0 : onLayerMounted();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run if hidden changes\n }, [hidden]);\n // If there is no target window then we are likely in server side rendering and we should not render anything.\n if (!targetWindow) {\n return null;\n }\n var overflowYHidden = hideOverflow;\n var beakVisible = isBeakVisible && !!target;\n var classNames = getClassNames(styles, {\n theme: props.theme,\n className: className,\n overflowYHidden: overflowYHidden,\n calloutWidth: calloutWidth,\n positions: positions,\n beakWidth: beakWidth,\n backgroundColor: backgroundColor,\n calloutMaxWidth: calloutMaxWidth,\n calloutMinWidth: calloutMinWidth,\n doNotLayer: doNotLayer,\n });\n var overflowStyle = __assign(__assign({ maxHeight: calloutMaxHeight ? calloutMaxHeight : '100%' }, style), (overflowYHidden && { overflowY: 'hidden' }));\n var visibilityStyle = props.hidden ? { visibility: 'hidden' } : undefined;\n // React.CSSProperties does not understand IRawStyle, so the inline animations will need to be cast as any for now.\n return (React.createElement(\"div\", { ref: rootRef, className: classNames.container, style: visibilityStyle },\n React.createElement(\"div\", __assign({}, getNativeProps(props, divProperties, ARIA_ROLE_ATTRIBUTES), { className: css(classNames.root, positions && positions.targetEdge && ANIMATIONS[positions.targetEdge]), style: positions ? __assign({}, cssPositions) : OFF_SCREEN_STYLE, \n // Safari and Firefox on Mac OS requires this to back-stop click events so focus remains in the Callout.\n // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n tabIndex: -1, ref: calloutCallback }),\n beakVisible && React.createElement(\"div\", { className: classNames.beak, style: getBeakPosition(positions) }),\n beakVisible && React.createElement(\"div\", { className: classNames.beakCurtain }),\n React.createElement(Popup\n // don't use getNativeElementProps for role and roledescription because it will also\n // pass through data-* props (resulting in them being used in two places)\n , __assign({ \n // don't use getNativeElementProps for role and roledescription because it will also\n // pass through data-* props (resulting in them being used in two places)\n role: props.role, \"aria-roledescription\": props['aria-roledescription'], ariaDescribedBy: ariaDescribedBy, ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy, className: classNames.calloutMain, onDismiss: props.onDismiss, onMouseDown: mouseDownOnPopup, onMouseUp: mouseUpOnPopup, onRestoreFocus: props.onRestoreFocus, onScroll: onScroll, shouldRestoreFocus: shouldRestoreFocus, style: overflowStyle }, popupProps), children))));\n}), function (previousProps, nextProps) {\n if (!nextProps.shouldUpdateWhenHidden && previousProps.hidden && nextProps.hidden) {\n // Do not update when hidden.\n return true;\n }\n return shallowCompare(previousProps, nextProps);\n});\n/**\n * (Utility) to find and return the current `Callout` Beak position.\n *\n * @param positions\n */\nfunction getBeakPosition(positions) {\n var _a, _b;\n var beakPositionStyle = __assign(__assign({}, (_a = positions === null || positions === void 0 ? void 0 : positions.beakPosition) === null || _a === void 0 ? void 0 : _a.elementPosition), { display: ((_b = positions === null || positions === void 0 ? void 0 : positions.beakPosition) === null || _b === void 0 ? void 0 : _b.hideBeak) ? 'none' : undefined });\n if (!beakPositionStyle.top && !beakPositionStyle.bottom && !beakPositionStyle.left && !beakPositionStyle.right) {\n beakPositionStyle.left = BEAK_ORIGIN_POSITION.left;\n beakPositionStyle.top = BEAK_ORIGIN_POSITION.top;\n }\n return beakPositionStyle;\n}\n/**\n * (Utility) used to compare two different elementPositions to determine whether they are equal.\n *\n * @param prevElementPositions\n * @param newElementPosition\n */\nfunction arePositionsEqual(prevElementPositions, newElementPosition) {\n return (comparePositions(prevElementPositions.elementPosition, newElementPosition.elementPosition) &&\n comparePositions(prevElementPositions.beakPosition.elementPosition, newElementPosition.beakPosition.elementPosition));\n}\n/**\n * (Utility) used in **arePositionsEqual** to compare two different elementPositions.\n *\n * @param prevElementPositions\n * @param newElementPositions\n */\nfunction comparePositions(prevElementPositions, newElementPositions) {\n for (var key in newElementPositions) {\n if (newElementPositions.hasOwnProperty(key)) {\n var oldPositionEdge = prevElementPositions[key];\n var newPositionEdge = newElementPositions[key];\n if (oldPositionEdge !== undefined && newPositionEdge !== undefined) {\n if (oldPositionEdge.toFixed(2) !== newPositionEdge.toFixed(2)) {\n return false;\n }\n }\n else {\n return false;\n }\n }\n }\n return true;\n}\nCalloutContentBase.displayName = COMPONENT_NAME;\n//# sourceMappingURL=CalloutContent.base.js.map","import { HighContrastSelector, focusClear, getGlobalClassNames, ZIndexes } from '../../Styling';\nfunction getBeakStyle(beakWidth) {\n return {\n height: beakWidth,\n width: beakWidth,\n };\n}\nvar GlobalClassNames = {\n container: 'ms-Callout-container',\n root: 'ms-Callout',\n beak: 'ms-Callout-beak',\n beakCurtain: 'ms-Callout-beakCurtain',\n calloutMain: 'ms-Callout-main',\n};\nexport var getStyles = function (props) {\n var _a;\n var theme = props.theme, className = props.className, overflowYHidden = props.overflowYHidden, calloutWidth = props.calloutWidth, beakWidth = props.beakWidth, backgroundColor = props.backgroundColor, calloutMaxWidth = props.calloutMaxWidth, calloutMinWidth = props.calloutMinWidth, doNotLayer = props.doNotLayer;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var semanticColors = theme.semanticColors, effects = theme.effects;\n return {\n container: [\n classNames.container,\n {\n position: 'relative',\n },\n ],\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n position: 'absolute',\n display: 'flex',\n zIndex: doNotLayer ? ZIndexes.Layer : undefined,\n boxSizing: 'border-box',\n borderRadius: effects.roundedCorner2,\n boxShadow: effects.elevation16,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: 'WindowText',\n },\n _a),\n },\n focusClear(),\n className,\n !!calloutWidth && { width: calloutWidth },\n !!calloutMaxWidth && { maxWidth: calloutMaxWidth },\n !!calloutMinWidth && { minWidth: calloutMinWidth },\n ],\n beak: [\n classNames.beak,\n {\n position: 'absolute',\n backgroundColor: semanticColors.menuBackground,\n boxShadow: 'inherit',\n border: 'inherit',\n boxSizing: 'border-box',\n transform: 'rotate(45deg)',\n },\n getBeakStyle(beakWidth),\n backgroundColor && {\n backgroundColor: backgroundColor,\n },\n ],\n beakCurtain: [\n classNames.beakCurtain,\n {\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n backgroundColor: semanticColors.menuBackground,\n borderRadius: effects.roundedCorner2,\n },\n ],\n calloutMain: [\n classNames.calloutMain,\n {\n backgroundColor: semanticColors.menuBackground,\n overflowX: 'hidden',\n overflowY: 'auto',\n position: 'relative',\n width: '100%',\n borderRadius: effects.roundedCorner2,\n },\n overflowYHidden && {\n overflowY: 'hidden',\n },\n backgroundColor && {\n backgroundColor: backgroundColor,\n },\n ],\n };\n};\n//# sourceMappingURL=CalloutContent.styles.js.map","import { styled } from '../../Utilities';\nimport { CalloutContentBase } from './CalloutContent.base';\nimport { getStyles } from './CalloutContent.styles';\nexport var CalloutContent = styled(CalloutContentBase, getStyles, undefined, {\n scope: 'CalloutContent',\n});\n//# sourceMappingURL=CalloutContent.js.map","import * as React from 'react';\nconst PortalCompatContext = React.createContext(undefined);\nconst portalCompatContextDefaultValue = ()=>()=>undefined;\nexport const PortalCompatContextProvider = PortalCompatContext.Provider;\nexport function usePortalCompat() {\n var _React_useContext;\n return (_React_useContext = React.useContext(PortalCompatContext)) !== null && _React_useContext !== void 0 ? _React_useContext : portalCompatContextDefaultValue;\n}\n","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, divProperties, getDocument, getNativeProps, getRTL, memoizeFunction, Customizer, FocusRectsProvider, } from '../../Utilities';\nimport { createTheme } from '../../Styling';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\nvar getFabricTheme = memoizeFunction(function (theme, isRTL) { return createTheme(__assign(__assign({}, theme), { rtl: isRTL })); });\nvar getDir = function (_a) {\n var theme = _a.theme, dir = _a.dir;\n var contextDir = getRTL(theme) ? 'rtl' : 'ltr';\n var pageDir = getRTL() ? 'rtl' : 'ltr';\n var componentDir = dir ? dir : contextDir;\n return {\n // If Fabric dir !== contextDir\n // Or If contextDir !== pageDir\n // Then we need to set dir of the Fabric root\n rootDir: componentDir !== contextDir || componentDir !== pageDir ? componentDir : dir,\n // If dir !== contextDir || pageDir\n // then set contextual theme around content\n needsTheme: componentDir !== contextDir,\n };\n};\nexport var FabricBase = React.forwardRef(function (props, ref) {\n var className = props.className, theme = props.theme, applyTheme = props.applyTheme, applyThemeToBody = props.applyThemeToBody, styles = props.styles;\n var classNames = getClassNames(styles, {\n theme: theme,\n applyTheme: applyTheme,\n className: className,\n });\n var rootElement = React.useRef(null);\n useApplyThemeToBody(applyThemeToBody, classNames, rootElement);\n return React.createElement(React.Fragment, null, useRenderedContent(props, classNames, rootElement, ref));\n});\nFabricBase.displayName = 'FabricBase';\nfunction useRenderedContent(props, _a, rootElement, ref) {\n var root = _a.root;\n var _b = props.as, Root = _b === void 0 ? 'div' : _b, dir = props.dir, theme = props.theme;\n var divProps = getNativeProps(props, divProperties, ['dir']);\n var _c = getDir(props), rootDir = _c.rootDir, needsTheme = _c.needsTheme;\n var renderedContent = (React.createElement(FocusRectsProvider, { providerRef: rootElement },\n React.createElement(Root, __assign({ dir: rootDir }, divProps, { className: root, ref: useMergedRefs(rootElement, ref) }))));\n // Create the contextual theme if component direction does not match parent direction.\n if (needsTheme) {\n // Disabling ThemeProvider here because theme doesn't need to be re-provided by ThemeProvider if dir has changed.\n renderedContent = (\n // eslint-disable-next-line deprecation/deprecation\n React.createElement(Customizer, { settings: { theme: getFabricTheme(theme, dir === 'rtl') } }, renderedContent));\n }\n return renderedContent;\n}\nfunction useApplyThemeToBody(applyThemeToBody, _a, rootElement) {\n var bodyThemed = _a.bodyThemed;\n React.useEffect(function () {\n if (applyThemeToBody) {\n var currentDoc_1 = getDocument(rootElement.current);\n if (currentDoc_1) {\n currentDoc_1.body.classList.add(bodyThemed);\n return function () {\n currentDoc_1.body.classList.remove(bodyThemed);\n };\n }\n }\n }, [bodyThemed, applyThemeToBody, rootElement]);\n return rootElement;\n}\n//# sourceMappingURL=Fabric.base.js.map","import { getGlobalClassNames } from '../../Styling';\nvar inheritFont = { fontFamily: 'inherit' };\nvar GlobalClassNames = {\n root: 'ms-Fabric',\n bodyThemed: 'ms-Fabric-bodyThemed',\n};\nexport var getStyles = function (props) {\n var applyTheme = props.applyTheme, className = props.className, preventBlanketFontInheritance = props.preventBlanketFontInheritance, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n color: theme.palette.neutralPrimary,\n },\n !preventBlanketFontInheritance && {\n '& button': inheritFont,\n '& input': inheritFont,\n '& textarea': inheritFont,\n },\n // apply theme to only if applyTheme is true\n applyTheme && {\n color: theme.semanticColors.bodyText,\n backgroundColor: theme.semanticColors.bodyBackground,\n },\n className,\n ],\n bodyThemed: [\n {\n backgroundColor: theme.semanticColors.bodyBackground,\n },\n ],\n };\n};\n//# sourceMappingURL=Fabric.styles.js.map","import { styled } from '../../Utilities';\nimport { FabricBase } from './Fabric.base';\nimport { getStyles } from './Fabric.styles';\n/**\n * @deprecated This component is deprecated as of `@fluentui/react` version 8. Use `ThemeProvider` instead.\n */\nexport var Fabric = styled(FabricBase, getStyles, undefined, {\n scope: 'Fabric',\n});\n//# sourceMappingURL=Fabric.js.map","var _layersByHostId = {};\nvar _layerHostsById = {};\nvar defaultHostId = 'fluent-default-layer-host';\nvar _defaultHostSelector = \"#\".concat(defaultHostId);\n/**\n * Register a layer for a given host id\n * @param hostId - Id of the layer host\n * @param layer - Layer instance\n */\nexport function registerLayer(hostId, callback) {\n if (!_layersByHostId[hostId]) {\n _layersByHostId[hostId] = [];\n }\n _layersByHostId[hostId].push(callback);\n var layerHosts = _layerHostsById[hostId];\n if (layerHosts) {\n for (var _i = 0, layerHosts_1 = layerHosts; _i < layerHosts_1.length; _i++) {\n var layerHost = layerHosts_1[_i];\n layerHost.notifyLayersChanged();\n }\n }\n}\n/**\n * Unregister a layer for a given host id\n * @param hostId - Id of the layer host\n * @param layer - Layer instance\n */\nexport function unregisterLayer(hostId, callback) {\n var layers = _layersByHostId[hostId];\n if (layers) {\n var idx = layers.indexOf(callback);\n if (idx >= 0) {\n layers.splice(idx, 1);\n if (layers.length === 0) {\n delete _layersByHostId[hostId];\n }\n }\n }\n var layerHosts = _layerHostsById[hostId];\n if (layerHosts) {\n for (var _i = 0, layerHosts_2 = layerHosts; _i < layerHosts_2.length; _i++) {\n var layerHost = layerHosts_2[_i];\n layerHost.notifyLayersChanged();\n }\n }\n}\n/**\n * Gets the number of layers currently registered with a host id.\n * @param hostId - Id of the layer host.\n * @returns The number of layers currently registered with the host.\n */\nexport function getLayerCount(hostId) {\n var layers = _layerHostsById[hostId];\n return layers ? layers.length : 0;\n}\n/**\n * Gets the Layer Host instance associated with a hostId, if applicable.\n * @param hostId - Id of the layer host\n * @returns A component ref for the associated layer host.\n */\nexport function getLayerHost(hostId) {\n var layerHosts = _layerHostsById[hostId];\n return (layerHosts && layerHosts[0]) || undefined;\n}\n/**\n * Registers a Layer Host with an associated hostId.\n * @param hostId - Id of the layer host\n * @param layerHost - layer host instance\n */\nexport function registerLayerHost(hostId, layerHost) {\n var layerHosts = _layerHostsById[hostId] || (_layerHostsById[hostId] = []);\n // Insert this at the start of an array to avoid race conditions between mount and unmount.\n // If a LayerHost is re-mounted, and mount of the new instance may occur before the unmount of the old one.\n // Putting the new instance at the start of this array ensures that calls to `getLayerHost` will immediately\n // get the new one even if the old one is around briefly.\n layerHosts.unshift(layerHost);\n}\n/**\n * Unregisters a Layer Host from the associated hostId.\n * @param hostId - Id of the layer host\n * @param layerHost - layer host instance\n */\nexport function unregisterLayerHost(hostId, layerHost) {\n var layerHosts = _layerHostsById[hostId];\n if (layerHosts) {\n var idx = layerHosts.indexOf(layerHost);\n if (idx >= 0) {\n layerHosts.splice(idx, 1);\n }\n if (layerHosts.length === 0) {\n delete _layerHostsById[hostId];\n }\n }\n}\n/**\n * When no default layer host is provided, this function is executed to create the default host.\n */\nexport function createDefaultLayerHost(doc) {\n var host = doc.createElement('div');\n host.setAttribute('id', defaultHostId);\n host.style.cssText = 'position:fixed;z-index:1000000';\n doc === null || doc === void 0 ? void 0 : doc.body.appendChild(host);\n return host;\n}\n/**\n * This function can be optionally called to clean up the default layer host as needed.\n */\nexport function cleanupDefaultLayerHost(doc) {\n var host = doc.querySelector(\"#\".concat(defaultHostId));\n if (host) {\n doc.removeChild(host);\n }\n}\n/**\n * Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that\n * care about the specific host.\n */\nexport function notifyHostChanged(id) {\n if (_layersByHostId[id]) {\n _layersByHostId[id].forEach(function (callback) { return callback(); });\n }\n}\n/**\n * Sets the default target selector to use when determining the host in which\n * Layered content will be injected into. If not provided, an element will be\n * created at the end of the document body.\n *\n * Passing in a falsy value will clear the default target and reset back to\n * using a created element at the end of document body.\n */\nexport function setDefaultTarget(selector) {\n _defaultHostSelector = selector;\n}\n/**\n * Get the default target selector when determining a host\n */\nexport function getDefaultTarget() {\n return _defaultHostSelector;\n}\n//# sourceMappingURL=Layer.notification.js.map","import { __assign } from \"tslib\";\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore \"react-portal-compat-context\" uses v9 configs via path aliases\nimport { usePortalCompat } from '@fluentui/react-portal-compat-context';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { Fabric } from '../../Fabric';\nimport { classNamesFunction, css, getDocument, setPortalAttribute, setVirtualParent, FocusRectsProvider, FocusRectsContext, IsFocusVisibleClassName, } from '../../Utilities';\nimport { registerLayer, getDefaultTarget, unregisterLayer, getLayerHost, createDefaultLayerHost, } from './Layer.notification';\nimport { useIsomorphicLayoutEffect, useMergedRefs, useWarnings } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\nvar getFocusVisibility = function (providerRef) {\n if (providerRef === null || providerRef === void 0 ? void 0 : providerRef.current) {\n return providerRef.current.classList.contains(IsFocusVisibleClassName);\n }\n return false;\n};\nexport var LayerBase = React.forwardRef(function (props, ref) {\n var registerPortalEl = usePortalCompat();\n var rootRef = React.useRef(null);\n var mergedRef = useMergedRefs(rootRef, ref);\n var layerRef = React.useRef();\n var fabricElementRef = React.useRef(null);\n var focusContext = React.useContext(FocusRectsContext);\n // Tracks if the layer mount events need to be raised.\n // Required to allow the DOM to render after the layer element is added.\n var _a = React.useState(false), needRaiseLayerMount = _a[0], setNeedRaiseLayerMount = _a[1];\n // Sets the focus visible className when the FocusRectsProvider for the layer is rendered\n // This allows the current focus visibility style to be carried over to the layer content\n var focusRectsRef = React.useCallback(function (el) {\n var isFocusVisible = getFocusVisibility(focusContext === null || focusContext === void 0 ? void 0 : focusContext.providerRef);\n if (el && isFocusVisible) {\n el.classList.add(IsFocusVisibleClassName);\n }\n }, [focusContext]);\n var children = props.children, className = props.className, eventBubblingEnabled = props.eventBubblingEnabled, fabricProps = props.fabricProps, hostId = props.hostId, insertFirst = props.insertFirst, _b = props.onLayerDidMount, onLayerDidMount = _b === void 0 ? function () { return undefined; } : _b, \n // eslint-disable-next-line deprecation/deprecation\n _c = props.onLayerMounted, \n // eslint-disable-next-line deprecation/deprecation\n onLayerMounted = _c === void 0 ? function () { return undefined; } : _c, onLayerWillUnmount = props.onLayerWillUnmount, styles = props.styles, theme = props.theme;\n var fabricRef = useMergedRefs(fabricElementRef, fabricProps === null || fabricProps === void 0 ? void 0 : fabricProps.ref, focusRectsRef);\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n isNotHost: !hostId,\n });\n // Returns the user provided hostId props element, the default target selector,\n // or undefined if document doesn't exist.\n var getHost = function (doc) {\n var _a, _b;\n if (hostId) {\n var layerHost = getLayerHost(hostId);\n if (layerHost) {\n return (_a = layerHost.rootRef.current) !== null && _a !== void 0 ? _a : null;\n }\n return (_b = doc.getElementById(hostId)) !== null && _b !== void 0 ? _b : null;\n }\n else {\n var defaultHostSelector = getDefaultTarget();\n // Find the host.\n var host = defaultHostSelector ? doc.querySelector(defaultHostSelector) : null;\n // If no host is available, create a container for injecting layers in.\n // Having a container scopes layout computation.\n if (!host) {\n host = createDefaultLayerHost(doc);\n }\n return host;\n }\n };\n // Removes the current layer element's parentNode and runs onLayerWillUnmount prop if provided.\n var removeLayerElement = function () {\n onLayerWillUnmount === null || onLayerWillUnmount === void 0 ? void 0 : onLayerWillUnmount();\n var elem = layerRef.current;\n // Clear ref before removing from the DOM\n layerRef.current = undefined;\n if (elem && elem.parentNode) {\n elem.parentNode.removeChild(elem);\n }\n };\n // If a doc or host exists, it will remove and update layer parentNodes.\n var createLayerElement = function () {\n var _a;\n var doc = getDocument(rootRef.current);\n if (!doc) {\n return;\n }\n var host = getHost(doc);\n if (!host) {\n return;\n }\n // Remove and re-create any previous existing layer elements.\n removeLayerElement();\n var el = ((_a = host.ownerDocument) !== null && _a !== void 0 ? _a : doc).createElement('div');\n el.className = classNames.root;\n setPortalAttribute(el);\n setVirtualParent(el, rootRef.current);\n insertFirst ? host.insertBefore(el, host.firstChild) : host.appendChild(el);\n layerRef.current = el;\n setNeedRaiseLayerMount(true);\n };\n useIsomorphicLayoutEffect(function () {\n createLayerElement();\n // Check if the user provided a hostId prop and register the layer with the ID.\n if (hostId) {\n registerLayer(hostId, createLayerElement);\n }\n var unregisterPortalEl = layerRef.current ? registerPortalEl(layerRef.current) : undefined;\n return function () {\n if (unregisterPortalEl) {\n unregisterPortalEl();\n }\n removeLayerElement();\n if (hostId) {\n unregisterLayer(hostId, createLayerElement);\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should run if the hostId updates.\n }, [hostId]);\n React.useEffect(function () {\n if (layerRef.current && needRaiseLayerMount) {\n onLayerMounted === null || onLayerMounted === void 0 ? void 0 : onLayerMounted();\n onLayerDidMount === null || onLayerDidMount === void 0 ? void 0 : onLayerDidMount();\n setNeedRaiseLayerMount(false);\n }\n }, [needRaiseLayerMount, onLayerMounted, onLayerDidMount]);\n useDebugWarnings(props);\n return (React.createElement(\"span\", { className: \"ms-layer\", ref: mergedRef }, layerRef.current &&\n ReactDOM.createPortal(React.createElement(FocusRectsProvider, { layerRoot: true, providerRef: fabricRef },\n React.createElement(Fabric, __assign({}, (!eventBubblingEnabled && getFilteredEvents()), fabricProps, { className: css(classNames.content, fabricProps === null || fabricProps === void 0 ? void 0 : fabricProps.className), ref: fabricRef }), children)), layerRef.current)));\n});\nLayerBase.displayName = 'LayerBase';\nvar filteredEventProps;\nvar onFilterEvent = function (ev) {\n // We should just be able to check ev.bubble here and only stop events that are bubbling up. However, even though\n // mouseenter and mouseleave do NOT bubble up, they are showing up as bubbling. Therefore we stop events based on\n // event name rather than ev.bubble.\n if (ev.eventPhase === Event.BUBBLING_PHASE &&\n ev.type !== 'mouseenter' &&\n ev.type !== 'mouseleave' &&\n ev.type !== 'touchstart' &&\n ev.type !== 'touchend') {\n ev.stopPropagation();\n }\n};\nfunction getFilteredEvents() {\n if (!filteredEventProps) {\n filteredEventProps = {};\n [\n 'onClick',\n 'onContextMenu',\n 'onDoubleClick',\n 'onDrag',\n 'onDragEnd',\n 'onDragEnter',\n 'onDragExit',\n 'onDragLeave',\n 'onDragOver',\n 'onDragStart',\n 'onDrop',\n 'onMouseDown',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOver',\n 'onMouseOut',\n 'onMouseUp',\n 'onTouchMove',\n 'onTouchStart',\n 'onTouchCancel',\n 'onTouchEnd',\n 'onKeyDown',\n 'onKeyPress',\n 'onKeyUp',\n 'onFocus',\n 'onBlur',\n 'onChange',\n 'onInput',\n 'onInvalid',\n 'onSubmit',\n ].forEach(function (name) { return (filteredEventProps[name] = onFilterEvent); });\n }\n return filteredEventProps;\n}\nfunction useDebugWarnings(props) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional\n useWarnings({\n name: 'Layer',\n props: props,\n deprecations: { onLayerMounted: 'onLayerDidMount' },\n });\n }\n}\n//# sourceMappingURL=Layer.base.js.map","import { ZIndexes, getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Layer',\n rootNoHost: 'ms-Layer--fixed',\n content: 'ms-Layer-content',\n};\nexport var getStyles = function (props) {\n var className = props.className, isNotHost = props.isNotHost, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n isNotHost && [\n classNames.rootNoHost,\n {\n position: 'fixed',\n zIndex: ZIndexes.Layer,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n visibility: 'hidden',\n },\n ],\n className,\n ],\n content: [\n classNames.content,\n {\n visibility: 'visible',\n },\n ],\n };\n};\n//# sourceMappingURL=Layer.styles.js.map","import { styled } from '../../Utilities';\nimport { LayerBase } from './Layer.base';\nimport { getStyles } from './Layer.styles';\nexport var Layer = styled(LayerBase, getStyles, undefined, {\n scope: 'Layer',\n fields: ['hostId', 'theme', 'styles'],\n});\n//# sourceMappingURL=Layer.js.map","import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { CalloutContent } from './CalloutContent';\nimport { Layer } from '../../Layer';\nexport var Callout = React.forwardRef(function (_a, forwardedRef) {\n var layerProps = _a.layerProps, doNotLayer = _a.doNotLayer, rest = __rest(_a, [\"layerProps\", \"doNotLayer\"]);\n var content = React.createElement(CalloutContent, __assign({}, rest, { doNotLayer: doNotLayer, ref: forwardedRef }));\n return doNotLayer ? content : React.createElement(Layer, __assign({}, layerProps), content);\n});\nCallout.displayName = 'Callout';\n//# sourceMappingURL=Callout.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { elementContains, getNativeProps, divProperties, getFirstTabbable, getLastTabbable, getNextElement, focusAsync, getPropsWithDefaults, modalize, on, } from '../../Utilities';\nimport { useId, useConst, useMergedRefs, useEventCallback, usePrevious, useUnmount } from '@fluentui/react-hooks';\nimport { useDocument } from '../../WindowProvider';\nvar COMPONENT_NAME = 'FocusTrapZone';\nvar DEFAULT_PROPS = {\n disabled: false,\n disableFirstFocus: false,\n forceFocusInsideTrap: true,\n isClickableOutsideFocusTrap: false,\n};\nvar useComponentRef = function (componentRef, previouslyFocusedElement, focusFTZ) {\n React.useImperativeHandle(componentRef, function () { return ({\n get previouslyFocusedElement() {\n return previouslyFocusedElement;\n },\n focus: focusFTZ,\n }); }, [focusFTZ, previouslyFocusedElement]);\n};\nexport var FocusTrapZone = React.forwardRef(function (propsWithoutDefaults, ref) {\n var _a;\n var root = React.useRef(null);\n var firstBumper = React.useRef(null);\n var lastBumper = React.useRef(null);\n var mergedRootRef = useMergedRefs(root, ref);\n var doc = useDocument();\n var isFirstRender = (_a = usePrevious(false)) !== null && _a !== void 0 ? _a : true;\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var internalState = useConst({\n hasFocus: false,\n focusStackId: useId('ftz-', props.id),\n });\n var children = props.children, componentRef = props.componentRef, disabled = props.disabled, disableFirstFocus = props.disableFirstFocus, forceFocusInsideTrap = props.forceFocusInsideTrap, focusPreviouslyFocusedInnerElement = props.focusPreviouslyFocusedInnerElement, \n // eslint-disable-next-line deprecation/deprecation\n firstFocusableSelector = props.firstFocusableSelector, firstFocusableTarget = props.firstFocusableTarget, \n // eslint-disable-next-line deprecation/deprecation\n _b = props.disableRestoreFocus, \n // eslint-disable-next-line deprecation/deprecation\n disableRestoreFocus = _b === void 0 ? props.ignoreExternalFocusing : _b, isClickableOutsideFocusTrap = props.isClickableOutsideFocusTrap, enableAriaHiddenSiblings = props.enableAriaHiddenSiblings;\n var bumperProps = {\n 'aria-hidden': true,\n style: {\n pointerEvents: 'none',\n position: 'fixed', // 'fixed' prevents browsers from scrolling to bumpers when viewport does not contain them\n },\n tabIndex: disabled ? -1 : 0,\n 'data-is-visible': true,\n 'data-is-focus-trap-zone-bumper': true,\n };\n var focusElementAsync = React.useCallback(function (element) {\n if (element !== firstBumper.current && element !== lastBumper.current) {\n focusAsync(element);\n }\n }, []);\n /**\n * Callback to force focus into FTZ (named to avoid overlap with global focus() callback).\n * useEventCallback always returns the same callback reference but updates the implementation\n * every render to avoid stale captured values.\n */\n var focusFTZ = useEventCallback(function () {\n if (!root.current) {\n return; // not done mounting\n }\n var previouslyFocusedElementInTrapZone = internalState.previouslyFocusedElementInTrapZone;\n if (focusPreviouslyFocusedInnerElement &&\n previouslyFocusedElementInTrapZone &&\n elementContains(root.current, previouslyFocusedElementInTrapZone)) {\n // focus on the last item that had focus in the zone before we left the zone\n focusElementAsync(previouslyFocusedElementInTrapZone);\n return;\n }\n var firstFocusableChild = null;\n if (typeof firstFocusableTarget === 'string') {\n firstFocusableChild = root.current.querySelector(firstFocusableTarget);\n }\n else if (firstFocusableTarget) {\n firstFocusableChild = firstFocusableTarget(root.current);\n }\n else if (firstFocusableSelector) {\n var focusSelector = typeof firstFocusableSelector === 'string' ? firstFocusableSelector : firstFocusableSelector();\n firstFocusableChild = root.current.querySelector('.' + focusSelector);\n }\n // Fall back to first element if query selector did not match any elements.\n if (!firstFocusableChild) {\n firstFocusableChild = getNextElement(root.current, root.current.firstChild, false, false, false, true);\n }\n if (firstFocusableChild) {\n focusElementAsync(firstFocusableChild);\n }\n });\n /** Used in root div focus/blur handlers */\n var focusBumper = function (isFirstBumper) {\n if (disabled || !root.current) {\n return;\n }\n var nextFocusable = isFirstBumper === internalState.hasFocus\n ? getLastTabbable(root.current, lastBumper.current, true, false)\n : getFirstTabbable(root.current, firstBumper.current, true, false);\n if (nextFocusable) {\n if (nextFocusable === firstBumper.current || nextFocusable === lastBumper.current) {\n // This can happen when FTZ contains no tabbable elements.\n // focusFTZ() will take care of finding a focusable element in FTZ.\n focusFTZ();\n }\n else {\n nextFocusable.focus();\n }\n }\n };\n /** Root div blur handler (doesn't need useCallback since it's for a native element) */\n var onRootBlurCapture = function (ev) {\n var _a;\n (_a = props.onBlurCapture) === null || _a === void 0 ? void 0 : _a.call(props, ev);\n var relatedTarget = ev.relatedTarget;\n if (ev.relatedTarget === null) {\n // In IE11, due to lack of support, event.relatedTarget is always\n // null making every onBlur call to be \"outside\" of the root\n // even when it's not. Using document.activeElement is another way\n // for us to be able to get what the relatedTarget without relying\n // on the event\n relatedTarget = doc.activeElement;\n }\n if (!elementContains(root.current, relatedTarget)) {\n internalState.hasFocus = false;\n }\n };\n /** Root div focus handler (doesn't need useCallback since it's for a native element) */\n var onRootFocusCapture = function (ev) {\n var _a;\n (_a = props.onFocusCapture) === null || _a === void 0 ? void 0 : _a.call(props, ev);\n if (ev.target === firstBumper.current) {\n focusBumper(true);\n }\n else if (ev.target === lastBumper.current) {\n focusBumper(false);\n }\n internalState.hasFocus = true;\n if (ev.target !== ev.currentTarget && !(ev.target === firstBumper.current || ev.target === lastBumper.current)) {\n // every time focus changes within the trap zone, remember the focused element so that\n // it can be restored if focus leaves the pane and returns via keystroke (i.e. via a call to this.focus(true))\n internalState.previouslyFocusedElementInTrapZone = ev.target;\n }\n };\n /** Called to restore focus on unmount or props change. (useEventCallback ensures latest prop values are used.) */\n var returnFocusToInitiator = useEventCallback(function (elementToFocusOnDismiss) {\n FocusTrapZone.focusStack = FocusTrapZone.focusStack.filter(function (value) { return internalState.focusStackId !== value; });\n if (!doc) {\n return;\n }\n var activeElement = doc.activeElement;\n if (!disableRestoreFocus &&\n typeof (elementToFocusOnDismiss === null || elementToFocusOnDismiss === void 0 ? void 0 : elementToFocusOnDismiss.focus) === 'function' &&\n // only restore focus if the current focused element is within the FTZ, or if nothing is focused\n (elementContains(root.current, activeElement) || activeElement === doc.body)) {\n focusElementAsync(elementToFocusOnDismiss);\n }\n });\n /** Called in window event handlers. (useEventCallback ensures latest prop values are used.) */\n var forceFocusOrClickInTrap = useEventCallback(function (ev) {\n // be sure to use the latest values here\n if (disabled) {\n return;\n }\n if (internalState.focusStackId === FocusTrapZone.focusStack.slice(-1)[0]) {\n var targetElement = ev.target;\n if (targetElement && !elementContains(root.current, targetElement)) {\n if (doc && doc.activeElement === doc.body) {\n setTimeout(function () {\n if (doc && doc.activeElement === doc.body) {\n focusFTZ();\n internalState.hasFocus = true; // set focus here since we stop event propagation\n }\n }, 0);\n }\n else {\n focusFTZ();\n internalState.hasFocus = true; // set focus here since we stop event propagation\n }\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n });\n // Update window event handlers when relevant props change\n React.useEffect(function () {\n var disposables = [];\n if (forceFocusInsideTrap) {\n disposables.push(on(window, 'focus', forceFocusOrClickInTrap, true));\n }\n if (!isClickableOutsideFocusTrap) {\n disposables.push(on(window, 'click', forceFocusOrClickInTrap, true));\n }\n return function () {\n disposables.forEach(function (dispose) { return dispose(); });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run when these two props change\n }, [forceFocusInsideTrap, isClickableOutsideFocusTrap]);\n // On prop change or first render, focus the FTZ and update focusStack if appropriate\n React.useEffect(function () {\n // Do nothing if disabled, or if it's a re-render and forceFocusInsideTrap is false\n // (to match existing behavior, the FTZ handles first focus even if forceFocusInsideTrap\n // is false, though it's debatable whether it should do this)\n if (disabled || (!isFirstRender && !forceFocusInsideTrap) || !root.current) {\n return;\n }\n // Transition from forceFocusInsideTrap / FTZ disabled to enabled (or initial mount)\n FocusTrapZone.focusStack.push(internalState.focusStackId);\n var elementToFocusOnDismiss = props.elementToFocusOnDismiss || doc.activeElement;\n if (!disableFirstFocus && !elementContains(root.current, elementToFocusOnDismiss)) {\n focusFTZ();\n }\n // To match existing behavior, always return focus on cleanup (even if we didn't handle\n // initial focus), but it's debatable whether that's correct\n return function () { return returnFocusToInitiator(elementToFocusOnDismiss); };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run when these two props change\n }, [forceFocusInsideTrap, disabled]);\n // Handle modalization separately from first focus\n React.useEffect(function () {\n if (!disabled && enableAriaHiddenSiblings) {\n var unmodalize = modalize(root.current);\n return unmodalize;\n }\n }, [disabled, enableAriaHiddenSiblings, root]);\n // Cleanup lifecyle method for internalState.\n useUnmount(function () {\n // Dispose of element references so the DOM Nodes can be garbage-collected\n delete internalState.previouslyFocusedElementInTrapZone;\n });\n useComponentRef(componentRef, internalState.previouslyFocusedElementInTrapZone, focusFTZ);\n return (React.createElement(\"div\", __assign({ \"aria-labelledby\": props.ariaLabelledBy }, getNativeProps(props, divProperties), { ref: mergedRootRef, onFocusCapture: onRootFocusCapture, onBlurCapture: onRootBlurCapture }),\n React.createElement(\"div\", __assign({}, bumperProps, { ref: firstBumper })),\n children,\n React.createElement(\"div\", __assign({}, bumperProps, { ref: lastBumper }))));\n});\nFocusTrapZone.displayName = COMPONENT_NAME;\nFocusTrapZone.focusStack = [];\n//# sourceMappingURL=FocusTrapZone.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, divProperties, getNativeProps } from '../../Utilities';\nimport { Callout } from '../../Callout';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nvar getClassNames = classNamesFunction();\nvar TooltipBase = /** @class */ (function (_super) {\n __extends(TooltipBase, _super);\n function TooltipBase() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._onRenderContent = function (props) {\n if (typeof props.content === 'string') {\n return React.createElement(\"p\", { className: _this._classNames.subText }, props.content);\n }\n else {\n return React.createElement(\"div\", { className: _this._classNames.subText }, props.content);\n }\n };\n return _this;\n }\n TooltipBase.prototype.render = function () {\n var _a = this.props, className = _a.className, calloutProps = _a.calloutProps, directionalHint = _a.directionalHint, directionalHintForRTL = _a.directionalHintForRTL, styles = _a.styles, id = _a.id, maxWidth = _a.maxWidth, _b = _a.onRenderContent, onRenderContent = _b === void 0 ? this._onRenderContent : _b, targetElement = _a.targetElement, theme = _a.theme;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className || (calloutProps && calloutProps.className),\n beakWidth: calloutProps && calloutProps.isBeakVisible ? calloutProps.beakWidth : 0,\n gapSpace: calloutProps && calloutProps.gapSpace,\n maxWidth: maxWidth,\n });\n return (React.createElement(Callout, __assign({ target: targetElement, directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL }, calloutProps, getNativeProps(this.props, divProperties, ['id']), { className: this._classNames.root }),\n React.createElement(\"div\", { className: this._classNames.content, id: id, onFocus: this.props.onFocus, onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave }, onRenderContent(this.props, this._onRenderContent))));\n };\n // Specify default props values\n TooltipBase.defaultProps = {\n directionalHint: DirectionalHint.topCenter,\n maxWidth: '364px',\n calloutProps: {\n isBeakVisible: true,\n beakWidth: 16,\n gapSpace: 0,\n setInitialFocus: true,\n doNotLayer: false,\n },\n };\n return TooltipBase;\n}(React.Component));\nexport { TooltipBase };\n//# sourceMappingURL=Tooltip.base.js.map","import { AnimationClassNames } from '../../Styling';\nexport var getStyles = function (props) {\n var className = props.className, _a = props.beakWidth, beakWidth = _a === void 0 ? 16 : _a, _b = props.gapSpace, gapSpace = _b === void 0 ? 0 : _b, maxWidth = props.maxWidth, theme = props.theme;\n var semanticColors = theme.semanticColors, fonts = theme.fonts, effects = theme.effects;\n // The math here is done to account for the 45 degree rotation of the beak\n // and sub-pixel rounding that differs across browsers, which is more noticeable when\n // the device pixel ratio is larger\n var tooltipGapSpace = -(Math.sqrt((beakWidth * beakWidth) / 2) + gapSpace) + 1 / window.devicePixelRatio;\n return {\n root: [\n 'ms-Tooltip',\n theme.fonts.medium,\n AnimationClassNames.fadeIn200,\n {\n background: semanticColors.menuBackground,\n boxShadow: effects.elevation8,\n padding: '8px',\n maxWidth: maxWidth,\n selectors: {\n ':after': {\n content: \"''\",\n position: 'absolute',\n bottom: tooltipGapSpace,\n left: tooltipGapSpace,\n right: tooltipGapSpace,\n top: tooltipGapSpace,\n zIndex: 0,\n },\n },\n },\n className,\n ],\n content: [\n 'ms-Tooltip-content',\n fonts.small,\n {\n position: 'relative',\n zIndex: 1,\n color: semanticColors.menuItemText,\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n overflow: 'hidden',\n },\n ],\n subText: [\n 'ms-Tooltip-subtext',\n {\n // Using inherit here to avoid unintentional global overrides of the

tag.\n fontSize: 'inherit',\n fontWeight: 'inherit',\n color: 'inherit',\n margin: 0,\n },\n ],\n };\n};\n//# sourceMappingURL=Tooltip.styles.js.map","import { styled } from '../../Utilities';\nimport { TooltipBase } from './Tooltip.base';\nimport { getStyles } from './Tooltip.styles';\nexport var Tooltip = styled(TooltipBase, getStyles, undefined, {\n scope: 'Tooltip',\n});\n//# sourceMappingURL=Tooltip.js.map","/**\n * {@docCategory Tooltip}\n */\nexport var TooltipDelay;\n(function (TooltipDelay) {\n TooltipDelay[TooltipDelay[\"zero\"] = 0] = \"zero\";\n /** 300 ms delay before showing the tooltip */\n TooltipDelay[TooltipDelay[\"medium\"] = 1] = \"medium\";\n /** 500 ms delay before showing the tooltip */\n TooltipDelay[TooltipDelay[\"long\"] = 2] = \"long\";\n})(TooltipDelay || (TooltipDelay = {}));\n//# sourceMappingURL=Tooltip.types.js.map","/**\n * {@docCategory Tooltip}\n */\nexport var TooltipOverflowMode;\n(function (TooltipOverflowMode) {\n /** Only show tooltip if parent DOM element is overflowing */\n TooltipOverflowMode[TooltipOverflowMode[\"Parent\"] = 0] = \"Parent\";\n /**\n * Only show tooltip if tooltip host's content is overflowing.\n * Note that this does not check the children for overflow, only the TooltipHost root.\n */\n TooltipOverflowMode[TooltipOverflowMode[\"Self\"] = 1] = \"Self\";\n})(TooltipOverflowMode || (TooltipOverflowMode = {}));\n//# sourceMappingURL=TooltipHost.types.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { hiddenContentStyle } from '../../Styling';\nimport { initializeComponentRef, Async, divProperties, getNativeProps, getId, assign, hasOverflow, portalContainsElement, classNamesFunction, KeyCodes, } from '../../Utilities';\nimport { TooltipOverflowMode } from './TooltipHost.types';\nimport { Tooltip } from './Tooltip';\nimport { TooltipDelay } from './Tooltip.types';\nvar getClassNames = classNamesFunction();\nvar TooltipHostBase = /** @class */ (function (_super) {\n __extends(TooltipHostBase, _super);\n // Constructor\n function TooltipHostBase(props) {\n var _this = _super.call(this, props) || this;\n // The wrapping div that gets the hover events\n _this._tooltipHost = React.createRef();\n _this._defaultTooltipId = getId('tooltip');\n _this.show = function () {\n _this._toggleTooltip(true);\n };\n _this.dismiss = function () {\n _this._hideTooltip();\n };\n _this._getTargetElement = function () {\n if (!_this._tooltipHost.current) {\n return undefined;\n }\n var overflowMode = _this.props.overflowMode;\n // Select target element based on overflow mode. For parent mode, you want to position the tooltip relative\n // to the parent element, otherwise it might look off.\n if (overflowMode !== undefined) {\n switch (overflowMode) {\n case TooltipOverflowMode.Parent:\n return _this._tooltipHost.current.parentElement;\n case TooltipOverflowMode.Self:\n return _this._tooltipHost.current;\n }\n }\n return _this._tooltipHost.current;\n };\n _this._onTooltipFocus = function (ev) {\n if (_this._ignoreNextFocusEvent) {\n _this._ignoreNextFocusEvent = false;\n return;\n }\n _this._onTooltipMouseEnter(ev);\n };\n _this._onTooltipContentFocus = function (ev) {\n if (TooltipHostBase._currentVisibleTooltip && TooltipHostBase._currentVisibleTooltip !== _this) {\n TooltipHostBase._currentVisibleTooltip.dismiss();\n }\n TooltipHostBase._currentVisibleTooltip = _this;\n _this._clearDismissTimer();\n _this._clearOpenTimer();\n };\n _this._onTooltipBlur = function (ev) {\n // The focused element gets a blur event when the document loses focus\n // (e.g. switching tabs in the browser), but we don't want to show the\n // tooltip again when the document gets focus back. Handle this case by\n // checking if the blurred element is still the document's activeElement,\n // and ignoring when it next gets focus back.\n // See https://github.com/microsoft/fluentui/issues/13541\n _this._ignoreNextFocusEvent = (document === null || document === void 0 ? void 0 : document.activeElement) === ev.target;\n _this._dismissTimerId = _this._async.setTimeout(function () {\n _this._hideTooltip();\n }, 0);\n };\n // Show Tooltip\n _this._onTooltipMouseEnter = function (ev) {\n var _a = _this.props, overflowMode = _a.overflowMode, delay = _a.delay;\n if (TooltipHostBase._currentVisibleTooltip && TooltipHostBase._currentVisibleTooltip !== _this) {\n TooltipHostBase._currentVisibleTooltip.dismiss();\n }\n TooltipHostBase._currentVisibleTooltip = _this;\n if (overflowMode !== undefined) {\n var overflowElement = _this._getTargetElement();\n if (overflowElement && !hasOverflow(overflowElement)) {\n return;\n }\n }\n if (ev.target && portalContainsElement(ev.target, _this._getTargetElement())) {\n // Do not show tooltip when target is inside a portal relative to TooltipHost.\n return;\n }\n _this._clearDismissTimer();\n _this._clearOpenTimer();\n if (delay !== TooltipDelay.zero) {\n var delayTime = _this._getDelayTime(delay); // non-null assertion because we set it in `defaultProps`\n _this._openTimerId = _this._async.setTimeout(function () {\n _this._toggleTooltip(true);\n }, delayTime);\n }\n else {\n _this._toggleTooltip(true);\n }\n };\n // Hide Tooltip\n _this._onTooltipMouseLeave = function (ev) {\n var closeDelay = _this.props.closeDelay;\n _this._clearDismissTimer();\n _this._clearOpenTimer();\n if (closeDelay) {\n _this._dismissTimerId = _this._async.setTimeout(function () {\n _this._toggleTooltip(false);\n }, closeDelay);\n }\n else {\n _this._toggleTooltip(false);\n }\n if (TooltipHostBase._currentVisibleTooltip === _this) {\n TooltipHostBase._currentVisibleTooltip = undefined;\n }\n };\n _this._onTooltipKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if ((ev.which === KeyCodes.escape || ev.ctrlKey) && _this.state.isTooltipVisible) {\n _this._hideTooltip();\n ev.stopPropagation();\n }\n };\n _this._clearDismissTimer = function () {\n _this._async.clearTimeout(_this._dismissTimerId);\n };\n _this._clearOpenTimer = function () {\n _this._async.clearTimeout(_this._openTimerId);\n };\n // Hide Tooltip\n _this._hideTooltip = function () {\n _this._clearOpenTimer();\n _this._clearDismissTimer();\n _this._toggleTooltip(false);\n };\n _this._toggleTooltip = function (isTooltipVisible) {\n if (_this.state.isTooltipVisible !== isTooltipVisible) {\n _this.setState({ isTooltipVisible: isTooltipVisible }, function () { return _this.props.onTooltipToggle && _this.props.onTooltipToggle(isTooltipVisible); });\n }\n };\n _this._getDelayTime = function (delay) {\n switch (delay) {\n case TooltipDelay.medium:\n return 300;\n case TooltipDelay.long:\n return 500;\n default:\n return 0;\n }\n };\n initializeComponentRef(_this);\n _this.state = {\n isAriaPlaceholderRendered: false,\n isTooltipVisible: false,\n };\n _this._async = new Async(_this);\n return _this;\n }\n // Render\n TooltipHostBase.prototype.render = function () {\n var _a = this.props, calloutProps = _a.calloutProps, children = _a.children, content = _a.content, directionalHint = _a.directionalHint, directionalHintForRTL = _a.directionalHintForRTL, className = _a.hostClassName, id = _a.id, \n // eslint-disable-next-line deprecation/deprecation\n _b = _a.setAriaDescribedBy, \n // eslint-disable-next-line deprecation/deprecation\n setAriaDescribedBy = _b === void 0 ? true : _b, tooltipProps = _a.tooltipProps, styles = _a.styles, theme = _a.theme;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n var isTooltipVisible = this.state.isTooltipVisible;\n var tooltipId = id || this._defaultTooltipId;\n var tooltipRenderProps = __assign(__assign({ id: \"\".concat(tooltipId, \"--tooltip\"), content: content, targetElement: this._getTargetElement(), directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL, calloutProps: assign({}, calloutProps, {\n onDismiss: this._hideTooltip,\n onFocus: this._onTooltipContentFocus,\n onMouseEnter: this._onTooltipMouseEnter,\n onMouseLeave: this._onTooltipMouseLeave,\n }), onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }, getNativeProps(this.props, divProperties, ['id'])), tooltipProps);\n // Get the content of the tooltip for use in the hidden div used for screen readers\n var tooltipContent = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.onRenderContent)\n ? tooltipProps.onRenderContent(tooltipRenderProps, function (props) { return ((props === null || props === void 0 ? void 0 : props.content) ? React.createElement(React.Fragment, null, props.content) : null); })\n : content;\n var showTooltip = isTooltipVisible && !!tooltipContent;\n var ariaDescribedBy = setAriaDescribedBy && isTooltipVisible && !!tooltipContent ? tooltipId : undefined;\n return (React.createElement(\"div\", __assign({ className: this._classNames.root, ref: this._tooltipHost }, { onFocusCapture: this._onTooltipFocus }, { onBlurCapture: this._onTooltipBlur }, { onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave, onKeyDown: this._onTooltipKeyDown, role: \"none\", \"aria-describedby\": ariaDescribedBy }),\n children,\n showTooltip && React.createElement(Tooltip, __assign({}, tooltipRenderProps)),\n React.createElement(\"div\", { hidden: true, id: tooltipId, style: hiddenContentStyle }, tooltipContent)));\n };\n TooltipHostBase.prototype.componentWillUnmount = function () {\n if (TooltipHostBase._currentVisibleTooltip && TooltipHostBase._currentVisibleTooltip === this) {\n TooltipHostBase._currentVisibleTooltip = undefined;\n }\n this._async.dispose();\n };\n TooltipHostBase.defaultProps = {\n delay: TooltipDelay.medium,\n };\n return TooltipHostBase;\n}(React.Component));\nexport { TooltipHostBase };\n//# sourceMappingURL=TooltipHost.base.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-TooltipHost',\n ariaPlaceholder: 'ms-TooltipHost-aria-placeholder',\n};\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n {\n display: 'inline',\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=TooltipHost.styles.js.map","import { styled } from '../../Utilities';\nimport { TooltipHostBase } from './TooltipHost.base';\nimport { getStyles } from './TooltipHost.styles';\nexport var TooltipHost = styled(TooltipHostBase, getStyles, undefined, {\n scope: 'TooltipHost',\n});\n//# sourceMappingURL=TooltipHost.js.map","/**\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n * {@docCategory Icon}\n */\nexport var IconType;\n(function (IconType) {\n /**\n * Render using the fabric icon font.\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n */\n IconType[IconType[\"default\"] = 0] = \"default\";\n /**\n * Render using an image, where imageProps would be used.\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n */\n IconType[IconType[\"image\"] = 1] = \"image\";\n /**\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n */\n IconType[IconType[\"Default\"] = 100000] = \"Default\";\n /**\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n */\n IconType[IconType[\"Image\"] = 100001] = \"Image\";\n})(IconType || (IconType = {}));\n//# sourceMappingURL=Icon.types.js.map","/**\n * The possible methods that can be used to fit the image.\n * {@docCategory Image}\n */\nexport var ImageFit;\n(function (ImageFit) {\n /**\n * The image is not scaled. The image is centered and cropped within the content box.\n */\n ImageFit[ImageFit[\"center\"] = 0] = \"center\";\n /**\n * The image is scaled to maintain its aspect ratio while being fully contained within the frame. The image will\n * be centered horizontally and vertically within the frame. The space in the top and bottom or in the sides of\n * the frame will be empty depending on the difference in aspect ratio between the image and the frame.\n */\n ImageFit[ImageFit[\"contain\"] = 1] = \"contain\";\n /**\n * The image is scaled to maintain its aspect ratio while filling the frame. Portions of the image will be cropped\n * from the top and bottom, or the sides, depending on the difference in aspect ratio between the image and the frame.\n */\n ImageFit[ImageFit[\"cover\"] = 2] = \"cover\";\n /**\n * Neither the image nor the frame are scaled. If their sizes do not match, the image will either be cropped or the\n * frame will have empty space.\n */\n ImageFit[ImageFit[\"none\"] = 3] = \"none\";\n /**\n * The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. It will\n * behave as ImageFit.center if the image's natural height or width is less than the Image frame's height or width,\n * but if both natural height and width are larger than the frame it will behave as ImageFit.cover.\n */\n ImageFit[ImageFit[\"centerCover\"] = 4] = \"centerCover\";\n /**\n * The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. It will\n * behave as ImageFit.center if the image's natural height and width is less than the Image frame's height and width,\n * but if either natural height or width are larger than the frame it will behave as ImageFit.contain.\n */\n ImageFit[ImageFit[\"centerContain\"] = 5] = \"centerContain\";\n})(ImageFit || (ImageFit = {}));\n/**\n * The cover style to be used on the image\n * {@docCategory Image}\n */\nexport var ImageCoverStyle;\n(function (ImageCoverStyle) {\n /**\n * The image will be shown at 100% height of container and the width will be scaled accordingly\n */\n ImageCoverStyle[ImageCoverStyle[\"landscape\"] = 0] = \"landscape\";\n /**\n * The image will be shown at 100% width of container and the height will be scaled accordingly\n */\n ImageCoverStyle[ImageCoverStyle[\"portrait\"] = 1] = \"portrait\";\n})(ImageCoverStyle || (ImageCoverStyle = {}));\n/**\n * {@docCategory Image}\n */\nexport var ImageLoadState;\n(function (ImageLoadState) {\n /**\n * The image has not yet been loaded, and there is no error yet.\n */\n ImageLoadState[ImageLoadState[\"notLoaded\"] = 0] = \"notLoaded\";\n /**\n * The image has been loaded successfully.\n */\n ImageLoadState[ImageLoadState[\"loaded\"] = 1] = \"loaded\";\n /**\n * An error has been encountered while loading the image.\n */\n ImageLoadState[ImageLoadState[\"error\"] = 2] = \"error\";\n /**\n * @deprecated Not used. Use `onLoadingStateChange` and re-render the Image with a different src.\n */\n ImageLoadState[ImageLoadState[\"errorLoaded\"] = 3] = \"errorLoaded\";\n})(ImageLoadState || (ImageLoadState = {}));\n//# sourceMappingURL=Image.types.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, getNativeProps, imgProperties } from '../../Utilities';\nimport { ImageCoverStyle, ImageFit, ImageLoadState } from './Image.types';\nimport { useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\nvar SVG_REGEX = /\\.svg$/i;\nvar KEY_PREFIX = 'fabricImage';\nfunction useLoadState(props, imageElement) {\n var onLoadingStateChange = props.onLoadingStateChange, onLoad = props.onLoad, onError = props.onError, src = props.src;\n var _a = React.useState(ImageLoadState.notLoaded), loadState = _a[0], setLoadState = _a[1];\n useIsomorphicLayoutEffect(function () {\n // If the src property changes, reset the load state\n // (does nothing if the load state is already notLoaded)\n setLoadState(ImageLoadState.notLoaded);\n }, [src]);\n // eslint-disable-next-line react-hooks/exhaustive-deps -- intended to run every render\n React.useEffect(function () {\n if (loadState === ImageLoadState.notLoaded) {\n // testing if naturalWidth and naturalHeight are greater than zero is better than checking\n // .complete, because .complete will also be set to true if the image breaks. However,\n // for some browsers, SVG images do not have a naturalWidth or naturalHeight, so fall back\n // to checking .complete for these images.\n var isLoaded = imageElement.current\n ? (src && imageElement.current.naturalWidth > 0 && imageElement.current.naturalHeight > 0) ||\n (imageElement.current.complete && SVG_REGEX.test(src))\n : false;\n if (isLoaded) {\n setLoadState(ImageLoadState.loaded);\n }\n }\n });\n React.useEffect(function () {\n onLoadingStateChange === null || onLoadingStateChange === void 0 ? void 0 : onLoadingStateChange(loadState);\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run when loadState changes\n }, [loadState]);\n var onImageLoaded = React.useCallback(function (ev) {\n onLoad === null || onLoad === void 0 ? void 0 : onLoad(ev);\n if (src) {\n setLoadState(ImageLoadState.loaded);\n }\n }, [src, onLoad]);\n var onImageError = React.useCallback(function (ev) {\n onError === null || onError === void 0 ? void 0 : onError(ev);\n setLoadState(ImageLoadState.error);\n }, [onError]);\n return [loadState, onImageLoaded, onImageError];\n}\nexport var ImageBase = React.forwardRef(function (props, forwardedRef) {\n var frameElement = React.useRef();\n var imageElement = React.useRef();\n var _a = useLoadState(props, imageElement), loadState = _a[0], onImageLoaded = _a[1], onImageError = _a[2];\n var imageProps = getNativeProps(props, imgProperties, [\n 'width',\n 'height',\n ]);\n var src = props.src, alt = props.alt, width = props.width, height = props.height, _b = props.shouldFadeIn, shouldFadeIn = _b === void 0 ? true : _b, shouldStartVisible = props.shouldStartVisible, className = props.className, imageFit = props.imageFit, role = props.role, maximizeFrame = props.maximizeFrame, styles = props.styles, theme = props.theme, loading = props.loading;\n var coverStyle = useCoverStyle(props, loadState, imageElement, frameElement);\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n width: width,\n height: height,\n maximizeFrame: maximizeFrame,\n shouldFadeIn: shouldFadeIn,\n shouldStartVisible: shouldStartVisible,\n isLoaded: loadState === ImageLoadState.loaded || (loadState === ImageLoadState.notLoaded && props.shouldStartVisible),\n isLandscape: coverStyle === ImageCoverStyle.landscape,\n isCenter: imageFit === ImageFit.center,\n isCenterContain: imageFit === ImageFit.centerContain,\n isCenterCover: imageFit === ImageFit.centerCover,\n isContain: imageFit === ImageFit.contain,\n isCover: imageFit === ImageFit.cover,\n isNone: imageFit === ImageFit.none,\n isError: loadState === ImageLoadState.error,\n isNotImageFit: imageFit === undefined,\n });\n // If image dimensions aren't specified, the natural size of the image is used.\n return (React.createElement(\"div\", { className: classNames.root, style: { width: width, height: height }, ref: frameElement },\n React.createElement(\"img\", __assign({}, imageProps, { onLoad: onImageLoaded, onError: onImageError, key: KEY_PREFIX + props.src || '', className: classNames.image, ref: useMergedRefs(imageElement, forwardedRef), src: src, alt: alt, role: role, loading: loading }))));\n});\nImageBase.displayName = 'ImageBase';\nfunction useCoverStyle(props, loadState, imageElement, frameElement) {\n var previousLoadState = React.useRef(loadState);\n var coverStyle = React.useRef();\n if (coverStyle === undefined ||\n (previousLoadState.current === ImageLoadState.notLoaded && loadState === ImageLoadState.loaded)) {\n coverStyle.current = computeCoverStyle(props, loadState, imageElement, frameElement);\n }\n previousLoadState.current = loadState;\n return coverStyle.current;\n}\nfunction computeCoverStyle(props, loadState, imageElement, frameElement) {\n var imageFit = props.imageFit, width = props.width, height = props.height;\n // Do not compute cover style if it was already specified in props\n if (props.coverStyle !== undefined) {\n return props.coverStyle;\n }\n else if (loadState === ImageLoadState.loaded &&\n (imageFit === ImageFit.cover ||\n imageFit === ImageFit.contain ||\n imageFit === ImageFit.centerContain ||\n imageFit === ImageFit.centerCover) &&\n imageElement.current &&\n frameElement.current) {\n // Determine the desired ratio using the width and height props.\n // If those props aren't available, measure measure the frame.\n var desiredRatio = void 0;\n if (typeof width === 'number' &&\n typeof height === 'number' &&\n imageFit !== ImageFit.centerContain &&\n imageFit !== ImageFit.centerCover) {\n desiredRatio = width / height;\n }\n else {\n desiredRatio = frameElement.current.clientWidth / frameElement.current.clientHeight;\n }\n // Examine the source image to determine its original ratio.\n var naturalRatio = imageElement.current.naturalWidth / imageElement.current.naturalHeight;\n // Should we crop from the top or the sides?\n if (naturalRatio > desiredRatio) {\n return ImageCoverStyle.landscape;\n }\n }\n return ImageCoverStyle.portrait;\n}\n//# sourceMappingURL=Image.base.js.map","import { AnimationClassNames, getGlobalClassNames } from '../../Styling';\nimport { getWindow } from '../../Utilities';\nvar GlobalClassNames = {\n root: 'ms-Image',\n rootMaximizeFrame: 'ms-Image--maximizeFrame',\n image: 'ms-Image-image',\n imageCenter: 'ms-Image-image--center',\n imageContain: 'ms-Image-image--contain',\n imageCover: 'ms-Image-image--cover',\n imageCenterContain: 'ms-Image-image--centerContain',\n imageCenterCover: 'ms-Image-image--centerCover',\n imageNone: 'ms-Image-image--none',\n imageLandscape: 'ms-Image-image--landscape',\n imagePortrait: 'ms-Image-image--portrait',\n};\nexport var getStyles = function (props) {\n var className = props.className, width = props.width, height = props.height, maximizeFrame = props.maximizeFrame, isLoaded = props.isLoaded, shouldFadeIn = props.shouldFadeIn, shouldStartVisible = props.shouldStartVisible, isLandscape = props.isLandscape, isCenter = props.isCenter, isContain = props.isContain, isCover = props.isCover, isCenterContain = props.isCenterContain, isCenterCover = props.isCenterCover, isNone = props.isNone, isError = props.isError, isNotImageFit = props.isNotImageFit, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var ImageFitStyles = {\n position: 'absolute',\n left: '50% /* @noflip */',\n top: '50%',\n transform: 'translate(-50%,-50%)', // @todo test RTL renders transform: translate(50%,-50%);\n };\n // Cut the mustard using msMaxTouchPoints to detect IE11 which does not support CSS object-fit\n var window = getWindow();\n var supportsObjectFit = window !== undefined &&\n // eslint-disable-next-line @fluentui/max-len\n // cast needed as vendor prefixed `msMaxTouchPoints` api is no longer part of TS lib declaration - introduced with TS 4.4\n window.navigator.msMaxTouchPoints === undefined;\n var fallbackObjectFitStyles = (isContain && isLandscape) || (isCover && !isLandscape)\n ? { width: '100%', height: 'auto' }\n : { width: 'auto', height: '100%' };\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n overflow: 'hidden',\n },\n maximizeFrame && [\n classNames.rootMaximizeFrame,\n {\n height: '100%',\n width: '100%',\n },\n ],\n isLoaded && shouldFadeIn && !shouldStartVisible && AnimationClassNames.fadeIn400,\n (isCenter || isContain || isCover || isCenterContain || isCenterCover) && {\n position: 'relative',\n },\n className,\n ],\n image: [\n classNames.image,\n {\n display: 'block',\n opacity: 0,\n },\n isLoaded && [\n 'is-loaded',\n {\n opacity: 1,\n },\n ],\n isCenter && [classNames.imageCenter, ImageFitStyles],\n isContain && [\n classNames.imageContain,\n supportsObjectFit && {\n width: '100%',\n height: '100%',\n objectFit: 'contain',\n },\n !supportsObjectFit && fallbackObjectFitStyles,\n !supportsObjectFit && ImageFitStyles,\n ],\n isCover && [\n classNames.imageCover,\n supportsObjectFit && {\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n },\n !supportsObjectFit && fallbackObjectFitStyles,\n !supportsObjectFit && ImageFitStyles,\n ],\n isCenterContain && [\n classNames.imageCenterContain,\n isLandscape && {\n maxWidth: '100%',\n },\n !isLandscape && {\n maxHeight: '100%',\n },\n ImageFitStyles,\n ],\n isCenterCover && [\n classNames.imageCenterCover,\n isLandscape && {\n maxHeight: '100%',\n },\n !isLandscape && {\n maxWidth: '100%',\n },\n ImageFitStyles,\n ],\n isNone && [\n classNames.imageNone,\n {\n width: 'auto',\n height: 'auto',\n },\n ],\n isNotImageFit && [\n !!width &&\n !height && {\n height: 'auto',\n width: '100%',\n },\n !width &&\n !!height && {\n height: '100%',\n width: 'auto',\n },\n !!width &&\n !!height && {\n height: '100%',\n width: '100%',\n },\n ],\n isLandscape && classNames.imageLandscape,\n !isLandscape && classNames.imagePortrait,\n !isLoaded && 'is-notLoaded',\n shouldFadeIn && 'is-fadeIn',\n isError && 'is-error',\n ],\n };\n};\n//# sourceMappingURL=Image.styles.js.map","import { styled } from '../../Utilities';\nimport { ImageBase } from './Image.base';\nimport { getStyles } from './Image.styles';\nexport var Image = styled(ImageBase, getStyles, undefined, {\n scope: 'Image',\n}, true);\nImage.displayName = 'Image';\n//# sourceMappingURL=Image.js.map","import { mergeStyleSets } from '../../Styling';\n/** Class names used in themeable and non-themeable Icon components */\nexport var classNames = mergeStyleSets({\n root: {\n display: 'inline-block',\n },\n placeholder: [\n 'ms-Icon-placeHolder',\n {\n width: '1em',\n },\n ],\n image: [\n 'ms-Icon-imageContainer',\n {\n overflow: 'hidden',\n },\n ],\n});\n/** Class name used only in non-themeable Icon components */\nexport var MS_ICON = 'ms-Icon';\nexport var getStyles = function (props) {\n var className = props.className, iconClassName = props.iconClassName, isPlaceholder = props.isPlaceholder, isImage = props.isImage, styles = props.styles;\n return {\n root: [\n isPlaceholder && classNames.placeholder,\n classNames.root,\n isImage && classNames.image,\n iconClassName,\n className,\n styles && styles.root,\n // eslint-disable-next-line deprecation/deprecation\n styles && styles.imageContainer,\n ],\n };\n};\n//# sourceMappingURL=Icon.styles.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { classNames, MS_ICON } from './Icon.styles';\nimport { css, getNativeProps, htmlElementProperties, memoizeFunction } from '../../Utilities';\nimport { getIcon } from '../../Styling';\nexport var getIconContent = memoizeFunction(function (iconName) {\n var _a = getIcon(iconName) || {\n subset: {},\n code: undefined,\n }, code = _a.code, subset = _a.subset;\n if (!code) {\n return null;\n }\n return {\n children: code,\n iconClassName: subset.className,\n fontFamily: subset.fontFace && subset.fontFace.fontFamily,\n mergeImageProps: subset.mergeImageProps,\n };\n}, undefined, true /*ignoreNullOrUndefinedResult */);\n/**\n * Fast icon component which only supports font glyphs (not images) and can't be targeted by customizations.\n * To style the icon, use `className` or reference `ms-Icon` in CSS.\n * {@docCategory Icon}\n */\nexport var FontIcon = function (props) {\n var iconName = props.iconName, className = props.className, _a = props.style, style = _a === void 0 ? {} : _a;\n var iconContent = getIconContent(iconName) || {};\n var iconClassName = iconContent.iconClassName, children = iconContent.children, fontFamily = iconContent.fontFamily, mergeImageProps = iconContent.mergeImageProps;\n var nativeProps = getNativeProps(props, htmlElementProperties);\n var accessibleName = props['aria-label'] || props.title;\n var containerProps = props['aria-label'] || props['aria-labelledby'] || props.title\n ? {\n role: mergeImageProps ? undefined : 'img',\n }\n : {\n 'aria-hidden': true,\n };\n var finalChildren = children;\n if (mergeImageProps) {\n if (typeof children === 'object' && typeof children.props === 'object' && accessibleName) {\n finalChildren = React.cloneElement(children, { alt: accessibleName });\n }\n }\n return (React.createElement(\"i\", __assign({ \"data-icon-name\": iconName }, containerProps, nativeProps, (mergeImageProps\n ? {\n title: undefined,\n 'aria-label': undefined,\n }\n : {}), { className: css(MS_ICON, classNames.root, iconClassName, !iconName && classNames.placeholder, className), \n // Apply the font family this way to ensure it doesn't get overridden by Fabric Core ms-Icon styles\n // https://github.com/microsoft/fluentui/issues/10449\n style: __assign({ fontFamily: fontFamily }, style) }), finalChildren));\n};\n/**\n * Memoized helper for rendering a FontIcon.\n * @param iconName - The name of the icon to use from the icon font.\n * @param className - Class name for styling the icon.\n * @param ariaLabel - Label for the icon for the benefit of screen readers.\n * {@docCategory Icon}\n */\nexport var getFontIcon = memoizeFunction(function (iconName, className, ariaLabel) {\n return FontIcon({ iconName: iconName, className: className, 'aria-label': ariaLabel });\n});\n//# sourceMappingURL=FontIcon.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { IconType } from './Icon.types';\nimport { Image } from '../Image/Image';\nimport { ImageLoadState } from '../Image/Image.types';\nimport { getNativeProps, htmlElementProperties, classNamesFunction } from '../../Utilities';\nimport { getIconContent } from './FontIcon';\nvar getClassNames = classNamesFunction({\n // Icon is used a lot by other components.\n // It's likely to see expected cases which pass different className to the Icon.\n // Therefore setting a larger cache size.\n cacheSize: 100,\n});\nvar IconBase = /** @class */ (function (_super) {\n __extends(IconBase, _super);\n function IconBase(props) {\n var _this = _super.call(this, props) || this;\n _this._onImageLoadingStateChange = function (state) {\n if (_this.props.imageProps && _this.props.imageProps.onLoadingStateChange) {\n _this.props.imageProps.onLoadingStateChange(state);\n }\n if (state === ImageLoadState.error) {\n _this.setState({ imageLoadError: true });\n }\n };\n _this.state = {\n imageLoadError: false,\n };\n return _this;\n }\n IconBase.prototype.render = function () {\n var _a = this.props, children = _a.children, className = _a.className, styles = _a.styles, iconName = _a.iconName, imageErrorAs = _a.imageErrorAs, theme = _a.theme;\n var isPlaceholder = typeof iconName === 'string' && iconName.length === 0;\n var isImage = \n // eslint-disable-next-line deprecation/deprecation\n !!this.props.imageProps || this.props.iconType === IconType.image || this.props.iconType === IconType.Image;\n var iconContent = getIconContent(iconName) || {};\n var iconClassName = iconContent.iconClassName, iconContentChildren = iconContent.children, mergeImageProps = iconContent.mergeImageProps;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n iconClassName: iconClassName,\n isImage: isImage,\n isPlaceholder: isPlaceholder,\n });\n var RootType = isImage ? 'span' : 'i';\n var nativeProps = getNativeProps(this.props, htmlElementProperties, [\n 'aria-label',\n ]);\n var imageLoadError = this.state.imageLoadError;\n var imageProps = __assign(__assign({}, this.props.imageProps), { onLoadingStateChange: this._onImageLoadingStateChange });\n var ImageType = (imageLoadError && imageErrorAs) || Image;\n // eslint-disable-next-line deprecation/deprecation\n var ariaLabel = this.props['aria-label'] || this.props.ariaLabel;\n var accessibleName = imageProps.alt || ariaLabel || this.props.title;\n var hasName = !!(accessibleName ||\n this.props['aria-labelledby'] ||\n imageProps['aria-label'] ||\n imageProps['aria-labelledby']);\n var containerProps = hasName\n ? {\n role: isImage || mergeImageProps ? undefined : 'img',\n 'aria-label': isImage || mergeImageProps ? undefined : accessibleName,\n }\n : {\n 'aria-hidden': true,\n };\n var finalIconContentChildren = iconContentChildren;\n if (mergeImageProps && iconContentChildren && typeof iconContentChildren === 'object' && accessibleName) {\n finalIconContentChildren = React.cloneElement(iconContentChildren, {\n alt: accessibleName,\n });\n }\n return (React.createElement(RootType, __assign({ \"data-icon-name\": iconName }, containerProps, nativeProps, (mergeImageProps\n ? {\n title: undefined,\n 'aria-label': undefined,\n }\n : {}), { className: classNames.root }), isImage ? React.createElement(ImageType, __assign({}, imageProps)) : children || finalIconContentChildren));\n };\n return IconBase;\n}(React.Component));\nexport { IconBase };\n//# sourceMappingURL=Icon.base.js.map","import { styled } from '../../Utilities';\nimport { IconBase } from './Icon.base';\nimport { getStyles } from './Icon.styles';\n/**\n * Legacy Icon component which can be targeted by customization. It's recommended to use `FontIcon`\n * or `ImageIcon` instead, especially in scenarios where rendering performance is important.\n * {@docCategory Icon}\n */\nexport var Icon = styled(IconBase, getStyles, undefined, {\n scope: 'Icon',\n}, true);\nIcon.displayName = 'Icon';\n//# sourceMappingURL=Icon.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { Image } from '../Image/Image';\nimport { css, getNativeProps, htmlElementProperties } from '../../Utilities';\nimport { classNames, MS_ICON } from './Icon.styles';\n/**\n * Fast icon component which only supports images (not font glyphs) and can't be targeted by customizations.\n * To style the icon, use `className` or reference `ms-Icon` in CSS.\n * {@docCategory Icon}\n */\nexport var ImageIcon = function (props) {\n var className = props.className, imageProps = props.imageProps;\n var nativeProps = getNativeProps(props, htmlElementProperties, [\n 'aria-label',\n 'aria-labelledby',\n 'title',\n 'aria-describedby',\n ]);\n var altText = imageProps.alt || props['aria-label'];\n var hasName = altText ||\n props['aria-labelledby'] ||\n props.title ||\n imageProps['aria-label'] ||\n imageProps['aria-labelledby'] ||\n imageProps.title;\n // move naming or describing attributes from the container (where they are invalid) to the image\n var imageNameProps = {\n 'aria-labelledby': props['aria-labelledby'],\n 'aria-describedby': props['aria-describedby'],\n title: props.title,\n };\n var containerProps = hasName\n ? {}\n : {\n 'aria-hidden': true,\n };\n return (React.createElement(\"div\", __assign({}, containerProps, nativeProps, { className: css(MS_ICON, classNames.root, classNames.image, className) }),\n React.createElement(Image, __assign({}, imageNameProps, imageProps, { alt: hasName ? altText : '' }))));\n};\n//# sourceMappingURL=ImageIcon.js.map","/**\n * {@docCategory Persona}\n */\nexport var PersonaSize;\n(function (PersonaSize) {\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size8` instead.\n */\n PersonaSize[PersonaSize[\"tiny\"] = 0] = \"tiny\";\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size24` instead.\n */\n PersonaSize[PersonaSize[\"extraExtraSmall\"] = 1] = \"extraExtraSmall\";\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size32` instead.\n */\n PersonaSize[PersonaSize[\"extraSmall\"] = 2] = \"extraSmall\";\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size40` instead.\n */\n PersonaSize[PersonaSize[\"small\"] = 3] = \"small\";\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size48` instead.\n */\n PersonaSize[PersonaSize[\"regular\"] = 4] = \"regular\";\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size72` instead.\n */\n PersonaSize[PersonaSize[\"large\"] = 5] = \"large\";\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size100` instead.\n */\n PersonaSize[PersonaSize[\"extraLarge\"] = 6] = \"extraLarge\";\n /**\n * No `PersonaCoin` is rendered.\n */\n PersonaSize[PersonaSize[\"size8\"] = 17] = \"size8\";\n /**\n * No `PersonaCoin` is rendered. Deprecated to align with design specifications.\n * @deprecated Use `size8` instead.\n */\n PersonaSize[PersonaSize[\"size10\"] = 9] = \"size10\";\n /**\n * Renders a 16px `PersonaCoin`.\n * @deprecated Deprecated due to not being in the design specification.\n */\n PersonaSize[PersonaSize[\"size16\"] = 8] = \"size16\";\n /**\n * Renders a 24px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size24\"] = 10] = \"size24\";\n /**\n * Renders a 28px `PersonaCoin`.\n * @deprecated Deprecated due to not being in the design specification.\n */\n PersonaSize[PersonaSize[\"size28\"] = 7] = \"size28\";\n /**\n * Renders a 32px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size32\"] = 11] = \"size32\";\n /**\n * Renders a 40px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size40\"] = 12] = \"size40\";\n /**\n * Renders a 48px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size48\"] = 13] = \"size48\";\n /**\n * Renders a 56px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size56\"] = 16] = \"size56\";\n /**\n * Renders a 72px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size72\"] = 14] = \"size72\";\n /**\n * Renders a 100px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size100\"] = 15] = \"size100\";\n /**\n * Renders a 120px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size120\"] = 18] = \"size120\";\n})(PersonaSize || (PersonaSize = {}));\n/**\n * {@docCategory Persona}\n */\nexport var PersonaPresence;\n(function (PersonaPresence) {\n PersonaPresence[PersonaPresence[\"none\"] = 0] = \"none\";\n PersonaPresence[PersonaPresence[\"offline\"] = 1] = \"offline\";\n PersonaPresence[PersonaPresence[\"online\"] = 2] = \"online\";\n PersonaPresence[PersonaPresence[\"away\"] = 3] = \"away\";\n PersonaPresence[PersonaPresence[\"dnd\"] = 4] = \"dnd\";\n PersonaPresence[PersonaPresence[\"blocked\"] = 5] = \"blocked\";\n PersonaPresence[PersonaPresence[\"busy\"] = 6] = \"busy\";\n})(PersonaPresence || (PersonaPresence = {}));\n/**\n * {@docCategory Persona}\n */\nexport var PersonaInitialsColor;\n(function (PersonaInitialsColor) {\n PersonaInitialsColor[PersonaInitialsColor[\"lightBlue\"] = 0] = \"lightBlue\";\n PersonaInitialsColor[PersonaInitialsColor[\"blue\"] = 1] = \"blue\";\n PersonaInitialsColor[PersonaInitialsColor[\"darkBlue\"] = 2] = \"darkBlue\";\n PersonaInitialsColor[PersonaInitialsColor[\"teal\"] = 3] = \"teal\";\n PersonaInitialsColor[PersonaInitialsColor[\"lightGreen\"] = 4] = \"lightGreen\";\n PersonaInitialsColor[PersonaInitialsColor[\"green\"] = 5] = \"green\";\n PersonaInitialsColor[PersonaInitialsColor[\"darkGreen\"] = 6] = \"darkGreen\";\n PersonaInitialsColor[PersonaInitialsColor[\"lightPink\"] = 7] = \"lightPink\";\n PersonaInitialsColor[PersonaInitialsColor[\"pink\"] = 8] = \"pink\";\n PersonaInitialsColor[PersonaInitialsColor[\"magenta\"] = 9] = \"magenta\";\n PersonaInitialsColor[PersonaInitialsColor[\"purple\"] = 10] = \"purple\";\n /**\n * @deprecated `black` is a color that can result in offensive persona coins with some initials combinations,\n * so it can only be set with overrides. Will be removed in a future major release.\n */\n PersonaInitialsColor[PersonaInitialsColor[\"black\"] = 11] = \"black\";\n PersonaInitialsColor[PersonaInitialsColor[\"orange\"] = 12] = \"orange\";\n /**\n * @deprecated `red` is a color that often has a special meaning, so it is considered a reserved color and\n * can only be set with overrides. Will be removed in a future major release.\n */\n PersonaInitialsColor[PersonaInitialsColor[\"red\"] = 13] = \"red\";\n PersonaInitialsColor[PersonaInitialsColor[\"darkRed\"] = 14] = \"darkRed\";\n /**\n * Transparent is not intended to be used with typical initials due to accessibility issues.\n * Its primary use is for overflow buttons, so it is considered a reserved color and can only be set with overrides.\n */\n PersonaInitialsColor[PersonaInitialsColor[\"transparent\"] = 15] = \"transparent\";\n PersonaInitialsColor[PersonaInitialsColor[\"violet\"] = 16] = \"violet\";\n PersonaInitialsColor[PersonaInitialsColor[\"lightRed\"] = 17] = \"lightRed\";\n PersonaInitialsColor[PersonaInitialsColor[\"gold\"] = 18] = \"gold\";\n PersonaInitialsColor[PersonaInitialsColor[\"burgundy\"] = 19] = \"burgundy\";\n PersonaInitialsColor[PersonaInitialsColor[\"warmGray\"] = 20] = \"warmGray\";\n PersonaInitialsColor[PersonaInitialsColor[\"coolGray\"] = 21] = \"coolGray\";\n /**\n * `gray` is a color that can result in offensive persona coins with some initials combinations,\n * so it can only be set with overrides.\n */\n PersonaInitialsColor[PersonaInitialsColor[\"gray\"] = 22] = \"gray\";\n PersonaInitialsColor[PersonaInitialsColor[\"cyan\"] = 23] = \"cyan\";\n PersonaInitialsColor[PersonaInitialsColor[\"rust\"] = 24] = \"rust\";\n})(PersonaInitialsColor || (PersonaInitialsColor = {}));\n//# sourceMappingURL=Persona.types.js.map","var _a;\nimport { PersonaPresence, PersonaSize } from './Persona.types';\n// Persona Sizes\nexport var personaSize;\n(function (personaSize) {\n personaSize.size8 = '20px';\n // TODO: remove in a future major release as it's deprecated.\n personaSize.size10 = '20px';\n // TODO: remove in a future major release as it's deprecated.\n personaSize.size16 = '16px';\n personaSize.size24 = '24px';\n // TODO: remove in a future major release as it's deprecated.\n personaSize.size28 = '28px';\n personaSize.size32 = '32px';\n personaSize.size40 = '40px';\n personaSize.size48 = '48px';\n personaSize.size56 = '56px';\n personaSize.size72 = '72px';\n personaSize.size100 = '100px';\n personaSize.size120 = '120px';\n})(personaSize || (personaSize = {}));\n// Persona Presence Sizes\nexport var personaPresenceSize;\n(function (personaPresenceSize) {\n personaPresenceSize.size6 = '6px';\n personaPresenceSize.size8 = '8px';\n personaPresenceSize.size12 = '12px';\n personaPresenceSize.size16 = '16px';\n personaPresenceSize.size20 = '20px';\n personaPresenceSize.size28 = '28px';\n personaPresenceSize.size32 = '32px';\n /**\n * @deprecated This is now unused\n */\n personaPresenceSize.border = '2px';\n})(personaPresenceSize || (personaPresenceSize = {}));\n// TODO: remove the deprecated parts in a future major release.\nexport var sizeBoolean = function (size) { return ({\n isSize8: size === PersonaSize.size8,\n /* eslint-disable deprecation/deprecation */\n isSize10: size === PersonaSize.size10 || size === PersonaSize.tiny,\n isSize16: size === PersonaSize.size16,\n isSize24: size === PersonaSize.size24 || size === PersonaSize.extraExtraSmall,\n isSize28: size === PersonaSize.size28 || size === PersonaSize.extraSmall,\n isSize32: size === PersonaSize.size32,\n isSize40: size === PersonaSize.size40 || size === PersonaSize.small,\n isSize48: size === PersonaSize.size48 || size === PersonaSize.regular,\n isSize56: size === PersonaSize.size56,\n isSize72: size === PersonaSize.size72 || size === PersonaSize.large,\n isSize100: size === PersonaSize.size100 || size === PersonaSize.extraLarge,\n isSize120: size === PersonaSize.size120,\n}); };\nexport var sizeToPixels = (_a = {},\n // Old deprecated sizes\n _a[PersonaSize.tiny] = 10,\n _a[PersonaSize.extraExtraSmall] = 24,\n _a[PersonaSize.extraSmall] = 28,\n _a[PersonaSize.small] = 40,\n _a[PersonaSize.regular] = 48,\n _a[PersonaSize.large] = 72,\n _a[PersonaSize.extraLarge] = 100,\n // New sizes\n _a[PersonaSize.size8] = 8,\n _a[PersonaSize.size10] = 10,\n _a[PersonaSize.size16] = 16,\n _a[PersonaSize.size24] = 24,\n _a[PersonaSize.size28] = 28,\n /* eslint-enable deprecation/deprecation */\n _a[PersonaSize.size32] = 32,\n _a[PersonaSize.size40] = 40,\n _a[PersonaSize.size48] = 48,\n _a[PersonaSize.size56] = 56,\n _a[PersonaSize.size72] = 72,\n _a[PersonaSize.size100] = 100,\n _a[PersonaSize.size120] = 120,\n _a);\nexport var presenceBoolean = function (presence) { return ({\n isAvailable: presence === PersonaPresence.online,\n isAway: presence === PersonaPresence.away,\n isBlocked: presence === PersonaPresence.blocked,\n isBusy: presence === PersonaPresence.busy,\n isDoNotDisturb: presence === PersonaPresence.dnd,\n isOffline: presence === PersonaPresence.offline,\n}); };\n//# sourceMappingURL=PersonaConsts.js.map","import * as React from 'react';\nimport { classNamesFunction } from '../../../Utilities';\nimport { Icon } from '../../../Icon';\nimport { PersonaPresence as PersonaPresenceEnum } from '../Persona.types';\nimport { sizeBoolean } from '../PersonaConsts';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nvar coinSizeFontScaleFactor = 6;\nvar coinSizePresenceScaleFactor = 3;\nvar presenceMaxSize = 40;\nvar presenceFontMaxSize = 20;\nvar getClassNames = classNamesFunction({\n // There can be many PersonaPresence rendered with different sizes.\n // Therefore setting a larger cache size.\n cacheSize: 100,\n});\n/**\n * PersonaPresence with no default styles.\n * [Use the `getStyles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)\n */\nexport var PersonaPresenceBase = React.forwardRef(function (props, forwardedRef) {\n var coinSize = props.coinSize, isOutOfOffice = props.isOutOfOffice, styles = props.styles, // Use getStyles from props.\n presence = props.presence, theme = props.theme, presenceTitle = props.presenceTitle, presenceColors = props.presenceColors;\n var rootRef = React.useRef(null);\n var mergedRootRef = useMergedRefs(forwardedRef, rootRef);\n var size = sizeBoolean(props.size);\n // Render Presence Icon if Persona is above size 32.\n var renderIcon = !(size.isSize8 || size.isSize10 || size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32) &&\n (coinSize ? coinSize > 32 : true);\n var presenceHeightWidth = coinSize\n ? coinSize / coinSizePresenceScaleFactor < presenceMaxSize\n ? coinSize / coinSizePresenceScaleFactor + 'px'\n : presenceMaxSize + 'px'\n : '';\n var presenceFontSize = coinSize\n ? coinSize / coinSizeFontScaleFactor < presenceFontMaxSize\n ? coinSize / coinSizeFontScaleFactor + 'px'\n : presenceFontMaxSize + 'px'\n : '';\n var coinSizeWithPresenceIconStyle = coinSize\n ? { fontSize: presenceFontSize, lineHeight: presenceHeightWidth }\n : undefined;\n var coinSizeWithPresenceStyle = coinSize ? { width: presenceHeightWidth, height: presenceHeightWidth } : undefined;\n // Use getStyles from props, or fall back to getStyles from styles file.\n var classNames = getClassNames(styles, {\n theme: theme,\n presence: presence,\n size: props.size,\n isOutOfOffice: isOutOfOffice,\n presenceColors: presenceColors,\n });\n if (presence === PersonaPresenceEnum.none) {\n return null;\n }\n return (React.createElement(\"div\", { role: \"presentation\", className: classNames.presence, style: coinSizeWithPresenceStyle, title: presenceTitle, ref: mergedRootRef }, renderIcon && (React.createElement(Icon, { className: classNames.presenceIcon, iconName: determineIcon(props.presence, props.isOutOfOffice), style: coinSizeWithPresenceIconStyle }))));\n});\nPersonaPresenceBase.displayName = 'PersonaPresenceBase';\nfunction determineIcon(presence, isOutOfOffice) {\n if (!presence) {\n return undefined;\n }\n var oofIcon = 'SkypeArrow';\n switch (PersonaPresenceEnum[presence]) {\n case 'online':\n return 'SkypeCheck';\n case 'away':\n return isOutOfOffice ? oofIcon : 'SkypeClock';\n case 'dnd':\n return 'SkypeMinus';\n case 'offline':\n return isOutOfOffice ? oofIcon : '';\n }\n return '';\n}\n//# sourceMappingURL=PersonaPresence.base.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, getGlobalClassNames, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { personaPresenceSize, presenceBoolean, sizeBoolean } from '../PersonaConsts';\nvar GlobalClassNames = {\n presence: 'ms-Persona-presence',\n presenceIcon: 'ms-Persona-presenceIcon',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e, _f;\n var theme = props.theme, presenceColors = props.presenceColors;\n var semanticColors = theme.semanticColors, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var size = sizeBoolean(props.size);\n var presence = presenceBoolean(props.presence);\n // Presence colors\n var presenceColorAvailable = (presenceColors && presenceColors.available) || '#6BB700';\n var presenceColorAway = (presenceColors && presenceColors.away) || '#FFAA44';\n var presenceColorBusy = (presenceColors && presenceColors.busy) || '#C43148';\n var presenceColorDnd = (presenceColors && presenceColors.dnd) || '#C50F1F';\n var presenceColorOffline = (presenceColors && presenceColors.offline) || '#8A8886';\n var presenceColorOof = (presenceColors && presenceColors.oof) || '#B4009E';\n var presenceColorBackground = (presenceColors && presenceColors.background) || semanticColors.bodyBackground;\n var isOpenCirclePresence = presence.isOffline ||\n (props.isOutOfOffice && (presence.isAvailable || presence.isBusy || presence.isAway || presence.isDoNotDisturb));\n var borderSizeForSmallPersonas = '1px';\n var borderSizeForLargePersonas = '2px';\n var borderSize = size.isSize72 || size.isSize100 ? borderSizeForLargePersonas : borderSizeForSmallPersonas;\n return {\n presence: [\n classNames.presence,\n __assign(__assign({ position: 'absolute', height: personaPresenceSize.size12, width: personaPresenceSize.size12, borderRadius: '50%', top: 'auto', right: '-2px', bottom: '-2px', border: \"2px solid \".concat(presenceColorBackground), textAlign: 'center', boxSizing: 'content-box', backgroundClip: 'border-box' }, getHighContrastNoAdjustStyle()), { selectors: (_a = {},\n _a[HighContrastSelector] = {\n borderColor: 'Window',\n backgroundColor: 'WindowText',\n },\n _a) }),\n (size.isSize8 || size.isSize10) && {\n right: 'auto',\n top: '7px',\n left: 0,\n border: 0,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n top: '9px',\n border: '1px solid WindowText',\n },\n _b),\n },\n (size.isSize8 || size.isSize10 || size.isSize24 || size.isSize28 || size.isSize32) &&\n makeSizeStyle(personaPresenceSize.size8),\n (size.isSize40 || size.isSize48) && makeSizeStyle(personaPresenceSize.size12),\n size.isSize16 && {\n height: personaPresenceSize.size6,\n width: personaPresenceSize.size6,\n borderWidth: '1.5px',\n },\n size.isSize56 && makeSizeStyle(personaPresenceSize.size16),\n size.isSize72 && makeSizeStyle(personaPresenceSize.size20),\n size.isSize100 && makeSizeStyle(personaPresenceSize.size28),\n size.isSize120 && makeSizeStyle(personaPresenceSize.size32),\n presence.isAvailable && {\n backgroundColor: presenceColorAvailable,\n selectors: (_c = {},\n _c[HighContrastSelector] = backgroundColor('Highlight'),\n _c),\n },\n presence.isAway && backgroundColor(presenceColorAway),\n presence.isBlocked && [\n {\n selectors: (_d = {\n // Only show :after at larger sizes\n ':after': size.isSize40 || size.isSize48 || size.isSize72 || size.isSize100\n ? {\n content: '\"\"',\n width: '100%',\n height: borderSize,\n backgroundColor: presenceColorBusy,\n transform: 'translateY(-50%) rotate(-45deg)',\n position: 'absolute',\n top: '50%',\n left: 0,\n }\n : undefined\n },\n _d[HighContrastSelector] = {\n selectors: {\n ':after': {\n width: \"calc(100% - 4px)\",\n left: '2px',\n backgroundColor: 'Window',\n },\n },\n },\n _d),\n },\n ],\n presence.isBusy && backgroundColor(presenceColorBusy),\n presence.isDoNotDisturb && backgroundColor(presenceColorDnd),\n presence.isOffline && backgroundColor(presenceColorOffline),\n (isOpenCirclePresence || presence.isBlocked) && [\n {\n backgroundColor: presenceColorBackground,\n selectors: (_e = {\n ':before': {\n content: '\"\"',\n width: '100%',\n height: '100%',\n position: 'absolute',\n top: 0,\n left: 0,\n border: \"\".concat(borderSize, \" solid \").concat(presenceColorBusy),\n borderRadius: '50%',\n boxSizing: 'border-box',\n }\n },\n _e[HighContrastSelector] = {\n backgroundColor: 'WindowText',\n selectors: {\n ':before': {\n width: \"calc(100% - 2px)\",\n height: \"calc(100% - 2px)\",\n top: '1px',\n left: '1px',\n borderColor: 'Window',\n },\n },\n },\n _e),\n },\n ],\n isOpenCirclePresence && presence.isAvailable && makeBeforeBorderStyle(borderSize, presenceColorAvailable),\n isOpenCirclePresence && presence.isBusy && makeBeforeBorderStyle(borderSize, presenceColorBusy),\n isOpenCirclePresence && presence.isAway && makeBeforeBorderStyle(borderSize, presenceColorOof),\n isOpenCirclePresence && presence.isDoNotDisturb && makeBeforeBorderStyle(borderSize, presenceColorDnd),\n isOpenCirclePresence && presence.isOffline && makeBeforeBorderStyle(borderSize, presenceColorOffline),\n isOpenCirclePresence &&\n presence.isOffline &&\n props.isOutOfOffice &&\n makeBeforeBorderStyle(borderSize, presenceColorOof),\n ],\n presenceIcon: [\n classNames.presenceIcon,\n {\n color: presenceColorBackground,\n fontSize: '6px',\n lineHeight: personaPresenceSize.size12,\n verticalAlign: 'top',\n selectors: (_f = {},\n _f[HighContrastSelector] = {\n color: 'Window',\n },\n _f),\n },\n size.isSize56 && {\n fontSize: '8px',\n lineHeight: personaPresenceSize.size16,\n },\n size.isSize72 && {\n fontSize: fonts.small.fontSize,\n lineHeight: personaPresenceSize.size20,\n },\n size.isSize100 && {\n fontSize: fonts.medium.fontSize,\n lineHeight: personaPresenceSize.size28,\n },\n size.isSize120 && {\n fontSize: fonts.medium.fontSize,\n lineHeight: personaPresenceSize.size32,\n },\n presence.isAway && {\n position: 'relative',\n left: isOpenCirclePresence ? undefined : '1px',\n },\n isOpenCirclePresence && presence.isAvailable && makeOpenCircleIconStyle(presenceColorAvailable),\n isOpenCirclePresence && presence.isBusy && makeOpenCircleIconStyle(presenceColorBusy),\n isOpenCirclePresence && presence.isAway && makeOpenCircleIconStyle(presenceColorOof),\n isOpenCirclePresence && presence.isDoNotDisturb && makeOpenCircleIconStyle(presenceColorDnd),\n isOpenCirclePresence && presence.isOffline && makeOpenCircleIconStyle(presenceColorOffline),\n isOpenCirclePresence && presence.isOffline && props.isOutOfOffice && makeOpenCircleIconStyle(presenceColorOof),\n ],\n };\n};\nfunction makeOpenCircleIconStyle(color) {\n return {\n color: color,\n borderColor: color,\n };\n}\nfunction makeBeforeBorderStyle(borderSize, color) {\n return {\n selectors: {\n ':before': {\n border: \"\".concat(borderSize, \" solid \").concat(color),\n },\n },\n };\n}\nfunction makeSizeStyle(size) {\n return {\n height: size,\n width: size,\n };\n}\nfunction backgroundColor(color) {\n return { backgroundColor: color };\n}\n//# sourceMappingURL=PersonaPresence.styles.js.map","import { styled } from '../../../Utilities';\nimport { PersonaPresenceBase } from './PersonaPresence.base';\nimport { getStyles } from './PersonaPresence.styles';\n/**\n * PersonaPresence is used to render an individual's presence.\n */\nexport var PersonaPresence = styled(PersonaPresenceBase, getStyles, undefined, { scope: 'PersonaPresence' });\n//# sourceMappingURL=PersonaPresence.js.map","import { PersonaInitialsColor } from './Persona.types';\n/**\n * Following colors are considered reserved and can only be set with overrides, so they are excluded from this set:\n * - `gray` and `black` can result in offensive persona coins with some initials combinations\n * - `red` often has a special meaning\n * - `transparent` is not intended to be used with typical initials due to accessibility issues;\n * its primary use is for Facepile overflow buttons.\n */\nvar COLOR_SWATCHES_LOOKUP = [\n PersonaInitialsColor.lightBlue,\n PersonaInitialsColor.blue,\n PersonaInitialsColor.darkBlue,\n PersonaInitialsColor.teal,\n PersonaInitialsColor.green,\n PersonaInitialsColor.darkGreen,\n PersonaInitialsColor.lightPink,\n PersonaInitialsColor.pink,\n PersonaInitialsColor.magenta,\n PersonaInitialsColor.purple,\n PersonaInitialsColor.orange,\n PersonaInitialsColor.lightRed,\n PersonaInitialsColor.darkRed,\n PersonaInitialsColor.violet,\n PersonaInitialsColor.gold,\n PersonaInitialsColor.burgundy,\n PersonaInitialsColor.warmGray,\n PersonaInitialsColor.cyan,\n PersonaInitialsColor.rust,\n PersonaInitialsColor.coolGray,\n];\nvar COLOR_SWATCHES_NUM_ENTRIES = COLOR_SWATCHES_LOOKUP.length;\nfunction getInitialsColorFromName(displayName) {\n var color = PersonaInitialsColor.blue;\n if (!displayName) {\n return color;\n }\n var hashCode = 0;\n for (var iLen = displayName.length - 1; iLen >= 0; iLen--) {\n var ch = displayName.charCodeAt(iLen);\n var shift = iLen % 8;\n // eslint-disable-next-line no-bitwise\n hashCode ^= (ch << shift) + (ch >> (8 - shift));\n }\n color = COLOR_SWATCHES_LOOKUP[hashCode % COLOR_SWATCHES_NUM_ENTRIES];\n return color;\n}\nfunction personaInitialsColorToHexCode(personaInitialsColor) {\n switch (personaInitialsColor) {\n case PersonaInitialsColor.lightBlue:\n return '#4F6BED';\n case PersonaInitialsColor.blue:\n return '#0078D4';\n case PersonaInitialsColor.darkBlue:\n return '#004E8C';\n case PersonaInitialsColor.teal:\n return '#038387';\n case PersonaInitialsColor.lightGreen:\n case PersonaInitialsColor.green:\n return '#498205';\n case PersonaInitialsColor.darkGreen:\n return '#0B6A0B';\n case PersonaInitialsColor.lightPink:\n return '#C239B3';\n case PersonaInitialsColor.pink:\n return '#E3008C';\n case PersonaInitialsColor.magenta:\n return '#881798';\n case PersonaInitialsColor.purple:\n return '#5C2E91';\n case PersonaInitialsColor.orange:\n return '#CA5010';\n // eslint-disable-next-line deprecation/deprecation\n case PersonaInitialsColor.red:\n return '#EE1111';\n case PersonaInitialsColor.lightRed:\n return '#D13438';\n case PersonaInitialsColor.darkRed:\n return '#A4262C';\n case PersonaInitialsColor.transparent:\n return 'transparent';\n case PersonaInitialsColor.violet:\n return '#8764B8';\n case PersonaInitialsColor.gold:\n return '#986F0B';\n case PersonaInitialsColor.burgundy:\n return '#750B1C';\n case PersonaInitialsColor.warmGray:\n return '#7A7574';\n case PersonaInitialsColor.cyan:\n return '#005B70';\n case PersonaInitialsColor.rust:\n return '#8E562E';\n case PersonaInitialsColor.coolGray:\n return '#69797E';\n // eslint-disable-next-line deprecation/deprecation\n case PersonaInitialsColor.black:\n return '#1D1D1D';\n case PersonaInitialsColor.gray:\n return '#393939';\n }\n}\n/** @deprecated Use `getPersonaInitialsColor` */\nexport function initialsColorPropToColorCode(props) {\n return getPersonaInitialsColor(props);\n}\n/**\n * Gets the hex color string (prefixed with #) for the given persona props.\n * This is the logic used internally by the Persona control.\n * @param props - Current persona props\n * @returns Hex color string prefixed with #\n */\nexport function getPersonaInitialsColor(props) {\n // eslint-disable-next-line deprecation/deprecation\n var primaryText = props.primaryText, text = props.text;\n var initialsColor = props.initialsColor;\n var initialsColorCode;\n if (typeof initialsColor === 'string') {\n initialsColorCode = initialsColor;\n }\n else {\n initialsColor = initialsColor !== undefined ? initialsColor : getInitialsColorFromName(text || primaryText);\n initialsColorCode = personaInitialsColorToHexCode(initialsColor);\n }\n return initialsColorCode;\n}\n//# sourceMappingURL=PersonaInitialsColor.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, divProperties, memoizeFunction, getInitials, getNativeProps, getRTL, getPropsWithDefaults, } from '../../../Utilities';\nimport { mergeStyles } from '../../../Styling';\nimport { PersonaPresence } from '../PersonaPresence/index';\nimport { Icon } from '../../../Icon';\nimport { Image, ImageFit, ImageLoadState } from '../../../Image';\nimport { PersonaPresence as PersonaPresenceEnum, PersonaSize } from '../Persona.types';\nimport { getPersonaInitialsColor } from '../PersonaInitialsColor';\nimport { sizeToPixels } from '../PersonaConsts';\nimport { useWarnings } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction({\n // There can be many PersonaCoin rendered with different sizes.\n // Therefore setting a larger cache size.\n cacheSize: 100,\n});\nvar getInitialsStyles = memoizeFunction(function (className, initialsColor, initialsTextColor, text, primaryText, showUnknownPersonaCoin) {\n return mergeStyles(className, !showUnknownPersonaCoin && {\n backgroundColor: getPersonaInitialsColor({ text: text, initialsColor: initialsColor, primaryText: primaryText }),\n color: initialsTextColor,\n });\n});\nvar DEFAULT_PROPS = {\n size: PersonaSize.size48,\n presence: PersonaPresenceEnum.none,\n imageAlt: '',\n};\nfunction useDebugWarnings(props) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional\n useWarnings({\n name: 'PersonaCoin',\n props: props,\n deprecations: { primaryText: 'text' },\n });\n }\n}\nfunction useImageLoadState(_a) {\n var onPhotoLoadingStateChange = _a.onPhotoLoadingStateChange, imageUrl = _a.imageUrl;\n var _b = React.useState(ImageLoadState.notLoaded), imageLoadState = _b[0], setImageLoadstate = _b[1];\n React.useEffect(function () {\n setImageLoadstate(ImageLoadState.notLoaded);\n }, [imageUrl]);\n var onLoadingStateChange = function (loadState) {\n setImageLoadstate(loadState);\n onPhotoLoadingStateChange === null || onPhotoLoadingStateChange === void 0 ? void 0 : onPhotoLoadingStateChange(loadState);\n };\n return [imageLoadState, onLoadingStateChange];\n}\n/**\n * PersonaCoin with no default styles.\n * [Use the `getStyles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)\n */\nexport var PersonaCoinBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n useDebugWarnings(props);\n var _a = useImageLoadState(props), imageLoadState = _a[0], onLoadingStateChange = _a[1];\n var renderCoin = getCoinRenderer(onLoadingStateChange);\n var className = props.className, coinProps = props.coinProps, showUnknownPersonaCoin = props.showUnknownPersonaCoin, coinSize = props.coinSize, styles = props.styles, imageUrl = props.imageUrl, initialsColor = props.initialsColor, initialsTextColor = props.initialsTextColor, isOutOfOffice = props.isOutOfOffice, \n // eslint-disable-next-line deprecation/deprecation\n _b = props.onRenderCoin, \n // eslint-disable-next-line deprecation/deprecation\n onRenderCoin = _b === void 0 ? renderCoin : _b, \n // eslint-disable-next-line deprecation/deprecation\n _c = props.onRenderPersonaCoin, \n // eslint-disable-next-line deprecation/deprecation\n onRenderPersonaCoin = _c === void 0 ? onRenderCoin : _c, _d = props.onRenderInitials, onRenderInitials = _d === void 0 ? renderPersonaCoinInitials : _d, presence = props.presence, presenceTitle = props.presenceTitle, presenceColors = props.presenceColors, \n // eslint-disable-next-line deprecation/deprecation\n primaryText = props.primaryText, showInitialsUntilImageLoads = props.showInitialsUntilImageLoads, text = props.text, theme = props.theme, size = props.size;\n var divProps = getNativeProps(props, divProperties);\n var divCoinProps = getNativeProps(coinProps || {}, divProperties);\n var coinSizeStyle = coinSize ? { width: coinSize, height: coinSize } : undefined;\n var hideImage = showUnknownPersonaCoin;\n var personaPresenceProps = {\n coinSize: coinSize,\n isOutOfOffice: isOutOfOffice,\n presence: presence,\n presenceTitle: presenceTitle,\n presenceColors: presenceColors,\n size: size,\n theme: theme,\n };\n // Use getStyles from props, or fall back to getStyles from styles file.\n var classNames = getClassNames(styles, {\n theme: theme,\n className: coinProps && coinProps.className ? coinProps.className : className,\n size: size,\n coinSize: coinSize,\n showUnknownPersonaCoin: showUnknownPersonaCoin,\n });\n var shouldRenderInitials = Boolean(imageLoadState !== ImageLoadState.loaded &&\n ((showInitialsUntilImageLoads && imageUrl) || !imageUrl || imageLoadState === ImageLoadState.error || hideImage));\n return (React.createElement(\"div\", __assign({ role: \"presentation\" }, divProps, { className: classNames.coin, ref: forwardedRef }),\n // Render PersonaCoin if size is not size8. size10 and tiny need to removed after a deprecation cleanup.\n // eslint-disable-next-line deprecation/deprecation\n size !== PersonaSize.size8 && size !== PersonaSize.size10 && size !== PersonaSize.tiny ? (React.createElement(\"div\", __assign({ role: \"presentation\" }, divCoinProps, { className: classNames.imageArea, style: coinSizeStyle }),\n shouldRenderInitials && (React.createElement(\"div\", { className: getInitialsStyles(classNames.initials, initialsColor, initialsTextColor, text, primaryText, showUnknownPersonaCoin), style: coinSizeStyle, \"aria-hidden\": \"true\" }, onRenderInitials(props, renderPersonaCoinInitials))),\n !hideImage && onRenderPersonaCoin(props, renderCoin),\n React.createElement(PersonaPresence, __assign({}, personaPresenceProps)))) : // Otherwise, render just PersonaPresence.\n props.presence ? (React.createElement(PersonaPresence, __assign({}, personaPresenceProps))) : (\n // Just render Contact Icon if there isn't a Presence prop.\n React.createElement(Icon, { iconName: \"Contact\", className: classNames.size10WithoutPresenceIcon })),\n props.children));\n});\nPersonaCoinBase.displayName = 'PersonaCoinBase';\nvar getCoinRenderer = function (onLoadingStateChange) {\n return function (_a) {\n var coinSize = _a.coinSize, styles = _a.styles, imageUrl = _a.imageUrl, imageAlt = _a.imageAlt, imageShouldFadeIn = _a.imageShouldFadeIn, imageShouldStartVisible = _a.imageShouldStartVisible, theme = _a.theme, showUnknownPersonaCoin = _a.showUnknownPersonaCoin, _b = _a.size, size = _b === void 0 ? DEFAULT_PROPS.size : _b;\n // Render the Image component only if an image URL is provided\n if (!imageUrl) {\n return null;\n }\n var classNames = getClassNames(styles, {\n theme: theme,\n size: size,\n showUnknownPersonaCoin: showUnknownPersonaCoin,\n });\n var dimension = coinSize || sizeToPixels[size];\n return (React.createElement(Image, { className: classNames.image, imageFit: ImageFit.cover, src: imageUrl, width: dimension, height: dimension, alt: imageAlt, shouldFadeIn: imageShouldFadeIn, shouldStartVisible: imageShouldStartVisible, onLoadingStateChange: onLoadingStateChange }));\n };\n};\nvar renderPersonaCoinInitials = function (_a) {\n var imageInitials = _a.imageInitials, allowPhoneInitials = _a.allowPhoneInitials, showUnknownPersonaCoin = _a.showUnknownPersonaCoin, text = _a.text, \n // eslint-disable-next-line deprecation/deprecation\n primaryText = _a.primaryText, theme = _a.theme;\n if (showUnknownPersonaCoin) {\n return React.createElement(Icon, { iconName: \"Help\" });\n }\n var isRTL = getRTL(theme);\n imageInitials = imageInitials || getInitials(text || primaryText || '', isRTL, allowPhoneInitials);\n return imageInitials !== '' ? React.createElement(\"span\", null, imageInitials) : React.createElement(Icon, { iconName: \"Contact\" });\n};\n//# sourceMappingURL=PersonaCoin.base.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, FontWeights, getGlobalClassNames, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { sizeBoolean, sizeToPixels } from '../PersonaConsts';\nvar GlobalClassNames = {\n coin: 'ms-Persona-coin',\n imageArea: 'ms-Persona-imageArea',\n image: 'ms-Persona-image',\n initials: 'ms-Persona-initials',\n size8: 'ms-Persona--size8',\n size10: 'ms-Persona--size10',\n size16: 'ms-Persona--size16',\n size24: 'ms-Persona--size24',\n size28: 'ms-Persona--size28',\n size32: 'ms-Persona--size32',\n size40: 'ms-Persona--size40',\n size48: 'ms-Persona--size48',\n size56: 'ms-Persona--size56',\n size72: 'ms-Persona--size72',\n size100: 'ms-Persona--size100',\n size120: 'ms-Persona--size120',\n};\nexport var getStyles = function (props) {\n var _a;\n var className = props.className, theme = props.theme, coinSize = props.coinSize;\n var palette = theme.palette, fonts = theme.fonts;\n var size = sizeBoolean(props.size);\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n // Static colors used when displaying 'unknown persona' coin\n var unknownPersonaBackgroundColor = 'rgb(234, 234, 234)';\n var unknownPersonaFontColor = 'rgb(168, 0, 0)';\n var dimension = coinSize || (props.size && sizeToPixels[props.size]) || 48;\n return {\n coin: [\n classNames.coin,\n fonts.medium,\n size.isSize8 && classNames.size8,\n size.isSize10 && classNames.size10,\n size.isSize16 && classNames.size16,\n size.isSize24 && classNames.size24,\n size.isSize28 && classNames.size28,\n size.isSize32 && classNames.size32,\n size.isSize40 && classNames.size40,\n size.isSize48 && classNames.size48,\n size.isSize56 && classNames.size56,\n size.isSize72 && classNames.size72,\n size.isSize100 && classNames.size100,\n size.isSize120 && classNames.size120,\n className,\n ],\n size10WithoutPresenceIcon: {\n fontSize: fonts.xSmall.fontSize,\n position: 'absolute',\n top: '5px',\n right: 'auto',\n left: 0,\n },\n imageArea: [\n classNames.imageArea,\n {\n position: 'relative',\n textAlign: 'center',\n flex: '0 0 auto',\n height: dimension,\n width: dimension,\n },\n dimension <= 10 && {\n overflow: 'visible',\n background: 'transparent',\n height: 0,\n width: 0,\n },\n ],\n image: [\n classNames.image,\n {\n marginRight: '10px',\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n border: 0,\n borderRadius: '50%',\n perspective: '1px',\n },\n dimension <= 10 && {\n overflow: 'visible',\n background: 'transparent',\n height: 0,\n width: 0,\n },\n dimension > 10 && {\n height: dimension,\n width: dimension,\n },\n ],\n initials: [\n classNames.initials,\n {\n borderRadius: '50%',\n color: props.showUnknownPersonaCoin ? unknownPersonaFontColor : palette.white,\n fontSize: fonts.large.fontSize,\n fontWeight: FontWeights.semibold,\n // copying the logic for the dimensions; defaulted to 46 for size48\n lineHeight: dimension === 48 ? 46 : dimension,\n height: dimension,\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign(__assign({ border: '1px solid WindowText' }, getHighContrastNoAdjustStyle()), { color: 'WindowText', boxSizing: 'border-box', backgroundColor: 'Window !important' }),\n _a.i = {\n fontWeight: FontWeights.semibold,\n },\n _a),\n },\n props.showUnknownPersonaCoin && {\n backgroundColor: unknownPersonaBackgroundColor,\n },\n dimension < 32 && {\n fontSize: fonts.xSmall.fontSize,\n },\n dimension >= 32 &&\n dimension < 40 && {\n fontSize: fonts.medium.fontSize,\n },\n dimension >= 40 &&\n dimension < 56 && {\n fontSize: fonts.mediumPlus.fontSize,\n },\n dimension >= 56 &&\n dimension < 72 && {\n fontSize: fonts.xLarge.fontSize,\n },\n dimension >= 72 &&\n dimension < 100 && {\n fontSize: fonts.xxLarge.fontSize,\n },\n dimension >= 100 && {\n fontSize: fonts.superLarge.fontSize,\n },\n ],\n };\n};\n//# sourceMappingURL=PersonaCoin.styles.js.map","import { styled } from '../../../Utilities';\nimport { PersonaCoinBase } from './PersonaCoin.base';\nimport { getStyles } from './PersonaCoin.styles';\n/**\n * PersonaCoin is used to render an individual's avatar and presence.\n */\nexport var PersonaCoin = styled(PersonaCoinBase, getStyles, undefined, {\n scope: 'PersonaCoin',\n});\n//# sourceMappingURL=PersonaCoin.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, divProperties, getNativeProps, getPropsWithDefaults } from '../../Utilities';\nimport { TooltipHost, TooltipOverflowMode } from '../../Tooltip';\nimport { PersonaCoin } from './PersonaCoin/PersonaCoin';\nimport { PersonaPresence as PersonaPresenceEnum, PersonaSize } from './Persona.types';\nimport { useWarnings, useMergedRefs } from '@fluentui/react-hooks';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nvar getClassNames = classNamesFunction();\nvar DEFAULT_PROPS = {\n size: PersonaSize.size48,\n presence: PersonaPresenceEnum.none,\n imageAlt: '',\n showOverflowTooltip: true,\n};\nfunction useDebugWarnings(props) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional\n useWarnings({\n name: 'Persona',\n props: props,\n deprecations: { primaryText: 'text' },\n });\n }\n}\n/**\n * Persona with no default styles.\n * [Use the `styles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)\n */\nexport var PersonaBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n useDebugWarnings(props);\n var rootRef = React.useRef(null);\n var mergedRootRef = useMergedRefs(forwardedRef, rootRef);\n /**\n * Deprecation helper for getting text.\n */\n var getText = function () {\n // eslint-disable-next-line deprecation/deprecation\n return props.text || props.primaryText || '';\n };\n /**\n * Renders various types of Text (primaryText, secondaryText, etc)\n * based on the classNames passed\n * @param elementClassNames - element className\n * @param renderFunction - render function\n * @param defaultRenderFunction - default render function\n */\n var renderElement = function (elementClassNames, renderFunction, defaultRenderFunction) {\n var content = renderFunction && renderFunction(props, defaultRenderFunction);\n return content ? (React.createElement(\"div\", { dir: \"auto\", className: elementClassNames }, content)) : undefined;\n };\n /**\n * using closure to wrap the default render behavior\n * to make it independent of the type of text passed\n * @param text - text to render\n */\n var onRenderText = function (text, tooltip) {\n if (tooltip === void 0) { tooltip = true; }\n // return default render behavior for valid text or undefined\n return text\n ? tooltip\n ? function () {\n // default onRender behavior\n return (React.createElement(TooltipHost, { content: text, overflowMode: TooltipOverflowMode.Parent, directionalHint: DirectionalHint.topLeftEdge }, text));\n }\n : function () { return React.createElement(React.Fragment, null, text); }\n : undefined;\n };\n var onInternalRenderPersonaCoin = function (providedCoinProps) {\n return React.createElement(PersonaCoin, __assign({}, providedCoinProps));\n };\n // wrapping default render behavior based on various props properties\n var onInternalRenderPrimaryText = onRenderText(getText(), props.showOverflowTooltip);\n var onInternalRenderSecondaryText = onRenderText(props.secondaryText, props.showOverflowTooltip);\n var onInternalRenderTertiaryText = onRenderText(props.tertiaryText, props.showOverflowTooltip);\n var onInternalRenderOptionalText = onRenderText(props.optionalText, props.showOverflowTooltip);\n var hidePersonaDetails = props.hidePersonaDetails, _a = props.onRenderOptionalText, onRenderOptionalText = _a === void 0 ? onInternalRenderOptionalText : _a, _b = props.onRenderPrimaryText, onRenderPrimaryText = _b === void 0 ? onInternalRenderPrimaryText : _b, _c = props.onRenderSecondaryText, onRenderSecondaryText = _c === void 0 ? onInternalRenderSecondaryText : _c, _d = props.onRenderTertiaryText, onRenderTertiaryText = _d === void 0 ? onInternalRenderTertiaryText : _d, _e = props.onRenderPersonaCoin, onRenderPersonaCoin = _e === void 0 ? onInternalRenderPersonaCoin : _e;\n var size = props.size;\n // These properties are to be explicitly passed into PersonaCoin because they are the only props directly used\n var allowPhoneInitials = props.allowPhoneInitials, className = props.className, coinProps = props.coinProps, showUnknownPersonaCoin = props.showUnknownPersonaCoin, coinSize = props.coinSize, styles = props.styles, imageAlt = props.imageAlt, imageInitials = props.imageInitials, imageShouldFadeIn = props.imageShouldFadeIn, imageShouldStartVisible = props.imageShouldStartVisible, imageUrl = props.imageUrl, initialsColor = props.initialsColor, initialsTextColor = props.initialsTextColor, isOutOfOffice = props.isOutOfOffice, onPhotoLoadingStateChange = props.onPhotoLoadingStateChange, \n // eslint-disable-next-line deprecation/deprecation\n onRenderCoin = props.onRenderCoin, onRenderInitials = props.onRenderInitials, presence = props.presence, presenceTitle = props.presenceTitle, presenceColors = props.presenceColors, showInitialsUntilImageLoads = props.showInitialsUntilImageLoads, showSecondaryText = props.showSecondaryText, theme = props.theme;\n var personaCoinProps = __assign({ allowPhoneInitials: allowPhoneInitials, showUnknownPersonaCoin: showUnknownPersonaCoin, coinSize: coinSize, imageAlt: imageAlt, imageInitials: imageInitials, imageShouldFadeIn: imageShouldFadeIn, imageShouldStartVisible: imageShouldStartVisible, imageUrl: imageUrl, initialsColor: initialsColor, initialsTextColor: initialsTextColor, onPhotoLoadingStateChange: onPhotoLoadingStateChange, onRenderCoin: onRenderCoin, onRenderInitials: onRenderInitials, presence: presence, presenceTitle: presenceTitle, showInitialsUntilImageLoads: showInitialsUntilImageLoads, size: size, text: getText(), isOutOfOffice: isOutOfOffice, presenceColors: presenceColors }, coinProps);\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n showSecondaryText: showSecondaryText,\n presence: presence,\n size: size,\n });\n var divProps = getNativeProps(props, divProperties);\n var personaDetails = (React.createElement(\"div\", { className: classNames.details },\n renderElement(classNames.primaryText, onRenderPrimaryText, onInternalRenderPrimaryText),\n renderElement(classNames.secondaryText, onRenderSecondaryText, onInternalRenderSecondaryText),\n renderElement(classNames.tertiaryText, onRenderTertiaryText, onInternalRenderTertiaryText),\n renderElement(classNames.optionalText, onRenderOptionalText, onInternalRenderOptionalText),\n props.children));\n return (React.createElement(\"div\", __assign({}, divProps, { ref: mergedRootRef, className: classNames.root, style: coinSize ? { height: coinSize, minWidth: coinSize } : undefined }),\n onRenderPersonaCoin(personaCoinProps, onRenderPersonaCoin),\n /* eslint-disable deprecation/deprecation */\n (!hidePersonaDetails ||\n size === PersonaSize.size8 ||\n size === PersonaSize.size10 ||\n size === PersonaSize.tiny) &&\n personaDetails\n /* eslint-enable deprecation/deprecation */\n ));\n});\nPersonaBase.displayName = 'PersonaBase';\n//# sourceMappingURL=Persona.base.js.map","import { FontWeights, normalize, noWrap, getGlobalClassNames } from '../../Styling';\nimport { personaSize, presenceBoolean, sizeBoolean } from './PersonaConsts';\nvar GlobalClassNames = {\n root: 'ms-Persona',\n size8: 'ms-Persona--size8',\n size10: 'ms-Persona--size10',\n size16: 'ms-Persona--size16',\n size24: 'ms-Persona--size24',\n size28: 'ms-Persona--size28',\n size32: 'ms-Persona--size32',\n size40: 'ms-Persona--size40',\n size48: 'ms-Persona--size48',\n size56: 'ms-Persona--size56',\n size72: 'ms-Persona--size72',\n size100: 'ms-Persona--size100',\n size120: 'ms-Persona--size120',\n available: 'ms-Persona--online',\n away: 'ms-Persona--away',\n blocked: 'ms-Persona--blocked',\n busy: 'ms-Persona--busy',\n doNotDisturb: 'ms-Persona--donotdisturb',\n offline: 'ms-Persona--offline',\n details: 'ms-Persona-details',\n primaryText: 'ms-Persona-primaryText',\n secondaryText: 'ms-Persona-secondaryText',\n tertiaryText: 'ms-Persona-tertiaryText',\n optionalText: 'ms-Persona-optionalText',\n textContent: 'ms-Persona-textContent',\n};\nexport var getStyles = function (props) {\n var className = props.className, showSecondaryText = props.showSecondaryText, theme = props.theme;\n var semanticColors = theme.semanticColors, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var size = sizeBoolean(props.size);\n var presence = presenceBoolean(props.presence);\n var showSecondaryTextDefaultHeight = '16px';\n var sharedTextStyles = {\n color: semanticColors.bodySubtext,\n fontWeight: FontWeights.regular,\n fontSize: fonts.small.fontSize,\n };\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n normalize,\n {\n color: semanticColors.bodyText,\n position: 'relative',\n height: personaSize.size48,\n minWidth: personaSize.size48,\n display: 'flex',\n alignItems: 'center',\n selectors: {\n '.contextualHost': {\n display: 'none',\n },\n },\n },\n size.isSize8 && [\n classNames.size8,\n {\n height: personaSize.size8,\n minWidth: personaSize.size8,\n },\n ],\n // TODO: Deprecated size and needs to be removed in a future major release.\n size.isSize10 && [\n classNames.size10,\n {\n height: personaSize.size10,\n minWidth: personaSize.size10,\n },\n ],\n // TODO: Deprecated size and needs to be removed in a future major release.\n size.isSize16 && [\n classNames.size16,\n {\n height: personaSize.size16,\n minWidth: personaSize.size16,\n },\n ],\n size.isSize24 && [\n classNames.size24,\n {\n height: personaSize.size24,\n minWidth: personaSize.size24,\n },\n ],\n size.isSize24 &&\n showSecondaryText && {\n height: '36px',\n },\n // TODO: Deprecated size and needs to be removed in a future major release.\n size.isSize28 && [\n classNames.size28,\n {\n height: personaSize.size28,\n minWidth: personaSize.size28,\n },\n ],\n size.isSize28 &&\n showSecondaryText && {\n height: '32px',\n },\n size.isSize32 && [\n classNames.size32,\n {\n height: personaSize.size32,\n minWidth: personaSize.size32,\n },\n ],\n size.isSize40 && [\n classNames.size40,\n {\n height: personaSize.size40,\n minWidth: personaSize.size40,\n },\n ],\n size.isSize48 && classNames.size48,\n size.isSize56 && [\n classNames.size56,\n {\n height: personaSize.size56,\n minWidth: personaSize.size56,\n },\n ],\n size.isSize72 && [\n classNames.size72,\n {\n height: personaSize.size72,\n minWidth: personaSize.size72,\n },\n ],\n size.isSize100 && [\n classNames.size100,\n {\n height: personaSize.size100,\n minWidth: personaSize.size100,\n },\n ],\n size.isSize120 && [\n classNames.size120,\n {\n height: personaSize.size120,\n minWidth: personaSize.size120,\n },\n ],\n /**\n * Modifiers: presence\n */\n presence.isAvailable && classNames.available,\n presence.isAway && classNames.away,\n presence.isBlocked && classNames.blocked,\n presence.isBusy && classNames.busy,\n presence.isDoNotDisturb && classNames.doNotDisturb,\n presence.isOffline && classNames.offline,\n className,\n ],\n details: [\n classNames.details,\n {\n padding: '0 24px 0 16px',\n minWidth: 0,\n width: '100%',\n textAlign: 'left',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-around',\n },\n (size.isSize8 || size.isSize10) && {\n paddingLeft: 17, // increased padding because we don't render a coin at this size\n },\n (size.isSize24 || size.isSize28 || size.isSize32) && {\n padding: '0 8px',\n },\n (size.isSize40 || size.isSize48) && {\n padding: '0 12px',\n },\n ],\n primaryText: [\n classNames.primaryText,\n noWrap,\n {\n color: semanticColors.bodyText,\n fontWeight: FontWeights.regular,\n fontSize: fonts.medium.fontSize,\n selectors: {\n ':hover': {\n color: semanticColors.inputTextHovered,\n },\n },\n },\n showSecondaryText && {\n height: showSecondaryTextDefaultHeight,\n lineHeight: showSecondaryTextDefaultHeight,\n overflowX: 'hidden',\n },\n (size.isSize8 || size.isSize10) && {\n fontSize: fonts.small.fontSize,\n lineHeight: personaSize.size8,\n },\n size.isSize16 && {\n lineHeight: personaSize.size28,\n },\n (size.isSize24 || size.isSize28 || size.isSize32 || size.isSize40 || size.isSize48) &&\n showSecondaryText && {\n height: 18,\n },\n (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) && {\n fontSize: fonts.xLarge.fontSize,\n },\n (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) &&\n showSecondaryText && {\n height: 22,\n },\n ],\n secondaryText: [\n classNames.secondaryText,\n noWrap,\n sharedTextStyles,\n (size.isSize8 || size.isSize10 || size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32) && {\n display: 'none',\n },\n showSecondaryText && {\n display: 'block',\n height: showSecondaryTextDefaultHeight,\n lineHeight: showSecondaryTextDefaultHeight,\n overflowX: 'hidden',\n },\n size.isSize24 &&\n showSecondaryText && {\n height: 18,\n },\n (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) && {\n fontSize: fonts.medium.fontSize,\n },\n (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) &&\n showSecondaryText && {\n height: 18,\n },\n ],\n tertiaryText: [\n classNames.tertiaryText,\n noWrap,\n sharedTextStyles,\n {\n display: 'none',\n fontSize: fonts.medium.fontSize,\n },\n (size.isSize72 || size.isSize100 || size.isSize120) && {\n display: 'block',\n },\n ],\n optionalText: [\n classNames.optionalText,\n noWrap,\n sharedTextStyles,\n {\n display: 'none',\n fontSize: fonts.medium.fontSize,\n },\n (size.isSize100 || size.isSize120) && {\n display: 'block',\n },\n ],\n textContent: [classNames.textContent, noWrap],\n };\n};\n//# sourceMappingURL=Persona.styles.js.map","import { styled } from '../../Utilities';\nimport { PersonaBase } from './Persona.base';\nimport { getStyles } from './Persona.styles';\n/**\n * Personas are used for rendering an individual's avatar, presence and details.\n * They are used within the PeoplePicker components.\n */\nexport var Persona = styled(PersonaBase, getStyles, undefined, {\n scope: 'Persona',\n});\n//# sourceMappingURL=Persona.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Async, getDocument, getNativeProps, initializeComponentRef, inputProperties, isIE11, KeyCodes, } from '../../Utilities';\nimport { WindowContext } from '@fluentui/react-window-provider';\nvar SELECTION_FORWARD = 'forward';\nvar SELECTION_BACKWARD = 'backward';\n/**\n * {@docCategory Autofill}\n */\nvar Autofill = /** @class */ (function (_super) {\n __extends(Autofill, _super);\n function Autofill(props) {\n var _this = _super.call(this, props) || this;\n _this._inputElement = React.createRef();\n _this._autoFillEnabled = true;\n // Composition events are used when the character/text requires several keystrokes to be completed.\n // Some examples of this are mobile text input and languages like Japanese or Arabic.\n // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart\n _this._onCompositionStart = function (ev) {\n _this.setState({ isComposing: true });\n _this._autoFillEnabled = false;\n };\n // Composition events are used when the character/text requires several keystrokes to be completed.\n // Some examples of this are mobile text input and languages like Japanese or Arabic.\n // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart\n _this._onCompositionUpdate = function () {\n if (isIE11()) {\n _this._updateValue(_this._getCurrentInputValue(), true);\n }\n };\n // Composition events are used when the character/text requires several keystrokes to be completed.\n // Some examples of this are mobile text input and languages like Japanese or Arabic.\n // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart\n _this._onCompositionEnd = function (ev) {\n var inputValue = _this._getCurrentInputValue();\n _this._tryEnableAutofill(inputValue, _this.value, false, true);\n _this.setState({ isComposing: false });\n // Due to timing, this needs to be async, otherwise no text will be selected.\n _this._async.setTimeout(function () {\n // it's technically possible that the value of isComposing is reset during this timeout,\n // so explicitly trigger this with composing=true here, since it is supposed to be the\n // update for composition end\n _this._updateValue(_this._getCurrentInputValue(), false);\n }, 0);\n };\n _this._onClick = function () {\n if (_this.value && _this.value !== '' && _this._autoFillEnabled) {\n _this._autoFillEnabled = false;\n }\n };\n _this._onKeyDown = function (ev) {\n if (_this.props.onKeyDown) {\n _this.props.onKeyDown(ev);\n }\n // If the event is actively being composed, then don't alert autofill.\n // Right now typing does not have isComposing, once that has been fixed any should be removed.\n if (!ev.nativeEvent.isComposing) {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.backspace:\n _this._autoFillEnabled = false;\n break;\n case KeyCodes.left:\n case KeyCodes.right:\n if (_this._autoFillEnabled) {\n _this.setState(function (prev) { return ({\n inputValue: _this.props.suggestedDisplayValue || prev.inputValue,\n }); });\n _this._autoFillEnabled = false;\n }\n break;\n default:\n if (!_this._autoFillEnabled) {\n // eslint-disable-next-line deprecation/deprecation\n if (_this.props.enableAutofillOnKeyPress.indexOf(ev.which) !== -1) {\n _this._autoFillEnabled = true;\n }\n }\n break;\n }\n }\n };\n _this._onInputChanged = function (ev) {\n var value = _this._getCurrentInputValue(ev);\n if (!_this.state.isComposing) {\n _this._tryEnableAutofill(value, _this.value, ev.nativeEvent.isComposing);\n }\n // If it is not IE11 and currently composing, update the value\n if (!(isIE11() && _this.state.isComposing)) {\n var nativeEventComposing = ev.nativeEvent.isComposing;\n var isComposing = nativeEventComposing === undefined ? _this.state.isComposing : nativeEventComposing;\n _this._updateValue(value, isComposing);\n }\n };\n _this._onChanged = function () {\n // Swallow this event, we don't care about it\n // We must provide it because React PropTypes marks it as required, but onInput serves the correct purpose\n return;\n };\n /**\n * Updates the current input value as well as getting a new display value.\n * @param newValue - The new value from the input\n */\n _this._updateValue = function (newValue, composing) {\n // Only proceed if the value is nonempty and is different from the old value\n // This is to work around the fact that, in IE 11, inputs with a placeholder fire an onInput event on focus\n if (!newValue && newValue === _this.value) {\n return;\n }\n // eslint-disable-next-line deprecation/deprecation\n var _a = _this.props, onInputChange = _a.onInputChange, onInputValueChange = _a.onInputValueChange;\n if (onInputChange) {\n newValue = (onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(newValue, composing)) || '';\n }\n _this.setState({ inputValue: newValue }, function () { return onInputValueChange === null || onInputValueChange === void 0 ? void 0 : onInputValueChange(newValue, composing); });\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n _this.state = {\n inputValue: props.defaultVisibleValue || '',\n isComposing: false,\n };\n return _this;\n }\n Autofill.getDerivedStateFromProps = function (props, state) {\n // eslint-disable-next-line deprecation/deprecation\n if (props.updateValueInWillReceiveProps) {\n // eslint-disable-next-line deprecation/deprecation\n var updatedInputValue = props.updateValueInWillReceiveProps();\n // Don't update if we have a null value or the value isn't changing\n // the value should still update if an empty string is passed in\n if (updatedInputValue !== null && updatedInputValue !== state.inputValue && !state.isComposing) {\n return __assign(__assign({}, state), { inputValue: updatedInputValue });\n }\n }\n return null;\n };\n Object.defineProperty(Autofill.prototype, \"cursorLocation\", {\n get: function () {\n if (this._inputElement.current) {\n var inputElement = this._inputElement.current;\n if (inputElement.selectionDirection !== SELECTION_FORWARD) {\n return inputElement.selectionEnd;\n }\n else {\n return inputElement.selectionStart;\n }\n }\n else {\n return -1;\n }\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(Autofill.prototype, \"isValueSelected\", {\n get: function () {\n return Boolean(this.inputElement && this.inputElement.selectionStart !== this.inputElement.selectionEnd);\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(Autofill.prototype, \"value\", {\n get: function () {\n return this._getControlledValue() || this.state.inputValue || '';\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(Autofill.prototype, \"selectionStart\", {\n get: function () {\n return this._inputElement.current ? this._inputElement.current.selectionStart : -1;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(Autofill.prototype, \"selectionEnd\", {\n get: function () {\n return this._inputElement.current ? this._inputElement.current.selectionEnd : -1;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(Autofill.prototype, \"inputElement\", {\n get: function () {\n return this._inputElement.current;\n },\n enumerable: false,\n configurable: true\n });\n Autofill.prototype.componentDidUpdate = function (_, _1, cursor) {\n var _a;\n var _b = this.props, suggestedDisplayValue = _b.suggestedDisplayValue, shouldSelectFullInputValueInComponentDidUpdate = _b.shouldSelectFullInputValueInComponentDidUpdate, preventValueSelection = _b.preventValueSelection;\n var differenceIndex = 0;\n if (preventValueSelection) {\n return;\n }\n var document = ((_a = this.context) === null || _a === void 0 ? void 0 : _a.window.document) || getDocument(this._inputElement.current);\n var isFocused = this._inputElement.current && this._inputElement.current === (document === null || document === void 0 ? void 0 : document.activeElement);\n if (isFocused &&\n this._autoFillEnabled &&\n this.value &&\n suggestedDisplayValue &&\n _doesTextStartWith(suggestedDisplayValue, this.value)) {\n var shouldSelectFullRange = false;\n if (shouldSelectFullInputValueInComponentDidUpdate) {\n shouldSelectFullRange = shouldSelectFullInputValueInComponentDidUpdate();\n }\n if (shouldSelectFullRange) {\n this._inputElement.current.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD);\n }\n else {\n while (differenceIndex < this.value.length &&\n this.value[differenceIndex].toLocaleLowerCase() === suggestedDisplayValue[differenceIndex].toLocaleLowerCase()) {\n differenceIndex++;\n }\n if (differenceIndex > 0) {\n this._inputElement.current.setSelectionRange(differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD);\n }\n }\n }\n else if (this._inputElement.current) {\n if (cursor !== null && !this._autoFillEnabled && !this.state.isComposing) {\n this._inputElement.current.setSelectionRange(cursor.start, cursor.end, cursor.dir);\n }\n }\n };\n Autofill.prototype.componentWillUnmount = function () {\n this._async.dispose();\n };\n Autofill.prototype.render = function () {\n var nativeProps = getNativeProps(this.props, inputProperties);\n var style = __assign(__assign({}, this.props.style), { fontFamily: 'inherit' });\n return (React.createElement(\"input\", __assign({ autoCapitalize: \"off\", autoComplete: \"off\", \"aria-autocomplete\": 'both' }, nativeProps, { style: style, ref: this._inputElement, value: this._getDisplayValue(), onCompositionStart: this._onCompositionStart, onCompositionUpdate: this._onCompositionUpdate, onCompositionEnd: this._onCompositionEnd, \n // TODO (Fabric 8?) - switch to calling only onChange. See notes in TextField._onInputChange.\n onChange: this._onChanged, onInput: this._onInputChanged, onKeyDown: this._onKeyDown, onClick: this.props.onClick ? this.props.onClick : this._onClick, \"data-lpignore\": true })));\n };\n Autofill.prototype.focus = function () {\n this._inputElement.current && this._inputElement.current.focus();\n };\n Autofill.prototype.clear = function () {\n this._autoFillEnabled = true;\n this._updateValue('', false);\n this._inputElement.current && this._inputElement.current.setSelectionRange(0, 0);\n };\n Autofill.prototype.getSnapshotBeforeUpdate = function () {\n var _a, _b;\n var inel = this._inputElement.current;\n if (inel && inel.selectionStart !== this.value.length) {\n return {\n start: (_a = inel.selectionStart) !== null && _a !== void 0 ? _a : inel.value.length,\n end: (_b = inel.selectionEnd) !== null && _b !== void 0 ? _b : inel.value.length,\n dir: inel.selectionDirection || 'backward' || 'none',\n };\n }\n return null;\n };\n Autofill.prototype._getCurrentInputValue = function (ev) {\n if (ev && ev.target && ev.target.value) {\n return ev.target.value;\n }\n else if (this.inputElement && this.inputElement.value) {\n return this.inputElement.value;\n }\n else {\n return '';\n }\n };\n /**\n * Attempts to enable autofill. Whether or not autofill is enabled depends on the input value,\n * whether or not any text is selected, and only if the new input value is longer than the old input value.\n * Autofill should never be set to true if the value is composing. Once compositionEnd is called, then\n * it should be completed.\n * See https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent for more information on composition.\n * @param newValue - new input value\n * @param oldValue - old input value\n * @param isComposing - if true then the text is actively being composed and it has not completed.\n * @param isComposed - if the text is a composed text value.\n */\n Autofill.prototype._tryEnableAutofill = function (newValue, oldValue, isComposing, isComposed) {\n if (!isComposing &&\n newValue &&\n this._inputElement.current &&\n this._inputElement.current.selectionStart === newValue.length &&\n !this._autoFillEnabled &&\n (newValue.length > oldValue.length || isComposed)) {\n this._autoFillEnabled = true;\n }\n };\n Autofill.prototype._getDisplayValue = function () {\n if (this._autoFillEnabled) {\n return _getDisplayValue(this.value, this.props.suggestedDisplayValue);\n }\n return this.value;\n };\n Autofill.prototype._getControlledValue = function () {\n var value = this.props.value;\n if (value === undefined || typeof value === 'string') {\n return value;\n }\n // eslint-disable-next-line no-console\n console.warn(\"props.value of Autofill should be a string, but it is \".concat(value, \" with type of \").concat(typeof value));\n return value.toString();\n };\n Autofill.defaultProps = {\n enableAutofillOnKeyPress: [KeyCodes.down, KeyCodes.up],\n };\n // need to check WindowContext to get the provided document\n Autofill.contextType = WindowContext;\n return Autofill;\n}(React.Component));\nexport { Autofill };\n/**\n * Returns a string that should be used as the display value.\n * It evaluates this based on whether or not the suggested value starts with the input value\n * and whether or not autofill is enabled.\n * @param inputValue - the value that the input currently has.\n * @param suggestedDisplayValue - the possible full value\n */\nfunction _getDisplayValue(inputValue, suggestedDisplayValue) {\n var displayValue = inputValue;\n if (suggestedDisplayValue && inputValue && _doesTextStartWith(suggestedDisplayValue, displayValue)) {\n displayValue = suggestedDisplayValue;\n }\n return displayValue;\n}\nfunction _doesTextStartWith(text, startWith) {\n if (!text || !startWith) {\n return false;\n }\n if (process.env.NODE_ENV !== 'production') {\n for (var _i = 0, _a = [text, startWith]; _i < _a.length; _i++) {\n var val = _a[_i];\n if (typeof val !== 'string') {\n throw new Error(\"\".concat(Autofill.name\n // eslint-disable-next-line @fluentui/max-len\n , \" received non-string value \\\"\").concat(val, \"\\\" of type \").concat(typeof val, \" from either input's value or suggestedDisplayValue\"));\n }\n }\n }\n return text.toLocaleLowerCase().indexOf(startWith.toLocaleLowerCase()) === 0;\n}\n//# sourceMappingURL=Autofill.js.map","/**\n * {@docCategory FocusZone}\n */\nexport var FocusZoneTabbableElements = {\n /** Tabbing is not allowed */\n none: 0,\n /** All tabbing action is allowed */\n all: 1,\n /** Tabbing is allowed only on input elements */\n inputOnly: 2,\n};\n/**\n * {@docCategory FocusZone}\n */\nexport var FocusZoneDirection;\n(function (FocusZoneDirection) {\n /** Only react to up/down arrows. */\n FocusZoneDirection[FocusZoneDirection[\"vertical\"] = 0] = \"vertical\";\n /** Only react to left/right arrows. */\n FocusZoneDirection[FocusZoneDirection[\"horizontal\"] = 1] = \"horizontal\";\n /** React to all arrows. */\n FocusZoneDirection[FocusZoneDirection[\"bidirectional\"] = 2] = \"bidirectional\";\n /**\n * React to all arrows. Navigate next item in DOM on right/down arrow keys and previous - left/up arrow keys.\n * Right and Left arrow keys are swapped in RTL mode.\n */\n FocusZoneDirection[FocusZoneDirection[\"domOrder\"] = 3] = \"domOrder\";\n})(FocusZoneDirection || (FocusZoneDirection = {}));\n//# sourceMappingURL=FocusZone.types.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { FocusZoneDirection, FocusZoneTabbableElements } from './FocusZone.types';\nimport { KeyCodes, css, elementContains, getDocument, getElementIndexPath, getFocusableByIndexPath, getId, getNativeProps, getNextElement, getParent, getPreviousElement, getRTL, htmlElementProperties, initializeComponentRef, isElementFocusSubZone, isElementFocusZone, isElementTabbable, shouldWrapFocus, warnDeprecations, portalContainsElement, findScrollableParent, createMergedRef, isElementVisibleAndNotHidden, } from '@fluentui/utilities';\nimport { mergeStyles } from '@fluentui/merge-styles';\nimport { getTheme } from '@fluentui/style-utilities';\nvar IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';\nvar IS_ENTER_DISABLED_ATTRIBUTE = 'data-disable-click-on-enter';\nvar FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id';\nvar TABINDEX = 'tabindex';\nvar NO_VERTICAL_WRAP = 'data-no-vertical-wrap';\nvar NO_HORIZONTAL_WRAP = 'data-no-horizontal-wrap';\nvar LARGE_DISTANCE_FROM_CENTER = 999999999;\nvar LARGE_NEGATIVE_DISTANCE_FROM_CENTER = -999999999;\nvar focusZoneStyles;\nvar focusZoneClass = 'ms-FocusZone';\n/**\n * Raises a click on a target element based on a keyboard event.\n */\nfunction raiseClickFromKeyboardEvent(target, ev) {\n var event;\n if (typeof MouseEvent === 'function') {\n event = new MouseEvent('click', {\n ctrlKey: ev === null || ev === void 0 ? void 0 : ev.ctrlKey,\n metaKey: ev === null || ev === void 0 ? void 0 : ev.metaKey,\n shiftKey: ev === null || ev === void 0 ? void 0 : ev.shiftKey,\n altKey: ev === null || ev === void 0 ? void 0 : ev.altKey,\n bubbles: ev === null || ev === void 0 ? void 0 : ev.bubbles,\n cancelable: ev === null || ev === void 0 ? void 0 : ev.cancelable,\n });\n }\n else {\n event = document.createEvent('MouseEvents');\n // eslint-disable-next-line deprecation/deprecation\n event.initMouseEvent('click', ev ? ev.bubbles : false, ev ? ev.cancelable : false, window, // not using getWindow() since this can only be run client side\n 0, // detail\n 0, // screen x\n 0, // screen y\n 0, // client x\n 0, // client y\n ev ? ev.ctrlKey : false, ev ? ev.altKey : false, ev ? ev.shiftKey : false, ev ? ev.metaKey : false, 0, // button\n null);\n }\n target.dispatchEvent(event);\n}\n// Helper function that will return a class for when the root is focused\nfunction getRootClass() {\n if (!focusZoneStyles) {\n focusZoneStyles = mergeStyles({\n selectors: {\n ':focus': {\n outline: 'none',\n },\n },\n }, focusZoneClass);\n }\n return focusZoneStyles;\n}\nvar _allInstances = {};\nvar _outerZones = new Set();\nvar ALLOWED_INPUT_TYPES = ['text', 'number', 'password', 'email', 'tel', 'url', 'search', 'textarea'];\nvar ALLOW_VIRTUAL_ELEMENTS = false;\nvar FocusZone = /** @class */ (function (_super) {\n __extends(FocusZone, _super);\n function FocusZone(props) {\n var _this = this;\n var _a, _b, _c, _d;\n _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n _this._mergedRef = createMergedRef();\n _this._onFocus = function (ev) {\n if (_this._portalContainsElement(ev.target)) {\n // If the event target is inside a portal do not process the event.\n return;\n }\n var _a = _this.props, onActiveElementChanged = _a.onActiveElementChanged, \n // eslint-disable-next-line deprecation/deprecation\n doNotAllowFocusEventToPropagate = _a.doNotAllowFocusEventToPropagate, stopFocusPropagation = _a.stopFocusPropagation, \n // eslint-disable-next-line deprecation/deprecation\n onFocusNotification = _a.onFocusNotification, onFocus = _a.onFocus, shouldFocusInnerElementWhenReceivedFocus = _a.shouldFocusInnerElementWhenReceivedFocus, defaultTabbableElement = _a.defaultTabbableElement;\n var isImmediateDescendant = _this._isImmediateDescendantOfZone(ev.target);\n var newActiveElement;\n if (isImmediateDescendant) {\n newActiveElement = ev.target;\n }\n else {\n var parentElement = ev.target;\n while (parentElement && parentElement !== _this._root.current) {\n if (isElementTabbable(parentElement) && _this._isImmediateDescendantOfZone(parentElement)) {\n newActiveElement = parentElement;\n break;\n }\n parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS);\n }\n }\n // If an inner focusable element should be focused when FocusZone container receives focus\n if (shouldFocusInnerElementWhenReceivedFocus && ev.target === _this._root.current) {\n var maybeElementToFocus = defaultTabbableElement &&\n typeof defaultTabbableElement === 'function' &&\n _this._root.current &&\n defaultTabbableElement(_this._root.current);\n // try to focus defaultTabbable element\n if (maybeElementToFocus && isElementTabbable(maybeElementToFocus)) {\n newActiveElement = maybeElementToFocus;\n maybeElementToFocus.focus();\n }\n else {\n // force focus on first focusable element\n _this.focus(true);\n if (_this._activeElement) {\n // set to null as new active element was handled in method above\n newActiveElement = null;\n }\n }\n }\n var initialElementFocused = !_this._activeElement;\n // If the new active element is a child of this zone and received focus,\n // update alignment an immediate descendant\n if (newActiveElement && newActiveElement !== _this._activeElement) {\n if (isImmediateDescendant || initialElementFocused) {\n _this._setFocusAlignment(newActiveElement, true, true);\n }\n _this._activeElement = newActiveElement;\n if (initialElementFocused) {\n _this._updateTabIndexes();\n }\n }\n if (onActiveElementChanged) {\n onActiveElementChanged(_this._activeElement, ev);\n }\n if (stopFocusPropagation || doNotAllowFocusEventToPropagate) {\n ev.stopPropagation();\n }\n if (onFocus) {\n onFocus(ev);\n }\n else if (onFocusNotification) {\n onFocusNotification();\n }\n };\n _this._onBlur = function () {\n _this._setParkedFocus(false);\n };\n _this._onMouseDown = function (ev) {\n if (_this._portalContainsElement(ev.target)) {\n // If the event target is inside a portal do not process the event.\n return;\n }\n var disabled = _this.props.disabled;\n if (disabled) {\n return;\n }\n var target = ev.target;\n var path = [];\n while (target && target !== _this._root.current) {\n path.push(target);\n target = getParent(target, ALLOW_VIRTUAL_ELEMENTS);\n }\n while (path.length) {\n target = path.pop();\n if (target && isElementTabbable(target)) {\n _this._setActiveElement(target, true);\n }\n if (isElementFocusZone(target)) {\n // Stop here since the focus zone will take care of its own children.\n break;\n }\n }\n };\n /**\n * Handle the keystrokes.\n */\n _this._onKeyDown = function (ev, theme) {\n if (_this._portalContainsElement(ev.target)) {\n // If the event target is inside a portal do not process the event.\n return;\n }\n // eslint-disable-next-line deprecation/deprecation\n var _a = _this.props, direction = _a.direction, disabled = _a.disabled, isInnerZoneKeystroke = _a.isInnerZoneKeystroke, pagingSupportDisabled = _a.pagingSupportDisabled, shouldEnterInnerZone = _a.shouldEnterInnerZone;\n if (disabled) {\n return;\n }\n if (_this.props.onKeyDown) {\n _this.props.onKeyDown(ev);\n }\n // If the default has been prevented, do not process keyboard events.\n if (ev.isDefaultPrevented()) {\n return;\n }\n if (_this._getDocument().activeElement === _this._root.current && _this._isInnerZone) {\n // If this element has focus, it is being controlled by a parent.\n // Ignore the keystroke.\n return;\n }\n if (((shouldEnterInnerZone && shouldEnterInnerZone(ev)) || (isInnerZoneKeystroke && isInnerZoneKeystroke(ev))) &&\n _this._isImmediateDescendantOfZone(ev.target)) {\n // Try to focus\n var innerZone = _this._getFirstInnerZone();\n if (innerZone) {\n if (!innerZone.focus(true)) {\n return;\n }\n }\n else if (isElementFocusSubZone(ev.target)) {\n if (!_this.focusElement(getNextElement(ev.target, ev.target.firstChild, true))) {\n return;\n }\n }\n else {\n return;\n }\n }\n else if (ev.altKey) {\n return;\n }\n else {\n // eslint-disable-next-line @fluentui/deprecated-keyboard-event-props, deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.space:\n if (_this._shouldRaiseClicksOnSpace && _this._tryInvokeClickForFocusable(ev.target, ev)) {\n break;\n }\n return;\n case KeyCodes.left:\n if (direction !== FocusZoneDirection.vertical) {\n _this._preventDefaultWhenHandled(ev);\n if (_this._moveFocusLeft(theme)) {\n break;\n }\n }\n return;\n case KeyCodes.right:\n if (direction !== FocusZoneDirection.vertical) {\n _this._preventDefaultWhenHandled(ev);\n if (_this._moveFocusRight(theme)) {\n break;\n }\n }\n return;\n case KeyCodes.up:\n if (direction !== FocusZoneDirection.horizontal) {\n _this._preventDefaultWhenHandled(ev);\n if (_this._moveFocusUp()) {\n break;\n }\n }\n return;\n case KeyCodes.down:\n if (direction !== FocusZoneDirection.horizontal) {\n _this._preventDefaultWhenHandled(ev);\n if (_this._moveFocusDown()) {\n break;\n }\n }\n return;\n case KeyCodes.pageDown:\n if (!pagingSupportDisabled && _this._moveFocusPaging(true)) {\n break;\n }\n return;\n case KeyCodes.pageUp:\n if (!pagingSupportDisabled && _this._moveFocusPaging(false)) {\n break;\n }\n return;\n case KeyCodes.tab:\n if (\n // eslint-disable-next-line deprecation/deprecation\n _this.props.allowTabKey ||\n _this.props.handleTabKey === FocusZoneTabbableElements.all ||\n (_this.props.handleTabKey === FocusZoneTabbableElements.inputOnly &&\n _this._isElementInput(ev.target))) {\n var focusChanged = false;\n _this._processingTabKey = true;\n if (direction === FocusZoneDirection.vertical ||\n !_this._shouldWrapFocus(_this._activeElement, NO_HORIZONTAL_WRAP)) {\n focusChanged = ev.shiftKey ? _this._moveFocusUp() : _this._moveFocusDown();\n }\n else {\n var tabWithDirection = getRTL(theme) ? !ev.shiftKey : ev.shiftKey;\n focusChanged = tabWithDirection ? _this._moveFocusLeft(theme) : _this._moveFocusRight(theme);\n }\n _this._processingTabKey = false;\n if (focusChanged) {\n break;\n }\n else if (_this.props.shouldResetActiveElementWhenTabFromZone) {\n _this._activeElement = null;\n }\n }\n return;\n case KeyCodes.home:\n if (_this._isContentEditableElement(ev.target) ||\n (_this._isElementInput(ev.target) &&\n !_this._shouldInputLoseFocus(ev.target, false))) {\n return false;\n }\n var firstChild = _this._root.current && _this._root.current.firstChild;\n if (_this._root.current &&\n firstChild &&\n _this.focusElement(getNextElement(_this._root.current, firstChild, true))) {\n break;\n }\n return;\n case KeyCodes.end:\n if (_this._isContentEditableElement(ev.target) ||\n (_this._isElementInput(ev.target) &&\n !_this._shouldInputLoseFocus(ev.target, true))) {\n return false;\n }\n var lastChild = _this._root.current && _this._root.current.lastChild;\n if (_this._root.current &&\n _this.focusElement(getPreviousElement(_this._root.current, lastChild, true, true, true))) {\n break;\n }\n return;\n case KeyCodes.enter:\n if (_this._shouldRaiseClicksOnEnter && _this._tryInvokeClickForFocusable(ev.target, ev)) {\n break;\n }\n return;\n default:\n return;\n }\n }\n ev.preventDefault();\n ev.stopPropagation();\n };\n _this._getHorizontalDistanceFromCenter = function (isForward, \n // eslint-disable-next-line deprecation/deprecation\n activeRect, \n // eslint-disable-next-line deprecation/deprecation\n targetRect) {\n // eslint-disable-next-line deprecation/deprecation\n var leftAlignment = _this._focusAlignment.left || _this._focusAlignment.x || 0;\n // ClientRect values can be floats that differ by very small fractions of a decimal.\n // If the difference between top and bottom are within a pixel then we should treat\n // them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,\n // but without Math.Floor they will be handled incorrectly.\n var targetRectTop = Math.floor(targetRect.top);\n var activeRectBottom = Math.floor(activeRect.bottom);\n var targetRectBottom = Math.floor(targetRect.bottom);\n var activeRectTop = Math.floor(activeRect.top);\n var isValidCandidateOnpagingDown = isForward && targetRectTop > activeRectBottom;\n var isValidCandidateOnpagingUp = !isForward && targetRectBottom < activeRectTop;\n if (isValidCandidateOnpagingDown || isValidCandidateOnpagingUp) {\n if (leftAlignment >= targetRect.left && leftAlignment <= targetRect.left + targetRect.width) {\n return 0;\n }\n return Math.abs(targetRect.left + targetRect.width / 2 - leftAlignment);\n }\n if (!_this._shouldWrapFocus(_this._activeElement, NO_VERTICAL_WRAP)) {\n return LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return LARGE_DISTANCE_FROM_CENTER;\n };\n // Manage componentRef resolution.\n initializeComponentRef(_this);\n if (process.env.NODE_ENV !== 'production') {\n warnDeprecations('FocusZone', props, {\n rootProps: undefined,\n allowTabKey: 'handleTabKey',\n elementType: 'as',\n ariaDescribedBy: 'aria-describedby',\n ariaLabelledBy: 'aria-labelledby',\n });\n }\n _this._id = getId('FocusZone');\n _this._focusAlignment = {\n left: 0,\n top: 0,\n };\n _this._processingTabKey = false;\n var shouldRaiseClicksFallback = (_b = (_a = props.shouldRaiseClicks) !== null && _a !== void 0 ? _a : FocusZone.defaultProps.shouldRaiseClicks) !== null && _b !== void 0 ? _b : true;\n _this._shouldRaiseClicksOnEnter = (_c = props.shouldRaiseClicksOnEnter) !== null && _c !== void 0 ? _c : shouldRaiseClicksFallback;\n _this._shouldRaiseClicksOnSpace = (_d = props.shouldRaiseClicksOnSpace) !== null && _d !== void 0 ? _d : shouldRaiseClicksFallback;\n return _this;\n }\n /** Used for testing purposes only. */\n FocusZone.getOuterZones = function () {\n return _outerZones.size;\n };\n /**\n * Handle global tab presses so that we can patch tabindexes on the fly.\n * HEADS UP: This must not be an arrow function in order to be referentially equal among instances\n * for ref counting to work correctly!\n */\n FocusZone._onKeyDownCapture = function (ev) {\n // eslint-disable-next-line deprecation/deprecation, @fluentui/deprecated-keyboard-event-props\n if (ev.which === KeyCodes.tab) {\n _outerZones.forEach(function (zone) { return zone._updateTabIndexes(); });\n }\n };\n FocusZone.prototype.componentDidMount = function () {\n var root = this._root.current;\n _allInstances[this._id] = this;\n if (root) {\n var parentElement = getParent(root, ALLOW_VIRTUAL_ELEMENTS);\n while (parentElement && parentElement !== this._getDocument().body && parentElement.nodeType === 1) {\n if (isElementFocusZone(parentElement)) {\n this._isInnerZone = true;\n break;\n }\n parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS);\n }\n if (!this._isInnerZone) {\n _outerZones.add(this);\n this._root.current && this._root.current.addEventListener('keydown', FocusZone._onKeyDownCapture, true);\n }\n this._root.current && this._root.current.addEventListener('blur', this._onBlur, true);\n // Assign initial tab indexes so that we can set initial focus as appropriate.\n this._updateTabIndexes();\n if (this.props.defaultTabbableElement && typeof this.props.defaultTabbableElement === 'string') {\n this._activeElement = this._getDocument().querySelector(this.props.defaultTabbableElement);\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (this.props.defaultActiveElement) {\n // eslint-disable-next-line deprecation/deprecation\n this._activeElement = this._getDocument().querySelector(this.props.defaultActiveElement);\n }\n if (this.props.shouldFocusOnMount) {\n this.focus();\n }\n }\n };\n FocusZone.prototype.componentDidUpdate = function () {\n var root = this._root.current;\n var doc = this._getDocument();\n // If either _activeElement or _defaultFocusElement are no longer contained by _root,\n // reset those variables (and update tab indexes) to avoid memory leaks\n if ((this._activeElement && !elementContains(this._root.current, this._activeElement, ALLOW_VIRTUAL_ELEMENTS)) ||\n (this._defaultFocusElement &&\n !elementContains(this._root.current, this._defaultFocusElement, ALLOW_VIRTUAL_ELEMENTS))) {\n this._activeElement = null;\n this._defaultFocusElement = null;\n this._updateTabIndexes();\n }\n if (!this.props.preventFocusRestoration &&\n doc &&\n this._lastIndexPath &&\n (doc.activeElement === doc.body || doc.activeElement === null || doc.activeElement === root)) {\n // The element has been removed after the render, attempt to restore focus.\n var elementToFocus = getFocusableByIndexPath(root, this._lastIndexPath);\n if (elementToFocus) {\n this._setActiveElement(elementToFocus, true);\n elementToFocus.focus();\n this._setParkedFocus(false);\n }\n else {\n // We had a focus path to restore, but now that path is unresolvable. Park focus\n // on the container until we can try again.\n this._setParkedFocus(true);\n }\n }\n };\n FocusZone.prototype.componentWillUnmount = function () {\n delete _allInstances[this._id];\n if (!this._isInnerZone) {\n _outerZones.delete(this);\n this._root.current && this._root.current.removeEventListener('keydown', FocusZone._onKeyDownCapture, true);\n }\n if (this._root.current) {\n this._root.current.removeEventListener('blur', this._onBlur, true);\n }\n this._activeElement = null;\n this._defaultFocusElement = null;\n };\n FocusZone.prototype.render = function () {\n var _this = this;\n // eslint-disable-next-line deprecation/deprecation\n var _a = this.props, tag = _a.as, elementType = _a.elementType, rootProps = _a.rootProps, ariaDescribedBy = _a.ariaDescribedBy, ariaLabelledBy = _a.ariaLabelledBy, className = _a.className;\n var divProps = getNativeProps(this.props, htmlElementProperties);\n var Tag = tag || elementType || 'div';\n // Note, right before rendering/reconciling proceeds, we need to record if focus\n // was in the zone before the update. This helper will track this and, if focus\n // was actually in the zone, what the index path to the element is at this time.\n // Then, later in componentDidUpdate, we can evaluate if we need to restore it in\n // the case the element was removed.\n this._evaluateFocusBeforeRender();\n // Only support RTL defined in global theme, not contextual theme/RTL.\n var theme = getTheme();\n return (React.createElement(Tag, __assign({ \"aria-labelledby\": ariaLabelledBy, \"aria-describedby\": ariaDescribedBy }, divProps, rootProps, { \n // Once the getClassName correctly memoizes inputs this should\n // be replaced so that className is passed to getRootClass and is included there so\n // the class names will always be in the same order.\n className: css(getRootClass(), className), \n // eslint-disable-next-line deprecation/deprecation\n ref: this._mergedRef(this.props.elementRef, this._root), \"data-focuszone-id\": this._id, \n // eslint-disable-next-line react/jsx-no-bind\n onKeyDown: function (ev) { return _this._onKeyDown(ev, theme); }, onFocus: this._onFocus, onMouseDownCapture: this._onMouseDown }), this.props.children));\n };\n /**\n * Sets focus to the first tabbable item in the zone.\n * @param forceIntoFirstElement - If true, focus will be forced into the first element, even\n * if focus is already in the focus zone.\n * @param bypassHiddenElements - If true, focus will be not be set on hidden elements.\n * @returns True if focus could be set to an active element, false if no operation was taken.\n */\n FocusZone.prototype.focus = function (forceIntoFirstElement, bypassHiddenElements) {\n if (forceIntoFirstElement === void 0) { forceIntoFirstElement = false; }\n if (bypassHiddenElements === void 0) { bypassHiddenElements = false; }\n if (this._root.current) {\n if (!forceIntoFirstElement &&\n this._root.current.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' &&\n this._isInnerZone) {\n var ownerZoneElement = this._getOwnerZone(this._root.current);\n if (ownerZoneElement !== this._root.current) {\n var ownerZone = _allInstances[ownerZoneElement.getAttribute(FOCUSZONE_ID_ATTRIBUTE)];\n return !!ownerZone && ownerZone.focusElement(this._root.current);\n }\n return false;\n }\n else if (!forceIntoFirstElement &&\n this._activeElement &&\n elementContains(this._root.current, this._activeElement) &&\n isElementTabbable(this._activeElement) &&\n (!bypassHiddenElements || isElementVisibleAndNotHidden(this._activeElement))) {\n this._activeElement.focus();\n return true;\n }\n else {\n var firstChild = this._root.current.firstChild;\n return this.focusElement(getNextElement(this._root.current, firstChild, true, undefined, undefined, undefined, undefined, undefined, bypassHiddenElements));\n }\n }\n return false;\n };\n /**\n * Sets focus to the last tabbable item in the zone.\n * @returns True if focus could be set to an active element, false if no operation was taken.\n */\n FocusZone.prototype.focusLast = function () {\n if (this._root.current) {\n var lastChild = this._root.current && this._root.current.lastChild;\n return this.focusElement(getPreviousElement(this._root.current, lastChild, true, true, true));\n }\n return false;\n };\n /**\n * Sets focus to a specific child element within the zone. This can be used in conjunction with\n * shouldReceiveFocus to create delayed focus scenarios (like animate the scroll position to the correct\n * location and then focus.)\n * @param element - The child element within the zone to focus.\n * @param forceAlignment - If true, focus alignment will be set according to the element provided.\n * @returns True if focus could be set to an active element, false if no operation was taken.\n */\n FocusZone.prototype.focusElement = function (element, forceAlignment) {\n // eslint-disable-next-line deprecation/deprecation\n var _a = this.props, onBeforeFocus = _a.onBeforeFocus, shouldReceiveFocus = _a.shouldReceiveFocus;\n if ((shouldReceiveFocus && !shouldReceiveFocus(element)) || (onBeforeFocus && !onBeforeFocus(element))) {\n return false;\n }\n if (element) {\n // when we set focus to a specific child, we should recalculate the alignment depending on its position.\n this._setActiveElement(element, forceAlignment);\n if (this._activeElement) {\n this._activeElement.focus();\n }\n return true;\n }\n return false;\n };\n /**\n * Forces horizontal alignment in the context of vertical arrowing to use specific point as the reference,\n * rather than a center based on the last horizontal motion.\n * @param point - the new reference point.\n */\n FocusZone.prototype.setFocusAlignment = function (point) {\n this._focusAlignment = point;\n };\n Object.defineProperty(FocusZone.prototype, \"defaultFocusElement\", {\n get: function () {\n return this._defaultFocusElement;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(FocusZone.prototype, \"activeElement\", {\n get: function () {\n return this._activeElement;\n },\n enumerable: false,\n configurable: true\n });\n FocusZone.prototype._evaluateFocusBeforeRender = function () {\n var root = this._root.current;\n var doc = this._getDocument();\n if (doc) {\n var focusedElement = doc.activeElement;\n // Only update the index path if we are not parked on the root.\n if (focusedElement !== root) {\n var shouldRestoreFocus = elementContains(root, focusedElement, false);\n this._lastIndexPath = shouldRestoreFocus ? getElementIndexPath(root, focusedElement) : undefined;\n }\n }\n };\n /**\n * When focus is in the zone at render time but then all focusable elements are removed,\n * we \"park\" focus temporarily on the root. Once we update with focusable children, we restore\n * focus to the closest path from previous. If the user tabs away from the parked container,\n * we restore focusability to the pre-parked state.\n */\n FocusZone.prototype._setParkedFocus = function (isParked) {\n var root = this._root.current;\n if (root && this._isParked !== isParked) {\n this._isParked = isParked;\n if (isParked) {\n if (!this.props.allowFocusRoot) {\n this._parkedTabIndex = root.getAttribute('tabindex');\n root.setAttribute('tabindex', '-1');\n }\n root.focus();\n }\n else if (!this.props.allowFocusRoot) {\n if (this._parkedTabIndex) {\n root.setAttribute('tabindex', this._parkedTabIndex);\n this._parkedTabIndex = undefined;\n }\n else {\n root.removeAttribute('tabindex');\n }\n }\n }\n };\n FocusZone.prototype._setActiveElement = function (element, forceAlignment) {\n var previousActiveElement = this._activeElement;\n this._activeElement = element;\n if (previousActiveElement) {\n if (isElementFocusZone(previousActiveElement)) {\n this._updateTabIndexes(previousActiveElement);\n }\n previousActiveElement.tabIndex = -1;\n }\n if (this._activeElement) {\n if (!this._focusAlignment || forceAlignment) {\n this._setFocusAlignment(element, true, true);\n }\n this._activeElement.tabIndex = 0;\n }\n };\n FocusZone.prototype._preventDefaultWhenHandled = function (ev) {\n this.props.preventDefaultWhenHandled && ev.preventDefault();\n };\n /**\n * Walk up the dom try to find a focusable element.\n */\n FocusZone.prototype._tryInvokeClickForFocusable = function (targetElement, ev) {\n var target = targetElement;\n if (target === this._root.current) {\n return false;\n }\n do {\n if (target.tagName === 'BUTTON' ||\n target.tagName === 'A' ||\n target.tagName === 'INPUT' ||\n target.tagName === 'TEXTAREA' ||\n target.tagName === 'SUMMARY') {\n return false;\n }\n if (this._isImmediateDescendantOfZone(target) &&\n target.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' &&\n target.getAttribute(IS_ENTER_DISABLED_ATTRIBUTE) !== 'true') {\n raiseClickFromKeyboardEvent(target, ev);\n return true;\n }\n target = getParent(target, ALLOW_VIRTUAL_ELEMENTS);\n } while (target !== this._root.current);\n return false;\n };\n /**\n * Traverse to find first child zone.\n */\n FocusZone.prototype._getFirstInnerZone = function (rootElement) {\n rootElement = rootElement || this._activeElement || this._root.current;\n if (!rootElement) {\n return null;\n }\n if (isElementFocusZone(rootElement)) {\n return _allInstances[rootElement.getAttribute(FOCUSZONE_ID_ATTRIBUTE)];\n }\n var child = rootElement.firstElementChild;\n while (child) {\n if (isElementFocusZone(child)) {\n return _allInstances[child.getAttribute(FOCUSZONE_ID_ATTRIBUTE)];\n }\n var match = this._getFirstInnerZone(child);\n if (match) {\n return match;\n }\n child = child.nextElementSibling;\n }\n return null;\n };\n FocusZone.prototype._moveFocus = function (isForward, \n // eslint-disable-next-line deprecation/deprecation\n getDistanceFromCenter, ev, useDefaultWrap) {\n if (useDefaultWrap === void 0) { useDefaultWrap = true; }\n var element = this._activeElement;\n var candidateDistance = -1;\n var candidateElement = undefined;\n var changedFocus = false;\n var isBidirectional = this.props.direction === FocusZoneDirection.bidirectional;\n if (!element || !this._root.current) {\n return false;\n }\n if (this._isElementInput(element)) {\n if (!this._shouldInputLoseFocus(element, isForward)) {\n return false;\n }\n }\n var activeRect = isBidirectional ? element.getBoundingClientRect() : null;\n do {\n element = (isForward ? getNextElement(this._root.current, element) : getPreviousElement(this._root.current, element));\n if (isBidirectional) {\n if (element) {\n var targetRect = element.getBoundingClientRect();\n // eslint-disable-next-line deprecation/deprecation\n var elementDistance = getDistanceFromCenter(activeRect, targetRect);\n if (elementDistance === -1 && candidateDistance === -1) {\n candidateElement = element;\n break;\n }\n if (elementDistance > -1 && (candidateDistance === -1 || elementDistance < candidateDistance)) {\n candidateDistance = elementDistance;\n candidateElement = element;\n }\n if (candidateDistance >= 0 && elementDistance < 0) {\n break;\n }\n }\n }\n else {\n candidateElement = element;\n break;\n }\n } while (element);\n // Focus the closest candidate\n if (candidateElement && candidateElement !== this._activeElement) {\n changedFocus = true;\n this.focusElement(candidateElement);\n }\n else if (this.props.isCircularNavigation && useDefaultWrap) {\n if (isForward) {\n return this.focusElement(getNextElement(this._root.current, this._root.current.firstElementChild, true));\n }\n else {\n return this.focusElement(getPreviousElement(this._root.current, this._root.current.lastElementChild, true, true, true));\n }\n }\n return changedFocus;\n };\n FocusZone.prototype._moveFocusDown = function () {\n var _this = this;\n var targetTop = -1;\n // eslint-disable-next-line deprecation/deprecation\n var leftAlignment = this._focusAlignment.left || this._focusAlignment.x || 0;\n if (\n // eslint-disable-next-line deprecation/deprecation\n this._moveFocus(true, function (activeRect, targetRect) {\n var distance = -1;\n // ClientRect values can be floats that differ by very small fractions of a decimal.\n // If the difference between top and bottom are within a pixel then we should treat\n // them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,\n // but without Math.Floor they will be handled incorrectly.\n var targetRectTop = Math.floor(targetRect.top);\n var activeRectBottom = Math.floor(activeRect.bottom);\n if (targetRectTop < activeRectBottom) {\n if (!_this._shouldWrapFocus(_this._activeElement, NO_VERTICAL_WRAP)) {\n return LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return LARGE_DISTANCE_FROM_CENTER;\n }\n if ((targetTop === -1 && targetRectTop >= activeRectBottom) || targetRectTop === targetTop) {\n targetTop = targetRectTop;\n if (leftAlignment >= targetRect.left && leftAlignment <= targetRect.left + targetRect.width) {\n distance = 0;\n }\n else {\n distance = Math.abs(targetRect.left + targetRect.width / 2 - leftAlignment);\n }\n }\n return distance;\n })) {\n this._setFocusAlignment(this._activeElement, false, true);\n return true;\n }\n return false;\n };\n FocusZone.prototype._moveFocusUp = function () {\n var _this = this;\n var targetTop = -1;\n // eslint-disable-next-line deprecation/deprecation\n var leftAlignment = this._focusAlignment.left || this._focusAlignment.x || 0;\n if (\n // eslint-disable-next-line deprecation/deprecation\n this._moveFocus(false, function (activeRect, targetRect) {\n var distance = -1;\n // ClientRect values can be floats that differ by very small fractions of a decimal.\n // If the difference between top and bottom are within a pixel then we should treat\n // them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,\n // but without Math.Floor they will be handled incorrectly.\n var targetRectBottom = Math.floor(targetRect.bottom);\n var targetRectTop = Math.floor(targetRect.top);\n var activeRectTop = Math.floor(activeRect.top);\n if (targetRectBottom > activeRectTop) {\n if (!_this._shouldWrapFocus(_this._activeElement, NO_VERTICAL_WRAP)) {\n return LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return LARGE_DISTANCE_FROM_CENTER;\n }\n if ((targetTop === -1 && targetRectBottom <= activeRectTop) || targetRectTop === targetTop) {\n targetTop = targetRectTop;\n if (leftAlignment >= targetRect.left && leftAlignment <= targetRect.left + targetRect.width) {\n distance = 0;\n }\n else {\n distance = Math.abs(targetRect.left + targetRect.width / 2 - leftAlignment);\n }\n }\n return distance;\n })) {\n this._setFocusAlignment(this._activeElement, false, true);\n return true;\n }\n return false;\n };\n FocusZone.prototype._moveFocusLeft = function (theme) {\n var _this = this;\n var shouldWrap = this._shouldWrapFocus(this._activeElement, NO_HORIZONTAL_WRAP);\n if (this._moveFocus(getRTL(theme), \n // eslint-disable-next-line deprecation/deprecation\n function (activeRect, targetRect) {\n var distance = -1;\n var topBottomComparison;\n if (getRTL(theme)) {\n // When in RTL, this comparison should be the same as the one in _moveFocusRight for LTR.\n // Going left at a leftmost rectangle will go down a line instead of up a line like in LTR.\n // This is important, because we want to be comparing the top of the target rect\n // with the bottom of the active rect.\n topBottomComparison = parseFloat(targetRect.top.toFixed(3)) < parseFloat(activeRect.bottom.toFixed(3));\n }\n else {\n topBottomComparison = parseFloat(targetRect.bottom.toFixed(3)) > parseFloat(activeRect.top.toFixed(3));\n }\n if (topBottomComparison &&\n targetRect.right <= activeRect.right &&\n _this.props.direction !== FocusZoneDirection.vertical) {\n distance = activeRect.right - targetRect.right;\n }\n else if (!shouldWrap) {\n distance = LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return distance;\n }, undefined /*ev*/, shouldWrap)) {\n this._setFocusAlignment(this._activeElement, true, false);\n return true;\n }\n return false;\n };\n FocusZone.prototype._moveFocusRight = function (theme) {\n var _this = this;\n var shouldWrap = this._shouldWrapFocus(this._activeElement, NO_HORIZONTAL_WRAP);\n if (this._moveFocus(!getRTL(theme), \n // eslint-disable-next-line deprecation/deprecation\n function (activeRect, targetRect) {\n var distance = -1;\n var topBottomComparison;\n if (getRTL(theme)) {\n // When in RTL, this comparison should be the same as the one in _moveFocusLeft for LTR.\n // Going right at a rightmost rectangle will go up a line instead of down a line like in LTR.\n // This is important, because we want to be comparing the bottom of the target rect\n // with the top of the active rect.\n topBottomComparison = parseFloat(targetRect.bottom.toFixed(3)) > parseFloat(activeRect.top.toFixed(3));\n }\n else {\n topBottomComparison = parseFloat(targetRect.top.toFixed(3)) < parseFloat(activeRect.bottom.toFixed(3));\n }\n if (topBottomComparison &&\n targetRect.left >= activeRect.left &&\n _this.props.direction !== FocusZoneDirection.vertical) {\n distance = targetRect.left - activeRect.left;\n }\n else if (!shouldWrap) {\n distance = LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return distance;\n }, undefined /*ev*/, shouldWrap)) {\n this._setFocusAlignment(this._activeElement, true, false);\n return true;\n }\n return false;\n };\n FocusZone.prototype._moveFocusPaging = function (isForward, useDefaultWrap) {\n if (useDefaultWrap === void 0) { useDefaultWrap = true; }\n var element = this._activeElement;\n if (!element || !this._root.current) {\n return false;\n }\n if (this._isElementInput(element)) {\n if (!this._shouldInputLoseFocus(element, isForward)) {\n return false;\n }\n }\n var scrollableParent = findScrollableParent(element);\n if (!scrollableParent) {\n return false;\n }\n var candidateDistance = -1;\n var candidateElement = undefined;\n var targetTop = -1;\n var targetBottom = -1;\n var pagesize = scrollableParent.clientHeight;\n var activeRect = element.getBoundingClientRect();\n do {\n element = isForward\n ? getNextElement(this._root.current, element)\n : getPreviousElement(this._root.current, element);\n if (element) {\n var targetRect = element.getBoundingClientRect();\n var targetRectTop = Math.floor(targetRect.top);\n var activeRectBottom = Math.floor(activeRect.bottom);\n var targetRectBottom = Math.floor(targetRect.bottom);\n var activeRectTop = Math.floor(activeRect.top);\n var elementDistance = this._getHorizontalDistanceFromCenter(isForward, activeRect, targetRect);\n var isElementPassedPageSizeOnPagingDown = isForward && targetRectTop > activeRectBottom + pagesize;\n var isElementPassedPageSizeOnPagingUp = !isForward && targetRectBottom < activeRectTop - pagesize;\n if (isElementPassedPageSizeOnPagingDown || isElementPassedPageSizeOnPagingUp) {\n break;\n }\n if (elementDistance > -1) {\n // for paging down\n if (isForward && targetRectTop > targetTop) {\n targetTop = targetRectTop;\n candidateDistance = elementDistance;\n candidateElement = element;\n }\n else if (!isForward && targetRectBottom < targetBottom) {\n // for paging up\n targetBottom = targetRectBottom;\n candidateDistance = elementDistance;\n candidateElement = element;\n }\n else if (candidateDistance === -1 || elementDistance <= candidateDistance) {\n candidateDistance = elementDistance;\n candidateElement = element;\n }\n }\n }\n } while (element);\n var changedFocus = false;\n // Focus the closest candidate\n if (candidateElement && candidateElement !== this._activeElement) {\n changedFocus = true;\n this.focusElement(candidateElement);\n this._setFocusAlignment(candidateElement, false, true);\n }\n else if (this.props.isCircularNavigation && useDefaultWrap) {\n if (isForward) {\n return this.focusElement(getNextElement(this._root.current, this._root.current.firstElementChild, true));\n }\n return this.focusElement(getPreviousElement(this._root.current, this._root.current.lastElementChild, true, true, true));\n }\n return changedFocus;\n };\n FocusZone.prototype._setFocusAlignment = function (element, isHorizontal, isVertical) {\n if (this.props.direction === FocusZoneDirection.bidirectional &&\n (!this._focusAlignment || isHorizontal || isVertical)) {\n var rect = element.getBoundingClientRect();\n var left = rect.left + rect.width / 2;\n var top_1 = rect.top + rect.height / 2;\n if (!this._focusAlignment) {\n this._focusAlignment = { left: left, top: top_1 };\n }\n if (isHorizontal) {\n this._focusAlignment.left = left;\n }\n if (isVertical) {\n this._focusAlignment.top = top_1;\n }\n }\n };\n FocusZone.prototype._isImmediateDescendantOfZone = function (element) {\n return this._getOwnerZone(element) === this._root.current;\n };\n FocusZone.prototype._getOwnerZone = function (element) {\n var parentElement = getParent(element, ALLOW_VIRTUAL_ELEMENTS);\n while (parentElement && parentElement !== this._root.current && parentElement !== this._getDocument().body) {\n if (isElementFocusZone(parentElement)) {\n return parentElement;\n }\n parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS);\n }\n return parentElement;\n };\n FocusZone.prototype._updateTabIndexes = function (element) {\n if (!this._activeElement &&\n this.props.defaultTabbableElement &&\n typeof this.props.defaultTabbableElement === 'function') {\n this._activeElement = this.props.defaultTabbableElement(this._root.current);\n }\n if (!element && this._root.current) {\n this._defaultFocusElement = null;\n element = this._root.current;\n if (this._activeElement && !elementContains(element, this._activeElement)) {\n this._activeElement = null;\n }\n }\n // If active element changes state to disabled, set it to null.\n // Otherwise, we lose keyboard accessibility to other elements in focus zone.\n if (this._activeElement && !isElementTabbable(this._activeElement)) {\n this._activeElement = null;\n }\n var childNodes = element && element.children;\n for (var childIndex = 0; childNodes && childIndex < childNodes.length; childIndex++) {\n var child = childNodes[childIndex];\n if (!isElementFocusZone(child)) {\n // If the item is explicitly set to not be focusable then TABINDEX needs to be set to -1.\n if (child.getAttribute && child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'false') {\n child.setAttribute(TABINDEX, '-1');\n }\n if (isElementTabbable(child)) {\n if (this.props.disabled) {\n child.setAttribute(TABINDEX, '-1');\n }\n else if (!this._isInnerZone &&\n ((!this._activeElement && !this._defaultFocusElement) || this._activeElement === child)) {\n this._defaultFocusElement = child;\n if (child.getAttribute(TABINDEX) !== '0') {\n child.setAttribute(TABINDEX, '0');\n }\n }\n else if (child.getAttribute(TABINDEX) !== '-1') {\n child.setAttribute(TABINDEX, '-1');\n }\n }\n else if (child.tagName === 'svg' && child.getAttribute('focusable') !== 'false') {\n // Disgusting IE hack. Sad face.\n child.setAttribute('focusable', 'false');\n }\n }\n else if (child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true') {\n if (!this._isInnerZone &&\n ((!this._activeElement && !this._defaultFocusElement) || this._activeElement === child)) {\n this._defaultFocusElement = child;\n if (child.getAttribute(TABINDEX) !== '0') {\n child.setAttribute(TABINDEX, '0');\n }\n }\n else if (child.getAttribute(TABINDEX) !== '-1') {\n child.setAttribute(TABINDEX, '-1');\n }\n }\n this._updateTabIndexes(child);\n }\n };\n FocusZone.prototype._isContentEditableElement = function (element) {\n return element && element.getAttribute('contenteditable') === 'true';\n };\n FocusZone.prototype._isElementInput = function (element) {\n if (element &&\n element.tagName &&\n (element.tagName.toLowerCase() === 'input' || element.tagName.toLowerCase() === 'textarea')) {\n return true;\n }\n return false;\n };\n FocusZone.prototype._shouldInputLoseFocus = function (element, isForward) {\n // If a tab was used, we want to focus on the next element.\n if (!this._processingTabKey &&\n element &&\n element.type &&\n ALLOWED_INPUT_TYPES.indexOf(element.type.toLowerCase()) > -1) {\n var selectionStart = element.selectionStart;\n var selectionEnd = element.selectionEnd;\n var isRangeSelected = selectionStart !== selectionEnd;\n var inputValue = element.value;\n var isReadonly = element.readOnly;\n // We shouldn't lose focus in the following cases:\n // 1. There is range selected.\n // 2. When selection start is larger than 0 and it is backward and not readOnly.\n // 3. when selection start is not the end of length, it is forward and not readOnly.\n // 4. We press any of the arrow keys when our handleTabKey isn't none or undefined (only losing focus if we hit\n // tab) and if shouldInputLoseFocusOnArrowKey is defined, if scenario prefers to not loose the focus which is\n // determined by calling the callback shouldInputLoseFocusOnArrowKey\n if (isRangeSelected ||\n (selectionStart > 0 && !isForward && !isReadonly) ||\n (selectionStart !== inputValue.length && isForward && !isReadonly) ||\n (!!this.props.handleTabKey &&\n !(this.props.shouldInputLoseFocusOnArrowKey && this.props.shouldInputLoseFocusOnArrowKey(element)))) {\n return false;\n }\n }\n return true;\n };\n FocusZone.prototype._shouldWrapFocus = function (element, noWrapDataAttribute) {\n return this.props.checkForNoWrap ? shouldWrapFocus(element, noWrapDataAttribute) : true;\n };\n /**\n * Returns true if the element is a descendant of the FocusZone through a React portal.\n */\n FocusZone.prototype._portalContainsElement = function (element) {\n return element && !!this._root.current && portalContainsElement(element, this._root.current);\n };\n FocusZone.prototype._getDocument = function () {\n return getDocument(this._root.current);\n };\n FocusZone.defaultProps = {\n isCircularNavigation: false,\n direction: FocusZoneDirection.bidirectional,\n shouldRaiseClicks: true,\n };\n return FocusZone;\n}(React.Component));\nexport { FocusZone };\n//# sourceMappingURL=FocusZone.js.map","import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nimport { classNamesFunction, useFocusRects } from '@fluentui/utilities';\nvar getClassNames = classNamesFunction();\n/**\n * The useLink hook processes the Link component props and returns\n * state, slots and slotProps for consumption by the component.\n */\nexport var useLink = function (props, forwardedRef) {\n var as = props.as, className = props.className, disabled = props.disabled, href = props.href, onClick = props.onClick, styles = props.styles, theme = props.theme, underline = props.underline;\n var rootRef = React.useRef(null);\n var mergedRootRefs = useMergedRefs(rootRef, forwardedRef);\n useComponentRef(props, rootRef);\n useFocusRects(rootRef);\n var classNames = getClassNames(styles, {\n className: className,\n isButton: !href,\n isDisabled: disabled,\n isUnderlined: underline,\n theme: theme,\n });\n var _onClick = function (ev) {\n if (disabled) {\n ev.preventDefault();\n }\n else if (onClick) {\n onClick(ev);\n }\n };\n var rootType = as ? as : href ? 'a' : 'button';\n var state = {};\n var slots = { root: rootType };\n var slotProps = {\n root: __assign(__assign({}, adjustPropsForRootType(rootType, props)), { 'aria-disabled': disabled, className: classNames.root, onClick: _onClick, ref: mergedRootRefs }),\n };\n return { state: state, slots: slots, slotProps: slotProps };\n};\nvar useComponentRef = function (props, link) {\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: function () {\n if (link.current) {\n link.current.focus();\n }\n },\n }); }, [link]);\n};\nvar adjustPropsForRootType = function (RootType, props) {\n // Deconstruct the props so we remove props like `as`, `theme` and `styles`\n // as those will always be removed. We also take some props that are optional\n // based on the RootType.\n var as = props.as, disabled = props.disabled, target = props.target, href = props.href, theme = props.theme, getStyles = props.getStyles, styles = props.styles, componentRef = props.componentRef, underline = props.underline, restProps = __rest(props, [\"as\", \"disabled\", \"target\", \"href\", \"theme\", \"getStyles\", \"styles\", \"componentRef\", \"underline\"]);\n // RootType will be a string if we're dealing with an html component\n if (typeof RootType === 'string') {\n // Remove the disabled prop for anchor elements\n if (RootType === 'a') {\n return __assign({ target: target, href: disabled ? undefined : href }, restProps);\n }\n // Add the type='button' prop for button elements\n if (RootType === 'button') {\n return __assign({ type: 'button', disabled: disabled }, restProps);\n }\n // Remove the target and href props for all other non anchor elements\n return __assign(__assign({}, restProps), { disabled: disabled });\n }\n // Retain all props except 'as' for ReactComponents\n return __assign({ target: target, href: href, disabled: disabled }, restProps);\n};\n//# sourceMappingURL=useLink.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { useLink } from './useLink';\nexport var LinkBase = React.forwardRef(function (props, ref) {\n var _a = useLink(props, ref), slots = _a.slots, slotProps = _a.slotProps;\n return React.createElement(slots.root, __assign({}, slotProps.root));\n});\nLinkBase.displayName = 'LinkBase';\n//# sourceMappingURL=Link.base.js.map","import { getGlobalClassNames, HighContrastSelector } from '@fluentui/style-utilities';\nexport var GlobalClassNames = {\n root: 'ms-Link',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e, _f, _g;\n var className = props.className, isButton = props.isButton, isDisabled = props.isDisabled, isUnderlined = props.isUnderlined, theme = props.theme;\n var semanticColors = theme.semanticColors;\n // Tokens\n var linkColor = semanticColors.link;\n var linkInteractedColor = semanticColors.linkHovered;\n var linkDisabledColor = semanticColors.disabledText;\n var focusBorderColor = semanticColors.focusBorder;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n color: linkColor,\n outline: 'none',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n textDecoration: isUnderlined ? 'underline' : 'none',\n selectors: (_a = {\n '.ms-Fabric--isFocusVisible &:focus': {\n // Can't use getFocusStyle because it doesn't support wrapping links\n // https://github.com/microsoft/fluentui/issues/4883#issuecomment-406743543\n // Using box-shadow and outline allows the focus rect to wrap links that span multiple lines\n // and helps the focus rect avoid getting clipped.\n boxShadow: \"0 0 0 1px \".concat(focusBorderColor, \" inset\"),\n outline: \"1px auto \".concat(focusBorderColor),\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n outline: '1px solid WindowText',\n },\n _b),\n }\n },\n _a[HighContrastSelector] = {\n // For IE high contrast mode\n borderBottom: 'none',\n },\n _a),\n },\n isButton && {\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n display: 'inline',\n margin: 0,\n overflow: 'inherit',\n padding: 0,\n textAlign: 'left',\n textOverflow: 'inherit',\n userSelect: 'text',\n borderBottom: '1px solid transparent',\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'LinkText',\n forcedColorAdjust: 'none',\n },\n _c),\n },\n !isButton && {\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n // This is mainly for MessageBar, which sets MsHighContrastAdjust: none by default\n MsHighContrastAdjust: 'auto',\n forcedColorAdjust: 'auto',\n },\n _d),\n },\n isDisabled && [\n 'is-disabled',\n {\n color: linkDisabledColor,\n cursor: 'default',\n },\n {\n selectors: (_e = {\n '&:link, &:visited': {\n pointerEvents: 'none',\n }\n },\n _e[HighContrastSelector] = {\n // We need to specify the color in High Contrast because of the case of Links rendering as buttons.\n color: 'GrayText',\n },\n _e),\n },\n ],\n !isDisabled && {\n selectors: {\n '&:active, &:hover, &:active:hover': {\n color: linkInteractedColor,\n textDecoration: 'underline',\n selectors: (_f = {},\n _f[HighContrastSelector] = {\n color: 'LinkText',\n },\n _f),\n },\n '&:focus': {\n color: linkColor,\n selectors: (_g = {},\n _g[HighContrastSelector] = {\n color: 'LinkText',\n },\n _g),\n },\n },\n },\n classNames.root,\n className,\n ],\n };\n};\n//# sourceMappingURL=Link.styles.js.map","import { styled } from '@fluentui/utilities';\nimport { LinkBase } from './Link.base';\nimport { getStyles } from './Link.styles';\nexport var Link = styled(LinkBase, getStyles, undefined, {\n scope: 'Link',\n});\n//# sourceMappingURL=Link.js.map","export { DirectionalHint } from '../../common/DirectionalHint';\n/**\n * {@docCategory ContextualMenu}\n */\nexport var ContextualMenuItemType;\n(function (ContextualMenuItemType) {\n ContextualMenuItemType[ContextualMenuItemType[\"Normal\"] = 0] = \"Normal\";\n ContextualMenuItemType[ContextualMenuItemType[\"Divider\"] = 1] = \"Divider\";\n ContextualMenuItemType[ContextualMenuItemType[\"Header\"] = 2] = \"Header\";\n ContextualMenuItemType[ContextualMenuItemType[\"Section\"] = 3] = \"Section\";\n})(ContextualMenuItemType || (ContextualMenuItemType = {}));\n//# sourceMappingURL=ContextualMenu.types.js.map","/**\n * Determines the effective checked state of a menu item.\n *\n * @param item {IContextualMenuItem} to get the check state of.\n * @returns {true} if the item is checked.\n * @returns {false} if the item is unchecked.\n * @returns {null} if the item is not checkable.\n */\nexport function getIsChecked(item) {\n if (item.canCheck) {\n return !!(item.isChecked || item.checked);\n }\n if (typeof item.isChecked === 'boolean') {\n return item.isChecked;\n }\n if (typeof item.checked === 'boolean') {\n return item.checked;\n }\n // Item is not checkable.\n return null;\n}\nexport function hasSubmenu(item) {\n // eslint-disable-next-line deprecation/deprecation\n return !!(item.subMenuProps || item.items);\n}\nexport function isItemDisabled(item) {\n return !!(item.isDisabled || item.disabled);\n}\nexport function getMenuItemAriaRole(item) {\n var isChecked = getIsChecked(item);\n var canCheck = isChecked !== null;\n return canCheck ? 'menuitemcheckbox' : 'menuitem';\n}\n//# sourceMappingURL=contextualMenuUtility.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { hasSubmenu, getIsChecked } from '../../utilities/contextualMenu/index';\nimport { getRTL, initializeComponentRef } from '../../Utilities';\nimport { Icon } from '../../Icon';\nvar defaultIconRenderer = function (props) {\n var item = props.item, classNames = props.classNames;\n var iconProps = item.iconProps;\n return React.createElement(Icon, __assign({}, iconProps, { className: classNames.icon }));\n};\nvar renderItemIcon = function (props) {\n var item = props.item, hasIcons = props.hasIcons;\n if (!hasIcons) {\n return null;\n }\n if (item.onRenderIcon) {\n return item.onRenderIcon(props, defaultIconRenderer);\n }\n return defaultIconRenderer(props);\n};\nvar renderCheckMarkIcon = function (_a) {\n var onCheckmarkClick = _a.onCheckmarkClick, item = _a.item, classNames = _a.classNames;\n var isItemChecked = getIsChecked(item);\n if (onCheckmarkClick) {\n // Ensures that the item is passed as the first argument to the checkmark click callback.\n var onClick = function (e) { return onCheckmarkClick(item, e); };\n return (React.createElement(Icon, { iconName: item.canCheck !== false && isItemChecked ? 'CheckMark' : '', className: classNames.checkmarkIcon, \n // eslint-disable-next-line react/jsx-no-bind\n onClick: onClick }));\n }\n return null;\n};\nvar renderItemName = function (_a) {\n var item = _a.item, classNames = _a.classNames;\n /* eslint-disable deprecation/deprecation */\n if (item.text || item.name) {\n return React.createElement(\"span\", { className: classNames.label }, item.text || item.name);\n }\n /* eslint-enable deprecation/deprecation */\n return null;\n};\nvar renderSecondaryText = function (_a) {\n var item = _a.item, classNames = _a.classNames;\n if (item.secondaryText) {\n return React.createElement(\"span\", { className: classNames.secondaryText }, item.secondaryText);\n }\n return null;\n};\nvar renderSubMenuIcon = function (_a) {\n var item = _a.item, classNames = _a.classNames, theme = _a.theme;\n if (hasSubmenu(item)) {\n return (React.createElement(Icon, __assign({ iconName: getRTL(theme) ? 'ChevronLeft' : 'ChevronRight' }, item.submenuIconProps, { className: classNames.subMenuIcon })));\n }\n return null;\n};\nvar ContextualMenuItemBase = /** @class */ (function (_super) {\n __extends(ContextualMenuItemBase, _super);\n function ContextualMenuItemBase(props) {\n var _this = _super.call(this, props) || this;\n _this.openSubMenu = function () {\n var _a = _this.props, item = _a.item, openSubMenu = _a.openSubMenu, getSubmenuTarget = _a.getSubmenuTarget;\n if (getSubmenuTarget) {\n var submenuTarget = getSubmenuTarget();\n if (hasSubmenu(item) && openSubMenu && submenuTarget) {\n openSubMenu(item, submenuTarget);\n }\n }\n };\n _this.dismissSubMenu = function () {\n var _a = _this.props, item = _a.item, dismissSubMenu = _a.dismissSubMenu;\n if (hasSubmenu(item) && dismissSubMenu) {\n dismissSubMenu();\n }\n };\n _this.dismissMenu = function (dismissAll) {\n var dismissMenu = _this.props.dismissMenu;\n if (dismissMenu) {\n dismissMenu(undefined /* ev */, dismissAll);\n }\n };\n initializeComponentRef(_this);\n return _this;\n }\n ContextualMenuItemBase.prototype.render = function () {\n var _a = this.props, item = _a.item, classNames = _a.classNames;\n var renderContent = item.onRenderContent || this._renderLayout;\n return (React.createElement(\"div\", { className: item.split ? classNames.linkContentMenu : classNames.linkContent }, renderContent(this.props, {\n renderCheckMarkIcon: renderCheckMarkIcon,\n renderItemIcon: renderItemIcon,\n renderItemName: renderItemName,\n renderSecondaryText: renderSecondaryText,\n renderSubMenuIcon: renderSubMenuIcon,\n })));\n };\n ContextualMenuItemBase.prototype._renderLayout = function (props, defaultRenders) {\n return (React.createElement(React.Fragment, null,\n defaultRenders.renderCheckMarkIcon(props),\n defaultRenders.renderItemIcon(props),\n defaultRenders.renderItemName(props),\n defaultRenders.renderSecondaryText(props),\n defaultRenders.renderSubMenuIcon(props)));\n };\n return ContextualMenuItemBase;\n}(React.Component));\nexport { ContextualMenuItemBase };\n//# sourceMappingURL=ContextualMenuItem.base.js.map","import { memoizeFunction } from '../../Utilities';\nimport { mergeStyleSets } from '../../Styling';\n/**\n * @deprecated use getStyles exported from VerticalDivider.styles.ts\n */\nexport var getDividerClassNames = memoizeFunction(\n// eslint-disable-next-line deprecation/deprecation\nfunction (theme) {\n return mergeStyleSets({\n wrapper: {\n display: 'inline-flex',\n height: '100%',\n alignItems: 'center',\n },\n divider: {\n width: 1,\n height: '100%',\n backgroundColor: theme.palette.neutralTertiaryAlt,\n },\n });\n});\n//# sourceMappingURL=VerticalDivider.classNames.js.map","import { __assign } from \"tslib\";\nimport { concatStyleSets, getFocusStyle, HighContrastSelector, getScreenSelector, ScreenWidthMaxMedium, IconFontSizes, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { memoizeFunction } from '../../Utilities';\nexport var CONTEXTUAL_MENU_ITEM_HEIGHT = 36;\nvar MediumScreenSelector = getScreenSelector(0, ScreenWidthMaxMedium);\nexport var getMenuItemStyles = memoizeFunction(function (theme) {\n var _a, _b, _c, _d, _e;\n var semanticColors = theme.semanticColors, fonts = theme.fonts, palette = theme.palette;\n var ContextualMenuItemBackgroundHoverColor = semanticColors.menuItemBackgroundHovered;\n var ContextualMenuItemTextHoverColor = semanticColors.menuItemTextHovered;\n var ContextualMenuItemBackgroundSelectedColor = semanticColors.menuItemBackgroundPressed;\n var ContextualMenuItemDividerColor = semanticColors.bodyDivider;\n var menuItemStyles = {\n item: [\n fonts.medium,\n {\n color: semanticColors.bodyText,\n position: 'relative',\n boxSizing: 'border-box',\n },\n ],\n divider: {\n display: 'block',\n height: '1px',\n backgroundColor: ContextualMenuItemDividerColor,\n position: 'relative',\n },\n root: [\n getFocusStyle(theme),\n fonts.medium,\n {\n color: semanticColors.bodyText,\n backgroundColor: 'transparent',\n border: 'none',\n width: '100%',\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n display: 'block',\n cursor: 'pointer',\n padding: '0px 8px 0 4px',\n textAlign: 'left',\n },\n ],\n rootDisabled: {\n color: semanticColors.disabledBodyText,\n cursor: 'default',\n pointerEvents: 'none',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n // ensure disabled text looks different than enabled\n color: 'GrayText',\n opacity: 1,\n },\n _a),\n },\n rootHovered: {\n backgroundColor: ContextualMenuItemBackgroundHoverColor,\n color: ContextualMenuItemTextHoverColor,\n selectors: {\n '.ms-ContextualMenu-icon': {\n color: palette.themeDarkAlt,\n },\n '.ms-ContextualMenu-submenuIcon': {\n color: palette.neutralPrimary,\n },\n },\n },\n rootFocused: {\n backgroundColor: palette.white,\n },\n rootChecked: {\n selectors: {\n '.ms-ContextualMenu-checkmarkIcon': {\n color: palette.neutralPrimary,\n },\n },\n },\n rootPressed: {\n backgroundColor: ContextualMenuItemBackgroundSelectedColor,\n selectors: {\n '.ms-ContextualMenu-icon': {\n color: palette.themeDark,\n },\n '.ms-ContextualMenu-submenuIcon': {\n color: palette.neutralPrimary,\n },\n },\n },\n rootExpanded: {\n backgroundColor: ContextualMenuItemBackgroundSelectedColor,\n color: semanticColors.bodyTextChecked,\n selectors: (_b = {\n '.ms-ContextualMenu-submenuIcon': (_c = {},\n _c[HighContrastSelector] = {\n // icons inside of anchor tags are not properly inheriting color in high contrast\n color: 'inherit',\n },\n _c)\n },\n _b[HighContrastSelector] = __assign({}, getHighContrastNoAdjustStyle()),\n _b),\n },\n linkContent: {\n whiteSpace: 'nowrap',\n height: 'inherit',\n display: 'flex',\n alignItems: 'center',\n maxWidth: '100%',\n },\n anchorLink: {\n padding: '0px 8px 0 4px',\n textRendering: 'auto',\n color: 'inherit',\n letterSpacing: 'normal',\n wordSpacing: 'normal',\n textTransform: 'none',\n textIndent: '0px',\n textShadow: 'none',\n textDecoration: 'none',\n boxSizing: 'border-box',\n },\n label: {\n margin: '0 4px',\n verticalAlign: 'middle',\n display: 'inline-block',\n flexGrow: '1',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n },\n secondaryText: {\n color: theme.palette.neutralSecondary,\n paddingLeft: '20px',\n textAlign: 'right',\n },\n icon: {\n display: 'inline-block',\n minHeight: '1px',\n maxHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n fontSize: IconFontSizes.medium,\n width: IconFontSizes.medium,\n margin: '0 4px',\n verticalAlign: 'middle',\n flexShrink: '0',\n selectors: (_d = {},\n _d[MediumScreenSelector] = {\n fontSize: IconFontSizes.large,\n width: IconFontSizes.large,\n },\n _d),\n },\n iconColor: {\n color: semanticColors.menuIcon,\n },\n iconDisabled: {\n color: semanticColors.disabledBodyText,\n },\n checkmarkIcon: {\n color: semanticColors.bodySubtext,\n },\n subMenuIcon: {\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n color: palette.neutralSecondary,\n textAlign: 'center',\n display: 'inline-block',\n verticalAlign: 'middle',\n flexShrink: '0',\n fontSize: IconFontSizes.small,\n selectors: (_e = {\n ':hover': {\n color: palette.neutralPrimary,\n },\n ':active': {\n color: palette.neutralPrimary,\n }\n },\n _e[MediumScreenSelector] = {\n fontSize: IconFontSizes.medium, // 16px\n },\n _e),\n },\n splitButtonFlexContainer: [\n getFocusStyle(theme),\n {\n display: 'flex',\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n flexWrap: 'nowrap',\n justifyContent: 'center',\n alignItems: 'flex-start',\n },\n ],\n };\n return concatStyleSets(menuItemStyles);\n});\n//# sourceMappingURL=ContextualMenu.cnstyles.js.map","import { getDividerClassNames } from '../Divider/VerticalDivider.classNames';\nimport { getMenuItemStyles } from './ContextualMenu.cnstyles';\nimport { mergeStyleSets, getGlobalClassNames, getScreenSelector, ScreenWidthMaxMedium, hiddenContentStyle, } from '../../Styling';\nimport { memoizeFunction, IsFocusVisibleClassName } from '../../Utilities';\nvar CONTEXTUAL_SPLIT_MENU_MINWIDTH = '28px';\nvar MediumScreenSelector = getScreenSelector(0, ScreenWidthMaxMedium);\nexport var getSplitButtonVerticalDividerClassNames = memoizeFunction(\n/* eslint-disable deprecation/deprecation */\nfunction (theme) {\n var _a;\n return mergeStyleSets(getDividerClassNames(theme), {\n /* eslint-enable deprecation/deprecation */\n wrapper: {\n position: 'absolute',\n right: 28,\n selectors: (_a = {},\n _a[MediumScreenSelector] = {\n right: 32, // fontSize of the icon increased from 12px to 16px\n },\n _a),\n },\n divider: {\n height: 16,\n width: 1,\n },\n });\n});\nvar GlobalClassNames = {\n item: 'ms-ContextualMenu-item',\n divider: 'ms-ContextualMenu-divider',\n root: 'ms-ContextualMenu-link',\n isChecked: 'is-checked',\n isExpanded: 'is-expanded',\n isDisabled: 'is-disabled',\n linkContent: 'ms-ContextualMenu-linkContent',\n linkContentMenu: 'ms-ContextualMenu-linkContent',\n icon: 'ms-ContextualMenu-icon',\n iconColor: 'ms-ContextualMenu-iconColor',\n checkmarkIcon: 'ms-ContextualMenu-checkmarkIcon',\n subMenuIcon: 'ms-ContextualMenu-submenuIcon',\n label: 'ms-ContextualMenu-itemText',\n secondaryText: 'ms-ContextualMenu-secondaryText',\n splitMenu: 'ms-ContextualMenu-splitMenu',\n screenReaderText: 'ms-ContextualMenu-screenReaderText',\n};\n/**\n * @deprecated Will be removed in \\>= 7.0.\n * This is a package-internal method that has been depended on.\n * It is being kept in this form for backwards compatibility.\n * @internal\n */\n// TODO: Audit perf. impact of and potentially remove memoizeFunction.\n// https://github.com/microsoft/fluentui/issues/5534\nexport var getItemClassNames = memoizeFunction(function (theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName, primaryDisabled, className) {\n var _a, _b, _c, _d;\n var styles = getMenuItemStyles(theme);\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return mergeStyleSets({\n item: [classNames.item, styles.item, itemClassName],\n divider: [classNames.divider, styles.divider, dividerClassName],\n root: [\n classNames.root,\n styles.root,\n checked && [classNames.isChecked, styles.rootChecked],\n isAnchorLink && styles.anchorLink,\n expanded && [classNames.isExpanded, styles.rootExpanded],\n disabled && [classNames.isDisabled, styles.rootDisabled],\n !disabled &&\n !expanded && [\n {\n selectors: (_a = {\n ':hover': styles.rootHovered,\n ':active': styles.rootPressed\n },\n _a[\".\".concat(IsFocusVisibleClassName, \" &:focus, .\").concat(IsFocusVisibleClassName, \" &:focus:hover\")] = styles.rootFocused,\n _a[\".\".concat(IsFocusVisibleClassName, \" &:hover\")] = { background: 'inherit;' },\n _a),\n },\n ],\n className,\n ],\n splitPrimary: [\n styles.root,\n {\n width: \"calc(100% - \".concat(CONTEXTUAL_SPLIT_MENU_MINWIDTH, \")\"),\n },\n checked && ['is-checked', styles.rootChecked],\n (disabled || primaryDisabled) && ['is-disabled', styles.rootDisabled],\n !(disabled || primaryDisabled) &&\n !checked && [\n {\n selectors: (_b = {\n ':hover': styles.rootHovered\n },\n // when hovering over the splitPrimary also affect the splitMenu\n _b[\":hover ~ .\".concat(classNames.splitMenu)] = styles.rootHovered,\n _b[':active'] = styles.rootPressed,\n _b[\".\".concat(IsFocusVisibleClassName, \" &:focus, .\").concat(IsFocusVisibleClassName, \" &:focus:hover\")] = styles.rootFocused,\n _b[\".\".concat(IsFocusVisibleClassName, \" &:hover\")] = { background: 'inherit;' },\n _b),\n },\n ],\n ],\n splitMenu: [\n classNames.splitMenu,\n styles.root,\n {\n flexBasis: '0',\n padding: '0 8px',\n minWidth: CONTEXTUAL_SPLIT_MENU_MINWIDTH,\n },\n expanded && ['is-expanded', styles.rootExpanded],\n disabled && ['is-disabled', styles.rootDisabled],\n !disabled &&\n !expanded && [\n {\n selectors: (_c = {\n ':hover': styles.rootHovered,\n ':active': styles.rootPressed\n },\n _c[\".\".concat(IsFocusVisibleClassName, \" &:focus, .\").concat(IsFocusVisibleClassName, \" &:focus:hover\")] = styles.rootFocused,\n _c[\".\".concat(IsFocusVisibleClassName, \" &:hover\")] = { background: 'inherit;' },\n _c),\n },\n ],\n ],\n anchorLink: styles.anchorLink,\n linkContent: [classNames.linkContent, styles.linkContent],\n linkContentMenu: [\n classNames.linkContentMenu,\n styles.linkContent,\n {\n justifyContent: 'center',\n },\n ],\n icon: [\n classNames.icon,\n knownIcon && styles.iconColor,\n styles.icon,\n iconClassName,\n disabled && [classNames.isDisabled, styles.iconDisabled],\n ],\n iconColor: styles.iconColor,\n checkmarkIcon: [classNames.checkmarkIcon, knownIcon && styles.checkmarkIcon, styles.icon, iconClassName],\n subMenuIcon: [\n classNames.subMenuIcon,\n styles.subMenuIcon,\n subMenuClassName,\n expanded && { color: theme.palette.neutralPrimary },\n disabled && [styles.iconDisabled],\n ],\n label: [classNames.label, styles.label],\n secondaryText: [classNames.secondaryText, styles.secondaryText],\n splitContainer: [\n styles.splitButtonFlexContainer,\n !disabled &&\n !checked && [\n {\n selectors: (_d = {},\n _d[\".\".concat(IsFocusVisibleClassName, \" &:focus, .\").concat(IsFocusVisibleClassName, \" &:focus:hover\")] = styles.rootFocused,\n _d),\n },\n ],\n ],\n screenReaderText: [\n classNames.screenReaderText,\n styles.screenReaderText,\n hiddenContentStyle,\n { visibility: 'hidden' },\n ],\n });\n});\n/**\n * Wrapper function for generating ContextualMenuItem classNames which adheres to\n * the getStyles API, but invokes memoized className generator function with\n * primitive values.\n *\n * @param props - the ContextualMenuItem style props used to generate its styles.\n */\nexport var getItemStyles = function (props) {\n var theme = props.theme, disabled = props.disabled, expanded = props.expanded, checked = props.checked, isAnchorLink = props.isAnchorLink, knownIcon = props.knownIcon, itemClassName = props.itemClassName, dividerClassName = props.dividerClassName, iconClassName = props.iconClassName, subMenuClassName = props.subMenuClassName, primaryDisabled = props.primaryDisabled, className = props.className;\n // eslint-disable-next-line deprecation/deprecation\n return getItemClassNames(theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName, primaryDisabled, className);\n};\n//# sourceMappingURL=ContextualMenu.classNames.js.map","import { styled } from '../../Utilities';\nimport { ContextualMenuItemBase } from './ContextualMenuItem.base';\nimport { getItemStyles } from './ContextualMenu.classNames';\n/**\n * ContextualMenuItem description\n */\nexport var ContextualMenuItem = styled(ContextualMenuItemBase, getItemStyles, undefined, { scope: 'ContextualMenuItem' });\n//# sourceMappingURL=ContextualMenuItem.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, shallowCompare } from '../../../Utilities';\nvar ContextualMenuItemWrapper = /** @class */ (function (_super) {\n __extends(ContextualMenuItemWrapper, _super);\n function ContextualMenuItemWrapper(props) {\n var _this = _super.call(this, props) || this;\n _this._onItemMouseEnter = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseEnter = _a.onItemMouseEnter;\n if (onItemMouseEnter) {\n onItemMouseEnter(item, ev, ev.currentTarget);\n }\n };\n _this._onItemClick = function (ev) {\n var _a = _this.props, item = _a.item, onItemClickBase = _a.onItemClickBase;\n if (onItemClickBase) {\n onItemClickBase(item, ev, ev.currentTarget);\n }\n };\n _this._onItemMouseLeave = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseLeave = _a.onItemMouseLeave;\n if (onItemMouseLeave) {\n onItemMouseLeave(item, ev);\n }\n };\n _this._onItemKeyDown = function (ev) {\n var _a = _this.props, item = _a.item, onItemKeyDown = _a.onItemKeyDown;\n if (onItemKeyDown) {\n onItemKeyDown(item, ev);\n }\n };\n _this._onItemMouseMove = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseMove = _a.onItemMouseMove;\n if (onItemMouseMove) {\n onItemMouseMove(item, ev, ev.currentTarget);\n }\n };\n _this._getSubmenuTarget = function () {\n return undefined;\n };\n initializeComponentRef(_this);\n return _this;\n }\n ContextualMenuItemWrapper.prototype.shouldComponentUpdate = function (newProps) {\n return !shallowCompare(newProps, this.props);\n };\n return ContextualMenuItemWrapper;\n}(React.Component));\nexport { ContextualMenuItemWrapper };\n//# sourceMappingURL=ContextualMenuItemWrapper.js.map","export var KTP_PREFIX = 'ktp';\nexport var KTP_SEPARATOR = '-';\nexport var KTP_FULL_PREFIX = KTP_PREFIX + KTP_SEPARATOR;\nexport var DATAKTP_TARGET = 'data-ktp-target';\nexport var DATAKTP_EXECUTE_TARGET = 'data-ktp-execute-target';\nexport var DATAKTP_ARIA_TARGET = 'data-ktp-aria-target';\nexport var KTP_LAYER_ID = 'ktp-layer-id';\nexport var KTP_ARIA_SEPARATOR = ', ';\n// Events\nexport var KeytipEvents;\n(function (KeytipEvents) {\n KeytipEvents.KEYTIP_ADDED = 'keytipAdded';\n KeytipEvents.KEYTIP_REMOVED = 'keytipRemoved';\n KeytipEvents.KEYTIP_UPDATED = 'keytipUpdated';\n KeytipEvents.PERSISTED_KEYTIP_ADDED = 'persistedKeytipAdded';\n KeytipEvents.PERSISTED_KEYTIP_REMOVED = 'persistedKeytipRemoved';\n KeytipEvents.PERSISTED_KEYTIP_EXECUTE = 'persistedKeytipExecute';\n KeytipEvents.ENTER_KEYTIP_MODE = 'enterKeytipMode';\n KeytipEvents.EXIT_KEYTIP_MODE = 'exitKeytipMode';\n})(KeytipEvents || (KeytipEvents = {}));\n//# sourceMappingURL=KeytipConstants.js.map","import { __assign, __spreadArray } from \"tslib\";\nimport { EventGroup, getId } from '../../Utilities';\nimport { KeytipEvents } from '../../utilities/keytips/KeytipConstants';\n/**\n * This class is responsible for handling registering, updating, and unregistering of keytips\n */\nvar KeytipManager = /** @class */ (function () {\n function KeytipManager() {\n this.keytips = {};\n this.persistedKeytips = {};\n this.sequenceMapping = {};\n // This is (and should be) updated and kept in sync\n // with the inKeytipMode in KeytipLayer.\n this.inKeytipMode = false;\n // Boolean that gets checked before entering keytip mode by the KeytipLayer\n // Used for an override in special cases (e.g. Disable entering keytip mode when a modal is shown)\n this.shouldEnterKeytipMode = true;\n // Boolean to indicate whether to delay firing an event to update subscribers of\n // keytip data changed.\n this.delayUpdatingKeytipChange = false;\n }\n /**\n * Static function to get singleton KeytipManager instance\n *\n * @returns Singleton KeytipManager instance\n */\n KeytipManager.getInstance = function () {\n return this._instance;\n };\n /**\n * Initialization code to set set parameters to define\n * how the KeytipManager handles keytip data.\n *\n * @param delayUpdatingKeytipChange - T/F if we should delay notifiying keytip subscribers\n * of keytip changes\n */\n KeytipManager.prototype.init = function (delayUpdatingKeytipChange) {\n this.delayUpdatingKeytipChange = delayUpdatingKeytipChange;\n };\n /**\n * Registers a keytip\n *\n * @param keytipProps - Keytip to register\n * @param persisted - T/F if this keytip should be persisted, default is false\n * @returns Unique ID for this keytip\n */\n KeytipManager.prototype.register = function (keytipProps, persisted) {\n if (persisted === void 0) { persisted = false; }\n var props = keytipProps;\n if (!persisted) {\n // Add the overflowSetSequence if necessary\n props = this.addParentOverflow(keytipProps);\n this.sequenceMapping[props.keySequences.toString()] = props;\n }\n // Create a unique keytip\n var uniqueKeytip = this._getUniqueKtp(props);\n // Add to dictionary\n persisted\n ? (this.persistedKeytips[uniqueKeytip.uniqueID] = uniqueKeytip)\n : (this.keytips[uniqueKeytip.uniqueID] = uniqueKeytip);\n // We only want to add something new if we are currently showing keytip mode\n if (this.inKeytipMode || !this.delayUpdatingKeytipChange) {\n var event_1 = persisted ? KeytipEvents.PERSISTED_KEYTIP_ADDED : KeytipEvents.KEYTIP_ADDED;\n EventGroup.raise(this, event_1, {\n keytip: props,\n uniqueID: uniqueKeytip.uniqueID,\n });\n }\n return uniqueKeytip.uniqueID;\n };\n /**\n * Update a keytip\n *\n * @param keytipProps - Keytip to update\n * @param uniqueID - Unique ID of this keytip\n */\n KeytipManager.prototype.update = function (keytipProps, uniqueID) {\n var newKeytipProps = this.addParentOverflow(keytipProps);\n var uniqueKeytip = this._getUniqueKtp(newKeytipProps, uniqueID);\n var oldKeyTip = this.keytips[uniqueID];\n if (oldKeyTip) {\n // Update everything except 'visible'\n uniqueKeytip.keytip.visible = oldKeyTip.keytip.visible;\n // Update keytip in this.keytips\n this.keytips[uniqueID] = uniqueKeytip;\n // Update the sequence to be up to date\n delete this.sequenceMapping[oldKeyTip.keytip.keySequences.toString()];\n this.sequenceMapping[uniqueKeytip.keytip.keySequences.toString()] = uniqueKeytip.keytip;\n // Raise event only if we are currently in keytip mode\n if (this.inKeytipMode || !this.delayUpdatingKeytipChange) {\n EventGroup.raise(this, KeytipEvents.KEYTIP_UPDATED, {\n keytip: uniqueKeytip.keytip,\n uniqueID: uniqueKeytip.uniqueID,\n });\n }\n }\n };\n /**\n * Unregisters a keytip\n *\n * @param keytipToRemove - IKeytipProps of the keytip to remove\n * @param uniqueID - Unique ID of this keytip\n * @param persisted - T/F if this keytip should be persisted, default is false\n */\n KeytipManager.prototype.unregister = function (keytipToRemove, uniqueID, persisted) {\n if (persisted === void 0) { persisted = false; }\n persisted ? delete this.persistedKeytips[uniqueID] : delete this.keytips[uniqueID];\n !persisted && delete this.sequenceMapping[keytipToRemove.keySequences.toString()];\n var event = persisted ? KeytipEvents.PERSISTED_KEYTIP_REMOVED : KeytipEvents.KEYTIP_REMOVED;\n // Update keytips only if we're in keytip mode\n if (this.inKeytipMode || !this.delayUpdatingKeytipChange) {\n EventGroup.raise(this, event, {\n keytip: keytipToRemove,\n uniqueID: uniqueID,\n });\n }\n };\n /**\n * Manual call to enter keytip mode\n */\n KeytipManager.prototype.enterKeytipMode = function () {\n EventGroup.raise(this, KeytipEvents.ENTER_KEYTIP_MODE);\n };\n /**\n * Manual call to exit keytip mode\n */\n KeytipManager.prototype.exitKeytipMode = function () {\n EventGroup.raise(this, KeytipEvents.EXIT_KEYTIP_MODE);\n };\n /**\n * Gets all IKeytipProps from this.keytips\n *\n * @returns All keytips stored in the manager\n */\n KeytipManager.prototype.getKeytips = function () {\n var _this = this;\n return Object.keys(this.keytips).map(function (key) { return _this.keytips[key].keytip; });\n };\n /**\n * Adds the overflowSetSequence to the keytipProps if its parent keytip also has it\n *\n * @param keytipProps - Keytip props to add overflowSetSequence to if necessary\n * @returns - Modified keytip props, if needed to be modified\n */\n KeytipManager.prototype.addParentOverflow = function (keytipProps) {\n var fullSequence = __spreadArray([], keytipProps.keySequences, true);\n fullSequence.pop();\n if (fullSequence.length !== 0) {\n var parentKeytip = this.sequenceMapping[fullSequence.toString()];\n if (parentKeytip && parentKeytip.overflowSetSequence) {\n return __assign(__assign({}, keytipProps), { overflowSetSequence: parentKeytip.overflowSetSequence });\n }\n }\n return keytipProps;\n };\n /**\n * Public function to bind for overflow items that have a submenu\n */\n KeytipManager.prototype.menuExecute = function (overflowButtonSequences, keytipSequences) {\n EventGroup.raise(this, KeytipEvents.PERSISTED_KEYTIP_EXECUTE, {\n overflowButtonSequences: overflowButtonSequences,\n keytipSequences: keytipSequences,\n });\n };\n /**\n * Creates an IUniqueKeytip object\n *\n * @param keytipProps - IKeytipProps\n * @param uniqueID - Unique ID, will default to the next unique ID if not passed\n * @returns IUniqueKeytip object\n */\n KeytipManager.prototype._getUniqueKtp = function (keytipProps, uniqueID) {\n if (uniqueID === void 0) { uniqueID = getId(); }\n return { keytip: __assign({}, keytipProps), uniqueID: uniqueID };\n };\n KeytipManager._instance = new KeytipManager();\n return KeytipManager;\n}());\nexport { KeytipManager };\n//# sourceMappingURL=KeytipManager.js.map","import { __spreadArray } from \"tslib\";\nimport { KTP_SEPARATOR, KTP_PREFIX, DATAKTP_TARGET, DATAKTP_EXECUTE_TARGET, KTP_LAYER_ID } from './KeytipConstants';\nimport { addElementAtIndex } from '../../Utilities';\n/**\n * Converts a whole set of KeySequences into one keytip ID, which will be the ID for the last keytip sequence specified\n * keySequences should not include the initial keytip 'start' sequence.\n *\n * @param keySequences - Full path of IKeySequences for one keytip.\n * @returns String to use for the keytip ID.\n */\nexport function sequencesToID(keySequences) {\n return keySequences.reduce(function (prevValue, keySequence) {\n return prevValue + KTP_SEPARATOR + keySequence.split('').join(KTP_SEPARATOR);\n }, KTP_PREFIX);\n}\n/**\n * Merges an overflow sequence with a key sequence.\n *\n * @param keySequences - Full sequence for one keytip.\n * @param overflowKeySequences - Full overflow keytip sequence.\n * @returns Sequence that will be used by the keytip when in the overflow.\n */\nexport function mergeOverflows(keySequences, overflowKeySequences) {\n var overflowSequenceLen = overflowKeySequences.length;\n var overflowSequence = __spreadArray([], overflowKeySequences, true).pop();\n var newKeySequences = __spreadArray([], keySequences, true);\n return addElementAtIndex(newKeySequences, overflowSequenceLen - 1, overflowSequence);\n}\n/**\n * Constructs the data-ktp-target attribute selector from a full key sequence.\n *\n * @param keySequences - Full string[] for a Keytip.\n * @returns String selector to use to query for the keytip target.\n */\nexport function ktpTargetFromSequences(keySequences) {\n return '[' + DATAKTP_TARGET + '=\"' + sequencesToID(keySequences) + '\"]';\n}\n/**\n * Constructs the data-ktp-execute-target attribute selector from a keytip ID.\n *\n * @param keytipId - ID of the Keytip.\n * @returns String selector to use to query for the keytip execute target.\n */\nexport function ktpTargetFromId(keytipId) {\n return '[' + DATAKTP_EXECUTE_TARGET + '=\"' + keytipId + '\"]';\n}\n/**\n * Gets the aria-describedby value to put on the component with this keytip.\n *\n * @param keySequences - KeySequences of the keytip.\n * @returns The aria-describedby value to set on the component with this keytip.\n */\nexport function getAriaDescribedBy(keySequences) {\n var describedby = ' ' + KTP_LAYER_ID;\n if (!keySequences.length) {\n // Return just the layer ID\n return describedby;\n }\n return describedby + ' ' + sequencesToID(keySequences);\n}\n//# sourceMappingURL=KeytipUtils.js.map","import { __assign, __spreadArray } from \"tslib\";\nimport * as React from 'react';\nimport { useConst, useIsomorphicLayoutEffect, usePrevious } from '@fluentui/react-hooks';\nimport { mergeAriaAttributeValues } from '../../Utilities';\nimport { KeytipManager, mergeOverflows, sequencesToID, getAriaDescribedBy } from '../../utilities/keytips/index';\n/**\n * Hook that creates attributes for components which are enabled with Keytip.\n */\nexport function useKeytipData(options) {\n var uniqueId = React.useRef();\n var keytipProps = options.keytipProps\n ? __assign({ disabled: options.disabled }, options.keytipProps) : undefined;\n var keytipManager = useConst(KeytipManager.getInstance());\n var prevOptions = usePrevious(options);\n // useLayoutEffect used to strictly emulate didUpdate/didMount behavior\n useIsomorphicLayoutEffect(function () {\n if (uniqueId.current &&\n keytipProps &&\n ((prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.keytipProps) !== options.keytipProps || (prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.disabled) !== options.disabled)) {\n keytipManager.update(keytipProps, uniqueId.current);\n }\n });\n useIsomorphicLayoutEffect(function () {\n // Register Keytip in KeytipManager\n if (keytipProps) {\n uniqueId.current = keytipManager.register(keytipProps);\n }\n return function () {\n // Unregister Keytip in KeytipManager\n keytipProps && keytipManager.unregister(keytipProps, uniqueId.current);\n };\n // this is meant to run only at mount, and updates are handled separately\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n var nativeKeytipProps = {\n ariaDescribedBy: undefined,\n keytipId: undefined,\n };\n if (keytipProps) {\n nativeKeytipProps = getKeytipData(keytipManager, keytipProps, options.ariaDescribedBy);\n }\n return nativeKeytipProps;\n}\n/**\n * Gets the aria- and data- attributes to attach to the component\n * @param keytipProps - options for Keytip\n * @param describedByPrepend - ariaDescribedBy value to prepend\n */\nfunction getKeytipData(keytipManager, keytipProps, describedByPrepend) {\n // Add the parent overflow sequence if necessary\n var newKeytipProps = keytipManager.addParentOverflow(keytipProps);\n // Construct aria-describedby and data-ktp-id attributes\n var ariaDescribedBy = mergeAriaAttributeValues(describedByPrepend, getAriaDescribedBy(newKeytipProps.keySequences));\n var keySequences = __spreadArray([], newKeytipProps.keySequences, true);\n if (newKeytipProps.overflowSetSequence) {\n keySequences = mergeOverflows(keySequences, newKeytipProps.overflowSetSequence);\n }\n var keytipId = sequencesToID(keySequences);\n return {\n ariaDescribedBy: ariaDescribedBy,\n keytipId: keytipId,\n };\n}\n//# sourceMappingURL=useKeytipData.js.map","import { __rest } from \"tslib\";\nimport { DATAKTP_TARGET, DATAKTP_EXECUTE_TARGET } from '../../utilities/keytips/index';\nimport { useKeytipData } from './useKeytipData';\n/**\n * A small element to help the target component correctly read out its aria-describedby for its Keytip\n * {@docCategory Keytips}\n */\nexport var KeytipData = function (props) {\n var _a;\n var children = props.children, keytipDataProps = __rest(props, [\"children\"]);\n var _b = useKeytipData(keytipDataProps), keytipId = _b.keytipId, ariaDescribedBy = _b.ariaDescribedBy;\n return children((_a = {},\n _a[DATAKTP_TARGET] = keytipId,\n _a[DATAKTP_EXECUTE_TARGET] = keytipId,\n _a['aria-describedby'] = ariaDescribedBy,\n _a));\n};\n//# sourceMappingURL=KeytipData.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { anchorProperties, getNativeProps, memoizeFunction, getId, mergeAriaAttributeValues, composeComponentAs, } from '../../../Utilities';\nimport { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';\nimport { KeytipData } from '../../../KeytipData';\nimport { isItemDisabled, hasSubmenu } from '../../../utilities/contextualMenu/index';\nimport { ContextualMenuItem } from '../ContextualMenuItem';\nvar ContextualMenuAnchor = /** @class */ (function (_super) {\n __extends(ContextualMenuAnchor, _super);\n function ContextualMenuAnchor() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._anchor = React.createRef();\n _this._getMemoizedMenuButtonKeytipProps = memoizeFunction(function (keytipProps) {\n return __assign(__assign({}, keytipProps), { hasMenu: true });\n });\n _this._getSubmenuTarget = function () {\n return _this._anchor.current ? _this._anchor.current : undefined;\n };\n _this._onItemClick = function (ev) {\n var _a = _this.props, item = _a.item, onItemClick = _a.onItemClick;\n if (onItemClick) {\n onItemClick(item, ev);\n }\n };\n _this._renderAriaDescription = function (ariaDescription, className) {\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan\n return ariaDescription ? (React.createElement(\"span\", { id: _this._ariaDescriptionId, className: className }, ariaDescription)) : null;\n };\n return _this;\n }\n ContextualMenuAnchor.prototype.render = function () {\n var _this = this;\n var _a = this.props, item = _a.item, classNames = _a.classNames, index = _a.index, focusableElementIndex = _a.focusableElementIndex, totalItemCount = _a.totalItemCount, hasCheckmarks = _a.hasCheckmarks, hasIcons = _a.hasIcons, expandedMenuItemKey = _a.expandedMenuItemKey, onItemClick = _a.onItemClick, openSubMenu = _a.openSubMenu, dismissSubMenu = _a.dismissSubMenu, dismissMenu = _a.dismissMenu;\n var ChildrenRenderer = ContextualMenuItem;\n if (this.props.item.contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(this.props.item.contextualMenuItemAs, ChildrenRenderer);\n }\n if (this.props.contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(this.props.contextualMenuItemAs, ChildrenRenderer);\n }\n var anchorRel = item.rel;\n if (item.target && item.target.toLowerCase() === '_blank') {\n anchorRel = anchorRel ? anchorRel : 'nofollow noopener noreferrer'; // Safe default to prevent tabjacking\n }\n var itemHasSubmenu = hasSubmenu(item);\n var nativeProps = getNativeProps(item, anchorProperties);\n var disabled = isItemDisabled(item);\n var itemProps = item.itemProps, ariaDescription = item.ariaDescription;\n var keytipProps = item.keytipProps;\n if (keytipProps && itemHasSubmenu) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n // Check for ariaDescription to set the _ariaDescriptionId and render a hidden span with\n // the description in it to be added to ariaDescribedBy\n if (ariaDescription) {\n this._ariaDescriptionId = getId();\n }\n var ariaDescribedByIds = mergeAriaAttributeValues(item.ariaDescribedBy, ariaDescription ? this._ariaDescriptionId : undefined, nativeProps['aria-describedby']);\n var additionalItemProperties = {\n 'aria-describedby': ariaDescribedByIds,\n };\n return (React.createElement(\"div\", null,\n React.createElement(KeytipData, { keytipProps: item.keytipProps, ariaDescribedBy: ariaDescribedByIds, disabled: disabled }, function (keytipAttributes) { return (React.createElement(\"a\", __assign({}, additionalItemProperties, nativeProps, keytipAttributes, { ref: _this._anchor, href: item.href, target: item.target, rel: anchorRel, className: classNames.root, role: \"menuitem\", \"aria-haspopup\": itemHasSubmenu || undefined, \"aria-expanded\": itemHasSubmenu ? item.key === expandedMenuItemKey : undefined, \"aria-posinset\": focusableElementIndex + 1, \"aria-setsize\": totalItemCount, \"aria-disabled\": isItemDisabled(item), \n // eslint-disable-next-line deprecation/deprecation\n style: item.style, onClick: _this._onItemClick, onMouseEnter: _this._onItemMouseEnter, onMouseLeave: _this._onItemMouseLeave, onMouseMove: _this._onItemMouseMove, onKeyDown: itemHasSubmenu ? _this._onItemKeyDown : undefined }),\n React.createElement(ChildrenRenderer, __assign({ componentRef: item.componentRef, item: item, classNames: classNames, index: index, onCheckmarkClick: hasCheckmarks && onItemClick ? onItemClick : undefined, hasIcons: hasIcons, openSubMenu: openSubMenu, dismissSubMenu: dismissSubMenu, dismissMenu: dismissMenu, getSubmenuTarget: _this._getSubmenuTarget }, itemProps)),\n _this._renderAriaDescription(ariaDescription, classNames.screenReaderText))); })));\n };\n return ContextualMenuAnchor;\n}(ContextualMenuItemWrapper));\nexport { ContextualMenuAnchor };\n//# sourceMappingURL=ContextualMenuAnchor.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { buttonProperties, getNativeProps, memoizeFunction, getId, mergeAriaAttributeValues, composeComponentAs, } from '../../../Utilities';\nimport { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';\nimport { KeytipData } from '../../../KeytipData';\nimport { getIsChecked, isItemDisabled, hasSubmenu, getMenuItemAriaRole } from '../../../utilities/contextualMenu/index';\nimport { ContextualMenuItem } from '../ContextualMenuItem';\nvar ContextualMenuButton = /** @class */ (function (_super) {\n __extends(ContextualMenuButton, _super);\n function ContextualMenuButton() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._btn = React.createRef();\n _this._getMemoizedMenuButtonKeytipProps = memoizeFunction(function (keytipProps) {\n return __assign(__assign({}, keytipProps), { hasMenu: true });\n });\n _this._renderAriaDescription = function (ariaDescription, className) {\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan\n return ariaDescription ? (React.createElement(\"span\", { id: _this._ariaDescriptionId, className: className }, ariaDescription)) : null;\n };\n _this._getSubmenuTarget = function () {\n return _this._btn.current ? _this._btn.current : undefined;\n };\n return _this;\n }\n ContextualMenuButton.prototype.render = function () {\n var _this = this;\n var _a = this.props, item = _a.item, classNames = _a.classNames, index = _a.index, focusableElementIndex = _a.focusableElementIndex, totalItemCount = _a.totalItemCount, hasCheckmarks = _a.hasCheckmarks, hasIcons = _a.hasIcons, contextualMenuItemAs = _a.contextualMenuItemAs, expandedMenuItemKey = _a.expandedMenuItemKey, onItemMouseDown = _a.onItemMouseDown, onItemClick = _a.onItemClick, openSubMenu = _a.openSubMenu, dismissSubMenu = _a.dismissSubMenu, dismissMenu = _a.dismissMenu;\n var ChildrenRenderer = ContextualMenuItem;\n if (item.contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(item.contextualMenuItemAs, ChildrenRenderer);\n }\n if (contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(contextualMenuItemAs, ChildrenRenderer);\n }\n var isChecked = getIsChecked(item);\n var canCheck = isChecked !== null;\n var defaultRole = getMenuItemAriaRole(item);\n var itemHasSubmenu = hasSubmenu(item);\n var itemProps = item.itemProps, ariaLabel = item.ariaLabel, ariaDescription = item.ariaDescription;\n var buttonNativeProperties = getNativeProps(item, buttonProperties);\n // Do not add the disabled attribute to the button so that it is focusable\n delete buttonNativeProperties.disabled;\n var itemRole = item.role || defaultRole;\n // Check for ariaDescription to set the _ariaDescriptionId and render a hidden span with\n // the description in it to be added to ariaDescribedBy\n if (ariaDescription) {\n this._ariaDescriptionId = getId();\n }\n var ariaDescribedByIds = mergeAriaAttributeValues(item.ariaDescribedBy, ariaDescription ? this._ariaDescriptionId : undefined, buttonNativeProperties['aria-describedby']);\n var itemButtonProperties = {\n className: classNames.root,\n onClick: this._onItemClick,\n onKeyDown: itemHasSubmenu ? this._onItemKeyDown : undefined,\n onMouseEnter: this._onItemMouseEnter,\n onMouseLeave: this._onItemMouseLeave,\n onMouseDown: function (ev) {\n return onItemMouseDown ? onItemMouseDown(item, ev) : undefined;\n },\n onMouseMove: this._onItemMouseMove,\n href: item.href,\n title: item.title,\n 'aria-label': ariaLabel,\n 'aria-describedby': ariaDescribedByIds,\n 'aria-haspopup': itemHasSubmenu || undefined,\n 'aria-expanded': itemHasSubmenu ? item.key === expandedMenuItemKey : undefined,\n 'aria-posinset': focusableElementIndex + 1,\n 'aria-setsize': totalItemCount,\n 'aria-disabled': isItemDisabled(item),\n 'aria-checked': (itemRole === 'menuitemcheckbox' || itemRole === 'menuitemradio') && canCheck ? !!isChecked : undefined,\n 'aria-selected': itemRole === 'menuitem' && canCheck ? !!isChecked : undefined,\n role: itemRole,\n // eslint-disable-next-line deprecation/deprecation\n style: item.style,\n };\n var keytipProps = item.keytipProps;\n if (keytipProps && itemHasSubmenu) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n return (React.createElement(KeytipData, { keytipProps: keytipProps, ariaDescribedBy: ariaDescribedByIds, disabled: isItemDisabled(item) }, function (keytipAttributes) { return (React.createElement(\"button\", __assign({ ref: _this._btn }, buttonNativeProperties, itemButtonProperties, keytipAttributes),\n React.createElement(ChildrenRenderer, __assign({ componentRef: item.componentRef, item: item, classNames: classNames, index: index, onCheckmarkClick: hasCheckmarks && onItemClick ? onItemClick : undefined, hasIcons: hasIcons, openSubMenu: openSubMenu, dismissSubMenu: dismissSubMenu, dismissMenu: dismissMenu, getSubmenuTarget: _this._getSubmenuTarget }, itemProps)),\n _this._renderAriaDescription(ariaDescription, classNames.screenReaderText))); }));\n };\n return ContextualMenuButton;\n}(ContextualMenuItemWrapper));\nexport { ContextualMenuButton };\n//# sourceMappingURL=ContextualMenuButton.js.map","export var getStyles = function (props) {\n // eslint-disable-next-line deprecation/deprecation\n var theme = props.theme, getClassNames = props.getClassNames, className = props.className;\n if (!theme) {\n throw new Error('Theme is undefined or null.');\n }\n if (getClassNames) {\n var names = getClassNames(theme);\n return {\n wrapper: [names.wrapper],\n divider: [names.divider],\n };\n }\n return {\n wrapper: [\n {\n display: 'inline-flex',\n height: '100%',\n alignItems: 'center',\n },\n className,\n ],\n divider: [\n {\n width: 1,\n height: '100%',\n backgroundColor: theme.palette.neutralTertiaryAlt,\n },\n ],\n };\n};\n//# sourceMappingURL=VerticalDivider.styles.js.map","import * as React from 'react';\nimport { classNamesFunction } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nexport var VerticalDividerBase = React.forwardRef(function (props, ref) {\n // eslint-disable-next-line deprecation/deprecation\n var styles = props.styles, theme = props.theme, deprecatedGetClassNames = props.getClassNames, className = props.className;\n var classNames = getClassNames(styles, { theme: theme, getClassNames: deprecatedGetClassNames, className: className });\n return (React.createElement(\"span\", { className: classNames.wrapper, ref: ref },\n React.createElement(\"span\", { className: classNames.divider })));\n});\nVerticalDividerBase.displayName = 'VerticalDividerBase';\n//# sourceMappingURL=VerticalDivider.base.js.map","import { getStyles } from './VerticalDivider.styles';\nimport { VerticalDividerBase } from './VerticalDivider.base';\nimport { styled } from '../../Utilities';\nexport var VerticalDivider = styled(VerticalDividerBase, getStyles, undefined, {\n scope: 'VerticalDivider',\n});\n//# sourceMappingURL=VerticalDivider.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { buttonProperties, getNativeProps, KeyCodes, mergeAriaAttributeValues, memoizeFunction, Async, EventGroup, getId, composeComponentAs, } from '../../../Utilities';\nimport { ContextualMenuItem } from '../ContextualMenuItem';\nimport { getSplitButtonVerticalDividerClassNames } from '../ContextualMenu.classNames';\nimport { KeytipData } from '../../../KeytipData';\nimport { getIsChecked, getMenuItemAriaRole, hasSubmenu, isItemDisabled } from '../../../utilities/contextualMenu/index';\nimport { VerticalDivider } from '../../../Divider';\nimport { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';\nvar TouchIdleDelay = 500; /* ms */\nvar ContextualMenuSplitButton = /** @class */ (function (_super) {\n __extends(ContextualMenuSplitButton, _super);\n function ContextualMenuSplitButton(props) {\n var _this = _super.call(this, props) || this;\n _this._getMemoizedMenuButtonKeytipProps = memoizeFunction(function (keytipProps) {\n return __assign(__assign({}, keytipProps), { hasMenu: true });\n });\n _this._onItemKeyDown = function (ev) {\n var _a = _this.props, item = _a.item, onItemKeyDown = _a.onItemKeyDown;\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n _this._executeItemClick(ev);\n ev.preventDefault();\n ev.stopPropagation();\n }\n else if (onItemKeyDown) {\n onItemKeyDown(item, ev);\n }\n };\n _this._getSubmenuTarget = function () {\n return _this._splitButton;\n };\n _this._renderAriaDescription = function (ariaDescription, className) {\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan\n return ariaDescription ? (React.createElement(\"span\", { id: _this._ariaDescriptionId, className: className }, ariaDescription)) : null;\n };\n _this._onItemMouseEnterPrimary = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseEnter = _a.onItemMouseEnter;\n if (onItemMouseEnter) {\n onItemMouseEnter(__assign(__assign({}, item), { subMenuProps: undefined, items: undefined }), ev, _this._splitButton);\n }\n };\n _this._onItemMouseEnterIcon = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseEnter = _a.onItemMouseEnter;\n if (onItemMouseEnter) {\n onItemMouseEnter(item, ev, _this._splitButton);\n }\n };\n _this._onItemMouseMovePrimary = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseMove = _a.onItemMouseMove;\n if (onItemMouseMove) {\n onItemMouseMove(__assign(__assign({}, item), { subMenuProps: undefined, items: undefined }), ev, _this._splitButton);\n }\n };\n _this._onItemMouseMoveIcon = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseMove = _a.onItemMouseMove;\n if (onItemMouseMove) {\n onItemMouseMove(item, ev, _this._splitButton);\n }\n };\n _this._onIconItemClick = function (ev) {\n var _a = _this.props, item = _a.item, onItemClickBase = _a.onItemClickBase;\n if (onItemClickBase) {\n onItemClickBase(item, ev, (_this._splitButton ? _this._splitButton : ev.currentTarget));\n }\n };\n _this._executeItemClick = function (ev) {\n var _a = _this.props, item = _a.item, executeItemClick = _a.executeItemClick, onItemClick = _a.onItemClick;\n if (item.disabled || item.isDisabled) {\n return;\n }\n if (_this._processingTouch && !item.canCheck && onItemClick) {\n return onItemClick(item, ev);\n }\n if (executeItemClick) {\n executeItemClick(item, ev);\n }\n };\n _this._onTouchStart = function (ev) {\n if (_this._splitButton && !('onpointerdown' in _this._splitButton)) {\n _this._handleTouchAndPointerEvent(ev);\n }\n };\n _this._onPointerDown = function (ev) {\n if (ev.pointerType === 'touch') {\n _this._handleTouchAndPointerEvent(ev);\n ev.preventDefault();\n ev.stopImmediatePropagation();\n }\n };\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n _this._dismissLabelId = getId();\n return _this;\n }\n ContextualMenuSplitButton.prototype.componentDidMount = function () {\n if (this._splitButton && 'onpointerdown' in this._splitButton) {\n this._events.on(this._splitButton, 'pointerdown', this._onPointerDown, true);\n }\n };\n ContextualMenuSplitButton.prototype.componentWillUnmount = function () {\n this._async.dispose();\n this._events.dispose();\n };\n ContextualMenuSplitButton.prototype.render = function () {\n var _this = this;\n var _a;\n var _b = this.props, item = _b.item, classNames = _b.classNames, index = _b.index, focusableElementIndex = _b.focusableElementIndex, totalItemCount = _b.totalItemCount, hasCheckmarks = _b.hasCheckmarks, hasIcons = _b.hasIcons, onItemMouseLeave = _b.onItemMouseLeave, expandedMenuItemKey = _b.expandedMenuItemKey;\n var itemHasSubmenu = hasSubmenu(item);\n var keytipProps = item.keytipProps;\n if (keytipProps) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n // Check for ariaDescription to set the _ariaDescriptionId and render a hidden span with\n // the description in it to be added to ariaDescribedBy\n var ariaDescription = item.ariaDescription;\n if (ariaDescription) {\n this._ariaDescriptionId = getId();\n }\n var ariaChecked = (_a = getIsChecked(item)) !== null && _a !== void 0 ? _a : undefined;\n return (React.createElement(KeytipData, { keytipProps: keytipProps, disabled: isItemDisabled(item) }, function (keytipAttributes) { return (React.createElement(\"div\", { \"data-ktp-target\": keytipAttributes['data-ktp-target'], ref: function (splitButton) { return (_this._splitButton = splitButton); }, role: getMenuItemAriaRole(item), \"aria-label\": item.ariaLabel, className: classNames.splitContainer, \"aria-disabled\": isItemDisabled(item), \"aria-expanded\": itemHasSubmenu ? item.key === expandedMenuItemKey : undefined, \"aria-haspopup\": true, \"aria-describedby\": mergeAriaAttributeValues(item.ariaDescribedBy, ariaDescription ? _this._ariaDescriptionId : undefined, keytipAttributes['aria-describedby']), \"aria-checked\": ariaChecked, \"aria-posinset\": focusableElementIndex + 1, \"aria-setsize\": totalItemCount, onMouseEnter: _this._onItemMouseEnterPrimary, onMouseLeave: onItemMouseLeave ? onItemMouseLeave.bind(_this, __assign(__assign({}, item), { subMenuProps: null, items: null })) : undefined, onMouseMove: _this._onItemMouseMovePrimary, onKeyDown: _this._onItemKeyDown, onClick: _this._executeItemClick, onTouchStart: _this._onTouchStart, tabIndex: 0, \"data-is-focusable\": true, \"aria-roledescription\": item['aria-roledescription'] },\n _this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks, hasIcons),\n _this._renderSplitDivider(item),\n _this._renderSplitIconButton(item, classNames, index, keytipAttributes),\n _this._renderAriaDescription(ariaDescription, classNames.screenReaderText))); }));\n };\n ContextualMenuSplitButton.prototype._renderSplitPrimaryButton = function (item, \n // eslint-disable-next-line deprecation/deprecation\n classNames, index, hasCheckmarks, hasIcons) {\n var _a = this.props, _b = _a.contextualMenuItemAs, ChildrenRenderer = _b === void 0 ? ContextualMenuItem : _b, onItemClick = _a.onItemClick;\n var itemProps = {\n key: item.key,\n disabled: isItemDisabled(item) || item.primaryDisabled,\n /* eslint-disable deprecation/deprecation */\n name: item.name,\n text: item.text || item.name,\n secondaryText: item.secondaryText,\n /* eslint-enable deprecation/deprecation */\n className: classNames.splitPrimary,\n canCheck: item.canCheck,\n isChecked: item.isChecked,\n checked: item.checked,\n iconProps: item.iconProps,\n id: this._dismissLabelId,\n onRenderIcon: item.onRenderIcon,\n data: item.data,\n 'data-is-focusable': false,\n };\n var itemComponentProps = item.itemProps;\n return (React.createElement(\"button\", __assign({}, getNativeProps(itemProps, buttonProperties)),\n React.createElement(ChildrenRenderer, __assign({ \"data-is-focusable\": false, item: itemProps, classNames: classNames, index: index, onCheckmarkClick: hasCheckmarks && onItemClick ? onItemClick : undefined, hasIcons: hasIcons }, itemComponentProps))));\n };\n ContextualMenuSplitButton.prototype._renderSplitDivider = function (item) {\n var getDividerClassNames = item.getSplitButtonVerticalDividerClassNames || getSplitButtonVerticalDividerClassNames;\n return React.createElement(VerticalDivider, { getClassNames: getDividerClassNames });\n };\n ContextualMenuSplitButton.prototype._renderSplitIconButton = function (item, classNames, // eslint-disable-line deprecation/deprecation\n index, keytipAttributes) {\n var _a = this.props, onItemMouseLeave = _a.onItemMouseLeave, onItemMouseDown = _a.onItemMouseDown, openSubMenu = _a.openSubMenu, dismissSubMenu = _a.dismissSubMenu, dismissMenu = _a.dismissMenu;\n var ChildrenRenderer = ContextualMenuItem;\n if (this.props.item.contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(this.props.item.contextualMenuItemAs, ChildrenRenderer);\n }\n if (this.props.contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(this.props.contextualMenuItemAs, ChildrenRenderer);\n }\n var itemProps = {\n onClick: this._onIconItemClick,\n disabled: isItemDisabled(item),\n className: classNames.splitMenu,\n subMenuProps: item.subMenuProps,\n submenuIconProps: item.submenuIconProps,\n split: true,\n key: item.key,\n 'aria-labelledby': this._dismissLabelId,\n };\n var buttonProps = __assign(__assign({}, getNativeProps(itemProps, buttonProperties)), {\n onMouseEnter: this._onItemMouseEnterIcon,\n onMouseLeave: onItemMouseLeave ? onItemMouseLeave.bind(this, item) : undefined,\n onMouseDown: function (ev) {\n return onItemMouseDown ? onItemMouseDown(item, ev) : undefined;\n },\n onMouseMove: this._onItemMouseMoveIcon,\n 'data-is-focusable': false,\n 'data-ktp-execute-target': keytipAttributes['data-ktp-execute-target'],\n 'aria-haspopup': true,\n });\n var itemComponentProps = item.itemProps;\n return (React.createElement(\"button\", __assign({}, buttonProps),\n React.createElement(ChildrenRenderer, __assign({ componentRef: item.componentRef, item: itemProps, classNames: classNames, index: index, hasIcons: false, openSubMenu: openSubMenu, dismissSubMenu: dismissSubMenu, dismissMenu: dismissMenu, getSubmenuTarget: this._getSubmenuTarget }, itemComponentProps))));\n };\n ContextualMenuSplitButton.prototype._handleTouchAndPointerEvent = function (ev) {\n var _this = this;\n var onTap = this.props.onTap;\n if (onTap) {\n onTap(ev);\n }\n // If we already have an existing timeout from a previous touch/pointer event\n // cancel that timeout so we can set a new one.\n if (this._lastTouchTimeoutId) {\n this._async.clearTimeout(this._lastTouchTimeoutId);\n this._lastTouchTimeoutId = undefined;\n }\n this._processingTouch = true;\n this._lastTouchTimeoutId = this._async.setTimeout(function () {\n _this._processingTouch = false;\n _this._lastTouchTimeoutId = undefined;\n }, TouchIdleDelay);\n };\n return ContextualMenuSplitButton;\n}(ContextualMenuItemWrapper));\nexport { ContextualMenuSplitButton };\n//# sourceMappingURL=ContextualMenuSplitButton.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { hoistMethods, unhoistMethods } from '../../Utilities';\nvar BaseDecorator = /** @class */ (function (_super) {\n __extends(BaseDecorator, _super);\n function BaseDecorator(props) {\n var _this = _super.call(this, props) || this;\n _this._updateComposedComponentRef = _this._updateComposedComponentRef.bind(_this);\n return _this;\n }\n /**\n * Updates the ref to the component composed by the decorator, which will also take care of hoisting\n * (and unhoisting as appropriate) methods from said component.\n *\n * Pass this method as the argument to the 'ref' property of the composed component.\n */\n BaseDecorator.prototype._updateComposedComponentRef = function (composedComponentInstance) {\n this._composedComponentInstance = composedComponentInstance;\n if (composedComponentInstance) {\n this._hoisted = hoistMethods(this, composedComponentInstance);\n }\n else if (this._hoisted) {\n unhoistMethods(this, this._hoisted);\n }\n };\n return BaseDecorator;\n}(React.Component));\nexport { BaseDecorator };\n//# sourceMappingURL=BaseDecorator.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { BaseDecorator } from './BaseDecorator';\nimport { getWindow, hoistStatics, EventGroup } from '../../Utilities';\nimport { WindowContext } from '../../WindowProvider';\nexport var ResponsiveMode;\n(function (ResponsiveMode) {\n /** Width \\<= 479px */\n ResponsiveMode[ResponsiveMode[\"small\"] = 0] = \"small\";\n /** Width \\> 479px and \\<= 639px */\n ResponsiveMode[ResponsiveMode[\"medium\"] = 1] = \"medium\";\n /** Width \\> 639px and \\<= 1023px */\n ResponsiveMode[ResponsiveMode[\"large\"] = 2] = \"large\";\n /** Width \\> 1023px and \\<= 1365px */\n ResponsiveMode[ResponsiveMode[\"xLarge\"] = 3] = \"xLarge\";\n /** Width \\> 1365px and \\<= 1919px */\n ResponsiveMode[ResponsiveMode[\"xxLarge\"] = 4] = \"xxLarge\";\n /** Width \\> 1919px */\n ResponsiveMode[ResponsiveMode[\"xxxLarge\"] = 5] = \"xxxLarge\";\n ResponsiveMode[ResponsiveMode[\"unknown\"] = 999] = \"unknown\";\n})(ResponsiveMode || (ResponsiveMode = {}));\nvar RESPONSIVE_MAX_CONSTRAINT = [479, 639, 1023, 1365, 1919, 99999999];\n/**\n * User specified mode to default to, useful for server side rendering scenarios.\n */\nvar _defaultMode;\n/**\n * Tracking the last mode we successfully rendered, which allows us to\n * paint initial renders with the correct size.\n */\nvar _lastMode;\n/**\n * Allows a server rendered scenario to provide a **default** responsive mode.\n * This WILL NOT trigger any updates to components that have already consumed the responsive mode!\n */\nexport function setResponsiveMode(responsiveMode) {\n _defaultMode = responsiveMode;\n}\n/**\n * Initializes the responsive mode to the current window size. This can be used to avoid\n * a re-render during first component mount since the window would otherwise not be measured\n * until after mounting.\n *\n * This WILL NOT trigger any updates to components that have already consumed the responsive mode!\n */\nexport function initializeResponsiveMode(element) {\n var currentWindow = getWindow(element);\n if (currentWindow) {\n getResponsiveMode(currentWindow);\n }\n}\nexport function getInitialResponsiveMode() {\n var _a;\n return (_a = _defaultMode !== null && _defaultMode !== void 0 ? _defaultMode : _lastMode) !== null && _a !== void 0 ? _a : ResponsiveMode.large;\n}\n/**\n * @deprecated Decorator usage is deprecated. Either call `getResponsiveMode` manually, or\n * use the `useResponsiveMode` hook within a function component.\n */\nexport function withResponsiveMode(ComposedComponent) {\n var _a;\n // eslint-disable-next-line deprecation/deprecation\n var resultClass = (_a = /** @class */ (function (_super) {\n __extends(WithResponsiveMode, _super);\n function WithResponsiveMode(props) {\n var _this = _super.call(this, props) || this;\n _this._onResize = function () {\n var responsiveMode = getResponsiveMode(_this.context.window);\n if (responsiveMode !== _this.state.responsiveMode) {\n _this.setState({\n responsiveMode: responsiveMode,\n });\n }\n };\n _this._events = new EventGroup(_this);\n _this._updateComposedComponentRef = _this._updateComposedComponentRef.bind(_this);\n _this.state = {\n responsiveMode: getInitialResponsiveMode(),\n };\n return _this;\n }\n WithResponsiveMode.prototype.componentDidMount = function () {\n this._events.on(this.context.window, 'resize', this._onResize);\n this._onResize();\n };\n WithResponsiveMode.prototype.componentWillUnmount = function () {\n this._events.dispose();\n };\n WithResponsiveMode.prototype.render = function () {\n var responsiveMode = this.state.responsiveMode;\n return responsiveMode === ResponsiveMode.unknown ? null : (React.createElement(ComposedComponent, __assign({ ref: this._updateComposedComponentRef, responsiveMode: responsiveMode }, this.props)));\n };\n return WithResponsiveMode;\n }(BaseDecorator)),\n _a.contextType = WindowContext,\n _a);\n return hoistStatics(ComposedComponent, resultClass);\n}\nfunction getWidthOfCurrentWindow(currentWindow) {\n try {\n return currentWindow.document.documentElement.clientWidth;\n }\n catch (e) {\n return currentWindow.innerWidth;\n }\n}\n/**\n * Hook to get the current responsive mode (window size category).\n * @param currentWindow - Use this window when determining the responsive mode.\n */\nexport function getResponsiveMode(currentWindow) {\n var responsiveMode = ResponsiveMode.small;\n if (currentWindow) {\n try {\n while (getWidthOfCurrentWindow(currentWindow) > RESPONSIVE_MAX_CONSTRAINT[responsiveMode]) {\n responsiveMode++;\n }\n }\n catch (e) {\n // Return a best effort result in cases where we're in the browser but it throws on getting innerWidth.\n responsiveMode = getInitialResponsiveMode();\n }\n // Tracking last mode just gives us a better default in future renders,\n // which avoids starting with the wrong value if we've measured once.\n _lastMode = responsiveMode;\n }\n else {\n if (_defaultMode !== undefined) {\n responsiveMode = _defaultMode;\n }\n else {\n throw new Error('Content was rendered in a server environment without providing a default responsive mode. ' +\n 'Call setResponsiveMode to define what the responsive mode is.');\n }\n }\n return responsiveMode;\n}\n//# sourceMappingURL=withResponsiveMode.js.map","import * as React from 'react';\nimport { getWindow } from '@fluentui/utilities';\nimport { useOnEvent } from '@fluentui/react-hooks';\nimport { getResponsiveMode, getInitialResponsiveMode } from '../decorators/withResponsiveMode';\nimport { useWindow } from '../../WindowProvider';\n/**\n * Hook to get the current responsive mode (window size category).\n * @param elementRef - Use this element's parent window when determining the responsive mode.\n * @param overrideResponsiveMode - Override the responsive mode. If this param is present, it's always returned.\n */\nexport var useResponsiveMode = function (elementRef, overrideResponsiveMode) {\n var _a = React.useState(getInitialResponsiveMode()), lastResponsiveMode = _a[0], setLastResponsiveMode = _a[1];\n var onResize = React.useCallback(function () {\n var newResponsiveMode = getResponsiveMode(getWindow(elementRef.current));\n // Setting the same value should not cause a re-render.\n if (lastResponsiveMode !== newResponsiveMode) {\n setLastResponsiveMode(newResponsiveMode);\n }\n }, [elementRef, lastResponsiveMode]);\n var win = useWindow();\n useOnEvent(win, 'resize', onResize);\n // Call resize function initially on mount, or if the override changes from defined to undefined\n // (the effect will run on all override changes, but onResize will only be called if it changed to undefined)\n React.useEffect(function () {\n if (overrideResponsiveMode === undefined) {\n onResize();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- only meant to run on mount or when override changes\n }, [overrideResponsiveMode]);\n return overrideResponsiveMode !== null && overrideResponsiveMode !== void 0 ? overrideResponsiveMode : lastResponsiveMode;\n};\n//# sourceMappingURL=useResponsiveMode.js.map","import * as React from 'react';\nexport var MenuContext = React.createContext({});\nexport var useMenuContext = function () {\n return React.useContext(MenuContext);\n};\n//# sourceMappingURL=MenuContext.js.map","import { __assign, __rest, __spreadArray } from \"tslib\";\nimport * as React from 'react';\nimport { ContextualMenuItemType } from './ContextualMenu.types';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '../../FocusZone';\nimport { divProperties, getNativeProps, shallowCompare, assign, classNamesFunction, css, getFirstFocusable, getLastFocusable, getRTL, KeyCodes, shouldWrapFocus, isIOS, isMac, memoizeFunction, getPropsWithDefaults, getDocument, FocusRects, composeComponentAs, } from '../../Utilities';\nimport { hasSubmenu, getIsChecked, isItemDisabled } from '../../utilities/contextualMenu/index';\nimport { Callout } from '../../Callout';\nimport { ContextualMenuItem } from './ContextualMenuItem';\nimport { ContextualMenuSplitButton, ContextualMenuButton, ContextualMenuAnchor, } from './ContextualMenuItemWrapper/index';\nimport { concatStyleSetsWithProps } from '../../Styling';\nimport { getItemStyles } from './ContextualMenu.classNames';\nimport { useTarget, usePrevious, useAsync, useWarnings, useId, useIsomorphicLayoutEffect, } from '@fluentui/react-hooks';\nimport { useResponsiveMode, ResponsiveMode } from '../../ResponsiveMode';\nimport { MenuContext } from '../../utilities/MenuContext/index';\nvar getClassNames = classNamesFunction();\nvar getContextualMenuItemClassNames = classNamesFunction();\n// The default ContextualMenu properties have no items and beak, the default submenu direction is right and top.\nvar DEFAULT_PROPS = {\n items: [],\n shouldFocusOnMount: true,\n gapSpace: 0,\n directionalHint: DirectionalHint.bottomAutoEdge,\n beakWidth: 16,\n};\n/* return number of menu items, excluding headers and dividers */\nfunction getItemCount(items) {\n var totalItemCount = 0;\n for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {\n var item = items_1[_i];\n if (item.itemType !== ContextualMenuItemType.Divider && item.itemType !== ContextualMenuItemType.Header) {\n var itemCount = item.customOnRenderListLength ? item.customOnRenderListLength : 1;\n totalItemCount += itemCount;\n }\n }\n return totalItemCount;\n}\nexport function getSubmenuItems(item, options) {\n var target = options === null || options === void 0 ? void 0 : options.target;\n // eslint-disable-next-line deprecation/deprecation\n var items = item.subMenuProps ? item.subMenuProps.items : item.items;\n if (items) {\n var overrideItems = [];\n for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {\n var subItem = items_2[_i];\n if (subItem.preferMenuTargetAsEventTarget) {\n // For sub-items which need an overridden target, intercept `onClick`\n var onClick = subItem.onClick, contextItem = __rest(subItem, [\"onClick\"]);\n overrideItems.push(__assign(__assign({}, contextItem), { onClick: getOnClickWithOverrideTarget(onClick, target) }));\n }\n else {\n overrideItems.push(subItem);\n }\n }\n return overrideItems;\n }\n}\n/**\n * Returns true if a list of menu items can contain a checkbox\n */\nexport function canAnyMenuItemsCheck(items) {\n return items.some(function (item) {\n if (item.canCheck) {\n return true;\n }\n // If the item is a section, check if any of the items in the section can check.\n if (item.sectionProps && item.sectionProps.items.some(function (submenuItem) { return submenuItem.canCheck === true; })) {\n return true;\n }\n return false;\n });\n}\nvar NavigationIdleDelay = 250; /* ms */\nvar COMPONENT_NAME = 'ContextualMenu';\nvar _getMenuItemStylesFunction = memoizeFunction(function () {\n var styles = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n styles[_i] = arguments[_i];\n }\n return function (styleProps) {\n return concatStyleSetsWithProps.apply(void 0, __spreadArray([styleProps, getItemStyles], styles, false));\n };\n});\n//#region Custom hooks\nfunction useVisibility(props, targetWindow) {\n var _a = props.hidden, hidden = _a === void 0 ? false : _a, onMenuDismissed = props.onMenuDismissed, onMenuOpened = props.onMenuOpened;\n var previousHidden = usePrevious(hidden);\n var onMenuOpenedRef = React.useRef(onMenuOpened);\n var onMenuClosedRef = React.useRef(onMenuDismissed);\n var propsRef = React.useRef(props);\n onMenuOpenedRef.current = onMenuOpened;\n onMenuClosedRef.current = onMenuDismissed;\n propsRef.current = props;\n React.useEffect(function () {\n var _a, _b;\n // Don't issue dismissed callbacks on initial mount\n if (hidden && previousHidden === false) {\n (_a = onMenuClosedRef.current) === null || _a === void 0 ? void 0 : _a.call(onMenuClosedRef, propsRef.current);\n }\n else if (!hidden && previousHidden !== false) {\n (_b = onMenuOpenedRef.current) === null || _b === void 0 ? void 0 : _b.call(onMenuOpenedRef, propsRef.current);\n }\n }, [hidden, previousHidden]);\n // Issue onDismissedCallback on unmount\n React.useEffect(function () { return function () { var _a; return (_a = onMenuClosedRef.current) === null || _a === void 0 ? void 0 : _a.call(onMenuClosedRef, propsRef.current); }; }, []);\n}\nfunction useSubMenuState(_a, dismiss) {\n var hidden = _a.hidden, items = _a.items, theme = _a.theme, className = _a.className, id = _a.id, menuTarget = _a.target;\n var _b = React.useState(), expandedMenuItemKey = _b[0], setExpandedMenuItemKey = _b[1];\n var _c = React.useState(), submenuTarget = _c[0], setSubmenuTarget = _c[1];\n /** True if the menu was expanded by mouse click OR hover (as opposed to by keyboard) */\n var _d = React.useState(), shouldFocusOnContainer = _d[0], setShouldFocusOnContainer = _d[1];\n var subMenuId = useId(COMPONENT_NAME, id);\n var closeSubMenu = React.useCallback(function () {\n setShouldFocusOnContainer(undefined);\n setExpandedMenuItemKey(undefined);\n setSubmenuTarget(undefined);\n }, []);\n var openSubMenu = React.useCallback(function (_a, target, focusContainer) {\n var submenuItemKey = _a.key;\n if (expandedMenuItemKey === submenuItemKey) {\n return;\n }\n target.focus();\n setShouldFocusOnContainer(focusContainer);\n setExpandedMenuItemKey(submenuItemKey);\n setSubmenuTarget(target);\n }, [expandedMenuItemKey]);\n React.useEffect(function () {\n if (hidden) {\n closeSubMenu();\n }\n }, [hidden, closeSubMenu]);\n var onSubMenuDismiss = useOnSubmenuDismiss(dismiss, closeSubMenu);\n var getSubmenuProps = function () {\n var item = findItemByKeyFromItems(expandedMenuItemKey, items);\n var submenuProps = null;\n if (item) {\n submenuProps = {\n items: getSubmenuItems(item, { target: menuTarget }),\n target: submenuTarget,\n onDismiss: onSubMenuDismiss,\n isSubMenu: true,\n id: subMenuId,\n shouldFocusOnMount: true,\n shouldFocusOnContainer: shouldFocusOnContainer,\n directionalHint: getRTL(theme) ? DirectionalHint.leftTopEdge : DirectionalHint.rightTopEdge,\n className: className,\n gapSpace: 0,\n isBeakVisible: false,\n };\n if (item.subMenuProps) {\n assign(submenuProps, item.subMenuProps);\n }\n if (item.preferMenuTargetAsEventTarget) {\n var onItemClick = item.onItemClick;\n submenuProps.onItemClick = getOnClickWithOverrideTarget(onItemClick, menuTarget);\n }\n }\n return submenuProps;\n };\n return [expandedMenuItemKey, openSubMenu, getSubmenuProps, onSubMenuDismiss];\n}\nfunction useShouldUpdateFocusOnMouseMove(_a) {\n var delayUpdateFocusOnHover = _a.delayUpdateFocusOnHover, hidden = _a.hidden;\n var shouldUpdateFocusOnMouseEvent = React.useRef(!delayUpdateFocusOnHover);\n var gotMouseMove = React.useRef(false);\n React.useEffect(function () {\n shouldUpdateFocusOnMouseEvent.current = !delayUpdateFocusOnHover;\n gotMouseMove.current = hidden ? false : !delayUpdateFocusOnHover && gotMouseMove.current;\n }, [delayUpdateFocusOnHover, hidden]);\n var onMenuFocusCapture = React.useCallback(function () {\n if (delayUpdateFocusOnHover) {\n shouldUpdateFocusOnMouseEvent.current = false;\n }\n }, [delayUpdateFocusOnHover]);\n return [shouldUpdateFocusOnMouseEvent, gotMouseMove, onMenuFocusCapture];\n}\nfunction usePreviousActiveElement(_a, targetWindow, hostElement) {\n var hidden = _a.hidden, onRestoreFocus = _a.onRestoreFocus;\n var previousActiveElement = React.useRef();\n var tryFocusPreviousActiveElement = React.useCallback(function (options) {\n var _a, _b;\n if (onRestoreFocus) {\n onRestoreFocus(options);\n }\n else if (options === null || options === void 0 ? void 0 : options.documentContainsFocus) {\n // Make sure that the focus method actually exists\n // In some cases the object might exist but not be a real element.\n // This is primarily for IE 11 and should be removed once IE 11 is no longer in use.\n (_b = (_a = previousActiveElement.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n }\n }, [onRestoreFocus]);\n useIsomorphicLayoutEffect(function () {\n var _a, _b;\n if (!hidden) {\n var newElement = targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document.activeElement;\n if (!((_a = hostElement.current) === null || _a === void 0 ? void 0 : _a.contains(newElement)) && newElement.tagName !== 'BODY') {\n previousActiveElement.current = newElement;\n }\n }\n else if (previousActiveElement.current) {\n tryFocusPreviousActiveElement({\n originalElement: previousActiveElement.current,\n containsFocus: true,\n documentContainsFocus: ((_b = getDocument()) === null || _b === void 0 ? void 0 : _b.hasFocus()) || false,\n });\n previousActiveElement.current = undefined;\n }\n }, [hidden, targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document.activeElement, tryFocusPreviousActiveElement, hostElement]);\n return [tryFocusPreviousActiveElement];\n}\nfunction useKeyHandlers(_a, dismiss, hostElement, openSubMenu) {\n var theme = _a.theme, isSubMenu = _a.isSubMenu, _b = _a.focusZoneProps, _c = _b === void 0 ? {} : _b, checkForNoWrap = _c.checkForNoWrap, _d = _c.direction, focusZoneDirection = _d === void 0 ? FocusZoneDirection.vertical : _d;\n /** True if the most recent keydown event was for alt (option) or meta (command). */\n var lastKeyDownWasAltOrMeta = React.useRef();\n /**\n * Calls `shouldHandleKey` to determine whether the keyboard event should be handled;\n * if so, stops event propagation and dismisses menu(s).\n * @param ev - The keyboard event.\n * @param shouldHandleKey - Returns whether we should handle this keyboard event.\n * @param dismissAllMenus - If true, dismiss all menus. Otherwise, dismiss only the current menu.\n * Only does anything if `shouldHandleKey` returns true.\n * @returns Whether the event was handled.\n */\n var keyHandler = function (ev, shouldHandleKey, dismissAllMenus) {\n var handled = false;\n if (shouldHandleKey(ev)) {\n dismiss(ev, dismissAllMenus);\n ev.preventDefault();\n ev.stopPropagation();\n handled = true;\n }\n return handled;\n };\n /**\n * Checks if the submenu should be closed\n */\n var shouldCloseSubMenu = function (ev) {\n var submenuCloseKey = getRTL(theme) ? KeyCodes.right : KeyCodes.left;\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which !== submenuCloseKey || !isSubMenu) {\n return false;\n }\n return !!(focusZoneDirection === FocusZoneDirection.vertical ||\n (checkForNoWrap && !shouldWrapFocus(ev.target, 'data-no-horizontal-wrap')));\n };\n var shouldHandleKeyDown = function (ev) {\n return (\n // eslint-disable-next-line deprecation/deprecation\n ev.which === KeyCodes.escape ||\n shouldCloseSubMenu(ev) ||\n // eslint-disable-next-line deprecation/deprecation\n (ev.which === KeyCodes.up && (ev.altKey || ev.metaKey)));\n };\n var onKeyDown = function (ev) {\n // Take note if we are processing an alt (option) or meta (command) keydown.\n // See comment in shouldHandleKeyUp for reasoning.\n lastKeyDownWasAltOrMeta.current = isAltOrMeta(ev);\n // On Mac, pressing escape dismisses all levels of native context menus\n // eslint-disable-next-line deprecation/deprecation\n var dismissAllMenus = ev.which === KeyCodes.escape && (isMac() || isIOS());\n return keyHandler(ev, shouldHandleKeyDown, dismissAllMenus);\n };\n /**\n * We close the menu on key up only if ALL of the following are true:\n * - Most recent key down was alt or meta (command)\n * - The alt/meta key down was NOT followed by some other key (such as down/up arrow to\n * expand/collapse the menu)\n * - We're not on a Mac (or iOS)\n *\n * This is because on Windows, pressing alt moves focus to the application menu bar or similar,\n * closing any open context menus. There is not a similar behavior on Macs.\n */\n var shouldHandleKeyUp = function (ev) {\n var keyPressIsAltOrMetaAlone = lastKeyDownWasAltOrMeta.current && isAltOrMeta(ev);\n lastKeyDownWasAltOrMeta.current = false;\n return !!keyPressIsAltOrMetaAlone && !(isIOS() || isMac());\n };\n var onKeyUp = function (ev) {\n return keyHandler(ev, shouldHandleKeyUp, true /* dismissAllMenus */);\n };\n var onMenuKeyDown = function (ev) {\n // Mark as handled if onKeyDown returns true (for handling collapse cases)\n // or if we are attempting to expand a submenu\n var handled = onKeyDown(ev);\n if (handled || !hostElement.current) {\n return;\n }\n // If we have a modifier key being pressed, we do not want to move focus.\n // Otherwise, handle up and down keys.\n var hasModifier = !!(ev.altKey || ev.metaKey);\n // eslint-disable-next-line deprecation/deprecation\n var isUp = ev.which === KeyCodes.up;\n // eslint-disable-next-line deprecation/deprecation\n var isDown = ev.which === KeyCodes.down;\n if (!hasModifier && (isUp || isDown)) {\n var elementToFocus = isUp\n ? getLastFocusable(hostElement.current, hostElement.current.lastChild, true)\n : getFirstFocusable(hostElement.current, hostElement.current.firstChild, true);\n if (elementToFocus) {\n elementToFocus.focus();\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n };\n var onItemKeyDown = function (item, ev) {\n var openKey = getRTL(theme) ? KeyCodes.left : KeyCodes.right;\n if (!item.disabled &&\n // eslint-disable-next-line deprecation/deprecation\n (ev.which === openKey || ev.which === KeyCodes.enter || (ev.which === KeyCodes.down && (ev.altKey || ev.metaKey)))) {\n openSubMenu(item, ev.currentTarget);\n ev.preventDefault();\n }\n };\n return [onKeyDown, onKeyUp, onMenuKeyDown, onItemKeyDown];\n}\nfunction useScrollHandler(asyncTracker) {\n var isScrollIdle = React.useRef(true);\n var scrollIdleTimeoutId = React.useRef();\n /**\n * Scroll handler for the callout to make sure the mouse events\n * for updating focus are not interacting during scroll\n */\n var onScroll = function () {\n if (!isScrollIdle.current && scrollIdleTimeoutId.current !== undefined) {\n asyncTracker.clearTimeout(scrollIdleTimeoutId.current);\n scrollIdleTimeoutId.current = undefined;\n }\n else {\n isScrollIdle.current = false;\n }\n scrollIdleTimeoutId.current = asyncTracker.setTimeout(function () {\n isScrollIdle.current = true;\n }, NavigationIdleDelay);\n };\n return [onScroll, isScrollIdle];\n}\nfunction useOnSubmenuDismiss(dismiss, closeSubMenu) {\n var isMountedRef = React.useRef(false);\n React.useEffect(function () {\n isMountedRef.current = true;\n return function () {\n isMountedRef.current = false;\n };\n }, []);\n /**\n * This function is called ASYNCHRONOUSLY, and so there is a chance it is called\n * after the component is unmounted. The isMountedRef is added to prevent\n * from calling setState() after unmount. Do NOT copy this pattern in synchronous\n * code.\n */\n var onSubMenuDismiss = function (ev, dismissAll) {\n if (dismissAll) {\n dismiss(ev, dismissAll);\n }\n else if (isMountedRef.current) {\n closeSubMenu();\n }\n };\n return onSubMenuDismiss;\n}\nfunction useSubmenuEnterTimer(_a, asyncTracker) {\n var _b = _a.subMenuHoverDelay, subMenuHoverDelay = _b === void 0 ? NavigationIdleDelay : _b;\n var enterTimerRef = React.useRef(undefined);\n var cancelSubMenuTimer = function () {\n if (enterTimerRef.current !== undefined) {\n asyncTracker.clearTimeout(enterTimerRef.current);\n enterTimerRef.current = undefined;\n }\n };\n var startSubmenuTimer = function (onTimerExpired) {\n enterTimerRef.current = asyncTracker.setTimeout(function () {\n onTimerExpired();\n cancelSubMenuTimer();\n }, subMenuHoverDelay);\n };\n return [cancelSubMenuTimer, startSubmenuTimer, enterTimerRef];\n}\nfunction useMouseHandlers(props, isScrollIdle, subMenuEntryTimer, targetWindow, shouldUpdateFocusOnMouseEvent, gotMouseMove, expandedMenuItemKey, hostElement, startSubmenuTimer, cancelSubMenuTimer, openSubMenu, onSubMenuDismiss, dismiss) {\n var menuTarget = props.target;\n var onItemMouseEnterBase = function (item, ev, target) {\n if (shouldUpdateFocusOnMouseEvent.current) {\n gotMouseMove.current = true;\n }\n if (shouldIgnoreMouseEvent()) {\n return;\n }\n updateFocusOnMouseEvent(item, ev, target);\n };\n var onItemMouseMoveBase = function (item, ev, target) {\n var targetElement = ev.currentTarget;\n // Always do this check to make sure we record a mouseMove if needed (even if we are timed out)\n if (shouldUpdateFocusOnMouseEvent.current) {\n gotMouseMove.current = true;\n }\n else {\n return;\n }\n if (!isScrollIdle.current ||\n subMenuEntryTimer.current !== undefined ||\n targetElement === (targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document.activeElement)) {\n return;\n }\n updateFocusOnMouseEvent(item, ev, target);\n };\n var shouldIgnoreMouseEvent = function () {\n return !isScrollIdle.current || !gotMouseMove.current;\n };\n var onMouseItemLeave = function (item, ev) {\n var _a;\n if (shouldIgnoreMouseEvent()) {\n return;\n }\n cancelSubMenuTimer();\n if (expandedMenuItemKey !== undefined) {\n return;\n }\n /**\n * IE11 focus() method forces parents to scroll to top of element.\n * Edge and IE expose a setActive() function for focusable divs that\n * sets the page focus but does not scroll the parent element.\n */\n if (hostElement.current.setActive) {\n try {\n hostElement.current.setActive();\n }\n catch (e) {\n /* no-op */\n }\n }\n else {\n (_a = hostElement.current) === null || _a === void 0 ? void 0 : _a.focus();\n }\n };\n /**\n * Handles updating focus when mouseEnter or mouseMove fire.\n * As part of updating focus, This function will also update\n * the expand/collapse state accordingly.\n */\n var updateFocusOnMouseEvent = function (item, ev, target) {\n var targetElement = target ? target : ev.currentTarget;\n if (item.key === expandedMenuItemKey) {\n return;\n }\n cancelSubMenuTimer();\n // If the menu is not expanded we can update focus without any delay\n if (expandedMenuItemKey === undefined) {\n targetElement.focus();\n }\n // Delay updating expanding/dismissing the submenu\n // and only set focus if we have not already done so\n if (hasSubmenu(item)) {\n ev.stopPropagation();\n startSubmenuTimer(function () {\n targetElement.focus();\n openSubMenu(item, targetElement, true);\n });\n }\n else {\n startSubmenuTimer(function () {\n onSubMenuDismiss(ev);\n targetElement.focus();\n });\n }\n };\n var onItemClick = function (item, ev) {\n onItemClickBase(item, ev, ev.currentTarget);\n };\n var onItemClickBase = function (item, ev, target) {\n var items = getSubmenuItems(item, { target: menuTarget });\n // Cancel an async menu item hover timeout action from being taken and instead\n // just trigger the click event instead.\n cancelSubMenuTimer();\n if (!hasSubmenu(item) && (!items || !items.length)) {\n // This is an item without a menu. Click it.\n executeItemClick(item, ev);\n }\n else {\n if (item.key !== expandedMenuItemKey) {\n // This has a collapsed sub menu. Expand it.\n // focus on the container by default when the menu is opened with a click event\n // this differentiates from a keyboard interaction triggering the click event\n var shouldFocusOnContainer = typeof props.shouldFocusOnContainer === 'boolean'\n ? props.shouldFocusOnContainer\n : ev.nativeEvent.pointerType === 'mouse';\n openSubMenu(item, target, shouldFocusOnContainer);\n }\n }\n ev.stopPropagation();\n ev.preventDefault();\n };\n var onAnchorClick = function (item, ev) {\n executeItemClick(item, ev);\n ev.stopPropagation();\n };\n var executeItemClick = function (item, ev) {\n if (item.disabled || item.isDisabled) {\n return;\n }\n if (item.preferMenuTargetAsEventTarget) {\n overrideTarget(ev, menuTarget);\n }\n var shouldDismiss = false;\n if (item.onClick) {\n shouldDismiss = !!item.onClick(ev, item);\n }\n else if (props.onItemClick) {\n shouldDismiss = !!props.onItemClick(ev, item);\n }\n if (shouldDismiss || !ev.defaultPrevented) {\n dismiss(ev, true);\n }\n };\n return [\n onItemMouseEnterBase,\n onItemMouseMoveBase,\n onMouseItemLeave,\n onItemClick,\n onAnchorClick,\n executeItemClick,\n onItemClickBase,\n ];\n}\n//#endregion\nexport var ContextualMenuBase = React.memo(React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var _a;\n var _b = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults), ref = _b.ref, props = __rest(_b, [\"ref\"]);\n var hostElement = React.useRef(null);\n var asyncTracker = useAsync();\n var menuId = useId(COMPONENT_NAME, props.id);\n useWarnings({\n name: COMPONENT_NAME,\n props: props,\n deprecations: {\n getMenuClassNames: 'styles',\n },\n });\n var dismiss = function (ev, dismissAll) { var _a; return (_a = props.onDismiss) === null || _a === void 0 ? void 0 : _a.call(props, ev, dismissAll); };\n var _c = useTarget(props.target, hostElement), targetRef = _c[0], targetWindow = _c[1];\n var tryFocusPreviousActiveElement = usePreviousActiveElement(props, targetWindow, hostElement)[0];\n var _d = useSubMenuState(props, dismiss), expandedMenuItemKey = _d[0], openSubMenu = _d[1], getSubmenuProps = _d[2], onSubMenuDismiss = _d[3];\n var _e = useShouldUpdateFocusOnMouseMove(props), shouldUpdateFocusOnMouseEvent = _e[0], gotMouseMove = _e[1], onMenuFocusCapture = _e[2];\n var _f = useScrollHandler(asyncTracker), onScroll = _f[0], isScrollIdle = _f[1];\n var _g = useSubmenuEnterTimer(props, asyncTracker), cancelSubMenuTimer = _g[0], startSubmenuTimer = _g[1], subMenuEntryTimer = _g[2];\n var responsiveMode = useResponsiveMode(hostElement, props.responsiveMode);\n useVisibility(props, targetWindow);\n var _h = useKeyHandlers(props, dismiss, hostElement, openSubMenu), onKeyDown = _h[0], onKeyUp = _h[1], onMenuKeyDown = _h[2], onItemKeyDown = _h[3];\n var _j = useMouseHandlers(props, isScrollIdle, subMenuEntryTimer, targetWindow, shouldUpdateFocusOnMouseEvent, gotMouseMove, expandedMenuItemKey, hostElement, startSubmenuTimer, cancelSubMenuTimer, openSubMenu, onSubMenuDismiss, dismiss), onItemMouseEnterBase = _j[0], onItemMouseMoveBase = _j[1], onMouseItemLeave = _j[2], onItemClick = _j[3], onAnchorClick = _j[4], executeItemClick = _j[5], onItemClickBase = _j[6];\n //#region Render helpers\n var onDefaultRenderMenuList = function (menuListProps, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames, defaultRender) {\n var indexCorrection = 0;\n var items = menuListProps.items, totalItemCount = menuListProps.totalItemCount, hasCheckmarks = menuListProps.hasCheckmarks, hasIcons = menuListProps.hasIcons;\n return (React.createElement(\"ul\", { className: menuClassNames.list, onKeyDown: onKeyDown, onKeyUp: onKeyUp, role: 'presentation' }, items.map(function (item, index) {\n var menuItem = renderMenuItem(item, index, indexCorrection, totalItemCount, hasCheckmarks, hasIcons, menuClassNames);\n if (item.itemType !== ContextualMenuItemType.Divider && item.itemType !== ContextualMenuItemType.Header) {\n var indexIncrease = item.customOnRenderListLength ? item.customOnRenderListLength : 1;\n indexCorrection += indexIncrease;\n }\n return menuItem;\n })));\n };\n var renderFocusZone = function (children, adjustedFocusZoneProps) {\n var _a = props.focusZoneAs, ChildrenRenderer = _a === void 0 ? FocusZone : _a;\n return React.createElement(ChildrenRenderer, __assign({}, adjustedFocusZoneProps), children);\n };\n /**\n * !!!IMPORTANT!!! Avoid mutating `item: IContextualMenuItem` argument. It will\n * cause the menu items to always re-render because the component update is based on shallow comparison.\n */\n var renderMenuItem = function (item, index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames) {\n var _a;\n var renderedItems = [];\n var iconProps = item.iconProps || { iconName: 'None' };\n var getItemClassNames = item.getItemClassNames, // eslint-disable-line deprecation/deprecation\n itemProps = item.itemProps;\n var styles = itemProps ? itemProps.styles : undefined;\n // We only send a dividerClassName when the item to be rendered is a divider.\n // For all other cases, the default divider style is used.\n var dividerClassName = item.itemType === ContextualMenuItemType.Divider ? item.className : undefined;\n var subMenuIconClassName = item.submenuIconProps ? item.submenuIconProps.className : '';\n // eslint-disable-next-line deprecation/deprecation\n var itemClassNames;\n // IContextualMenuItem#getItemClassNames for backwards compatibility\n // otherwise uses mergeStyles for class names.\n if (getItemClassNames) {\n itemClassNames = getItemClassNames(props.theme, isItemDisabled(item), expandedMenuItemKey === item.key, !!getIsChecked(item), !!item.href, iconProps.iconName !== 'None', item.className, dividerClassName, iconProps.className, subMenuIconClassName, item.primaryDisabled);\n }\n else {\n var itemStyleProps = {\n theme: props.theme,\n disabled: isItemDisabled(item),\n expanded: expandedMenuItemKey === item.key,\n checked: !!getIsChecked(item),\n isAnchorLink: !!item.href,\n knownIcon: iconProps.iconName !== 'None',\n itemClassName: item.className,\n dividerClassName: dividerClassName,\n iconClassName: iconProps.className,\n subMenuClassName: subMenuIconClassName,\n primaryDisabled: item.primaryDisabled,\n };\n // We need to generate default styles then override if styles are provided\n // since the ContextualMenu currently handles item classNames.\n itemClassNames = getContextualMenuItemClassNames(_getMenuItemStylesFunction((_a = menuClassNames.subComponentStyles) === null || _a === void 0 ? void 0 : _a.menuItem, styles), itemStyleProps);\n }\n // eslint-disable-next-line deprecation/deprecation\n if (item.text === '-' || item.name === '-') {\n item.itemType = ContextualMenuItemType.Divider;\n }\n switch (item.itemType) {\n case ContextualMenuItemType.Divider:\n renderedItems.push(renderSeparator(index, itemClassNames));\n break;\n case ContextualMenuItemType.Header:\n renderedItems.push(renderSeparator(index, itemClassNames));\n var headerItem = renderHeaderMenuItem(item, itemClassNames, menuClassNames, index, hasCheckmarks, hasIcons);\n renderedItems.push(renderListItem(headerItem, item.key || index, itemClassNames, item.title));\n break;\n case ContextualMenuItemType.Section:\n renderedItems.push(renderSectionItem(item, itemClassNames, menuClassNames, index, hasCheckmarks, hasIcons));\n break;\n default:\n var defaultRenderNormalItem = function () {\n return renderNormalItem(item, itemClassNames, index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons);\n };\n var menuItem = props.onRenderContextualMenuItem\n ? props.onRenderContextualMenuItem(item, defaultRenderNormalItem)\n : defaultRenderNormalItem();\n renderedItems.push(renderListItem(menuItem, item.key || index, itemClassNames, item.title));\n break;\n }\n // Since multiple nodes *could* be rendered, wrap them all in a fragment with this item's key.\n // This ensures the reconciler handles multi-item output per-node correctly and does not re-mount content.\n return React.createElement(React.Fragment, { key: item.key }, renderedItems);\n };\n var defaultMenuItemRenderer = function (item, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames) {\n var index = item.index, focusableElementIndex = item.focusableElementIndex, totalItemCount = item.totalItemCount, hasCheckmarks = item.hasCheckmarks, hasIcons = item.hasIcons;\n return renderMenuItem(item, index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons, menuClassNames);\n };\n var renderSectionItem = function (sectionItem, \n // eslint-disable-next-line deprecation/deprecation\n itemClassNames, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames, index, hasCheckmarks, hasIcons) {\n var sectionProps = sectionItem.sectionProps;\n if (!sectionProps) {\n return;\n }\n var headerItem;\n var groupProps;\n if (sectionProps.title) {\n var headerContextualMenuItem = undefined;\n var ariaLabelledby = '';\n if (typeof sectionProps.title === 'string') {\n // Since title is a user-facing string, it needs to be stripped\n // of whitespace in order to build a valid element ID\n var id_1 = menuId + sectionProps.title.replace(/\\s/g, '');\n headerContextualMenuItem = {\n key: \"section-\".concat(sectionProps.title, \"-title\"),\n itemType: ContextualMenuItemType.Header,\n text: sectionProps.title,\n id: id_1,\n };\n ariaLabelledby = id_1;\n }\n else {\n var id_2 = sectionProps.title.id || menuId + sectionProps.title.key.replace(/\\s/g, '');\n headerContextualMenuItem = __assign(__assign({}, sectionProps.title), { id: id_2 });\n ariaLabelledby = id_2;\n }\n if (headerContextualMenuItem) {\n groupProps = {\n role: 'group',\n 'aria-labelledby': ariaLabelledby,\n };\n headerItem = renderHeaderMenuItem(headerContextualMenuItem, itemClassNames, menuClassNames, index, hasCheckmarks, hasIcons);\n }\n }\n if (sectionProps.items && sectionProps.items.length > 0) {\n var correctedIndex_1 = 0;\n return (React.createElement(\"li\", { role: \"presentation\", key: sectionProps.key || sectionItem.key || \"section-\".concat(index) },\n React.createElement(\"div\", __assign({}, groupProps),\n React.createElement(\"ul\", { className: menuClassNames.list, role: \"presentation\" },\n sectionProps.topDivider && renderSeparator(index, itemClassNames, true, true),\n headerItem && renderListItem(headerItem, sectionItem.key || index, itemClassNames, sectionItem.title),\n sectionProps.items.map(function (contextualMenuItem, itemsIndex) {\n var menuItem = renderMenuItem(contextualMenuItem, itemsIndex, correctedIndex_1, getItemCount(sectionProps.items), hasCheckmarks, hasIcons, menuClassNames);\n if (contextualMenuItem.itemType !== ContextualMenuItemType.Divider &&\n contextualMenuItem.itemType !== ContextualMenuItemType.Header) {\n var indexIncrease = contextualMenuItem.customOnRenderListLength\n ? contextualMenuItem.customOnRenderListLength\n : 1;\n correctedIndex_1 += indexIncrease;\n }\n return menuItem;\n }),\n sectionProps.bottomDivider && renderSeparator(index, itemClassNames, false, true)))));\n }\n };\n var renderListItem = function (content, key, classNames, // eslint-disable-line deprecation/deprecation\n title) {\n return (React.createElement(\"li\", { role: \"presentation\", title: title, key: key, className: classNames.item }, content));\n };\n var renderSeparator = function (index, classNames, // eslint-disable-line deprecation/deprecation\n top, fromSection) {\n if (fromSection || index > 0) {\n return (React.createElement(\"li\", { role: \"separator\", key: 'separator-' + index + (top === undefined ? '' : top ? '-top' : '-bottom'), className: classNames.divider, \"aria-hidden\": \"true\" }));\n }\n return null;\n };\n var renderNormalItem = function (item, classNames, // eslint-disable-line deprecation/deprecation\n index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons) {\n if (item.onRender) {\n return item.onRender(__assign({ 'aria-posinset': focusableElementIndex + 1, 'aria-setsize': totalItemCount }, item), dismiss);\n }\n var contextualMenuItemAs = props.contextualMenuItemAs;\n var commonProps = {\n item: item,\n classNames: classNames,\n index: index,\n focusableElementIndex: focusableElementIndex,\n totalItemCount: totalItemCount,\n hasCheckmarks: hasCheckmarks,\n hasIcons: hasIcons,\n contextualMenuItemAs: contextualMenuItemAs,\n onItemMouseEnter: onItemMouseEnterBase,\n onItemMouseLeave: onMouseItemLeave,\n onItemMouseMove: onItemMouseMoveBase,\n onItemMouseDown: onItemMouseDown,\n executeItemClick: executeItemClick,\n onItemKeyDown: onItemKeyDown,\n expandedMenuItemKey: expandedMenuItemKey,\n openSubMenu: openSubMenu,\n dismissSubMenu: onSubMenuDismiss,\n dismissMenu: dismiss,\n };\n if (item.href) {\n var ContextualMenuAnchorAs = ContextualMenuAnchor;\n if (item.contextualMenuItemWrapperAs) {\n ContextualMenuAnchorAs = composeComponentAs(item.contextualMenuItemWrapperAs, ContextualMenuAnchorAs);\n }\n return React.createElement(ContextualMenuAnchorAs, __assign({}, commonProps, { onItemClick: onAnchorClick }));\n }\n if (item.split && hasSubmenu(item)) {\n var ContextualMenuSplitButtonAs = ContextualMenuSplitButton;\n if (item.contextualMenuItemWrapperAs) {\n ContextualMenuSplitButtonAs = composeComponentAs(item.contextualMenuItemWrapperAs, ContextualMenuSplitButtonAs);\n }\n return (React.createElement(ContextualMenuSplitButtonAs, __assign({}, commonProps, { onItemClick: onItemClick, onItemClickBase: onItemClickBase, onTap: cancelSubMenuTimer })));\n }\n var ContextualMenuButtonAs = ContextualMenuButton;\n if (item.contextualMenuItemWrapperAs) {\n ContextualMenuButtonAs = composeComponentAs(item.contextualMenuItemWrapperAs, ContextualMenuButtonAs);\n }\n return React.createElement(ContextualMenuButtonAs, __assign({}, commonProps, { onItemClick: onItemClick, onItemClickBase: onItemClickBase }));\n };\n var renderHeaderMenuItem = function (item, \n // eslint-disable-next-line deprecation/deprecation\n itemClassNames, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames, index, hasCheckmarks, hasIcons) {\n var ChildrenRenderer = ContextualMenuItem;\n if (item.contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(item.contextualMenuItemAs, ChildrenRenderer);\n }\n if (props.contextualMenuItemAs) {\n ChildrenRenderer = composeComponentAs(props.contextualMenuItemAs, ChildrenRenderer);\n }\n var itemProps = item.itemProps, id = item.id;\n var divHtmlProperties = itemProps && getNativeProps(itemProps, divProperties);\n return (\n // eslint-disable-next-line deprecation/deprecation\n React.createElement(\"div\", __assign({ id: id, className: menuClassNames.header }, divHtmlProperties, { style: item.style }),\n React.createElement(ChildrenRenderer, __assign({ item: item, classNames: itemClassNames, index: index, onCheckmarkClick: hasCheckmarks ? onItemClick : undefined, hasIcons: hasIcons }, itemProps))));\n };\n //#endregion\n //#region Main render\n var isBeakVisible = props.isBeakVisible;\n var items = props.items, labelElementId = props.labelElementId, id = props.id, className = props.className, beakWidth = props.beakWidth, directionalHint = props.directionalHint, directionalHintForRTL = props.directionalHintForRTL, alignTargetEdge = props.alignTargetEdge, gapSpace = props.gapSpace, coverTarget = props.coverTarget, ariaLabel = props.ariaLabel, doNotLayer = props.doNotLayer, target = props.target, bounds = props.bounds, useTargetWidth = props.useTargetWidth, useTargetAsMinWidth = props.useTargetAsMinWidth, directionalHintFixed = props.directionalHintFixed, shouldFocusOnMount = props.shouldFocusOnMount, shouldFocusOnContainer = props.shouldFocusOnContainer, title = props.title, styles = props.styles, theme = props.theme, calloutProps = props.calloutProps, _k = props.onRenderSubMenu, onRenderSubMenu = _k === void 0 ? onDefaultRenderSubMenu : _k, _l = props.onRenderMenuList, onRenderMenuList = _l === void 0 ? function (menuListProps, defaultRender) { return onDefaultRenderMenuList(menuListProps, classNames, defaultRender); } : _l, focusZoneProps = props.focusZoneProps, \n // eslint-disable-next-line deprecation/deprecation\n getMenuClassNames = props.getMenuClassNames;\n var classNames = getMenuClassNames\n ? getMenuClassNames(theme, className)\n : getClassNames(styles, {\n theme: theme,\n className: className,\n });\n var hasIcons = itemsHaveIcons(items);\n function itemsHaveIcons(contextualMenuItems) {\n for (var _i = 0, contextualMenuItems_1 = contextualMenuItems; _i < contextualMenuItems_1.length; _i++) {\n var item = contextualMenuItems_1[_i];\n if (item.iconProps) {\n return true;\n }\n if (item.itemType === ContextualMenuItemType.Section &&\n item.sectionProps &&\n itemsHaveIcons(item.sectionProps.items)) {\n return true;\n }\n }\n return false;\n }\n var adjustedFocusZoneProps = __assign(__assign({ direction: FocusZoneDirection.vertical, handleTabKey: FocusZoneTabbableElements.all, isCircularNavigation: true }, focusZoneProps), { className: css(classNames.root, (_a = props.focusZoneProps) === null || _a === void 0 ? void 0 : _a.className) });\n var hasCheckmarks = canAnyMenuItemsCheck(items);\n var submenuProps = expandedMenuItemKey && props.hidden !== true ? getSubmenuProps() : null;\n isBeakVisible = isBeakVisible === undefined ? responsiveMode <= ResponsiveMode.medium : isBeakVisible;\n /**\n * When useTargetWidth is true, get the width of the target element and apply it for the context menu container\n */\n var contextMenuStyle;\n var targetAsHtmlElement = targetRef.current;\n if ((useTargetWidth || useTargetAsMinWidth) && targetAsHtmlElement && targetAsHtmlElement.offsetWidth) {\n var targetBoundingRect = targetAsHtmlElement.getBoundingClientRect();\n var targetWidth = targetBoundingRect.width - 2; /* Accounts for 1px border */\n if (useTargetWidth) {\n contextMenuStyle = {\n width: targetWidth,\n };\n }\n else if (useTargetAsMinWidth) {\n contextMenuStyle = {\n minWidth: targetWidth,\n };\n }\n }\n // The menu should only return if items were provided, if no items were provided then it should not appear.\n if (items && items.length > 0) {\n var totalItemCount_1 = getItemCount(items);\n var calloutStyles_1 = classNames.subComponentStyles\n ? classNames.subComponentStyles.callout\n : undefined;\n return (React.createElement(MenuContext.Consumer, null, function (menuContext) { return (React.createElement(Callout, __assign({ styles: calloutStyles_1, onRestoreFocus: tryFocusPreviousActiveElement }, calloutProps, { target: target || menuContext.target, isBeakVisible: isBeakVisible, beakWidth: beakWidth, directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL, gapSpace: gapSpace, coverTarget: coverTarget, doNotLayer: doNotLayer, className: css('ms-ContextualMenu-Callout', calloutProps && calloutProps.className), setInitialFocus: shouldFocusOnMount, onDismiss: props.onDismiss || menuContext.onDismiss, onScroll: onScroll, bounds: bounds, directionalHintFixed: directionalHintFixed, alignTargetEdge: alignTargetEdge, hidden: props.hidden || menuContext.hidden, ref: forwardedRef }),\n React.createElement(\"div\", { style: contextMenuStyle, ref: hostElement, id: id, className: classNames.container, tabIndex: shouldFocusOnContainer ? 0 : -1, onKeyDown: onMenuKeyDown, onKeyUp: onKeyUp, onFocusCapture: onMenuFocusCapture, \"aria-label\": ariaLabel, \"aria-labelledby\": labelElementId, role: 'menu' },\n title && React.createElement(\"div\", { className: classNames.title },\n \" \",\n title,\n \" \"),\n items && items.length\n ? renderFocusZone(onRenderMenuList({\n ariaLabel: ariaLabel,\n items: items,\n totalItemCount: totalItemCount_1,\n hasCheckmarks: hasCheckmarks,\n hasIcons: hasIcons,\n defaultMenuItemRenderer: function (item) {\n return defaultMenuItemRenderer(item, classNames);\n },\n labelElementId: labelElementId,\n }, function (menuListProps, defaultRender) { return onDefaultRenderMenuList(menuListProps, classNames, defaultRender); }), adjustedFocusZoneProps)\n : null,\n submenuProps && onRenderSubMenu(submenuProps, onDefaultRenderSubMenu)),\n React.createElement(FocusRects, null))); }));\n }\n else {\n return null;\n }\n //#endregion\n}), function (prevProps, newProps) {\n if (!newProps.shouldUpdateWhenHidden && prevProps.hidden && newProps.hidden) {\n // Do not update when hidden.\n return true;\n }\n return shallowCompare(prevProps, newProps);\n});\nContextualMenuBase.displayName = 'ContextualMenuBase';\n/**\n * Returns true if the key for the event is alt (Mac option) or meta (Mac command).\n */\nfunction isAltOrMeta(ev) {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === KeyCodes.alt || ev.key === 'Meta';\n}\nfunction onItemMouseDown(item, ev) {\n var _a;\n (_a = item.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(item, item, ev);\n}\nfunction onDefaultRenderSubMenu(subMenuProps, defaultRender) {\n throw Error('ContextualMenuBase: onRenderSubMenu callback is null or undefined. ' +\n 'Please ensure to set `onRenderSubMenu` property either manually or with `styled` helper.');\n}\n/**\n * Returns the item that matches a given key if any.\n * @param key - The key of the item to match\n * @param items - The items to look for the key\n */\nfunction findItemByKeyFromItems(key, items) {\n for (var _i = 0, items_3 = items; _i < items_3.length; _i++) {\n var item = items_3[_i];\n if (item.itemType === ContextualMenuItemType.Section && item.sectionProps) {\n var match = findItemByKeyFromItems(key, item.sectionProps.items);\n if (match) {\n return match;\n }\n }\n else if (item.key && item.key === key) {\n return item;\n }\n }\n}\nfunction getOnClickWithOverrideTarget(onClick, target) {\n return onClick\n ? function (ev, item) {\n overrideTarget(ev, target);\n return onClick(ev, item);\n }\n : onClick;\n}\nfunction overrideTarget(ev, target) {\n if (ev && target) {\n ev.persist();\n if (target instanceof Event) {\n ev.target = target.target;\n }\n else if (target instanceof Element) {\n ev.target = target;\n }\n }\n}\n//# sourceMappingURL=ContextualMenu.base.js.map","import { getGlobalClassNames, FontWeights } from '../../Styling';\nimport { CONTEXTUAL_MENU_ITEM_HEIGHT } from './ContextualMenu.cnstyles';\nvar GlobalClassNames = {\n root: 'ms-ContextualMenu',\n container: 'ms-ContextualMenu-container',\n list: 'ms-ContextualMenu-list',\n header: 'ms-ContextualMenu-header',\n title: 'ms-ContextualMenu-title',\n isopen: 'is-open',\n};\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var fonts = theme.fonts, semanticColors = theme.semanticColors, effects = theme.effects;\n return {\n root: [\n theme.fonts.medium,\n classNames.root,\n classNames.isopen,\n {\n backgroundColor: semanticColors.menuBackground,\n minWidth: '180px',\n },\n className,\n ],\n container: [\n classNames.container,\n {\n selectors: {\n ':focus': { outline: 0 },\n },\n },\n ],\n list: [\n classNames.list,\n classNames.isopen,\n {\n listStyleType: 'none',\n margin: '0',\n padding: '0',\n },\n ],\n header: [\n classNames.header,\n fonts.small,\n {\n fontWeight: FontWeights.semibold,\n color: semanticColors.menuHeader,\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n cursor: 'default',\n padding: '0px 6px',\n userSelect: 'none',\n textAlign: 'left',\n },\n ],\n title: [\n classNames.title,\n {\n fontSize: fonts.mediumPlus.fontSize,\n paddingRight: '14px',\n paddingLeft: '14px',\n paddingBottom: '5px',\n paddingTop: '5px',\n backgroundColor: semanticColors.menuItemBackgroundPressed,\n },\n ],\n subComponentStyles: {\n callout: {\n root: {\n boxShadow: effects.elevation8,\n },\n },\n menuItem: {},\n },\n };\n};\n//# sourceMappingURL=ContextualMenu.styles.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { styled, composeRenderFunction } from '../../Utilities';\nimport { ContextualMenuBase } from './ContextualMenu.base';\nimport { getStyles } from './ContextualMenu.styles';\nfunction onRenderSubMenu(subMenuProps) {\n return React.createElement(LocalContextualMenu, __assign({}, subMenuProps));\n}\n// This is to prevent cyclic import with ContextualMenu.base.tsx.\nvar LocalContextualMenu = styled(ContextualMenuBase, getStyles, function (props) { return ({\n onRenderSubMenu: props.onRenderSubMenu\n ? composeRenderFunction(props.onRenderSubMenu, onRenderSubMenu)\n : onRenderSubMenu,\n}); }, { scope: 'ContextualMenu' });\n/**\n * ContextualMenu description\n */\nexport var ContextualMenu = LocalContextualMenu;\nContextualMenu.displayName = 'ContextualMenu';\n//# sourceMappingURL=ContextualMenu.js.map","import { memoizeFunction } from '../../Utilities';\nimport { getGlobalClassNames, mergeStyleSets } from '../../Styling';\nexport var ButtonGlobalClassNames = {\n msButton: 'ms-Button',\n msButtonHasMenu: 'ms-Button--hasMenu',\n msButtonIcon: 'ms-Button-icon',\n msButtonMenuIcon: 'ms-Button-menuIcon',\n msButtonLabel: 'ms-Button-label',\n msButtonDescription: 'ms-Button-description',\n msButtonScreenReaderText: 'ms-Button-screenReaderText',\n msButtonFlexContainer: 'ms-Button-flexContainer',\n msButtonTextContainer: 'ms-Button-textContainer',\n};\nexport var getBaseButtonClassNames = memoizeFunction(function (theme, styles, className, variantClassName, iconClassName, menuIconClassName, disabled, hasMenu, checked, expanded, isSplit) {\n var _a, _b;\n var classNames = getGlobalClassNames(ButtonGlobalClassNames, theme || {});\n var isExpanded = expanded && !isSplit;\n return mergeStyleSets({\n root: [\n classNames.msButton,\n styles.root,\n variantClassName,\n checked && ['is-checked', styles.rootChecked],\n isExpanded && [\n 'is-expanded',\n styles.rootExpanded,\n {\n selectors: (_a = {},\n _a[\":hover .\".concat(classNames.msButtonIcon)] = styles.iconExpandedHovered,\n // menuIcon falls back to rootExpandedHovered to support original behavior\n _a[\":hover .\".concat(classNames.msButtonMenuIcon)] = styles.menuIconExpandedHovered || styles.rootExpandedHovered,\n _a[':hover'] = styles.rootExpandedHovered,\n _a),\n },\n ],\n hasMenu && [ButtonGlobalClassNames.msButtonHasMenu, styles.rootHasMenu],\n disabled && ['is-disabled', styles.rootDisabled],\n !disabled &&\n !isExpanded &&\n !checked && {\n selectors: (_b = {\n ':hover': styles.rootHovered\n },\n _b[\":hover .\".concat(classNames.msButtonLabel)] = styles.labelHovered,\n _b[\":hover .\".concat(classNames.msButtonIcon)] = styles.iconHovered,\n _b[\":hover .\".concat(classNames.msButtonDescription)] = styles.descriptionHovered,\n _b[\":hover .\".concat(classNames.msButtonMenuIcon)] = styles.menuIconHovered,\n _b[':focus'] = styles.rootFocused,\n _b[':active'] = styles.rootPressed,\n _b[\":active .\".concat(classNames.msButtonIcon)] = styles.iconPressed,\n _b[\":active .\".concat(classNames.msButtonDescription)] = styles.descriptionPressed,\n _b[\":active .\".concat(classNames.msButtonMenuIcon)] = styles.menuIconPressed,\n _b),\n },\n disabled && checked && [styles.rootCheckedDisabled],\n !disabled &&\n checked && {\n selectors: {\n ':hover': styles.rootCheckedHovered,\n ':active': styles.rootCheckedPressed,\n },\n },\n className,\n ],\n flexContainer: [classNames.msButtonFlexContainer, styles.flexContainer],\n textContainer: [classNames.msButtonTextContainer, styles.textContainer],\n icon: [\n classNames.msButtonIcon,\n iconClassName,\n styles.icon,\n isExpanded && styles.iconExpanded,\n checked && styles.iconChecked,\n disabled && styles.iconDisabled,\n ],\n label: [classNames.msButtonLabel, styles.label, checked && styles.labelChecked, disabled && styles.labelDisabled],\n menuIcon: [\n classNames.msButtonMenuIcon,\n menuIconClassName,\n styles.menuIcon,\n checked && styles.menuIconChecked,\n disabled && !isSplit && styles.menuIconDisabled,\n !disabled &&\n !isExpanded &&\n !checked && {\n selectors: {\n ':hover': styles.menuIconHovered,\n ':active': styles.menuIconPressed,\n },\n },\n isExpanded && ['is-expanded', styles.menuIconExpanded],\n ],\n description: [\n classNames.msButtonDescription,\n styles.description,\n checked && styles.descriptionChecked,\n disabled && styles.descriptionDisabled,\n ],\n screenReaderText: [classNames.msButtonScreenReaderText, styles.screenReaderText],\n });\n});\n//# sourceMappingURL=BaseButton.classNames.js.map","import { memoizeFunction } from '../../../Utilities';\nimport { mergeStyles } from '../../../Styling';\nexport var getSplitButtonClassNames = memoizeFunction(function (styles, disabled, expanded, checked, primaryDisabled) {\n return {\n root: mergeStyles(styles.splitButtonMenuButton, expanded && [styles.splitButtonMenuButtonExpanded], disabled && [styles.splitButtonMenuButtonDisabled], checked && !disabled && [styles.splitButtonMenuButtonChecked], primaryDisabled &&\n !disabled && [\n {\n selectors: {\n ':focus': styles.splitButtonMenuFocused,\n },\n },\n ]),\n splitButtonContainer: mergeStyles(styles.splitButtonContainer, !disabled &&\n checked && [\n styles.splitButtonContainerChecked,\n {\n selectors: {\n ':hover': styles.splitButtonContainerCheckedHovered,\n },\n },\n ], !disabled &&\n !checked && [\n {\n selectors: {\n ':hover': styles.splitButtonContainerHovered,\n ':focus': styles.splitButtonContainerFocused,\n },\n },\n ], disabled && styles.splitButtonContainerDisabled),\n icon: mergeStyles(styles.splitButtonMenuIcon, disabled && styles.splitButtonMenuIconDisabled, !disabled && primaryDisabled && styles.splitButtonMenuIcon),\n flexContainer: mergeStyles(styles.splitButtonFlexContainer),\n divider: mergeStyles(styles.splitButtonDivider, (primaryDisabled || disabled) && styles.splitButtonDividerDisabled),\n };\n});\n//# sourceMappingURL=SplitButton.classNames.js.map","import { __assign, __extends, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { anchorProperties, assign, buttonProperties, createMergedRef, css, getId, getNativeProps, initializeComponentRef, memoizeFunction, mergeAriaAttributeValues, nullRender, portalContainsElement, setFocusVisibility, warnConditionallyRequiredProps, warnDeprecations, Async, EventGroup, FocusRects, FocusRectsContext, KeyCodes, } from '../../Utilities';\nimport { Icon, FontIcon, ImageIcon } from '../../Icon';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { ContextualMenu } from '../../ContextualMenu';\nimport { getBaseButtonClassNames } from './BaseButton.classNames';\nimport { getSplitButtonClassNames as getBaseSplitButtonClassNames } from './SplitButton/SplitButton.classNames';\nimport { KeytipData } from '../../KeytipData';\nimport { composeComponentAs } from '../../Utilities';\nvar TouchIdleDelay = 500; /* ms */\nvar COMPONENT_NAME = 'BaseButton';\n/**\n * {@docCategory Button}\n */\nvar BaseButton = /** @class */ (function (_super) {\n __extends(BaseButton, _super);\n function BaseButton(props) {\n var _this = _super.call(this, props) || this;\n _this._buttonElement = React.createRef();\n _this._splitButtonContainer = React.createRef();\n _this._mergedRef = createMergedRef();\n _this._renderedVisibleMenu = false;\n _this._getMemoizedMenuButtonKeytipProps = memoizeFunction(function (keytipProps) {\n return __assign(__assign({}, keytipProps), { hasMenu: true });\n });\n _this._onRenderIcon = function (buttonProps, defaultRender) {\n var iconProps = _this.props.iconProps;\n if (iconProps && (iconProps.iconName !== undefined || iconProps.imageProps)) {\n var className = iconProps.className, imageProps = iconProps.imageProps, rest = __rest(iconProps, [\"className\", \"imageProps\"]);\n // If the styles prop is specified as part of iconProps, fall back to regular Icon as FontIcon and ImageIcon\n // do not have this prop.\n if (iconProps.styles) {\n return React.createElement(Icon, __assign({ className: css(_this._classNames.icon, className), imageProps: imageProps }, rest));\n }\n if (iconProps.iconName) {\n return React.createElement(FontIcon, __assign({ className: css(_this._classNames.icon, className) }, rest));\n }\n if (imageProps) {\n return React.createElement(ImageIcon, __assign({ className: css(_this._classNames.icon, className), imageProps: imageProps }, rest));\n }\n }\n return null;\n };\n _this._onRenderTextContents = function () {\n var _a = _this.props, text = _a.text, children = _a.children, \n // eslint-disable-next-line deprecation/deprecation\n _b = _a.secondaryText, \n // eslint-disable-next-line deprecation/deprecation\n secondaryText = _b === void 0 ? _this.props.description : _b, _c = _a.onRenderText, onRenderText = _c === void 0 ? _this._onRenderText : _c, _d = _a.onRenderDescription, onRenderDescription = _d === void 0 ? _this._onRenderDescription : _d;\n if (text || typeof children === 'string' || secondaryText) {\n return (React.createElement(\"span\", { className: _this._classNames.textContainer },\n onRenderText(_this.props, _this._onRenderText),\n onRenderDescription(_this.props, _this._onRenderDescription)));\n }\n return [onRenderText(_this.props, _this._onRenderText), onRenderDescription(_this.props, _this._onRenderDescription)];\n };\n _this._onRenderText = function () {\n var text = _this.props.text;\n var children = _this.props.children;\n // For backwards compat, we should continue to take in the text content from children.\n if (text === undefined && typeof children === 'string') {\n text = children;\n }\n if (_this._hasText()) {\n return (React.createElement(\"span\", { key: _this._labelId, className: _this._classNames.label, id: _this._labelId }, text));\n }\n return null;\n };\n _this._onRenderChildren = function () {\n var children = _this.props.children;\n // If children is just a string, either it or the text will be rendered via onRenderLabel\n // If children is another component, it will be rendered after text\n if (typeof children === 'string') {\n return null;\n }\n return children;\n };\n _this._onRenderDescription = function (props) {\n // eslint-disable-next-line deprecation/deprecation\n var _a = props.secondaryText, secondaryText = _a === void 0 ? _this.props.description : _a;\n // ms-Button-description is only shown when the button type is compound.\n // In other cases it will not be displayed.\n return secondaryText ? (React.createElement(\"span\", { key: _this._descriptionId, className: _this._classNames.description, id: _this._descriptionId }, secondaryText)) : null;\n };\n _this._onRenderAriaDescription = function () {\n var ariaDescription = _this.props.ariaDescription;\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,\n // otherwise it will be assigned to descriptionSpan.\n return ariaDescription ? (React.createElement(\"span\", { className: _this._classNames.screenReaderText, id: _this._ariaDescriptionId }, ariaDescription)) : null;\n };\n _this._onRenderMenuIcon = function (props) {\n var menuIconProps = _this.props.menuIconProps;\n return React.createElement(FontIcon, __assign({ iconName: \"ChevronDown\" }, menuIconProps, { className: _this._classNames.menuIcon }));\n };\n _this._onRenderMenu = function (menuProps) {\n var MenuType = _this.props.menuAs ? composeComponentAs(_this.props.menuAs, ContextualMenu) : ContextualMenu;\n return React.createElement(MenuType, __assign({}, menuProps));\n };\n _this._onDismissMenu = function (ev) {\n var menuProps = _this.props.menuProps;\n if (menuProps && menuProps.onDismiss) {\n menuProps.onDismiss(ev);\n }\n if (!ev || !ev.defaultPrevented) {\n _this._dismissMenu();\n }\n };\n _this._dismissMenu = function () {\n _this._menuShouldFocusOnMount = undefined;\n _this._menuShouldFocusOnContainer = undefined;\n _this.setState({ menuHidden: true });\n };\n _this._openMenu = function (shouldFocusOnContainer, shouldFocusOnMount) {\n if (shouldFocusOnMount === void 0) { shouldFocusOnMount = true; }\n if (_this.props.menuProps) {\n _this._menuShouldFocusOnContainer = shouldFocusOnContainer;\n _this._menuShouldFocusOnMount = shouldFocusOnMount;\n _this._renderedVisibleMenu = true;\n _this.setState({ menuHidden: false });\n }\n };\n _this._onToggleMenu = function (shouldFocusOnContainer) {\n var shouldFocusOnMount = true;\n if (_this.props.menuProps && _this.props.menuProps.shouldFocusOnMount === false) {\n shouldFocusOnMount = false;\n }\n _this.state.menuHidden ? _this._openMenu(shouldFocusOnContainer, shouldFocusOnMount) : _this._dismissMenu();\n };\n _this._onSplitContainerFocusCapture = function (ev) {\n var container = _this._splitButtonContainer.current;\n // If the target is coming from the portal we do not need to set focus on the container.\n if (!container || (ev.target && portalContainsElement(ev.target, container))) {\n return;\n }\n // We should never be able to focus the individual buttons in a split button. Focus\n // should always remain on the container.\n container.focus();\n };\n _this._onSplitButtonPrimaryClick = function (ev) {\n if (!_this.state.menuHidden) {\n _this._dismissMenu();\n }\n // toggle split buttons need two separate targets, even for touch\n var singleTouchTarget = _this._processingTouch && !_this.props.toggle;\n if (!singleTouchTarget && _this.props.onClick) {\n _this.props.onClick(ev);\n }\n else if (singleTouchTarget) {\n _this._onMenuClick(ev);\n }\n };\n _this._onKeyDown = function (ev) {\n // explicity cancelling event so click won't fire after this\n // eslint-disable-next-line deprecation/deprecation\n if (_this.props.disabled && (ev.which === KeyCodes.enter || ev.which === KeyCodes.space)) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n else if (!_this.props.disabled) {\n if (_this.props.menuProps) {\n _this._onMenuKeyDown(ev);\n }\n else if (_this.props.onKeyDown !== undefined) {\n _this.props.onKeyDown(ev); // not cancelling event because it's not disabled\n }\n }\n };\n _this._onKeyUp = function (ev) {\n if (!_this.props.disabled && _this.props.onKeyUp !== undefined) {\n _this.props.onKeyUp(ev); // not cancelling event because it's not disabled\n }\n };\n _this._onKeyPress = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (!_this.props.disabled && _this.props.onKeyPress !== undefined) {\n // eslint-disable-next-line deprecation/deprecation\n _this.props.onKeyPress(ev); // not cancelling event because it's not disabled\n }\n };\n _this._onMouseUp = function (ev) {\n if (!_this.props.disabled && _this.props.onMouseUp !== undefined) {\n _this.props.onMouseUp(ev); // not cancelling event because it's not disabled\n }\n };\n _this._onMouseDown = function (ev) {\n if (!_this.props.disabled && _this.props.onMouseDown !== undefined) {\n _this.props.onMouseDown(ev); // not cancelling event because it's not disabled\n }\n };\n _this._onClick = function (ev) {\n if (!_this.props.disabled) {\n if (_this.props.menuProps) {\n _this._onMenuClick(ev);\n }\n else if (_this.props.onClick !== undefined) {\n _this.props.onClick(ev); // not cancelling event because it's not disabled\n }\n }\n };\n _this._onSplitButtonContainerKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {\n if (_this._buttonElement.current) {\n _this._buttonElement.current.click();\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n else {\n _this._onMenuKeyDown(ev);\n }\n };\n _this._onMenuKeyDown = function (ev) {\n var _a;\n if (_this.props.disabled) {\n return;\n }\n if (_this.props.onKeyDown) {\n _this.props.onKeyDown(ev);\n }\n // eslint-disable-next-line deprecation/deprecation\n var isUp = ev.which === KeyCodes.up;\n // eslint-disable-next-line deprecation/deprecation\n var isDown = ev.which === KeyCodes.down;\n if (!ev.defaultPrevented && _this._isValidMenuOpenKey(ev)) {\n var onMenuClick = _this.props.onMenuClick;\n if (onMenuClick) {\n onMenuClick(ev, _this.props);\n }\n _this._onToggleMenu(false);\n ev.preventDefault();\n ev.stopPropagation();\n }\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {\n // We manually set the focus visibility to true if opening via Enter or Space to account for the scenario where\n // a user clicks on the button, closes the menu and then opens it via keyboard. In this scenario our default logic\n // for setting focus visibility is not triggered since there is no keyboard navigation present beforehand.\n setFocusVisibility(true, ev.target, (_a = _this.context) === null || _a === void 0 ? void 0 : _a.registeredProviders);\n }\n if (!(ev.altKey || ev.metaKey) && (isUp || isDown)) {\n // Suppose a menu, with shouldFocusOnMount: false, is open, and user wants to keyboard to the menu items\n // We need to re-render the menu with shouldFocusOnMount as true.\n if (!_this.state.menuHidden && _this.props.menuProps) {\n var currentShouldFocusOnMount = _this._menuShouldFocusOnMount !== undefined\n ? _this._menuShouldFocusOnMount\n : _this.props.menuProps.shouldFocusOnMount;\n if (!currentShouldFocusOnMount) {\n ev.preventDefault();\n ev.stopPropagation();\n _this._menuShouldFocusOnMount = true;\n _this.forceUpdate();\n }\n }\n }\n };\n _this._onTouchStart = function () {\n if (_this._isSplitButton &&\n _this._splitButtonContainer.current &&\n !('onpointerdown' in _this._splitButtonContainer.current)) {\n _this._handleTouchAndPointerEvent();\n }\n };\n _this._onMenuClick = function (ev) {\n var _a = _this.props, onMenuClick = _a.onMenuClick, menuProps = _a.menuProps;\n if (onMenuClick) {\n onMenuClick(ev, _this.props);\n }\n // focus on the container by default when the menu is opened with a click event\n // this differentiates from a keyboard interaction triggering the click event\n var shouldFocusOnContainer = typeof (menuProps === null || menuProps === void 0 ? void 0 : menuProps.shouldFocusOnContainer) === 'boolean'\n ? menuProps.shouldFocusOnContainer\n : ev.nativeEvent.pointerType === 'mouse';\n if (!ev.defaultPrevented) {\n _this._onToggleMenu(shouldFocusOnContainer);\n ev.preventDefault();\n ev.stopPropagation();\n }\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n warnConditionallyRequiredProps(COMPONENT_NAME, props, ['menuProps', 'onClick'], 'split', _this.props.split);\n warnDeprecations(COMPONENT_NAME, props, {\n rootProps: undefined,\n description: 'secondaryText',\n toggled: 'checked',\n });\n _this._labelId = getId();\n _this._descriptionId = getId();\n _this._ariaDescriptionId = getId();\n _this.state = {\n menuHidden: true,\n };\n return _this;\n }\n Object.defineProperty(BaseButton.prototype, \"_isSplitButton\", {\n get: function () {\n return !!this.props.menuProps && !!this.props.onClick && this.props.split === true;\n },\n enumerable: false,\n configurable: true\n });\n BaseButton.prototype.render = function () {\n var _a;\n var _b = this.props, ariaDescription = _b.ariaDescription, ariaLabel = _b.ariaLabel, ariaHidden = _b.ariaHidden, className = _b.className, disabled = _b.disabled, allowDisabledFocus = _b.allowDisabledFocus, primaryDisabled = _b.primaryDisabled, \n // eslint-disable-next-line deprecation/deprecation\n _c = _b.secondaryText, \n // eslint-disable-next-line deprecation/deprecation\n secondaryText = _c === void 0 ? this.props.description : _c, href = _b.href, iconProps = _b.iconProps, menuIconProps = _b.menuIconProps, styles = _b.styles, checked = _b.checked, variantClassName = _b.variantClassName, theme = _b.theme, toggle = _b.toggle, getClassNames = _b.getClassNames, role = _b.role;\n var menuHidden = this.state.menuHidden;\n // Button is disabled if the whole button (in case of splitButton is disabled) or if the primary action is disabled\n var isPrimaryButtonDisabled = disabled || primaryDisabled;\n this._classNames = getClassNames\n ? getClassNames(theme, className, variantClassName, iconProps && iconProps.className, menuIconProps && menuIconProps.className, isPrimaryButtonDisabled, checked, !menuHidden, !!this.props.menuProps, this.props.split, !!allowDisabledFocus)\n : getBaseButtonClassNames(theme, styles, className, variantClassName, iconProps && iconProps.className, menuIconProps && menuIconProps.className, isPrimaryButtonDisabled, !!this.props.menuProps, checked, !menuHidden, this.props.split);\n var _d = this, _ariaDescriptionId = _d._ariaDescriptionId, _labelId = _d._labelId, _descriptionId = _d._descriptionId;\n // Anchor tag cannot be disabled hence in disabled state rendering\n // anchor button as normal button\n var renderAsAnchor = !isPrimaryButtonDisabled && !!href;\n var tag = renderAsAnchor ? 'a' : 'button';\n var nativeProps = getNativeProps(\n // eslint-disable-next-line deprecation/deprecation\n assign(renderAsAnchor ? {} : { type: 'button' }, this.props.rootProps, this.props), renderAsAnchor ? anchorProperties : buttonProperties, [\n 'disabled', // let disabled buttons be focused and styled as disabled.\n ]);\n // Check for ariaLabel passed in via Button props, and fall back to aria-label passed in via native props\n var resolvedAriaLabel = ariaLabel || nativeProps['aria-label'];\n // Check for ariaDescription, secondaryText or aria-describedby in the native props to determine source of\n // aria-describedby. Otherwise default to undefined so property does not appear in output.\n var ariaDescribedBy = undefined;\n if (ariaDescription) {\n ariaDescribedBy = _ariaDescriptionId;\n }\n else if (secondaryText && this.props.onRenderDescription !== nullRender) {\n // for buttons like CompoundButton with a valid onRenderDescription, we need to set an ariaDescribedBy\n // for buttons that do not render anything (via nullRender), we should not set an ariaDescribedBy\n ariaDescribedBy = _descriptionId;\n }\n else if (nativeProps['aria-describedby']) {\n ariaDescribedBy = nativeProps['aria-describedby'];\n }\n // If an explicit aria-labelledby is given, use that and we're done.\n // If any kind of description is given (which will end up as an aria-describedby attribute)\n // and no ariaLabel is specified, set the labelledby element.\n // Otherwise, the button is labeled implicitly by the descendent text on the button (if it exists).\n var ariaLabelledBy = undefined;\n if (nativeProps['aria-labelledby']) {\n ariaLabelledBy = nativeProps['aria-labelledby'];\n }\n else if (ariaDescribedBy && !resolvedAriaLabel) {\n ariaLabelledBy = this._hasText() ? _labelId : undefined;\n }\n var dataIsFocusable = this.props['data-is-focusable'] === false || (disabled && !allowDisabledFocus) || this._isSplitButton\n ? false\n : true;\n var isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n // if isCheckboxTypeRole, always return a checked value.\n // Otherwise only return checked value if toggle is set to true.\n // This is because role=\"checkbox\" always needs to have an aria-checked value\n // but our checked prop only sets aria-pressed if we mark the button as a toggle=\"true\"\n var checkedOrPressedValue = isCheckboxTypeRole ? !!checked : toggle === true ? !!checked : undefined;\n var buttonProps = assign(nativeProps, (_a = {\n className: this._classNames.root,\n // eslint-disable-next-line deprecation/deprecation\n ref: this._mergedRef(this.props.elementRef, this._buttonElement),\n disabled: isPrimaryButtonDisabled && !allowDisabledFocus,\n onKeyDown: this._onKeyDown,\n onKeyPress: this._onKeyPress,\n onKeyUp: this._onKeyUp,\n onMouseDown: this._onMouseDown,\n onMouseUp: this._onMouseUp,\n onClick: this._onClick,\n 'aria-label': resolvedAriaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-disabled': isPrimaryButtonDisabled,\n 'data-is-focusable': dataIsFocusable\n },\n // aria-pressed attribute should only be present for toggle buttons\n // aria-checked attribute should only be present for toggle buttons with checkbox type role\n _a[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = checkedOrPressedValue,\n _a));\n if (ariaHidden) {\n buttonProps['aria-hidden'] = true;\n }\n if (this._isSplitButton) {\n return this._onRenderSplitButtonContent(tag, buttonProps);\n }\n else if (this.props.menuProps) {\n var _e = this.props.menuProps.id, id = _e === void 0 ? \"\".concat(this._labelId, \"-menu\") : _e;\n assign(buttonProps, {\n 'aria-expanded': !menuHidden,\n 'aria-controls': !menuHidden ? id : null,\n 'aria-haspopup': true,\n });\n }\n return this._onRenderContent(tag, buttonProps);\n };\n BaseButton.prototype.componentDidMount = function () {\n // For split buttons, touching anywhere in the button should drop the dropdown, which should contain the\n // primary action. This gives more hit target space for touch environments. We're setting the onpointerdown here,\n // because React does not support Pointer events yet.\n if (this._isSplitButton && this._splitButtonContainer.current) {\n if ('onpointerdown' in this._splitButtonContainer.current) {\n this._events.on(this._splitButtonContainer.current, 'pointerdown', this._onPointerDown, true);\n }\n if ('onpointerup' in this._splitButtonContainer.current && this.props.onPointerUp) {\n this._events.on(this._splitButtonContainer.current, 'pointerup', this.props.onPointerUp, true);\n }\n }\n };\n BaseButton.prototype.componentDidUpdate = function (prevProps, prevState) {\n // If Button's menu was closed, run onAfterMenuDismiss.\n if (this.props.onAfterMenuDismiss && !prevState.menuHidden && this.state.menuHidden) {\n this.props.onAfterMenuDismiss();\n }\n };\n BaseButton.prototype.componentWillUnmount = function () {\n this._async.dispose();\n this._events.dispose();\n };\n BaseButton.prototype.focus = function () {\n var _a, _b;\n if (this._isSplitButton && this._splitButtonContainer.current) {\n setFocusVisibility(true, undefined, (_a = this.context) === null || _a === void 0 ? void 0 : _a.registeredProviders);\n this._splitButtonContainer.current.focus();\n }\n else if (this._buttonElement.current) {\n setFocusVisibility(true, undefined, (_b = this.context) === null || _b === void 0 ? void 0 : _b.registeredProviders);\n this._buttonElement.current.focus();\n }\n };\n BaseButton.prototype.dismissMenu = function () {\n this._dismissMenu();\n };\n BaseButton.prototype.openMenu = function (shouldFocusOnContainer, shouldFocusOnMount) {\n this._openMenu(shouldFocusOnContainer, shouldFocusOnMount);\n };\n BaseButton.prototype._onRenderContent = function (tag, buttonProps) {\n var _this = this;\n var props = this.props;\n var Tag = tag;\n var menuIconProps = props.menuIconProps, menuProps = props.menuProps, _a = props.onRenderIcon, onRenderIcon = _a === void 0 ? this._onRenderIcon : _a, _b = props.onRenderAriaDescription, onRenderAriaDescription = _b === void 0 ? this._onRenderAriaDescription : _b, _c = props.onRenderChildren, onRenderChildren = _c === void 0 ? this._onRenderChildren : _c, \n // eslint-disable-next-line deprecation/deprecation\n _d = props.onRenderMenu, \n // eslint-disable-next-line deprecation/deprecation\n onRenderMenu = _d === void 0 ? this._onRenderMenu : _d, _e = props.onRenderMenuIcon, onRenderMenuIcon = _e === void 0 ? this._onRenderMenuIcon : _e, disabled = props.disabled;\n var keytipProps = props.keytipProps;\n if (keytipProps && menuProps) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n var Button = function (keytipAttributes) { return (React.createElement(Tag, __assign({}, buttonProps, keytipAttributes),\n React.createElement(\"span\", { className: _this._classNames.flexContainer, \"data-automationid\": \"splitbuttonprimary\" },\n onRenderIcon(props, _this._onRenderIcon),\n _this._onRenderTextContents(),\n onRenderAriaDescription(props, _this._onRenderAriaDescription),\n onRenderChildren(props, _this._onRenderChildren),\n !_this._isSplitButton &&\n (menuProps || menuIconProps || _this.props.onRenderMenuIcon) &&\n onRenderMenuIcon(_this.props, _this._onRenderMenuIcon),\n menuProps &&\n !menuProps.doNotLayer &&\n _this._shouldRenderMenu() &&\n onRenderMenu(_this._getMenuProps(menuProps), _this._onRenderMenu)))); };\n var Content = keytipProps ? (\n // If we're making a split button, we won't put the keytip here\n React.createElement(KeytipData, { keytipProps: !this._isSplitButton ? keytipProps : undefined, ariaDescribedBy: buttonProps['aria-describedby'], disabled: disabled }, function (keytipAttributes) { return Button(keytipAttributes); })) : (Button());\n if (menuProps && menuProps.doNotLayer) {\n return (React.createElement(React.Fragment, null,\n Content,\n this._shouldRenderMenu() && onRenderMenu(this._getMenuProps(menuProps), this._onRenderMenu)));\n }\n return (React.createElement(React.Fragment, null,\n Content,\n React.createElement(FocusRects, null)));\n };\n /**\n * Method to help determine if the menu's component tree should\n * be rendered. It takes into account whether the menu is expanded,\n * whether it is a persisted menu and whether it has been shown to the user.\n */\n BaseButton.prototype._shouldRenderMenu = function () {\n var menuHidden = this.state.menuHidden;\n // eslint-disable-next-line deprecation/deprecation\n var _a = this.props, persistMenu = _a.persistMenu, renderPersistedMenuHiddenOnMount = _a.renderPersistedMenuHiddenOnMount;\n if (!menuHidden) {\n // Always should render a menu when it is expanded\n return true;\n }\n else if (persistMenu && (this._renderedVisibleMenu || renderPersistedMenuHiddenOnMount)) {\n // _renderedVisibleMenu ensures that the first rendering of\n // the menu happens on-screen, as edge's scrollbar calculations are off if done while hidden.\n return true;\n }\n return false;\n };\n BaseButton.prototype._hasText = function () {\n // _onRenderTextContents and _onRenderText do not perform the same checks. Below is parity with what _onRenderText\n // used to have before the refactor that introduced this function. _onRenderTextContents does not require props.\n // text to be undefined in order for props.children to be used as a fallback.\n // Purely a code maintainability/reuse issue, but logged as Issue #4979.\n return this.props.text !== null && (this.props.text !== undefined || typeof this.props.children === 'string');\n };\n BaseButton.prototype._getMenuProps = function (menuProps) {\n var persistMenu = this.props.persistMenu;\n var menuHidden = this.state.menuHidden;\n // the accessible menu label (accessible name) has a relationship to the button.\n // If the menu props do not specify an explicit value for aria-label or aria-labelledBy,\n // AND the button has text, we'll set the menu aria-labelledBy to the text element id.\n if (!menuProps.ariaLabel && !menuProps.labelElementId && this._hasText()) {\n menuProps = __assign(__assign({}, menuProps), { labelElementId: this._labelId });\n }\n return __assign(__assign({ id: this._labelId + '-menu', directionalHint: DirectionalHint.bottomLeftEdge }, menuProps), { shouldFocusOnContainer: this._menuShouldFocusOnContainer, shouldFocusOnMount: this._menuShouldFocusOnMount, hidden: persistMenu ? menuHidden : undefined, className: css('ms-BaseButton-menuhost', menuProps.className), target: this._isSplitButton ? this._splitButtonContainer.current : this._buttonElement.current, onDismiss: this._onDismissMenu });\n };\n BaseButton.prototype._onRenderSplitButtonContent = function (tag, buttonProps) {\n var _this = this;\n var _a = this.props, _b = _a.styles, styles = _b === void 0 ? {} : _b, disabled = _a.disabled, allowDisabledFocus = _a.allowDisabledFocus, checked = _a.checked, getSplitButtonClassNames = _a.getSplitButtonClassNames, primaryDisabled = _a.primaryDisabled, menuProps = _a.menuProps, toggle = _a.toggle, role = _a.role, primaryActionButtonProps = _a.primaryActionButtonProps;\n var keytipProps = this.props.keytipProps;\n var menuHidden = this.state.menuHidden;\n var classNames = getSplitButtonClassNames\n ? getSplitButtonClassNames(!!disabled, !menuHidden, !!checked, !!allowDisabledFocus)\n : styles && getBaseSplitButtonClassNames(styles, !!disabled, !menuHidden, !!checked, !!primaryDisabled);\n assign(buttonProps, {\n onClick: undefined,\n onPointerDown: undefined,\n onPointerUp: undefined,\n tabIndex: -1,\n 'data-is-focusable': false,\n });\n if (keytipProps && menuProps) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n var containerProps = getNativeProps(buttonProps, [], ['disabled']);\n // Add additional props to apply on primary action button\n if (primaryActionButtonProps) {\n assign(buttonProps, primaryActionButtonProps);\n }\n var SplitButton = function (keytipAttributes) { return (React.createElement(\"div\", __assign({}, containerProps, { \"data-ktp-target\": keytipAttributes ? keytipAttributes['data-ktp-target'] : undefined, role: role ? role : 'button', \"aria-disabled\": disabled, \"aria-haspopup\": true, \"aria-expanded\": !menuHidden, \"aria-pressed\": toggle ? !!checked : undefined, \"aria-describedby\": mergeAriaAttributeValues(buttonProps['aria-describedby'], keytipAttributes ? keytipAttributes['aria-describedby'] : undefined), className: classNames && classNames.splitButtonContainer, onKeyDown: _this._onSplitButtonContainerKeyDown, onTouchStart: _this._onTouchStart, ref: _this._splitButtonContainer, \"data-is-focusable\": true, onClick: !disabled && !primaryDisabled ? _this._onSplitButtonPrimaryClick : undefined, tabIndex: (!disabled && !primaryDisabled) || allowDisabledFocus ? 0 : undefined, \"aria-roledescription\": buttonProps['aria-roledescription'], onFocusCapture: _this._onSplitContainerFocusCapture }),\n React.createElement(\"span\", { style: { display: 'flex', width: '100%' } },\n _this._onRenderContent(tag, buttonProps),\n _this._onRenderSplitButtonMenuButton(classNames, keytipAttributes),\n _this._onRenderSplitButtonDivider(classNames)))); };\n return keytipProps ? (React.createElement(KeytipData, { keytipProps: keytipProps, disabled: disabled }, function (keytipAttributes) { return SplitButton(keytipAttributes); })) : (SplitButton());\n };\n BaseButton.prototype._onRenderSplitButtonDivider = function (classNames) {\n if (classNames && classNames.divider) {\n var onClick = function (ev) {\n ev.stopPropagation();\n };\n return React.createElement(\"span\", { className: classNames.divider, \"aria-hidden\": true, onClick: onClick });\n }\n return null;\n };\n BaseButton.prototype._onRenderSplitButtonMenuButton = function (classNames, keytipAttributes) {\n var _a = this.props, allowDisabledFocus = _a.allowDisabledFocus, checked = _a.checked, disabled = _a.disabled, splitButtonMenuProps = _a.splitButtonMenuProps, splitButtonAriaLabel = _a.splitButtonAriaLabel, primaryDisabled = _a.primaryDisabled;\n var menuHidden = this.state.menuHidden;\n var menuIconProps = this.props.menuIconProps;\n if (menuIconProps === undefined) {\n menuIconProps = {\n iconName: 'ChevronDown',\n };\n }\n var splitButtonProps = __assign(__assign({}, splitButtonMenuProps), { styles: classNames, checked: checked, disabled: disabled, allowDisabledFocus: allowDisabledFocus, onClick: this._onMenuClick, menuProps: undefined, iconProps: __assign(__assign({}, menuIconProps), { className: this._classNames.menuIcon }), ariaLabel: splitButtonAriaLabel, 'aria-haspopup': true, 'aria-expanded': !menuHidden, 'data-is-focusable': false });\n // Add data-ktp-execute-target to the split button if the keytip is defined\n return (React.createElement(BaseButton, __assign({}, splitButtonProps, { \"data-ktp-execute-target\": keytipAttributes ? keytipAttributes['data-ktp-execute-target'] : keytipAttributes, onMouseDown: this._onMouseDown, tabIndex: primaryDisabled && !allowDisabledFocus ? 0 : -1 })));\n };\n BaseButton.prototype._onPointerDown = function (ev) {\n var onPointerDown = this.props.onPointerDown;\n if (onPointerDown) {\n onPointerDown(ev);\n }\n if (ev.pointerType === 'touch') {\n this._handleTouchAndPointerEvent();\n ev.preventDefault();\n ev.stopImmediatePropagation();\n }\n };\n BaseButton.prototype._handleTouchAndPointerEvent = function () {\n var _this = this;\n // If we already have an existing timeout from a previous touch and pointer event\n // cancel that timeout so we can set a new one.\n if (this._lastTouchTimeoutId !== undefined) {\n this._async.clearTimeout(this._lastTouchTimeoutId);\n this._lastTouchTimeoutId = undefined;\n }\n this._processingTouch = true;\n this._lastTouchTimeoutId = this._async.setTimeout(function () {\n _this._processingTouch = false;\n _this._lastTouchTimeoutId = undefined;\n // Touch and pointer events don't focus the button naturally,\n // so adding an imperative focus call to guarantee this behavior.\n // Only focus the button if a splitbutton menu is not open\n if (_this.state.menuHidden) {\n _this.focus();\n }\n }, TouchIdleDelay);\n };\n /**\n * Returns if the user hits a valid keyboard key to open the menu\n * @param ev - the keyboard event\n * @returns True if user clicks on custom trigger key if enabled or alt + down arrow if not. False otherwise.\n */\n BaseButton.prototype._isValidMenuOpenKey = function (ev) {\n if (this.props.menuTriggerKeyCode) {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === this.props.menuTriggerKeyCode;\n }\n else if (this.props.menuProps) {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === KeyCodes.down && (ev.altKey || ev.metaKey);\n }\n // Note: When enter is pressed, we will let the event continue to propagate\n // to trigger the onClick event on the button\n return false;\n };\n BaseButton.defaultProps = {\n baseClassName: 'ms-Button',\n styles: {},\n split: false,\n };\n // needed to access registeredProviders when manually setting focus visibility\n BaseButton.contextType = FocusRectsContext;\n return BaseButton;\n}(React.Component));\nexport { BaseButton };\n//# sourceMappingURL=BaseButton.js.map","import { memoizeFunction } from '../../Utilities';\nimport { HighContrastSelector, getFocusStyle, hiddenContentStyle } from '../../Styling';\nvar noOutline = {\n outline: 0,\n};\nvar iconStyle = function (fontSize) {\n return {\n fontSize: fontSize,\n margin: '0 4px',\n height: '16px',\n lineHeight: '16px',\n textAlign: 'center',\n flexShrink: 0,\n };\n};\n/**\n * Gets the base button styles. Note: because it is a base class to be used with the `mergeRules`\n * helper, it should have values for all class names in the interface. This let `mergeRules` optimize\n * mixing class names together.\n */\nexport var getStyles = memoizeFunction(function (theme) {\n var _a, _b;\n var semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;\n var border = semanticColors.buttonBorder;\n var disabledBackground = semanticColors.disabledBackground;\n var disabledText = semanticColors.disabledText;\n var buttonHighContrastFocus = {\n left: -2,\n top: -2,\n bottom: -2,\n right: -2,\n outlineColor: 'ButtonText',\n };\n return {\n root: [\n getFocusStyle(theme, { inset: 1, highContrastStyle: buttonHighContrastFocus, borderColor: 'transparent' }),\n theme.fonts.medium,\n {\n border: '1px solid ' + border,\n borderRadius: effects.roundedCorner2,\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: 'inline-block',\n padding: '0 16px',\n textDecoration: 'none',\n textAlign: 'center',\n userSelect: 'none',\n selectors: {\n // IE11 workaround for preventing shift of child elements of a button when active.\n ':active > span': {\n position: 'relative',\n left: 0,\n top: 0,\n },\n },\n },\n ],\n rootDisabled: [\n getFocusStyle(theme, { inset: 1, highContrastStyle: buttonHighContrastFocus, borderColor: 'transparent' }),\n {\n backgroundColor: disabledBackground,\n borderColor: disabledBackground,\n color: disabledText,\n cursor: 'default',\n selectors: {\n ':hover': noOutline,\n ':focus': noOutline,\n },\n },\n ],\n iconDisabled: {\n color: disabledText,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n color: 'GrayText',\n },\n _a),\n },\n menuIconDisabled: {\n color: disabledText,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'GrayText',\n },\n _b),\n },\n flexContainer: {\n display: 'flex',\n height: '100%',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n alignItems: 'center',\n },\n description: {\n display: 'block',\n },\n textContainer: {\n flexGrow: 1,\n display: 'block',\n },\n icon: iconStyle(fonts.mediumPlus.fontSize),\n menuIcon: iconStyle(fonts.small.fontSize),\n label: {\n margin: '0 4px',\n lineHeight: '100%',\n display: 'block',\n },\n screenReaderText: hiddenContentStyle,\n };\n});\n//# sourceMappingURL=BaseButton.styles.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, concatStyleSets, getFocusStyle, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nexport var getStyles = memoizeFunction(function (theme, customStyles) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;\n var effects = theme.effects, palette = theme.palette, semanticColors = theme.semanticColors;\n var buttonHighContrastFocus = {\n left: -2,\n top: -2,\n bottom: -2,\n right: -2,\n border: 'none',\n };\n var splitButtonDividerBaseStyles = {\n position: 'absolute',\n width: 1,\n right: 31,\n top: 8,\n bottom: 8,\n };\n var splitButtonStyles = {\n splitButtonContainer: [\n getFocusStyle(theme, { highContrastStyle: buttonHighContrastFocus, inset: 2, pointerEvents: 'none' }),\n {\n display: 'inline-flex',\n selectors: {\n '.ms-Button--default': {\n borderTopRightRadius: '0',\n borderBottomRightRadius: '0',\n borderRight: 'none',\n flexGrow: '1',\n },\n '.ms-Button--primary': {\n borderTopRightRadius: '0',\n borderBottomRightRadius: '0',\n border: 'none',\n flexGrow: '1',\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ color: 'WindowText', backgroundColor: 'Window', border: '1px solid WindowText', borderRightWidth: '0' }, getHighContrastNoAdjustStyle()),\n _a[':hover'] = {\n border: 'none',\n },\n _a[':active'] = {\n border: 'none',\n },\n _a),\n },\n '.ms-Button--primary + .ms-Button': {\n border: 'none',\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n border: '1px solid WindowText',\n borderLeftWidth: '0',\n },\n _b),\n },\n },\n },\n ],\n splitButtonContainerHovered: {\n selectors: {\n '.ms-Button--primary': {\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'Window',\n backgroundColor: 'Highlight',\n },\n _c),\n },\n '.ms-Button.is-disabled': {\n color: semanticColors.buttonTextDisabled,\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n _d),\n },\n },\n },\n splitButtonContainerChecked: {\n selectors: {\n '.ms-Button--primary': {\n selectors: (_e = {},\n _e[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _e),\n },\n },\n },\n splitButtonContainerCheckedHovered: {\n selectors: {\n '.ms-Button--primary': {\n selectors: (_f = {},\n _f[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _f),\n },\n },\n },\n splitButtonContainerFocused: {\n outline: 'none!important',\n },\n splitButtonMenuButton: (_g = {\n padding: 6,\n height: 'auto',\n boxSizing: 'border-box',\n borderRadius: 0,\n borderTopRightRadius: effects.roundedCorner2,\n borderBottomRightRadius: effects.roundedCorner2,\n border: \"1px solid \".concat(palette.neutralSecondaryAlt),\n borderLeft: 'none',\n outline: 'transparent',\n userSelect: 'none',\n display: 'inline-block',\n textDecoration: 'none',\n textAlign: 'center',\n cursor: 'pointer',\n verticalAlign: 'top',\n width: 32,\n marginLeft: -1,\n marginTop: 0,\n marginRight: 0,\n marginBottom: 0\n },\n _g[HighContrastSelector] = {\n '.ms-Button-menuIcon': {\n color: 'WindowText',\n },\n },\n _g),\n splitButtonDivider: __assign(__assign({}, splitButtonDividerBaseStyles), { selectors: (_h = {},\n _h[HighContrastSelector] = {\n backgroundColor: 'WindowText',\n },\n _h) }),\n splitButtonDividerDisabled: __assign(__assign({}, splitButtonDividerBaseStyles), { selectors: (_j = {},\n _j[HighContrastSelector] = {\n backgroundColor: 'GrayText',\n },\n _j) }),\n splitButtonMenuButtonDisabled: {\n pointerEvents: 'none',\n border: 'none',\n selectors: (_k = {\n ':hover': {\n cursor: 'default',\n },\n '.ms-Button--primary': {\n selectors: (_l = {},\n _l[HighContrastSelector] = {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n _l),\n },\n '.ms-Button-menuIcon': {\n selectors: (_m = {},\n _m[HighContrastSelector] = {\n color: 'GrayText',\n },\n _m),\n }\n },\n _k[HighContrastSelector] = {\n color: 'GrayText',\n border: '1px solid GrayText',\n backgroundColor: 'Window',\n },\n _k),\n },\n splitButtonFlexContainer: {\n display: 'flex',\n height: '100%',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n alignItems: 'center',\n },\n splitButtonContainerDisabled: {\n outline: 'none',\n border: 'none',\n selectors: (_o = {},\n _o[HighContrastSelector] = __assign({ color: 'GrayText', borderColor: 'GrayText', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()),\n _o),\n },\n splitButtonMenuFocused: __assign({}, getFocusStyle(theme, { highContrastStyle: buttonHighContrastFocus, inset: 2 })),\n };\n return concatStyleSets(splitButtonStyles, customStyles);\n});\n//# sourceMappingURL=SplitButton.styles.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, getHighContrastNoAdjustStyle } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nvar splitButtonDividerBaseStyles = function () {\n return {\n position: 'absolute',\n width: 1,\n right: 31,\n top: 8,\n bottom: 8,\n };\n};\nexport function standardStyles(theme) {\n var _a, _b, _c, _d, _e;\n var s = theme.semanticColors, p = theme.palette;\n var buttonBackground = s.buttonBackground;\n var buttonBackgroundPressed = s.buttonBackgroundPressed;\n var buttonBackgroundHovered = s.buttonBackgroundHovered;\n var buttonBackgroundDisabled = s.buttonBackgroundDisabled;\n var buttonText = s.buttonText;\n var buttonTextHovered = s.buttonTextHovered;\n var buttonTextDisabled = s.buttonTextDisabled;\n var buttonTextChecked = s.buttonTextChecked;\n var buttonTextCheckedHovered = s.buttonTextCheckedHovered;\n return {\n root: {\n backgroundColor: buttonBackground,\n color: buttonText,\n },\n rootHovered: {\n backgroundColor: buttonBackgroundHovered,\n color: buttonTextHovered,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n borderColor: 'Highlight',\n color: 'Highlight',\n },\n _a),\n },\n rootPressed: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextChecked,\n },\n rootExpanded: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextChecked,\n },\n rootChecked: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextChecked,\n },\n rootCheckedHovered: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextCheckedHovered,\n },\n rootDisabled: {\n color: buttonTextDisabled,\n backgroundColor: buttonBackgroundDisabled,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n _b),\n },\n // Split button styles\n splitButtonContainer: {\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n border: 'none',\n },\n _c),\n },\n splitButtonMenuButton: {\n color: p.white,\n backgroundColor: 'transparent',\n selectors: {\n ':hover': {\n backgroundColor: p.neutralLight,\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n color: 'Highlight',\n },\n _d),\n },\n },\n },\n splitButtonMenuButtonDisabled: {\n backgroundColor: s.buttonBackgroundDisabled,\n selectors: {\n ':hover': {\n backgroundColor: s.buttonBackgroundDisabled,\n },\n },\n },\n splitButtonDivider: __assign(__assign({}, splitButtonDividerBaseStyles()), { backgroundColor: p.neutralTertiaryAlt, selectors: (_e = {},\n _e[HighContrastSelector] = {\n backgroundColor: 'WindowText',\n },\n _e) }),\n splitButtonDividerDisabled: {\n backgroundColor: theme.palette.neutralTertiaryAlt,\n },\n splitButtonMenuButtonChecked: {\n backgroundColor: p.neutralQuaternaryAlt,\n selectors: {\n ':hover': {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n },\n },\n splitButtonMenuButtonExpanded: {\n backgroundColor: p.neutralQuaternaryAlt,\n selectors: {\n ':hover': {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n },\n },\n splitButtonMenuIcon: {\n color: s.buttonText,\n },\n splitButtonMenuIconDisabled: {\n color: s.buttonTextDisabled,\n },\n };\n}\nexport function primaryStyles(theme) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j;\n var p = theme.palette, s = theme.semanticColors;\n return {\n root: {\n backgroundColor: s.primaryButtonBackground,\n border: \"1px solid \".concat(s.primaryButtonBackground),\n color: s.primaryButtonText,\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText', borderColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _a[\".\".concat(IsFocusVisibleClassName, \" &:focus\")] = {\n selectors: {\n ':after': {\n border: \"none\",\n outlineColor: p.white,\n },\n },\n },\n _a),\n },\n rootHovered: {\n backgroundColor: s.primaryButtonBackgroundHovered,\n border: \"1px solid \".concat(s.primaryButtonBackgroundHovered),\n color: s.primaryButtonTextHovered,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'Window',\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n },\n _b),\n },\n rootPressed: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n border: \"1px solid \".concat(s.primaryButtonBackgroundPressed),\n color: s.primaryButtonTextPressed,\n selectors: (_c = {},\n _c[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText', borderColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _c),\n },\n rootExpanded: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n color: s.primaryButtonTextPressed,\n },\n rootChecked: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n color: s.primaryButtonTextPressed,\n },\n rootCheckedHovered: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n color: s.primaryButtonTextPressed,\n },\n rootDisabled: {\n color: s.primaryButtonTextDisabled,\n backgroundColor: s.primaryButtonBackgroundDisabled,\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n _d),\n },\n // Split button styles\n splitButtonContainer: {\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n border: 'none',\n },\n _e),\n },\n splitButtonDivider: __assign(__assign({}, splitButtonDividerBaseStyles()), { backgroundColor: p.white, selectors: (_f = {},\n _f[HighContrastSelector] = {\n backgroundColor: 'Window',\n },\n _f) }),\n splitButtonMenuButton: {\n backgroundColor: s.primaryButtonBackground,\n color: s.primaryButtonText,\n selectors: (_g = {},\n _g[HighContrastSelector] = {\n backgroundColor: 'Canvas',\n },\n _g[':hover'] = {\n backgroundColor: s.primaryButtonBackgroundHovered,\n selectors: (_h = {},\n _h[HighContrastSelector] = {\n color: 'Highlight',\n },\n _h),\n },\n _g),\n },\n splitButtonMenuButtonDisabled: {\n backgroundColor: s.primaryButtonBackgroundDisabled,\n selectors: {\n ':hover': {\n backgroundColor: s.primaryButtonBackgroundDisabled,\n },\n },\n },\n splitButtonMenuButtonChecked: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n selectors: {\n ':hover': {\n backgroundColor: s.primaryButtonBackgroundPressed,\n },\n },\n },\n splitButtonMenuButtonExpanded: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n selectors: {\n ':hover': {\n backgroundColor: s.primaryButtonBackgroundPressed,\n },\n },\n },\n splitButtonMenuIcon: {\n color: s.primaryButtonText,\n },\n splitButtonMenuIconDisabled: {\n color: p.neutralTertiary,\n selectors: (_j = {},\n _j[HighContrastSelector] = {\n color: 'GrayText',\n },\n _j),\n },\n };\n}\n//# sourceMappingURL=ButtonThemes.js.map","import { concatStyleSets, FontWeights } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../BaseButton.styles';\nimport { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles';\nimport { primaryStyles, standardStyles } from '../ButtonThemes';\nvar DEFAULT_BUTTON_HEIGHT = '32px';\nvar DEFAULT_BUTTON_MIN_WIDTH = '80px';\nexport var getStyles = memoizeFunction(function (theme, customStyles, primary) {\n var baseButtonStyles = getBaseButtonStyles(theme);\n var splitButtonStyles = getSplitButtonStyles(theme);\n var defaultButtonStyles = {\n root: {\n minWidth: DEFAULT_BUTTON_MIN_WIDTH,\n height: DEFAULT_BUTTON_HEIGHT,\n },\n label: {\n fontWeight: FontWeights.semibold,\n },\n };\n return concatStyleSets(baseButtonStyles, defaultButtonStyles, primary ? primaryStyles(theme) : standardStyles(theme), splitButtonStyles, customStyles);\n});\n//# sourceMappingURL=DefaultButton.styles.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './DefaultButton.styles';\n/**\n * {@docCategory Button}\n */\nvar DefaultButton = /** @class */ (function (_super) {\n __extends(DefaultButton, _super);\n function DefaultButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n DefaultButton.prototype.render = function () {\n var _a = this.props, _b = _a.primary, primary = _b === void 0 ? false : _b, styles = _a.styles, theme = _a.theme;\n return (React.createElement(BaseButton, __assign({}, this.props, { variantClassName: primary ? 'ms-Button--primary' : 'ms-Button--default', styles: getStyles(theme, styles, primary), onRenderDescription: nullRender })));\n };\n DefaultButton = __decorate([\n customizable('DefaultButton', ['theme', 'styles'], true)\n ], DefaultButton);\n return DefaultButton;\n}(React.Component));\nexport { DefaultButton };\n//# sourceMappingURL=DefaultButton.js.map","import { concatStyleSets, HighContrastSelector } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../BaseButton.styles';\nvar DEFAULT_BUTTON_HEIGHT = '40px';\nvar DEFAULT_PADDING = '0 4px';\nexport var getStyles = memoizeFunction(function (theme, customStyles) {\n var _a, _b, _c;\n var baseButtonStyles = getBaseButtonStyles(theme);\n var actionButtonStyles = {\n root: {\n padding: DEFAULT_PADDING,\n height: DEFAULT_BUTTON_HEIGHT,\n color: theme.palette.neutralPrimary,\n backgroundColor: 'transparent',\n border: '1px solid transparent',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n borderColor: 'Window',\n },\n _a),\n },\n rootHovered: {\n color: theme.palette.themePrimary,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'Highlight',\n },\n _b),\n },\n iconHovered: {\n color: theme.palette.themePrimary,\n },\n rootPressed: {\n color: theme.palette.black,\n },\n rootExpanded: {\n color: theme.palette.themePrimary,\n },\n iconPressed: {\n color: theme.palette.themeDarker,\n },\n rootDisabled: {\n color: theme.palette.neutralTertiary,\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'GrayText',\n },\n _c),\n },\n rootChecked: {\n color: theme.palette.black,\n },\n iconChecked: {\n color: theme.palette.themeDarker,\n },\n flexContainer: {\n justifyContent: 'flex-start',\n },\n icon: {\n color: theme.palette.themeDarkAlt,\n },\n iconDisabled: {\n color: 'inherit',\n },\n menuIcon: {\n color: theme.palette.neutralSecondary,\n },\n textContainer: {\n flexGrow: 0,\n },\n };\n return concatStyleSets(baseButtonStyles, actionButtonStyles, customStyles);\n});\n//# sourceMappingURL=ActionButton.styles.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './ActionButton.styles';\n/**\n * {@docCategory Button}\n */\nvar ActionButton = /** @class */ (function (_super) {\n __extends(ActionButton, _super);\n function ActionButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n ActionButton.prototype.render = function () {\n var _a = this.props, styles = _a.styles, theme = _a.theme;\n return (React.createElement(BaseButton, __assign({}, this.props, { variantClassName: \"ms-Button--action ms-Button--command\", styles: getStyles(theme, styles), onRenderDescription: nullRender })));\n };\n ActionButton = __decorate([\n customizable('ActionButton', ['theme', 'styles'], true)\n ], ActionButton);\n return ActionButton;\n}(React.Component));\nexport { ActionButton };\n//# sourceMappingURL=ActionButton.js.map","import { concatStyleSets, HighContrastSelector } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../BaseButton.styles';\nimport { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles';\nexport var getStyles = memoizeFunction(function (theme, customStyles) {\n var _a;\n var baseButtonStyles = getBaseButtonStyles(theme);\n var splitButtonStyles = getSplitButtonStyles(theme);\n var palette = theme.palette, semanticColors = theme.semanticColors;\n var iconButtonStyles = {\n root: {\n padding: '0 4px',\n width: '32px',\n height: '32px',\n backgroundColor: 'transparent',\n border: 'none',\n color: semanticColors.link,\n },\n rootHovered: {\n color: palette.themeDarkAlt,\n backgroundColor: palette.neutralLighter,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n borderColor: 'Highlight',\n color: 'Highlight',\n },\n _a),\n },\n rootHasMenu: {\n width: 'auto',\n },\n rootPressed: {\n color: palette.themeDark,\n backgroundColor: palette.neutralLight,\n },\n rootExpanded: {\n color: palette.themeDark,\n backgroundColor: palette.neutralLight,\n },\n rootChecked: {\n color: palette.themeDark,\n backgroundColor: palette.neutralLight,\n },\n rootCheckedHovered: {\n color: palette.themeDark,\n backgroundColor: palette.neutralQuaternaryAlt,\n },\n rootDisabled: {\n color: palette.neutralTertiaryAlt,\n },\n };\n return concatStyleSets(baseButtonStyles, iconButtonStyles, splitButtonStyles, customStyles);\n});\n//# sourceMappingURL=IconButton.styles.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './IconButton.styles';\n/**\n * {@docCategory Button}\n */\nvar IconButton = /** @class */ (function (_super) {\n __extends(IconButton, _super);\n function IconButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n IconButton.prototype.render = function () {\n var _a = this.props, styles = _a.styles, theme = _a.theme;\n return (React.createElement(BaseButton, __assign({}, this.props, { variantClassName: \"ms-Button--icon\", styles: getStyles(theme, styles), onRenderText: nullRender, onRenderDescription: nullRender })));\n };\n IconButton = __decorate([\n customizable('IconButton', ['theme', 'styles'], true)\n ], IconButton);\n return IconButton;\n}(React.Component));\nexport { IconButton };\n//# sourceMappingURL=IconButton.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { DefaultButton } from '../DefaultButton/DefaultButton';\n/**\n * {@docCategory Button}\n */\nvar PrimaryButton = /** @class */ (function (_super) {\n __extends(PrimaryButton, _super);\n function PrimaryButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n PrimaryButton.prototype.render = function () {\n return React.createElement(DefaultButton, __assign({}, this.props, { primary: true, onRenderDescription: nullRender }));\n };\n PrimaryButton = __decorate([\n customizable('PrimaryButton', ['theme', 'styles'], true)\n ], PrimaryButton);\n return PrimaryButton;\n}(React.Component));\nexport { PrimaryButton };\n//# sourceMappingURL=PrimaryButton.js.map","import { ActionButton } from '../ActionButton/ActionButton';\n/**\n * {@docCategory Button}\n */\nexport var CommandButton = ActionButton;\n//# sourceMappingURL=CommandButton.js.map","/**\n * {@docCategory ResizeGroup}\n */\nexport var ResizeGroupDirection;\n(function (ResizeGroupDirection) {\n ResizeGroupDirection[ResizeGroupDirection[\"horizontal\"] = 0] = \"horizontal\";\n ResizeGroupDirection[ResizeGroupDirection[\"vertical\"] = 1] = \"vertical\";\n})(ResizeGroupDirection || (ResizeGroupDirection = {}));\n//# sourceMappingURL=ResizeGroup.types.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { divProperties, getNativeProps } from '../../Utilities';\nimport { ResizeGroupDirection } from './ResizeGroup.types';\nimport { useConst, useMergedRefs, useAsync, useOnEvent, useWarnings } from '@fluentui/react-hooks';\nimport { useWindow } from '../../WindowProvider';\nvar RESIZE_DELAY = 16;\n/**\n * Returns a simple object is able to store measurements with a given key.\n */\nexport var getMeasurementCache = function () {\n var measurementsCache = {};\n return {\n /**\n * Checks if the provided data has a cacheKey. If it has a cacheKey and there is a\n * corresponding entry in the measurementsCache, then it will return that value.\n * Returns undefined otherwise.\n */\n getCachedMeasurement: function (data) {\n if (data && data.cacheKey && measurementsCache.hasOwnProperty(data.cacheKey)) {\n return measurementsCache[data.cacheKey];\n }\n return undefined;\n },\n /**\n * Should be called whenever there is a new measurement associated with a given data object.\n * If the data has a cacheKey, store that measurement in the measurementsCache.\n */\n addMeasurementToCache: function (data, measurement) {\n if (data.cacheKey) {\n measurementsCache[data.cacheKey] = measurement;\n }\n },\n };\n};\n/**\n * Returns a function that is able to compute the next state for the ResizeGroup given the current\n * state and any measurement updates.\n */\nexport var getNextResizeGroupStateProvider = function (measurementCache) {\n if (measurementCache === void 0) { measurementCache = getMeasurementCache(); }\n var _measurementCache = measurementCache;\n var _containerDimension;\n /**\n * Gets the width/height of the data rendered in a hidden div.\n * @param measuredData - The data corresponding to the measurement we wish to take.\n * @param getElementToMeasureDimension - A function that returns the measurement of the rendered data.\n * Only called when the measurement is not in the cache.\n */\n function _getMeasuredDimension(measuredData, getElementToMeasureDimension) {\n var cachedDimension = _measurementCache.getCachedMeasurement(measuredData);\n if (cachedDimension !== undefined) {\n return cachedDimension;\n }\n var measuredDimension = getElementToMeasureDimension();\n _measurementCache.addMeasurementToCache(measuredData, measuredDimension);\n return measuredDimension;\n }\n /**\n * Will get the next IResizeGroupState based on the current data while trying to shrink contents\n * to fit in the container.\n * @param data - The initial data point to start measuring.\n * @param onReduceData - Function that transforms the data into something that should render with less width/height.\n * @param getElementToMeasureDimension - A function that returns the measurement of the rendered data.\n * Only called when the measurement is not in the cache.\n */\n function _shrinkContentsUntilTheyFit(data, onReduceData, getElementToMeasureDimension) {\n var dataToMeasure = data;\n var measuredDimension = _getMeasuredDimension(data, getElementToMeasureDimension);\n while (measuredDimension > _containerDimension) {\n var nextMeasuredData = onReduceData(dataToMeasure);\n // We don't want to get stuck in an infinite render loop when there are no more\n // scaling steps, so implementations of onReduceData should return undefined when\n // there are no more scaling states to apply.\n if (nextMeasuredData === undefined) {\n return {\n renderedData: dataToMeasure,\n resizeDirection: undefined,\n dataToMeasure: undefined,\n };\n }\n measuredDimension = _measurementCache.getCachedMeasurement(nextMeasuredData);\n // If the measurement isn't in the cache, we need to re-render with some data in a hidden div\n if (measuredDimension === undefined) {\n return {\n dataToMeasure: nextMeasuredData,\n resizeDirection: 'shrink',\n };\n }\n dataToMeasure = nextMeasuredData;\n }\n return {\n renderedData: dataToMeasure,\n resizeDirection: undefined,\n dataToMeasure: undefined,\n };\n }\n /**\n * This function should be called when the state changes in a manner that might allow for more content to fit\n * on the screen, such as the window width/height growing.\n * @param data - The initial data point to start measuring.\n * @param onGrowData - Function that transforms the data into something that may take up more space when rendering.\n * @param getElementToMeasureDimension - A function that returns the measurement of the rendered data.\n * Only called when the measurement is not in the cache.\n */\n function _growDataUntilItDoesNotFit(data, onGrowData, getElementToMeasureDimension, onReduceData) {\n var dataToMeasure = data;\n var measuredDimension = _getMeasuredDimension(data, getElementToMeasureDimension);\n while (measuredDimension < _containerDimension) {\n var nextMeasuredData = onGrowData(dataToMeasure);\n // We don't want to get stuck in an infinite render loop when there are no more\n // scaling steps, so implementations of onGrowData should return undefined when\n // there are no more scaling states to apply.\n if (nextMeasuredData === undefined) {\n return {\n renderedData: dataToMeasure,\n resizeDirection: undefined,\n dataToMeasure: undefined,\n };\n }\n measuredDimension = _measurementCache.getCachedMeasurement(nextMeasuredData);\n // If the measurement isn't in the cache, we need to re-render with some data in a hidden div\n if (measuredDimension === undefined) {\n return {\n dataToMeasure: nextMeasuredData,\n };\n }\n dataToMeasure = nextMeasuredData;\n }\n // Once the loop is done, we should now shrink until the contents fit.\n return __assign({ resizeDirection: 'shrink' }, _shrinkContentsUntilTheyFit(dataToMeasure, onReduceData, getElementToMeasureDimension));\n }\n /**\n * Handles an update to the container width/height.\n * Should only be called when we knew the previous container width/height.\n * @param newDimension - The new width/height of the container.\n * @param fullDimensionData - The initial data passed in as a prop to resizeGroup.\n * @param renderedData - The data that was rendered prior to the container size changing.\n * @param onGrowData - Set to true if the Resize group has an onGrowData function.\n */\n function _updateContainerDimension(newDimension, fullDimensionData, renderedData, onGrowData) {\n var nextState;\n if (newDimension > _containerDimension) {\n if (onGrowData) {\n nextState = {\n resizeDirection: 'grow',\n dataToMeasure: onGrowData(renderedData),\n };\n }\n else {\n nextState = {\n resizeDirection: 'shrink',\n dataToMeasure: fullDimensionData,\n };\n }\n }\n else {\n nextState = {\n resizeDirection: 'shrink',\n dataToMeasure: renderedData,\n };\n }\n _containerDimension = newDimension;\n return __assign(__assign({}, nextState), { measureContainer: false });\n }\n function getNextState(props, currentState, getElementToMeasureDimension, newContainerDimension) {\n // If there is no new container width/height or data to measure, there is no need for a new state update\n if (newContainerDimension === undefined && currentState.dataToMeasure === undefined) {\n return undefined;\n }\n if (newContainerDimension) {\n // If we know the last container size and we rendered data at that width/height, we can do an optimized render\n if (_containerDimension && currentState.renderedData && !currentState.dataToMeasure) {\n return __assign(__assign({}, currentState), _updateContainerDimension(newContainerDimension, props.data, currentState.renderedData, props.onGrowData));\n }\n // If we are just setting the container width/height for the first time, we can't do any optimizations\n _containerDimension = newContainerDimension;\n }\n var nextState = __assign(__assign({}, currentState), { measureContainer: false });\n if (currentState.dataToMeasure) {\n if (currentState.resizeDirection === 'grow' && props.onGrowData) {\n nextState = __assign(__assign({}, nextState), _growDataUntilItDoesNotFit(currentState.dataToMeasure, props.onGrowData, getElementToMeasureDimension, props.onReduceData));\n }\n else {\n nextState = __assign(__assign({}, nextState), _shrinkContentsUntilTheyFit(currentState.dataToMeasure, props.onReduceData, getElementToMeasureDimension));\n }\n }\n return nextState;\n }\n /** Function that determines if we need to render content for measurement based on the measurement cache contents. */\n function shouldRenderDataForMeasurement(dataToMeasure) {\n if (!dataToMeasure || _measurementCache.getCachedMeasurement(dataToMeasure) !== undefined) {\n return false;\n }\n return true;\n }\n function getInitialResizeGroupState(data) {\n return {\n dataToMeasure: __assign({}, data),\n resizeDirection: 'grow',\n measureContainer: true,\n };\n }\n return {\n getNextState: getNextState,\n shouldRenderDataForMeasurement: shouldRenderDataForMeasurement,\n getInitialResizeGroupState: getInitialResizeGroupState,\n };\n};\n// Provides a context property that (if true) tells any child components that\n// they are only being used for measurement purposes and will not be visible.\nexport var MeasuredContext = React.createContext({ isMeasured: false });\n// Styles for the hidden div used for measurement\nvar hiddenDivStyles = { position: 'fixed', visibility: 'hidden' };\nvar hiddenParentStyles = { position: 'relative' };\nvar COMPONENT_NAME = 'ResizeGroup';\n/**\n * Use useReducer instead of userState because React is not batching the state updates\n * when state is set in callbacks of setTimeout or requestAnimationFrame.\n * See issue: https://github.com/facebook/react/issues/14259\n */\nfunction resizeDataReducer(state, action) {\n var _a;\n switch (action.type) {\n case 'resizeData':\n return __assign({}, action.value);\n case 'dataToMeasure':\n return __assign(__assign({}, state), { dataToMeasure: action.value, resizeDirection: 'grow', measureContainer: true });\n default:\n return __assign(__assign({}, state), (_a = {}, _a[action.type] = action.value, _a));\n }\n}\nfunction useResizeState(props, nextResizeGroupStateProvider, rootRef) {\n var initialStateData = useConst(function () { return nextResizeGroupStateProvider.getInitialResizeGroupState(props.data); });\n var _a = React.useReducer(resizeDataReducer, initialStateData), resizeData = _a[0], dispatchResizeDataAction = _a[1];\n // Reset state when new data is provided\n React.useEffect(function () {\n dispatchResizeDataAction({\n type: 'dataToMeasure',\n value: props.data,\n });\n }, [props.data]);\n // Because it's possible that we may force more than one re-render per animation frame, we\n // want to make sure that the RAF request is using the most recent data.\n var stateRef = React.useRef(initialStateData);\n stateRef.current = __assign({}, resizeData);\n var updateResizeState = React.useCallback(function (nextState) {\n if (nextState) {\n dispatchResizeDataAction({\n type: 'resizeData',\n value: nextState,\n });\n }\n }, []);\n var remeasure = React.useCallback(function () {\n if (rootRef.current) {\n dispatchResizeDataAction({\n type: 'measureContainer',\n value: true,\n });\n }\n }, [rootRef]);\n return [stateRef, updateResizeState, remeasure];\n}\nfunction useResizingBehavior(props, rootRef) {\n var nextResizeGroupStateProvider = useConst(getNextResizeGroupStateProvider);\n // A div that can be used for the initial measurement so that we can avoid mounting a second instance\n // of the component being measured for the initial render.\n var initialHiddenDiv = React.useRef(null);\n // A hidden div that is used for mounting a new instance of the component for measurement in a hidden\n // div without unmounting the currently visible content.\n var updateHiddenDiv = React.useRef(null);\n // Tracks if any content has been rendered to the user. This enables us to do some performance optimizations\n // for the initial render.\n var hasRenderedContent = React.useRef(false);\n var async = useAsync();\n var _a = useResizeState(props, nextResizeGroupStateProvider, rootRef), stateRef = _a[0], updateResizeState = _a[1], remeasure = _a[2];\n React.useEffect(function () {\n var _a;\n if (stateRef.current.renderedData) {\n hasRenderedContent.current = true;\n (_a = props.dataDidRender) === null || _a === void 0 ? void 0 : _a.call(props, stateRef.current.renderedData);\n }\n });\n React.useEffect(function () {\n async.requestAnimationFrame(function () {\n var containerDimension = undefined;\n if (stateRef.current.measureContainer && rootRef.current) {\n var boundingRect = rootRef.current.getBoundingClientRect();\n containerDimension =\n props.direction === ResizeGroupDirection.vertical ? boundingRect.height : boundingRect.width;\n }\n var nextState = nextResizeGroupStateProvider.getNextState(props, stateRef.current, function () {\n var refToMeasure = !hasRenderedContent.current ? initialHiddenDiv : updateHiddenDiv;\n if (!refToMeasure.current) {\n return 0;\n }\n var measuredBoundingRect = refToMeasure.current.getBoundingClientRect();\n return props.direction === ResizeGroupDirection.vertical\n ? measuredBoundingRect.height\n : measuredBoundingRect.width;\n }, containerDimension);\n updateResizeState(nextState);\n }, rootRef.current);\n });\n var win = useWindow();\n useOnEvent(win, 'resize', async.debounce(remeasure, RESIZE_DELAY, { leading: true }));\n var dataNeedsMeasuring = nextResizeGroupStateProvider.shouldRenderDataForMeasurement(stateRef.current.dataToMeasure);\n var isInitialMeasure = !hasRenderedContent.current && dataNeedsMeasuring;\n return [\n stateRef.current.dataToMeasure,\n stateRef.current.renderedData,\n remeasure,\n initialHiddenDiv,\n updateHiddenDiv,\n dataNeedsMeasuring,\n isInitialMeasure,\n ];\n}\nfunction useDebugWarnings(props) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional\n useWarnings({\n name: COMPONENT_NAME,\n props: props,\n deprecations: { styles: 'className' },\n });\n }\n}\nvar measuredContextValue = { isMeasured: true };\nexport var ResizeGroupBase = React.forwardRef(function (props, forwardedRef) {\n var rootRef = React.useRef(null);\n // The root div which is the container inside of which we are trying to fit content.\n var mergedRootRef = useMergedRefs(rootRef, forwardedRef);\n var _a = useResizingBehavior(props, rootRef), dataToMeasure = _a[0], renderedData = _a[1], remeasure = _a[2], initialHiddenDiv = _a[3], updateHiddenDiv = _a[4], dataNeedsMeasuring = _a[5], isInitialMeasure = _a[6];\n React.useImperativeHandle(props.componentRef, function () { return ({ remeasure: remeasure }); }, [remeasure]);\n useDebugWarnings(props);\n var className = props.className, onRenderData = props.onRenderData;\n var divProps = getNativeProps(props, divProperties, ['data']);\n // We only ever render the final content to the user. All measurements are done in a hidden div.\n // For the initial render, we want this to be as fast as possible, so we need to make sure that we only mount one\n // version of the component for measurement and the final render. For renders that update what is on screen, we\n // want to make sure that there are no jarring effects such as the screen flashing as we apply scaling steps for\n // measurement. In the update case, we mount a second version of the component just for measurement purposes and\n // leave the rendered content untouched until we know the next state to show to the user.\n return (React.createElement(\"div\", __assign({}, divProps, { className: className, ref: mergedRootRef }),\n React.createElement(\"div\", { style: hiddenParentStyles },\n dataNeedsMeasuring && !isInitialMeasure && (React.createElement(\"div\", { style: hiddenDivStyles, ref: updateHiddenDiv },\n React.createElement(MeasuredContext.Provider, { value: measuredContextValue }, onRenderData(dataToMeasure)))),\n React.createElement(\"div\", { ref: initialHiddenDiv, style: isInitialMeasure ? hiddenDivStyles : undefined, \"data-automation-id\": \"visibleContent\" }, isInitialMeasure ? onRenderData(dataToMeasure) : renderedData && onRenderData(renderedData)))));\n});\nResizeGroupBase.displayName = 'ResizeGroupBase';\n//# sourceMappingURL=ResizeGroup.base.js.map","import { ResizeGroupBase } from './ResizeGroup.base';\nexport var ResizeGroup = ResizeGroupBase;\n//# sourceMappingURL=ResizeGroup.js.map","import { __assign, __extends, __rest, __spreadArray } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, getRTL, classNamesFunction, getNativeProps, htmlElementProperties, } from '../../Utilities';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { Link } from '../../Link';\nimport { Icon } from '../../Icon';\nimport { IconButton } from '../../Button';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { ResizeGroup } from '../../ResizeGroup';\nimport { TooltipHost, TooltipOverflowMode } from '../../Tooltip';\nimport { composeRenderFunction } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nvar OVERFLOW_KEY = 'overflow';\nvar nullFunction = function () { return null; };\nvar nonActionableItemProps = {\n styles: function (props) {\n var theme = props.theme;\n return {\n root: {\n selectors: {\n '&.is-disabled': {\n color: theme.semanticColors.bodyText,\n },\n },\n },\n };\n },\n};\n/**\n * {@docCategory Breadcrumb}\n */\nvar BreadcrumbBase = /** @class */ (function (_super) {\n __extends(BreadcrumbBase, _super);\n function BreadcrumbBase(props) {\n var _this = _super.call(this, props) || this;\n _this._focusZone = React.createRef();\n /**\n * Remove the first rendered item past the overlow point and put it and the end the overflow set.\n */\n _this._onReduceData = function (data) {\n var renderedItems = data.renderedItems, renderedOverflowItems = data.renderedOverflowItems;\n var overflowIndex = data.props.overflowIndex;\n var movedItem = renderedItems[overflowIndex];\n if (!movedItem) {\n return undefined;\n }\n renderedItems = __spreadArray([], renderedItems, true);\n renderedItems.splice(overflowIndex, 1);\n renderedOverflowItems = __spreadArray(__spreadArray([], renderedOverflowItems, true), [movedItem], false);\n return __assign(__assign({}, data), { renderedItems: renderedItems, renderedOverflowItems: renderedOverflowItems });\n };\n /**\n * Remove the last item of the overflow set and insert the item as the start of the rendered set past the overflow\n * point.\n */\n _this._onGrowData = function (data) {\n var renderedItems = data.renderedItems, renderedOverflowItems = data.renderedOverflowItems;\n var _a = data.props, overflowIndex = _a.overflowIndex, maxDisplayedItems = _a.maxDisplayedItems;\n renderedOverflowItems = __spreadArray([], renderedOverflowItems, true);\n var movedItem = renderedOverflowItems.pop();\n if (!movedItem || renderedItems.length >= maxDisplayedItems) {\n return undefined;\n }\n renderedItems = __spreadArray([], renderedItems, true);\n renderedItems.splice(overflowIndex, 0, movedItem);\n return __assign(__assign({}, data), { renderedItems: renderedItems, renderedOverflowItems: renderedOverflowItems });\n };\n _this._onRenderBreadcrumb = function (data) {\n var _a = data.props, ariaLabel = _a.ariaLabel, _b = _a.dividerAs, DividerType = _b === void 0 ? Icon : _b, onRenderItem = _a.onRenderItem, overflowAriaLabel = _a.overflowAriaLabel, overflowIndex = _a.overflowIndex, onRenderOverflowIcon = _a.onRenderOverflowIcon, overflowButtonAs = _a.overflowButtonAs;\n var renderedOverflowItems = data.renderedOverflowItems, renderedItems = data.renderedItems;\n var contextualItems = renderedOverflowItems.map(function (item) {\n var isActionable = !!(item.onClick || item.href);\n return {\n text: item.text,\n name: item.text,\n key: item.key,\n onClick: item.onClick ? _this._onBreadcrumbClicked.bind(_this, item) : null,\n href: item.href,\n disabled: !isActionable,\n itemProps: isActionable ? undefined : nonActionableItemProps,\n };\n });\n // Find index of last rendered item so the divider icon\n // knows not to render on that item\n var lastItemIndex = renderedItems.length - 1;\n var hasOverflowItems = renderedOverflowItems && renderedOverflowItems.length !== 0;\n var itemElements = renderedItems.map(function (item, index) {\n var finalOnRenderItem = _this._onRenderItem;\n if (item.onRender) {\n finalOnRenderItem = composeRenderFunction(item.onRender, finalOnRenderItem);\n }\n if (onRenderItem) {\n finalOnRenderItem = composeRenderFunction(onRenderItem, finalOnRenderItem);\n }\n return (React.createElement(\"li\", { className: _this._classNames.listItem, key: item.key || String(index) },\n finalOnRenderItem(item),\n (index !== lastItemIndex || (hasOverflowItems && index === overflowIndex - 1)) && (React.createElement(DividerType, { className: _this._classNames.chevron, iconName: getRTL(_this.props.theme) ? 'ChevronLeft' : 'ChevronRight', item: item }))));\n });\n if (hasOverflowItems) {\n var iconProps = !onRenderOverflowIcon ? { iconName: 'More' } : {};\n var onRenderMenuIcon = onRenderOverflowIcon ? onRenderOverflowIcon : nullFunction;\n var OverflowButton = overflowButtonAs ? overflowButtonAs : IconButton;\n itemElements.splice(overflowIndex, 0, React.createElement(\"li\", { className: _this._classNames.overflow, key: OVERFLOW_KEY },\n React.createElement(OverflowButton, { className: _this._classNames.overflowButton, iconProps: iconProps, role: \"button\", \"aria-haspopup\": \"true\", ariaLabel: overflowAriaLabel, onRenderMenuIcon: onRenderMenuIcon, menuProps: {\n items: contextualItems,\n directionalHint: DirectionalHint.bottomLeftEdge,\n } }),\n overflowIndex !== lastItemIndex + 1 && (React.createElement(DividerType, { className: _this._classNames.chevron, iconName: getRTL(_this.props.theme) ? 'ChevronLeft' : 'ChevronRight', item: renderedOverflowItems[renderedOverflowItems.length - 1] }))));\n }\n var nativeProps = getNativeProps(_this.props, htmlElementProperties, [\n 'className',\n ]);\n return (React.createElement(\"div\", __assign({ className: _this._classNames.root, role: \"navigation\", \"aria-label\": ariaLabel }, nativeProps),\n React.createElement(FocusZone, __assign({ componentRef: _this._focusZone, direction: FocusZoneDirection.horizontal }, _this.props.focusZoneProps),\n React.createElement(\"ol\", { className: _this._classNames.list }, itemElements))));\n };\n _this._onRenderItem = function (item) {\n if (!item) {\n return null;\n }\n var as = item.as, href = item.href, onClick = item.onClick, isCurrentItem = item.isCurrentItem, text = item.text, onRenderContent = item.onRenderContent, additionalProps = __rest(item, [\"as\", \"href\", \"onClick\", \"isCurrentItem\", \"text\", \"onRenderContent\"]);\n var finalOnRenderContent = defaultOnRenderCrumbContent;\n if (onRenderContent) {\n finalOnRenderContent = composeRenderFunction(onRenderContent, finalOnRenderContent);\n }\n if (_this.props.onRenderItemContent) {\n finalOnRenderContent = composeRenderFunction(_this.props.onRenderItemContent, finalOnRenderContent);\n }\n if (onClick || href) {\n return (React.createElement(Link, __assign({}, additionalProps, { as: as, className: _this._classNames.itemLink, href: href, \"aria-current\": isCurrentItem ? 'page' : undefined, \n // eslint-disable-next-line react/jsx-no-bind\n onClick: _this._onBreadcrumbClicked.bind(_this, item) }),\n React.createElement(TooltipHost, __assign({ content: text, overflowMode: TooltipOverflowMode.Parent }, _this.props.tooltipHostProps), finalOnRenderContent(item))));\n }\n else {\n var Tag = as || 'span';\n return (React.createElement(Tag, __assign({}, additionalProps, { className: _this._classNames.item }),\n React.createElement(TooltipHost, __assign({ content: text, overflowMode: TooltipOverflowMode.Parent }, _this.props.tooltipHostProps), finalOnRenderContent(item))));\n }\n };\n _this._onBreadcrumbClicked = function (item, ev) {\n if (item.onClick) {\n item.onClick(ev, item);\n }\n };\n initializeComponentRef(_this);\n _this._validateProps(props);\n return _this;\n }\n /**\n * Sets focus to the first breadcrumb link.\n */\n BreadcrumbBase.prototype.focus = function () {\n if (this._focusZone.current) {\n this._focusZone.current.focus();\n }\n };\n BreadcrumbBase.prototype.render = function () {\n this._validateProps(this.props);\n var _a = this.props, _b = _a.onReduceData, onReduceData = _b === void 0 ? this._onReduceData : _b, _c = _a.onGrowData, onGrowData = _c === void 0 ? this._onGrowData : _c, overflowIndex = _a.overflowIndex, maxDisplayedItems = _a.maxDisplayedItems, items = _a.items, className = _a.className, theme = _a.theme, styles = _a.styles;\n var renderedItems = __spreadArray([], items, true);\n var renderedOverflowItems = renderedItems.splice(overflowIndex, renderedItems.length - maxDisplayedItems);\n var breadcrumbData = {\n props: this.props,\n renderedItems: renderedItems,\n renderedOverflowItems: renderedOverflowItems,\n };\n this._classNames = getClassNames(styles, {\n className: className,\n theme: theme,\n });\n return (React.createElement(ResizeGroup, { onRenderData: this._onRenderBreadcrumb, onReduceData: onReduceData, onGrowData: onGrowData, data: breadcrumbData }));\n };\n /**\n * Validate incoming props\n * @param props - Props to validate\n */\n BreadcrumbBase.prototype._validateProps = function (props) {\n var maxDisplayedItems = props.maxDisplayedItems, overflowIndex = props.overflowIndex, items = props.items;\n if (overflowIndex < 0 ||\n (maxDisplayedItems > 1 && overflowIndex > maxDisplayedItems - 1) ||\n (items.length > 0 && overflowIndex > items.length - 1)) {\n throw new Error('Breadcrumb: overflowIndex out of range');\n }\n };\n BreadcrumbBase.defaultProps = {\n items: [],\n maxDisplayedItems: 999,\n overflowIndex: 0,\n };\n return BreadcrumbBase;\n}(React.Component));\nexport { BreadcrumbBase };\nfunction defaultOnRenderCrumbContent(item) {\n return item ? React.createElement(React.Fragment, null, item.text) : null;\n}\n//# sourceMappingURL=Breadcrumb.base.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, ScreenWidthMaxMedium, ScreenWidthMaxSmall, ScreenWidthMinMedium, getFocusStyle, getScreenSelector, getGlobalClassNames, FontWeights, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nvar GlobalClassNames = {\n root: 'ms-Breadcrumb',\n list: 'ms-Breadcrumb-list',\n listItem: 'ms-Breadcrumb-listItem',\n chevron: 'ms-Breadcrumb-chevron',\n overflow: 'ms-Breadcrumb-overflow',\n overflowButton: 'ms-Breadcrumb-overflowButton',\n itemLink: 'ms-Breadcrumb-itemLink',\n item: 'ms-Breadcrumb-item',\n};\nvar SingleLineTextStyle = {\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n};\nvar overflowButtonFontSize = 16;\nvar chevronSmallFontSize = 8;\nvar itemLineHeight = 36;\nvar itemFontSize = 18;\nvar MinimumScreenSelector = getScreenSelector(0, ScreenWidthMaxSmall);\nvar MediumScreenSelector = getScreenSelector(ScreenWidthMinMedium, ScreenWidthMaxMedium);\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e;\n var className = props.className, theme = props.theme;\n var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n // Tokens\n var itemBackgroundHoveredColor = semanticColors.menuItemBackgroundHovered;\n var itemBackgroundPressedColor = semanticColors.menuItemBackgroundPressed;\n var itemTextColor = palette.neutralSecondary;\n var itemTextFontWeight = FontWeights.regular;\n var itemTextHoveredOrPressedColor = palette.neutralPrimary;\n var itemLastChildTextColor = palette.neutralPrimary;\n var itemLastChildTextFontWeight = FontWeights.semibold;\n var chevronButtonColor = palette.neutralSecondary;\n var overflowButtonColor = palette.neutralSecondary;\n var lastChildItemStyles = {\n fontWeight: itemLastChildTextFontWeight,\n color: itemLastChildTextColor,\n };\n var itemStateSelectors = {\n ':hover': {\n color: itemTextHoveredOrPressedColor,\n backgroundColor: itemBackgroundHoveredColor,\n cursor: 'pointer',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n color: 'Highlight',\n backgroundColor: 'transparent',\n },\n _a),\n },\n ':active': {\n backgroundColor: itemBackgroundPressedColor,\n color: itemTextHoveredOrPressedColor,\n },\n '&:active:hover': {\n color: itemTextHoveredOrPressedColor,\n backgroundColor: itemBackgroundPressedColor,\n },\n '&:active, &:hover, &:active:hover': {\n textDecoration: 'none',\n },\n };\n var commonItemStyles = {\n color: itemTextColor,\n padding: '0 8px',\n lineHeight: itemLineHeight,\n fontSize: itemFontSize,\n fontWeight: itemTextFontWeight,\n };\n var overflowButtonHighContrastFocus = {\n left: 1,\n right: 1,\n top: 1,\n bottom: 1,\n };\n return {\n root: [\n classNames.root,\n fonts.medium,\n {\n margin: '11px 0 1px',\n },\n className,\n ],\n list: [\n classNames.list,\n {\n whiteSpace: 'nowrap',\n padding: 0,\n margin: 0,\n display: 'flex',\n alignItems: 'stretch',\n },\n ],\n listItem: [\n classNames.listItem,\n {\n listStyleType: 'none',\n margin: '0',\n padding: '0',\n display: 'flex',\n position: 'relative',\n alignItems: 'center',\n selectors: {\n '&:last-child .ms-Breadcrumb-itemLink': __assign(__assign({}, lastChildItemStyles), (_b = {}, _b[HighContrastSelector] = {\n MsHighContrastAdjust: 'auto',\n forcedColorAdjust: 'auto',\n }, _b)),\n '&:last-child .ms-Breadcrumb-item': lastChildItemStyles,\n },\n },\n ],\n chevron: [\n classNames.chevron,\n {\n color: chevronButtonColor,\n fontSize: fonts.small.fontSize,\n selectors: (_c = {},\n _c[HighContrastSelector] = __assign({ color: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _c[MediumScreenSelector] = {\n fontSize: chevronSmallFontSize,\n },\n _c[MinimumScreenSelector] = {\n fontSize: chevronSmallFontSize,\n },\n _c),\n },\n ],\n overflow: [\n classNames.overflow,\n {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n },\n ],\n overflowButton: [\n classNames.overflowButton,\n getFocusStyle(theme, { highContrastStyle: overflowButtonHighContrastFocus }),\n SingleLineTextStyle,\n {\n fontSize: overflowButtonFontSize,\n color: overflowButtonColor,\n height: '100%',\n cursor: 'pointer',\n selectors: __assign(__assign({}, itemStateSelectors), (_d = {}, _d[MinimumScreenSelector] = {\n padding: '4px 6px',\n }, _d[MediumScreenSelector] = {\n fontSize: fonts.mediumPlus.fontSize,\n }, _d)),\n },\n ],\n itemLink: [\n classNames.itemLink,\n getFocusStyle(theme),\n SingleLineTextStyle,\n __assign(__assign({}, commonItemStyles), { selectors: __assign((_e = { ':focus': {\n color: palette.neutralDark,\n } }, _e[\".\".concat(IsFocusVisibleClassName, \" &:focus\")] = {\n outline: \"none\",\n }, _e), itemStateSelectors) }),\n ],\n item: [\n classNames.item,\n __assign(__assign({}, commonItemStyles), { selectors: {\n ':hover': {\n cursor: 'default',\n },\n } }),\n ],\n };\n};\n//# sourceMappingURL=Breadcrumb.styles.js.map","import { styled } from '../../Utilities';\nimport { BreadcrumbBase } from './Breadcrumb.base';\nimport { getStyles } from './Breadcrumb.styles';\nexport var Breadcrumb = styled(BreadcrumbBase, getStyles, undefined, { scope: 'Breadcrumb' });\n//# sourceMappingURL=Breadcrumb.js.map","/**\n * The days of the week\n * {@docCategory DateTimeUtilities}\n */\nexport var DayOfWeek;\n(function (DayOfWeek) {\n DayOfWeek[DayOfWeek[\"Sunday\"] = 0] = \"Sunday\";\n DayOfWeek[DayOfWeek[\"Monday\"] = 1] = \"Monday\";\n DayOfWeek[DayOfWeek[\"Tuesday\"] = 2] = \"Tuesday\";\n DayOfWeek[DayOfWeek[\"Wednesday\"] = 3] = \"Wednesday\";\n DayOfWeek[DayOfWeek[\"Thursday\"] = 4] = \"Thursday\";\n DayOfWeek[DayOfWeek[\"Friday\"] = 5] = \"Friday\";\n DayOfWeek[DayOfWeek[\"Saturday\"] = 6] = \"Saturday\";\n})(DayOfWeek || (DayOfWeek = {}));\n/**\n * The months\n * {@docCategory DateTimeUtilities}\n */\nexport var MonthOfYear;\n(function (MonthOfYear) {\n MonthOfYear[MonthOfYear[\"January\"] = 0] = \"January\";\n MonthOfYear[MonthOfYear[\"February\"] = 1] = \"February\";\n MonthOfYear[MonthOfYear[\"March\"] = 2] = \"March\";\n MonthOfYear[MonthOfYear[\"April\"] = 3] = \"April\";\n MonthOfYear[MonthOfYear[\"May\"] = 4] = \"May\";\n MonthOfYear[MonthOfYear[\"June\"] = 5] = \"June\";\n MonthOfYear[MonthOfYear[\"July\"] = 6] = \"July\";\n MonthOfYear[MonthOfYear[\"August\"] = 7] = \"August\";\n MonthOfYear[MonthOfYear[\"September\"] = 8] = \"September\";\n MonthOfYear[MonthOfYear[\"October\"] = 9] = \"October\";\n MonthOfYear[MonthOfYear[\"November\"] = 10] = \"November\";\n MonthOfYear[MonthOfYear[\"December\"] = 11] = \"December\";\n})(MonthOfYear || (MonthOfYear = {}));\n/**\n * First week of the year settings types\n * {@docCategory DateTimeUtilities}\n */\nexport var FirstWeekOfYear;\n(function (FirstWeekOfYear) {\n FirstWeekOfYear[FirstWeekOfYear[\"FirstDay\"] = 0] = \"FirstDay\";\n FirstWeekOfYear[FirstWeekOfYear[\"FirstFullWeek\"] = 1] = \"FirstFullWeek\";\n FirstWeekOfYear[FirstWeekOfYear[\"FirstFourDayWeek\"] = 2] = \"FirstFourDayWeek\";\n})(FirstWeekOfYear || (FirstWeekOfYear = {}));\n/**\n * The supported date range types\n * {@docCategory DateTimeUtilities}\n */\nexport var DateRangeType;\n(function (DateRangeType) {\n DateRangeType[DateRangeType[\"Day\"] = 0] = \"Day\";\n DateRangeType[DateRangeType[\"Week\"] = 1] = \"Week\";\n DateRangeType[DateRangeType[\"Month\"] = 2] = \"Month\";\n DateRangeType[DateRangeType[\"WorkWeek\"] = 3] = \"WorkWeek\";\n})(DateRangeType || (DateRangeType = {}));\nexport var DAYS_IN_WEEK = 7;\n//# sourceMappingURL=dateValues.js.map","export var TimeConstants = {\n MillisecondsInOneDay: 86400000,\n MillisecondsIn1Sec: 1000,\n MillisecondsIn1Min: 60000,\n MillisecondsIn30Mins: 1800000,\n MillisecondsIn1Hour: 3600000,\n MinutesInOneDay: 1440,\n MinutesInOneHour: 60,\n DaysInOneWeek: 7,\n MonthInOneYear: 12,\n HoursInOneDay: 24,\n SecondsInOneMinute: 60,\n OffsetTo24HourFormat: 12,\n /**\n * Matches a time string. Groups:\n * 1. hours (with or without leading 0)\n * 2. minutes\n * 3. seconds (optional)\n * 4. meridiem (am/pm, case-insensitive, optional)\n */\n TimeFormatRegex: /^(\\d\\d?):(\\d\\d):?(\\d\\d)? ?([ap]m)?/i,\n};\n//# sourceMappingURL=timeConstants.js.map","import { DayOfWeek, MonthOfYear, FirstWeekOfYear, DateRangeType } from '../dateValues/dateValues';\nimport { TimeConstants } from '../dateValues/timeConstants';\n/**\n * Returns a date offset from the given date by the specified number of days.\n * @param date - The origin date\n * @param days - The number of days to offset. 'days' can be negative.\n * @returns A new Date object offset from the origin date by the given number of days\n */\nexport function addDays(date, days) {\n var result = new Date(date.getTime());\n result.setDate(result.getDate() + days);\n return result;\n}\n/**\n * Returns a date offset from the given date by the specified number of weeks.\n * @param date - The origin date\n * @param weeks - The number of weeks to offset. 'weeks' can be negative.\n * @returns A new Date object offset from the origin date by the given number of weeks\n */\nexport function addWeeks(date, weeks) {\n return addDays(date, weeks * TimeConstants.DaysInOneWeek);\n}\n/**\n * Returns a date offset from the given date by the specified number of months.\n * The method tries to preserve the day-of-month; however, if the new month does not have enough days\n * to contain the original day-of-month, we'll use the last day of the new month.\n * @param date - The origin date\n * @param months - The number of months to offset. 'months' can be negative.\n * @returns A new Date object offset from the origin date by the given number of months\n */\nexport function addMonths(date, months) {\n var result = new Date(date.getTime());\n var newMonth = result.getMonth() + months;\n result.setMonth(newMonth);\n // We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days.\n // Loop until we back up to a day the new month has.\n // (Weird modulo math is due to Javascript's treatment of negative numbers in modulo)\n if (result.getMonth() !==\n ((newMonth % TimeConstants.MonthInOneYear) + TimeConstants.MonthInOneYear) % TimeConstants.MonthInOneYear) {\n result = addDays(result, -result.getDate());\n }\n return result;\n}\n/**\n * Returns a date offset from the given date by the specified number of years.\n * The method tries to preserve the day-of-month; however, if the new month does not have enough days\n * to contain the original day-of-month, we'll use the last day of the new month.\n * @param date - The origin date\n * @param years - The number of years to offset. 'years' can be negative.\n * @returns A new Date object offset from the origin date by the given number of years\n */\nexport function addYears(date, years) {\n var result = new Date(date.getTime());\n result.setFullYear(date.getFullYear() + years);\n // We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days.\n // Loop until we back up to a day the new month has.\n // (Weird modulo math is due to Javascript's treatment of negative numbers in modulo)\n if (result.getMonth() !==\n ((date.getMonth() % TimeConstants.MonthInOneYear) + TimeConstants.MonthInOneYear) % TimeConstants.MonthInOneYear) {\n result = addDays(result, -result.getDate());\n }\n return result;\n}\n/**\n * Returns a date that is the first day of the month of the provided date.\n * @param date - The origin date\n * @returns A new Date object with the day set to the first day of the month.\n */\nexport function getMonthStart(date) {\n return new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0, 0);\n}\n/**\n * Returns a date that is the last day of the month of the provided date.\n * @param date - The origin date\n * @returns A new Date object with the day set to the last day of the month.\n */\nexport function getMonthEnd(date) {\n return new Date(date.getFullYear(), date.getMonth() + 1, 0, 0, 0, 0, 0);\n}\n/**\n * Returns a date that is the first day of the year of the provided date.\n * @param date - The origin date\n * @returns A new Date object with the day set to the first day of the year.\n */\nexport function getYearStart(date) {\n return new Date(date.getFullYear(), 0, 1, 0, 0, 0, 0);\n}\n/**\n * Returns a date that is the last day of the year of the provided date.\n * @param date - The origin date\n * @returns A new Date object with the day set to the last day of the year.\n */\nexport function getYearEnd(date) {\n return new Date(date.getFullYear() + 1, 0, 0, 0, 0, 0, 0);\n}\n/**\n * Returns a date that is a copy of the given date, aside from the month changing to the given month.\n * The method tries to preserve the day-of-month; however, if the new month does not have enough days\n * to contain the original day-of-month, we'll use the last day of the new month.\n * @param date - The origin date\n * @param month - The 0-based index of the month to set on the date.\n * @returns A new Date object with the given month set.\n */\nexport function setMonth(date, month) {\n return addMonths(date, month - date.getMonth());\n}\n/**\n * Compares two dates, and returns true if the two dates (not accounting for time-of-day) are equal.\n * @returns True if the two dates represent the same date (regardless of time-of-day), false otherwise.\n */\nexport function compareDates(date1, date2) {\n if (!date1 && !date2) {\n return true;\n }\n else if (!date1 || !date2) {\n return false;\n }\n else {\n return (date1.getFullYear() === date2.getFullYear() &&\n date1.getMonth() === date2.getMonth() &&\n date1.getDate() === date2.getDate());\n }\n}\n/**\n * Compare the date parts of two dates\n * @param date1 - The first date to compare\n * @param date2 - The second date to compare\n * @returns A negative value if date1 is earlier than date2, 0 if the dates are equal, or a positive value\n * if date1 is later than date2.\n */\nexport function compareDatePart(date1, date2) {\n return getDatePartHashValue(date1) - getDatePartHashValue(date2);\n}\n/**\n * Gets the date range array including the specified date. The date range array is calculated as the list\n * of dates accounting for the specified first day of the week and date range type.\n * @param date - The input date\n * @param dateRangeType - The desired date range type, i.e., day, week, month, etc.\n * @param firstDayOfWeek - The first day of the week.\n * @param workWeekDays - The allowed days in work week. If not provided, assumes all days are allowed.\n * @param daysToSelectInDayView - The number of days to include when using dateRangeType === DateRangeType.Day\n * for multiday view. Defaults to 1\n * @returns An array of dates representing the date range containing the specified date.\n */\nexport function getDateRangeArray(date, dateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView) {\n if (daysToSelectInDayView === void 0) { daysToSelectInDayView = 1; }\n var datesArray = [];\n var startDate;\n var endDate = null;\n if (!workWeekDays) {\n workWeekDays = [DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday];\n }\n daysToSelectInDayView = Math.max(daysToSelectInDayView, 1);\n switch (dateRangeType) {\n case DateRangeType.Day:\n startDate = getDatePart(date);\n endDate = addDays(startDate, daysToSelectInDayView);\n break;\n case DateRangeType.Week:\n case DateRangeType.WorkWeek:\n startDate = getStartDateOfWeek(getDatePart(date), firstDayOfWeek);\n endDate = addDays(startDate, TimeConstants.DaysInOneWeek);\n break;\n case DateRangeType.Month:\n startDate = new Date(date.getFullYear(), date.getMonth(), 1);\n endDate = addMonths(startDate, 1);\n break;\n default:\n throw new Error('Unexpected object: ' + dateRangeType);\n }\n // Populate the dates array with the dates in range\n var nextDate = startDate;\n do {\n if (dateRangeType !== DateRangeType.WorkWeek) {\n // push all days not in work week view\n datesArray.push(nextDate);\n }\n else if (workWeekDays.indexOf(nextDate.getDay()) !== -1) {\n datesArray.push(nextDate);\n }\n nextDate = addDays(nextDate, 1);\n } while (!compareDates(nextDate, endDate));\n return datesArray;\n}\n/**\n * Checks whether the specified date is in the given date range.\n * @param date - The origin date\n * @param dateRange - An array of dates to do the lookup on\n * @returns True if the date matches one of the dates in the specified array, false otherwise.\n */\nexport function isInDateRangeArray(date, dateRange) {\n for (var _i = 0, dateRange_1 = dateRange; _i < dateRange_1.length; _i++) {\n var dateInRange = dateRange_1[_i];\n if (compareDates(date, dateInRange)) {\n return true;\n }\n }\n return false;\n}\n/**\n * Returns the week number for a date.\n * Week numbers are 1 - 52 (53) in a year\n * @param navigatedDate - A date to find the week number for.\n * @param firstDayOfWeek - The first day of the week (0-6, Sunday = 0)\n * @param firstWeekOfYear - The first week of the year (1-2)\n * @returns The weeks number array for the current month.\n */\nexport function getWeekNumbersInMonth(weeksInMonth, firstDayOfWeek, firstWeekOfYear, navigatedDate) {\n var selectedYear = navigatedDate.getFullYear();\n var selectedMonth = navigatedDate.getMonth();\n var dayOfMonth = 1;\n var fistDayOfMonth = new Date(selectedYear, selectedMonth, dayOfMonth);\n var endOfFirstWeek = dayOfMonth +\n (firstDayOfWeek + TimeConstants.DaysInOneWeek - 1) -\n adjustWeekDay(firstDayOfWeek, fistDayOfMonth.getDay());\n var endOfWeekRange = new Date(selectedYear, selectedMonth, endOfFirstWeek);\n dayOfMonth = endOfWeekRange.getDate();\n var weeksArray = [];\n for (var i = 0; i < weeksInMonth; i++) {\n // Get week number for end of week\n weeksArray.push(getWeekNumber(endOfWeekRange, firstDayOfWeek, firstWeekOfYear));\n dayOfMonth += TimeConstants.DaysInOneWeek;\n endOfWeekRange = new Date(selectedYear, selectedMonth, dayOfMonth);\n }\n return weeksArray;\n}\n/**\n * Returns the week number for a date.\n * Week numbers are 1 - 52 (53) in a year\n * @param date - A date to find the week number for.\n * @param firstDayOfWeek - The first day of the week (0-6, Sunday = 0)\n * @param firstWeekOfYear - The first week of the year (1-2)\n * @returns The week's number in the year.\n */\nexport function getWeekNumber(date, firstDayOfWeek, firstWeekOfYear) {\n // First four-day week of the year - minumum days count\n var fourDayWeek = 4;\n switch (firstWeekOfYear) {\n case FirstWeekOfYear.FirstFullWeek:\n return getWeekOfYearFullDays(date, firstDayOfWeek, TimeConstants.DaysInOneWeek);\n case FirstWeekOfYear.FirstFourDayWeek:\n return getWeekOfYearFullDays(date, firstDayOfWeek, fourDayWeek);\n default:\n return getFirstDayWeekOfYear(date, firstDayOfWeek);\n }\n}\n/**\n * Gets the date for the first day of the week based on the given date assuming\n * the specified first day of the week.\n * @param date - The date to find the beginning of the week date for.\n * @returns A new date object representing the first day of the week containing the input date.\n */\nexport function getStartDateOfWeek(date, firstDayOfWeek) {\n var daysOffset = firstDayOfWeek - date.getDay();\n if (daysOffset > 0) {\n // If first day of week is > date, go 1 week back, to ensure resulting date is in the past.\n daysOffset -= TimeConstants.DaysInOneWeek;\n }\n return addDays(date, daysOffset);\n}\n/**\n * Gets the date for the last day of the week based on the given date assuming\n * the specified first day of the week.\n * @param date - The date to find the beginning of the week date for.\n * @returns A new date object representing the first day of the week containing the input date.\n */\nexport function getEndDateOfWeek(date, firstDayOfWeek) {\n var lastDayOfWeek = firstDayOfWeek - 1 >= 0 ? firstDayOfWeek - 1 : TimeConstants.DaysInOneWeek - 1;\n var daysOffset = lastDayOfWeek - date.getDay();\n if (daysOffset < 0) {\n // If last day of week is < date, go 1 week forward, to ensure resulting date is in the future.\n daysOffset += TimeConstants.DaysInOneWeek;\n }\n return addDays(date, daysOffset);\n}\n/**\n * Gets a new date with the time portion zeroed out, i.e., set to midnight\n * @param date - The origin date\n * @returns A new date with the time set to midnight\n */\nfunction getDatePart(date) {\n return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n}\n/**\n * Helper function to assist in date comparisons\n */\nexport function getDatePartHashValue(date) {\n // Generate date hash value created as sum of Date (up to 31 = 5 bits), Month (up to 11 = 4 bits) and Year.\n // eslint-disable-next-line no-bitwise\n return date.getDate() + (date.getMonth() << 5) + (date.getFullYear() << 9);\n}\n/**\n * Helper function for `getWeekNumber`.\n * Returns week number for a date.\n * @param date - current selected date.\n * @param firstDayOfWeek - The first day of week (0-6, Sunday = 0)\n * @param numberOfFullDays - week settings.\n * @returns The week's number in the year.\n */\nfunction getWeekOfYearFullDays(date, firstDayOfWeek, numberOfFullDays) {\n var dayOfYear = getDayOfYear(date) - 1;\n var num = date.getDay() - (dayOfYear % TimeConstants.DaysInOneWeek);\n var lastDayOfPrevYear = new Date(date.getFullYear() - 1, MonthOfYear.December, 31);\n var daysInYear = getDayOfYear(lastDayOfPrevYear) - 1;\n var num2 = (firstDayOfWeek - num + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek;\n if (num2 !== 0 && num2 >= numberOfFullDays) {\n num2 -= TimeConstants.DaysInOneWeek;\n }\n var num3 = dayOfYear - num2;\n if (num3 < 0) {\n num -= daysInYear % TimeConstants.DaysInOneWeek;\n num2 = (firstDayOfWeek - num + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek;\n if (num2 !== 0 && num2 + 1 >= numberOfFullDays) {\n num2 -= TimeConstants.DaysInOneWeek;\n }\n num3 = daysInYear - num2;\n }\n return Math.floor(num3 / TimeConstants.DaysInOneWeek + 1);\n}\n/**\n * Helper function for `getWeekNumber`.\n * Returns week number for a date.\n * @param date - current selected date.\n * @param firstDayOfWeek - The first day of week (0-6, Sunday = 0)\n * @returns The week's number in the year.\n */\nfunction getFirstDayWeekOfYear(date, firstDayOfWeek) {\n var num = getDayOfYear(date) - 1;\n var num2 = date.getDay() - (num % TimeConstants.DaysInOneWeek);\n var num3 = (num2 - firstDayOfWeek + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek;\n return Math.floor((num + num3) / TimeConstants.DaysInOneWeek + 1);\n}\n/**\n * Helper function for `getWeekNumber`.\n * Returns adjusted week day number when `firstDayOfWeek` is other than Sunday.\n * For Week Day Number comparison checks\n * @param firstDayOfWeek - The first day of week (0-6, Sunday = 0)\n * @param dateWeekDay - shifts number forward to 1 week in case passed as true\n * @returns The day of week adjusted to `firstDayOfWeek`; e.g. when `firstDayOfWeek` is Monday (1),\n * Sunday becomes 7.\n */\nfunction adjustWeekDay(firstDayOfWeek, dateWeekDay) {\n return firstDayOfWeek !== DayOfWeek.Sunday && dateWeekDay < firstDayOfWeek\n ? dateWeekDay + TimeConstants.DaysInOneWeek\n : dateWeekDay;\n}\n/**\n * Returns the day number for a date in a year:\n * the number of days since January 1st in the particular year.\n * @param date - A date to find the day number for.\n * @returns The day's number in the year.\n */\nfunction getDayOfYear(date) {\n var month = date.getMonth();\n var year = date.getFullYear();\n var daysUntilDate = 0;\n for (var i = 0; i < month; i++) {\n daysUntilDate += daysInMonth(i + 1, year);\n }\n daysUntilDate += date.getDate();\n return daysUntilDate;\n}\n/**\n * Returns the number of days in the month\n * @param month - The month number to target (months 1-12).\n * @param year - The year to target.\n * @returns The number of days in the month.\n */\nfunction daysInMonth(month, year) {\n return new Date(year, month, 0).getDate();\n}\n//# sourceMappingURL=dateMath.js.map","import { __assign } from \"tslib\";\n/**\n * Format date to a day string representation\n * @param date - input date to format\n */\nexport var formatDay = function (date) { return date.getDate().toString(); };\n/**\n * Format date to a month-day-year string\n * @param date - input date to format\n * @param strings - localized strings\n */\nexport var formatMonthDayYear = function (date, strings) {\n return strings.months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear();\n};\n/**\n * Format date to a month-year string\n * @param date - input date to format\n * @param strings - localized strings\n */\nexport var formatMonthYear = function (date, strings) {\n return strings.months[date.getMonth()] + ' ' + date.getFullYear();\n};\n/**\n * Format date to a month string\n * @param date - input date to format\n * @param strings - localized strings\n */\nexport var formatMonth = function (date, strings) { return strings.months[date.getMonth()]; };\n/**\n * Format date to a year string representation\n * @param date - input date to format\n */\nexport var formatYear = function (date) { return date.getFullYear().toString(); };\nexport var DEFAULT_DATE_GRID_STRINGS = {\n months: [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ],\n shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],\n shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],\n};\nexport var DEFAULT_DATE_FORMATTING = {\n formatDay: formatDay,\n formatMonth: formatMonth,\n formatYear: formatYear,\n formatMonthDayYear: formatMonthDayYear,\n formatMonthYear: formatMonthYear,\n};\nexport var DEFAULT_CALENDAR_STRINGS = __assign(__assign({}, DEFAULT_DATE_GRID_STRINGS), { goToToday: 'Go to today', weekNumberFormatString: 'Week number {0}', prevMonthAriaLabel: 'Previous month', nextMonthAriaLabel: 'Next month', prevYearAriaLabel: 'Previous year', nextYearAriaLabel: 'Next year', prevYearRangeAriaLabel: 'Previous year range', nextYearRangeAriaLabel: 'Next year range', closeButtonAriaLabel: 'Close', selectedDateFormatString: 'Selected date {0}', todayDateFormatString: \"Today's date {0}\", monthPickerHeaderAriaLabel: '{0}, change year', yearPickerHeaderAriaLabel: '{0}, change month', dayMarkedAriaLabel: 'marked' });\n//# sourceMappingURL=dateFormatting.defaults.js.map","import { compareDatePart } from '../dateMath/dateMath';\n/**\n * Checks if `date` happens earlier than min date\n * @param date - date to check\n * @param options - object with min date to check against\n */\nexport var isBeforeMinDate = function (date, options) {\n var minDate = options.minDate;\n return minDate ? compareDatePart(minDate, date) >= 1 : false;\n};\n//# sourceMappingURL=isBeforeMinDate.js.map","import { compareDatePart } from '../dateMath/dateMath';\n/**\n * Checks if `date` happens later than max date\n * @param date - date to check\n * @param options - object with max date to check against\n */\nexport var isAfterMaxDate = function (date, options) {\n var maxDate = options.maxDate;\n return maxDate ? compareDatePart(date, maxDate) >= 1 : false;\n};\n//# sourceMappingURL=isAfterMaxDate.js.map","import { compareDates } from '../dateMath/dateMath';\nimport { isBeforeMinDate } from './isBeforeMinDate';\nimport { isAfterMaxDate } from './isAfterMaxDate';\n/**\n * Checks if `date` falls into the restricted `options`\n * @param date - date to check\n * @param options - restriction options (min date, max date and list of restricted dates)\n */\nexport var isRestrictedDate = function (date, options) {\n var restrictedDates = options.restrictedDates, minDate = options.minDate, maxDate = options.maxDate;\n if (!restrictedDates && !minDate && !maxDate) {\n return false;\n }\n var inRestrictedDates = restrictedDates && restrictedDates.some(function (rd) { return compareDates(rd, date); });\n return inRestrictedDates || isBeforeMinDate(date, options) || isAfterMaxDate(date, options);\n};\n//# sourceMappingURL=isRestrictedDate.js.map","import { __rest } from \"tslib\";\nimport { isRestrictedDate } from './isRestrictedDate';\nimport { isAfterMaxDate } from './isAfterMaxDate';\nimport { isBeforeMinDate } from './isBeforeMinDate';\nimport { compareDatePart, addDays } from '../dateMath/dateMath';\n/**\n * Returns closest available date given the restriction `options`, or undefined otherwise\n * @param options - list of search options\n */\nexport var findAvailableDate = function (options) {\n var targetDate = options.targetDate, initialDate = options.initialDate, direction = options.direction, restrictedDateOptions = __rest(options, [\"targetDate\", \"initialDate\", \"direction\"]);\n var availableDate = targetDate;\n // if the target date is available, return it immediately\n if (!isRestrictedDate(targetDate, restrictedDateOptions)) {\n return targetDate;\n }\n while (compareDatePart(initialDate, availableDate) !== 0 &&\n isRestrictedDate(availableDate, restrictedDateOptions) &&\n !isAfterMaxDate(availableDate, restrictedDateOptions) &&\n !isBeforeMinDate(availableDate, restrictedDateOptions)) {\n availableDate = addDays(availableDate, direction);\n }\n if (compareDatePart(initialDate, availableDate) !== 0 && !isRestrictedDate(availableDate, restrictedDateOptions)) {\n return availableDate;\n }\n return undefined;\n};\n//# sourceMappingURL=findAvailableDate.js.map","import { __spreadArray } from \"tslib\";\nimport { compareDatePart } from '../dateMath/dateMath';\n/**\n * Generates a list of dates, bounded by min and max dates\n * @param dateRange - input date range\n * @param minDate - min date to limit the range\n * @param maxDate - max date to limit the range\n */\nexport var getBoundedDateRange = function (dateRange, minDate, maxDate) {\n var boundedDateRange = __spreadArray([], dateRange, true);\n if (minDate) {\n boundedDateRange = boundedDateRange.filter(function (date) { return compareDatePart(date, minDate) >= 0; });\n }\n if (maxDate) {\n boundedDateRange = boundedDateRange.filter(function (date) { return compareDatePart(date, maxDate) <= 0; });\n }\n return boundedDateRange;\n};\n//# sourceMappingURL=getBoundedDateRange.js.map","/**\n * Returns whether provided week days are contiguous.\n * @param days - list of days in a week\n * @param isSingleWeek - decides whether the contiguous logic applies across week boundaries or not\n * @param firstDayOfWeek - decides which day of week is the first one in the order.\n */\nexport var isContiguous = function (days, isSingleWeek, firstDayOfWeek) {\n var daySet = new Set(days);\n var amountOfNoNeighbors = 0;\n for (var _i = 0, days_1 = days; _i < days_1.length; _i++) {\n var day = days_1[_i];\n var nextDay = (day + 1) % 7;\n if (!(daySet.has(nextDay) && (!isSingleWeek || firstDayOfWeek !== nextDay))) {\n amountOfNoNeighbors++;\n }\n }\n // In case the full week is provided, then each day has a neighbor\n //, otherwise the last day does not have a neighbor.\n return amountOfNoNeighbors < 2;\n};\n//# sourceMappingURL=isContiguous.js.map","import { DateRangeType } from '../dateValues/dateValues';\nimport { isContiguous } from './isContiguous';\n/**\n * Return corrected date range type, given `dateRangeType` and list of working days.\n * For non-contiguous working days and working week range type, returns general week range type.\n * For other cases returns input date range type.\n * @param dateRangeType - input type of range\n * @param workWeekDays - list of working days in a week\n */\nexport var getDateRangeTypeToUse = function (dateRangeType, workWeekDays, firstDayOfWeek) {\n if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {\n if (!isContiguous(workWeekDays, true, firstDayOfWeek) || workWeekDays.length === 0) {\n return DateRangeType.Week;\n }\n }\n return dateRangeType;\n};\n//# sourceMappingURL=getDateRangeTypeToUse.js.map","import { addDays, compareDates, getDateRangeArray, isInDateRangeArray } from '../dateMath/dateMath';\nimport { DAYS_IN_WEEK } from '../dateValues/dateValues';\nimport { getDateRangeTypeToUse } from './getDateRangeTypeToUse';\nimport { getBoundedDateRange } from './getBoundedDateRange';\nimport { isRestrictedDate } from './isRestrictedDate';\n/**\n * Generates a grid of days, given the `options`.\n * Returns one additional week at the begining from the previous range\n * and one at the end from the future range\n * @param options - parameters to specify date related restrictions for the resulting grid\n */\nexport var getDayGrid = function (options) {\n var selectedDate = options.selectedDate, dateRangeType = options.dateRangeType, firstDayOfWeek = options.firstDayOfWeek, today = options.today, minDate = options.minDate, maxDate = options.maxDate, weeksToShow = options.weeksToShow, workWeekDays = options.workWeekDays, daysToSelectInDayView = options.daysToSelectInDayView, restrictedDates = options.restrictedDates, markedDays = options.markedDays;\n var restrictedDateOptions = { minDate: minDate, maxDate: maxDate, restrictedDates: restrictedDates };\n var todaysDate = today || new Date();\n var navigatedDate = options.navigatedDate ? options.navigatedDate : todaysDate;\n var date;\n if (weeksToShow && weeksToShow <= 4) {\n // if showing less than a full month, just use date == navigatedDate\n date = new Date(navigatedDate.getFullYear(), navigatedDate.getMonth(), navigatedDate.getDate());\n }\n else {\n date = new Date(navigatedDate.getFullYear(), navigatedDate.getMonth(), 1);\n }\n var weeks = [];\n // Cycle the date backwards to get to the first day of the week.\n while (date.getDay() !== firstDayOfWeek) {\n date.setDate(date.getDate() - 1);\n }\n // add the transition week as last week of previous range\n date = addDays(date, -DAYS_IN_WEEK);\n // a flag to indicate whether all days of the week are outside the month\n var isAllDaysOfWeekOutOfMonth = false;\n // in work week view if the days aren't contiguous we use week view instead\n var selectedDateRangeType = getDateRangeTypeToUse(dateRangeType, workWeekDays, firstDayOfWeek);\n var selectedDates = [];\n if (selectedDate) {\n selectedDates = getDateRangeArray(selectedDate, selectedDateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView);\n selectedDates = getBoundedDateRange(selectedDates, minDate, maxDate);\n }\n var shouldGetWeeks = true;\n for (var weekIndex = 0; shouldGetWeeks; weekIndex++) {\n var week = [];\n isAllDaysOfWeekOutOfMonth = true;\n var _loop_1 = function (dayIndex) {\n var originalDate = new Date(date.getTime());\n var dayInfo = {\n key: date.toString(),\n date: date.getDate().toString(),\n originalDate: originalDate,\n isInMonth: date.getMonth() === navigatedDate.getMonth(),\n isToday: compareDates(todaysDate, date),\n isSelected: isInDateRangeArray(date, selectedDates),\n isInBounds: !isRestrictedDate(date, restrictedDateOptions),\n isMarked: (markedDays === null || markedDays === void 0 ? void 0 : markedDays.some(function (markedDay) { return compareDates(originalDate, markedDay); })) || false,\n };\n week.push(dayInfo);\n if (dayInfo.isInMonth) {\n isAllDaysOfWeekOutOfMonth = false;\n }\n date.setDate(date.getDate() + 1);\n };\n for (var dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {\n _loop_1(dayIndex);\n }\n // We append the condition of the loop depending upon the showSixWeeksByDefault prop.\n shouldGetWeeks = weeksToShow ? weekIndex < weeksToShow + 1 : !isAllDaysOfWeekOutOfMonth || weekIndex === 0;\n // we don't check shouldGetWeeks before pushing because we want to add one extra week for transition state\n weeks.push(week);\n }\n return weeks;\n};\n//# sourceMappingURL=getDayGrid.js.map","import * as React from 'react';\nimport { css, findIndex } from '@fluentui/utilities';\nimport { DAYS_IN_WEEK } from '@fluentui/date-time-utilities';\nexport var CalendarMonthHeaderRow = function (props) {\n var showWeekNumbers = props.showWeekNumbers, strings = props.strings, firstDayOfWeek = props.firstDayOfWeek, allFocusable = props.allFocusable, weeksToShow = props.weeksToShow, weeks = props.weeks, classNames = props.classNames;\n var dayLabels = strings.shortDays.slice();\n var firstOfMonthIndex = findIndex(weeks[1], function (day) { return day.originalDate.getDate() === 1; });\n if (weeksToShow === 1 && firstOfMonthIndex >= 0) {\n // if we only show one week, replace the header with short month name\n var firstOfMonthIndexOffset = (firstOfMonthIndex + firstDayOfWeek) % DAYS_IN_WEEK;\n dayLabels[firstOfMonthIndexOffset] = strings.shortMonths[weeks[1][firstOfMonthIndex].originalDate.getMonth()];\n }\n return (React.createElement(\"tr\", null,\n showWeekNumbers && React.createElement(\"th\", { className: classNames.dayCell }),\n dayLabels.map(function (val, index) {\n var i = (index + firstDayOfWeek) % DAYS_IN_WEEK;\n var label = strings.days[i];\n return (React.createElement(\"th\", { className: css(classNames.dayCell, classNames.weekDayLabelCell), scope: \"col\", key: dayLabels[i] + ' ' + index, title: label, \"aria-label\": label, \"data-is-focusable\": allFocusable ? true : undefined }, dayLabels[i]));\n })));\n};\n//# sourceMappingURL=CalendarMonthHeaderRow.js.map","import * as React from 'react';\nimport { KeyCodes, css, getRTLSafeKeyCode } from '@fluentui/utilities';\nimport { addDays, addWeeks, compareDates, findAvailableDate, DateRangeType } from '@fluentui/date-time-utilities';\nexport var CalendarGridDayCell = function (props) {\n var _a;\n var navigatedDate = props.navigatedDate, dateTimeFormatter = props.dateTimeFormatter, allFocusable = props.allFocusable, strings = props.strings, activeDescendantId = props.activeDescendantId, navigatedDayRef = props.navigatedDayRef, calculateRoundedStyles = props.calculateRoundedStyles, weeks = props.weeks, classNames = props.classNames, day = props.day, dayIndex = props.dayIndex, weekIndex = props.weekIndex, weekCorners = props.weekCorners, ariaHidden = props.ariaHidden, customDayCellRef = props.customDayCellRef, dateRangeType = props.dateRangeType, daysToSelectInDayView = props.daysToSelectInDayView, onSelectDate = props.onSelectDate, restrictedDates = props.restrictedDates, minDate = props.minDate, maxDate = props.maxDate, onNavigateDate = props.onNavigateDate, getDayInfosInRangeOfDay = props.getDayInfosInRangeOfDay, getRefsFromDayInfos = props.getRefsFromDayInfos;\n var cornerStyle = (_a = weekCorners === null || weekCorners === void 0 ? void 0 : weekCorners[weekIndex + '_' + dayIndex]) !== null && _a !== void 0 ? _a : '';\n var isNavigatedDate = compareDates(navigatedDate, day.originalDate);\n var navigateMonthEdge = function (ev, date) {\n var targetDate = undefined;\n var direction = 1; // by default search forward\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.up) {\n targetDate = addWeeks(date, -1);\n direction = -1;\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (ev.which === KeyCodes.down) {\n targetDate = addWeeks(date, 1);\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (ev.which === getRTLSafeKeyCode(KeyCodes.left)) {\n targetDate = addDays(date, -1);\n direction = -1;\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (ev.which === getRTLSafeKeyCode(KeyCodes.right)) {\n targetDate = addDays(date, 1);\n }\n if (!targetDate) {\n // if we couldn't find a target date at all, do nothing\n return;\n }\n var findAvailableDateOptions = {\n initialDate: date,\n targetDate: targetDate,\n direction: direction,\n restrictedDates: restrictedDates,\n minDate: minDate,\n maxDate: maxDate,\n };\n // target date is restricted, search in whatever direction until finding the next possible date,\n // stopping at boundaries\n var nextDate = findAvailableDate(findAvailableDateOptions);\n if (!nextDate) {\n // if no dates available in initial direction, try going backwards\n findAvailableDateOptions.direction = -direction;\n nextDate = findAvailableDate(findAvailableDateOptions);\n }\n // if the nextDate is still inside the same focusZone area, let the focusZone handle setting the focus so we\n // don't jump the view unnecessarily\n var isInCurrentView = weeks &&\n nextDate &&\n weeks.slice(1, weeks.length - 1).some(function (week) {\n return week.some(function (dayToCompare) {\n return compareDates(dayToCompare.originalDate, nextDate);\n });\n });\n if (isInCurrentView) {\n return;\n }\n // else, fire navigation on the date to change the view to show it\n if (nextDate) {\n onNavigateDate(nextDate, true);\n ev.preventDefault();\n }\n };\n var onMouseOverDay = function (ev) {\n var dayInfos = getDayInfosInRangeOfDay(day);\n var dayRefs = getRefsFromDayInfos(dayInfos);\n dayRefs.forEach(function (dayRef, index) {\n var _a;\n if (dayRef) {\n dayRef.classList.add('ms-CalendarDay-hoverStyle');\n if (!dayInfos[index].isSelected &&\n dateRangeType === DateRangeType.Day &&\n daysToSelectInDayView &&\n daysToSelectInDayView > 1) {\n // remove the static classes first to overwrite them\n dayRef.classList.remove(classNames.bottomLeftCornerDate, classNames.bottomRightCornerDate, classNames.topLeftCornerDate, classNames.topRightCornerDate);\n var classNamesToAdd = calculateRoundedStyles(classNames, false, false, index > 0, index < dayRefs.length - 1).trim();\n if (classNamesToAdd) {\n (_a = dayRef.classList).add.apply(_a, classNamesToAdd.split(' '));\n }\n }\n }\n });\n };\n var onMouseDownDay = function (ev) {\n var dayInfos = getDayInfosInRangeOfDay(day);\n var dayRefs = getRefsFromDayInfos(dayInfos);\n dayRefs.forEach(function (dayRef) {\n if (dayRef) {\n dayRef.classList.add('ms-CalendarDay-pressedStyle');\n }\n });\n };\n var onMouseUpDay = function (ev) {\n var dayInfos = getDayInfosInRangeOfDay(day);\n var dayRefs = getRefsFromDayInfos(dayInfos);\n dayRefs.forEach(function (dayRef) {\n if (dayRef) {\n dayRef.classList.remove('ms-CalendarDay-pressedStyle');\n }\n });\n };\n var onMouseOutDay = function (ev) {\n var dayInfos = getDayInfosInRangeOfDay(day);\n var dayRefs = getRefsFromDayInfos(dayInfos);\n dayRefs.forEach(function (dayRef, index) {\n var _a;\n if (dayRef) {\n dayRef.classList.remove('ms-CalendarDay-hoverStyle');\n dayRef.classList.remove('ms-CalendarDay-pressedStyle');\n if (!dayInfos[index].isSelected &&\n dateRangeType === DateRangeType.Day &&\n daysToSelectInDayView &&\n daysToSelectInDayView > 1) {\n var classNamesToAdd = calculateRoundedStyles(classNames, false, false, index > 0, index < dayRefs.length - 1).trim();\n if (classNamesToAdd) {\n (_a = dayRef.classList).remove.apply(_a, classNamesToAdd.split(' '));\n }\n }\n }\n });\n };\n var onDayKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(day.originalDate);\n }\n else {\n navigateMonthEdge(ev, day.originalDate);\n }\n };\n var ariaLabel = day.originalDate.getDate() +\n ', ' +\n strings.months[day.originalDate.getMonth()] +\n ', ' +\n day.originalDate.getFullYear();\n if (day.isMarked) {\n ariaLabel = ariaLabel + ', ' + strings.dayMarkedAriaLabel;\n }\n return (React.createElement(\"td\", { className: css(classNames.dayCell, weekCorners && cornerStyle, day.isSelected && classNames.daySelected, day.isSelected && 'ms-CalendarDay-daySelected', !day.isInBounds && classNames.dayOutsideBounds, !day.isInMonth && classNames.dayOutsideNavigatedMonth), ref: function (element) {\n customDayCellRef === null || customDayCellRef === void 0 ? void 0 : customDayCellRef(element, day.originalDate, classNames);\n day.setRef(element);\n isNavigatedDate && (navigatedDayRef.current = element);\n }, \"aria-hidden\": ariaHidden, \"aria-disabled\": !ariaHidden && !day.isInBounds, onClick: day.isInBounds && !ariaHidden ? day.onSelected : undefined, onMouseOver: !ariaHidden ? onMouseOverDay : undefined, onMouseDown: !ariaHidden ? onMouseDownDay : undefined, onMouseUp: !ariaHidden ? onMouseUpDay : undefined, onMouseOut: !ariaHidden ? onMouseOutDay : undefined, onKeyDown: !ariaHidden ? onDayKeyDown : undefined, role: \"gridcell\", tabIndex: isNavigatedDate ? 0 : undefined, \"aria-current\": day.isToday ? 'date' : undefined, \"aria-selected\": day.isInBounds ? day.isSelected : undefined, \"data-is-focusable\": !ariaHidden && (allFocusable || (day.isInBounds ? true : undefined)) },\n React.createElement(\"button\", { key: day.key + 'button', \"aria-hidden\": ariaHidden, className: css(classNames.dayButton, day.isToday && classNames.dayIsToday, day.isToday && 'ms-CalendarDay-dayIsToday'), \"aria-label\": ariaLabel, id: isNavigatedDate ? activeDescendantId : undefined, disabled: !ariaHidden && !day.isInBounds, type: \"button\", tabIndex: -1, \"data-is-focusable\": \"false\" },\n React.createElement(\"span\", { \"aria-hidden\": \"true\" }, dateTimeFormatter.formatDay(day.originalDate)),\n day.isMarked && React.createElement(\"div\", { \"aria-hidden\": \"true\", className: classNames.dayMarker }))));\n};\n//# sourceMappingURL=CalendarGridDayCell.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { format } from '@fluentui/utilities';\nimport { getWeekNumbersInMonth } from '@fluentui/date-time-utilities';\nimport { CalendarGridDayCell } from './CalendarGridDayCell';\nexport var CalendarGridRow = function (props) {\n var classNames = props.classNames, week = props.week, weeks = props.weeks, weekIndex = props.weekIndex, rowClassName = props.rowClassName, ariaRole = props.ariaRole, showWeekNumbers = props.showWeekNumbers, firstDayOfWeek = props.firstDayOfWeek, firstWeekOfYear = props.firstWeekOfYear, navigatedDate = props.navigatedDate, strings = props.strings;\n var weekNumbers = showWeekNumbers\n ? getWeekNumbersInMonth(weeks.length, firstDayOfWeek, firstWeekOfYear, navigatedDate)\n : null;\n var titleString = weekNumbers\n ? strings.weekNumberFormatString && format(strings.weekNumberFormatString, weekNumbers[weekIndex])\n : '';\n return (React.createElement(\"tr\", { role: ariaRole, className: rowClassName, key: weekIndex + '_' + week[0].key },\n showWeekNumbers && weekNumbers && (React.createElement(\"th\", { className: classNames.weekNumberCell, key: weekIndex, title: titleString, \"aria-label\": titleString, scope: \"row\" },\n React.createElement(\"span\", null, weekNumbers[weekIndex]))),\n week.map(function (day, dayIndex) { return (React.createElement(CalendarGridDayCell, __assign({}, props, { key: day.key, day: day, dayIndex: dayIndex }))); })));\n};\n//# sourceMappingURL=CalendarGridRow.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { getRTL, classNamesFunction } from '@fluentui/utilities';\nimport { FocusZone } from '../../FocusZone';\nimport { getDateRangeArray, getDayGrid, getBoundedDateRange, isRestrictedDate, DAYS_IN_WEEK, compareDates, DateRangeType, } from '@fluentui/date-time-utilities';\nimport { usePrevious, useId } from '@fluentui/react-hooks';\nimport { CalendarMonthHeaderRow } from './CalendarMonthHeaderRow';\nimport { CalendarGridRow } from './CalendarGridRow';\nvar getClassNames = classNamesFunction();\nfunction useDayRefs() {\n var daysRef = React.useRef({});\n var getSetRefCallback = function (dayKey) { return function (element) {\n if (element === null) {\n delete daysRef.current[dayKey];\n }\n else {\n daysRef.current[dayKey] = element;\n }\n }; };\n return [daysRef, getSetRefCallback];\n}\nfunction useWeeks(props, onSelectDate, getSetRefCallback) {\n /**\n * Initial parsing of the given props to generate IDayInfo two dimensional array, which contains a representation\n * of every day in the grid. Convenient for helping with conversions between day refs and Date objects in callbacks.\n */\n var weeks = React.useMemo(function () {\n var _a;\n var weeksGrid = getDayGrid(props);\n var firstVisibleDay = weeksGrid[1][0].originalDate;\n var lastVisibleDay = weeksGrid[weeksGrid.length - 1][6].originalDate;\n var markedDays = ((_a = props.getMarkedDays) === null || _a === void 0 ? void 0 : _a.call(props, firstVisibleDay, lastVisibleDay)) || [];\n /**\n * Weeks is a 2D array. Weeks[0] contains the last week of the prior range,\n * Weeks[weeks.length - 1] contains first week of next range. These are for transition states.\n *\n * Weeks[1... weeks.length - 2] contains the actual visible data\n */\n var returnValue = [];\n for (var weekIndex = 0; weekIndex < weeksGrid.length; weekIndex++) {\n var week = [];\n var _loop_1 = function (dayIndex) {\n var day = weeksGrid[weekIndex][dayIndex];\n var dayInfo = __assign(__assign({ onSelected: function () { return onSelectDate(day.originalDate); }, setRef: getSetRefCallback(day.key) }, day), { isMarked: day.isMarked || (markedDays === null || markedDays === void 0 ? void 0 : markedDays.some(function (markedDay) { return compareDates(day.originalDate, markedDay); })) });\n week.push(dayInfo);\n };\n for (var dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {\n _loop_1(dayIndex);\n }\n returnValue.push(week);\n }\n return returnValue;\n // TODO: this is missing deps on getSetRefCallback and onSelectDate (and depending on the entire\n // props object may not be a good idea due to likely frequent mutation). It would be easy to\n // fix getSetRefCallback to not mutate every render, but onSelectDate is passed down from\n // Calendar and trying to fix it requires a huge cascade of changes.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [props]);\n return weeks;\n}\n/**\n * Hook to determine whether to animate the CalendarDayGrid forwards or backwards\n * @returns true if the grid should animate backwards; false otherwise\n */\nfunction useAnimateBackwards(weeks) {\n var previousNavigatedDate = usePrevious(weeks[0][0].originalDate);\n if (!previousNavigatedDate || previousNavigatedDate.getTime() === weeks[0][0].originalDate.getTime()) {\n return undefined;\n }\n else if (previousNavigatedDate <= weeks[0][0].originalDate) {\n return false;\n }\n else {\n return true;\n }\n}\nfunction useWeekCornerStyles(props) {\n /**\n *\n * Section for setting the rounded corner styles on individual day cells. Individual day cells need different\n * corners to be rounded depending on which date range type and where the cell is located in the current grid.\n * If we just round all of the corners, there isn't a good overlap and we get gaps between contiguous day boxes\n * in Edge browser.\n *\n */\n var getWeekCornerStyles = function (classNames, initialWeeks) {\n var weekCornersStyled = {};\n /* need to handle setting all of the corners on arbitrarily shaped blobs\n __\n __|A |\n |B |C |__\n |D |E |F |\n \n in this case, A needs top left rounded, top right rounded\n B needs top left rounded\n C doesn't need any rounding\n D needs bottom left rounded\n E doesn't need any rounding\n F needs top right rounding\n */\n // cut off the animation transition weeks\n var weeks = initialWeeks.slice(1, initialWeeks.length - 1);\n // if there's an item above, lose both top corners. Item below, lose both bottom corners, etc.\n weeks.forEach(function (week, weekIndex) {\n week.forEach(function (day, dayIndex) {\n var above = weeks[weekIndex - 1] &&\n weeks[weekIndex - 1][dayIndex] &&\n isInSameHoverRange(weeks[weekIndex - 1][dayIndex].originalDate, day.originalDate, weeks[weekIndex - 1][dayIndex].isSelected, day.isSelected);\n var below = weeks[weekIndex + 1] &&\n weeks[weekIndex + 1][dayIndex] &&\n isInSameHoverRange(weeks[weekIndex + 1][dayIndex].originalDate, day.originalDate, weeks[weekIndex + 1][dayIndex].isSelected, day.isSelected);\n var left = weeks[weekIndex][dayIndex - 1] &&\n isInSameHoverRange(weeks[weekIndex][dayIndex - 1].originalDate, day.originalDate, weeks[weekIndex][dayIndex - 1].isSelected, day.isSelected);\n var right = weeks[weekIndex][dayIndex + 1] &&\n isInSameHoverRange(weeks[weekIndex][dayIndex + 1].originalDate, day.originalDate, weeks[weekIndex][dayIndex + 1].isSelected, day.isSelected);\n var style = [];\n style.push(calculateRoundedStyles(classNames, above, below, left, right));\n style.push(calculateBorderStyles(classNames, above, below, left, right));\n weekCornersStyled[weekIndex + '_' + dayIndex] = style.join(' ');\n });\n });\n return weekCornersStyled;\n };\n var calculateRoundedStyles = function (classNames, above, below, left, right) {\n var style = [];\n var roundedTopLeft = !above && !left;\n var roundedTopRight = !above && !right;\n var roundedBottomLeft = !below && !left;\n var roundedBottomRight = !below && !right;\n if (roundedTopLeft) {\n style.push(getRTL() ? classNames.topRightCornerDate : classNames.topLeftCornerDate);\n }\n if (roundedTopRight) {\n style.push(getRTL() ? classNames.topLeftCornerDate : classNames.topRightCornerDate);\n }\n if (roundedBottomLeft) {\n style.push(getRTL() ? classNames.bottomRightCornerDate : classNames.bottomLeftCornerDate);\n }\n if (roundedBottomRight) {\n style.push(getRTL() ? classNames.bottomLeftCornerDate : classNames.bottomRightCornerDate);\n }\n return style.join(' ');\n };\n var calculateBorderStyles = function (classNames, above, below, left, right) {\n var style = [];\n if (!above) {\n style.push(classNames.datesAbove);\n }\n if (!below) {\n style.push(classNames.datesBelow);\n }\n if (!left) {\n style.push(getRTL() ? classNames.datesRight : classNames.datesLeft);\n }\n if (!right) {\n style.push(getRTL() ? classNames.datesLeft : classNames.datesRight);\n }\n return style.join(' ');\n };\n var isInSameHoverRange = function (date1, date2, date1Selected, date2Selected) {\n var dateRangeType = props.dateRangeType, firstDayOfWeek = props.firstDayOfWeek, workWeekDays = props.workWeekDays;\n // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state\n var dateRangeHoverType = dateRangeType === DateRangeType.WorkWeek ? DateRangeType.Week : dateRangeType;\n // we do not pass daysToSelectInDayView because we handle setting those styles dyanamically in onMouseOver\n var dateRange = getDateRangeArray(date1, dateRangeHoverType, firstDayOfWeek, workWeekDays);\n if (date1Selected !== date2Selected) {\n // if one is selected and the other is not, they can't be in the same range\n return false;\n }\n else if (date1Selected && date2Selected) {\n // if they're both selected at the same time they must be in the same range\n return true;\n }\n // otherwise, both must be unselected, so check the dateRange\n return dateRange.filter(function (date) { return date.getTime() === date2.getTime(); }).length > 0;\n };\n return [getWeekCornerStyles, calculateRoundedStyles];\n}\nexport var CalendarDayGridBase = function (props) {\n var navigatedDayRef = React.useRef(null);\n var activeDescendantId = useId();\n var onSelectDate = function (selectedDate) {\n var _a, _b;\n var firstDayOfWeek = props.firstDayOfWeek, minDate = props.minDate, maxDate = props.maxDate, workWeekDays = props.workWeekDays, daysToSelectInDayView = props.daysToSelectInDayView, restrictedDates = props.restrictedDates;\n var restrictedDatesOptions = { minDate: minDate, maxDate: maxDate, restrictedDates: restrictedDates };\n var dateRange = getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView);\n dateRange = getBoundedDateRange(dateRange, minDate, maxDate);\n dateRange = dateRange.filter(function (d) {\n return !isRestrictedDate(d, restrictedDatesOptions);\n });\n (_a = props.onSelectDate) === null || _a === void 0 ? void 0 : _a.call(props, selectedDate, dateRange);\n (_b = props.onNavigateDate) === null || _b === void 0 ? void 0 : _b.call(props, selectedDate, true);\n };\n var _a = useDayRefs(), daysRef = _a[0], getSetRefCallback = _a[1];\n var weeks = useWeeks(props, onSelectDate, getSetRefCallback);\n var animateBackwards = useAnimateBackwards(weeks);\n var _b = useWeekCornerStyles(props), getWeekCornerStyles = _b[0], calculateRoundedStyles = _b[1];\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: function () {\n var _a, _b;\n (_b = (_a = navigatedDayRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n },\n }); }, []);\n /**\n *\n * Section for setting hover/pressed styles. Because we want arbitrary blobs of days to be selectable, to support\n * highlighting every day in the month for month view, css :hover style isn't enough, so we need mouse callbacks\n * to set classnames on all relevant child refs to apply the styling\n *\n */\n var getDayInfosInRangeOfDay = function (dayToCompare) {\n // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state\n var dateRangeHoverType = getDateRangeTypeToUse(props.dateRangeType, props.workWeekDays);\n // gets all the dates for the given date range type that are in the same date range as the given day\n var dateRange = getDateRangeArray(dayToCompare.originalDate, dateRangeHoverType, props.firstDayOfWeek, props.workWeekDays, props.daysToSelectInDayView).map(function (date) { return date.getTime(); });\n // gets all the day refs for the given dates\n var dayInfosInRange = weeks.reduce(function (accumulatedValue, currentWeek) {\n return accumulatedValue.concat(currentWeek.filter(function (weekDay) { return dateRange.indexOf(weekDay.originalDate.getTime()) !== -1; }));\n }, []);\n return dayInfosInRange;\n };\n var getRefsFromDayInfos = function (dayInfosInRange) {\n var dayRefs = [];\n dayRefs = dayInfosInRange.map(function (dayInfo) { return daysRef.current[dayInfo.key]; });\n return dayRefs;\n };\n var styles = props.styles, theme = props.theme, className = props.className, dateRangeType = props.dateRangeType, showWeekNumbers = props.showWeekNumbers, labelledBy = props.labelledBy, lightenDaysOutsideNavigatedMonth = props.lightenDaysOutsideNavigatedMonth, animationDirection = props.animationDirection;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n dateRangeType: dateRangeType,\n showWeekNumbers: showWeekNumbers,\n lightenDaysOutsideNavigatedMonth: lightenDaysOutsideNavigatedMonth === undefined ? true : lightenDaysOutsideNavigatedMonth,\n animationDirection: animationDirection,\n animateBackwards: animateBackwards,\n });\n // When the month is highlighted get the corner dates so that styles can be added to them\n var weekCorners = getWeekCornerStyles(classNames, weeks);\n var partialWeekProps = {\n weeks: weeks,\n navigatedDayRef: navigatedDayRef,\n calculateRoundedStyles: calculateRoundedStyles,\n activeDescendantId: activeDescendantId,\n classNames: classNames,\n weekCorners: weekCorners,\n getDayInfosInRangeOfDay: getDayInfosInRangeOfDay,\n getRefsFromDayInfos: getRefsFromDayInfos,\n };\n return (React.createElement(FocusZone, { className: classNames.wrapper, preventDefaultWhenHandled: true },\n React.createElement(\"table\", { className: classNames.table, \"aria-multiselectable\": \"false\", \"aria-labelledby\": labelledBy, \"aria-activedescendant\": activeDescendantId, role: \"grid\" },\n React.createElement(\"tbody\", null,\n React.createElement(CalendarMonthHeaderRow, __assign({}, props, { classNames: classNames, weeks: weeks })),\n React.createElement(CalendarGridRow, __assign({}, props, partialWeekProps, { week: weeks[0], weekIndex: -1, rowClassName: classNames.firstTransitionWeek, ariaRole: \"presentation\", ariaHidden: true })),\n weeks.slice(1, weeks.length - 1).map(function (week, weekIndex) { return (React.createElement(CalendarGridRow, __assign({}, props, partialWeekProps, { key: weekIndex, week: week, weekIndex: weekIndex, rowClassName: classNames.weekRow }))); }),\n React.createElement(CalendarGridRow, __assign({}, props, partialWeekProps, { week: weeks[weeks.length - 1], weekIndex: -2, rowClassName: classNames.lastTransitionWeek, ariaRole: \"presentation\", ariaHidden: true }))))));\n};\nCalendarDayGridBase.displayName = 'CalendarDayGridBase';\n/**\n * When given work week, if the days are non-contiguous, the hover states look really weird. So for non-contiguous\n * work weeks, we'll just show week view instead.\n */\nfunction getDateRangeTypeToUse(dateRangeType, workWeekDays) {\n if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {\n var sortedWWDays = workWeekDays.slice().sort();\n var isContiguous = true;\n for (var i = 1; i < sortedWWDays.length; i++) {\n if (sortedWWDays[i] !== sortedWWDays[i - 1] + 1) {\n isContiguous = false;\n break;\n }\n }\n if (!isContiguous || workWeekDays.length === 0) {\n return DateRangeType.Week;\n }\n }\n return dateRangeType;\n}\n//# sourceMappingURL=CalendarDayGrid.base.js.map","/**\n * {@docCategory Calendar}\n */\nexport var AnimationDirection;\n(function (AnimationDirection) {\n /**\n * Grid will transition out and in horizontally\n */\n AnimationDirection[AnimationDirection[\"Horizontal\"] = 0] = \"Horizontal\";\n /**\n * Grid will transition out and in vertically\n */\n AnimationDirection[AnimationDirection[\"Vertical\"] = 1] = \"Vertical\";\n})(AnimationDirection || (AnimationDirection = {}));\n//# sourceMappingURL=Calendar.types.js.map","import { __assign } from \"tslib\";\nimport { FontSizes, FontWeights, getFocusStyle, getGlobalClassNames, AnimationStyles, keyframes, HighContrastSelector, getHighContrastNoAdjustStyle, } from '@fluentui/style-utilities';\nimport { DateRangeType } from '@fluentui/date-time-utilities';\nimport { AnimationDirection } from '../Calendar/Calendar.types';\nvar GlobalClassNames = {\n hoverStyle: 'ms-CalendarDay-hoverStyle',\n pressedStyle: 'ms-CalendarDay-pressedStyle',\n dayIsTodayStyle: 'ms-CalendarDay-dayIsToday',\n daySelectedStyle: 'ms-CalendarDay-daySelected',\n};\nvar transitionRowDisappearance = keyframes({\n '100%': {\n width: 0,\n height: 0,\n overflow: 'hidden',\n },\n '99.9%': {\n width: '100%',\n height: 28,\n overflow: 'visible',\n },\n '0%': {\n width: '100%',\n height: 28,\n overflow: 'visible',\n },\n});\nexport var styles = function (props) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n var theme = props.theme, dateRangeType = props.dateRangeType, showWeekNumbers = props.showWeekNumbers, lightenDaysOutsideNavigatedMonth = props.lightenDaysOutsideNavigatedMonth, animateBackwards = props.animateBackwards, animationDirection = props.animationDirection;\n var palette = theme.palette;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var rowAnimationStyle = {};\n if (animateBackwards !== undefined) {\n if (animationDirection === AnimationDirection.Horizontal) {\n rowAnimationStyle = animateBackwards ? AnimationStyles.slideRightIn20 : AnimationStyles.slideLeftIn20;\n }\n else {\n rowAnimationStyle = animateBackwards ? AnimationStyles.slideDownIn20 : AnimationStyles.slideUpIn20;\n }\n }\n var firstTransitionRowAnimationStyle = {};\n var lastTransitionRowAnimationStyle = {};\n if (animateBackwards !== undefined) {\n if (animationDirection !== AnimationDirection.Horizontal) {\n firstTransitionRowAnimationStyle = animateBackwards ? { animationName: '' } : AnimationStyles.slideUpOut20;\n lastTransitionRowAnimationStyle = animateBackwards ? AnimationStyles.slideDownOut20 : { animationName: '' };\n }\n }\n var disabledStyle = {\n selectors: {\n '&, &:disabled, & button': {\n color: palette.neutralTertiaryAlt,\n pointerEvents: 'none',\n },\n },\n };\n return {\n wrapper: {\n paddingBottom: 10,\n },\n table: [\n {\n textAlign: 'center',\n borderCollapse: 'collapse',\n borderSpacing: '0',\n tableLayout: 'fixed',\n fontSize: 'inherit',\n marginTop: 4,\n width: 196,\n position: 'relative',\n paddingBottom: 10,\n },\n showWeekNumbers && {\n width: 226,\n },\n ],\n dayCell: [\n getFocusStyle(theme, { inset: -3 }),\n {\n margin: 0,\n padding: 0,\n width: 28,\n height: 28,\n lineHeight: 28,\n fontSize: FontSizes.small,\n fontWeight: FontWeights.regular,\n color: palette.neutralPrimary,\n cursor: 'pointer',\n position: 'relative',\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ color: 'WindowText', backgroundColor: 'transparent', zIndex: 0 }, getHighContrastNoAdjustStyle()),\n _a['&.' + classNames.hoverStyle] = {\n backgroundColor: palette.neutralLighter,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n zIndex: 3,\n backgroundColor: 'Window',\n outline: '1px solid Highlight',\n },\n _b),\n },\n _a['&.' + classNames.pressedStyle] = {\n backgroundColor: palette.neutralLight,\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n borderColor: 'Highlight',\n color: 'Highlight',\n backgroundColor: 'Window',\n },\n _c),\n },\n _a['&.' + classNames.pressedStyle + '.' + classNames.hoverStyle] = {\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n backgroundColor: 'Window',\n outline: '1px solid Highlight',\n },\n _d),\n },\n _a),\n },\n ],\n daySelected: [\n dateRangeType !== DateRangeType.Month && {\n backgroundColor: palette.neutralLight + '!important',\n selectors: (_e = {\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n }\n },\n _e['&:hover, &.' + classNames.hoverStyle + ', &.' + classNames.pressedStyle] = (_f = {\n backgroundColor: palette.neutralLight + '!important'\n },\n _f[HighContrastSelector] = {\n color: 'HighlightText!important',\n background: 'Highlight!important',\n },\n _f),\n _e[HighContrastSelector] = __assign({ background: 'Highlight!important', color: 'HighlightText!important', borderColor: 'Highlight!important' }, getHighContrastNoAdjustStyle()),\n _e),\n },\n ],\n weekRow: rowAnimationStyle,\n weekDayLabelCell: AnimationStyles.fadeIn200,\n weekNumberCell: {\n margin: 0,\n padding: 0,\n borderRight: '1px solid',\n borderColor: palette.neutralLight,\n backgroundColor: palette.neutralLighterAlt,\n color: palette.neutralSecondary,\n boxSizing: 'border-box',\n width: 28,\n height: 28,\n fontWeight: FontWeights.regular,\n fontSize: FontSizes.small,\n },\n dayOutsideBounds: disabledStyle,\n dayOutsideNavigatedMonth: lightenDaysOutsideNavigatedMonth && {\n color: palette.neutralSecondary,\n fontWeight: FontWeights.regular,\n },\n dayButton: {\n width: 24,\n height: 24,\n lineHeight: 24,\n fontSize: FontSizes.small,\n fontWeight: 'inherit',\n borderRadius: 2,\n border: 'none',\n padding: 0,\n color: 'inherit',\n backgroundColor: 'transparent',\n cursor: 'pointer',\n overflow: 'visible',\n selectors: {\n span: {\n height: 'inherit',\n lineHeight: 'inherit',\n },\n },\n },\n dayIsToday: {\n backgroundColor: palette.themePrimary + '!important',\n borderRadius: '100%',\n color: palette.white + '!important',\n fontWeight: (FontWeights.semibold + '!important'),\n selectors: (_g = {},\n _g[HighContrastSelector] = __assign({ background: 'WindowText!important', color: 'Window!important', borderColor: 'WindowText!important' }, getHighContrastNoAdjustStyle()),\n _g),\n },\n firstTransitionWeek: __assign(__assign({ position: 'absolute', opacity: 0, width: 0, height: 0, overflow: 'hidden' }, firstTransitionRowAnimationStyle), { animationName: firstTransitionRowAnimationStyle.animationName + ',' + transitionRowDisappearance }),\n lastTransitionWeek: __assign(__assign({ position: 'absolute', opacity: 0, width: 0, height: 0, overflow: 'hidden', marginTop: -28 }, lastTransitionRowAnimationStyle), { animationName: lastTransitionRowAnimationStyle.animationName + ',' + transitionRowDisappearance }),\n dayMarker: {\n width: 4,\n height: 4,\n backgroundColor: palette.neutralSecondary,\n borderRadius: '100%',\n bottom: 1,\n left: 0,\n right: 0,\n position: 'absolute',\n margin: 'auto',\n selectors: (_h = {},\n _h['.' + classNames.dayIsTodayStyle + ' &'] = {\n backgroundColor: palette.white,\n selectors: (_j = {},\n _j[HighContrastSelector] = {\n backgroundColor: 'Window',\n },\n _j),\n },\n _h['.' + classNames.daySelectedStyle + ' &'] = {\n selectors: (_k = {},\n _k[HighContrastSelector] = {\n backgroundColor: 'HighlightText',\n },\n _k),\n },\n _h[HighContrastSelector] = __assign({ backgroundColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _h),\n },\n topRightCornerDate: {\n borderTopRightRadius: '2px',\n },\n topLeftCornerDate: {\n borderTopLeftRadius: '2px',\n },\n bottomRightCornerDate: {\n borderBottomRightRadius: '2px',\n },\n bottomLeftCornerDate: {\n borderBottomLeftRadius: '2px',\n },\n datesAbove: {\n '&::before': {\n borderTop: \"1px solid \".concat(palette.neutralSecondary),\n },\n },\n datesBelow: {\n '&::before': {\n borderBottom: \"1px solid \".concat(palette.neutralSecondary),\n },\n },\n datesLeft: {\n '&::before': {\n borderLeft: \"1px solid \".concat(palette.neutralSecondary),\n },\n },\n datesRight: {\n '&::before': {\n borderRight: \"1px solid \".concat(palette.neutralSecondary),\n },\n },\n };\n};\n//# sourceMappingURL=CalendarDayGrid.styles.js.map","import { CalendarDayGridBase } from './CalendarDayGrid.base';\nimport { styles } from './CalendarDayGrid.styles';\nimport { styled } from '../../Utilities';\nexport var CalendarDayGrid = styled(CalendarDayGridBase, styles, undefined, { scope: 'CalendarDayGrid' });\n//# sourceMappingURL=CalendarDayGrid.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { KeyCodes, css, classNamesFunction, format } from '@fluentui/utilities';\nimport { Icon } from '../../../Icon';\nimport { addMonths, compareDatePart, getMonthStart, getMonthEnd } from '@fluentui/date-time-utilities';\nimport { CalendarDayGrid } from '../../CalendarDayGrid/CalendarDayGrid';\nimport { useId } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\nexport var CalendarDayBase = function (props) {\n var dayGrid = React.useRef(null);\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: function () {\n var _a, _b;\n (_b = (_a = dayGrid.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n },\n }); }, []);\n var strings = props.strings, navigatedDate = props.navigatedDate, dateTimeFormatter = props.dateTimeFormatter, styles = props.styles, theme = props.theme, className = props.className, onHeaderSelect = props.onHeaderSelect, showSixWeeksByDefault = props.showSixWeeksByDefault, minDate = props.minDate, maxDate = props.maxDate, restrictedDates = props.restrictedDates, onNavigateDate = props.onNavigateDate, showWeekNumbers = props.showWeekNumbers, dateRangeType = props.dateRangeType, animationDirection = props.animationDirection;\n var monthAndYearId = useId();\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n headerIsClickable: !!onHeaderSelect,\n showWeekNumbers: showWeekNumbers,\n animationDirection: animationDirection,\n });\n var monthAndYear = dateTimeFormatter.formatMonthYear(navigatedDate, strings);\n var HeaderButtonComponentType = onHeaderSelect ? 'button' : 'div';\n var headerAriaLabel = strings.yearPickerHeaderAriaLabel\n ? format(strings.yearPickerHeaderAriaLabel, monthAndYear)\n : monthAndYear;\n return (React.createElement(\"div\", { className: classNames.root },\n React.createElement(\"div\", { className: classNames.header },\n React.createElement(HeaderButtonComponentType, { \"aria-label\": onHeaderSelect ? headerAriaLabel : undefined, className: classNames.monthAndYear, onClick: onHeaderSelect, \"data-is-focusable\": !!onHeaderSelect, tabIndex: onHeaderSelect ? 0 : -1, onKeyDown: onButtonKeyDown(onHeaderSelect), type: \"button\" },\n React.createElement(\"span\", { id: monthAndYearId, \"aria-live\": \"polite\", \"aria-atomic\": \"true\" }, monthAndYear)),\n React.createElement(CalendarDayNavigationButtons, __assign({}, props, { classNames: classNames }))),\n React.createElement(CalendarDayGrid, __assign({}, props, { styles: styles, componentRef: dayGrid, strings: strings, navigatedDate: navigatedDate, weeksToShow: showSixWeeksByDefault ? 6 : undefined, dateTimeFormatter: dateTimeFormatter, minDate: minDate, maxDate: maxDate, restrictedDates: restrictedDates, onNavigateDate: onNavigateDate, labelledBy: monthAndYearId, dateRangeType: dateRangeType }))));\n};\nCalendarDayBase.displayName = 'CalendarDayBase';\nvar CalendarDayNavigationButtons = function (props) {\n var _a, _b;\n var minDate = props.minDate, maxDate = props.maxDate, navigatedDate = props.navigatedDate, allFocusable = props.allFocusable, strings = props.strings, navigationIcons = props.navigationIcons, showCloseButton = props.showCloseButton, classNames = props.classNames, onNavigateDate = props.onNavigateDate, onDismiss = props.onDismiss;\n var onSelectNextMonth = function () {\n onNavigateDate(addMonths(navigatedDate, 1), false);\n };\n var onSelectPrevMonth = function () {\n onNavigateDate(addMonths(navigatedDate, -1), false);\n };\n var leftNavigationIcon = navigationIcons.leftNavigation;\n var rightNavigationIcon = navigationIcons.rightNavigation;\n var closeNavigationIcon = navigationIcons.closeIcon;\n // determine if previous/next months are in bounds\n var prevMonthInBounds = minDate ? compareDatePart(minDate, getMonthStart(navigatedDate)) < 0 : true;\n var nextMonthInBounds = maxDate ? compareDatePart(getMonthEnd(navigatedDate), maxDate) < 0 : true;\n // use aria-disabled instead of disabled so focus is not lost\n // when a prev/next button becomes disabled after being clicked\n return (React.createElement(\"div\", { className: classNames.monthComponents },\n React.createElement(\"button\", { className: css(classNames.headerIconButton, (_a = {},\n _a[classNames.disabledStyle] = !prevMonthInBounds,\n _a)), tabIndex: prevMonthInBounds ? undefined : allFocusable ? 0 : -1, \"aria-disabled\": !prevMonthInBounds, onClick: prevMonthInBounds ? onSelectPrevMonth : undefined, onKeyDown: prevMonthInBounds ? onButtonKeyDown(onSelectPrevMonth) : undefined, title: strings.prevMonthAriaLabel\n ? strings.prevMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, -1).getMonth()]\n : undefined, type: \"button\" },\n React.createElement(Icon, { iconName: leftNavigationIcon })),\n React.createElement(\"button\", { className: css(classNames.headerIconButton, (_b = {},\n _b[classNames.disabledStyle] = !nextMonthInBounds,\n _b)), tabIndex: nextMonthInBounds ? undefined : allFocusable ? 0 : -1, \"aria-disabled\": !nextMonthInBounds, onClick: nextMonthInBounds ? onSelectNextMonth : undefined, onKeyDown: nextMonthInBounds ? onButtonKeyDown(onSelectNextMonth) : undefined, title: strings.nextMonthAriaLabel\n ? strings.nextMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, 1).getMonth()]\n : undefined, type: \"button\" },\n React.createElement(Icon, { iconName: rightNavigationIcon })),\n showCloseButton && (React.createElement(\"button\", { className: css(classNames.headerIconButton), onClick: onDismiss, onKeyDown: onButtonKeyDown(onDismiss), title: strings.closeButtonAriaLabel, type: \"button\" },\n React.createElement(Icon, { iconName: closeNavigationIcon })))));\n};\nCalendarDayNavigationButtons.displayName = 'CalendarDayNavigationButtons';\nvar onButtonKeyDown = function (callback) {\n return function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n callback === null || callback === void 0 ? void 0 : callback();\n break;\n }\n };\n};\n//# sourceMappingURL=CalendarDay.base.js.map","import { __assign } from \"tslib\";\nimport { normalize, FontSizes, FontWeights, getFocusStyle, AnimationStyles, HighContrastSelector, } from '@fluentui/style-utilities';\nexport var styles = function (props) {\n var _a;\n var className = props.className, theme = props.theme, headerIsClickable = props.headerIsClickable, showWeekNumbers = props.showWeekNumbers;\n var palette = theme.palette;\n var disabledStyle = {\n selectors: (_a = {\n '&, &:disabled, & button': {\n color: palette.neutralTertiaryAlt,\n pointerEvents: 'none',\n }\n },\n _a[HighContrastSelector] = {\n color: 'GrayText',\n forcedColorAdjust: 'none',\n },\n _a),\n };\n return {\n root: [\n normalize,\n {\n width: 196,\n padding: 12,\n boxSizing: 'content-box',\n },\n showWeekNumbers && {\n width: 226,\n },\n className,\n ],\n header: {\n position: 'relative',\n display: 'inline-flex',\n height: 28,\n lineHeight: 44,\n width: '100%',\n },\n monthAndYear: [\n getFocusStyle(theme, { inset: 1 }),\n __assign(__assign({}, AnimationStyles.fadeIn200), { alignItems: 'center', fontSize: FontSizes.medium, fontFamily: 'inherit', color: palette.neutralPrimary, display: 'inline-block', flexGrow: 1, fontWeight: FontWeights.semibold, padding: '0 4px 0 10px', border: 'none', backgroundColor: 'transparent', borderRadius: 2, lineHeight: 28, overflow: 'hidden', whiteSpace: 'nowrap', textAlign: 'left', textOverflow: 'ellipsis' }),\n headerIsClickable && {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n background: palette.neutralLight,\n color: palette.black,\n },\n },\n },\n ],\n monthComponents: {\n display: 'inline-flex',\n alignSelf: 'flex-end',\n },\n headerIconButton: [\n getFocusStyle(theme, { inset: -1 }),\n {\n width: 28,\n height: 28,\n display: 'block',\n textAlign: 'center',\n lineHeight: 28,\n fontSize: FontSizes.small,\n fontFamily: 'inherit',\n color: palette.neutralPrimary,\n borderRadius: 2,\n position: 'relative',\n backgroundColor: 'transparent',\n border: 'none',\n padding: 0,\n overflow: 'visible',\n selectors: {\n '&:hover': {\n color: palette.neutralDark,\n backgroundColor: palette.neutralLight,\n cursor: 'pointer',\n outline: '1px solid transparent',\n },\n },\n },\n ],\n disabledStyle: disabledStyle,\n };\n};\n//# sourceMappingURL=CalendarDay.styles.js.map","import { CalendarDayBase } from './CalendarDay.base';\nimport { styles } from './CalendarDay.styles';\nimport { styled } from '../../../Utilities';\nexport var CalendarDay = styled(CalendarDayBase, styles, undefined, {\n scope: 'CalendarDay',\n});\n//# sourceMappingURL=CalendarDay.js.map","import { __assign } from \"tslib\";\nimport { normalize, FontSizes, FontWeights, getFocusStyle, AnimationStyles, HighContrastSelector, getHighContrastNoAdjustStyle, } from '@fluentui/style-utilities';\nimport { AnimationDirection } from '../Calendar.types';\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e, _f, _g;\n var className = props.className, theme = props.theme, hasHeaderClickCallback = props.hasHeaderClickCallback, highlightCurrent = props.highlightCurrent, highlightSelected = props.highlightSelected, animateBackwards = props.animateBackwards, animationDirection = props.animationDirection;\n var palette = theme.palette;\n var animationStyle = {};\n if (animateBackwards !== undefined) {\n if (animationDirection === AnimationDirection.Horizontal) {\n animationStyle = animateBackwards ? AnimationStyles.slideRightIn20 : AnimationStyles.slideLeftIn20;\n }\n else {\n animationStyle = animateBackwards ? AnimationStyles.slideDownIn20 : AnimationStyles.slideUpIn20;\n }\n }\n var headerAnimationStyle = animateBackwards !== undefined ? AnimationStyles.fadeIn200 : {};\n return {\n root: [\n normalize,\n {\n width: 196,\n padding: 12,\n boxSizing: 'content-box',\n overflow: 'hidden',\n },\n className,\n ],\n headerContainer: {\n display: 'flex',\n },\n currentItemButton: [\n getFocusStyle(theme, { inset: -1 }),\n __assign(__assign({}, headerAnimationStyle), { fontSize: FontSizes.medium, fontWeight: FontWeights.semibold, fontFamily: 'inherit', textAlign: 'left', color: 'inherit', backgroundColor: 'transparent', flexGrow: 1, padding: '0 4px 0 10px', border: 'none', overflow: 'visible' }),\n hasHeaderClickCallback && {\n selectors: {\n '&:hover, &:active': {\n cursor: !hasHeaderClickCallback ? 'default' : 'pointer',\n color: palette.neutralDark,\n outline: '1px solid transparent',\n backgroundColor: palette.neutralLight,\n },\n },\n },\n ],\n navigationButtonsContainer: {\n display: 'flex',\n alignItems: 'center',\n },\n navigationButton: [\n getFocusStyle(theme, { inset: -1 }),\n {\n fontFamily: 'inherit',\n width: 28,\n minWidth: 28,\n height: 28,\n minHeight: 28,\n display: 'block',\n textAlign: 'center',\n lineHeight: 28,\n fontSize: FontSizes.small,\n color: palette.neutralPrimary,\n borderRadius: 2,\n position: 'relative',\n backgroundColor: 'transparent',\n border: 'none',\n padding: 0,\n overflow: 'visible',\n selectors: {\n '&:hover': {\n color: palette.neutralDark,\n cursor: 'pointer',\n outline: '1px solid transparent',\n backgroundColor: palette.neutralLight,\n },\n },\n },\n ],\n gridContainer: {\n marginTop: 4,\n },\n buttonRow: __assign(__assign({}, animationStyle), { marginBottom: 16, selectors: {\n '&:nth-child(n + 3)': {\n marginBottom: 0,\n },\n } }),\n itemButton: [\n getFocusStyle(theme, { inset: -1 }),\n {\n width: 40,\n height: 40,\n minWidth: 40,\n minHeight: 40,\n lineHeight: 40,\n fontSize: FontSizes.small,\n fontFamily: 'inherit',\n padding: 0,\n margin: '0 12px 0 0',\n color: palette.neutralPrimary,\n backgroundColor: 'transparent',\n border: 'none',\n borderRadius: 2,\n overflow: 'visible',\n selectors: {\n '&:nth-child(4n + 4)': {\n marginRight: 0,\n },\n '&:nth-child(n + 9)': {\n marginBottom: 0,\n },\n '& div': {\n fontWeight: FontWeights.regular,\n },\n '&:hover': {\n color: palette.neutralDark,\n backgroundColor: palette.neutralLight,\n cursor: 'pointer',\n outline: '1px solid transparent',\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ background: 'Window', color: 'WindowText', outline: '1px solid Highlight' }, getHighContrastNoAdjustStyle()),\n _a),\n },\n '&:active': {\n backgroundColor: palette.themeLight,\n selectors: (_b = {},\n _b[HighContrastSelector] = __assign({ background: 'Window', color: 'Highlight' }, getHighContrastNoAdjustStyle()),\n _b),\n },\n },\n },\n ],\n current: highlightCurrent\n ? {\n color: palette.white,\n backgroundColor: palette.themePrimary,\n selectors: (_c = {\n '& div': {\n fontWeight: FontWeights.semibold,\n },\n '&:hover': {\n backgroundColor: palette.themePrimary,\n selectors: (_d = {},\n _d[HighContrastSelector] = __assign({ backgroundColor: 'WindowText', color: 'Window' }, getHighContrastNoAdjustStyle()),\n _d),\n }\n },\n _c[HighContrastSelector] = __assign({ backgroundColor: 'WindowText', color: 'Window' }, getHighContrastNoAdjustStyle()),\n _c),\n }\n : {},\n selected: highlightSelected\n ? {\n color: palette.neutralPrimary,\n backgroundColor: palette.themeLight,\n fontWeight: FontWeights.semibold,\n selectors: (_e = {\n '& div': {\n fontWeight: FontWeights.semibold,\n },\n '&:hover, &:active': {\n backgroundColor: palette.themeLight,\n selectors: (_f = {},\n _f[HighContrastSelector] = __assign({ color: 'Window', background: 'Highlight' }, getHighContrastNoAdjustStyle()),\n _f),\n }\n },\n _e[HighContrastSelector] = __assign({ background: 'Highlight', color: 'Window' }, getHighContrastNoAdjustStyle()),\n _e),\n }\n : {},\n disabled: {\n selectors: (_g = {\n '&, &:disabled, & button': {\n color: palette.neutralTertiaryAlt,\n pointerEvents: 'none',\n }\n },\n _g[HighContrastSelector] = {\n color: 'GrayText',\n forcedColorAdjust: 'none',\n },\n _g),\n },\n };\n};\n//# sourceMappingURL=CalendarPicker.styles.js.map","import { getStyles as getPickerStyles } from '../CalendarPicker/CalendarPicker.styles';\nexport var getStyles = function (props) {\n /* Return styles from the base class.\n * If this component has extra styles not in the base, apply them here i.e.:\n * const myStyle: IStyle = {\n * display: \"block\"\n * }; *\n * return {...getPickerStyles(props), myStyle};\n */\n return getPickerStyles(props);\n};\n//# sourceMappingURL=CalendarMonth.styles.js.map","import { getStyles as getPickerStyles } from '../CalendarPicker/CalendarPicker.styles';\nexport var getStyles = function (props) {\n /* Return styles from the base class.\n * If this component has extra styles not in the base, apply them here i.e.:\n * const myStyle: IStyle = {\n * display: \"block\"\n * };\n * return {...getPickerStyles(props), myStyle};\n */\n return getPickerStyles(props);\n};\n//# sourceMappingURL=CalendarYear.styles.js.map","import { DEFAULT_CALENDAR_STRINGS } from '@fluentui/date-time-utilities';\nexport var defaultCalendarStrings = DEFAULT_CALENDAR_STRINGS;\n/**\n * @deprecated Use `defaultCalendarStrings`\n */\nexport var defaultDayPickerStrings = defaultCalendarStrings;\nexport var defaultCalendarNavigationIcons = {\n leftNavigation: 'Up',\n rightNavigation: 'Down',\n closeIcon: 'CalculatorMultiply',\n};\n//# sourceMappingURL=defaults.js.map","import { __assign, __spreadArray } from \"tslib\";\nimport * as React from 'react';\nimport { KeyCodes, getRTL, classNamesFunction, css, format } from '../../../Utilities';\nimport { FocusZone } from '../../../FocusZone';\nimport { Icon } from '../../../Icon';\nimport { usePrevious } from '@fluentui/react-hooks';\nimport { defaultCalendarNavigationIcons } from '../defaults';\nvar getClassNames = classNamesFunction();\nvar CELL_COUNT = 12;\nvar CELLS_PER_ROW = 4;\nvar DefaultCalendarYearStrings = {\n prevRangeAriaLabel: undefined,\n nextRangeAriaLabel: undefined,\n};\nvar CalendarYearGridCell = function (props) {\n var _a;\n var _b;\n var styles = props.styles, theme = props.theme, className = props.className, highlightCurrentYear = props.highlightCurrentYear, highlightSelectedYear = props.highlightSelectedYear, year = props.year, selected = props.selected, disabled = props.disabled, componentRef = props.componentRef, onSelectYear = props.onSelectYear, onRenderYear = props.onRenderYear;\n var buttonRef = React.useRef(null);\n React.useImperativeHandle(componentRef, function () { return ({\n focus: function () {\n var _a, _b;\n (_b = (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n },\n }); }, []);\n var onClick = function () {\n onSelectYear === null || onSelectYear === void 0 ? void 0 : onSelectYear(year);\n };\n var onKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n onSelectYear === null || onSelectYear === void 0 ? void 0 : onSelectYear(year);\n }\n };\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n highlightCurrent: highlightCurrentYear,\n highlightSelected: highlightSelectedYear,\n });\n return (React.createElement(\"button\", { className: css(classNames.itemButton, (_a = {},\n _a[classNames.selected] = selected,\n _a[classNames.disabled] = disabled,\n _a)), type: \"button\", role: \"gridcell\", onClick: !disabled ? onClick : undefined, onKeyDown: !disabled ? onKeyDown : undefined, disabled: disabled, \"aria-selected\": selected, ref: buttonRef }, (_b = onRenderYear === null || onRenderYear === void 0 ? void 0 : onRenderYear(year)) !== null && _b !== void 0 ? _b : year));\n};\nCalendarYearGridCell.displayName = 'CalendarYearGridCell';\nvar CalendarYearGrid = function (props) {\n var styles = props.styles, theme = props.theme, className = props.className, fromYear = props.fromYear, toYear = props.toYear, animationDirection = props.animationDirection, animateBackwards = props.animateBackwards, minYear = props.minYear, maxYear = props.maxYear, onSelectYear = props.onSelectYear, selectedYear = props.selectedYear, componentRef = props.componentRef;\n var selectedCellRef = React.useRef(null);\n var currentCellRef = React.useRef(null);\n React.useImperativeHandle(componentRef, function () { return ({\n focus: function () {\n var _a, _b;\n (_b = (_a = (selectedCellRef.current || currentCellRef.current)) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n },\n }); }, []);\n var renderCell = function (yearToRender) {\n var selected = yearToRender === selectedYear;\n var disabled = (minYear !== undefined && yearToRender < minYear) || (maxYear !== undefined && yearToRender > maxYear);\n var current = yearToRender === new Date().getFullYear();\n return (React.createElement(CalendarYearGridCell, __assign({}, props, { key: yearToRender, year: yearToRender, selected: selected, current: current, disabled: disabled, onSelectYear: onSelectYear, componentRef: selected ? selectedCellRef : current ? currentCellRef : undefined, theme: theme })));\n };\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n animateBackwards: animateBackwards,\n animationDirection: animationDirection,\n });\n var onRenderYear = function (value) {\n var _a, _b;\n return (_b = (_a = props.onRenderYear) === null || _a === void 0 ? void 0 : _a.call(props, value)) !== null && _b !== void 0 ? _b : value;\n };\n var gridAriaLabel = \"\".concat(onRenderYear(fromYear), \" - \").concat(onRenderYear(toYear));\n var year = fromYear;\n var cells = [];\n for (var i = 0; i < (toYear - fromYear + 1) / CELLS_PER_ROW; i++) {\n cells.push([]);\n for (var j = 0; j < CELLS_PER_ROW; j++) {\n cells[i].push(renderCell(year));\n year++;\n }\n }\n return (React.createElement(FocusZone, null,\n React.createElement(\"div\", { className: classNames.gridContainer, role: \"grid\", \"aria-label\": gridAriaLabel }, cells.map(function (cellRow, index) {\n return (React.createElement.apply(React, __spreadArray([\"div\", { key: 'yearPickerRow_' + index + '_' + fromYear, role: \"row\", className: classNames.buttonRow }], cellRow, false)));\n }))));\n};\nCalendarYearGrid.displayName = 'CalendarYearGrid';\nvar CalendarYearNavDirection;\n(function (CalendarYearNavDirection) {\n CalendarYearNavDirection[CalendarYearNavDirection[\"Previous\"] = 0] = \"Previous\";\n CalendarYearNavDirection[CalendarYearNavDirection[\"Next\"] = 1] = \"Next\";\n})(CalendarYearNavDirection || (CalendarYearNavDirection = {}));\nvar CalendarYearNavArrow = function (props) {\n var _a;\n var styles = props.styles, theme = props.theme, className = props.className, _b = props.navigationIcons, navigationIcons = _b === void 0 ? defaultCalendarNavigationIcons : _b, _c = props.strings, strings = _c === void 0 ? DefaultCalendarYearStrings : _c, direction = props.direction, onSelectPrev = props.onSelectPrev, onSelectNext = props.onSelectNext, fromYear = props.fromYear, toYear = props.toYear, maxYear = props.maxYear, minYear = props.minYear;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n var ariaLabel = direction === CalendarYearNavDirection.Previous ? strings.prevRangeAriaLabel : strings.nextRangeAriaLabel;\n var newRangeOffset = direction === CalendarYearNavDirection.Previous ? -CELL_COUNT : CELL_COUNT;\n var newRange = { fromYear: fromYear + newRangeOffset, toYear: toYear + newRangeOffset };\n var ariaLabelString = ariaLabel ? (typeof ariaLabel === 'string' ? ariaLabel : ariaLabel(newRange)) : undefined;\n var disabled = direction === CalendarYearNavDirection.Previous\n ? minYear !== undefined && fromYear < minYear\n : maxYear !== undefined && props.fromYear + CELL_COUNT > maxYear;\n var onNavigate = function () {\n direction === CalendarYearNavDirection.Previous ? onSelectPrev === null || onSelectPrev === void 0 ? void 0 : onSelectPrev() : onSelectNext === null || onSelectNext === void 0 ? void 0 : onSelectNext();\n };\n var onKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n onNavigate();\n }\n };\n // can be condensed, but leaving verbose for clarity due to regressions\n var isLeftNavigation = getRTL()\n ? direction === CalendarYearNavDirection.Next\n : direction === CalendarYearNavDirection.Previous;\n return (React.createElement(\"button\", { className: css(classNames.navigationButton, (_a = {},\n _a[classNames.disabled] = disabled,\n _a)), onClick: !disabled ? onNavigate : undefined, onKeyDown: !disabled ? onKeyDown : undefined, type: \"button\", title: ariaLabelString, disabled: disabled },\n React.createElement(Icon, { iconName: isLeftNavigation ? navigationIcons.leftNavigation : navigationIcons.rightNavigation })));\n};\nCalendarYearNavArrow.displayName = 'CalendarYearNavArrow';\nvar CalendarYearNav = function (props) {\n var styles = props.styles, theme = props.theme, className = props.className;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"div\", { className: classNames.navigationButtonsContainer },\n React.createElement(CalendarYearNavArrow, __assign({}, props, { direction: CalendarYearNavDirection.Previous })),\n React.createElement(CalendarYearNavArrow, __assign({}, props, { direction: CalendarYearNavDirection.Next }))));\n};\nCalendarYearNav.displayName = 'CalendarYearNav';\nvar CalendarYearTitle = function (props) {\n var styles = props.styles, theme = props.theme, className = props.className, fromYear = props.fromYear, toYear = props.toYear, _a = props.strings, strings = _a === void 0 ? DefaultCalendarYearStrings : _a, animateBackwards = props.animateBackwards, animationDirection = props.animationDirection;\n var onHeaderSelect = function () {\n var _a;\n (_a = props.onHeaderSelect) === null || _a === void 0 ? void 0 : _a.call(props, true);\n };\n var onHeaderKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {\n onHeaderSelect();\n }\n };\n var onRenderYear = function (year) {\n var _a, _b;\n return (_b = (_a = props.onRenderYear) === null || _a === void 0 ? void 0 : _a.call(props, year)) !== null && _b !== void 0 ? _b : year;\n };\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n hasHeaderClickCallback: !!props.onHeaderSelect,\n animateBackwards: animateBackwards,\n animationDirection: animationDirection,\n });\n if (props.onHeaderSelect) {\n var rangeAriaLabel = strings.rangeAriaLabel;\n var headerAriaLabelFormatString = strings.headerAriaLabelFormatString;\n var currentDateRange = rangeAriaLabel\n ? typeof rangeAriaLabel === 'string'\n ? rangeAriaLabel\n : rangeAriaLabel(props)\n : undefined;\n var ariaLabel = headerAriaLabelFormatString\n ? format(headerAriaLabelFormatString, currentDateRange)\n : currentDateRange;\n return (React.createElement(\"button\", { className: classNames.currentItemButton, onClick: onHeaderSelect, onKeyDown: onHeaderKeyDown, \"aria-label\": ariaLabel, role: \"button\", type: \"button\" },\n React.createElement(\"span\", { \"aria-live\": \"assertive\", \"aria-atomic\": \"true\" },\n onRenderYear(fromYear),\n \" - \",\n onRenderYear(toYear))));\n }\n return (React.createElement(\"div\", { className: classNames.current },\n onRenderYear(fromYear),\n \" - \",\n onRenderYear(toYear)));\n};\nCalendarYearTitle.displayName = 'CalendarYearTitle';\nvar CalendarYearHeader = function (props) {\n var _a;\n var styles = props.styles, theme = props.theme, className = props.className, animateBackwards = props.animateBackwards, animationDirection = props.animationDirection, onRenderTitle = props.onRenderTitle;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n hasHeaderClickCallback: !!props.onHeaderSelect,\n animateBackwards: animateBackwards,\n animationDirection: animationDirection,\n });\n return (React.createElement(\"div\", { className: classNames.headerContainer }, (_a = onRenderTitle === null || onRenderTitle === void 0 ? void 0 : onRenderTitle(props)) !== null && _a !== void 0 ? _a : React.createElement(CalendarYearTitle, __assign({}, props)),\n React.createElement(CalendarYearNav, __assign({}, props))));\n};\nCalendarYearHeader.displayName = 'CalendarYearHeader';\nfunction useAnimateBackwards(_a) {\n var selectedYear = _a.selectedYear, navigatedYear = _a.navigatedYear;\n var rangeYear = selectedYear || navigatedYear || new Date().getFullYear();\n var fromYear = Math.floor(rangeYear / 10) * 10;\n var previousFromYear = usePrevious(fromYear);\n if (!previousFromYear || previousFromYear === fromYear) {\n return undefined;\n }\n else if (previousFromYear > fromYear) {\n return true;\n }\n else {\n return false;\n }\n}\nfunction useYearRangeState(_a) {\n var selectedYear = _a.selectedYear, navigatedYear = _a.navigatedYear;\n var rangeYear = React.useMemo(function () {\n return selectedYear || navigatedYear || Math.floor(new Date().getFullYear() / 10) * 10;\n }, [navigatedYear, selectedYear]);\n var _b = React.useState(rangeYear), fromYear = _b[0], setFromYear = _b[1];\n var onNavNext = function () {\n setFromYear(function (year) { return year + CELL_COUNT; });\n };\n var onNavPrevious = function () {\n setFromYear(function (year) { return year - CELL_COUNT; });\n };\n React.useEffect(function () {\n setFromYear(rangeYear);\n }, [rangeYear]);\n var toYear = fromYear + CELL_COUNT - 1;\n return [fromYear, toYear, onNavNext, onNavPrevious];\n}\nexport var CalendarYearBase = function (props) {\n var animateBackwards = useAnimateBackwards(props);\n var _a = useYearRangeState(props), fromYear = _a[0], toYear = _a[1], onNavNext = _a[2], onNavPrevious = _a[3];\n var gridRef = React.useRef(null);\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: function () {\n var _a, _b;\n (_b = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n },\n }); });\n var styles = props.styles, theme = props.theme, className = props.className;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"div\", { className: classNames.root },\n React.createElement(CalendarYearHeader, __assign({}, props, { fromYear: fromYear, toYear: toYear, onSelectPrev: onNavPrevious, onSelectNext: onNavNext, animateBackwards: animateBackwards })),\n React.createElement(CalendarYearGrid, __assign({}, props, { fromYear: fromYear, toYear: toYear, animateBackwards: animateBackwards, componentRef: gridRef }))));\n};\nCalendarYearBase.displayName = 'CalendarYearBase';\n//# sourceMappingURL=CalendarYear.base.js.map","import { getStyles } from './CalendarYear.styles';\nimport { styled } from '../../../Utilities';\nimport { CalendarYearBase } from './CalendarYear.base';\nexport var CalendarYear = styled(CalendarYearBase, getStyles, undefined, { scope: 'CalendarYear' });\n//# sourceMappingURL=CalendarYear.js.map","import * as React from 'react';\nimport { FocusZone } from '../../../FocusZone';\nimport { addYears, setMonth, getYearStart, getYearEnd, getMonthStart, getMonthEnd, compareDatePart, DEFAULT_DATE_FORMATTING, } from '@fluentui/date-time-utilities';\nimport { Icon } from '../../../Icon';\nimport { getStyles } from './CalendarMonth.styles';\nimport { css, getRTL, classNamesFunction, KeyCodes, format, getPropsWithDefaults } from '@fluentui/utilities';\nimport { CalendarYear } from '../CalendarYear/CalendarYear';\nimport { usePrevious } from '@fluentui/react-hooks';\nimport { defaultCalendarNavigationIcons } from '../defaults';\nvar MONTHS_PER_ROW = 4;\nvar getClassNames = classNamesFunction();\nvar DEFAULT_PROPS = {\n styles: getStyles,\n strings: undefined,\n navigationIcons: defaultCalendarNavigationIcons,\n dateTimeFormatter: DEFAULT_DATE_FORMATTING,\n yearPickerHidden: false,\n};\nfunction useAnimateBackwards(_a) {\n var navigatedDate = _a.navigatedDate;\n var currentYear = navigatedDate.getFullYear();\n var previousYear = usePrevious(currentYear);\n if (previousYear === undefined || previousYear === currentYear) {\n return undefined;\n }\n else {\n return previousYear > currentYear;\n }\n}\nfunction useFocusLogic(_a) {\n var componentRef = _a.componentRef;\n var navigatedMonthRef = React.useRef(null);\n var calendarYearRef = React.useRef(null);\n var focusOnUpdate = React.useRef(false);\n var focus = React.useCallback(function () {\n if (calendarYearRef.current) {\n calendarYearRef.current.focus();\n }\n else if (navigatedMonthRef.current) {\n navigatedMonthRef.current.focus();\n }\n }, []);\n React.useImperativeHandle(componentRef, function () { return ({ focus: focus }); }, [focus]);\n React.useEffect(function () {\n if (focusOnUpdate.current) {\n focus();\n focusOnUpdate.current = false;\n }\n });\n var focusOnNextUpdate = function () {\n focusOnUpdate.current = true;\n };\n return [navigatedMonthRef, calendarYearRef, focusOnNextUpdate];\n}\nexport var CalendarMonthBase = function (propsWithoutDefaults) {\n var _a, _b;\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var _c = useFocusLogic(props), navigatedMonthRef = _c[0], calendarYearRef = _c[1], focusOnNextUpdate = _c[2];\n var _d = React.useState(false), isYearPickerVisible = _d[0], setIsYearPickerVisible = _d[1];\n var animateBackwards = useAnimateBackwards(props);\n var navigatedDate = props.navigatedDate, selectedDate = props.selectedDate, strings = props.strings, _e = props.today, today = _e === void 0 ? new Date() : _e, navigationIcons = props.navigationIcons, dateTimeFormatter = props.dateTimeFormatter, minDate = props.minDate, maxDate = props.maxDate, theme = props.theme, styles = props.styles, className = props.className, allFocusable = props.allFocusable, highlightCurrentMonth = props.highlightCurrentMonth, highlightSelectedMonth = props.highlightSelectedMonth, animationDirection = props.animationDirection, yearPickerHidden = props.yearPickerHidden, onNavigateDate = props.onNavigateDate;\n var selectMonthCallback = function (newMonth) {\n return function () { return onSelectMonth(newMonth); };\n };\n var onSelectNextYear = function () {\n onNavigateDate(addYears(navigatedDate, 1), false);\n };\n var onSelectPrevYear = function () {\n onNavigateDate(addYears(navigatedDate, -1), false);\n };\n var onSelectMonth = function (newMonth) {\n var _a;\n // If header is clickable the calendars are overlayed, switch back to day picker when month is clicked\n (_a = props.onHeaderSelect) === null || _a === void 0 ? void 0 : _a.call(props);\n onNavigateDate(setMonth(navigatedDate, newMonth), true);\n };\n var onHeaderSelect = function () {\n var _a;\n if (!yearPickerHidden) {\n focusOnNextUpdate();\n setIsYearPickerVisible(true);\n }\n else {\n (_a = props.onHeaderSelect) === null || _a === void 0 ? void 0 : _a.call(props);\n }\n };\n var onSelectYear = function (selectedYear) {\n focusOnNextUpdate();\n var navYear = navigatedDate.getFullYear();\n if (navYear !== selectedYear) {\n var newNavigationDate = new Date(navigatedDate.getTime());\n newNavigationDate.setFullYear(selectedYear);\n // for min and max dates, adjust the new navigation date - perhaps this should be\n // checked on the master navigation date handler (i.e. in Calendar)\n if (maxDate && newNavigationDate > maxDate) {\n newNavigationDate = setMonth(newNavigationDate, maxDate.getMonth());\n }\n else if (minDate && newNavigationDate < minDate) {\n newNavigationDate = setMonth(newNavigationDate, minDate.getMonth());\n }\n onNavigateDate(newNavigationDate, true);\n }\n setIsYearPickerVisible(false);\n };\n var onYearPickerHeaderSelect = function (focus) {\n focusOnNextUpdate();\n setIsYearPickerVisible(false);\n };\n // navigationIcons has a default value in defaultProps, but typescript doesn't recognize this\n var leftNavigationIcon = navigationIcons.leftNavigation;\n var rightNavigationIcon = navigationIcons.rightNavigation;\n var dateFormatter = dateTimeFormatter;\n // determine if previous/next years are in bounds\n var isPrevYearInBounds = minDate ? compareDatePart(minDate, getYearStart(navigatedDate)) < 0 : true;\n var isNextYearInBounds = maxDate ? compareDatePart(getYearEnd(navigatedDate), maxDate) < 0 : true;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n hasHeaderClickCallback: !!props.onHeaderSelect || !yearPickerHidden,\n highlightCurrent: highlightCurrentMonth,\n highlightSelected: highlightSelectedMonth,\n animateBackwards: animateBackwards,\n animationDirection: animationDirection,\n });\n if (isYearPickerVisible) {\n var _f = getYearStrings(props), onRenderYear = _f[0], yearStrings = _f[1];\n // use navigated date for the year picker\n return (React.createElement(CalendarYear, { key: 'calendarYear', minYear: minDate ? minDate.getFullYear() : undefined, maxYear: maxDate ? maxDate.getFullYear() : undefined, \n // eslint-disable-next-line react/jsx-no-bind\n onSelectYear: onSelectYear, navigationIcons: navigationIcons, \n // eslint-disable-next-line react/jsx-no-bind\n onHeaderSelect: onYearPickerHeaderSelect, selectedYear: selectedDate ? selectedDate.getFullYear() : navigatedDate ? navigatedDate.getFullYear() : undefined, navigatedYear: navigatedDate.getFullYear(), onRenderYear: onRenderYear, strings: yearStrings, componentRef: calendarYearRef, styles: styles, highlightCurrentYear: highlightCurrentMonth, highlightSelectedYear: highlightSelectedMonth, animationDirection: animationDirection }));\n }\n var rowIndexes = [];\n for (var i = 0; i < strings.shortMonths.length / MONTHS_PER_ROW; i++) {\n rowIndexes.push(i);\n }\n var yearString = dateFormatter.formatYear(navigatedDate);\n var headerAriaLabel = strings.monthPickerHeaderAriaLabel\n ? format(strings.monthPickerHeaderAriaLabel, yearString)\n : yearString;\n return (React.createElement(\"div\", { className: classNames.root },\n React.createElement(\"div\", { className: classNames.headerContainer },\n React.createElement(\"button\", { className: classNames.currentItemButton, onClick: onHeaderSelect, onKeyDown: onButtonKeyDown(onHeaderSelect), \"aria-label\": headerAriaLabel, \"data-is-focusable\": !!props.onHeaderSelect || !yearPickerHidden, tabIndex: !!props.onHeaderSelect || !yearPickerHidden ? 0 : -1, type: \"button\" },\n React.createElement(\"span\", { \"aria-live\": \"polite\", \"aria-atomic\": \"true\" }, yearString)),\n React.createElement(\"div\", { className: classNames.navigationButtonsContainer },\n React.createElement(\"button\", { className: css(classNames.navigationButton, (_a = {},\n _a[classNames.disabled] = !isPrevYearInBounds,\n _a)), \"aria-disabled\": !isPrevYearInBounds, tabIndex: isPrevYearInBounds ? undefined : allFocusable ? 0 : -1, onClick: isPrevYearInBounds ? onSelectPrevYear : undefined, onKeyDown: isPrevYearInBounds ? onButtonKeyDown(onSelectPrevYear) : undefined, title: strings.prevYearAriaLabel\n ? strings.prevYearAriaLabel + ' ' + dateFormatter.formatYear(addYears(navigatedDate, -1))\n : undefined, type: \"button\" },\n React.createElement(Icon, { iconName: getRTL() ? rightNavigationIcon : leftNavigationIcon })),\n React.createElement(\"button\", { className: css(classNames.navigationButton, (_b = {},\n _b[classNames.disabled] = !isNextYearInBounds,\n _b)), \"aria-disabled\": !isNextYearInBounds, tabIndex: isNextYearInBounds ? undefined : allFocusable ? 0 : -1, onClick: isNextYearInBounds ? onSelectNextYear : undefined, onKeyDown: isNextYearInBounds ? onButtonKeyDown(onSelectNextYear) : undefined, title: strings.nextYearAriaLabel\n ? strings.nextYearAriaLabel + ' ' + dateFormatter.formatYear(addYears(navigatedDate, 1))\n : undefined, type: \"button\" },\n React.createElement(Icon, { iconName: getRTL() ? leftNavigationIcon : rightNavigationIcon })))),\n React.createElement(FocusZone, null,\n React.createElement(\"div\", { className: classNames.gridContainer, role: \"grid\", \"aria-label\": yearString }, rowIndexes.map(function (rowNum) {\n var monthsForRow = strings.shortMonths.slice(rowNum * MONTHS_PER_ROW, (rowNum + 1) * MONTHS_PER_ROW);\n return (React.createElement(\"div\", { key: 'monthRow_' + rowNum + navigatedDate.getFullYear(), role: \"row\", className: classNames.buttonRow }, monthsForRow.map(function (month, index) {\n var _a;\n var monthIndex = rowNum * MONTHS_PER_ROW + index;\n var indexedMonth = setMonth(navigatedDate, monthIndex);\n var isNavigatedMonth = navigatedDate.getMonth() === monthIndex;\n var isSelectedMonth = selectedDate.getMonth() === monthIndex;\n var isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();\n var isInBounds = (minDate ? compareDatePart(minDate, getMonthEnd(indexedMonth)) < 1 : true) &&\n (maxDate ? compareDatePart(getMonthStart(indexedMonth), maxDate) < 1 : true);\n return (React.createElement(\"button\", { ref: isNavigatedMonth ? navigatedMonthRef : undefined, role: 'gridcell', className: css(classNames.itemButton, (_a = {},\n _a[classNames.current] = highlightCurrentMonth && isCurrentMonth(monthIndex, navigatedDate.getFullYear(), today),\n _a[classNames.selected] = highlightSelectedMonth && isSelectedMonth && isSelectedYear,\n _a[classNames.disabled] = !isInBounds,\n _a)), disabled: !allFocusable && !isInBounds, key: monthIndex, onClick: isInBounds ? selectMonthCallback(monthIndex) : undefined, onKeyDown: isInBounds ? onButtonKeyDown(selectMonthCallback(monthIndex)) : undefined, \"aria-label\": dateFormatter.formatMonth(indexedMonth, strings), \"aria-selected\": isNavigatedMonth, \"data-is-focusable\": isInBounds ? true : undefined, type: \"button\" }, month));\n })));\n })))));\n};\nCalendarMonthBase.displayName = 'CalendarMonthBase';\nfunction getYearStrings(_a) {\n var strings = _a.strings, navigatedDate = _a.navigatedDate, dateTimeFormatter = _a.dateTimeFormatter;\n var yearToString = function (year) {\n if (dateTimeFormatter) {\n // create a date based on the current nav date\n var yearFormattingDate = new Date(navigatedDate.getTime());\n yearFormattingDate.setFullYear(year);\n return dateTimeFormatter.formatYear(yearFormattingDate);\n }\n return String(year);\n };\n var yearRangeToString = function (yearRange) {\n return \"\".concat(yearToString(yearRange.fromYear), \" - \").concat(yearToString(yearRange.toYear));\n };\n var yearRangeToNextDecadeLabel = function (yearRange) {\n return strings.nextYearRangeAriaLabel ? \"\".concat(strings.nextYearRangeAriaLabel, \" \").concat(yearRangeToString(yearRange)) : '';\n };\n var yearRangeToPrevDecadeLabel = function (yearRange) {\n return strings.prevYearRangeAriaLabel ? \"\".concat(strings.prevYearRangeAriaLabel, \" \").concat(yearRangeToString(yearRange)) : '';\n };\n return [\n yearToString,\n {\n rangeAriaLabel: yearRangeToString,\n prevRangeAriaLabel: yearRangeToPrevDecadeLabel,\n nextRangeAriaLabel: yearRangeToNextDecadeLabel,\n headerAriaLabelFormatString: strings.yearPickerHeaderAriaLabel,\n },\n ];\n}\nfunction isCurrentMonth(month, year, today) {\n return today.getFullYear() === year && today.getMonth() === month;\n}\nfunction onButtonKeyDown(callback) {\n return function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n callback();\n break;\n }\n };\n}\n//# sourceMappingURL=CalendarMonth.base.js.map","import { CalendarMonthBase } from './CalendarMonth.base';\nimport { getStyles } from './CalendarMonth.styles';\nimport { styled } from '../../../Utilities';\nexport var CalendarMonth = styled(CalendarMonthBase, getStyles, undefined, { scope: 'CalendarMonth' });\n//# sourceMappingURL=CalendarMonth.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { DayOfWeek, FirstWeekOfYear, DateRangeType, addMonths, addYears, DEFAULT_CALENDAR_STRINGS, DEFAULT_DATE_FORMATTING, } from '@fluentui/date-time-utilities';\nimport { CalendarDay } from './CalendarDay/CalendarDay';\nimport { CalendarMonth } from './CalendarMonth/CalendarMonth';\nimport { css, KeyCodes, classNamesFunction, focusAsync, format, FocusRects, getPropsWithDefaults, getWindow, } from '@fluentui/utilities';\nimport { useControllableValue } from '@fluentui/react-hooks';\nimport { defaultCalendarNavigationIcons } from './defaults';\nvar MIN_SIZE_FORCE_OVERLAY = 440;\nvar getClassNames = classNamesFunction();\nvar defaultWorkWeekDays = [\n DayOfWeek.Monday,\n DayOfWeek.Tuesday,\n DayOfWeek.Wednesday,\n DayOfWeek.Thursday,\n DayOfWeek.Friday,\n];\nvar DEFAULT_PROPS = {\n isMonthPickerVisible: true,\n isDayPickerVisible: true,\n showMonthPickerAsOverlay: false,\n today: new Date(),\n firstDayOfWeek: DayOfWeek.Sunday,\n dateRangeType: DateRangeType.Day,\n showGoToToday: true,\n strings: DEFAULT_CALENDAR_STRINGS,\n highlightCurrentMonth: false,\n highlightSelectedMonth: false,\n navigationIcons: defaultCalendarNavigationIcons,\n showWeekNumbers: false,\n firstWeekOfYear: FirstWeekOfYear.FirstDay,\n dateTimeFormatter: DEFAULT_DATE_FORMATTING,\n showSixWeeksByDefault: false,\n workWeekDays: defaultWorkWeekDays,\n showCloseButton: false,\n allFocusable: false,\n};\nfunction useDateState(_a) {\n var value = _a.value, _b = _a.today, today = _b === void 0 ? new Date() : _b, onSelectDate = _a.onSelectDate;\n /** The currently selected date in the calendar */\n var _c = useControllableValue(value, today), _d = _c[0], selectedDate = _d === void 0 ? today : _d, setSelectedDate = _c[1];\n /** The currently focused date in the day picker, but not necessarily selected */\n var _e = React.useState(value), _f = _e[0], navigatedDay = _f === void 0 ? today : _f, setNavigatedDay = _e[1];\n /** The currently focused date in the month picker, but not necessarily selected */\n var _g = React.useState(value), _h = _g[0], navigatedMonth = _h === void 0 ? today : _h, setNavigatedMonth = _g[1];\n /** If using a controlled value, when that value changes, navigate to that date */\n var _j = React.useState(value), _k = _j[0], lastSelectedDate = _k === void 0 ? today : _k, setLastSelectedDate = _j[1];\n if (value && lastSelectedDate.valueOf() !== value.valueOf()) {\n setNavigatedDay(value);\n setNavigatedMonth(value);\n setLastSelectedDate(value);\n }\n var navigateMonth = function (date) {\n setNavigatedMonth(date);\n };\n var navigateDay = function (date) {\n setNavigatedMonth(date);\n setNavigatedDay(date);\n };\n var onDateSelected = function (date, selectedDateRangeArray) {\n setNavigatedMonth(date);\n setNavigatedDay(date);\n setSelectedDate(date);\n onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(date, selectedDateRangeArray);\n };\n return [selectedDate, navigatedDay, navigatedMonth, onDateSelected, navigateDay, navigateMonth];\n}\nfunction useVisibilityState(props) {\n /** State used to show/hide month picker */\n var _a = useControllableValue(getShowMonthPickerAsOverlay(props) ? undefined : props.isMonthPickerVisible, false), _b = _a[0], isMonthPickerVisible = _b === void 0 ? true : _b, setIsMonthPickerVisible = _a[1];\n /** State used to show/hide day picker */\n var _c = useControllableValue(getShowMonthPickerAsOverlay(props) ? undefined : props.isDayPickerVisible, true), _d = _c[0], isDayPickerVisible = _d === void 0 ? true : _d, setIsDayPickerVisible = _c[1];\n var toggleDayMonthPickerVisibility = function () {\n setIsMonthPickerVisible(!isMonthPickerVisible);\n setIsDayPickerVisible(!isDayPickerVisible);\n };\n return [isMonthPickerVisible, isDayPickerVisible, toggleDayMonthPickerVisibility];\n}\nfunction useFocusLogic(_a, isDayPickerVisible, isMonthPickerVisible) {\n var componentRef = _a.componentRef;\n var dayPicker = React.useRef(null);\n var monthPicker = React.useRef(null);\n var focusOnUpdate = React.useRef(false);\n var focus = React.useCallback(function () {\n if (isDayPickerVisible && dayPicker.current) {\n focusAsync(dayPicker.current);\n }\n else if (isMonthPickerVisible && monthPicker.current) {\n focusAsync(monthPicker.current);\n }\n }, [isDayPickerVisible, isMonthPickerVisible]);\n React.useImperativeHandle(componentRef, function () { return ({ focus: focus }); }, [focus]);\n React.useEffect(function () {\n if (focusOnUpdate.current) {\n focus();\n focusOnUpdate.current = false;\n }\n });\n var focusOnNextUpdate = function () {\n focusOnUpdate.current = true;\n };\n return [dayPicker, monthPicker, focusOnNextUpdate];\n}\nexport var CalendarBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var _a = useDateState(props), selectedDate = _a[0], navigatedDay = _a[1], navigatedMonth = _a[2], onDateSelected = _a[3], navigateDay = _a[4], navigateMonth = _a[5];\n var _b = useVisibilityState(props), isMonthPickerVisible = _b[0], isDayPickerVisible = _b[1], toggleDayMonthPickerVisibility = _b[2];\n var _c = useFocusLogic(props, isDayPickerVisible, isMonthPickerVisible), dayPicker = _c[0], monthPicker = _c[1], focusOnNextUpdate = _c[2];\n var renderGoToTodayButton = function () {\n var goTodayEnabled = showGoToToday;\n if (goTodayEnabled && today) {\n goTodayEnabled =\n navigatedDay.getFullYear() !== today.getFullYear() ||\n navigatedDay.getMonth() !== today.getMonth() ||\n navigatedMonth.getFullYear() !== today.getFullYear() ||\n navigatedMonth.getMonth() !== today.getMonth();\n }\n return (showGoToToday && (React.createElement(\"button\", { className: css('js-goToday', classes.goTodayButton), onClick: onGotoToday, onKeyDown: onButtonKeyDown(onGotoToday), type: \"button\", disabled: !goTodayEnabled }, strings.goToToday)));\n };\n var onNavigateDayDate = function (date, focusOnNavigatedDay) {\n navigateDay(date);\n if (focusOnNavigatedDay) {\n focusOnNextUpdate();\n }\n };\n var onNavigateMonthDate = function (date, focusOnNavigatedDay) {\n if (focusOnNavigatedDay) {\n focusOnNextUpdate();\n }\n if (!focusOnNavigatedDay) {\n navigateMonth(date);\n return;\n }\n if (monthPickerOnly) {\n onDateSelected(date);\n }\n navigateDay(date);\n };\n var onHeaderSelect = getShowMonthPickerAsOverlay(props)\n ? function () {\n toggleDayMonthPickerVisibility();\n focusOnNextUpdate();\n }\n : undefined;\n var onGotoToday = function () {\n navigateDay(today);\n focusOnNextUpdate();\n };\n var onButtonKeyDown = function (callback) {\n return function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n case KeyCodes.space:\n callback();\n break;\n }\n };\n };\n var onDatePickerPopupKeyDown = function (ev) {\n var _a;\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n ev.preventDefault();\n break;\n case KeyCodes.backspace:\n ev.preventDefault();\n break;\n case KeyCodes.escape:\n (_a = props.onDismiss) === null || _a === void 0 ? void 0 : _a.call(props);\n break;\n case KeyCodes.pageUp:\n if (ev.ctrlKey) {\n // go to next year\n navigateDay(addYears(navigatedDay, 1));\n }\n else {\n // go to next month\n navigateDay(addMonths(navigatedDay, 1));\n }\n ev.preventDefault();\n break;\n case KeyCodes.pageDown:\n if (ev.ctrlKey) {\n // go to previous year\n navigateDay(addYears(navigatedDay, -1));\n }\n else {\n // go to previous month\n navigateDay(addMonths(navigatedDay, -1));\n }\n ev.preventDefault();\n break;\n default:\n break;\n }\n };\n var rootClass = 'ms-DatePicker';\n var firstDayOfWeek = props.firstDayOfWeek, dateRangeType = props.dateRangeType, strings = props.strings, showGoToToday = props.showGoToToday, highlightCurrentMonth = props.highlightCurrentMonth, highlightSelectedMonth = props.highlightSelectedMonth, navigationIcons = props.navigationIcons, minDate = props.minDate, maxDate = props.maxDate, restrictedDates = props.restrictedDates, id = props.id, className = props.className, showCloseButton = props.showCloseButton, allFocusable = props.allFocusable, styles = props.styles, showWeekNumbers = props.showWeekNumbers, theme = props.theme, calendarDayProps = props.calendarDayProps, calendarMonthProps = props.calendarMonthProps, dateTimeFormatter = props.dateTimeFormatter, _d = props.today, today = _d === void 0 ? new Date() : _d;\n var showMonthPickerAsOverlay = getShowMonthPickerAsOverlay(props);\n var monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible;\n var overlaidWithButton = showMonthPickerAsOverlay && showGoToToday;\n var classes = getClassNames(styles, {\n theme: theme,\n className: className,\n isMonthPickerVisible: isMonthPickerVisible,\n isDayPickerVisible: isDayPickerVisible,\n monthPickerOnly: monthPickerOnly,\n showMonthPickerAsOverlay: showMonthPickerAsOverlay,\n overlaidWithButton: overlaidWithButton,\n overlayedWithButton: overlaidWithButton,\n showGoToToday: showGoToToday,\n showWeekNumbers: showWeekNumbers,\n });\n var todayDateString = '';\n var selectedDateString = '';\n if (dateTimeFormatter && strings.todayDateFormatString) {\n todayDateString = format(strings.todayDateFormatString, dateTimeFormatter.formatMonthDayYear(today, strings));\n }\n if (dateTimeFormatter && strings.selectedDateFormatString) {\n var dateStringFormatter = monthPickerOnly\n ? dateTimeFormatter.formatMonthYear\n : dateTimeFormatter.formatMonthDayYear;\n selectedDateString = format(strings.selectedDateFormatString, dateStringFormatter(selectedDate, strings));\n }\n var selectionAndTodayString = selectedDateString + ', ' + todayDateString;\n return (React.createElement(\"div\", { id: id, ref: forwardedRef, role: \"group\", \"aria-label\": selectionAndTodayString, className: css(rootClass, classes.root, className, 'ms-slideDownIn10'), onKeyDown: onDatePickerPopupKeyDown },\n React.createElement(\"div\", { className: classes.liveRegion, \"aria-live\": \"polite\", \"aria-atomic\": \"true\" },\n React.createElement(\"span\", null, selectedDateString)),\n isDayPickerVisible && (React.createElement(CalendarDay, __assign({ selectedDate: selectedDate, navigatedDate: navigatedDay, today: props.today, onSelectDate: onDateSelected, \n // eslint-disable-next-line react/jsx-no-bind\n onNavigateDate: onNavigateDayDate, onDismiss: props.onDismiss, firstDayOfWeek: firstDayOfWeek, dateRangeType: dateRangeType, strings: strings, \n // eslint-disable-next-line react/jsx-no-bind\n onHeaderSelect: onHeaderSelect, navigationIcons: navigationIcons, showWeekNumbers: props.showWeekNumbers, firstWeekOfYear: props.firstWeekOfYear, dateTimeFormatter: props.dateTimeFormatter, showSixWeeksByDefault: props.showSixWeeksByDefault, minDate: minDate, maxDate: maxDate, restrictedDates: restrictedDates, workWeekDays: props.workWeekDays, componentRef: dayPicker, showCloseButton: showCloseButton, allFocusable: allFocusable }, calendarDayProps))),\n isDayPickerVisible && isMonthPickerVisible && React.createElement(\"div\", { className: classes.divider }),\n isMonthPickerVisible ? (React.createElement(\"div\", { className: classes.monthPickerWrapper },\n React.createElement(CalendarMonth, __assign({ navigatedDate: navigatedMonth, selectedDate: navigatedDay, strings: strings, \n // eslint-disable-next-line react/jsx-no-bind\n onNavigateDate: onNavigateMonthDate, today: props.today, highlightCurrentMonth: highlightCurrentMonth, highlightSelectedMonth: highlightSelectedMonth, \n // eslint-disable-next-line react/jsx-no-bind\n onHeaderSelect: onHeaderSelect, navigationIcons: navigationIcons, dateTimeFormatter: props.dateTimeFormatter, minDate: minDate, maxDate: maxDate, componentRef: monthPicker }, calendarMonthProps)),\n renderGoToTodayButton())) : (renderGoToTodayButton()),\n React.createElement(FocusRects, null)));\n});\nCalendarBase.displayName = 'CalendarBase';\nfunction getShowMonthPickerAsOverlay(_a) {\n var showMonthPickerAsOverlay = _a.showMonthPickerAsOverlay, isDayPickerVisible = _a.isDayPickerVisible;\n var win = getWindow();\n return showMonthPickerAsOverlay || (isDayPickerVisible && win && win.innerWidth <= MIN_SIZE_FORCE_OVERLAY);\n}\n//# sourceMappingURL=Calendar.base.js.map","import { normalize, FontSizes, getFocusStyle, HighContrastSelector } from '@fluentui/style-utilities';\nexport var styles = function (props) {\n var _a;\n var className = props.className, theme = props.theme, isDayPickerVisible = props.isDayPickerVisible, isMonthPickerVisible = props.isMonthPickerVisible, showWeekNumbers = props.showWeekNumbers;\n var palette = theme.palette;\n var totalWidth = isDayPickerVisible && isMonthPickerVisible ? 440 : 220;\n if (showWeekNumbers && isDayPickerVisible) {\n totalWidth += 30;\n }\n return {\n root: [\n normalize,\n {\n display: 'flex',\n width: totalWidth,\n },\n !isMonthPickerVisible && {\n flexDirection: 'column',\n },\n className,\n ],\n divider: {\n top: 0,\n borderRight: '1px solid',\n borderColor: palette.neutralLight,\n },\n monthPickerWrapper: [\n {\n display: 'flex',\n flexDirection: 'column',\n },\n ],\n goTodayButton: [\n getFocusStyle(theme, { inset: -1 }),\n {\n bottom: 0,\n color: palette.neutralPrimary,\n height: 30,\n lineHeight: 30,\n backgroundColor: 'transparent',\n border: 'none',\n boxSizing: 'content-box',\n padding: '0 4px',\n alignSelf: 'flex-end',\n marginRight: 16,\n marginTop: 3,\n fontSize: FontSizes.small,\n fontFamily: 'inherit',\n overflow: 'visible',\n selectors: {\n '& div': {\n fontSize: FontSizes.small,\n },\n '&:hover': {\n color: palette.themePrimary,\n backgroundColor: 'transparent',\n cursor: 'pointer',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n outline: '1px solid Buttontext',\n borderRadius: '2px',\n },\n _a),\n },\n '&:active': {\n color: palette.themeDark,\n },\n '&:disabled': {\n color: palette.neutralTertiaryAlt,\n pointerEvents: 'none',\n },\n },\n },\n ],\n liveRegion: {\n border: 0,\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: 0,\n width: '1px',\n position: 'absolute',\n },\n };\n};\n//# sourceMappingURL=Calendar.styles.js.map","import { styled } from '@fluentui/utilities';\nimport { CalendarBase } from './Calendar.base';\nimport { styles } from './Calendar.styles';\nexport var Calendar = styled(CalendarBase, styles, undefined, {\n scope: 'Calendar',\n});\n//# sourceMappingURL=Calendar.js.map","import * as React from 'react';\nimport { Icon, FontIcon } from '../../Icon';\nimport { classNamesFunction } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nexport var CheckBase = React.forwardRef(function (props, ref) {\n var _a = props.checked, checked = _a === void 0 ? false : _a, className = props.className, theme = props.theme, styles = props.styles, _b = props.useFastIcons, useFastIcons = _b === void 0 ? true : _b;\n var classNames = getClassNames(styles, { theme: theme, className: className, checked: checked });\n var IconComponent = useFastIcons ? FontIcon : Icon;\n return (React.createElement(\"div\", { className: classNames.root, ref: ref },\n React.createElement(IconComponent, { iconName: \"CircleRing\", className: classNames.circle }),\n React.createElement(IconComponent, { iconName: \"StatusCircleCheckmark\", className: classNames.check })));\n});\nCheckBase.displayName = 'CheckBase';\n//# sourceMappingURL=Check.base.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, getGlobalClassNames, IconFontSizes, getHighContrastNoAdjustStyle } from '../../Styling';\nimport { getRTL } from '../../Utilities';\nexport var CheckGlobalClassNames = {\n root: 'ms-Check',\n circle: 'ms-Check-circle',\n check: 'ms-Check-check',\n /** Must be manually applied to the parent element of the check. */\n checkHost: 'ms-Check-checkHost',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e;\n // eslint-disable-next-line deprecation/deprecation\n var _f = props.height, height = _f === void 0 ? props.checkBoxHeight || '18px' : _f, checked = props.checked, className = props.className, theme = props.theme;\n var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;\n var isRTL = getRTL(theme);\n var classNames = getGlobalClassNames(CheckGlobalClassNames, theme);\n var sharedCircleCheck = {\n fontSize: height,\n position: 'absolute',\n left: 0,\n top: 0,\n width: height,\n height: height,\n textAlign: 'center',\n // inline-flex prevents the check from shifting with custom line height styles\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'middle',\n };\n return {\n root: [\n classNames.root,\n fonts.medium,\n {\n // lineHeight currently needs to be a string to output without 'px'\n lineHeight: '1',\n width: height,\n height: height,\n verticalAlign: 'top',\n position: 'relative',\n userSelect: 'none',\n selectors: (_a = {\n ':before': {\n content: '\"\"',\n position: 'absolute',\n top: '1px',\n right: '1px',\n bottom: '1px',\n left: '1px',\n borderRadius: '50%',\n opacity: 1,\n background: semanticColors.bodyBackground,\n }\n },\n _a[\".\".concat(classNames.checkHost, \":hover &, .\").concat(classNames.checkHost, \":focus &, &:hover, &:focus\")] = {\n opacity: 1,\n },\n _a),\n },\n checked && [\n 'is-checked',\n {\n selectors: {\n ':before': {\n background: palette.themePrimary,\n opacity: 1,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n background: 'Window',\n },\n _b),\n },\n },\n },\n ],\n className,\n ],\n circle: [\n classNames.circle,\n sharedCircleCheck,\n {\n color: palette.neutralSecondary,\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'WindowText',\n },\n _c),\n },\n checked && {\n color: palette.white,\n },\n ],\n check: [\n classNames.check,\n sharedCircleCheck,\n {\n opacity: 0,\n color: palette.neutralSecondary,\n fontSize: IconFontSizes.medium,\n left: isRTL ? '-0.5px' : '.5px',\n top: '-1px',\n selectors: (_d = {\n ':hover': {\n opacity: 1,\n }\n },\n _d[HighContrastSelector] = __assign({}, getHighContrastNoAdjustStyle()),\n _d),\n },\n checked && {\n opacity: 1,\n color: palette.white,\n fontWeight: 900,\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n border: 'none',\n color: 'WindowText',\n },\n _e),\n },\n ],\n checkHost: classNames.checkHost,\n };\n};\n//# sourceMappingURL=Check.styles.js.map","import { styled } from '../../Utilities';\nimport { CheckBase } from './Check.base';\nimport { getStyles } from './Check.styles';\nexport var Check = styled(CheckBase, getStyles, undefined, {\n scope: 'Check',\n}, true);\n//# sourceMappingURL=Check.js.map","export var MAX_COLOR_SATURATION = 100;\nexport var MAX_COLOR_HUE = 359;\nexport var MAX_COLOR_VALUE = 100;\nexport var MAX_COLOR_RGB = 255;\n/** @deprecated Use MAX_COLOR_RGB (255) or MAX_COLOR_ALPHA (100) */\nexport var MAX_COLOR_RGBA = MAX_COLOR_RGB;\nexport var MAX_COLOR_ALPHA = 100;\n/** Minimum length for a hexadecimal color string (not including the #) */\nexport var MIN_HEX_LENGTH = 3;\n/** Maximum length for a hexadecimal color string (not including the #) */\nexport var MAX_HEX_LENGTH = 6;\n/** Minimum length for a string of an RGBA color component */\nexport var MIN_RGBA_LENGTH = 1;\n/** Maximum length for a string of an RGBA color component */\nexport var MAX_RGBA_LENGTH = 3;\n/** Regular expression matching only valid hexadecimal chars */\nexport var HEX_REGEX = /^[\\da-f]{0,6}$/i;\n/** Regular expression matching only numbers */\nexport var RGBA_REGEX = /^\\d{0,3}$/;\n//# sourceMappingURL=consts.js.map","/** Converts HSL components to an HSV color. */\nexport function hsl2hsv(h, s, l) {\n s *= (l < 50 ? l : 100 - l) / 100;\n var v = l + s;\n return {\n h: h,\n s: v === 0 ? 0 : ((2 * s) / v) * 100,\n v: v,\n };\n}\n//# sourceMappingURL=hsl2hsv.js.map","import { MAX_COLOR_RGB } from './consts';\n/** Converts HSV components to an RGB color. Does not set the alpha value. */\nexport function hsv2rgb(h, s, v) {\n s = s / 100;\n v = v / 100;\n var rgb = [];\n var c = v * s;\n var hh = h / 60;\n var x = c * (1 - Math.abs((hh % 2) - 1));\n var m = v - c;\n switch (Math.floor(hh)) {\n case 0:\n rgb = [c, x, 0];\n break;\n case 1:\n rgb = [x, c, 0];\n break;\n case 2:\n rgb = [0, c, x];\n break;\n case 3:\n rgb = [0, x, c];\n break;\n case 4:\n rgb = [x, 0, c];\n break;\n case 5:\n rgb = [c, 0, x];\n break;\n }\n return {\n r: Math.round(MAX_COLOR_RGB * (rgb[0] + m)),\n g: Math.round(MAX_COLOR_RGB * (rgb[1] + m)),\n b: Math.round(MAX_COLOR_RGB * (rgb[2] + m)),\n };\n}\n//# sourceMappingURL=hsv2rgb.js.map","import { hsl2hsv } from './hsl2hsv';\nimport { hsv2rgb } from './hsv2rgb';\n/** Converts HSL components to an RGB color. Does not set the alpha value. */\nexport function hsl2rgb(h, s, l) {\n var hsv = hsl2hsv(h, s, l);\n return hsv2rgb(hsv.h, hsv.s, hsv.v);\n}\n//# sourceMappingURL=hsl2rgb.js.map","import { MAX_COLOR_ALPHA } from './consts';\nimport { hsl2rgb } from './hsl2rgb';\n/**\n * Converts a valid CSS color string to an RGB color.\n * Note that hex colors *must* be prefixed with # to be considered valid.\n * Alpha in returned color defaults to 100.\n * Four and eight digit hex values (with alpha) are supported if the current browser supports them.\n */\nexport function cssColor(color) {\n if (!color) {\n return undefined;\n }\n // Need to check the following valid color formats: RGB(A), HSL(A), hex, named color\n // First check for well formatted RGB(A), HSL(A), and hex formats at the start.\n // This is for perf (no creating an element) and catches the intentional \"transparent\" color\n // case early on.\n var easyColor = _rgba(color) || _hex6(color) || _hex3(color) || _hsla(color);\n if (easyColor) {\n return easyColor;\n }\n // if the above fails, do the more expensive catch-all\n return _browserCompute(color);\n}\n/**\n * Uses the browser's getComputedStyle() to determine what the passed-in color is.\n * This assumes _rgba, _hex6, _hex3, and _hsla have already been tried and all failed.\n * This works by attaching an element to the DOM, which may fail in server-side rendering\n * or with headless browsers.\n */\nfunction _browserCompute(str) {\n if (typeof document === 'undefined') {\n // don't throw an error when used server-side\n return undefined;\n }\n var elem = document.createElement('div');\n elem.style.backgroundColor = str;\n // This element must be attached to the DOM for getComputedStyle() to have a value\n elem.style.position = 'absolute';\n elem.style.top = '-9999px';\n elem.style.left = '-9999px';\n elem.style.height = '1px';\n elem.style.width = '1px';\n document.body.appendChild(elem);\n var eComputedStyle = getComputedStyle(elem);\n var computedColor = eComputedStyle && eComputedStyle.backgroundColor;\n document.body.removeChild(elem);\n // computedColor is always an RGB(A) string, except for invalid colors in IE/Edge which return 'transparent'\n // browsers return one of these if the color string is invalid,\n // so need to differentiate between an actual error and intentionally passing in this color\n if (computedColor === 'rgba(0, 0, 0, 0)' || computedColor === 'transparent') {\n switch (str.trim()) {\n // RGB and HSL were already checked at the start of the function\n case 'transparent':\n case '#0000':\n case '#00000000':\n return { r: 0, g: 0, b: 0, a: 0 };\n }\n return undefined;\n }\n return _rgba(computedColor);\n}\n/**\n * If `str` is in valid `rgb()` or `rgba()` format, returns an RGB color (alpha defaults to 100).\n * Otherwise returns undefined.\n */\nfunction _rgba(str) {\n if (!str) {\n return undefined;\n }\n var match = str.match(/^rgb(a?)\\(([\\d., ]+)\\)$/);\n if (match) {\n var hasAlpha = !!match[1];\n var expectedPartCount = hasAlpha ? 4 : 3;\n var parts = match[2].split(/ *, */).map(Number);\n if (parts.length === expectedPartCount) {\n return {\n r: parts[0],\n g: parts[1],\n b: parts[2],\n a: hasAlpha ? parts[3] * 100 : MAX_COLOR_ALPHA,\n };\n }\n }\n}\n/**\n * If `str` is in `hsl()` or `hsla()` format, returns an RGB color (alpha defaults to 100).\n * Otherwise returns undefined.\n */\nfunction _hsla(str) {\n var match = str.match(/^hsl(a?)\\(([\\d., ]+)\\)$/);\n if (match) {\n var hasAlpha = !!match[1];\n var expectedPartCount = hasAlpha ? 4 : 3;\n var parts = match[2].split(/ *, */).map(Number);\n if (parts.length === expectedPartCount) {\n var rgba = hsl2rgb(parts[0], parts[1], parts[2]);\n rgba.a = hasAlpha ? parts[3] * 100 : MAX_COLOR_ALPHA;\n return rgba;\n }\n }\n}\n/**\n * If `str` is in valid 6-digit hex format *with* # prefix, returns an RGB color (with alpha 100).\n * Otherwise returns undefined.\n */\nfunction _hex6(str) {\n if (str[0] === '#' && str.length === 7 && /^#[\\da-fA-F]{6}$/.test(str)) {\n return {\n r: parseInt(str.slice(1, 3), 16),\n g: parseInt(str.slice(3, 5), 16),\n b: parseInt(str.slice(5, 7), 16),\n a: MAX_COLOR_ALPHA,\n };\n }\n}\n/**\n * If `str` is in valid 3-digit hex format *with* # prefix, returns an RGB color (with alpha 100).\n * Otherwise returns undefined.\n */\nfunction _hex3(str) {\n if (str[0] === '#' && str.length === 4 && /^#[\\da-fA-F]{3}$/.test(str)) {\n return {\n r: parseInt(str[1] + str[1], 16),\n g: parseInt(str[2] + str[2], 16),\n b: parseInt(str[3] + str[3], 16),\n a: MAX_COLOR_ALPHA,\n };\n }\n}\n//# sourceMappingURL=cssColor.js.map","/** Clamp a value to ensure it falls within a given range. */\nexport function clamp(value, max, min) {\n if (min === void 0) { min = 0; }\n return value < min ? min : value > max ? max : value;\n}\n//# sourceMappingURL=clamp.js.map","import { MAX_COLOR_RGB } from './consts';\nimport { clamp } from './clamp';\n/** Converts RGB components to a hex color string (without # prefix). */\nexport function rgb2hex(r, g, b) {\n return [_rgbToPaddedHex(r), _rgbToPaddedHex(g), _rgbToPaddedHex(b)].join('');\n}\n/** Converts an RGB component to a 0-padded hex component of length 2. */\nfunction _rgbToPaddedHex(num) {\n num = clamp(num, MAX_COLOR_RGB);\n var hex = num.toString(16);\n return hex.length === 1 ? '0' + hex : hex;\n}\n//# sourceMappingURL=rgb2hex.js.map","import { MAX_COLOR_RGB } from './consts';\n/** Converts RGB components to an HSV color. */\nexport function rgb2hsv(r, g, b) {\n var h = NaN;\n var max = Math.max(r, g, b);\n var min = Math.min(r, g, b);\n var delta = max - min;\n // hue\n if (delta === 0) {\n h = 0;\n }\n else if (r === max) {\n h = ((g - b) / delta) % 6;\n }\n else if (g === max) {\n h = (b - r) / delta + 2;\n }\n else if (b === max) {\n h = (r - g) / delta + 4;\n }\n h = Math.round(h * 60);\n if (h < 0) {\n h += 360;\n }\n // saturation\n var s = Math.round((max === 0 ? 0 : delta / max) * 100);\n // value\n var v = Math.round((max / MAX_COLOR_RGB) * 100);\n return { h: h, s: s, v: v };\n}\n//# sourceMappingURL=rgb2hsv.js.map","import { MAX_COLOR_ALPHA } from './consts';\n/**\n * @internal\n * Get a CSS color string from some color components.\n * If `a` is specified and not 100, returns an `rgba()` string.\n * Otherwise returns `hex` prefixed with #.\n */\nexport function _rgbaOrHexString(r, g, b, a, hex) {\n return a === MAX_COLOR_ALPHA || typeof a !== 'number' ? \"#\".concat(hex) : \"rgba(\".concat(r, \", \").concat(g, \", \").concat(b, \", \").concat(a / MAX_COLOR_ALPHA, \")\");\n}\n//# sourceMappingURL=_rgbaOrHexString.js.map","import { MAX_COLOR_ALPHA } from './consts';\nimport { rgb2hsv } from './rgb2hsv';\nimport { rgb2hex } from './rgb2hex';\nimport { _rgbaOrHexString } from './_rgbaOrHexString';\n/** Converts an RGBA color to a color object (alpha defaults to 100). */\nexport function getColorFromRGBA(rgba) {\n var _a = rgba.a, a = _a === void 0 ? MAX_COLOR_ALPHA : _a, b = rgba.b, g = rgba.g, r = rgba.r;\n var _b = rgb2hsv(r, g, b), h = _b.h, s = _b.s, v = _b.v;\n var hex = rgb2hex(r, g, b);\n var str = _rgbaOrHexString(r, g, b, a, hex);\n var t = MAX_COLOR_ALPHA - a;\n return { a: a, b: b, g: g, h: h, hex: hex, r: r, s: s, str: str, v: v, t: t };\n}\n//# sourceMappingURL=getColorFromRGBA.js.map","import { __assign } from \"tslib\";\nimport { cssColor } from './cssColor';\nimport { getColorFromRGBA } from './getColorFromRGBA';\n/**\n * Converts a CSS color string to a color object.\n * Note that hex colors *must* be prefixed with # to be considered valid.\n *\n * `inputColor` will be used unmodified as the `str` property of the returned object.\n * Alpha defaults to 100 if not specified in `inputColor`.\n * Returns undefined if the color string is invalid/not recognized.\n */\nexport function getColorFromString(inputColor) {\n var color = cssColor(inputColor);\n if (!color) {\n return;\n }\n return __assign(__assign({}, getColorFromRGBA(color)), { str: inputColor });\n}\n//# sourceMappingURL=getColorFromString.js.map","import { __assign } from \"tslib\";\nimport { _rgbaOrHexString } from './_rgbaOrHexString';\nimport { MAX_COLOR_ALPHA } from './consts';\n/**\n * Gets a color with the given alpha value and the same other components as `color`.\n * Does not modify the original color.\n */\nexport function updateA(color, a) {\n return __assign(__assign({}, color), { a: a, t: MAX_COLOR_ALPHA - a, str: _rgbaOrHexString(color.r, color.g, color.b, a, color.hex) });\n}\n//# sourceMappingURL=updateA.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { divProperties, getNativeProps } from '../../Utilities';\nimport { classNamesFunction } from '../../Utilities';\nvar getClassNames = classNamesFunction({\n // Label is used a lot by other components.\n // It's likely to see expected cases which pass different className to the Label.\n // Therefore setting a larger cache size.\n cacheSize: 100,\n});\nvar LabelBase = /** @class */ (function (_super) {\n __extends(LabelBase, _super);\n function LabelBase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n LabelBase.prototype.render = function () {\n var _a = this.props, _b = _a.as, RootType = _b === void 0 ? 'label' : _b, children = _a.children, className = _a.className, disabled = _a.disabled, styles = _a.styles, required = _a.required, theme = _a.theme;\n var classNames = getClassNames(styles, {\n className: className,\n disabled: disabled,\n required: required,\n theme: theme,\n });\n return (React.createElement(RootType, __assign({}, getNativeProps(this.props, divProperties), { className: classNames.root }), children));\n };\n return LabelBase;\n}(React.Component));\nexport { LabelBase };\n//# sourceMappingURL=Label.base.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, FontWeights, getHighContrastNoAdjustStyle } from '../../Styling';\nexport var getStyles = function (props) {\n var _a;\n var theme = props.theme, className = props.className, disabled = props.disabled, required = props.required;\n var semanticColors = theme.semanticColors;\n // Tokens\n var labelFontWeight = FontWeights.semibold;\n var labelColor = semanticColors.bodyText;\n var labelDisabledColor = semanticColors.disabledBodyText;\n var labelRequiredStarColor = semanticColors.errorText;\n return {\n root: [\n 'ms-Label',\n theme.fonts.medium,\n {\n fontWeight: labelFontWeight,\n color: labelColor,\n boxSizing: 'border-box',\n boxShadow: 'none',\n margin: 0,\n display: 'block',\n padding: '5px 0',\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n },\n disabled && {\n color: labelDisabledColor,\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ color: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _a),\n },\n required && {\n selectors: {\n '::after': {\n content: \"' *'\",\n color: labelRequiredStarColor,\n paddingRight: 12,\n },\n },\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=Label.styles.js.map","import { styled } from '../../Utilities';\nimport { LabelBase } from './Label.base';\nimport { getStyles } from './Label.styles';\nexport var Label = styled(LabelBase, getStyles, undefined, {\n scope: 'Label',\n});\n//# sourceMappingURL=Label.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Label } from '../../Label';\nimport { Icon } from '../../Icon';\nimport { Async, classNamesFunction, DelayedRender, getId, getNativeProps, getWindow, initializeComponentRef, inputProperties, isControlled, isIE11, textAreaProperties, warn, warnControlledUsage, warnMutuallyExclusive, } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nvar DEFAULT_STATE_VALUE = '';\nvar COMPONENT_NAME = 'TextField';\nvar REVEAL_ICON_NAME = 'RedEye';\nvar HIDE_ICON_NAME = 'Hide';\nvar TextFieldBase = /** @class */ (function (_super) {\n __extends(TextFieldBase, _super);\n function TextFieldBase(props) {\n var _this = _super.call(this, props) || this;\n _this._textElement = React.createRef();\n _this._onFocus = function (ev) {\n if (_this.props.onFocus) {\n _this.props.onFocus(ev);\n }\n _this.setState({ isFocused: true }, function () {\n if (_this.props.validateOnFocusIn) {\n _this._validate(_this.value);\n }\n });\n };\n _this._onBlur = function (ev) {\n if (_this.props.onBlur) {\n _this.props.onBlur(ev);\n }\n _this.setState({ isFocused: false }, function () {\n if (_this.props.validateOnFocusOut) {\n _this._validate(_this.value);\n }\n });\n };\n _this._onRenderLabel = function (props) {\n var label = props.label, required = props.required;\n // IProcessedStyleSet definition requires casting for what Label expects as its styles prop\n var labelStyles = _this._classNames.subComponentStyles\n ? _this._classNames.subComponentStyles.label\n : undefined;\n if (label) {\n return (React.createElement(Label, { required: required, htmlFor: _this._id, styles: labelStyles, disabled: props.disabled, id: _this._labelId }, props.label));\n }\n return null;\n };\n _this._onRenderDescription = function (props) {\n if (props.description) {\n return React.createElement(\"span\", { className: _this._classNames.description }, props.description);\n }\n return null;\n };\n _this._onRevealButtonClick = function (event) {\n _this.setState(function (prevState) { return ({ isRevealingPassword: !prevState.isRevealingPassword }); });\n };\n _this._onInputChange = function (event) {\n // Previously, we needed to call both onInput and onChange due to some weird IE/React issues,\n // which have *probably* been fixed now:\n // - https://github.com/microsoft/fluentui/issues/744 (likely fixed)\n // - https://github.com/microsoft/fluentui/issues/824 (confirmed fixed)\n var _a, _b;\n // TODO (Fabric 8?) - Switch to calling only onChange. This switch is pretty disruptive for\n // tests (ours and maybe consumers' too), so it seemed best to do the switch in a major bump.\n var element = event.target;\n var value = element.value;\n // Ignore this event if any of the following are true:\n // - the value is undefined (in case one of the IE bugs comes back)\n // - it's a duplicate event (important since onInputChange is called twice per actual user event)\n // - it's the same as the previous value\n var previousValue = _getValue(_this.props, _this.state) || '';\n if (value === undefined || value === _this._lastChangeValue || value === previousValue) {\n _this._lastChangeValue = undefined;\n return;\n }\n _this._lastChangeValue = value;\n (_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, event, value);\n if (!_this._isControlled) {\n // ONLY if this is an uncontrolled component, update the displayed value.\n // (Controlled components must update the `value` prop from `onChange`.)\n _this.setState({ uncontrolledValue: value });\n }\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n if (process.env.NODE_ENV !== 'production') {\n warnMutuallyExclusive(COMPONENT_NAME, props, {\n errorMessage: 'onGetErrorMessage',\n });\n }\n _this._fallbackId = getId(COMPONENT_NAME);\n _this._descriptionId = getId(COMPONENT_NAME + 'Description');\n _this._labelId = getId(COMPONENT_NAME + 'Label');\n _this._prefixId = getId(COMPONENT_NAME + 'Prefix');\n _this._suffixId = getId(COMPONENT_NAME + 'Suffix');\n _this._warnControlledUsage();\n var _a = props.defaultValue, defaultValue = _a === void 0 ? DEFAULT_STATE_VALUE : _a;\n if (typeof defaultValue === 'number') {\n // This isn't allowed per the props, but happens anyway.\n defaultValue = String(defaultValue);\n }\n _this.state = {\n uncontrolledValue: _this._isControlled ? undefined : defaultValue,\n isFocused: false,\n errorMessage: '',\n };\n _this._delayedValidate = _this._async.debounce(_this._validate, _this.props.deferredValidationTime);\n _this._lastValidation = 0;\n return _this;\n }\n Object.defineProperty(TextFieldBase.prototype, \"value\", {\n /**\n * Gets the current value of the text field.\n */\n get: function () {\n return _getValue(this.props, this.state);\n },\n enumerable: false,\n configurable: true\n });\n TextFieldBase.prototype.componentDidMount = function () {\n this._adjustInputHeight();\n if (this.props.validateOnLoad) {\n this._validate(this.value);\n }\n };\n TextFieldBase.prototype.componentWillUnmount = function () {\n this._async.dispose();\n };\n TextFieldBase.prototype.getSnapshotBeforeUpdate = function (prevProps, prevState) {\n return {\n selection: [this.selectionStart, this.selectionEnd],\n };\n };\n TextFieldBase.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {\n var props = this.props;\n var _a = (snapshot || {}).selection, selection = _a === void 0 ? [null, null] : _a;\n var start = selection[0], end = selection[1];\n if (!!prevProps.multiline !== !!props.multiline && prevState.isFocused) {\n // The text field has just changed between single- and multi-line, so we need to reset focus\n // and selection/cursor.\n this.focus();\n if (start !== null && end !== null && start >= 0 && end >= 0) {\n this.setSelectionRange(start, end);\n }\n }\n if (prevProps.value !== props.value) {\n // Only if the value in props changed, reset the record of the last value seen by a\n // change/input event (don't do this if the value in state changed, since at least in tests\n // the state update may happen before the second event in a series)\n this._lastChangeValue = undefined;\n }\n var prevValue = _getValue(prevProps, prevState);\n var value = this.value;\n if (prevValue !== value) {\n // Handle controlled/uncontrolled warnings and status\n this._warnControlledUsage(prevProps);\n // Clear error message if needed\n // TODO: is there any way to do this without an extra render?\n if (this.state.errorMessage && !props.errorMessage) {\n this.setState({ errorMessage: '' });\n }\n // Adjust height if needed based on new value\n this._adjustInputHeight();\n // TODO: #5875 added logic to trigger validation in componentWillReceiveProps and other places.\n // This seems a bit odd and hard to integrate with the new approach.\n // (Starting to think we should just put the validation logic in a separate wrapper component...?)\n if (_shouldValidateAllChanges(props)) {\n this._delayedValidate(value);\n }\n }\n };\n TextFieldBase.prototype.render = function () {\n var _a = this.props, borderless = _a.borderless, className = _a.className, disabled = _a.disabled, invalid = _a.invalid, iconProps = _a.iconProps, inputClassName = _a.inputClassName, label = _a.label, multiline = _a.multiline, required = _a.required, underlined = _a.underlined, prefix = _a.prefix, resizable = _a.resizable, suffix = _a.suffix, theme = _a.theme, styles = _a.styles, autoAdjustHeight = _a.autoAdjustHeight, canRevealPassword = _a.canRevealPassword, revealPasswordAriaLabel = _a.revealPasswordAriaLabel, type = _a.type, _b = _a.onRenderPrefix, onRenderPrefix = _b === void 0 ? this._onRenderPrefix : _b, _c = _a.onRenderSuffix, onRenderSuffix = _c === void 0 ? this._onRenderSuffix : _c, _d = _a.onRenderLabel, onRenderLabel = _d === void 0 ? this._onRenderLabel : _d, _e = _a.onRenderDescription, onRenderDescription = _e === void 0 ? this._onRenderDescription : _e;\n var _f = this.state, isFocused = _f.isFocused, isRevealingPassword = _f.isRevealingPassword;\n var errorMessage = this._errorMessage;\n var isInvalid = typeof invalid === 'boolean' ? invalid : !!errorMessage;\n var hasRevealButton = !!canRevealPassword && type === 'password' && _browserNeedsRevealButton();\n var classNames = (this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n disabled: disabled,\n focused: isFocused,\n required: required,\n multiline: multiline,\n hasLabel: !!label,\n hasErrorMessage: isInvalid,\n borderless: borderless,\n resizable: resizable,\n hasIcon: !!iconProps,\n underlined: underlined,\n inputClassName: inputClassName,\n autoAdjustHeight: autoAdjustHeight,\n hasRevealButton: hasRevealButton,\n }));\n return (\n // eslint-disable-next-line deprecation/deprecation\n React.createElement(\"div\", { ref: this.props.elementRef, className: classNames.root },\n React.createElement(\"div\", { className: classNames.wrapper },\n onRenderLabel(this.props, this._onRenderLabel),\n React.createElement(\"div\", { className: classNames.fieldGroup },\n (prefix !== undefined || this.props.onRenderPrefix) && (React.createElement(\"div\", { className: classNames.prefix, id: this._prefixId }, onRenderPrefix(this.props, this._onRenderPrefix))),\n multiline ? this._renderTextArea() : this._renderInput(),\n iconProps && React.createElement(Icon, __assign({ className: classNames.icon }, iconProps)),\n hasRevealButton && (\n // Explicitly set type=\"button\" since the default button type within a form is \"submit\"\n React.createElement(\"button\", { \"aria-label\": revealPasswordAriaLabel, className: classNames.revealButton, onClick: this._onRevealButtonClick, \"aria-pressed\": !!isRevealingPassword, type: \"button\" },\n React.createElement(\"span\", { className: classNames.revealSpan },\n React.createElement(Icon, { className: classNames.revealIcon, iconName: isRevealingPassword ? HIDE_ICON_NAME : REVEAL_ICON_NAME })))),\n (suffix !== undefined || this.props.onRenderSuffix) && (React.createElement(\"div\", { className: classNames.suffix, id: this._suffixId }, onRenderSuffix(this.props, this._onRenderSuffix))))),\n this._isDescriptionAvailable && (React.createElement(\"span\", { id: this._descriptionId },\n onRenderDescription(this.props, this._onRenderDescription),\n errorMessage && (React.createElement(\"div\", { role: \"alert\" },\n React.createElement(DelayedRender, null, this._renderErrorMessage())))))));\n };\n /**\n * Sets focus on the text field\n */\n TextFieldBase.prototype.focus = function () {\n if (this._textElement.current) {\n this._textElement.current.focus();\n }\n };\n /**\n * Blurs the text field.\n */\n TextFieldBase.prototype.blur = function () {\n if (this._textElement.current) {\n this._textElement.current.blur();\n }\n };\n /**\n * Selects the text field\n */\n TextFieldBase.prototype.select = function () {\n if (this._textElement.current) {\n this._textElement.current.select();\n }\n };\n /**\n * Sets the selection start of the text field to a specified value\n */\n TextFieldBase.prototype.setSelectionStart = function (value) {\n if (this._textElement.current) {\n this._textElement.current.selectionStart = value;\n }\n };\n /**\n * Sets the selection end of the text field to a specified value\n */\n TextFieldBase.prototype.setSelectionEnd = function (value) {\n if (this._textElement.current) {\n this._textElement.current.selectionEnd = value;\n }\n };\n Object.defineProperty(TextFieldBase.prototype, \"selectionStart\", {\n /**\n * Gets the selection start of the text field\n */\n get: function () {\n return this._textElement.current ? this._textElement.current.selectionStart : -1;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(TextFieldBase.prototype, \"selectionEnd\", {\n /**\n * Gets the selection end of the text field\n */\n get: function () {\n return this._textElement.current ? this._textElement.current.selectionEnd : -1;\n },\n enumerable: false,\n configurable: true\n });\n /**\n * Sets the start and end positions of a selection in a text field.\n * @param start - Index of the start of the selection.\n * @param end - Index of the end of the selection.\n */\n TextFieldBase.prototype.setSelectionRange = function (start, end) {\n if (this._textElement.current) {\n this._textElement.current.setSelectionRange(start, end);\n }\n };\n TextFieldBase.prototype._warnControlledUsage = function (prevProps) {\n // Show warnings if props are being used in an invalid way\n warnControlledUsage({\n componentId: this._id,\n componentName: COMPONENT_NAME,\n props: this.props,\n oldProps: prevProps,\n valueProp: 'value',\n defaultValueProp: 'defaultValue',\n onChangeProp: 'onChange',\n readOnlyProp: 'readOnly',\n });\n if (this.props.value === null && !this._hasWarnedNullValue) {\n this._hasWarnedNullValue = true;\n warn(\"Warning: 'value' prop on '\".concat(COMPONENT_NAME, \"' should not be null. Consider using an \") +\n 'empty string to clear the component or undefined to indicate an uncontrolled component.');\n }\n };\n Object.defineProperty(TextFieldBase.prototype, \"_id\", {\n /** Returns `props.id` if available, or a fallback if not. */\n get: function () {\n return this.props.id || this._fallbackId;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(TextFieldBase.prototype, \"_isControlled\", {\n get: function () {\n return isControlled(this.props, 'value');\n },\n enumerable: false,\n configurable: true\n });\n TextFieldBase.prototype._onRenderPrefix = function (props) {\n var prefix = props.prefix;\n return React.createElement(\"span\", { style: { paddingBottom: '1px' } }, prefix);\n };\n TextFieldBase.prototype._onRenderSuffix = function (props) {\n var suffix = props.suffix;\n return React.createElement(\"span\", { style: { paddingBottom: '1px' } }, suffix);\n };\n Object.defineProperty(TextFieldBase.prototype, \"_errorMessage\", {\n /**\n * Current error message from either `props.errorMessage` or the result of `props.onGetErrorMessage`.\n *\n * - If there is no validation error or we have not validated the input value, errorMessage is an empty string.\n * - If we have done the validation and there is validation error, errorMessage is the validation error message.\n */\n get: function () {\n var _a = this.props.errorMessage, errorMessage = _a === void 0 ? this.state.errorMessage : _a;\n return errorMessage || '';\n },\n enumerable: false,\n configurable: true\n });\n /**\n * Renders error message based on the type of the message.\n *\n * - If error message is string, it will render using the built in styles.\n * - If error message is an element, user has full control over how it's rendered.\n */\n TextFieldBase.prototype._renderErrorMessage = function () {\n var errorMessage = this._errorMessage;\n return errorMessage ? (typeof errorMessage === 'string' ? (React.createElement(\"p\", { className: this._classNames.errorMessage },\n React.createElement(\"span\", { \"data-automation-id\": \"error-message\" }, errorMessage))) : (React.createElement(\"div\", { className: this._classNames.errorMessage, \"data-automation-id\": \"error-message\" }, errorMessage))) : null;\n };\n Object.defineProperty(TextFieldBase.prototype, \"_isDescriptionAvailable\", {\n /**\n * If a custom description render function is supplied then treat description as always available.\n * Otherwise defer to the presence of description or error message text.\n */\n get: function () {\n var props = this.props;\n return !!(props.onRenderDescription || props.description || this._errorMessage);\n },\n enumerable: false,\n configurable: true\n });\n TextFieldBase.prototype._renderTextArea = function () {\n var _a = this.props.invalid, invalid = _a === void 0 ? !!this._errorMessage : _a;\n var textAreaProps = getNativeProps(this.props, textAreaProperties, ['defaultValue']);\n var ariaLabelledBy = this.props['aria-labelledby'] || (this.props.label ? this._labelId : undefined);\n return (React.createElement(\"textarea\", __assign({ id: this._id }, textAreaProps, { ref: this._textElement, value: this.value || '', onInput: this._onInputChange, onChange: this._onInputChange, className: this._classNames.field, \"aria-labelledby\": ariaLabelledBy, \"aria-describedby\": this._isDescriptionAvailable ? this._descriptionId : this.props['aria-describedby'], \"aria-invalid\": invalid, \"aria-label\": this.props.ariaLabel, readOnly: this.props.readOnly, onFocus: this._onFocus, onBlur: this._onBlur })));\n };\n TextFieldBase.prototype._renderInput = function () {\n var _a = this.props, ariaLabel = _a.ariaLabel, _b = _a.invalid, invalid = _b === void 0 ? !!this._errorMessage : _b, onRenderPrefix = _a.onRenderPrefix, onRenderSuffix = _a.onRenderSuffix, prefix = _a.prefix, suffix = _a.suffix, _c = _a.type, type = _c === void 0 ? 'text' : _c, label = _a.label;\n // build aria-labelledby list from label, prefix, and suffix\n var labelIds = [];\n label && labelIds.push(this._labelId);\n (prefix !== undefined || onRenderPrefix) && labelIds.push(this._prefixId);\n (suffix !== undefined || onRenderSuffix) && labelIds.push(this._suffixId);\n var inputProps = __assign(__assign({ type: this.state.isRevealingPassword ? 'text' : type, id: this._id }, getNativeProps(this.props, inputProperties, ['defaultValue', 'type'])), { 'aria-labelledby': this.props['aria-labelledby'] || (labelIds.length > 0 ? labelIds.join(' ') : undefined), ref: this._textElement, value: this.value || '', onInput: this._onInputChange, onChange: this._onInputChange, className: this._classNames.field, 'aria-label': ariaLabel, 'aria-describedby': this._isDescriptionAvailable ? this._descriptionId : this.props['aria-describedby'], 'aria-invalid': invalid, onFocus: this._onFocus, onBlur: this._onBlur });\n var defaultRender = function (updatedInputProps) {\n return React.createElement(\"input\", __assign({}, updatedInputProps));\n };\n var onRenderInput = this.props.onRenderInput || defaultRender;\n return onRenderInput(inputProps, defaultRender);\n };\n TextFieldBase.prototype._validate = function (value) {\n var _this = this;\n // In case _validate is called again while validation promise is executing\n if (this._latestValidateValue === value && _shouldValidateAllChanges(this.props)) {\n return;\n }\n this._latestValidateValue = value;\n var onGetErrorMessage = this.props.onGetErrorMessage;\n var result = onGetErrorMessage && onGetErrorMessage(value || '');\n if (result !== undefined) {\n if (typeof result === 'string' || !('then' in result)) {\n this.setState({ errorMessage: result });\n this._notifyAfterValidate(value, result);\n }\n else {\n var currentValidation_1 = ++this._lastValidation;\n result.then(function (errorMessage) {\n if (currentValidation_1 === _this._lastValidation) {\n _this.setState({ errorMessage: errorMessage });\n }\n _this._notifyAfterValidate(value, errorMessage);\n });\n }\n }\n else {\n this._notifyAfterValidate(value, '');\n }\n };\n TextFieldBase.prototype._notifyAfterValidate = function (value, errorMessage) {\n if (value === this.value && this.props.onNotifyValidationResult) {\n this.props.onNotifyValidationResult(errorMessage, value);\n }\n };\n TextFieldBase.prototype._adjustInputHeight = function () {\n if (this._textElement.current && this.props.autoAdjustHeight && this.props.multiline) {\n var textField = this._textElement.current;\n textField.style.height = '';\n textField.style.height = textField.scrollHeight + 'px';\n }\n };\n TextFieldBase.defaultProps = {\n resizable: true,\n deferredValidationTime: 200,\n validateOnLoad: true,\n };\n return TextFieldBase;\n}(React.Component));\nexport { TextFieldBase };\n/** Get the value from the given state and props (converting from number to string if needed) */\nfunction _getValue(props, state) {\n var _a = props.value, value = _a === void 0 ? state.uncontrolledValue : _a;\n if (typeof value === 'number') {\n // not allowed per typings, but happens anyway\n return String(value);\n }\n return value;\n}\n/**\n * If `validateOnFocusIn` or `validateOnFocusOut` is true, validation should run **only** on that event.\n * Otherwise, validation should run on every change.\n */\nfunction _shouldValidateAllChanges(props) {\n return !(props.validateOnFocusIn || props.validateOnFocusOut);\n}\n// Only calculate this once across all TextFields, since will stay the same\nvar __browserNeedsRevealButton;\nfunction _browserNeedsRevealButton() {\n if (typeof __browserNeedsRevealButton !== 'boolean') {\n var win = getWindow();\n if (win === null || win === void 0 ? void 0 : win.navigator) {\n // Edge, Chromium Edge\n var isEdge = /Edg/.test(win.navigator.userAgent || '');\n __browserNeedsRevealButton = !(isIE11() || isEdge);\n }\n else {\n __browserNeedsRevealButton = true;\n }\n }\n return __browserNeedsRevealButton;\n}\n//# sourceMappingURL=TextField.base.js.map","import { __assign } from \"tslib\";\nimport { AnimationClassNames, getFocusStyle, getGlobalClassNames, getInputFocusStyle, HighContrastSelector, normalize, getPlaceholderStyles, IconFontSizes, getHighContrastNoAdjustStyle, } from '../../Styling';\nvar globalClassNames = {\n root: 'ms-TextField',\n description: 'ms-TextField-description',\n errorMessage: 'ms-TextField-errorMessage',\n field: 'ms-TextField-field',\n fieldGroup: 'ms-TextField-fieldGroup',\n prefix: 'ms-TextField-prefix',\n suffix: 'ms-TextField-suffix',\n wrapper: 'ms-TextField-wrapper',\n revealButton: 'ms-TextField-reveal',\n multiline: 'ms-TextField--multiline',\n borderless: 'ms-TextField--borderless',\n underlined: 'ms-TextField--underlined',\n unresizable: 'ms-TextField--unresizable',\n required: 'is-required',\n disabled: 'is-disabled',\n active: 'is-active',\n};\nfunction getLabelStyles(props) {\n var underlined = props.underlined, disabled = props.disabled, focused = props.focused, theme = props.theme;\n var palette = theme.palette, fonts = theme.fonts;\n return function () {\n var _a;\n return ({\n root: [\n underlined &&\n disabled && {\n color: palette.neutralTertiary,\n },\n underlined && {\n fontSize: fonts.medium.fontSize,\n marginRight: 8,\n paddingLeft: 12,\n paddingRight: 0,\n lineHeight: '22px',\n height: 32,\n },\n underlined &&\n focused && {\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n height: 31, // -1px to prevent jumpiness in HC with the increased border-width to 2px\n },\n _a),\n },\n ],\n });\n };\n}\nexport function getStyles(props) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;\n var theme = props.theme, className = props.className, disabled = props.disabled, focused = props.focused, required = props.required, multiline = props.multiline, hasLabel = props.hasLabel, borderless = props.borderless, underlined = props.underlined, hasIcon = props.hasIcon, resizable = props.resizable, hasErrorMessage = props.hasErrorMessage, inputClassName = props.inputClassName, autoAdjustHeight = props.autoAdjustHeight, hasRevealButton = props.hasRevealButton;\n var semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;\n var classNames = getGlobalClassNames(globalClassNames, theme);\n var fieldPrefixSuffix = {\n // Suffix/Prefix are not editable so the disabled slot perfectly fits.\n background: semanticColors.disabledBackground,\n color: !disabled ? semanticColors.inputPlaceholderText : semanticColors.disabledText,\n display: 'flex',\n alignItems: 'center',\n padding: '0 10px',\n lineHeight: 1,\n whiteSpace: 'nowrap',\n flexShrink: 0,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n background: 'Window',\n color: disabled ? 'GrayText' : 'WindowText',\n },\n _a),\n };\n // placeholder style constants\n var placeholderStyles = [\n {\n color: semanticColors.inputPlaceholderText,\n opacity: 1,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'GrayText',\n },\n _b),\n },\n ];\n var disabledPlaceholderStyles = {\n color: semanticColors.disabledText,\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'GrayText',\n },\n _c),\n };\n return {\n root: [\n classNames.root,\n fonts.medium,\n required && classNames.required,\n disabled && classNames.disabled,\n focused && classNames.active,\n multiline && classNames.multiline,\n borderless && classNames.borderless,\n underlined && classNames.underlined,\n normalize,\n {\n position: 'relative',\n },\n className,\n ],\n wrapper: [\n classNames.wrapper,\n underlined && [\n {\n display: 'flex',\n borderBottom: \"1px solid \".concat(!hasErrorMessage ? semanticColors.inputBorder : semanticColors.errorText),\n width: '100%',\n },\n disabled && {\n borderBottomColor: semanticColors.disabledBackground,\n selectors: (_d = {},\n _d[HighContrastSelector] = __assign({ borderColor: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _d),\n },\n !disabled && {\n selectors: {\n ':hover': {\n borderBottomColor: !hasErrorMessage ? semanticColors.inputBorderHovered : semanticColors.errorText,\n selectors: (_e = {},\n _e[HighContrastSelector] = __assign({ borderBottomColor: 'Highlight' }, getHighContrastNoAdjustStyle()),\n _e),\n },\n },\n },\n focused && [\n {\n position: 'relative',\n },\n getInputFocusStyle(!hasErrorMessage ? semanticColors.inputFocusBorderAlt : semanticColors.errorText, 0, 'borderBottom'),\n ],\n ],\n ],\n fieldGroup: [\n classNames.fieldGroup,\n normalize,\n {\n border: \"1px solid \".concat(semanticColors.inputBorder),\n borderRadius: effects.roundedCorner2,\n background: semanticColors.inputBackground,\n cursor: 'text',\n height: 32,\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'stretch',\n position: 'relative',\n },\n multiline && {\n minHeight: '60px',\n height: 'auto',\n display: 'flex',\n },\n !focused &&\n !disabled && {\n selectors: {\n ':hover': {\n borderColor: semanticColors.inputBorderHovered,\n selectors: (_f = {},\n _f[HighContrastSelector] = __assign({ borderColor: 'Highlight' }, getHighContrastNoAdjustStyle()),\n _f),\n },\n },\n },\n focused &&\n !underlined &&\n getInputFocusStyle(!hasErrorMessage ? semanticColors.inputFocusBorderAlt : semanticColors.errorText, effects.roundedCorner2),\n disabled && {\n borderColor: semanticColors.disabledBackground,\n selectors: (_g = {},\n _g[HighContrastSelector] = __assign({ borderColor: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _g),\n cursor: 'default',\n },\n borderless && {\n border: 'none',\n },\n borderless &&\n focused && {\n border: 'none',\n selectors: {\n ':after': {\n border: 'none',\n },\n },\n },\n underlined && {\n flex: '1 1 0px',\n border: 'none',\n textAlign: 'left',\n },\n underlined &&\n disabled && {\n backgroundColor: 'transparent',\n },\n hasErrorMessage &&\n !underlined && {\n borderColor: semanticColors.errorText,\n selectors: {\n '&:hover': {\n borderColor: semanticColors.errorText,\n },\n },\n },\n !hasLabel &&\n required && {\n selectors: (_h = {\n ':before': {\n content: \"'*'\",\n color: semanticColors.errorText,\n position: 'absolute',\n top: -5,\n right: -10,\n }\n },\n _h[HighContrastSelector] = {\n selectors: {\n ':before': {\n color: 'WindowText',\n right: -14, // moving the * 4 pixel to right to alleviate border clipping in HC mode.\n },\n },\n },\n _h),\n },\n ],\n field: [\n fonts.medium,\n classNames.field,\n normalize,\n {\n borderRadius: 0,\n border: 'none',\n background: 'none',\n backgroundColor: 'transparent',\n color: semanticColors.inputText,\n padding: '0 8px',\n width: '100%',\n minWidth: 0,\n textOverflow: 'ellipsis',\n outline: 0,\n selectors: (_j = {\n '&:active, &:focus, &:hover': { outline: 0 },\n '::-ms-clear': {\n display: 'none',\n }\n },\n _j[HighContrastSelector] = {\n background: 'Window',\n color: disabled ? 'GrayText' : 'WindowText',\n },\n _j),\n },\n getPlaceholderStyles(placeholderStyles),\n multiline &&\n !resizable && [\n classNames.unresizable,\n {\n resize: 'none',\n },\n ],\n multiline && {\n minHeight: 'inherit',\n lineHeight: 17,\n flexGrow: 1,\n paddingTop: 6,\n paddingBottom: 6,\n overflow: 'auto',\n width: '100%',\n },\n multiline &&\n autoAdjustHeight && {\n overflow: 'hidden',\n },\n hasIcon &&\n !hasRevealButton && {\n paddingRight: 24,\n },\n multiline &&\n hasIcon && {\n paddingRight: 40,\n },\n disabled && [\n {\n backgroundColor: semanticColors.disabledBackground,\n color: semanticColors.disabledText,\n borderColor: semanticColors.disabledBackground,\n },\n getPlaceholderStyles(disabledPlaceholderStyles),\n ],\n underlined && {\n textAlign: 'left',\n },\n focused &&\n !borderless && {\n selectors: (_k = {},\n _k[HighContrastSelector] = {\n paddingLeft: 11,\n paddingRight: 11,\n },\n _k),\n },\n focused &&\n multiline &&\n !borderless && {\n selectors: (_l = {},\n _l[HighContrastSelector] = {\n paddingTop: 4, // take into consideration the 2px increased border-width (not when borderless).\n },\n _l),\n },\n inputClassName,\n ],\n icon: [\n multiline && {\n paddingRight: 24,\n alignItems: 'flex-end',\n },\n {\n pointerEvents: 'none',\n position: 'absolute',\n bottom: 6,\n right: 8,\n top: 'auto',\n fontSize: IconFontSizes.medium,\n lineHeight: 18,\n },\n disabled && {\n color: semanticColors.disabledText,\n },\n ],\n description: [\n classNames.description,\n {\n color: semanticColors.bodySubtext,\n fontSize: fonts.xSmall.fontSize,\n },\n ],\n errorMessage: [\n classNames.errorMessage,\n AnimationClassNames.slideDownIn20,\n fonts.small,\n {\n color: semanticColors.errorText,\n margin: 0,\n paddingTop: 5,\n display: 'flex',\n alignItems: 'center',\n },\n ],\n prefix: [classNames.prefix, fieldPrefixSuffix],\n suffix: [classNames.suffix, fieldPrefixSuffix],\n revealButton: [\n classNames.revealButton,\n 'ms-Button',\n 'ms-Button--icon',\n getFocusStyle(theme, { inset: 1 }),\n {\n height: 30,\n width: 32,\n border: 'none',\n padding: '0px 4px',\n backgroundColor: 'transparent',\n color: semanticColors.link,\n selectors: {\n ':hover': {\n outline: 0,\n color: semanticColors.primaryButtonBackgroundHovered,\n backgroundColor: semanticColors.buttonBackgroundHovered,\n selectors: (_m = {},\n _m[HighContrastSelector] = {\n borderColor: 'Highlight',\n color: 'Highlight',\n },\n _m),\n },\n ':focus': { outline: 0 },\n },\n },\n hasIcon && {\n marginRight: 28,\n },\n ],\n revealSpan: {\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n },\n revealIcon: {\n margin: '0px 4px',\n pointerEvents: 'none',\n bottom: 6,\n right: 8,\n top: 'auto',\n fontSize: IconFontSizes.medium,\n lineHeight: 18,\n },\n subComponentStyles: {\n label: getLabelStyles(props),\n },\n };\n}\n//# sourceMappingURL=TextField.styles.js.map","import { styled } from '../../Utilities';\nimport { TextFieldBase } from './TextField.base';\nimport { getStyles } from './TextField.styles';\nexport var TextField = styled(TextFieldBase, getStyles, undefined, {\n scope: 'TextField',\n});\n//# sourceMappingURL=TextField.js.map","export var DEFAULT_MASK_FORMAT_CHARS = {\n '9': /[0-9]/,\n a: /[a-zA-Z]/,\n '*': /[a-zA-Z0-9]/,\n};\n/**\n * Takes in the mask string and the formatCharacters and returns an array of MaskValues\n * Example:\n * mask = 'Phone Number: (999) - 9999'\n * return = [\n * { value: undefined, displayIndex: 16, format: /[0-9]/ },\n * { value: undefined, displayIndex: 17, format: /[0-9]/ },\n * { value: undefined, displayIndex: 18, format: /[0-9]/ },\n * { value: undefined, displayIndex: 22, format: /[0-9]/ },\n * ]\n *\n * @param mask The string use to define the format of the displayed maskedValue.\n * @param formatChars An object defining how certain characters in the mask should accept input.\n */\nexport function parseMask(mask, formatChars) {\n if (formatChars === void 0) { formatChars = DEFAULT_MASK_FORMAT_CHARS; }\n if (!mask) {\n return [];\n }\n var maskCharData = [];\n // Count the escape characters in the mask string.\n var escapedChars = 0;\n for (var i = 0; i + escapedChars < mask.length; i++) {\n var maskChar = mask.charAt(i + escapedChars);\n if (maskChar === '\\\\') {\n escapedChars++;\n }\n else {\n // Check if the maskChar is a format character.\n var maskFormat = formatChars[maskChar];\n if (maskFormat) {\n maskCharData.push({\n /**\n * Do not add escapedChars to the displayIndex.\n * The index refers to a position in the mask's displayValue.\n * Since the backslashes don't appear in the displayValue,\n * we do not add them to the charData displayIndex.\n */\n displayIndex: i,\n format: maskFormat,\n });\n }\n }\n }\n return maskCharData;\n}\n/**\n * Takes in the mask string, an array of MaskValues, and the maskCharacter\n * returns the mask string formatted with the input values and maskCharacter.\n * If the maskChar is undefined, the maskDisplay is truncated to the last filled format character.\n * Example:\n * mask = 'Phone Number: (999) 999 - 9999'\n * maskCharData = '12345'\n * maskChar = '_'\n * return = 'Phone Number: (123) 45_ - ___'\n *\n * Example:\n * mask = 'Phone Number: (999) 999 - 9999'\n * value = '12345'\n * maskChar = undefined\n * return = 'Phone Number: (123) 45'\n *\n * @param mask The string use to define the format of the displayed maskedValue.\n * @param maskCharData The input values to insert into the mask string for displaying.\n * @param maskChar? A character to display in place of unfilled mask format characters.\n */\nexport function getMaskDisplay(mask, maskCharData, maskChar) {\n var maskDisplay = mask;\n if (!maskDisplay) {\n return '';\n }\n // Remove all backslashes\n maskDisplay = maskDisplay.replace(/\\\\/g, '');\n // lastDisplayIndex is is used to truncate the string if necessary.\n var lastDisplayIndex = 0;\n if (maskCharData.length > 0) {\n lastDisplayIndex = maskCharData[0].displayIndex - 1;\n }\n /**\n * For each input value, replace the character in the maskDisplay with the value.\n * If there is no value set for the format character, use the maskChar.\n */\n for (var _i = 0, maskCharData_1 = maskCharData; _i < maskCharData_1.length; _i++) {\n var charData = maskCharData_1[_i];\n var nextChar = ' ';\n if (charData.value) {\n nextChar = charData.value;\n if (charData.displayIndex > lastDisplayIndex) {\n lastDisplayIndex = charData.displayIndex;\n }\n }\n else {\n if (maskChar) {\n nextChar = maskChar;\n }\n }\n // Insert the character into the maskdisplay at its corresponding index\n maskDisplay = maskDisplay.slice(0, charData.displayIndex) + nextChar + maskDisplay.slice(charData.displayIndex + 1);\n }\n // Cut off all mask characters after the last filled format value\n if (!maskChar) {\n maskDisplay = maskDisplay.slice(0, lastDisplayIndex + 1);\n }\n return maskDisplay;\n}\n/**\n * Get the next format index right of or at a specified index.\n * If no index exists, returns the rightmost index.\n * @param maskCharData\n * @param index\n */\nexport function getRightFormatIndex(maskCharData, index) {\n for (var i = 0; i < maskCharData.length; i++) {\n if (maskCharData[i].displayIndex >= index) {\n return maskCharData[i].displayIndex;\n }\n }\n return maskCharData[maskCharData.length - 1].displayIndex;\n}\n/**\n * Get the next format index left of a specified index.\n * If no index exists, returns the leftmost index.\n * @param maskCharData\n * @param index\n */\nexport function getLeftFormatIndex(maskCharData, index) {\n for (var i = maskCharData.length - 1; i >= 0; i--) {\n if (maskCharData[i].displayIndex < index) {\n return maskCharData[i].displayIndex;\n }\n }\n return maskCharData[0].displayIndex;\n}\n/**\n * Deletes all values in maskCharData with a displayIndex that falls inside the specified range.\n * maskCharData is modified inline and also returned.\n * @param maskCharData\n * @param selectionStart\n * @param selectionCount\n */\nexport function clearRange(maskCharData, selectionStart, selectionCount) {\n for (var i = 0; i < maskCharData.length; i++) {\n if (maskCharData[i].displayIndex >= selectionStart) {\n if (maskCharData[i].displayIndex >= selectionStart + selectionCount) {\n break;\n }\n maskCharData[i].value = undefined;\n }\n }\n return maskCharData;\n}\n/**\n * Deletes the input character at or after a specified index and returns the new array of charData\n * maskCharData is modified inline and also returned.\n * @param maskCharData\n * @param selectionStart\n */\nexport function clearNext(maskCharData, selectionStart) {\n for (var i = 0; i < maskCharData.length; i++) {\n if (maskCharData[i].displayIndex >= selectionStart) {\n maskCharData[i].value = undefined;\n break;\n }\n }\n return maskCharData;\n}\n/**\n * Deletes the input character before a specified index and returns the new array of charData\n * maskCharData is modified inline and also returned.\n * @param maskCharData\n * @param selectionStart\n */\nexport function clearPrev(maskCharData, selectionStart) {\n for (var i = maskCharData.length - 1; i >= 0; i--) {\n if (maskCharData[i].displayIndex < selectionStart) {\n maskCharData[i].value = undefined;\n break;\n }\n }\n return maskCharData;\n}\n/**\n * Deletes all values in maskCharData with a displayIndex that falls inside the specified range.\n * Modifies the maskCharData inplace with the passed string and returns the display index of the\n * next format character after the inserted string.\n * @param maskCharData\n * @param selectionStart\n * @param selectionCount\n * @return The displayIndex of the next format character\n */\nexport function insertString(maskCharData, selectionStart, newString) {\n var stringIndex = 0;\n var nextIndex = 0;\n var isStringInserted = false;\n // Iterate through _maskCharData finding values with a displayIndex after the specified range start\n for (var i = 0; i < maskCharData.length && stringIndex < newString.length; i++) {\n if (maskCharData[i].displayIndex >= selectionStart) {\n isStringInserted = true;\n nextIndex = maskCharData[i].displayIndex;\n // Find the next character in the newString that matches the format\n while (stringIndex < newString.length) {\n // If the character matches the format regexp, set the maskCharData to the new character\n if (maskCharData[i].format.test(newString.charAt(stringIndex))) {\n maskCharData[i].value = newString.charAt(stringIndex++);\n // Set the nextIndex to the display index of the next mask format character.\n if (i + 1 < maskCharData.length) {\n nextIndex = maskCharData[i + 1].displayIndex;\n }\n else {\n nextIndex++;\n }\n break;\n }\n stringIndex++;\n }\n }\n }\n return isStringInserted ? nextIndex : selectionStart;\n}\n//# sourceMappingURL=inputMask.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { TextField } from '../TextField';\nimport { KeyCodes } from '../../../Utilities';\nimport { clearNext, clearPrev, clearRange, DEFAULT_MASK_FORMAT_CHARS, getLeftFormatIndex, getMaskDisplay, getRightFormatIndex, insertString, parseMask, } from './inputMask';\nimport { useConst, useIsomorphicLayoutEffect } from '@fluentui/react-hooks';\nvar COMPONENT_NAME = 'MaskedTextField';\nvar useComponentRef = function (componentRef, internalState, textField) {\n React.useImperativeHandle(componentRef, function () { return ({\n get value() {\n var value = '';\n for (var i = 0; i < internalState.maskCharData.length; i++) {\n if (!internalState.maskCharData[i].value) {\n return undefined;\n }\n value += internalState.maskCharData[i].value;\n }\n return value;\n },\n get selectionStart() {\n return textField.current && textField.current.selectionStart !== null ? textField.current.selectionStart : -1;\n },\n get selectionEnd() {\n return textField.current && textField.current.selectionEnd ? textField.current.selectionEnd : -1;\n },\n focus: function () {\n textField.current && textField.current.focus();\n },\n blur: function () {\n textField.current && textField.current.blur();\n },\n select: function () {\n textField.current && textField.current.select();\n },\n setSelectionStart: function (value) {\n textField.current && textField.current.setSelectionStart(value);\n },\n setSelectionEnd: function (value) {\n textField.current && textField.current.setSelectionEnd(value);\n },\n setSelectionRange: function (start, end) {\n textField.current && textField.current.setSelectionRange(start, end);\n },\n }); }, [internalState, textField]);\n};\nexport var DEFAULT_MASK_CHAR = '_';\nexport var MaskedTextField = React.forwardRef(function (props, ref) {\n var textField = React.useRef(null);\n var componentRef = props.componentRef, onFocus = props.onFocus, onBlur = props.onBlur, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, onChange = props.onChange, onPaste = props.onPaste, onKeyDown = props.onKeyDown, mask = props.mask, _a = props.maskChar, maskChar = _a === void 0 ? DEFAULT_MASK_CHAR : _a, _b = props.maskFormat, maskFormat = _b === void 0 ? DEFAULT_MASK_FORMAT_CHARS : _b, value = props.value;\n var internalState = useConst(function () { return ({\n maskCharData: parseMask(mask, maskFormat),\n isFocused: false,\n moveCursorOnMouseUp: false,\n changeSelectionData: null,\n }); });\n /** The index into the rendered value of the first unfilled format character */\n var _c = React.useState(), maskCursorPosition = _c[0], setMaskCursorPosition = _c[1];\n /**\n * The mask string formatted with the input value.\n * This is what is displayed inside the TextField\n * @example\n * `Phone Number: 12_ - 4___`\n */\n var _d = React.useState(function () {\n return getMaskDisplay(mask, internalState.maskCharData, maskChar);\n }), displayValue = _d[0], setDisplayValue = _d[1];\n var setValue = React.useCallback(function (newValue) {\n var valueIndex = 0;\n var charDataIndex = 0;\n while (valueIndex < newValue.length && charDataIndex < internalState.maskCharData.length) {\n // Test if the next character in the new value fits the next format character\n var testVal = newValue[valueIndex];\n if (internalState.maskCharData[charDataIndex].format.test(testVal)) {\n internalState.maskCharData[charDataIndex].value = testVal;\n charDataIndex++;\n }\n valueIndex++;\n }\n }, [internalState]);\n var handleFocus = React.useCallback(function (ev) {\n onFocus === null || onFocus === void 0 ? void 0 : onFocus(ev);\n internalState.isFocused = true;\n // Move the cursor position to the leftmost unfilled position\n for (var i = 0; i < internalState.maskCharData.length; i++) {\n if (!internalState.maskCharData[i].value) {\n setMaskCursorPosition(internalState.maskCharData[i].displayIndex);\n break;\n }\n }\n }, [internalState, onFocus]);\n var handleBlur = React.useCallback(function (ev) {\n onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);\n internalState.isFocused = false;\n internalState.moveCursorOnMouseUp = true;\n }, [internalState, onBlur]);\n var handleMouseDown = React.useCallback(function (ev) {\n onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(ev);\n if (!internalState.isFocused) {\n internalState.moveCursorOnMouseUp = true;\n }\n }, [internalState, onMouseDown]);\n var handleMouseUp = React.useCallback(function (ev) {\n onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(ev);\n // Move the cursor on mouseUp after focusing the textField\n if (internalState.moveCursorOnMouseUp) {\n internalState.moveCursorOnMouseUp = false;\n // Move the cursor position to the rightmost unfilled position\n for (var i = 0; i < internalState.maskCharData.length; i++) {\n if (!internalState.maskCharData[i].value) {\n setMaskCursorPosition(internalState.maskCharData[i].displayIndex);\n break;\n }\n }\n }\n }, [internalState, onMouseUp]);\n var handleInputChange = React.useCallback(function (ev, inputValue) {\n if (internalState.changeSelectionData === null && textField.current) {\n internalState.changeSelectionData = {\n changeType: 'default',\n selectionStart: textField.current.selectionStart !== null ? textField.current.selectionStart : -1,\n selectionEnd: textField.current.selectionEnd !== null ? textField.current.selectionEnd : -1,\n };\n }\n if (!internalState.changeSelectionData) {\n return;\n }\n // The initial value of cursorPos does not matter\n var cursorPos = 0;\n var _a = internalState.changeSelectionData, changeType = _a.changeType, selectionStart = _a.selectionStart, selectionEnd = _a.selectionEnd;\n if (changeType === 'textPasted') {\n var charsSelected = selectionEnd - selectionStart;\n var charCount = inputValue.length + charsSelected - displayValue.length;\n var startPos = selectionStart;\n // eslint-disable-next-line deprecation/deprecation\n var pastedString = inputValue.substr(startPos, charCount);\n // Clear any selected characters\n if (charsSelected) {\n internalState.maskCharData = clearRange(internalState.maskCharData, selectionStart, charsSelected);\n }\n cursorPos = insertString(internalState.maskCharData, startPos, pastedString);\n }\n else if (changeType === 'delete' || changeType === 'backspace') {\n // isDel is true If the characters are removed LTR, otherwise RTL\n var isDel = changeType === 'delete';\n var charCount = selectionEnd - selectionStart;\n if (charCount) {\n // charCount is > 0 if range was deleted\n internalState.maskCharData = clearRange(internalState.maskCharData, selectionStart, charCount);\n cursorPos = getRightFormatIndex(internalState.maskCharData, selectionStart);\n }\n else {\n // If charCount === 0, there was no selection and a single character was deleted\n if (isDel) {\n internalState.maskCharData = clearNext(internalState.maskCharData, selectionStart);\n cursorPos = getRightFormatIndex(internalState.maskCharData, selectionStart);\n }\n else {\n internalState.maskCharData = clearPrev(internalState.maskCharData, selectionStart);\n cursorPos = getLeftFormatIndex(internalState.maskCharData, selectionStart);\n }\n }\n }\n else if (inputValue.length > displayValue.length) {\n // This case is if the user added characters\n var charCount = inputValue.length - displayValue.length;\n var startPos = selectionEnd - charCount;\n // eslint-disable-next-line deprecation/deprecation\n var enteredString = inputValue.substr(startPos, charCount);\n cursorPos = insertString(internalState.maskCharData, startPos, enteredString);\n }\n else if (inputValue.length <= displayValue.length) {\n /**\n * This case is reached only if the user has selected a block of 1 or more\n * characters and input a character replacing the characters they've selected.\n */\n var charCount = 1;\n var selectCount = displayValue.length + charCount - inputValue.length;\n var startPos = selectionEnd - charCount;\n // eslint-disable-next-line deprecation/deprecation\n var enteredString = inputValue.substr(startPos, charCount);\n // Clear the selected range\n internalState.maskCharData = clearRange(internalState.maskCharData, startPos, selectCount);\n // Insert the printed character\n cursorPos = insertString(internalState.maskCharData, startPos, enteredString);\n }\n internalState.changeSelectionData = null;\n var newValue = getMaskDisplay(mask, internalState.maskCharData, maskChar);\n setDisplayValue(newValue);\n setMaskCursorPosition(cursorPos);\n // Perform onChange after input has been processed. Return value is expected to be the displayed text\n onChange === null || onChange === void 0 ? void 0 : onChange(ev, newValue);\n }, [displayValue.length, internalState, mask, maskChar, onChange]);\n var handleKeyDown = React.useCallback(function (ev) {\n onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);\n internalState.changeSelectionData = null;\n if (textField.current && textField.current.value) {\n // eslint-disable-next-line deprecation/deprecation\n var keyCode = ev.keyCode, ctrlKey = ev.ctrlKey, metaKey = ev.metaKey;\n // Ignore ctrl and meta keydown\n if (ctrlKey || metaKey) {\n return;\n }\n // On backspace or delete, store the selection and the keyCode\n if (keyCode === KeyCodes.backspace || keyCode === KeyCodes.del) {\n var selectionStart = ev.target.selectionStart;\n var selectionEnd = ev.target.selectionEnd;\n // Check if backspace or delete press is valid.\n if (!(keyCode === KeyCodes.backspace && selectionEnd && selectionEnd > 0) &&\n !(keyCode === KeyCodes.del && selectionStart !== null && selectionStart < textField.current.value.length)) {\n return;\n }\n internalState.changeSelectionData = {\n changeType: keyCode === KeyCodes.backspace ? 'backspace' : 'delete',\n selectionStart: selectionStart !== null ? selectionStart : -1,\n selectionEnd: selectionEnd !== null ? selectionEnd : -1,\n };\n }\n }\n }, [internalState, onKeyDown]);\n var handlePaste = React.useCallback(function (ev) {\n onPaste === null || onPaste === void 0 ? void 0 : onPaste(ev);\n var selectionStart = ev.target.selectionStart;\n var selectionEnd = ev.target.selectionEnd;\n // Store the paste selection range\n internalState.changeSelectionData = {\n changeType: 'textPasted',\n selectionStart: selectionStart !== null ? selectionStart : -1,\n selectionEnd: selectionEnd !== null ? selectionEnd : -1,\n };\n }, [internalState, onPaste]);\n // Updates the display value if mask or value props change.\n React.useEffect(function () {\n internalState.maskCharData = parseMask(mask, maskFormat);\n value !== undefined && setValue(value);\n setDisplayValue(getMaskDisplay(mask, internalState.maskCharData, maskChar));\n // eslint-disable-next-line react-hooks/exhaustive-deps -- Should only update when mask or value changes.\n }, [mask, value]);\n // Run before browser paint to avoid flickering from selection reset.\n useIsomorphicLayoutEffect(function () {\n // Move the cursor to position before paint.\n if (maskCursorPosition !== undefined && textField.current) {\n textField.current.setSelectionRange(maskCursorPosition, maskCursorPosition);\n }\n }, [maskCursorPosition]);\n // Run after browser paint.\n React.useEffect(function () {\n // Move the cursor to the start of the mask format after values update.\n if (internalState.isFocused && maskCursorPosition !== undefined && textField.current) {\n textField.current.setSelectionRange(maskCursorPosition, maskCursorPosition);\n }\n });\n useComponentRef(componentRef, internalState, textField);\n return (React.createElement(TextField, __assign({}, props, { elementRef: ref, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onChange: handleInputChange, onKeyDown: handleKeyDown, onPaste: handlePaste, value: displayValue || '', componentRef: textField })));\n});\nMaskedTextField.displayName = COMPONENT_NAME;\n//# sourceMappingURL=MaskedTextField.js.map","/**\n * {@docCategory Dialog}\n */\nexport var DialogType;\n(function (DialogType) {\n /** Standard dialog */\n DialogType[DialogType[\"normal\"] = 0] = \"normal\";\n /** Dialog with large header banner */\n DialogType[DialogType[\"largeHeader\"] = 1] = \"largeHeader\";\n /** Dialog with an 'x' close button in the upper-right corner */\n DialogType[DialogType[\"close\"] = 2] = \"close\";\n})(DialogType || (DialogType = {}));\n//# sourceMappingURL=DialogContent.types.js.map","import { AnimationVariables, getGlobalClassNames, ZIndexes } from '../../Styling';\nexport var animationDuration = AnimationVariables.durationValue2;\nvar globalClassNames = {\n root: 'ms-Modal',\n main: 'ms-Dialog-main',\n scrollableContent: 'ms-Modal-scrollableContent',\n isOpen: 'is-open',\n layer: 'ms-Modal-Layer',\n};\nexport var getStyles = function (props) {\n var _a;\n var className = props.className, containerClassName = props.containerClassName, scrollableContentClassName = props.scrollableContentClassName, isOpen = props.isOpen, isVisible = props.isVisible, hasBeenOpened = props.hasBeenOpened, modalRectangleTop = props.modalRectangleTop, theme = props.theme, topOffsetFixed = props.topOffsetFixed, isModeless = props.isModeless, layerClassName = props.layerClassName, isDefaultDragHandle = props.isDefaultDragHandle, windowInnerHeight = props.windowInnerHeight;\n var palette = theme.palette, effects = theme.effects, fonts = theme.fonts;\n var classNames = getGlobalClassNames(globalClassNames, theme);\n return {\n root: [\n classNames.root,\n fonts.medium,\n {\n backgroundColor: 'transparent',\n position: 'fixed',\n height: '100%',\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n opacity: 0,\n pointerEvents: 'none',\n transition: \"opacity \".concat(animationDuration),\n },\n topOffsetFixed &&\n typeof modalRectangleTop === 'number' &&\n hasBeenOpened && {\n alignItems: 'flex-start',\n },\n isOpen && classNames.isOpen,\n isVisible && {\n opacity: 1,\n },\n isVisible &&\n !isModeless && {\n pointerEvents: 'auto',\n },\n className,\n ],\n main: [\n classNames.main,\n {\n boxShadow: effects.elevation64,\n borderRadius: effects.roundedCorner2,\n backgroundColor: palette.white,\n boxSizing: 'border-box',\n position: 'relative',\n textAlign: 'left',\n outline: '3px solid transparent',\n maxHeight: 'calc(100% - 32px)',\n maxWidth: 'calc(100% - 32px)',\n minHeight: '176px',\n minWidth: '288px',\n overflowY: 'auto',\n zIndex: isModeless ? ZIndexes.Layer : undefined,\n },\n isModeless && {\n pointerEvents: 'auto',\n },\n topOffsetFixed &&\n typeof modalRectangleTop === 'number' &&\n hasBeenOpened && {\n top: modalRectangleTop,\n },\n isDefaultDragHandle && {\n cursor: 'move',\n },\n containerClassName,\n ],\n scrollableContent: [\n classNames.scrollableContent,\n {\n overflowY: 'auto',\n flexGrow: 1,\n maxHeight: '100vh',\n selectors: (_a = {},\n _a['@supports (-webkit-overflow-scrolling: touch)'] = {\n maxHeight: windowInnerHeight,\n },\n _a),\n },\n scrollableContentClassName,\n ],\n layer: isModeless && [layerClassName, classNames.layer, { pointerEvents: 'none' }],\n keyboardMoveIconContainer: {\n position: 'absolute',\n display: 'flex',\n justifyContent: 'center',\n width: '100%',\n padding: '3px 0px',\n },\n keyboardMoveIcon: {\n // eslint-disable-next-line deprecation/deprecation\n fontSize: fonts.xLargePlus.fontSize,\n width: '24px',\n },\n };\n};\n//# sourceMappingURL=Modal.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, getNativeProps, divProperties, enableBodyScroll, disableBodyScroll, initializeComponentRef, } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nvar OverlayBase = /** @class */ (function (_super) {\n __extends(OverlayBase, _super);\n function OverlayBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n var _a = _this.props.allowTouchBodyScroll, allowTouchBodyScroll = _a === void 0 ? false : _a;\n _this._allowTouchBodyScroll = allowTouchBodyScroll;\n return _this;\n }\n OverlayBase.prototype.componentDidMount = function () {\n !this._allowTouchBodyScroll && disableBodyScroll();\n };\n OverlayBase.prototype.componentWillUnmount = function () {\n !this._allowTouchBodyScroll && enableBodyScroll();\n };\n OverlayBase.prototype.render = function () {\n var _a = this.props, isDark = _a.isDarkThemed, className = _a.className, theme = _a.theme, styles = _a.styles;\n var divProps = getNativeProps(this.props, divProperties);\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n isDark: isDark,\n });\n return React.createElement(\"div\", __assign({}, divProps, { className: classNames.root }));\n };\n return OverlayBase;\n}(React.Component));\nexport { OverlayBase };\n//# sourceMappingURL=Overlay.base.js.map","import { HighContrastSelector, getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Overlay',\n rootDark: 'ms-Overlay--dark',\n};\nexport var getStyles = function (props) {\n var _a;\n var className = props.className, theme = props.theme, isNone = props.isNone, isDark = props.isDark;\n var palette = theme.palette;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n backgroundColor: palette.whiteTranslucent40,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n position: 'absolute',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n border: '1px solid WindowText',\n opacity: 0,\n },\n _a),\n },\n isNone && {\n visibility: 'hidden',\n },\n isDark && [\n classNames.rootDark,\n {\n backgroundColor: palette.blackTranslucent40,\n },\n ],\n className,\n ],\n };\n};\n//# sourceMappingURL=Overlay.styles.js.map","import { styled } from '../../Utilities';\nimport { OverlayBase } from './Overlay.base';\nimport { getStyles } from './Overlay.styles';\nexport var Overlay = styled(OverlayBase, getStyles, undefined, {\n scope: 'Overlay',\n});\n//# sourceMappingURL=Overlay.js.map","import { memoizeFunction } from '../../Utilities';\nimport { mergeStyles } from '../../Styling';\nexport var getClassNames = memoizeFunction(function (className, isDragging) {\n return {\n root: mergeStyles(className, isDragging && {\n touchAction: 'none',\n selectors: {\n '& *': {\n userSelect: 'none',\n },\n },\n }),\n };\n});\n//# sourceMappingURL=DraggableZone.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { getClassNames } from './DraggableZone.styles';\nimport { on } from '../../Utilities';\nvar eventMapping = {\n touch: {\n start: 'touchstart',\n move: 'touchmove',\n stop: 'touchend',\n },\n mouse: {\n start: 'mousedown',\n move: 'mousemove',\n stop: 'mouseup',\n },\n};\nvar DraggableZone = /** @class */ (function (_super) {\n __extends(DraggableZone, _super);\n function DraggableZone(props) {\n var _this = _super.call(this, props) || this;\n _this._currentEventType = eventMapping.mouse;\n _this._events = [];\n _this._onMouseDown = function (event) {\n var onMouseDown = React.Children.only(_this.props.children).props.onMouseDown;\n if (onMouseDown) {\n onMouseDown(event);\n }\n _this._currentEventType = eventMapping.mouse;\n return _this._onDragStart(event);\n };\n _this._onMouseUp = function (event) {\n var onMouseUp = React.Children.only(_this.props.children).props.onMouseUp;\n if (onMouseUp) {\n onMouseUp(event);\n }\n _this._currentEventType = eventMapping.mouse;\n return _this._onDragStop(event);\n };\n _this._onTouchStart = function (event) {\n var onTouchStart = React.Children.only(_this.props.children).props.onTouchStart;\n if (onTouchStart) {\n onTouchStart(event);\n }\n _this._currentEventType = eventMapping.touch;\n return _this._onDragStart(event);\n };\n _this._onTouchEnd = function (event) {\n var onTouchEnd = React.Children.only(_this.props.children).props.onTouchEnd;\n if (onTouchEnd) {\n onTouchEnd(event);\n }\n _this._currentEventType = eventMapping.touch;\n _this._onDragStop(event);\n };\n _this._onDragStart = function (event) {\n // Only handle left click for dragging\n if (typeof event.button === 'number' && event.button !== 0) {\n return false;\n }\n // If the target doesn't match the handleSelector OR\n // if the target does match the preventDragSelector, bail out\n if ((_this.props.handleSelector && !_this._matchesSelector(event.target, _this.props.handleSelector)) ||\n (_this.props.preventDragSelector &&\n _this._matchesSelector(event.target, _this.props.preventDragSelector))) {\n return;\n }\n // Remember the touch identifier if this is a touch event so we can\n // distinguish between individual touches in multitouch scenarios\n // by remembering which touch point we were given\n _this._touchId = _this._getTouchId(event);\n var position = _this._getControlPosition(event);\n if (position === undefined) {\n return;\n }\n var dragData = _this._createDragDataFromPosition(position);\n _this.props.onStart && _this.props.onStart(event, dragData);\n _this.setState({\n isDragging: true,\n lastPosition: position,\n });\n // hook up the appropriate mouse/touch events to the body to ensure\n // smooth dragging\n _this._events = [\n on(document.body, _this._currentEventType.move, _this._onDrag, true /* use capture phase */),\n on(document.body, _this._currentEventType.stop, _this._onDragStop, true /* use capture phase */),\n ];\n };\n _this._onDrag = function (event) {\n // Prevent scrolling on mobile devices\n if (event.type === 'touchmove') {\n event.preventDefault();\n }\n var position = _this._getControlPosition(event);\n if (!position) {\n return;\n }\n // create the updated drag data from the position data\n var updatedData = _this._createUpdatedDragData(_this._createDragDataFromPosition(position));\n var updatedPosition = updatedData.position;\n _this.props.onDragChange && _this.props.onDragChange(event, updatedData);\n _this.setState({\n position: updatedPosition,\n lastPosition: position,\n });\n };\n _this._onDragStop = function (event) {\n if (!_this.state.isDragging) {\n return;\n }\n var position = _this._getControlPosition(event);\n if (!position) {\n return;\n }\n var baseDragData = _this._createDragDataFromPosition(position);\n // Set dragging to false and reset the lastPosition\n _this.setState({\n isDragging: false,\n lastPosition: undefined,\n });\n _this.props.onStop && _this.props.onStop(event, baseDragData);\n if (_this.props.position) {\n _this.setState({\n position: _this.props.position,\n });\n }\n // Remove event handlers\n _this._events.forEach(function (dispose) { return dispose(); });\n };\n _this.state = {\n isDragging: false,\n position: _this.props.position || { x: 0, y: 0 },\n lastPosition: undefined,\n };\n return _this;\n }\n DraggableZone.prototype.componentDidUpdate = function (prevProps) {\n if (this.props.position && (!prevProps.position || this.props.position !== prevProps.position)) {\n this.setState({ position: this.props.position });\n }\n };\n DraggableZone.prototype.componentWillUnmount = function () {\n this._events.forEach(function (dispose) { return dispose(); });\n };\n DraggableZone.prototype.render = function () {\n var child = React.Children.only(this.props.children);\n var props = child.props;\n var position = this.props.position;\n var _a = this.state, statePosition = _a.position, isDragging = _a.isDragging;\n var x = statePosition.x;\n var y = statePosition.y;\n if (position && !isDragging) {\n x = position.x;\n y = position.y;\n }\n return React.cloneElement(child, {\n style: __assign(__assign({}, props.style), { transform: \"translate(\".concat(x, \"px, \").concat(y, \"px)\") }),\n className: getClassNames(props.className, this.state.isDragging).root,\n onMouseDown: this._onMouseDown,\n onMouseUp: this._onMouseUp,\n onTouchStart: this._onTouchStart,\n onTouchEnd: this._onTouchEnd,\n });\n };\n /**\n * Get the control position based off the event that fired\n * @param event - The event to get offsets from\n */\n DraggableZone.prototype._getControlPosition = function (event) {\n var touchObj = this._getActiveTouch(event);\n // did we get the right touch?\n if (this._touchId !== undefined && !touchObj) {\n return undefined;\n }\n var eventToGetOffset = touchObj || event;\n return {\n x: eventToGetOffset.clientX,\n y: eventToGetOffset.clientY,\n };\n };\n /**\n * Get the active touch point that we have saved from the event's TouchList\n * @param event - The event used to get the TouchList for the active touch point\n */\n DraggableZone.prototype._getActiveTouch = function (event) {\n return ((event.targetTouches && this._findTouchInTouchList(event.targetTouches)) ||\n (event.changedTouches && this._findTouchInTouchList(event.changedTouches)));\n };\n /**\n * Get the initial touch identifier associated with the given event\n * @param event - The event that contains the TouchList\n */\n DraggableZone.prototype._getTouchId = function (event) {\n var touch = (event.targetTouches && event.targetTouches[0]) || (event.changedTouches && event.changedTouches[0]);\n if (touch) {\n return touch.identifier;\n }\n };\n /**\n * Returns if an element (or any of the element's parents) match the given selector\n */\n DraggableZone.prototype._matchesSelector = function (element, selector) {\n if (!element || element === document.body) {\n return false;\n }\n var matchesSelectorFn = \n // eslint-disable-next-line deprecation/deprecation\n element.matches || element.webkitMatchesSelector || element.msMatchesSelector; /* for IE */\n if (!matchesSelectorFn) {\n return false;\n }\n return matchesSelectorFn.call(element, selector) || this._matchesSelector(element.parentElement, selector);\n };\n /**\n * Attempts to find the Touch that matches the identifier we stored in dragStart\n * @param touchList The TouchList to look for the stored identifier from dragStart\n */\n DraggableZone.prototype._findTouchInTouchList = function (touchList) {\n if (this._touchId === undefined) {\n return;\n }\n for (var i = 0; i < touchList.length; i++) {\n if (touchList[i].identifier === this._touchId) {\n return touchList[i];\n }\n }\n return undefined;\n };\n /**\n * Create DragData based off of the last known position and the new position passed in\n * @param position The new position as part of the drag\n */\n DraggableZone.prototype._createDragDataFromPosition = function (position) {\n var lastPosition = this.state.lastPosition;\n // If we have no lastPosition, use the given position\n // for last position\n if (lastPosition === undefined) {\n return {\n delta: { x: 0, y: 0 },\n lastPosition: position,\n position: position,\n };\n }\n return {\n delta: {\n x: position.x - lastPosition.x,\n y: position.y - lastPosition.y,\n },\n lastPosition: lastPosition,\n position: position,\n };\n };\n /**\n * Creates an updated DragData based off the current position and given baseDragData\n * @param baseDragData The base DragData (from _createDragDataFromPosition) used to calculate the updated positions\n */\n DraggableZone.prototype._createUpdatedDragData = function (baseDragData) {\n var position = this.state.position;\n return {\n position: {\n x: position.x + baseDragData.delta.x,\n y: position.y + baseDragData.delta.y,\n },\n delta: baseDragData.delta,\n lastPosition: position,\n };\n };\n return DraggableZone;\n}(React.Component));\nexport { DraggableZone };\n//# sourceMappingURL=DraggableZone.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, css, allowScrollOnElement, allowOverscrollOnElement, getPropsWithDefaults, KeyCodes, elementContains, EventGroup, } from '../../Utilities';\nimport { FocusTrapZone } from '../../FocusTrapZone';\nimport { animationDuration } from './Modal.styles';\nimport { Overlay } from '../../Overlay';\nimport { Layer } from '../../Layer';\nimport { Popup } from '../../Popup';\nimport { ResponsiveMode, useResponsiveMode } from '../../ResponsiveMode';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { Icon } from '../../Icon';\nimport { DraggableZone } from '../../utilities/DraggableZone/index';\nimport { useWindow } from '@fluentui/react-window-provider';\nimport { useBoolean, useMergedRefs, useWarnings, useConst, useSetTimeout, useId, useUnmount, } from '@fluentui/react-hooks';\nvar ZERO = { x: 0, y: 0 };\nvar DEFAULT_PROPS = {\n isOpen: false,\n isDarkOverlay: true,\n className: '',\n containerClassName: '',\n enableAriaHiddenSiblings: true,\n};\nvar getClassNames = classNamesFunction();\nvar getMoveDelta = function (ev) {\n var delta = 10;\n if (ev.shiftKey) {\n if (!ev.ctrlKey) {\n delta = 50;\n }\n }\n else if (ev.ctrlKey) {\n delta = 1;\n }\n return delta;\n};\nvar useComponentRef = function (props, focusTrapZone) {\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: function () {\n if (focusTrapZone.current) {\n focusTrapZone.current.focus();\n }\n },\n }); }, [focusTrapZone]);\n};\nexport var ModalBase = React.forwardRef(function (propsWithoutDefaults, ref) {\n var _a, _b, _c, _d, _e;\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var allowTouchBodyScroll = props.allowTouchBodyScroll, className = props.className, children = props.children, containerClassName = props.containerClassName, scrollableContentClassName = props.scrollableContentClassName, elementToFocusOnDismiss = props.elementToFocusOnDismiss, firstFocusableSelector = props.firstFocusableSelector, focusTrapZoneProps = props.focusTrapZoneProps, forceFocusInsideTrap = props.forceFocusInsideTrap, \n // eslint-disable-next-line deprecation/deprecation\n _f = props.disableRestoreFocus, \n // eslint-disable-next-line deprecation/deprecation\n disableRestoreFocus = _f === void 0 ? props.ignoreExternalFocusing : _f, isBlocking = props.isBlocking, isAlert = props.isAlert, isClickableOutsideFocusTrap = props.isClickableOutsideFocusTrap, isDarkOverlay = props.isDarkOverlay, onDismiss = props.onDismiss, layerProps = props.layerProps, overlay = props.overlay, isOpen = props.isOpen, titleAriaId = props.titleAriaId, styles = props.styles, subtitleAriaId = props.subtitleAriaId, theme = props.theme, topOffsetFixed = props.topOffsetFixed, responsiveMode = props.responsiveMode, \n // eslint-disable-next-line deprecation/deprecation\n onLayerDidMount = props.onLayerDidMount, isModeless = props.isModeless, dragOptions = props.dragOptions, onDismissed = props.onDismissed, \n // eslint-disable-next-line deprecation/deprecation\n enableAriaHiddenSiblings = props.enableAriaHiddenSiblings, popupProps = props.popupProps;\n var rootRef = React.useRef(null);\n var focusTrapZone = React.useRef(null);\n var focusTrapZoneRef = useMergedRefs(focusTrapZone, focusTrapZoneProps === null || focusTrapZoneProps === void 0 ? void 0 : focusTrapZoneProps.componentRef);\n var focusTrapZoneElm = React.useRef(null);\n var mergedRef = useMergedRefs(rootRef, ref);\n var modalResponsiveMode = useResponsiveMode(mergedRef);\n var focusTrapZoneId = useId('ModalFocusTrapZone', focusTrapZoneProps === null || focusTrapZoneProps === void 0 ? void 0 : focusTrapZoneProps.id);\n var win = useWindow();\n var _g = useSetTimeout(), setTimeout = _g.setTimeout, clearTimeout = _g.clearTimeout;\n var _h = React.useState(isOpen), isModalOpen = _h[0], setIsModalOpen = _h[1];\n var _j = React.useState(isOpen), isVisible = _j[0], setIsVisible = _j[1];\n var _k = React.useState(ZERO), coordinates = _k[0], setCoordinates = _k[1];\n var _l = React.useState(), modalRectangleTop = _l[0], setModalRectangleTop = _l[1];\n var _m = useBoolean(false), isModalMenuOpen = _m[0], _o = _m[1], toggleModalMenuOpen = _o.toggle, setModalMenuClose = _o.setFalse;\n var internalState = useConst(function () { return ({\n onModalCloseTimer: 0,\n allowTouchBodyScroll: allowTouchBodyScroll,\n scrollableContent: null,\n lastSetCoordinates: ZERO,\n events: new EventGroup({}),\n }); });\n var keepInBounds = (dragOptions || {}).keepInBounds;\n var isAlertRole = isAlert !== null && isAlert !== void 0 ? isAlert : (isBlocking && !isModeless);\n var layerClassName = layerProps === undefined ? '' : layerProps.className;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n containerClassName: containerClassName,\n scrollableContentClassName: scrollableContentClassName,\n isOpen: isOpen,\n isVisible: isVisible,\n hasBeenOpened: internalState.hasBeenOpened,\n modalRectangleTop: modalRectangleTop,\n topOffsetFixed: topOffsetFixed,\n isModeless: isModeless,\n layerClassName: layerClassName,\n windowInnerHeight: win === null || win === void 0 ? void 0 : win.innerHeight,\n isDefaultDragHandle: dragOptions && !dragOptions.dragHandleSelector,\n });\n var mergedLayerProps = __assign(__assign({ eventBubblingEnabled: false }, layerProps), { onLayerDidMount: layerProps && layerProps.onLayerDidMount ? layerProps.onLayerDidMount : onLayerDidMount, insertFirst: (layerProps === null || layerProps === void 0 ? void 0 : layerProps.insertFirst) || isModeless, className: classNames.layer });\n // Allow the user to scroll within the modal but not on the body\n var allowScrollOnModal = React.useCallback(function (elt) {\n if (elt) {\n if (internalState.allowTouchBodyScroll) {\n allowOverscrollOnElement(elt, internalState.events);\n }\n else {\n allowScrollOnElement(elt, internalState.events);\n }\n }\n else {\n internalState.events.off(internalState.scrollableContent);\n }\n internalState.scrollableContent = elt;\n }, [internalState]);\n var registerInitialModalPosition = function () {\n var dialogMain = focusTrapZoneElm.current;\n var modalRectangle = dialogMain === null || dialogMain === void 0 ? void 0 : dialogMain.getBoundingClientRect();\n if (modalRectangle) {\n if (topOffsetFixed) {\n setModalRectangleTop(modalRectangle.top);\n }\n if (keepInBounds) {\n // x/y are unavailable in IE, so use the equivalent left/top\n internalState.minPosition = { x: -modalRectangle.left, y: -modalRectangle.top };\n internalState.maxPosition = { x: modalRectangle.left, y: modalRectangle.top };\n }\n }\n };\n /**\n * Clamps an axis to a specified min and max position.\n *\n * @param axis A string that represents the axis (x/y).\n * @param position The position on the axis.\n */\n var getClampedAxis = React.useCallback(function (axis, position) {\n var minPosition = internalState.minPosition, maxPosition = internalState.maxPosition;\n if (keepInBounds && minPosition && maxPosition) {\n position = Math.max(minPosition[axis], position);\n position = Math.min(maxPosition[axis], position);\n }\n return position;\n }, [keepInBounds, internalState]);\n var handleModalClose = function () {\n var _a;\n internalState.lastSetCoordinates = ZERO;\n setModalMenuClose();\n internalState.isInKeyboardMoveMode = false;\n setIsModalOpen(false);\n setCoordinates(ZERO);\n (_a = internalState.disposeOnKeyUp) === null || _a === void 0 ? void 0 : _a.call(internalState);\n onDismissed === null || onDismissed === void 0 ? void 0 : onDismissed();\n };\n var handleDragStart = React.useCallback(function () {\n setModalMenuClose();\n internalState.isInKeyboardMoveMode = false;\n }, [internalState, setModalMenuClose]);\n var handleDrag = React.useCallback(function (ev, dragData) {\n setCoordinates(function (prevValue) { return ({\n x: getClampedAxis('x', prevValue.x + dragData.delta.x),\n y: getClampedAxis('y', prevValue.y + dragData.delta.y),\n }); });\n }, [getClampedAxis]);\n var handleDragStop = React.useCallback(function () {\n if (focusTrapZone.current) {\n focusTrapZone.current.focus();\n }\n }, []);\n var handleEnterKeyboardMoveMode = function () {\n // We need a global handleKeyDown event when we are in the move mode so that we can\n // handle the key presses and the components inside the modal do not get the events\n var handleKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.altKey && ev.ctrlKey && ev.keyCode === KeyCodes.space) {\n // CTRL + ALT + SPACE is handled during keyUp\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n // eslint-disable-next-line deprecation/deprecation\n var newLocal = ev.altKey || ev.keyCode === KeyCodes.escape;\n if (isModalMenuOpen && newLocal) {\n setModalMenuClose();\n }\n // eslint-disable-next-line deprecation/deprecation\n if (internalState.isInKeyboardMoveMode && (ev.keyCode === KeyCodes.escape || ev.keyCode === KeyCodes.enter)) {\n internalState.isInKeyboardMoveMode = false;\n ev.preventDefault();\n ev.stopPropagation();\n }\n if (internalState.isInKeyboardMoveMode) {\n var handledEvent = true;\n var delta_1 = getMoveDelta(ev);\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.keyCode) {\n /* eslint-disable no-fallthrough */\n case KeyCodes.escape:\n setCoordinates(internalState.lastSetCoordinates);\n case KeyCodes.enter: {\n // TODO: determine if fallthrough was intentional\n /* eslint-enable no-fallthrough */\n internalState.lastSetCoordinates = ZERO;\n // setIsInKeyboardMoveMode(false);\n break;\n }\n case KeyCodes.up: {\n setCoordinates(function (prevValue) { return ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y - delta_1) }); });\n break;\n }\n case KeyCodes.down: {\n setCoordinates(function (prevValue) { return ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y + delta_1) }); });\n break;\n }\n case KeyCodes.left: {\n setCoordinates(function (prevValue) { return ({ x: getClampedAxis('x', prevValue.x - delta_1), y: prevValue.y }); });\n break;\n }\n case KeyCodes.right: {\n setCoordinates(function (prevValue) { return ({ x: getClampedAxis('x', prevValue.x + delta_1), y: prevValue.y }); });\n break;\n }\n default: {\n handledEvent = false;\n }\n }\n if (handledEvent) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n };\n internalState.lastSetCoordinates = coordinates;\n setModalMenuClose();\n internalState.isInKeyboardMoveMode = true;\n internalState.events.on(win, 'keydown', handleKeyDown, true /* useCapture */);\n internalState.disposeOnKeyDown = function () {\n internalState.events.off(win, 'keydown', handleKeyDown, true /* useCapture */);\n internalState.disposeOnKeyDown = undefined;\n };\n };\n var handleExitKeyboardMoveMode = function (ev) {\n var _a, _b;\n (_a = focusTrapZoneProps === null || focusTrapZoneProps === void 0 ? void 0 : focusTrapZoneProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(focusTrapZoneProps, ev);\n internalState.lastSetCoordinates = ZERO;\n internalState.isInKeyboardMoveMode = false;\n (_b = internalState.disposeOnKeyDown) === null || _b === void 0 ? void 0 : _b.call(internalState);\n };\n var registerForKeyUp = function () {\n var handleKeyUp = function (ev) {\n // Needs to handle the CTRL + ALT + SPACE key during keyup due to FireFox bug:\n // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\n // eslint-disable-next-line deprecation/deprecation\n if (ev.altKey && ev.ctrlKey && ev.keyCode === KeyCodes.space) {\n if (elementContains(internalState.scrollableContent, ev.target)) {\n toggleModalMenuOpen();\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n };\n if (!internalState.disposeOnKeyUp) {\n internalState.events.on(win, 'keyup', handleKeyUp, true /* useCapture */);\n internalState.disposeOnKeyUp = function () {\n internalState.events.off(win, 'keyup', handleKeyUp, true /* useCapture */);\n internalState.disposeOnKeyUp = undefined;\n };\n }\n };\n React.useEffect(function () {\n clearTimeout(internalState.onModalCloseTimer);\n // Opening the dialog\n if (isOpen) {\n // This must be done after the modal content has rendered\n requestAnimationFrame(function () { return setTimeout(registerInitialModalPosition, 0); });\n setIsModalOpen(true);\n // Add a keyUp handler for all key up events once the dialog is open.\n if (dragOptions) {\n registerForKeyUp();\n }\n internalState.hasBeenOpened = true;\n setIsVisible(true);\n }\n // Closing the dialog\n if (!isOpen && isModalOpen) {\n internalState.onModalCloseTimer = setTimeout(handleModalClose, parseFloat(animationDuration) * 1000);\n setIsVisible(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run if isModalOpen or isOpen mutates.\n }, [isModalOpen, isOpen]);\n useUnmount(function () {\n internalState.events.dispose();\n });\n useComponentRef(props, focusTrapZone);\n useDebugWarnings(props);\n var modalContent = (React.createElement(FocusTrapZone, __assign({}, focusTrapZoneProps, { id: focusTrapZoneId, ref: focusTrapZoneElm, componentRef: focusTrapZoneRef, className: css(classNames.main, focusTrapZoneProps === null || focusTrapZoneProps === void 0 ? void 0 : focusTrapZoneProps.className), elementToFocusOnDismiss: (_a = focusTrapZoneProps === null || focusTrapZoneProps === void 0 ? void 0 : focusTrapZoneProps.elementToFocusOnDismiss) !== null && _a !== void 0 ? _a : elementToFocusOnDismiss, isClickableOutsideFocusTrap: (_b = focusTrapZoneProps === null || focusTrapZoneProps === void 0 ? void 0 : focusTrapZoneProps.isClickableOutsideFocusTrap) !== null && _b !== void 0 ? _b : (isModeless || isClickableOutsideFocusTrap || !isBlocking), disableRestoreFocus: (_c = focusTrapZoneProps === null || focusTrapZoneProps === void 0 ? void 0 : focusTrapZoneProps.disableRestoreFocus) !== null && _c !== void 0 ? _c : disableRestoreFocus, forceFocusInsideTrap: ((_d = focusTrapZoneProps === null || focusTrapZoneProps === void 0 ? void 0 : focusTrapZoneProps.forceFocusInsideTrap) !== null && _d !== void 0 ? _d : forceFocusInsideTrap) && !isModeless, \n // eslint-disable-next-line deprecation/deprecation\n firstFocusableSelector: (focusTrapZoneProps === null || focusTrapZoneProps === void 0 ? void 0 : focusTrapZoneProps.firstFocusableSelector) || firstFocusableSelector, focusPreviouslyFocusedInnerElement: (_e = focusTrapZoneProps === null || focusTrapZoneProps === void 0 ? void 0 : focusTrapZoneProps.focusPreviouslyFocusedInnerElement) !== null && _e !== void 0 ? _e : true, onBlur: internalState.isInKeyboardMoveMode ? handleExitKeyboardMoveMode : undefined }),\n dragOptions && internalState.isInKeyboardMoveMode && (React.createElement(\"div\", { className: classNames.keyboardMoveIconContainer }, dragOptions.keyboardMoveIconProps ? (React.createElement(Icon, __assign({}, dragOptions.keyboardMoveIconProps))) : (React.createElement(Icon, { iconName: \"move\", className: classNames.keyboardMoveIcon })))),\n React.createElement(\"div\", { ref: allowScrollOnModal, className: classNames.scrollableContent, \"data-is-scrollable\": true },\n dragOptions && isModalMenuOpen && (React.createElement(dragOptions.menu, { items: [\n { key: 'move', text: dragOptions.moveMenuItemText, onClick: handleEnterKeyboardMoveMode },\n { key: 'close', text: dragOptions.closeMenuItemText, onClick: handleModalClose },\n ], onDismiss: setModalMenuClose, alignTargetEdge: true, coverTarget: true, directionalHint: DirectionalHint.topLeftEdge, directionalHintFixed: true, shouldFocusOnMount: true, target: internalState.scrollableContent })),\n children)));\n return ((isModalOpen && modalResponsiveMode >= (responsiveMode || ResponsiveMode.small) && (React.createElement(Layer, __assign({ ref: mergedRef }, mergedLayerProps),\n React.createElement(Popup, __assign({ role: isAlertRole ? 'alertdialog' : 'dialog', ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, onDismiss: onDismiss, shouldRestoreFocus: !disableRestoreFocus, \n // Modeless modals shouldn't hide siblings.\n // Popup will automatically handle this based on the aria-modal setting.\n enableAriaHiddenSiblings: enableAriaHiddenSiblings, \"aria-modal\": !isModeless }, popupProps),\n React.createElement(\"div\", { className: classNames.root, role: !isModeless ? 'document' : undefined },\n !isModeless && (React.createElement(Overlay, __assign({ \"aria-hidden\": true, isDarkThemed: isDarkOverlay, onClick: isBlocking ? undefined : onDismiss, allowTouchBodyScroll: allowTouchBodyScroll }, overlay))),\n dragOptions ? (React.createElement(DraggableZone, { handleSelector: dragOptions.dragHandleSelector || \"#\".concat(focusTrapZoneId), preventDragSelector: \"button\", onStart: handleDragStart, onDragChange: handleDrag, onStop: handleDragStop, position: coordinates }, modalContent)) : (modalContent)))))) ||\n null);\n});\nModalBase.displayName = 'Modal';\nfunction useDebugWarnings(props) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional\n useWarnings({\n name: 'Modal',\n props: props,\n deprecations: { onLayerDidMount: 'layerProps.onLayerDidMount' },\n });\n }\n}\n//# sourceMappingURL=Modal.base.js.map","import { styled } from '../../Utilities';\nimport { ModalBase } from './Modal.base';\nimport { getStyles } from './Modal.styles';\nexport var Modal = styled(ModalBase, getStyles, undefined, {\n scope: 'Modal',\n fields: ['theme', 'styles', 'enableAriaHiddenSiblings'],\n});\nModal.displayName = 'Modal';\n//# sourceMappingURL=Modal.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nvar DialogFooterBase = /** @class */ (function (_super) {\n __extends(DialogFooterBase, _super);\n function DialogFooterBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n DialogFooterBase.prototype.render = function () {\n var _a = this.props, className = _a.className, styles = _a.styles, theme = _a.theme;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"div\", { className: this._classNames.actions },\n React.createElement(\"div\", { className: this._classNames.actionsRight }, this._renderChildrenAsActions())));\n };\n DialogFooterBase.prototype._renderChildrenAsActions = function () {\n var _this = this;\n return React.Children.map(this.props.children, function (child) {\n return child ? React.createElement(\"span\", { className: _this._classNames.action }, child) : null;\n });\n };\n return DialogFooterBase;\n}(React.Component));\nexport { DialogFooterBase };\n//# sourceMappingURL=DialogFooter.base.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n actions: 'ms-Dialog-actions',\n action: 'ms-Dialog-action',\n actionsRight: 'ms-Dialog-actionsRight',\n};\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n actions: [\n classNames.actions,\n {\n position: 'relative',\n width: '100%',\n minHeight: '24px',\n lineHeight: '24px',\n margin: '16px 0 0',\n fontSize: '0',\n selectors: {\n '.ms-Button': {\n lineHeight: 'normal',\n verticalAlign: 'middle',\n },\n },\n },\n className,\n ],\n action: [\n classNames.action,\n {\n margin: '0 4px',\n },\n ],\n actionsRight: [\n classNames.actionsRight,\n {\n alignItems: 'center',\n display: 'flex',\n fontSize: '0',\n justifyContent: 'flex-end',\n marginRight: '-4px',\n },\n ],\n };\n};\n//# sourceMappingURL=DialogFooter.styles.js.map","import { styled } from '../../Utilities';\nimport { DialogFooterBase } from './DialogFooter.base';\nimport { getStyles } from './DialogFooter.styles';\nexport var DialogFooter = styled(DialogFooterBase, getStyles, undefined, { scope: 'DialogFooter' });\nDialogFooter.displayName = 'DialogFooter';\n//# sourceMappingURL=DialogFooter.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, css, warnDeprecations, initializeComponentRef } from '../../Utilities';\nimport { DialogType } from './DialogContent.types';\nimport { IconButton } from '../../Button';\nimport { DialogFooter } from './DialogFooter';\nimport { withResponsiveMode } from '../../ResponsiveMode';\nvar getClassNames = classNamesFunction();\nvar DialogFooterType = (React.createElement(DialogFooter, null)).type;\nvar COMPONENT_NAME = 'DialogContent';\n// eslint-disable-next-line deprecation/deprecation\nvar DialogContentBase = /** @class */ (function (_super) {\n __extends(DialogContentBase, _super);\n function DialogContentBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n warnDeprecations(COMPONENT_NAME, props, {\n titleId: 'titleProps.id',\n });\n return _this;\n }\n DialogContentBase.prototype.render = function () {\n var _a = this.props, showCloseButton = _a.showCloseButton, className = _a.className, closeButtonAriaLabel = _a.closeButtonAriaLabel, onDismiss = _a.onDismiss, subTextId = _a.subTextId, subText = _a.subText, _b = _a.titleProps, titleProps = _b === void 0 ? {} : _b, \n // eslint-disable-next-line deprecation/deprecation\n titleId = _a.titleId, title = _a.title, type = _a.type, styles = _a.styles, theme = _a.theme, draggableHeaderClassName = _a.draggableHeaderClassName;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n isLargeHeader: type === DialogType.largeHeader,\n isClose: type === DialogType.close,\n draggableHeaderClassName: draggableHeaderClassName,\n });\n var groupings = this._groupChildren();\n var subTextContent;\n if (subText) {\n subTextContent = (React.createElement(\"p\", { className: classNames.subText, id: subTextId }, subText));\n }\n return (React.createElement(\"div\", { className: classNames.content },\n React.createElement(\"div\", { className: classNames.header },\n React.createElement(\"div\", __assign({ id: titleId, role: \"heading\", \"aria-level\": 1 }, titleProps, { className: css(classNames.title, titleProps.className) }), title),\n React.createElement(\"div\", { className: classNames.topButton },\n this.props.topButtonsProps.map(function (props, index) { return (React.createElement(IconButton, __assign({ key: props.uniqueId || index }, props))); }),\n (type === DialogType.close || (showCloseButton && type !== DialogType.largeHeader)) && (React.createElement(IconButton, { className: classNames.button, iconProps: { iconName: 'Cancel' }, ariaLabel: closeButtonAriaLabel, onClick: onDismiss })))),\n React.createElement(\"div\", { className: classNames.inner },\n React.createElement(\"div\", { className: classNames.innerContent },\n subTextContent,\n groupings.contents),\n groupings.footers)));\n };\n // @TODO - typing the footers as an array of DialogFooter is difficult because\n // casing \"child as DialogFooter\" causes a problem because\n // \"Neither type 'ReactElement' nor type 'DialogFooter' is assignable to the other.\"\n DialogContentBase.prototype._groupChildren = function () {\n var groupings = {\n footers: [],\n contents: [],\n };\n React.Children.map(this.props.children, function (child) {\n if (typeof child === 'object' && child !== null && child.type === DialogFooterType) {\n groupings.footers.push(child);\n }\n else {\n groupings.contents.push(child);\n }\n });\n return groupings;\n };\n DialogContentBase.defaultProps = {\n showCloseButton: false,\n className: '',\n topButtonsProps: [],\n closeButtonAriaLabel: 'Close',\n };\n DialogContentBase = __decorate([\n withResponsiveMode\n ], DialogContentBase);\n return DialogContentBase;\n}(React.Component));\nexport { DialogContentBase };\n//# sourceMappingURL=DialogContent.base.js.map","import { FontWeights, getGlobalClassNames, IconFontSizes, ScreenWidthMinSmall, ScreenWidthMaxSmall, } from '../../Styling';\nvar GlobalClassNames = {\n contentLgHeader: 'ms-Dialog-lgHeader',\n close: 'ms-Dialog--close',\n subText: 'ms-Dialog-subText',\n header: 'ms-Dialog-header',\n headerLg: 'ms-Dialog--lgHeader',\n button: 'ms-Dialog-button ms-Dialog-button--close',\n inner: 'ms-Dialog-inner',\n content: 'ms-Dialog-content',\n title: 'ms-Dialog-title',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c;\n var className = props.className, theme = props.theme, isLargeHeader = props.isLargeHeader, isClose = props.isClose, hidden = props.hidden, isMultiline = props.isMultiline, draggableHeaderClassName = props.draggableHeaderClassName;\n var palette = theme.palette, fonts = theme.fonts, effects = theme.effects, semanticColors = theme.semanticColors;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n content: [\n isLargeHeader && [\n classNames.contentLgHeader,\n {\n borderTop: \"4px solid \".concat(palette.themePrimary),\n },\n ],\n isClose && classNames.close,\n {\n flexGrow: 1,\n overflowY: 'hidden', // required for allowScrollOnElement\n },\n className,\n ],\n subText: [\n classNames.subText,\n fonts.medium,\n {\n margin: '0 0 24px 0',\n color: semanticColors.bodySubtext,\n lineHeight: '1.5',\n wordWrap: 'break-word',\n fontWeight: FontWeights.regular,\n },\n ],\n header: [\n classNames.header,\n {\n position: 'relative',\n width: '100%',\n boxSizing: 'border-box',\n },\n isClose && classNames.close,\n draggableHeaderClassName && [\n draggableHeaderClassName,\n {\n cursor: 'move',\n },\n ],\n ],\n button: [\n classNames.button,\n hidden && {\n selectors: {\n '.ms-Icon.ms-Icon--Cancel': {\n color: semanticColors.buttonText,\n fontSize: IconFontSizes.medium,\n },\n },\n },\n ],\n inner: [\n classNames.inner,\n {\n padding: '0 24px 24px',\n selectors: (_a = {},\n _a[\"@media (min-width: \".concat(ScreenWidthMinSmall, \"px) and (max-width: \").concat(ScreenWidthMaxSmall, \"px)\")] = {\n padding: '0 16px 16px',\n },\n _a),\n },\n ],\n innerContent: [\n classNames.content,\n {\n position: 'relative',\n width: '100%',\n },\n ],\n title: [\n classNames.title,\n fonts.xLarge,\n {\n color: semanticColors.bodyText,\n margin: '0',\n minHeight: fonts.xLarge.fontSize,\n padding: '16px 46px 20px 24px',\n lineHeight: 'normal',\n selectors: (_b = {},\n _b[\"@media (min-width: \".concat(ScreenWidthMinSmall, \"px) and (max-width: \").concat(ScreenWidthMaxSmall, \"px)\")] = {\n padding: '16px 46px 16px 16px',\n },\n _b),\n },\n isLargeHeader && {\n color: semanticColors.menuHeader,\n },\n isMultiline && { fontSize: fonts.xxLarge.fontSize },\n ],\n topButton: [\n {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'nowrap',\n position: 'absolute',\n top: '0',\n right: '0',\n padding: '15px 15px 0 0',\n selectors: (_c = {\n '> *': {\n flex: '0 0 auto',\n },\n '.ms-Dialog-button': {\n color: semanticColors.buttonText,\n },\n '.ms-Dialog-button:hover': {\n color: semanticColors.buttonTextHovered,\n borderRadius: effects.roundedCorner2,\n }\n },\n _c[\"@media (min-width: \".concat(ScreenWidthMinSmall, \"px) and (max-width: \").concat(ScreenWidthMaxSmall, \"px)\")] = {\n padding: '15px 8px 0 0',\n },\n _c),\n },\n ],\n };\n};\n//# sourceMappingURL=DialogContent.styles.js.map","import { styled } from '../../Utilities';\nimport { DialogContentBase } from './DialogContent.base';\nimport { getStyles } from './DialogContent.styles';\nexport var DialogContent = styled(DialogContentBase, getStyles, undefined, { scope: 'DialogContent' });\nDialogContent.displayName = 'DialogContent';\n//# sourceMappingURL=DialogContent.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { warnDeprecations, classNamesFunction, getId } from '../../Utilities';\nimport { DialogType } from './DialogContent.types';\nimport { Modal } from '../../Modal';\nimport { withResponsiveMode } from '../../ResponsiveMode';\nvar getClassNames = classNamesFunction();\nimport { DialogContent } from './DialogContent';\nvar DefaultModalProps = {\n isDarkOverlay: false,\n isBlocking: false,\n className: '',\n containerClassName: '',\n topOffsetFixed: false,\n enableAriaHiddenSiblings: true,\n};\nvar DefaultDialogContentProps = {\n type: DialogType.normal,\n className: '',\n topButtonsProps: [],\n};\n// eslint-disable-next-line deprecation/deprecation\nvar DialogBase = /** @class */ (function (_super) {\n __extends(DialogBase, _super);\n function DialogBase(props) {\n var _this = _super.call(this, props) || this;\n _this._getSubTextId = function () {\n // eslint-disable-next-line deprecation/deprecation\n var _a = _this.props, ariaDescribedById = _a.ariaDescribedById, modalProps = _a.modalProps, dialogContentProps = _a.dialogContentProps, subText = _a.subText;\n var id = (modalProps && modalProps.subtitleAriaId) || ariaDescribedById;\n if (!id) {\n id = ((dialogContentProps && dialogContentProps.subText) || subText) && _this._defaultSubTextId;\n }\n return id;\n };\n _this._getTitleTextId = function () {\n // eslint-disable-next-line deprecation/deprecation\n var _a = _this.props, ariaLabelledById = _a.ariaLabelledById, modalProps = _a.modalProps, dialogContentProps = _a.dialogContentProps, title = _a.title;\n var id = (modalProps && modalProps.titleAriaId) || ariaLabelledById;\n if (!id) {\n id = ((dialogContentProps && dialogContentProps.title) || title) && _this._defaultTitleTextId;\n }\n return id;\n };\n _this._id = getId('Dialog');\n _this._defaultTitleTextId = _this._id + '-title';\n _this._defaultSubTextId = _this._id + '-subText';\n if (process.env.NODE_ENV !== 'production') {\n warnDeprecations('Dialog', props, {\n isOpen: 'hidden',\n type: 'dialogContentProps.type',\n subText: 'dialogContentProps.subText',\n contentClassName: 'dialogContentProps.className',\n topButtonsProps: 'dialogContentProps.topButtonsProps',\n className: 'modalProps.className',\n isDarkOverlay: 'modalProps.isDarkOverlay',\n isBlocking: 'modalProps.isBlocking',\n containerClassName: 'modalProps.containerClassName',\n onDismissed: 'modalProps.onDismissed',\n onLayerDidMount: 'modalProps.layerProps.onLayerDidMount',\n ariaDescribedById: 'modalProps.subtitleAriaId',\n ariaLabelledById: 'modalProps.titleAriaId',\n });\n }\n return _this;\n }\n DialogBase.prototype.render = function () {\n var _a, _b, _c;\n var props = this.props;\n var \n /* eslint-disable deprecation/deprecation */\n className = props.className, containerClassName = props.containerClassName, contentClassName = props.contentClassName, elementToFocusOnDismiss = props.elementToFocusOnDismiss, firstFocusableSelector = props.firstFocusableSelector, forceFocusInsideTrap = props.forceFocusInsideTrap, styles = props.styles, hidden = props.hidden, _d = props.disableRestoreFocus, disableRestoreFocus = _d === void 0 ? props.ignoreExternalFocusing : _d, isBlocking = props.isBlocking, isClickableOutsideFocusTrap = props.isClickableOutsideFocusTrap, isDarkOverlay = props.isDarkOverlay, _e = props.isOpen, isOpen = _e === void 0 ? !hidden : _e, onDismiss = props.onDismiss, onDismissed = props.onDismissed, onLayerDidMount = props.onLayerDidMount, responsiveMode = props.responsiveMode, subText = props.subText, theme = props.theme, title = props.title, topButtonsProps = props.topButtonsProps, type = props.type, \n /* eslint-enable deprecation/deprecation */\n minWidth = props.minWidth, maxWidth = props.maxWidth, modalProps = props.modalProps;\n var mergedLayerProps = __assign({ onLayerDidMount: onLayerDidMount }, modalProps === null || modalProps === void 0 ? void 0 : modalProps.layerProps);\n var dialogDraggableClassName;\n var dragOptions;\n // If dragOptions are provided, but no drag handle is specified, we supply a drag handle,\n // and inform dialog contents to add class to draggable class to the header\n if ((modalProps === null || modalProps === void 0 ? void 0 : modalProps.dragOptions) && !((_a = modalProps.dragOptions) === null || _a === void 0 ? void 0 : _a.dragHandleSelector)) {\n // spread options to avoid mutating props\n dragOptions = __assign({}, modalProps.dragOptions);\n dialogDraggableClassName = 'ms-Dialog-draggable-header';\n dragOptions.dragHandleSelector = \".\".concat(dialogDraggableClassName);\n }\n var mergedModalProps = __assign(__assign(__assign(__assign({}, DefaultModalProps), { elementToFocusOnDismiss: elementToFocusOnDismiss, firstFocusableSelector: firstFocusableSelector, forceFocusInsideTrap: forceFocusInsideTrap, disableRestoreFocus: disableRestoreFocus, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap, responsiveMode: responsiveMode, className: className, containerClassName: containerClassName, isBlocking: isBlocking, isDarkOverlay: isDarkOverlay, onDismissed: onDismissed }), modalProps), { dragOptions: dragOptions, layerProps: mergedLayerProps, isOpen: isOpen });\n var dialogContentProps = __assign(__assign(__assign({ className: contentClassName, subText: subText, title: title, topButtonsProps: topButtonsProps, type: type }, DefaultDialogContentProps), props.dialogContentProps), { draggableHeaderClassName: dialogDraggableClassName, titleProps: __assign({ \n // eslint-disable-next-line deprecation/deprecation\n id: ((_b = props.dialogContentProps) === null || _b === void 0 ? void 0 : _b.titleId) || this._defaultTitleTextId }, (_c = props.dialogContentProps) === null || _c === void 0 ? void 0 : _c.titleProps) });\n var classNames = getClassNames(styles, {\n theme: theme,\n className: mergedModalProps.className,\n containerClassName: mergedModalProps.containerClassName,\n hidden: hidden,\n dialogDefaultMinWidth: minWidth,\n dialogDefaultMaxWidth: maxWidth,\n });\n return (React.createElement(Modal, __assign({}, mergedModalProps, { className: classNames.root, containerClassName: classNames.main, onDismiss: onDismiss || mergedModalProps.onDismiss, subtitleAriaId: this._getSubTextId(), titleAriaId: this._getTitleTextId() }),\n React.createElement(DialogContent, __assign({ subTextId: this._defaultSubTextId, showCloseButton: mergedModalProps.isBlocking, onDismiss: onDismiss }, dialogContentProps), props.children)));\n };\n DialogBase.defaultProps = {\n hidden: true,\n };\n DialogBase = __decorate([\n withResponsiveMode\n ], DialogBase);\n return DialogBase;\n}(React.Component));\nexport { DialogBase };\n//# sourceMappingURL=Dialog.base.js.map","import { ScreenWidthMinMedium, getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Dialog',\n};\nexport var getStyles = function (props) {\n var _a;\n var className = props.className, containerClassName = props.containerClassName, // eslint-disable-line deprecation/deprecation\n _b = props.dialogDefaultMinWidth, // eslint-disable-line deprecation/deprecation\n dialogDefaultMinWidth = _b === void 0 ? '288px' : _b, _c = props.dialogDefaultMaxWidth, dialogDefaultMaxWidth = _c === void 0 ? '340px' : _c, hidden = props.hidden, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [classNames.root, theme.fonts.medium, className],\n main: [\n {\n width: dialogDefaultMinWidth,\n outline: '3px solid transparent',\n selectors: (_a = {},\n _a[\"@media (min-width: \".concat(ScreenWidthMinMedium, \"px)\")] = {\n width: 'auto',\n maxWidth: dialogDefaultMaxWidth,\n minWidth: dialogDefaultMinWidth,\n },\n _a),\n },\n !hidden && { display: 'flex' },\n containerClassName,\n ],\n };\n};\n//# sourceMappingURL=Dialog.styles.js.map","import { styled } from '../../Utilities';\nimport { DialogBase } from './Dialog.base';\nimport { getStyles } from './Dialog.styles';\nexport var Dialog = styled(DialogBase, getStyles, undefined, { scope: 'Dialog' });\nDialog.displayName = 'Dialog';\n//# sourceMappingURL=Dialog.js.map","import { EventGroup, getDocument } from '../../Utilities';\nvar MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button\nvar MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button\nvar DragDropHelper = /** @class */ (function () {\n function DragDropHelper(params) {\n this._selection = params.selection;\n this._dragEnterCounts = {};\n this._activeTargets = {};\n this._lastId = 0;\n // To make this class cheap to create, which allows simplifying some logic elsewhere,\n // only initialize the event group and global event handlers as needed.\n this._initialized = false;\n }\n DragDropHelper.prototype.dispose = function () {\n if (this._events) {\n this._events.dispose();\n }\n };\n DragDropHelper.prototype.subscribe = function (root, events, dragDropOptions) {\n var _this = this;\n if (!this._initialized) {\n this._events = new EventGroup(this);\n var doc = getDocument();\n // clear drag data when mouse up, use capture event to ensure it will be run\n if (doc) {\n this._events.on(doc.body, 'mouseup', this._onMouseUp.bind(this), true);\n this._events.on(doc, 'mouseup', this._onDocumentMouseUp.bind(this), true);\n }\n this._initialized = true;\n }\n var _a = dragDropOptions.key, key = _a === void 0 ? \"\".concat(++this._lastId) : _a;\n var handlers = [];\n var onDragStart;\n var onDragLeave;\n var onDragEnter;\n var onDragEnd;\n var onDrop;\n var onDragOver;\n var onMouseDown;\n var isDraggable;\n var isDroppable;\n var activeTarget;\n if (dragDropOptions && root) {\n var eventMap = dragDropOptions.eventMap, context = dragDropOptions.context, updateDropState_1 = dragDropOptions.updateDropState;\n var dragDropTarget = {\n root: root,\n options: dragDropOptions,\n key: key,\n };\n isDraggable = this._isDraggable(dragDropTarget);\n isDroppable = this._isDroppable(dragDropTarget);\n if (isDraggable || isDroppable) {\n if (eventMap) {\n for (var _i = 0, eventMap_1 = eventMap; _i < eventMap_1.length; _i++) {\n var event_1 = eventMap_1[_i];\n var handler = {\n callback: event_1.callback.bind(null, context),\n eventName: event_1.eventName,\n };\n handlers.push(handler);\n this._events.on(root, handler.eventName, handler.callback);\n }\n }\n }\n if (isDroppable) {\n // If the target is droppable, wire up global event listeners to track drop-related events.\n onDragLeave = function (event) {\n if (!event.isHandled) {\n event.isHandled = true;\n _this._dragEnterCounts[key]--;\n if (_this._dragEnterCounts[key] === 0) {\n updateDropState_1(false /* isDropping */, event);\n }\n }\n };\n onDragEnter = function (event) {\n event.preventDefault(); // needed for IE\n if (!event.isHandled) {\n event.isHandled = true;\n _this._dragEnterCounts[key]++;\n if (_this._dragEnterCounts[key] === 1) {\n updateDropState_1(true /* isDropping */, event);\n }\n }\n };\n onDragEnd = function (event) {\n _this._dragEnterCounts[key] = 0;\n updateDropState_1(false /* isDropping */, event);\n };\n onDrop = function (event) {\n _this._dragEnterCounts[key] = 0;\n updateDropState_1(false /* isDropping */, event);\n if (dragDropOptions.onDrop) {\n dragDropOptions.onDrop(dragDropOptions.context.data, event);\n }\n };\n onDragOver = function (event) {\n event.preventDefault();\n if (dragDropOptions.onDragOver) {\n dragDropOptions.onDragOver(dragDropOptions.context.data, event);\n }\n };\n this._dragEnterCounts[key] = 0;\n // dragenter and dragleave will be fired when hover to the child element\n // but we only want to change state when enter or leave the current element\n // use the count to ensure it.\n events.on(root, 'dragenter', onDragEnter);\n events.on(root, 'dragleave', onDragLeave);\n events.on(root, 'dragend', onDragEnd);\n events.on(root, 'drop', onDrop);\n events.on(root, 'dragover', onDragOver);\n }\n if (isDraggable) {\n // If the target is draggable, wire up local event listeners for mouse events.\n onMouseDown = this._onMouseDown.bind(this, dragDropTarget);\n onDragEnd = this._onDragEnd.bind(this, dragDropTarget);\n // We need to add in data so that on Firefox we show the ghost element when dragging\n onDragStart = function (event) {\n var options = dragDropOptions;\n if (options && options.onDragStart) {\n options.onDragStart(options.context.data, options.context.index, _this._selection.getSelection(), event);\n }\n _this._isDragging = true;\n if (event.dataTransfer) {\n event.dataTransfer.setData('id', root.id);\n }\n };\n events.on(root, 'dragstart', onDragStart);\n events.on(root, 'mousedown', onMouseDown);\n events.on(root, 'dragend', onDragEnd);\n }\n activeTarget = {\n target: dragDropTarget,\n dispose: function () {\n if (_this._activeTargets[key] === activeTarget) {\n delete _this._activeTargets[key];\n }\n if (root) {\n for (var _i = 0, handlers_1 = handlers; _i < handlers_1.length; _i++) {\n var handler = handlers_1[_i];\n _this._events.off(root, handler.eventName, handler.callback);\n }\n if (isDroppable) {\n events.off(root, 'dragenter', onDragEnter);\n events.off(root, 'dragleave', onDragLeave);\n events.off(root, 'dragend', onDragEnd);\n events.off(root, 'dragover', onDragOver);\n events.off(root, 'drop', onDrop);\n }\n if (isDraggable) {\n events.off(root, 'dragstart', onDragStart);\n events.off(root, 'mousedown', onMouseDown);\n events.off(root, 'dragend', onDragEnd);\n }\n }\n },\n };\n this._activeTargets[key] = activeTarget;\n }\n return {\n key: key,\n dispose: function () {\n if (activeTarget) {\n activeTarget.dispose();\n }\n },\n };\n };\n DragDropHelper.prototype.unsubscribe = function (root, key) {\n var activeTarget = this._activeTargets[key];\n if (activeTarget) {\n activeTarget.dispose();\n }\n };\n DragDropHelper.prototype._onDragEnd = function (target, event) {\n var options = target.options;\n if (options.onDragEnd) {\n options.onDragEnd(options.context.data, event);\n }\n };\n /**\n * clear drag data when mouse up on body\n */\n DragDropHelper.prototype._onMouseUp = function (event) {\n this._isDragging = false;\n if (this._dragData) {\n for (var _i = 0, _a = Object.keys(this._activeTargets); _i < _a.length; _i++) {\n var key = _a[_i];\n var activeTarget = this._activeTargets[key];\n if (activeTarget.target.root) {\n this._events.off(activeTarget.target.root, 'mousemove');\n this._events.off(activeTarget.target.root, 'mouseleave');\n }\n }\n if (this._dragData.dropTarget) {\n // raise dragleave event to let dropTarget know it need to remove dropping style\n EventGroup.raise(this._dragData.dropTarget.root, 'dragleave');\n EventGroup.raise(this._dragData.dropTarget.root, 'drop');\n }\n }\n this._dragData = null;\n };\n /**\n * clear drag data when mouse up outside of the document\n */\n DragDropHelper.prototype._onDocumentMouseUp = function (event) {\n var doc = getDocument();\n if (doc && event.target === doc.documentElement) {\n this._onMouseUp(event);\n }\n };\n /**\n * when mouse move over a new drop target while dragging some items,\n * fire dragleave on the old target and fire dragenter to the new target\n * The target will handle style change on dragenter and dragleave events.\n */\n DragDropHelper.prototype._onMouseMove = function (target, event) {\n var \n // use buttons property here since ev.button in some edge case is not updating well during the move.\n // but firefox doesn't support it, so we set the default value when it is not defined.\n _a = event.buttons, \n // use buttons property here since ev.button in some edge case is not updating well during the move.\n // but firefox doesn't support it, so we set the default value when it is not defined.\n buttons = _a === void 0 ? MOUSEMOVE_PRIMARY_BUTTON : _a;\n if (this._dragData && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {\n // cancel mouse down event and return early when the primary button is not pressed\n this._onMouseUp(event);\n return;\n }\n var root = target.root, key = target.key;\n if (this._isDragging) {\n if (this._isDroppable(target)) {\n // we can have nested drop targets in the DOM, like a folder inside a group. In that case, when we drag into\n // the inner target (folder), we first set dropTarget to the inner element. But the same event is bubbled to the\n // outer target too, and we need to prevent the outer one from taking over.\n // So, check if the last dropTarget is not a child of the current.\n if (this._dragData) {\n if (this._dragData.dropTarget &&\n this._dragData.dropTarget.key !== key &&\n !this._isChild(root, this._dragData.dropTarget.root)) {\n if (this._dragEnterCounts[this._dragData.dropTarget.key] > 0) {\n EventGroup.raise(this._dragData.dropTarget.root, 'dragleave');\n EventGroup.raise(root, 'dragenter');\n this._dragData.dropTarget = target;\n }\n }\n }\n }\n }\n };\n /**\n * when mouse leave a target while dragging some items, fire dragleave to the target\n */\n DragDropHelper.prototype._onMouseLeave = function (target, event) {\n if (this._isDragging) {\n if (this._dragData && this._dragData.dropTarget && this._dragData.dropTarget.key === target.key) {\n EventGroup.raise(target.root, 'dragleave');\n this._dragData.dropTarget = undefined;\n }\n }\n };\n /**\n * when mouse down on a draggable item, we start to track dragdata.\n */\n DragDropHelper.prototype._onMouseDown = function (target, event) {\n if (event.button !== MOUSEDOWN_PRIMARY_BUTTON) {\n // Ignore anything except the primary button.\n return;\n }\n if (this._isDraggable(target)) {\n this._dragData = {\n clientX: event.clientX,\n clientY: event.clientY,\n eventTarget: event.target,\n dragTarget: target,\n };\n for (var _i = 0, _a = Object.keys(this._activeTargets); _i < _a.length; _i++) {\n var key = _a[_i];\n var activeTarget = this._activeTargets[key];\n if (activeTarget.target.root) {\n this._events.on(activeTarget.target.root, 'mousemove', this._onMouseMove.bind(this, activeTarget.target));\n this._events.on(activeTarget.target.root, 'mouseleave', this._onMouseLeave.bind(this, activeTarget.target));\n }\n }\n }\n else {\n this._dragData = null;\n }\n };\n /**\n * determine whether the child target is a descendant of the parent\n */\n DragDropHelper.prototype._isChild = function (parentElement, childElement) {\n while (childElement && childElement.parentElement) {\n if (childElement.parentElement === parentElement) {\n return true;\n }\n childElement = childElement.parentElement;\n }\n return false;\n };\n DragDropHelper.prototype._isDraggable = function (target) {\n var options = target.options;\n return !!(options.canDrag && options.canDrag(options.context.data));\n };\n DragDropHelper.prototype._isDroppable = function (target) {\n // TODO: take the drag item into consideration to prevent dragging an item into the same group\n var options = target.options;\n var dragContext = this._dragData && this._dragData.dragTarget ? this._dragData.dragTarget.options.context : undefined;\n return !!(options.canDrop && options.canDrop(options.context, dragContext));\n };\n return DragDropHelper;\n}());\nexport { DragDropHelper };\n//# sourceMappingURL=DragDropHelper.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Async, EventGroup, KeyCodes, elementContains, findScrollableParent, getParent, getDocument, getWindow, isElementTabbable, css, initializeComponentRef, FocusRects, } from '../../Utilities';\nimport { SelectionMode } from './interfaces';\n// Selection definitions:\n//\n// Anchor index: the point from which a range selection starts.\n// Focus index: the point from which layout movement originates from.\n//\n// These two can differ. Tests:\n//\n// If you start at index 5\n// Shift click to index 10\n// The focus is 10, the anchor is 5.\n// If you shift click at index 0\n// The anchor remains at 5, the items between 0 and 5 are selected and everything else is cleared.\n// If you click index 8\n// The anchor and focus are set to 8.\nvar SELECTION_DISABLED_ATTRIBUTE_NAME = 'data-selection-disabled';\nvar SELECTION_INDEX_ATTRIBUTE_NAME = 'data-selection-index';\nvar SELECTION_SPAN_ATTRIBUTE_NAME = 'data-selection-span';\nvar SELECTION_TOGGLE_ATTRIBUTE_NAME = 'data-selection-toggle';\nvar SELECTION_INVOKE_ATTRIBUTE_NAME = 'data-selection-invoke';\nvar SELECTION_INVOKE_TOUCH_ATTRIBUTE_NAME = 'data-selection-touch-invoke';\nvar SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME = 'data-selection-all-toggle';\nvar SELECTION_SELECT_ATTRIBUTE_NAME = 'data-selection-select';\n/**\n * {@docCategory Selection}\n */\nvar SelectionZone = /** @class */ (function (_super) {\n __extends(SelectionZone, _super);\n function SelectionZone(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n /**\n * In some cases, the consuming scenario requires to set focus on a row without having SelectionZone\n * react to the event. Note that focus events in IE \\<= 11 will occur asynchronously after .focus() has\n * been called on an element, so we need a flag to store the idea that we will bypass the \"next\"\n * focus event that occurs. This method does that.\n */\n _this.ignoreNextFocus = function () {\n _this._handleNextFocus(false);\n };\n _this._onSelectionChange = function () {\n var selection = _this.props.selection;\n var isModal = selection.isModal && selection.isModal();\n _this.setState({\n isModal: isModal,\n });\n };\n _this._onMouseDownCapture = function (ev) {\n var target = ev.target;\n if (document.activeElement !== target && !elementContains(document.activeElement, target)) {\n _this.ignoreNextFocus();\n return;\n }\n if (!elementContains(target, _this._root.current)) {\n return;\n }\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n _this.ignoreNextFocus();\n break;\n }\n target = getParent(target);\n }\n };\n /**\n * When we focus an item, for single/multi select scenarios, we should try to select it immediately\n * as long as the focus did not originate from a mouse down/touch event. For those cases, we handle them\n * specially.\n */\n _this._onFocus = function (ev) {\n var target = ev.target;\n var selection = _this.props.selection;\n var isToggleModifierPressed = _this._isCtrlPressed || _this._isMetaPressed;\n var selectionMode = _this._getSelectionMode();\n if (_this._shouldHandleFocus && selectionMode !== SelectionMode.none) {\n var isToggle = _this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME);\n var itemRoot = _this._findItemRoot(target);\n if (!isToggle && itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n var span = _this._getItemSpan(itemRoot);\n if (span === undefined) {\n if (isToggleModifierPressed) {\n // set anchor only.\n selection.setIndexSelected(index, selection.isIndexSelected(index), true);\n if (_this.props.enterModalOnTouch && _this._isTouch && selection.setModal) {\n selection.setModal(true);\n _this._setIsTouch(false);\n }\n }\n else {\n if (_this.props.isSelectedOnFocus) {\n _this._onItemSurfaceClick('focus', index);\n }\n }\n }\n }\n }\n _this._handleNextFocus(false);\n };\n _this._onMouseDown = function (ev) {\n _this._updateModifiers(ev);\n var toggleWithoutModifierPressed = _this.props.toggleWithoutModifierPressed;\n var target = ev.target;\n var itemRoot = _this._findItemRoot(target);\n // No-op if selection is disabled\n if (_this._isSelectionDisabled(target)) {\n return;\n }\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {\n break;\n }\n else if (itemRoot) {\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {\n break;\n }\n else if (_this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n break;\n }\n else if ((target === itemRoot || _this._shouldAutoSelect(target)) &&\n !_this._isShiftPressed &&\n !_this._isCtrlPressed &&\n !_this._isMetaPressed &&\n !toggleWithoutModifierPressed) {\n _this._onInvokeMouseDown(ev, _this._getItemIndex(itemRoot), _this._getItemSpan(itemRoot));\n break;\n }\n else if (_this.props.disableAutoSelectOnInputElements &&\n (target.tagName === 'A' || target.tagName === 'BUTTON' || target.tagName === 'INPUT')) {\n return;\n }\n }\n target = getParent(target);\n }\n };\n _this._onTouchStartCapture = function (ev) {\n _this._setIsTouch(true);\n };\n _this._onClick = function (ev) {\n var _a = _this.props.enableTouchInvocationTarget, enableTouchInvocationTarget = _a === void 0 ? false : _a;\n _this._updateModifiers(ev);\n var target = ev.target;\n var itemRoot = _this._findItemRoot(target);\n var isSelectionDisabled = _this._isSelectionDisabled(target);\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {\n if (!isSelectionDisabled) {\n _this._onToggleAllClick(ev);\n }\n break;\n }\n else if (itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n var span = _this._getItemSpan(itemRoot);\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {\n if (!isSelectionDisabled) {\n if (_this._isShiftPressed) {\n _this._onItemSurfaceClick('click', index, span);\n }\n else {\n _this._onToggleClick(ev, index, span);\n }\n }\n break;\n }\n else if ((_this._isTouch &&\n enableTouchInvocationTarget &&\n _this._hasAttribute(target, SELECTION_INVOKE_TOUCH_ATTRIBUTE_NAME)) ||\n _this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n if (span === undefined) {\n // Items should be invokable even if selection is disabled.\n _this._onInvokeClick(ev, index);\n }\n break;\n }\n else if (target === itemRoot) {\n if (!isSelectionDisabled) {\n _this._onItemSurfaceClick('click', index, span);\n }\n break;\n }\n else if (target.tagName === 'A' || target.tagName === 'BUTTON' || target.tagName === 'INPUT') {\n return;\n }\n }\n target = getParent(target);\n }\n };\n _this._onContextMenu = function (ev) {\n var target = ev.target;\n var _a = _this.props, onItemContextMenu = _a.onItemContextMenu, selection = _a.selection;\n if (onItemContextMenu) {\n var itemRoot = _this._findItemRoot(target);\n if (itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n _this._onInvokeMouseDown(ev, index);\n var skipPreventDefault = onItemContextMenu(selection.getItems()[index], index, ev.nativeEvent);\n // In order to keep back compat, if the value here is undefined, then we should still\n // call preventDefault(). Only in the case where true is explicitly returned should\n // the call be skipped.\n if (!skipPreventDefault) {\n ev.preventDefault();\n }\n }\n }\n };\n /**\n * In multi selection, if you double click within an item's root (but not within the invoke element or\n * input elements), we should execute the invoke handler.\n */\n _this._onDoubleClick = function (ev) {\n var target = ev.target;\n var onItemInvoked = _this.props.onItemInvoked;\n var itemRoot = _this._findItemRoot(target);\n if (itemRoot && onItemInvoked && !_this._isInputElement(target)) {\n var index = _this._getItemIndex(itemRoot);\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME) ||\n _this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n break;\n }\n else if (target === itemRoot) {\n _this._onInvokeClick(ev, index);\n break;\n }\n target = getParent(target);\n }\n target = getParent(target);\n }\n };\n _this._onKeyDownCapture = function (ev) {\n _this._updateModifiers(ev);\n _this._handleNextFocus(true);\n };\n _this._onKeyDown = function (ev) {\n _this._updateModifiers(ev);\n var target = ev.target;\n var isSelectionDisabled = _this._isSelectionDisabled(target);\n var _a = _this.props, selection = _a.selection, selectionClearedOnEscapePress = _a.selectionClearedOnEscapePress;\n // eslint-disable-next-line deprecation/deprecation\n var isSelectAllKey = ev.which === KeyCodes.a && (_this._isCtrlPressed || _this._isMetaPressed);\n // eslint-disable-next-line deprecation/deprecation\n var isClearSelectionKey = ev.which === KeyCodes.escape;\n // Ignore key downs from input elements.\n if (_this._isInputElement(target)) {\n // A key was pressed while an item in this zone was focused.\n return;\n }\n var selectionMode = _this._getSelectionMode();\n // If ctrl-a is pressed, select all (if all are not already selected.)\n if (isSelectAllKey && selectionMode === SelectionMode.multiple && !selection.isAllSelected()) {\n if (!isSelectionDisabled) {\n selection.setAllSelected(true);\n }\n ev.stopPropagation();\n ev.preventDefault();\n return;\n }\n // If escape is pressed and the component is configured to clear on escape press,\n // clear selection (if any are selected.)\n if (selectionClearedOnEscapePress && isClearSelectionKey && selection.getSelectedCount() > 0) {\n if (!isSelectionDisabled) {\n selection.setAllSelected(false);\n }\n ev.stopPropagation();\n ev.preventDefault();\n return;\n }\n var itemRoot = _this._findItemRoot(target);\n // If a key was pressed within an item, we should treat \"enters\" as invokes and \"space\" as toggle\n if (itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n var span = _this._getItemSpan(itemRoot);\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {\n // For toggle elements, assuming they are rendered as buttons, they will generate a click event,\n // so we can no-op for any keydowns in this case.\n break;\n }\n else if (_this._shouldAutoSelect(target)) {\n if (!isSelectionDisabled && span === undefined) {\n // If the event went to an element which should trigger auto-select, select it and then let\n // the default behavior kick in.\n _this._onInvokeMouseDown(ev, index, span);\n }\n break;\n }\n else if (\n // eslint-disable-next-line deprecation/deprecation\n (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) &&\n (target.tagName === 'BUTTON' ||\n target.tagName === 'A' ||\n target.tagName === 'INPUT' ||\n target.tagName === 'SUMMARY')) {\n return false;\n }\n else if (target === itemRoot) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n if (span === undefined) {\n // Items should be invokable even if selection is disabled.\n _this._onInvokeClick(ev, index);\n ev.preventDefault();\n }\n return;\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (ev.which === KeyCodes.space) {\n if (!isSelectionDisabled) {\n _this._onToggleClick(ev, index, span);\n }\n ev.preventDefault();\n return;\n }\n break;\n }\n target = getParent(target);\n }\n }\n };\n _this._events = new EventGroup(_this);\n _this._async = new Async(_this);\n initializeComponentRef(_this);\n var selection = _this.props.selection;\n // Reflect the initial modal state of selection into the state.\n var isModal = selection.isModal && selection.isModal();\n _this.state = {\n isModal: isModal,\n };\n return _this;\n }\n SelectionZone.getDerivedStateFromProps = function (nextProps, prevState) {\n var isModal = nextProps.selection.isModal && nextProps.selection.isModal();\n return __assign(__assign({}, prevState), { isModal: isModal });\n };\n SelectionZone.prototype.componentDidMount = function () {\n var win = getWindow(this._root.current);\n // Track the latest modifier keys globally.\n this._events.on(win, 'keydown, keyup', this._updateModifiers, true);\n this._events.on(document, 'click', this._findScrollParentAndTryClearOnEmptyClick);\n this._events.on(document.body, 'touchstart', this._onTouchStartCapture, true);\n this._events.on(document.body, 'touchend', this._onTouchStartCapture, true);\n // Subscribe to the selection to keep modal state updated.\n this._events.on(this.props.selection, 'change', this._onSelectionChange);\n };\n SelectionZone.prototype.render = function () {\n var isModal = this.state.isModal;\n return (React.createElement(\"div\", { className: css('ms-SelectionZone', this.props.className, {\n 'ms-SelectionZone--modal': !!isModal,\n }), ref: this._root, onKeyDown: this._onKeyDown, onMouseDown: this._onMouseDown, onKeyDownCapture: this._onKeyDownCapture, onClick: this._onClick, role: \"presentation\", onDoubleClick: this._onDoubleClick, onContextMenu: this._onContextMenu, onMouseDownCapture: this._onMouseDownCapture, onFocusCapture: this._onFocus, \"data-selection-is-modal\": isModal ? true : undefined },\n this.props.children,\n React.createElement(FocusRects, null)));\n };\n SelectionZone.prototype.componentDidUpdate = function (previousProps) {\n var selection = this.props.selection;\n if (selection !== previousProps.selection) {\n // Whenever selection changes, update the subscripton to keep modal state updated.\n this._events.off(previousProps.selection);\n this._events.on(selection, 'change', this._onSelectionChange);\n }\n };\n SelectionZone.prototype.componentWillUnmount = function () {\n this._events.dispose();\n this._async.dispose();\n };\n SelectionZone.prototype._isSelectionDisabled = function (target) {\n if (this._getSelectionMode() === SelectionMode.none) {\n return true;\n }\n while (target !== this._root.current) {\n if (this._hasAttribute(target, SELECTION_DISABLED_ATTRIBUTE_NAME)) {\n return true;\n }\n target = getParent(target);\n }\n return false;\n };\n SelectionZone.prototype._onToggleAllClick = function (ev) {\n var selection = this.props.selection;\n var selectionMode = this._getSelectionMode();\n if (selectionMode === SelectionMode.multiple) {\n selection.toggleAllSelected();\n ev.stopPropagation();\n ev.preventDefault();\n }\n };\n SelectionZone.prototype._onToggleClick = function (ev, index, span) {\n var selection = this.props.selection;\n var selectionMode = this._getSelectionMode();\n selection.setChangeEvents(false);\n if (this.props.enterModalOnTouch &&\n this._isTouch &&\n (span !== undefined ? !selection.isRangeSelected(index, span) : !selection.isIndexSelected(index)) &&\n selection.setModal) {\n selection.setModal(true);\n this._setIsTouch(false);\n }\n if (selectionMode === SelectionMode.multiple) {\n if (span !== undefined) {\n selection.toggleRangeSelected(index, span);\n }\n else {\n selection.toggleIndexSelected(index);\n }\n }\n else if (selectionMode === SelectionMode.single) {\n if (span === undefined || span === 1) {\n var isSelected = selection.isIndexSelected(index);\n var isModal = selection.isModal && selection.isModal();\n selection.setAllSelected(false);\n selection.setIndexSelected(index, !isSelected, true);\n if (isModal && selection.setModal) {\n // Since the above call to setAllSelected(false) clears modal state,\n // restore it. This occurs because the SelectionMode of the Selection\n // may differ from the SelectionZone.\n selection.setModal(true);\n }\n }\n }\n else {\n selection.setChangeEvents(true);\n return;\n }\n selection.setChangeEvents(true);\n ev.stopPropagation();\n // NOTE: ev.preventDefault is not called for toggle clicks, because this will kill the browser behavior\n // for checkboxes if you use a checkbox for the toggle.\n };\n SelectionZone.prototype._onInvokeClick = function (ev, index) {\n var _a = this.props, selection = _a.selection, onItemInvoked = _a.onItemInvoked;\n if (onItemInvoked) {\n onItemInvoked(selection.getItems()[index], index, ev.nativeEvent);\n ev.preventDefault();\n ev.stopPropagation();\n }\n };\n SelectionZone.prototype._onItemSurfaceClick = function (type, index, span) {\n var _a;\n var _b = this.props, selection = _b.selection, toggleWithoutModifierPressed = _b.toggleWithoutModifierPressed;\n var isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;\n var selectionMode = this._getSelectionMode();\n if (selectionMode === SelectionMode.multiple) {\n if (this._isShiftPressed && !this._isTabPressed) {\n if (span !== undefined) {\n (_a = selection.selectToRange) === null || _a === void 0 ? void 0 : _a.call(selection, index, span, !isToggleModifierPressed);\n }\n else {\n selection.selectToIndex(index, !isToggleModifierPressed);\n }\n }\n else if (type === 'click' && (isToggleModifierPressed || toggleWithoutModifierPressed)) {\n if (span !== undefined) {\n selection.toggleRangeSelected(index, span);\n }\n else {\n selection.toggleIndexSelected(index);\n }\n }\n else {\n this._clearAndSelectIndex(index, span);\n }\n }\n else if (selectionMode === SelectionMode.single) {\n this._clearAndSelectIndex(index, span);\n }\n };\n SelectionZone.prototype._onInvokeMouseDown = function (ev, index, span) {\n var selection = this.props.selection;\n if (span !== undefined) {\n if (selection.isRangeSelected(index, span)) {\n return;\n }\n }\n else {\n // Only do work if item is not selected.\n if (selection.isIndexSelected(index)) {\n return;\n }\n }\n this._clearAndSelectIndex(index, span);\n };\n /**\n * To avoid high startup cost of traversing the DOM on component mount,\n * defer finding the scrollable parent until a click interaction.\n *\n * The styles will probably already calculated since we're running in a click handler,\n * so this is less likely to cause layout thrashing then doing it in mount.\n */\n SelectionZone.prototype._findScrollParentAndTryClearOnEmptyClick = function (ev) {\n var scrollParent = findScrollableParent(this._root.current);\n // unbind this handler and replace binding with a binding on the actual scrollable parent\n this._events.off(document, 'click', this._findScrollParentAndTryClearOnEmptyClick);\n this._events.on(scrollParent, 'click', this._tryClearOnEmptyClick);\n // If we clicked inside the scrollable parent, call through to the handler on this click.\n if ((scrollParent && ev.target instanceof Node && scrollParent.contains(ev.target)) || scrollParent === ev.target) {\n this._tryClearOnEmptyClick(ev);\n }\n };\n SelectionZone.prototype._tryClearOnEmptyClick = function (ev) {\n if (!this.props.selectionPreservedOnEmptyClick && this._isNonHandledClick(ev.target)) {\n this.props.selection.setAllSelected(false);\n }\n };\n SelectionZone.prototype._clearAndSelectIndex = function (index, span) {\n var _a;\n var _b = this.props, selection = _b.selection, _c = _b.selectionClearedOnSurfaceClick, selectionClearedOnSurfaceClick = _c === void 0 ? true : _c;\n var isAlreadySingleSelected = (span === undefined || span === 1) && selection.getSelectedCount() === 1 && selection.isIndexSelected(index);\n if (!isAlreadySingleSelected && selectionClearedOnSurfaceClick) {\n var isModal = selection.isModal && selection.isModal();\n selection.setChangeEvents(false);\n selection.setAllSelected(false);\n if (span !== undefined) {\n (_a = selection.setRangeSelected) === null || _a === void 0 ? void 0 : _a.call(selection, index, span, true, true);\n }\n else {\n selection.setIndexSelected(index, true, true);\n }\n if (isModal || (this.props.enterModalOnTouch && this._isTouch)) {\n if (selection.setModal) {\n selection.setModal(true);\n }\n if (this._isTouch) {\n this._setIsTouch(false);\n }\n }\n selection.setChangeEvents(true);\n }\n };\n /**\n * We need to track the modifier key states so that when focus events occur, which do not contain\n * modifier states in the Event object, we know how to behave.\n */\n SelectionZone.prototype._updateModifiers = function (ev) {\n this._isShiftPressed = ev.shiftKey;\n this._isCtrlPressed = ev.ctrlKey;\n this._isMetaPressed = ev.metaKey;\n // eslint-disable-next-line deprecation/deprecation\n var keyCode = ev.keyCode;\n this._isTabPressed = keyCode ? keyCode === KeyCodes.tab : false;\n };\n SelectionZone.prototype._findItemRoot = function (target) {\n var selection = this.props.selection;\n while (target !== this._root.current) {\n var indexValue = target.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME);\n var index = Number(indexValue);\n if (indexValue !== null && index >= 0 && index < selection.getItems().length) {\n break;\n }\n target = getParent(target);\n }\n if (target === this._root.current) {\n return undefined;\n }\n return target;\n };\n SelectionZone.prototype._getItemIndex = function (itemRoot) {\n var _a;\n var indexValue = parseInt((_a = itemRoot.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME)) !== null && _a !== void 0 ? _a : '', 10);\n return isNaN(indexValue) ? -1 : indexValue;\n };\n SelectionZone.prototype._getItemSpan = function (itemRoot) {\n var _a;\n var spanValue = parseInt((_a = itemRoot.getAttribute(SELECTION_SPAN_ATTRIBUTE_NAME)) !== null && _a !== void 0 ? _a : '', 10);\n return isNaN(spanValue) ? undefined : spanValue;\n };\n SelectionZone.prototype._shouldAutoSelect = function (element) {\n return this._hasAttribute(element, SELECTION_SELECT_ATTRIBUTE_NAME);\n };\n SelectionZone.prototype._hasAttribute = function (element, attributeName) {\n var isToggle = false;\n while (!isToggle && element !== this._root.current) {\n var value = element.getAttribute(attributeName);\n if (value === 'false') {\n isToggle = false;\n break;\n }\n isToggle = value === 'true';\n element = getParent(element);\n }\n return isToggle;\n };\n SelectionZone.prototype._isInputElement = function (element) {\n return (element.tagName === 'INPUT' ||\n element.tagName === 'TEXTAREA' ||\n element.getAttribute('contenteditable') === 'true' ||\n element.getAttribute('contenteditable') === '');\n };\n SelectionZone.prototype._isNonHandledClick = function (element) {\n var doc = getDocument();\n if (doc && element) {\n while (element && element !== doc.documentElement) {\n if (isElementTabbable(element) || element.hasAttribute('data-selection-index')) {\n return false;\n }\n element = getParent(element);\n }\n }\n return true;\n };\n SelectionZone.prototype._handleNextFocus = function (handleFocus) {\n var _this = this;\n if (this._shouldHandleFocusTimeoutId) {\n this._async.clearTimeout(this._shouldHandleFocusTimeoutId);\n this._shouldHandleFocusTimeoutId = undefined;\n }\n this._shouldHandleFocus = handleFocus;\n if (handleFocus) {\n this._async.setTimeout(function () {\n _this._shouldHandleFocus = false;\n }, 100);\n }\n };\n SelectionZone.prototype._setIsTouch = function (isTouch) {\n var _this = this;\n if (this._isTouchTimeoutId) {\n this._async.clearTimeout(this._isTouchTimeoutId);\n this._isTouchTimeoutId = undefined;\n }\n this._isTouch = true;\n if (isTouch) {\n this._async.setTimeout(function () {\n _this._isTouch = false;\n }, 300);\n }\n };\n SelectionZone.prototype._getSelectionMode = function () {\n var selection = this.props.selection;\n var _a = this.props.selectionMode, selectionMode = _a === void 0 ? selection ? selection.mode : SelectionMode.none : _a;\n return selectionMode;\n };\n SelectionZone.defaultProps = {\n isSelectedOnFocus: true,\n toggleWithoutModifierPressed: false,\n selectionMode: SelectionMode.multiple,\n selectionClearedOnEscapePress: true,\n };\n return SelectionZone;\n}(React.Component));\nexport { SelectionZone };\n//# sourceMappingURL=SelectionZone.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none',\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-a13498cf.woff') format('woff')\"),\n },\n icons: {\n GlobalNavButton: '\\uE700',\n ChevronDown: '\\uE70D',\n ChevronUp: '\\uE70E',\n Edit: '\\uE70F',\n Add: '\\uE710',\n Cancel: '\\uE711',\n More: '\\uE712',\n Settings: '\\uE713',\n Mail: '\\uE715',\n Filter: '\\uE71C',\n Search: '\\uE721',\n Share: '\\uE72D',\n BlockedSite: '\\uE72F',\n FavoriteStar: '\\uE734',\n FavoriteStarFill: '\\uE735',\n CheckMark: '\\uE73E',\n Delete: '\\uE74D',\n ChevronLeft: '\\uE76B',\n ChevronRight: '\\uE76C',\n Calendar: '\\uE787',\n Megaphone: '\\uE789',\n Undo: '\\uE7A7',\n Flag: '\\uE7C1',\n Page: '\\uE7C3',\n Pinned: '\\uE840',\n View: '\\uE890',\n Clear: '\\uE894',\n Download: '\\uE896',\n Upload: '\\uE898',\n Folder: '\\uE8B7',\n Sort: '\\uE8CB',\n AlignRight: '\\uE8E2',\n AlignLeft: '\\uE8E4',\n Tag: '\\uE8EC',\n AddFriend: '\\uE8FA',\n Info: '\\uE946',\n SortLines: '\\uE9D0',\n List: '\\uEA37',\n CircleRing: '\\uEA3A',\n Heart: '\\uEB51',\n HeartFill: '\\uEB52',\n Tiles: '\\uECA5',\n Embed: '\\uECCE',\n Glimmer: '\\uECF4',\n Ascending: '\\uEDC0',\n Descending: '\\uEDC1',\n SortUp: '\\uEE68',\n SortDown: '\\uEE69',\n SyncToPC: '\\uEE6E',\n LargeGrid: '\\uEECB',\n SkypeCheck: '\\uEF80',\n SkypeClock: '\\uEF81',\n SkypeMinus: '\\uEF82',\n ClearFilter: '\\uEF8F',\n Flow: '\\uEF90',\n StatusCircleCheckmark: '\\uF13E',\n MoreVertical: '\\uF2BC',\n },\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-0\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-0-467ee27f.woff') format('woff')\")\n },\n icons: {\n 'PageLink': '\\uE302',\n 'CommentSolid': '\\uE30E',\n 'ChangeEntitlements': '\\uE310',\n 'Installation': '\\uE311',\n 'WebAppBuilderModule': '\\uE313',\n 'WebAppBuilderFragment': '\\uE314',\n 'WebAppBuilderSlot': '\\uE315',\n 'BullseyeTargetEdit': '\\uE319',\n 'WebAppBuilderFragmentCreate': '\\uE31B',\n 'PageData': '\\uE31C',\n 'PageHeaderEdit': '\\uE31D',\n 'ProductList': '\\uE31E',\n 'UnpublishContent': '\\uE31F',\n 'DependencyAdd': '\\uE344',\n 'DependencyRemove': '\\uE345',\n 'EntitlementPolicy': '\\uE346',\n 'EntitlementRedemption': '\\uE347',\n 'SchoolDataSyncLogo': '\\uE34C',\n 'PinSolid12': '\\uE352',\n 'PinSolidOff12': '\\uE353',\n 'AddLink': '\\uE35E',\n 'SharepointAppIcon16': '\\uE365',\n 'DataflowsLink': '\\uE366',\n 'TimePicker': '\\uE367',\n 'UserWarning': '\\uE368',\n 'ComplianceAudit': '\\uE369',\n 'InternetSharing': '\\uE704',\n 'Brightness': '\\uE706',\n 'MapPin': '\\uE707',\n 'Airplane': '\\uE709',\n 'Tablet': '\\uE70A',\n 'QuickNote': '\\uE70B',\n 'Video': '\\uE714',\n 'People': '\\uE716',\n 'Phone': '\\uE717',\n 'Pin': '\\uE718',\n 'Shop': '\\uE719',\n 'Stop': '\\uE71A',\n 'Link': '\\uE71B',\n 'AllApps': '\\uE71D',\n 'Zoom': '\\uE71E',\n 'ZoomOut': '\\uE71F',\n 'Microphone': '\\uE720',\n 'Camera': '\\uE722',\n 'Attach': '\\uE723',\n 'Send': '\\uE724',\n 'FavoriteList': '\\uE728',\n 'PageSolid': '\\uE729',\n 'Forward': '\\uE72A',\n 'Back': '\\uE72B',\n 'Refresh': '\\uE72C',\n 'Lock': '\\uE72E',\n 'ReportHacked': '\\uE730',\n 'EMI': '\\uE731',\n 'MiniLink': '\\uE732',\n 'Blocked': '\\uE733',\n 'ReadingMode': '\\uE736',\n 'Favicon': '\\uE737',\n 'Remove': '\\uE738',\n 'Checkbox': '\\uE739',\n 'CheckboxComposite': '\\uE73A',\n 'CheckboxFill': '\\uE73B',\n 'CheckboxIndeterminate': '\\uE73C',\n 'CheckboxCompositeReversed': '\\uE73D',\n 'BackToWindow': '\\uE73F',\n 'FullScreen': '\\uE740',\n 'Print': '\\uE749',\n 'Up': '\\uE74A',\n 'Down': '\\uE74B',\n 'OEM': '\\uE74C',\n 'Save': '\\uE74E',\n 'ReturnKey': '\\uE751',\n 'Cloud': '\\uE753',\n 'Flashlight': '\\uE754',\n 'CommandPrompt': '\\uE756',\n 'Sad': '\\uE757',\n 'RealEstate': '\\uE758',\n 'SIPMove': '\\uE759',\n 'EraseTool': '\\uE75C',\n 'GripperTool': '\\uE75E',\n 'Dialpad': '\\uE75F',\n 'PageLeft': '\\uE760',\n 'PageRight': '\\uE761',\n 'MultiSelect': '\\uE762',\n 'KeyboardClassic': '\\uE765',\n 'Play': '\\uE768',\n 'Pause': '\\uE769',\n 'InkingTool': '\\uE76D',\n 'Emoji2': '\\uE76E',\n 'GripperBarHorizontal': '\\uE76F',\n 'System': '\\uE770',\n 'Personalize': '\\uE771',\n 'SearchAndApps': '\\uE773',\n 'Globe': '\\uE774',\n 'EaseOfAccess': '\\uE776',\n 'ContactInfo': '\\uE779',\n 'Unpin': '\\uE77A',\n 'Contact': '\\uE77B',\n 'Memo': '\\uE77C',\n 'IncomingCall': '\\uE77E'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-0.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-1\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-1-4d521695.woff') format('woff')\")\n },\n icons: {\n 'Paste': '\\uE77F',\n 'WindowsLogo': '\\uE782',\n 'Error': '\\uE783',\n 'GripperBarVertical': '\\uE784',\n 'Unlock': '\\uE785',\n 'Slideshow': '\\uE786',\n 'Trim': '\\uE78A',\n 'AutoEnhanceOn': '\\uE78D',\n 'AutoEnhanceOff': '\\uE78E',\n 'Color': '\\uE790',\n 'SaveAs': '\\uE792',\n 'Light': '\\uE793',\n 'Filters': '\\uE795',\n 'AspectRatio': '\\uE799',\n 'Contrast': '\\uE7A1',\n 'Redo': '\\uE7A6',\n 'Crop': '\\uE7A8',\n 'PhotoCollection': '\\uE7AA',\n 'Album': '\\uE7AB',\n 'Rotate': '\\uE7AD',\n 'PanoIndicator': '\\uE7B0',\n 'Translate': '\\uE7B2',\n 'RedEye': '\\uE7B3',\n 'ViewOriginal': '\\uE7B4',\n 'ThumbnailView': '\\uE7B6',\n 'Package': '\\uE7B8',\n 'Telemarketer': '\\uE7B9',\n 'Warning': '\\uE7BA',\n 'Financial': '\\uE7BB',\n 'Education': '\\uE7BE',\n 'ShoppingCart': '\\uE7BF',\n 'Train': '\\uE7C0',\n 'Move': '\\uE7C2',\n 'TouchPointer': '\\uE7C9',\n 'Merge': '\\uE7D5',\n 'TurnRight': '\\uE7DB',\n 'Ferry': '\\uE7E3',\n 'Highlight': '\\uE7E6',\n 'PowerButton': '\\uE7E8',\n 'Tab': '\\uE7E9',\n 'Admin': '\\uE7EF',\n 'TVMonitor': '\\uE7F4',\n 'Speakers': '\\uE7F5',\n 'Game': '\\uE7FC',\n 'HorizontalTabKey': '\\uE7FD',\n 'UnstackSelected': '\\uE7FE',\n 'StackIndicator': '\\uE7FF',\n 'Nav2DMapView': '\\uE800',\n 'StreetsideSplitMinimize': '\\uE802',\n 'Car': '\\uE804',\n 'Bus': '\\uE806',\n 'EatDrink': '\\uE807',\n 'SeeDo': '\\uE808',\n 'LocationCircle': '\\uE80E',\n 'Home': '\\uE80F',\n 'SwitcherStartEnd': '\\uE810',\n 'ParkingLocation': '\\uE811',\n 'IncidentTriangle': '\\uE814',\n 'Touch': '\\uE815',\n 'MapDirections': '\\uE816',\n 'CaretHollow': '\\uE817',\n 'CaretSolid': '\\uE818',\n 'History': '\\uE81C',\n 'Location': '\\uE81D',\n 'MapLayers': '\\uE81E',\n 'SearchNearby': '\\uE820',\n 'Work': '\\uE821',\n 'Recent': '\\uE823',\n 'Hotel': '\\uE824',\n 'Bank': '\\uE825',\n 'LocationDot': '\\uE827',\n 'Dictionary': '\\uE82D',\n 'ChromeBack': '\\uE830',\n 'FolderOpen': '\\uE838',\n 'PinnedFill': '\\uE842',\n 'RevToggleKey': '\\uE845',\n 'USB': '\\uE88E',\n 'Previous': '\\uE892',\n 'Next': '\\uE893',\n 'Sync': '\\uE895',\n 'Help': '\\uE897',\n 'Emoji': '\\uE899',\n 'MailForward': '\\uE89C',\n 'ClosePane': '\\uE89F',\n 'OpenPane': '\\uE8A0',\n 'PreviewLink': '\\uE8A1',\n 'ZoomIn': '\\uE8A3',\n 'Bookmarks': '\\uE8A4',\n 'Document': '\\uE8A5',\n 'ProtectedDocument': '\\uE8A6',\n 'OpenInNewWindow': '\\uE8A7',\n 'MailFill': '\\uE8A8',\n 'ViewAll': '\\uE8A9',\n 'Switch': '\\uE8AB',\n 'Rename': '\\uE8AC',\n 'Go': '\\uE8AD',\n 'Remote': '\\uE8AF',\n 'SelectAll': '\\uE8B3',\n 'Orientation': '\\uE8B4',\n 'Import': '\\uE8B5'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-1.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-2\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-2-63c99abf.woff') format('woff')\")\n },\n icons: {\n 'Picture': '\\uE8B9',\n 'ChromeClose': '\\uE8BB',\n 'ShowResults': '\\uE8BC',\n 'Message': '\\uE8BD',\n 'CalendarDay': '\\uE8BF',\n 'CalendarWeek': '\\uE8C0',\n 'MailReplyAll': '\\uE8C2',\n 'Read': '\\uE8C3',\n 'Cut': '\\uE8C6',\n 'PaymentCard': '\\uE8C7',\n 'Copy': '\\uE8C8',\n 'Important': '\\uE8C9',\n 'MailReply': '\\uE8CA',\n 'GotoToday': '\\uE8D1',\n 'Font': '\\uE8D2',\n 'FontColor': '\\uE8D3',\n 'FolderFill': '\\uE8D5',\n 'Permissions': '\\uE8D7',\n 'DisableUpdates': '\\uE8D8',\n 'Unfavorite': '\\uE8D9',\n 'Italic': '\\uE8DB',\n 'Underline': '\\uE8DC',\n 'Bold': '\\uE8DD',\n 'MoveToFolder': '\\uE8DE',\n 'Dislike': '\\uE8E0',\n 'Like': '\\uE8E1',\n 'AlignCenter': '\\uE8E3',\n 'OpenFile': '\\uE8E5',\n 'ClearSelection': '\\uE8E6',\n 'FontDecrease': '\\uE8E7',\n 'FontIncrease': '\\uE8E8',\n 'FontSize': '\\uE8E9',\n 'CellPhone': '\\uE8EA',\n 'RepeatOne': '\\uE8ED',\n 'RepeatAll': '\\uE8EE',\n 'Calculator': '\\uE8EF',\n 'Library': '\\uE8F1',\n 'PostUpdate': '\\uE8F3',\n 'NewFolder': '\\uE8F4',\n 'CalendarReply': '\\uE8F5',\n 'UnsyncFolder': '\\uE8F6',\n 'SyncFolder': '\\uE8F7',\n 'BlockContact': '\\uE8F8',\n 'Accept': '\\uE8FB',\n 'BulletedList': '\\uE8FD',\n 'Preview': '\\uE8FF',\n 'News': '\\uE900',\n 'Chat': '\\uE901',\n 'Group': '\\uE902',\n 'World': '\\uE909',\n 'Comment': '\\uE90A',\n 'DockLeft': '\\uE90C',\n 'DockRight': '\\uE90D',\n 'Repair': '\\uE90F',\n 'Accounts': '\\uE910',\n 'Street': '\\uE913',\n 'RadioBullet': '\\uE915',\n 'Stopwatch': '\\uE916',\n 'Clock': '\\uE917',\n 'WorldClock': '\\uE918',\n 'AlarmClock': '\\uE919',\n 'Photo': '\\uE91B',\n 'ActionCenter': '\\uE91C',\n 'Hospital': '\\uE91D',\n 'Timer': '\\uE91E',\n 'FullCircleMask': '\\uE91F',\n 'LocationFill': '\\uE920',\n 'ChromeMinimize': '\\uE921',\n 'ChromeRestore': '\\uE923',\n 'Annotation': '\\uE924',\n 'Fingerprint': '\\uE928',\n 'Handwriting': '\\uE929',\n 'ChromeFullScreen': '\\uE92D',\n 'Completed': '\\uE930',\n 'Label': '\\uE932',\n 'FlickDown': '\\uE935',\n 'FlickUp': '\\uE936',\n 'FlickLeft': '\\uE937',\n 'FlickRight': '\\uE938',\n 'MiniExpand': '\\uE93A',\n 'MiniContract': '\\uE93B',\n 'Streaming': '\\uE93E',\n 'MusicInCollection': '\\uE940',\n 'OneDriveLogo': '\\uE941',\n 'CompassNW': '\\uE942',\n 'Code': '\\uE943',\n 'LightningBolt': '\\uE945',\n 'CalculatorMultiply': '\\uE947',\n 'CalculatorAddition': '\\uE948',\n 'CalculatorSubtract': '\\uE949',\n 'CalculatorPercentage': '\\uE94C',\n 'CalculatorEqualTo': '\\uE94E',\n 'PrintfaxPrinterFile': '\\uE956',\n 'StorageOptical': '\\uE958',\n 'Communications': '\\uE95A',\n 'Headset': '\\uE95B',\n 'Health': '\\uE95E',\n 'Webcam2': '\\uE960',\n 'FrontCamera': '\\uE96B',\n 'ChevronUpSmall': '\\uE96D'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-2.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-3\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-3-089e217a.woff') format('woff')\")\n },\n icons: {\n 'ChevronDownSmall': '\\uE96E',\n 'ChevronLeftSmall': '\\uE96F',\n 'ChevronRightSmall': '\\uE970',\n 'ChevronUpMed': '\\uE971',\n 'ChevronDownMed': '\\uE972',\n 'ChevronLeftMed': '\\uE973',\n 'ChevronRightMed': '\\uE974',\n 'Devices2': '\\uE975',\n 'PC1': '\\uE977',\n 'PresenceChickletVideo': '\\uE979',\n 'Reply': '\\uE97A',\n 'HalfAlpha': '\\uE97E',\n 'ConstructionCone': '\\uE98F',\n 'DoubleChevronLeftMed': '\\uE991',\n 'Volume0': '\\uE992',\n 'Volume1': '\\uE993',\n 'Volume2': '\\uE994',\n 'Volume3': '\\uE995',\n 'Chart': '\\uE999',\n 'Robot': '\\uE99A',\n 'Manufacturing': '\\uE99C',\n 'LockSolid': '\\uE9A2',\n 'FitPage': '\\uE9A6',\n 'FitWidth': '\\uE9A7',\n 'BidiLtr': '\\uE9AA',\n 'BidiRtl': '\\uE9AB',\n 'RightDoubleQuote': '\\uE9B1',\n 'Sunny': '\\uE9BD',\n 'CloudWeather': '\\uE9BE',\n 'Cloudy': '\\uE9BF',\n 'PartlyCloudyDay': '\\uE9C0',\n 'PartlyCloudyNight': '\\uE9C1',\n 'ClearNight': '\\uE9C2',\n 'RainShowersDay': '\\uE9C3',\n 'Rain': '\\uE9C4',\n 'Thunderstorms': '\\uE9C6',\n 'RainSnow': '\\uE9C7',\n 'Snow': '\\uE9C8',\n 'BlowingSnow': '\\uE9C9',\n 'Frigid': '\\uE9CA',\n 'Fog': '\\uE9CB',\n 'Squalls': '\\uE9CC',\n 'Duststorm': '\\uE9CD',\n 'Unknown': '\\uE9CE',\n 'Precipitation': '\\uE9CF',\n 'Ribbon': '\\uE9D1',\n 'AreaChart': '\\uE9D2',\n 'Assign': '\\uE9D3',\n 'FlowChart': '\\uE9D4',\n 'CheckList': '\\uE9D5',\n 'Diagnostic': '\\uE9D9',\n 'Generate': '\\uE9DA',\n 'LineChart': '\\uE9E6',\n 'Equalizer': '\\uE9E9',\n 'BarChartHorizontal': '\\uE9EB',\n 'BarChartVertical': '\\uE9EC',\n 'Freezing': '\\uE9EF',\n 'FunnelChart': '\\uE9F1',\n 'Processing': '\\uE9F5',\n 'Quantity': '\\uE9F8',\n 'ReportDocument': '\\uE9F9',\n 'StackColumnChart': '\\uE9FC',\n 'SnowShowerDay': '\\uE9FD',\n 'HailDay': '\\uEA00',\n 'WorkFlow': '\\uEA01',\n 'HourGlass': '\\uEA03',\n 'StoreLogoMed20': '\\uEA04',\n 'TimeSheet': '\\uEA05',\n 'TriangleSolid': '\\uEA08',\n 'UpgradeAnalysis': '\\uEA0B',\n 'VideoSolid': '\\uEA0C',\n 'RainShowersNight': '\\uEA0F',\n 'SnowShowerNight': '\\uEA11',\n 'Teamwork': '\\uEA12',\n 'HailNight': '\\uEA13',\n 'PeopleAdd': '\\uEA15',\n 'Glasses': '\\uEA16',\n 'DateTime2': '\\uEA17',\n 'Shield': '\\uEA18',\n 'Header1': '\\uEA19',\n 'PageAdd': '\\uEA1A',\n 'NumberedList': '\\uEA1C',\n 'PowerBILogo': '\\uEA1E',\n 'Info2': '\\uEA1F',\n 'MusicInCollectionFill': '\\uEA36',\n 'Asterisk': '\\uEA38',\n 'ErrorBadge': '\\uEA39',\n 'CircleFill': '\\uEA3B',\n 'Record2': '\\uEA3F',\n 'AllAppsMirrored': '\\uEA40',\n 'BookmarksMirrored': '\\uEA41',\n 'BulletedListMirrored': '\\uEA42',\n 'CaretHollowMirrored': '\\uEA45',\n 'CaretSolidMirrored': '\\uEA46',\n 'ChromeBackMirrored': '\\uEA47',\n 'ClearSelectionMirrored': '\\uEA48',\n 'ClosePaneMirrored': '\\uEA49',\n 'DockLeftMirrored': '\\uEA4C',\n 'DoubleChevronLeftMedMirrored': '\\uEA4D',\n 'GoMirrored': '\\uEA4F'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-3.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-4\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-4-a656cc0a.woff') format('woff')\")\n },\n icons: {\n 'HelpMirrored': '\\uEA51',\n 'ImportMirrored': '\\uEA52',\n 'ImportAllMirrored': '\\uEA53',\n 'ListMirrored': '\\uEA55',\n 'MailForwardMirrored': '\\uEA56',\n 'MailReplyMirrored': '\\uEA57',\n 'MailReplyAllMirrored': '\\uEA58',\n 'MiniContractMirrored': '\\uEA59',\n 'MiniExpandMirrored': '\\uEA5A',\n 'OpenPaneMirrored': '\\uEA5B',\n 'ParkingLocationMirrored': '\\uEA5E',\n 'SendMirrored': '\\uEA63',\n 'ShowResultsMirrored': '\\uEA65',\n 'ThumbnailViewMirrored': '\\uEA67',\n 'Media': '\\uEA69',\n 'Devices3': '\\uEA6C',\n 'Focus': '\\uEA6F',\n 'VideoLightOff': '\\uEA74',\n 'Lightbulb': '\\uEA80',\n 'StatusTriangle': '\\uEA82',\n 'VolumeDisabled': '\\uEA85',\n 'Puzzle': '\\uEA86',\n 'EmojiNeutral': '\\uEA87',\n 'EmojiDisappointed': '\\uEA88',\n 'HomeSolid': '\\uEA8A',\n 'Ringer': '\\uEA8F',\n 'PDF': '\\uEA90',\n 'HeartBroken': '\\uEA92',\n 'StoreLogo16': '\\uEA96',\n 'MultiSelectMirrored': '\\uEA98',\n 'Broom': '\\uEA99',\n 'AddToShoppingList': '\\uEA9A',\n 'Cocktails': '\\uEA9D',\n 'Wines': '\\uEABF',\n 'Articles': '\\uEAC1',\n 'Cycling': '\\uEAC7',\n 'DietPlanNotebook': '\\uEAC8',\n 'Pill': '\\uEACB',\n 'ExerciseTracker': '\\uEACC',\n 'HandsFree': '\\uEAD0',\n 'Medical': '\\uEAD4',\n 'Running': '\\uEADA',\n 'Weights': '\\uEADB',\n 'Trackers': '\\uEADF',\n 'AddNotes': '\\uEAE3',\n 'AllCurrency': '\\uEAE4',\n 'BarChart4': '\\uEAE7',\n 'CirclePlus': '\\uEAEE',\n 'Coffee': '\\uEAEF',\n 'Cotton': '\\uEAF3',\n 'Market': '\\uEAFC',\n 'Money': '\\uEAFD',\n 'PieDouble': '\\uEB04',\n 'PieSingle': '\\uEB05',\n 'RemoveFilter': '\\uEB08',\n 'Savings': '\\uEB0B',\n 'Sell': '\\uEB0C',\n 'StockDown': '\\uEB0F',\n 'StockUp': '\\uEB11',\n 'Lamp': '\\uEB19',\n 'Source': '\\uEB1B',\n 'MSNVideos': '\\uEB1C',\n 'Cricket': '\\uEB1E',\n 'Golf': '\\uEB1F',\n 'Baseball': '\\uEB20',\n 'Soccer': '\\uEB21',\n 'MoreSports': '\\uEB22',\n 'AutoRacing': '\\uEB24',\n 'CollegeHoops': '\\uEB25',\n 'CollegeFootball': '\\uEB26',\n 'ProFootball': '\\uEB27',\n 'ProHockey': '\\uEB28',\n 'Rugby': '\\uEB2D',\n 'SubstitutionsIn': '\\uEB31',\n 'Tennis': '\\uEB33',\n 'Arrivals': '\\uEB34',\n 'Design': '\\uEB3C',\n 'Website': '\\uEB41',\n 'Drop': '\\uEB42',\n 'HistoricalWeather': '\\uEB43',\n 'SkiResorts': '\\uEB45',\n 'Snowflake': '\\uEB46',\n 'BusSolid': '\\uEB47',\n 'FerrySolid': '\\uEB48',\n 'AirplaneSolid': '\\uEB4C',\n 'TrainSolid': '\\uEB4D',\n 'Ticket': '\\uEB54',\n 'WifiWarning4': '\\uEB63',\n 'Devices4': '\\uEB66',\n 'AzureLogo': '\\uEB6A',\n 'BingLogo': '\\uEB6B',\n 'MSNLogo': '\\uEB6C',\n 'OutlookLogoInverse': '\\uEB6D',\n 'OfficeLogo': '\\uEB6E',\n 'SkypeLogo': '\\uEB6F',\n 'Door': '\\uEB75',\n 'EditMirrored': '\\uEB7E',\n 'GiftCard': '\\uEB8E',\n 'DoubleBookmark': '\\uEB8F',\n 'StatusErrorFull': '\\uEB90'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-4.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-5\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-5-f95ba260.woff') format('woff')\")\n },\n icons: {\n 'Certificate': '\\uEB95',\n 'FastForward': '\\uEB9D',\n 'Rewind': '\\uEB9E',\n 'Photo2': '\\uEB9F',\n 'OpenSource': '\\uEBC2',\n 'Movers': '\\uEBCD',\n 'CloudDownload': '\\uEBD3',\n 'Family': '\\uEBDA',\n 'WindDirection': '\\uEBE6',\n 'Bug': '\\uEBE8',\n 'SiteScan': '\\uEBEC',\n 'BrowserScreenShot': '\\uEBED',\n 'F12DevTools': '\\uEBEE',\n 'CSS': '\\uEBEF',\n 'JS': '\\uEBF0',\n 'DeliveryTruck': '\\uEBF4',\n 'ReminderPerson': '\\uEBF7',\n 'ReminderGroup': '\\uEBF8',\n 'ReminderTime': '\\uEBF9',\n 'TabletMode': '\\uEBFC',\n 'Umbrella': '\\uEC04',\n 'NetworkTower': '\\uEC05',\n 'CityNext': '\\uEC06',\n 'CityNext2': '\\uEC07',\n 'Section': '\\uEC0C',\n 'OneNoteLogoInverse': '\\uEC0D',\n 'ToggleFilled': '\\uEC11',\n 'ToggleBorder': '\\uEC12',\n 'SliderThumb': '\\uEC13',\n 'ToggleThumb': '\\uEC14',\n 'Documentation': '\\uEC17',\n 'Badge': '\\uEC1B',\n 'Giftbox': '\\uEC1F',\n 'VisualStudioLogo': '\\uEC22',\n 'HomeGroup': '\\uEC26',\n 'ExcelLogoInverse': '\\uEC28',\n 'WordLogoInverse': '\\uEC29',\n 'PowerPointLogoInverse': '\\uEC2A',\n 'Cafe': '\\uEC32',\n 'SpeedHigh': '\\uEC4A',\n 'Commitments': '\\uEC4D',\n 'ThisPC': '\\uEC4E',\n 'MusicNote': '\\uEC4F',\n 'MicOff': '\\uEC54',\n 'PlaybackRate1x': '\\uEC57',\n 'EdgeLogo': '\\uEC60',\n 'CompletedSolid': '\\uEC61',\n 'AlbumRemove': '\\uEC62',\n 'MessageFill': '\\uEC70',\n 'TabletSelected': '\\uEC74',\n 'MobileSelected': '\\uEC75',\n 'LaptopSelected': '\\uEC76',\n 'TVMonitorSelected': '\\uEC77',\n 'DeveloperTools': '\\uEC7A',\n 'Shapes': '\\uEC7C',\n 'InsertTextBox': '\\uEC7D',\n 'LowerBrightness': '\\uEC8A',\n 'WebComponents': '\\uEC8B',\n 'OfflineStorage': '\\uEC8C',\n 'DOM': '\\uEC8D',\n 'CloudUpload': '\\uEC8E',\n 'ScrollUpDown': '\\uEC8F',\n 'DateTime': '\\uEC92',\n 'Event': '\\uECA3',\n 'Cake': '\\uECA4',\n 'Org': '\\uECA6',\n 'PartyLeader': '\\uECA7',\n 'DRM': '\\uECA8',\n 'CloudAdd': '\\uECA9',\n 'AppIconDefault': '\\uECAA',\n 'Photo2Add': '\\uECAB',\n 'Photo2Remove': '\\uECAC',\n 'Calories': '\\uECAD',\n 'POI': '\\uECAF',\n 'AddTo': '\\uECC8',\n 'RadioBtnOff': '\\uECCA',\n 'RadioBtnOn': '\\uECCB',\n 'ExploreContent': '\\uECCD',\n 'Product': '\\uECDC',\n 'ProgressLoopInner': '\\uECDE',\n 'ProgressLoopOuter': '\\uECDF',\n 'Blocked2': '\\uECE4',\n 'FangBody': '\\uECEB',\n 'Toolbox': '\\uECED',\n 'PageHeader': '\\uECEE',\n 'ChatInviteFriend': '\\uECFE',\n 'Brush': '\\uECFF',\n 'Shirt': '\\uED00',\n 'Crown': '\\uED01',\n 'Diamond': '\\uED02',\n 'ScaleUp': '\\uED09',\n 'QRCode': '\\uED14',\n 'Feedback': '\\uED15',\n 'SharepointLogoInverse': '\\uED18',\n 'YammerLogo': '\\uED19',\n 'Hide': '\\uED1A',\n 'Uneditable': '\\uED1D',\n 'ReturnToSession': '\\uED24',\n 'OpenFolderHorizontal': '\\uED25',\n 'CalendarMirrored': '\\uED28'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-5.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-6\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-6-ef6fd590.woff') format('woff')\")\n },\n icons: {\n 'SwayLogoInverse': '\\uED29',\n 'OutOfOffice': '\\uED34',\n 'Trophy': '\\uED3F',\n 'ReopenPages': '\\uED50',\n 'EmojiTabSymbols': '\\uED58',\n 'AADLogo': '\\uED68',\n 'AccessLogo': '\\uED69',\n 'AdminALogoInverse32': '\\uED6A',\n 'AdminCLogoInverse32': '\\uED6B',\n 'AdminDLogoInverse32': '\\uED6C',\n 'AdminELogoInverse32': '\\uED6D',\n 'AdminLLogoInverse32': '\\uED6E',\n 'AdminMLogoInverse32': '\\uED6F',\n 'AdminOLogoInverse32': '\\uED70',\n 'AdminPLogoInverse32': '\\uED71',\n 'AdminSLogoInverse32': '\\uED72',\n 'AdminYLogoInverse32': '\\uED73',\n 'DelveLogoInverse': '\\uED76',\n 'ExchangeLogoInverse': '\\uED78',\n 'LyncLogo': '\\uED79',\n 'OfficeVideoLogoInverse': '\\uED7A',\n 'SocialListeningLogo': '\\uED7C',\n 'VisioLogoInverse': '\\uED7D',\n 'Balloons': '\\uED7E',\n 'Cat': '\\uED7F',\n 'MailAlert': '\\uED80',\n 'MailCheck': '\\uED81',\n 'MailLowImportance': '\\uED82',\n 'MailPause': '\\uED83',\n 'MailRepeat': '\\uED84',\n 'SecurityGroup': '\\uED85',\n 'Table': '\\uED86',\n 'VoicemailForward': '\\uED87',\n 'VoicemailReply': '\\uED88',\n 'Waffle': '\\uED89',\n 'RemoveEvent': '\\uED8A',\n 'EventInfo': '\\uED8B',\n 'ForwardEvent': '\\uED8C',\n 'WipePhone': '\\uED8D',\n 'AddOnlineMeeting': '\\uED8E',\n 'JoinOnlineMeeting': '\\uED8F',\n 'RemoveLink': '\\uED90',\n 'PeopleBlock': '\\uED91',\n 'PeopleRepeat': '\\uED92',\n 'PeopleAlert': '\\uED93',\n 'PeoplePause': '\\uED94',\n 'TransferCall': '\\uED95',\n 'AddPhone': '\\uED96',\n 'UnknownCall': '\\uED97',\n 'NoteReply': '\\uED98',\n 'NoteForward': '\\uED99',\n 'NotePinned': '\\uED9A',\n 'RemoveOccurrence': '\\uED9B',\n 'Timeline': '\\uED9C',\n 'EditNote': '\\uED9D',\n 'CircleHalfFull': '\\uED9E',\n 'Room': '\\uED9F',\n 'Unsubscribe': '\\uEDA0',\n 'Subscribe': '\\uEDA1',\n 'HardDrive': '\\uEDA2',\n 'RecurringTask': '\\uEDB2',\n 'TaskManager': '\\uEDB7',\n 'TaskManagerMirrored': '\\uEDB8',\n 'Combine': '\\uEDBB',\n 'Split': '\\uEDBC',\n 'DoubleChevronUp': '\\uEDBD',\n 'DoubleChevronLeft': '\\uEDBE',\n 'DoubleChevronRight': '\\uEDBF',\n 'TextBox': '\\uEDC2',\n 'TextField': '\\uEDC3',\n 'NumberField': '\\uEDC4',\n 'Dropdown': '\\uEDC5',\n 'PenWorkspace': '\\uEDC6',\n 'BookingsLogo': '\\uEDC7',\n 'ClassNotebookLogoInverse': '\\uEDC8',\n 'DelveAnalyticsLogo': '\\uEDCA',\n 'DocsLogoInverse': '\\uEDCB',\n 'Dynamics365Logo': '\\uEDCC',\n 'DynamicSMBLogo': '\\uEDCD',\n 'OfficeAssistantLogo': '\\uEDCE',\n 'OfficeStoreLogo': '\\uEDCF',\n 'OneNoteEduLogoInverse': '\\uEDD0',\n 'PlannerLogo': '\\uEDD1',\n 'PowerApps': '\\uEDD2',\n 'Suitcase': '\\uEDD3',\n 'ProjectLogoInverse': '\\uEDD4',\n 'CaretLeft8': '\\uEDD5',\n 'CaretRight8': '\\uEDD6',\n 'CaretUp8': '\\uEDD7',\n 'CaretDown8': '\\uEDD8',\n 'CaretLeftSolid8': '\\uEDD9',\n 'CaretRightSolid8': '\\uEDDA',\n 'CaretUpSolid8': '\\uEDDB',\n 'CaretDownSolid8': '\\uEDDC',\n 'ClearFormatting': '\\uEDDD',\n 'Superscript': '\\uEDDE',\n 'Subscript': '\\uEDDF',\n 'Strikethrough': '\\uEDE0',\n 'Export': '\\uEDE1',\n 'ExportMirrored': '\\uEDE2'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-6.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-7\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-7-2b97bb99.woff') format('woff')\")\n },\n icons: {\n 'SingleBookmark': '\\uEDFF',\n 'SingleBookmarkSolid': '\\uEE00',\n 'DoubleChevronDown': '\\uEE04',\n 'FollowUser': '\\uEE05',\n 'ReplyAll': '\\uEE0A',\n 'WorkforceManagement': '\\uEE0F',\n 'RecruitmentManagement': '\\uEE12',\n 'Questionnaire': '\\uEE19',\n 'ManagerSelfService': '\\uEE23',\n 'ProductionFloorManagement': '\\uEE29',\n 'ProductRelease': '\\uEE2E',\n 'ProductVariant': '\\uEE30',\n 'ReplyMirrored': '\\uEE35',\n 'ReplyAllMirrored': '\\uEE36',\n 'Medal': '\\uEE38',\n 'AddGroup': '\\uEE3D',\n 'QuestionnaireMirrored': '\\uEE4B',\n 'CloudImportExport': '\\uEE55',\n 'TemporaryUser': '\\uEE58',\n 'CaretSolid16': '\\uEE62',\n 'GroupedDescending': '\\uEE66',\n 'GroupedAscending': '\\uEE67',\n 'AwayStatus': '\\uEE6A',\n 'MyMoviesTV': '\\uEE6C',\n 'GenericScan': '\\uEE6F',\n 'AustralianRules': '\\uEE70',\n 'WifiEthernet': '\\uEE77',\n 'TrackersMirrored': '\\uEE92',\n 'DateTimeMirrored': '\\uEE93',\n 'StopSolid': '\\uEE95',\n 'DoubleChevronUp12': '\\uEE96',\n 'DoubleChevronDown12': '\\uEE97',\n 'DoubleChevronLeft12': '\\uEE98',\n 'DoubleChevronRight12': '\\uEE99',\n 'CalendarAgenda': '\\uEE9A',\n 'ConnectVirtualMachine': '\\uEE9D',\n 'AddEvent': '\\uEEB5',\n 'AssetLibrary': '\\uEEB6',\n 'DataConnectionLibrary': '\\uEEB7',\n 'DocLibrary': '\\uEEB8',\n 'FormLibrary': '\\uEEB9',\n 'FormLibraryMirrored': '\\uEEBA',\n 'ReportLibrary': '\\uEEBB',\n 'ReportLibraryMirrored': '\\uEEBC',\n 'ContactCard': '\\uEEBD',\n 'CustomList': '\\uEEBE',\n 'CustomListMirrored': '\\uEEBF',\n 'IssueTracking': '\\uEEC0',\n 'IssueTrackingMirrored': '\\uEEC1',\n 'PictureLibrary': '\\uEEC2',\n 'OfficeAddinsLogo': '\\uEEC7',\n 'OfflineOneDriveParachute': '\\uEEC8',\n 'OfflineOneDriveParachuteDisabled': '\\uEEC9',\n 'TriangleSolidUp12': '\\uEECC',\n 'TriangleSolidDown12': '\\uEECD',\n 'TriangleSolidLeft12': '\\uEECE',\n 'TriangleSolidRight12': '\\uEECF',\n 'TriangleUp12': '\\uEED0',\n 'TriangleDown12': '\\uEED1',\n 'TriangleLeft12': '\\uEED2',\n 'TriangleRight12': '\\uEED3',\n 'ArrowUpRight8': '\\uEED4',\n 'ArrowDownRight8': '\\uEED5',\n 'DocumentSet': '\\uEED6',\n 'GoToDashboard': '\\uEEED',\n 'DelveAnalytics': '\\uEEEE',\n 'ArrowUpRightMirrored8': '\\uEEEF',\n 'ArrowDownRightMirrored8': '\\uEEF0',\n 'CompanyDirectory': '\\uEF0D',\n 'OpenEnrollment': '\\uEF1C',\n 'CompanyDirectoryMirrored': '\\uEF2B',\n 'OneDriveAdd': '\\uEF32',\n 'ProfileSearch': '\\uEF35',\n 'Header2': '\\uEF36',\n 'Header3': '\\uEF37',\n 'Header4': '\\uEF38',\n 'RingerSolid': '\\uEF3A',\n 'Eyedropper': '\\uEF3C',\n 'MarketDown': '\\uEF42',\n 'CalendarWorkWeek': '\\uEF51',\n 'SidePanel': '\\uEF52',\n 'GlobeFavorite': '\\uEF53',\n 'CaretTopLeftSolid8': '\\uEF54',\n 'CaretTopRightSolid8': '\\uEF55',\n 'ViewAll2': '\\uEF56',\n 'DocumentReply': '\\uEF57',\n 'PlayerSettings': '\\uEF58',\n 'ReceiptForward': '\\uEF59',\n 'ReceiptReply': '\\uEF5A',\n 'ReceiptCheck': '\\uEF5B',\n 'Fax': '\\uEF5C',\n 'RecurringEvent': '\\uEF5D',\n 'ReplyAlt': '\\uEF5E',\n 'ReplyAllAlt': '\\uEF5F',\n 'EditStyle': '\\uEF60',\n 'EditMail': '\\uEF61',\n 'Lifesaver': '\\uEF62',\n 'LifesaverLock': '\\uEF63',\n 'InboxCheck': '\\uEF64',\n 'FolderSearch': '\\uEF65'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-7.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-8\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-8-6fdf1528.woff') format('woff')\")\n },\n icons: {\n 'CollapseMenu': '\\uEF66',\n 'ExpandMenu': '\\uEF67',\n 'Boards': '\\uEF68',\n 'SunAdd': '\\uEF69',\n 'SunQuestionMark': '\\uEF6A',\n 'LandscapeOrientation': '\\uEF6B',\n 'DocumentSearch': '\\uEF6C',\n 'PublicCalendar': '\\uEF6D',\n 'PublicContactCard': '\\uEF6E',\n 'PublicEmail': '\\uEF6F',\n 'PublicFolder': '\\uEF70',\n 'WordDocument': '\\uEF71',\n 'PowerPointDocument': '\\uEF72',\n 'ExcelDocument': '\\uEF73',\n 'GroupedList': '\\uEF74',\n 'ClassroomLogo': '\\uEF75',\n 'Sections': '\\uEF76',\n 'EditPhoto': '\\uEF77',\n 'Starburst': '\\uEF78',\n 'ShareiOS': '\\uEF79',\n 'AirTickets': '\\uEF7A',\n 'PencilReply': '\\uEF7B',\n 'Tiles2': '\\uEF7C',\n 'SkypeCircleCheck': '\\uEF7D',\n 'SkypeCircleClock': '\\uEF7E',\n 'SkypeCircleMinus': '\\uEF7F',\n 'SkypeMessage': '\\uEF83',\n 'ClosedCaption': '\\uEF84',\n 'ATPLogo': '\\uEF85',\n 'OfficeFormsLogoInverse': '\\uEF86',\n 'RecycleBin': '\\uEF87',\n 'EmptyRecycleBin': '\\uEF88',\n 'Hide2': '\\uEF89',\n 'Breadcrumb': '\\uEF8C',\n 'BirthdayCake': '\\uEF8D',\n 'TimeEntry': '\\uEF95',\n 'CRMProcesses': '\\uEFB1',\n 'PageEdit': '\\uEFB6',\n 'PageArrowRight': '\\uEFB8',\n 'PageRemove': '\\uEFBA',\n 'Database': '\\uEFC7',\n 'DataManagementSettings': '\\uEFC8',\n 'CRMServices': '\\uEFD2',\n 'EditContact': '\\uEFD3',\n 'ConnectContacts': '\\uEFD4',\n 'AppIconDefaultAdd': '\\uEFDA',\n 'AppIconDefaultList': '\\uEFDE',\n 'ActivateOrders': '\\uEFE0',\n 'DeactivateOrders': '\\uEFE1',\n 'ProductCatalog': '\\uEFE8',\n 'ScatterChart': '\\uEFEB',\n 'AccountActivity': '\\uEFF4',\n 'DocumentManagement': '\\uEFFC',\n 'CRMReport': '\\uEFFE',\n 'KnowledgeArticle': '\\uF000',\n 'Relationship': '\\uF003',\n 'HomeVerify': '\\uF00E',\n 'ZipFolder': '\\uF012',\n 'SurveyQuestions': '\\uF01B',\n 'TextDocument': '\\uF029',\n 'TextDocumentShared': '\\uF02B',\n 'PageCheckedOut': '\\uF02C',\n 'PageShared': '\\uF02D',\n 'SaveAndClose': '\\uF038',\n 'Script': '\\uF03A',\n 'Archive': '\\uF03F',\n 'ActivityFeed': '\\uF056',\n 'Compare': '\\uF057',\n 'EventDate': '\\uF059',\n 'ArrowUpRight': '\\uF069',\n 'CaretRight': '\\uF06B',\n 'SetAction': '\\uF071',\n 'ChatBot': '\\uF08B',\n 'CaretSolidLeft': '\\uF08D',\n 'CaretSolidDown': '\\uF08E',\n 'CaretSolidRight': '\\uF08F',\n 'CaretSolidUp': '\\uF090',\n 'PowerAppsLogo': '\\uF091',\n 'PowerApps2Logo': '\\uF092',\n 'SearchIssue': '\\uF09A',\n 'SearchIssueMirrored': '\\uF09B',\n 'FabricAssetLibrary': '\\uF09C',\n 'FabricDataConnectionLibrary': '\\uF09D',\n 'FabricDocLibrary': '\\uF09E',\n 'FabricFormLibrary': '\\uF09F',\n 'FabricFormLibraryMirrored': '\\uF0A0',\n 'FabricReportLibrary': '\\uF0A1',\n 'FabricReportLibraryMirrored': '\\uF0A2',\n 'FabricPublicFolder': '\\uF0A3',\n 'FabricFolderSearch': '\\uF0A4',\n 'FabricMovetoFolder': '\\uF0A5',\n 'FabricUnsyncFolder': '\\uF0A6',\n 'FabricSyncFolder': '\\uF0A7',\n 'FabricOpenFolderHorizontal': '\\uF0A8',\n 'FabricFolder': '\\uF0A9',\n 'FabricFolderFill': '\\uF0AA',\n 'FabricNewFolder': '\\uF0AB',\n 'FabricPictureLibrary': '\\uF0AC',\n 'PhotoVideoMedia': '\\uF0B1',\n 'AddFavorite': '\\uF0C8'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-8.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-9\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-9-c6162b42.woff') format('woff')\")\n },\n icons: {\n 'AddFavoriteFill': '\\uF0C9',\n 'BufferTimeBefore': '\\uF0CF',\n 'BufferTimeAfter': '\\uF0D0',\n 'BufferTimeBoth': '\\uF0D1',\n 'PublishContent': '\\uF0D4',\n 'ClipboardList': '\\uF0E3',\n 'ClipboardListMirrored': '\\uF0E4',\n 'CannedChat': '\\uF0F2',\n 'SkypeForBusinessLogo': '\\uF0FC',\n 'TabCenter': '\\uF100',\n 'PageCheckedin': '\\uF104',\n 'PageList': '\\uF106',\n 'ReadOutLoud': '\\uF112',\n 'CaretBottomLeftSolid8': '\\uF121',\n 'CaretBottomRightSolid8': '\\uF122',\n 'FolderHorizontal': '\\uF12B',\n 'MicrosoftStaffhubLogo': '\\uF130',\n 'GiftboxOpen': '\\uF133',\n 'StatusCircleOuter': '\\uF136',\n 'StatusCircleInner': '\\uF137',\n 'StatusCircleRing': '\\uF138',\n 'StatusTriangleOuter': '\\uF139',\n 'StatusTriangleInner': '\\uF13A',\n 'StatusTriangleExclamation': '\\uF13B',\n 'StatusCircleExclamation': '\\uF13C',\n 'StatusCircleErrorX': '\\uF13D',\n 'StatusCircleInfo': '\\uF13F',\n 'StatusCircleBlock': '\\uF140',\n 'StatusCircleBlock2': '\\uF141',\n 'StatusCircleQuestionMark': '\\uF142',\n 'StatusCircleSync': '\\uF143',\n 'Toll': '\\uF160',\n 'ExploreContentSingle': '\\uF164',\n 'CollapseContent': '\\uF165',\n 'CollapseContentSingle': '\\uF166',\n 'InfoSolid': '\\uF167',\n 'GroupList': '\\uF168',\n 'ProgressRingDots': '\\uF16A',\n 'CaloriesAdd': '\\uF172',\n 'BranchFork': '\\uF173',\n 'MuteChat': '\\uF17A',\n 'AddHome': '\\uF17B',\n 'AddWork': '\\uF17C',\n 'MobileReport': '\\uF18A',\n 'ScaleVolume': '\\uF18C',\n 'HardDriveGroup': '\\uF18F',\n 'FastMode': '\\uF19A',\n 'ToggleLeft': '\\uF19E',\n 'ToggleRight': '\\uF19F',\n 'TriangleShape': '\\uF1A7',\n 'RectangleShape': '\\uF1A9',\n 'CubeShape': '\\uF1AA',\n 'Trophy2': '\\uF1AE',\n 'BucketColor': '\\uF1B6',\n 'BucketColorFill': '\\uF1B7',\n 'Taskboard': '\\uF1C2',\n 'SingleColumn': '\\uF1D3',\n 'DoubleColumn': '\\uF1D4',\n 'TripleColumn': '\\uF1D5',\n 'ColumnLeftTwoThirds': '\\uF1D6',\n 'ColumnRightTwoThirds': '\\uF1D7',\n 'AccessLogoFill': '\\uF1DB',\n 'AnalyticsLogo': '\\uF1DE',\n 'AnalyticsQuery': '\\uF1DF',\n 'NewAnalyticsQuery': '\\uF1E0',\n 'AnalyticsReport': '\\uF1E1',\n 'WordLogo': '\\uF1E3',\n 'WordLogoFill': '\\uF1E4',\n 'ExcelLogo': '\\uF1E5',\n 'ExcelLogoFill': '\\uF1E6',\n 'OneNoteLogo': '\\uF1E7',\n 'OneNoteLogoFill': '\\uF1E8',\n 'OutlookLogo': '\\uF1E9',\n 'OutlookLogoFill': '\\uF1EA',\n 'PowerPointLogo': '\\uF1EB',\n 'PowerPointLogoFill': '\\uF1EC',\n 'PublisherLogo': '\\uF1ED',\n 'PublisherLogoFill': '\\uF1EE',\n 'ScheduleEventAction': '\\uF1EF',\n 'FlameSolid': '\\uF1F3',\n 'ServerProcesses': '\\uF1FE',\n 'Server': '\\uF201',\n 'SaveAll': '\\uF203',\n 'LinkedInLogo': '\\uF20A',\n 'Decimals': '\\uF218',\n 'SidePanelMirrored': '\\uF221',\n 'ProtectRestrict': '\\uF22A',\n 'Blog': '\\uF22B',\n 'UnknownMirrored': '\\uF22E',\n 'PublicContactCardMirrored': '\\uF230',\n 'GridViewSmall': '\\uF232',\n 'GridViewMedium': '\\uF233',\n 'GridViewLarge': '\\uF234',\n 'Step': '\\uF241',\n 'StepInsert': '\\uF242',\n 'StepShared': '\\uF243',\n 'StepSharedAdd': '\\uF244',\n 'StepSharedInsert': '\\uF245',\n 'ViewDashboard': '\\uF246',\n 'ViewList': '\\uF247'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-9.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-10\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-10-c4ded8e4.woff') format('woff')\")\n },\n icons: {\n 'ViewListGroup': '\\uF248',\n 'ViewListTree': '\\uF249',\n 'TriggerAuto': '\\uF24A',\n 'TriggerUser': '\\uF24B',\n 'PivotChart': '\\uF24C',\n 'StackedBarChart': '\\uF24D',\n 'StackedLineChart': '\\uF24E',\n 'BuildQueue': '\\uF24F',\n 'BuildQueueNew': '\\uF250',\n 'UserFollowed': '\\uF25C',\n 'ContactLink': '\\uF25F',\n 'Stack': '\\uF26F',\n 'Bullseye': '\\uF272',\n 'VennDiagram': '\\uF273',\n 'FiveTileGrid': '\\uF274',\n 'FocalPoint': '\\uF277',\n 'Insert': '\\uF278',\n 'RingerRemove': '\\uF279',\n 'TeamsLogoInverse': '\\uF27A',\n 'TeamsLogo': '\\uF27B',\n 'TeamsLogoFill': '\\uF27C',\n 'SkypeForBusinessLogoFill': '\\uF27D',\n 'SharepointLogo': '\\uF27E',\n 'SharepointLogoFill': '\\uF27F',\n 'DelveLogo': '\\uF280',\n 'DelveLogoFill': '\\uF281',\n 'OfficeVideoLogo': '\\uF282',\n 'OfficeVideoLogoFill': '\\uF283',\n 'ExchangeLogo': '\\uF284',\n 'ExchangeLogoFill': '\\uF285',\n 'Signin': '\\uF286',\n 'DocumentApproval': '\\uF28B',\n 'CloneToDesktop': '\\uF28C',\n 'InstallToDrive': '\\uF28D',\n 'Blur': '\\uF28E',\n 'Build': '\\uF28F',\n 'ProcessMetaTask': '\\uF290',\n 'BranchFork2': '\\uF291',\n 'BranchLocked': '\\uF292',\n 'BranchCommit': '\\uF293',\n 'BranchCompare': '\\uF294',\n 'BranchMerge': '\\uF295',\n 'BranchPullRequest': '\\uF296',\n 'BranchSearch': '\\uF297',\n 'BranchShelveset': '\\uF298',\n 'RawSource': '\\uF299',\n 'MergeDuplicate': '\\uF29A',\n 'RowsGroup': '\\uF29B',\n 'RowsChild': '\\uF29C',\n 'Deploy': '\\uF29D',\n 'Redeploy': '\\uF29E',\n 'ServerEnviroment': '\\uF29F',\n 'VisioDiagram': '\\uF2A0',\n 'HighlightMappedShapes': '\\uF2A1',\n 'TextCallout': '\\uF2A2',\n 'IconSetsFlag': '\\uF2A4',\n 'VisioLogo': '\\uF2A7',\n 'VisioLogoFill': '\\uF2A8',\n 'VisioDocument': '\\uF2A9',\n 'TimelineProgress': '\\uF2AA',\n 'TimelineDelivery': '\\uF2AB',\n 'Backlog': '\\uF2AC',\n 'TeamFavorite': '\\uF2AD',\n 'TaskGroup': '\\uF2AE',\n 'TaskGroupMirrored': '\\uF2AF',\n 'ScopeTemplate': '\\uF2B0',\n 'AssessmentGroupTemplate': '\\uF2B1',\n 'NewTeamProject': '\\uF2B2',\n 'CommentAdd': '\\uF2B3',\n 'CommentNext': '\\uF2B4',\n 'CommentPrevious': '\\uF2B5',\n 'ShopServer': '\\uF2B6',\n 'LocaleLanguage': '\\uF2B7',\n 'QueryList': '\\uF2B8',\n 'UserSync': '\\uF2B9',\n 'UserPause': '\\uF2BA',\n 'StreamingOff': '\\uF2BB',\n 'ArrowTallUpLeft': '\\uF2BD',\n 'ArrowTallUpRight': '\\uF2BE',\n 'ArrowTallDownLeft': '\\uF2BF',\n 'ArrowTallDownRight': '\\uF2C0',\n 'FieldEmpty': '\\uF2C1',\n 'FieldFilled': '\\uF2C2',\n 'FieldChanged': '\\uF2C3',\n 'FieldNotChanged': '\\uF2C4',\n 'RingerOff': '\\uF2C5',\n 'PlayResume': '\\uF2C6',\n 'BulletedList2': '\\uF2C7',\n 'BulletedList2Mirrored': '\\uF2C8',\n 'ImageCrosshair': '\\uF2C9',\n 'GitGraph': '\\uF2CA',\n 'Repo': '\\uF2CB',\n 'RepoSolid': '\\uF2CC',\n 'FolderQuery': '\\uF2CD',\n 'FolderList': '\\uF2CE',\n 'FolderListMirrored': '\\uF2CF',\n 'LocationOutline': '\\uF2D0',\n 'POISolid': '\\uF2D1',\n 'CalculatorNotEqualTo': '\\uF2D2',\n 'BoxSubtractSolid': '\\uF2D3'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-10.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-11\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-11-2a8393d6.woff') format('woff')\")\n },\n icons: {\n 'BoxAdditionSolid': '\\uF2D4',\n 'BoxMultiplySolid': '\\uF2D5',\n 'BoxPlaySolid': '\\uF2D6',\n 'BoxCheckmarkSolid': '\\uF2D7',\n 'CirclePauseSolid': '\\uF2D8',\n 'CirclePause': '\\uF2D9',\n 'MSNVideosSolid': '\\uF2DA',\n 'CircleStopSolid': '\\uF2DB',\n 'CircleStop': '\\uF2DC',\n 'NavigateBack': '\\uF2DD',\n 'NavigateBackMirrored': '\\uF2DE',\n 'NavigateForward': '\\uF2DF',\n 'NavigateForwardMirrored': '\\uF2E0',\n 'UnknownSolid': '\\uF2E1',\n 'UnknownMirroredSolid': '\\uF2E2',\n 'CircleAddition': '\\uF2E3',\n 'CircleAdditionSolid': '\\uF2E4',\n 'FilePDB': '\\uF2E5',\n 'FileTemplate': '\\uF2E6',\n 'FileSQL': '\\uF2E7',\n 'FileJAVA': '\\uF2E8',\n 'FileASPX': '\\uF2E9',\n 'FileCSS': '\\uF2EA',\n 'FileSass': '\\uF2EB',\n 'FileLess': '\\uF2EC',\n 'FileHTML': '\\uF2ED',\n 'JavaScriptLanguage': '\\uF2EE',\n 'CSharpLanguage': '\\uF2EF',\n 'CSharp': '\\uF2F0',\n 'VisualBasicLanguage': '\\uF2F1',\n 'VB': '\\uF2F2',\n 'CPlusPlusLanguage': '\\uF2F3',\n 'CPlusPlus': '\\uF2F4',\n 'FSharpLanguage': '\\uF2F5',\n 'FSharp': '\\uF2F6',\n 'TypeScriptLanguage': '\\uF2F7',\n 'PythonLanguage': '\\uF2F8',\n 'PY': '\\uF2F9',\n 'CoffeeScript': '\\uF2FA',\n 'MarkDownLanguage': '\\uF2FB',\n 'FullWidth': '\\uF2FE',\n 'FullWidthEdit': '\\uF2FF',\n 'Plug': '\\uF300',\n 'PlugSolid': '\\uF301',\n 'PlugConnected': '\\uF302',\n 'PlugDisconnected': '\\uF303',\n 'UnlockSolid': '\\uF304',\n 'Variable': '\\uF305',\n 'Parameter': '\\uF306',\n 'CommentUrgent': '\\uF307',\n 'Storyboard': '\\uF308',\n 'DiffInline': '\\uF309',\n 'DiffSideBySide': '\\uF30A',\n 'ImageDiff': '\\uF30B',\n 'ImagePixel': '\\uF30C',\n 'FileBug': '\\uF30D',\n 'FileCode': '\\uF30E',\n 'FileComment': '\\uF30F',\n 'BusinessHoursSign': '\\uF310',\n 'FileImage': '\\uF311',\n 'FileSymlink': '\\uF312',\n 'AutoFillTemplate': '\\uF313',\n 'WorkItem': '\\uF314',\n 'WorkItemBug': '\\uF315',\n 'LogRemove': '\\uF316',\n 'ColumnOptions': '\\uF317',\n 'Packages': '\\uF318',\n 'BuildIssue': '\\uF319',\n 'AssessmentGroup': '\\uF31A',\n 'VariableGroup': '\\uF31B',\n 'FullHistory': '\\uF31C',\n 'Wheelchair': '\\uF31F',\n 'SingleColumnEdit': '\\uF321',\n 'DoubleColumnEdit': '\\uF322',\n 'TripleColumnEdit': '\\uF323',\n 'ColumnLeftTwoThirdsEdit': '\\uF324',\n 'ColumnRightTwoThirdsEdit': '\\uF325',\n 'StreamLogo': '\\uF329',\n 'PassiveAuthentication': '\\uF32A',\n 'AlertSolid': '\\uF331',\n 'MegaphoneSolid': '\\uF332',\n 'TaskSolid': '\\uF333',\n 'ConfigurationSolid': '\\uF334',\n 'BugSolid': '\\uF335',\n 'CrownSolid': '\\uF336',\n 'Trophy2Solid': '\\uF337',\n 'QuickNoteSolid': '\\uF338',\n 'ConstructionConeSolid': '\\uF339',\n 'PageListSolid': '\\uF33A',\n 'PageListMirroredSolid': '\\uF33B',\n 'StarburstSolid': '\\uF33C',\n 'ReadingModeSolid': '\\uF33D',\n 'SadSolid': '\\uF33E',\n 'HealthSolid': '\\uF33F',\n 'ShieldSolid': '\\uF340',\n 'GiftBoxSolid': '\\uF341',\n 'ShoppingCartSolid': '\\uF342',\n 'MailSolid': '\\uF343',\n 'ChatSolid': '\\uF344',\n 'RibbonSolid': '\\uF345'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-11.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-12\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-12-7e945a1e.woff') format('woff')\")\n },\n icons: {\n 'FinancialSolid': '\\uF346',\n 'FinancialMirroredSolid': '\\uF347',\n 'HeadsetSolid': '\\uF348',\n 'PermissionsSolid': '\\uF349',\n 'ParkingSolid': '\\uF34A',\n 'ParkingMirroredSolid': '\\uF34B',\n 'DiamondSolid': '\\uF34C',\n 'AsteriskSolid': '\\uF34D',\n 'OfflineStorageSolid': '\\uF34E',\n 'BankSolid': '\\uF34F',\n 'DecisionSolid': '\\uF350',\n 'Parachute': '\\uF351',\n 'ParachuteSolid': '\\uF352',\n 'FiltersSolid': '\\uF353',\n 'ColorSolid': '\\uF354',\n 'ReviewSolid': '\\uF355',\n 'ReviewRequestSolid': '\\uF356',\n 'ReviewRequestMirroredSolid': '\\uF357',\n 'ReviewResponseSolid': '\\uF358',\n 'FeedbackRequestSolid': '\\uF359',\n 'FeedbackRequestMirroredSolid': '\\uF35A',\n 'FeedbackResponseSolid': '\\uF35B',\n 'WorkItemBar': '\\uF35C',\n 'WorkItemBarSolid': '\\uF35D',\n 'Separator': '\\uF35E',\n 'NavigateExternalInline': '\\uF35F',\n 'PlanView': '\\uF360',\n 'TimelineMatrixView': '\\uF361',\n 'EngineeringGroup': '\\uF362',\n 'ProjectCollection': '\\uF363',\n 'CaretBottomRightCenter8': '\\uF364',\n 'CaretBottomLeftCenter8': '\\uF365',\n 'CaretTopRightCenter8': '\\uF366',\n 'CaretTopLeftCenter8': '\\uF367',\n 'DonutChart': '\\uF368',\n 'ChevronUnfold10': '\\uF369',\n 'ChevronFold10': '\\uF36A',\n 'DoubleChevronDown8': '\\uF36B',\n 'DoubleChevronUp8': '\\uF36C',\n 'DoubleChevronLeft8': '\\uF36D',\n 'DoubleChevronRight8': '\\uF36E',\n 'ChevronDownEnd6': '\\uF36F',\n 'ChevronUpEnd6': '\\uF370',\n 'ChevronLeftEnd6': '\\uF371',\n 'ChevronRightEnd6': '\\uF372',\n 'ContextMenu': '\\uF37C',\n 'AzureAPIManagement': '\\uF37F',\n 'AzureServiceEndpoint': '\\uF380',\n 'VSTSLogo': '\\uF381',\n 'VSTSAltLogo1': '\\uF382',\n 'VSTSAltLogo2': '\\uF383',\n 'FileTypeSolution': '\\uF387',\n 'WordLogoInverse16': '\\uF390',\n 'WordLogo16': '\\uF391',\n 'WordLogoFill16': '\\uF392',\n 'PowerPointLogoInverse16': '\\uF393',\n 'PowerPointLogo16': '\\uF394',\n 'PowerPointLogoFill16': '\\uF395',\n 'ExcelLogoInverse16': '\\uF396',\n 'ExcelLogo16': '\\uF397',\n 'ExcelLogoFill16': '\\uF398',\n 'OneNoteLogoInverse16': '\\uF399',\n 'OneNoteLogo16': '\\uF39A',\n 'OneNoteLogoFill16': '\\uF39B',\n 'OutlookLogoInverse16': '\\uF39C',\n 'OutlookLogo16': '\\uF39D',\n 'OutlookLogoFill16': '\\uF39E',\n 'PublisherLogoInverse16': '\\uF39F',\n 'PublisherLogo16': '\\uF3A0',\n 'PublisherLogoFill16': '\\uF3A1',\n 'VisioLogoInverse16': '\\uF3A2',\n 'VisioLogo16': '\\uF3A3',\n 'VisioLogoFill16': '\\uF3A4',\n 'TestBeaker': '\\uF3A5',\n 'TestBeakerSolid': '\\uF3A6',\n 'TestExploreSolid': '\\uF3A7',\n 'TestAutoSolid': '\\uF3A8',\n 'TestUserSolid': '\\uF3A9',\n 'TestImpactSolid': '\\uF3AA',\n 'TestPlan': '\\uF3AB',\n 'TestStep': '\\uF3AC',\n 'TestParameter': '\\uF3AD',\n 'TestSuite': '\\uF3AE',\n 'TestCase': '\\uF3AF',\n 'Sprint': '\\uF3B0',\n 'SignOut': '\\uF3B1',\n 'TriggerApproval': '\\uF3B2',\n 'Rocket': '\\uF3B3',\n 'AzureKeyVault': '\\uF3B4',\n 'Onboarding': '\\uF3BA',\n 'Transition': '\\uF3BC',\n 'LikeSolid': '\\uF3BF',\n 'DislikeSolid': '\\uF3C0',\n 'CRMCustomerInsightsApp': '\\uF3C8',\n 'EditCreate': '\\uF3C9',\n 'PlayReverseResume': '\\uF3E4',\n 'PlayReverse': '\\uF3E5',\n 'SearchData': '\\uF3F1',\n 'UnSetColor': '\\uF3F9',\n 'DeclineCall': '\\uF405'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-12.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-13\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-13-c3989a02.woff') format('woff')\")\n },\n icons: {\n 'RectangularClipping': '\\uF407',\n 'TeamsLogo16': '\\uF40A',\n 'TeamsLogoFill16': '\\uF40B',\n 'Spacer': '\\uF40D',\n 'SkypeLogo16': '\\uF40E',\n 'SkypeForBusinessLogo16': '\\uF40F',\n 'SkypeForBusinessLogoFill16': '\\uF410',\n 'FilterSolid': '\\uF412',\n 'MailUndelivered': '\\uF415',\n 'MailTentative': '\\uF416',\n 'MailTentativeMirrored': '\\uF417',\n 'MailReminder': '\\uF418',\n 'ReceiptUndelivered': '\\uF419',\n 'ReceiptTentative': '\\uF41A',\n 'ReceiptTentativeMirrored': '\\uF41B',\n 'Inbox': '\\uF41C',\n 'IRMReply': '\\uF41D',\n 'IRMReplyMirrored': '\\uF41E',\n 'IRMForward': '\\uF41F',\n 'IRMForwardMirrored': '\\uF420',\n 'VoicemailIRM': '\\uF421',\n 'EventAccepted': '\\uF422',\n 'EventTentative': '\\uF423',\n 'EventTentativeMirrored': '\\uF424',\n 'EventDeclined': '\\uF425',\n 'IDBadge': '\\uF427',\n 'BackgroundColor': '\\uF42B',\n 'OfficeFormsLogoInverse16': '\\uF433',\n 'OfficeFormsLogo': '\\uF434',\n 'OfficeFormsLogoFill': '\\uF435',\n 'OfficeFormsLogo16': '\\uF436',\n 'OfficeFormsLogoFill16': '\\uF437',\n 'OfficeFormsLogoInverse24': '\\uF43A',\n 'OfficeFormsLogo24': '\\uF43B',\n 'OfficeFormsLogoFill24': '\\uF43C',\n 'PageLock': '\\uF43F',\n 'NotExecuted': '\\uF440',\n 'NotImpactedSolid': '\\uF441',\n 'FieldReadOnly': '\\uF442',\n 'FieldRequired': '\\uF443',\n 'BacklogBoard': '\\uF444',\n 'ExternalBuild': '\\uF445',\n 'ExternalTFVC': '\\uF446',\n 'ExternalXAML': '\\uF447',\n 'IssueSolid': '\\uF448',\n 'DefectSolid': '\\uF449',\n 'LadybugSolid': '\\uF44A',\n 'NugetLogo': '\\uF44C',\n 'TFVCLogo': '\\uF44D',\n 'ProjectLogo32': '\\uF47E',\n 'ProjectLogoFill32': '\\uF47F',\n 'ProjectLogo16': '\\uF480',\n 'ProjectLogoFill16': '\\uF481',\n 'SwayLogo32': '\\uF482',\n 'SwayLogoFill32': '\\uF483',\n 'SwayLogo16': '\\uF484',\n 'SwayLogoFill16': '\\uF485',\n 'ClassNotebookLogo32': '\\uF486',\n 'ClassNotebookLogoFill32': '\\uF487',\n 'ClassNotebookLogo16': '\\uF488',\n 'ClassNotebookLogoFill16': '\\uF489',\n 'ClassNotebookLogoInverse32': '\\uF48A',\n 'ClassNotebookLogoInverse16': '\\uF48B',\n 'StaffNotebookLogo32': '\\uF48C',\n 'StaffNotebookLogoFill32': '\\uF48D',\n 'StaffNotebookLogo16': '\\uF48E',\n 'StaffNotebookLogoFill16': '\\uF48F',\n 'StaffNotebookLogoInverted32': '\\uF490',\n 'StaffNotebookLogoInverted16': '\\uF491',\n 'KaizalaLogo': '\\uF492',\n 'TaskLogo': '\\uF493',\n 'ProtectionCenterLogo32': '\\uF494',\n 'GallatinLogo': '\\uF496',\n 'Globe2': '\\uF49A',\n 'Guitar': '\\uF49B',\n 'Breakfast': '\\uF49C',\n 'Brunch': '\\uF49D',\n 'BeerMug': '\\uF49E',\n 'Vacation': '\\uF49F',\n 'Teeth': '\\uF4A0',\n 'Taxi': '\\uF4A1',\n 'Chopsticks': '\\uF4A2',\n 'SyncOccurence': '\\uF4A3',\n 'UnsyncOccurence': '\\uF4A4',\n 'GIF': '\\uF4A9',\n 'PrimaryCalendar': '\\uF4AE',\n 'SearchCalendar': '\\uF4AF',\n 'VideoOff': '\\uF4B0',\n 'MicrosoftFlowLogo': '\\uF4B1',\n 'BusinessCenterLogo': '\\uF4B2',\n 'ToDoLogoBottom': '\\uF4B3',\n 'ToDoLogoTop': '\\uF4B4',\n 'EditSolid12': '\\uF4B5',\n 'EditSolidMirrored12': '\\uF4B6',\n 'UneditableSolid12': '\\uF4B7',\n 'UneditableSolidMirrored12': '\\uF4B8',\n 'UneditableMirrored': '\\uF4B9',\n 'AdminALogo32': '\\uF4BA',\n 'AdminALogoFill32': '\\uF4BB',\n 'ToDoLogoInverse': '\\uF4BC'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-13.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-14\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-14-5cf58db8.woff') format('woff')\")\n },\n icons: {\n 'Snooze': '\\uF4BD',\n 'WaffleOffice365': '\\uF4E0',\n 'ImageSearch': '\\uF4E8',\n 'NewsSearch': '\\uF4E9',\n 'VideoSearch': '\\uF4EA',\n 'R': '\\uF4EB',\n 'FontColorA': '\\uF4EC',\n 'FontColorSwatch': '\\uF4ED',\n 'LightWeight': '\\uF4EE',\n 'NormalWeight': '\\uF4EF',\n 'SemiboldWeight': '\\uF4F0',\n 'GroupObject': '\\uF4F1',\n 'UngroupObject': '\\uF4F2',\n 'AlignHorizontalLeft': '\\uF4F3',\n 'AlignHorizontalCenter': '\\uF4F4',\n 'AlignHorizontalRight': '\\uF4F5',\n 'AlignVerticalTop': '\\uF4F6',\n 'AlignVerticalCenter': '\\uF4F7',\n 'AlignVerticalBottom': '\\uF4F8',\n 'HorizontalDistributeCenter': '\\uF4F9',\n 'VerticalDistributeCenter': '\\uF4FA',\n 'Ellipse': '\\uF4FB',\n 'Line': '\\uF4FC',\n 'Octagon': '\\uF4FD',\n 'Hexagon': '\\uF4FE',\n 'Pentagon': '\\uF4FF',\n 'RightTriangle': '\\uF500',\n 'HalfCircle': '\\uF501',\n 'QuarterCircle': '\\uF502',\n 'ThreeQuarterCircle': '\\uF503',\n '6PointStar': '\\uF504',\n '12PointStar': '\\uF505',\n 'ArrangeBringToFront': '\\uF506',\n 'ArrangeSendToBack': '\\uF507',\n 'ArrangeSendBackward': '\\uF508',\n 'ArrangeBringForward': '\\uF509',\n 'BorderDash': '\\uF50A',\n 'BorderDot': '\\uF50B',\n 'LineStyle': '\\uF50C',\n 'LineThickness': '\\uF50D',\n 'WindowEdit': '\\uF50E',\n 'HintText': '\\uF50F',\n 'MediaAdd': '\\uF510',\n 'AnchorLock': '\\uF511',\n 'AutoHeight': '\\uF512',\n 'ChartSeries': '\\uF513',\n 'ChartXAngle': '\\uF514',\n 'ChartYAngle': '\\uF515',\n 'Combobox': '\\uF516',\n 'LineSpacing': '\\uF517',\n 'Padding': '\\uF518',\n 'PaddingTop': '\\uF519',\n 'PaddingBottom': '\\uF51A',\n 'PaddingLeft': '\\uF51B',\n 'PaddingRight': '\\uF51C',\n 'NavigationFlipper': '\\uF51D',\n 'AlignJustify': '\\uF51E',\n 'TextOverflow': '\\uF51F',\n 'VisualsFolder': '\\uF520',\n 'VisualsStore': '\\uF521',\n 'PictureCenter': '\\uF522',\n 'PictureFill': '\\uF523',\n 'PicturePosition': '\\uF524',\n 'PictureStretch': '\\uF525',\n 'PictureTile': '\\uF526',\n 'Slider': '\\uF527',\n 'SliderHandleSize': '\\uF528',\n 'DefaultRatio': '\\uF529',\n 'NumberSequence': '\\uF52A',\n 'GUID': '\\uF52B',\n 'ReportAdd': '\\uF52C',\n 'DashboardAdd': '\\uF52D',\n 'MapPinSolid': '\\uF52E',\n 'WebPublish': '\\uF52F',\n 'PieSingleSolid': '\\uF530',\n 'BlockedSolid': '\\uF531',\n 'DrillDown': '\\uF532',\n 'DrillDownSolid': '\\uF533',\n 'DrillExpand': '\\uF534',\n 'DrillShow': '\\uF535',\n 'SpecialEvent': '\\uF536',\n 'OneDriveFolder16': '\\uF53B',\n 'FunctionalManagerDashboard': '\\uF542',\n 'BIDashboard': '\\uF543',\n 'CodeEdit': '\\uF544',\n 'RenewalCurrent': '\\uF545',\n 'RenewalFuture': '\\uF546',\n 'SplitObject': '\\uF547',\n 'BulkUpload': '\\uF548',\n 'DownloadDocument': '\\uF549',\n 'GreetingCard': '\\uF54B',\n 'Flower': '\\uF54E',\n 'WaitlistConfirm': '\\uF550',\n 'WaitlistConfirmMirrored': '\\uF551',\n 'LaptopSecure': '\\uF552',\n 'DragObject': '\\uF553',\n 'EntryView': '\\uF554',\n 'EntryDecline': '\\uF555',\n 'ContactCardSettings': '\\uF556',\n 'ContactCardSettingsMirrored': '\\uF557'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-14.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-15\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-15-3807251b.woff') format('woff')\")\n },\n icons: {\n 'CalendarSettings': '\\uF558',\n 'CalendarSettingsMirrored': '\\uF559',\n 'HardDriveLock': '\\uF55A',\n 'HardDriveUnlock': '\\uF55B',\n 'AccountManagement': '\\uF55C',\n 'ReportWarning': '\\uF569',\n 'TransitionPop': '\\uF5B2',\n 'TransitionPush': '\\uF5B3',\n 'TransitionEffect': '\\uF5B4',\n 'LookupEntities': '\\uF5B5',\n 'ExploreData': '\\uF5B6',\n 'AddBookmark': '\\uF5B7',\n 'SearchBookmark': '\\uF5B8',\n 'DrillThrough': '\\uF5B9',\n 'MasterDatabase': '\\uF5BA',\n 'CertifiedDatabase': '\\uF5BB',\n 'MaximumValue': '\\uF5BC',\n 'MinimumValue': '\\uF5BD',\n 'VisualStudioIDELogo32': '\\uF5D0',\n 'PasteAsText': '\\uF5D5',\n 'PasteAsCode': '\\uF5D6',\n 'BrowserTab': '\\uF5D7',\n 'BrowserTabScreenshot': '\\uF5D8',\n 'DesktopScreenshot': '\\uF5D9',\n 'FileYML': '\\uF5DA',\n 'ClipboardSolid': '\\uF5DC',\n 'FabricUserFolder': '\\uF5E5',\n 'FabricNetworkFolder': '\\uF5E6',\n 'BullseyeTarget': '\\uF5F0',\n 'AnalyticsView': '\\uF5F1',\n 'Video360Generic': '\\uF609',\n 'Untag': '\\uF60B',\n 'Leave': '\\uF627',\n 'Trending12': '\\uF62D',\n 'Blocked12': '\\uF62E',\n 'Warning12': '\\uF62F',\n 'CheckedOutByOther12': '\\uF630',\n 'CheckedOutByYou12': '\\uF631',\n 'CircleShapeSolid': '\\uF63C',\n 'SquareShapeSolid': '\\uF63D',\n 'TriangleShapeSolid': '\\uF63E',\n 'DropShapeSolid': '\\uF63F',\n 'RectangleShapeSolid': '\\uF640',\n 'ZoomToFit': '\\uF649',\n 'InsertColumnsLeft': '\\uF64A',\n 'InsertColumnsRight': '\\uF64B',\n 'InsertRowsAbove': '\\uF64C',\n 'InsertRowsBelow': '\\uF64D',\n 'DeleteColumns': '\\uF64E',\n 'DeleteRows': '\\uF64F',\n 'DeleteRowsMirrored': '\\uF650',\n 'DeleteTable': '\\uF651',\n 'AccountBrowser': '\\uF652',\n 'VersionControlPush': '\\uF664',\n 'StackedColumnChart2': '\\uF666',\n 'TripleColumnWide': '\\uF66E',\n 'QuadColumn': '\\uF66F',\n 'WhiteBoardApp16': '\\uF673',\n 'WhiteBoardApp32': '\\uF674',\n 'PinnedSolid': '\\uF676',\n 'InsertSignatureLine': '\\uF677',\n 'ArrangeByFrom': '\\uF678',\n 'Phishing': '\\uF679',\n 'CreateMailRule': '\\uF67A',\n 'PublishCourse': '\\uF699',\n 'DictionaryRemove': '\\uF69A',\n 'UserRemove': '\\uF69B',\n 'UserEvent': '\\uF69C',\n 'Encryption': '\\uF69D',\n 'PasswordField': '\\uF6AA',\n 'OpenInNewTab': '\\uF6AB',\n 'Hide3': '\\uF6AC',\n 'VerifiedBrandSolid': '\\uF6AD',\n 'MarkAsProtected': '\\uF6AE',\n 'AuthenticatorApp': '\\uF6B1',\n 'WebTemplate': '\\uF6B2',\n 'DefenderTVM': '\\uF6B3',\n 'MedalSolid': '\\uF6B9',\n 'D365TalentLearn': '\\uF6BB',\n 'D365TalentInsight': '\\uF6BC',\n 'D365TalentHRCore': '\\uF6BD',\n 'BacklogList': '\\uF6BF',\n 'ButtonControl': '\\uF6C0',\n 'TableGroup': '\\uF6D9',\n 'MountainClimbing': '\\uF6DB',\n 'TagUnknown': '\\uF6DF',\n 'TagUnknownMirror': '\\uF6E0',\n 'TagUnknown12': '\\uF6E1',\n 'TagUnknown12Mirror': '\\uF6E2',\n 'Link12': '\\uF6E3',\n 'Presentation': '\\uF6E4',\n 'Presentation12': '\\uF6E5',\n 'Lock12': '\\uF6E6',\n 'BuildDefinition': '\\uF6E9',\n 'ReleaseDefinition': '\\uF6EA',\n 'SaveTemplate': '\\uF6EC',\n 'UserGauge': '\\uF6ED',\n 'BlockedSiteSolid12': '\\uF70A',\n 'TagSolid': '\\uF70E',\n 'OfficeChat': '\\uF70F'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-15.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-16\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-16-9cf93f3b.woff') format('woff')\")\n },\n icons: {\n 'OfficeChatSolid': '\\uF710',\n 'MailSchedule': '\\uF72E',\n 'WarningSolid': '\\uF736',\n 'Blocked2Solid': '\\uF737',\n 'SkypeCircleArrow': '\\uF747',\n 'SkypeArrow': '\\uF748',\n 'SyncStatus': '\\uF751',\n 'SyncStatusSolid': '\\uF752',\n 'ProjectDocument': '\\uF759',\n 'ToDoLogoOutline': '\\uF75B',\n 'VisioOnlineLogoFill32': '\\uF75F',\n 'VisioOnlineLogo32': '\\uF760',\n 'VisioOnlineLogoCloud32': '\\uF761',\n 'VisioDiagramSync': '\\uF762',\n 'Event12': '\\uF763',\n 'EventDateMissed12': '\\uF764',\n 'UserOptional': '\\uF767',\n 'ResponsesMenu': '\\uF768',\n 'DoubleDownArrow': '\\uF769',\n 'DistributeDown': '\\uF76A',\n 'BookmarkReport': '\\uF76B',\n 'FilterSettings': '\\uF76C',\n 'GripperDotsVertical': '\\uF772',\n 'MailAttached': '\\uF774',\n 'AddIn': '\\uF775',\n 'LinkedDatabase': '\\uF779',\n 'TableLink': '\\uF77A',\n 'PromotedDatabase': '\\uF77D',\n 'BarChartVerticalFilter': '\\uF77E',\n 'BarChartVerticalFilterSolid': '\\uF77F',\n 'MicOff2': '\\uF781',\n 'MicrosoftTranslatorLogo': '\\uF782',\n 'ShowTimeAs': '\\uF787',\n 'FileRequest': '\\uF789',\n 'WorkItemAlert': '\\uF78F',\n 'PowerBILogo16': '\\uF790',\n 'PowerBILogoBackplate16': '\\uF791',\n 'BulletedListText': '\\uF792',\n 'BulletedListBullet': '\\uF793',\n 'BulletedListTextMirrored': '\\uF794',\n 'BulletedListBulletMirrored': '\\uF795',\n 'NumberedListText': '\\uF796',\n 'NumberedListNumber': '\\uF797',\n 'NumberedListTextMirrored': '\\uF798',\n 'NumberedListNumberMirrored': '\\uF799',\n 'RemoveLinkChain': '\\uF79A',\n 'RemoveLinkX': '\\uF79B',\n 'FabricTextHighlight': '\\uF79C',\n 'ClearFormattingA': '\\uF79D',\n 'ClearFormattingEraser': '\\uF79E',\n 'Photo2Fill': '\\uF79F',\n 'IncreaseIndentText': '\\uF7A0',\n 'IncreaseIndentArrow': '\\uF7A1',\n 'DecreaseIndentText': '\\uF7A2',\n 'DecreaseIndentArrow': '\\uF7A3',\n 'IncreaseIndentTextMirrored': '\\uF7A4',\n 'IncreaseIndentArrowMirrored': '\\uF7A5',\n 'DecreaseIndentTextMirrored': '\\uF7A6',\n 'DecreaseIndentArrowMirrored': '\\uF7A7',\n 'CheckListText': '\\uF7A8',\n 'CheckListCheck': '\\uF7A9',\n 'CheckListTextMirrored': '\\uF7AA',\n 'CheckListCheckMirrored': '\\uF7AB',\n 'NumberSymbol': '\\uF7AC',\n 'Coupon': '\\uF7BC',\n 'VerifiedBrand': '\\uF7BD',\n 'ReleaseGate': '\\uF7BE',\n 'ReleaseGateCheck': '\\uF7BF',\n 'ReleaseGateError': '\\uF7C0',\n 'M365InvoicingLogo': '\\uF7C1',\n 'RemoveFromShoppingList': '\\uF7D5',\n 'ShieldAlert': '\\uF7D7',\n 'FabricTextHighlightComposite': '\\uF7DA',\n 'Dataflows': '\\uF7DD',\n 'GenericScanFilled': '\\uF7DE',\n 'DiagnosticDataBarTooltip': '\\uF7DF',\n 'SaveToMobile': '\\uF7E0',\n 'Orientation2': '\\uF7E1',\n 'ScreenCast': '\\uF7E2',\n 'ShowGrid': '\\uF7E3',\n 'SnapToGrid': '\\uF7E4',\n 'ContactList': '\\uF7E5',\n 'NewMail': '\\uF7EA',\n 'EyeShadow': '\\uF7EB',\n 'FabricFolderConfirm': '\\uF7FF',\n 'InformationBarriers': '\\uF803',\n 'CommentActive': '\\uF804',\n 'ColumnVerticalSectionEdit': '\\uF806',\n 'WavingHand': '\\uF807',\n 'ShakeDevice': '\\uF80A',\n 'SmartGlassRemote': '\\uF80B',\n 'Rotate90Clockwise': '\\uF80D',\n 'Rotate90CounterClockwise': '\\uF80E',\n 'CampaignTemplate': '\\uF811',\n 'ChartTemplate': '\\uF812',\n 'PageListFilter': '\\uF813',\n 'SecondaryNav': '\\uF814',\n 'ColumnVerticalSection': '\\uF81E',\n 'SkypeCircleSlash': '\\uF825',\n 'SkypeSlash': '\\uF826'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-16.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-17\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-17-0c4ed701.woff') format('woff')\")\n },\n icons: {\n 'CustomizeToolbar': '\\uF828',\n 'DuplicateRow': '\\uF82A',\n 'RemoveFromTrash': '\\uF82B',\n 'MailOptions': '\\uF82C',\n 'Childof': '\\uF82D',\n 'Footer': '\\uF82E',\n 'Header': '\\uF82F',\n 'BarChartVerticalFill': '\\uF830',\n 'StackedColumnChart2Fill': '\\uF831',\n 'PlainText': '\\uF834',\n 'AccessibiltyChecker': '\\uF835',\n 'DatabaseSync': '\\uF842',\n 'ReservationOrders': '\\uF845',\n 'TabOneColumn': '\\uF849',\n 'TabTwoColumn': '\\uF84A',\n 'TabThreeColumn': '\\uF84B',\n 'BulletedTreeList': '\\uF84C',\n 'MicrosoftTranslatorLogoGreen': '\\uF852',\n 'MicrosoftTranslatorLogoBlue': '\\uF853',\n 'InternalInvestigation': '\\uF854',\n 'AddReaction': '\\uF85D',\n 'ContactHeart': '\\uF862',\n 'VisuallyImpaired': '\\uF866',\n 'EventToDoLogo': '\\uF869',\n 'Variable2': '\\uF86D',\n 'ModelingView': '\\uF871',\n 'DisconnectVirtualMachine': '\\uF873',\n 'ReportLock': '\\uF875',\n 'Uneditable2': '\\uF876',\n 'Uneditable2Mirrored': '\\uF877',\n 'BarChartVerticalEdit': '\\uF89D',\n 'GlobalNavButtonActive': '\\uF89F',\n 'PollResults': '\\uF8A0',\n 'Rerun': '\\uF8A1',\n 'QandA': '\\uF8A2',\n 'QandAMirror': '\\uF8A3',\n 'BookAnswers': '\\uF8A4',\n 'AlertSettings': '\\uF8B6',\n 'TrimStart': '\\uF8BB',\n 'TrimEnd': '\\uF8BC',\n 'TableComputed': '\\uF8F5',\n 'DecreaseIndentLegacy': '\\uE290',\n 'IncreaseIndentLegacy': '\\uE291',\n 'SizeLegacy': '\\uE2B2'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-17.js.map","import { registerIconAlias } from '@fluentui/style-utilities';\nexport var registerIconAliases = function () {\n registerIconAlias('trash', 'delete');\n registerIconAlias('onedrive', 'onedrivelogo');\n registerIconAlias('alertsolid12', 'eventdatemissed12');\n registerIconAlias('sixpointstar', '6pointstar');\n registerIconAlias('twelvepointstar', '12pointstar');\n registerIconAlias('toggleon', 'toggleleft');\n registerIconAlias('toggleoff', 'toggleright');\n};\nexport default registerIconAliases;\n//# sourceMappingURL=iconAliases.js.map","// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/font-icons-mdl2', '8.5.26');\n//# sourceMappingURL=version.js.map","import { initializeIcons as i } from './fabric-icons';\nimport { initializeIcons as i0 } from './fabric-icons-0';\nimport { initializeIcons as i1 } from './fabric-icons-1';\nimport { initializeIcons as i2 } from './fabric-icons-2';\nimport { initializeIcons as i3 } from './fabric-icons-3';\nimport { initializeIcons as i4 } from './fabric-icons-4';\nimport { initializeIcons as i5 } from './fabric-icons-5';\nimport { initializeIcons as i6 } from './fabric-icons-6';\nimport { initializeIcons as i7 } from './fabric-icons-7';\nimport { initializeIcons as i8 } from './fabric-icons-8';\nimport { initializeIcons as i9 } from './fabric-icons-9';\nimport { initializeIcons as i10 } from './fabric-icons-10';\nimport { initializeIcons as i11 } from './fabric-icons-11';\nimport { initializeIcons as i12 } from './fabric-icons-12';\nimport { initializeIcons as i13 } from './fabric-icons-13';\nimport { initializeIcons as i14 } from './fabric-icons-14';\nimport { initializeIcons as i15 } from './fabric-icons-15';\nimport { initializeIcons as i16 } from './fabric-icons-16';\nimport { initializeIcons as i17 } from './fabric-icons-17';\nimport { FLUENT_CDN_BASE_URL } from '@fluentui/style-utilities';\nimport { registerIconAliases } from './iconAliases';\nimport { getWindow } from '@fluentui/utilities';\nvar DEFAULT_BASE_URL = \"\".concat(FLUENT_CDN_BASE_URL, \"/assets/icons/\");\nvar win = getWindow();\nexport function initializeIcons(baseUrl, options) {\n var _a, _b;\n if (baseUrl === void 0) { baseUrl = ((_a = win === null || win === void 0 ? void 0 : win.FabricConfig) === null || _a === void 0 ? void 0 : _a.iconBaseUrl) || ((_b = win === null || win === void 0 ? void 0 : win.FabricConfig) === null || _b === void 0 ? void 0 : _b.fontBaseUrl) || DEFAULT_BASE_URL; }\n [i, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9, i10, i11, i12, i13, i14, i15, i16, i17].forEach(function (initialize) { return initialize(baseUrl, options); });\n registerIconAliases();\n}\n/* eslint-enable deprecation/deprecation */\nimport './version';\n//# sourceMappingURL=index.js.map","/**\n * {@docCategory MessageBar}\n */\nexport var MessageBarType;\n(function (MessageBarType) {\n /** Info styled MessageBar */\n MessageBarType[MessageBarType[\"info\"] = 0] = \"info\";\n /** Error styled MessageBar */\n MessageBarType[MessageBarType[\"error\"] = 1] = \"error\";\n /** Blocked styled MessageBar */\n MessageBarType[MessageBarType[\"blocked\"] = 2] = \"blocked\";\n /** SevereWarning styled MessageBar */\n MessageBarType[MessageBarType[\"severeWarning\"] = 3] = \"severeWarning\";\n /** Success styled MessageBar */\n MessageBarType[MessageBarType[\"success\"] = 4] = \"success\";\n /** Warning styled MessageBar */\n MessageBarType[MessageBarType[\"warning\"] = 5] = \"warning\";\n})(MessageBarType || (MessageBarType = {}));\n//# sourceMappingURL=MessageBar.types.js.map","var _a;\nimport { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { DelayedRender, classNamesFunction, getNativeProps, htmlElementProperties, css } from '../../Utilities';\nimport { IconButton } from '../../Button';\nimport { Icon } from '../../Icon';\nimport { MessageBarType } from './MessageBar.types';\nimport { useId, useBoolean } from '@fluentui/react-hooks';\nvar ICON_MAP = (_a = {},\n _a[MessageBarType.info] = 'Info',\n _a[MessageBarType.warning] = 'Info',\n _a[MessageBarType.error] = 'ErrorBadge',\n _a[MessageBarType.blocked] = 'Blocked2',\n _a[MessageBarType.severeWarning] = 'Warning',\n _a[MessageBarType.success] = 'Completed',\n _a);\nvar COMPONENT_NAME = 'MessageBar';\nvar getClassNames = classNamesFunction();\nvar getAnnouncementPriority = function (messageBarType) {\n switch (messageBarType) {\n case MessageBarType.blocked:\n case MessageBarType.error:\n case MessageBarType.severeWarning:\n return 'assertive';\n }\n return 'polite';\n};\nvar getRole = function (messageBarType) {\n switch (messageBarType) {\n case MessageBarType.blocked:\n case MessageBarType.error:\n case MessageBarType.severeWarning:\n return 'alert';\n }\n return 'status';\n};\nexport var MessageBarBase = React.forwardRef(function (props, ref) {\n var _a = useBoolean(false), expandSingleLine = _a[0], toggleExpandSingleLine = _a[1].toggle;\n var labelId = useId('MessageBar');\n var actions = props.actions, className = props.className, children = props.children, \n // eslint-disable-next-line deprecation/deprecation\n overflowButtonAriaLabel = props.overflowButtonAriaLabel, dismissIconProps = props.dismissIconProps, styles = props.styles, theme = props.theme, _b = props.messageBarType, messageBarType = _b === void 0 ? MessageBarType.info : _b, _c = props.onDismiss, onDismiss = _c === void 0 ? undefined : _c, _d = props.isMultiline, isMultiline = _d === void 0 ? true : _d, truncated = props.truncated, dismissButtonAriaLabel = props.dismissButtonAriaLabel, messageBarIconProps = props.messageBarIconProps, role = props.role, _e = props.delayedRender, delayedRender = _e === void 0 ? true : _e, expandButtonProps = props.expandButtonProps;\n var nativeProps = getNativeProps(props, htmlElementProperties, [\n 'className',\n 'role',\n ]);\n var classNames = getClassNames(styles, {\n theme: theme,\n messageBarType: messageBarType || MessageBarType.info,\n onDismiss: onDismiss !== undefined,\n actions: actions !== undefined,\n truncated: truncated,\n isMultiline: isMultiline,\n expandSingleLine: expandSingleLine,\n className: className,\n });\n var expandIconProps = { iconName: expandSingleLine ? 'DoubleChevronUp' : 'DoubleChevronDown' };\n var regionProps = actions || onDismiss ? { 'aria-describedby': labelId, role: 'region' } : {};\n var actionsDiv = actions ? React.createElement(\"div\", { className: classNames.actions }, actions) : null;\n var dismissButton = onDismiss ? (React.createElement(IconButton, { disabled: false, className: classNames.dismissal, onClick: onDismiss, iconProps: dismissIconProps ? dismissIconProps : { iconName: 'Clear' }, title: dismissButtonAriaLabel, ariaLabel: dismissButtonAriaLabel })) : null;\n return (React.createElement(\"div\", __assign({ ref: ref, className: classNames.root }, regionProps),\n React.createElement(\"div\", { className: classNames.content },\n React.createElement(\"div\", { className: classNames.iconContainer, \"aria-hidden\": true }, messageBarIconProps ? (React.createElement(Icon, __assign({}, messageBarIconProps, { className: css(classNames.icon, messageBarIconProps.className) }))) : (React.createElement(Icon, { iconName: ICON_MAP[messageBarType], className: classNames.icon }))),\n React.createElement(\"div\", { className: classNames.text, id: labelId, role: role || getRole(messageBarType), \"aria-live\": getAnnouncementPriority(messageBarType) },\n React.createElement(\"span\", __assign({ className: classNames.innerText }, nativeProps), delayedRender ? (React.createElement(DelayedRender, null,\n React.createElement(\"span\", null, children))) : (\n // this span is probably not necessary, but preserving it for now in case anyone\n // has styling that expects it to be present\n React.createElement(\"span\", null, children)))),\n /* singleline expand/collapse button */ !isMultiline && !actionsDiv && truncated && (React.createElement(\"div\", { className: classNames.expandSingleLine },\n React.createElement(IconButton, __assign({ disabled: false, className: classNames.expand, onClick: toggleExpandSingleLine, iconProps: expandIconProps, ariaLabel: overflowButtonAriaLabel, \"aria-expanded\": expandSingleLine }, expandButtonProps)))),\n !isMultiline && actionsDiv,\n /* singleline dismiss */ !isMultiline && dismissButton && (React.createElement(\"div\", { className: classNames.dismissSingleLine }, dismissButton)),\n isMultiline && dismissButton),\n isMultiline && actionsDiv));\n});\nMessageBarBase.displayName = COMPONENT_NAME;\n//# sourceMappingURL=MessageBar.base.js.map","var _a, _b, _c, _d;\nimport { __assign } from \"tslib\";\nimport { HighContrastSelector, HighContrastSelectorWhite, ScreenWidthMaxSmall, getScreenSelector, getGlobalClassNames, getFocusStyle, IconFontSizes, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { MessageBarType } from './MessageBar.types';\nvar GlobalClassNames = {\n root: 'ms-MessageBar',\n error: 'ms-MessageBar--error',\n blocked: 'ms-MessageBar--blocked',\n severeWarning: 'ms-MessageBar--severeWarning',\n success: 'ms-MessageBar--success',\n warning: 'ms-MessageBar--warning',\n multiline: 'ms-MessageBar-multiline',\n singleline: 'ms-MessageBar-singleline',\n dismissalSingleLine: 'ms-MessageBar-dismissalSingleLine',\n expandingSingleLine: 'ms-MessageBar-expandingSingleLine',\n content: 'ms-MessageBar-content',\n iconContainer: 'ms-MessageBar-icon',\n text: 'ms-MessageBar-text',\n innerText: 'ms-MessageBar-innerText',\n dismissSingleLine: 'ms-MessageBar-dismissSingleLine',\n expandSingleLine: 'ms-MessageBar-expandSingleLine',\n dismissal: 'ms-MessageBar-dismissal',\n expand: 'ms-MessageBar-expand',\n actions: 'ms-MessageBar-actions',\n actionsSingleline: 'ms-MessageBar-actionsSingleLine',\n};\nvar backgroundColor = (_a = {},\n _a[MessageBarType.error] = 'errorBackground',\n _a[MessageBarType.blocked] = 'errorBackground',\n _a[MessageBarType.success] = 'successBackground',\n _a[MessageBarType.warning] = 'warningBackground',\n _a[MessageBarType.severeWarning] = 'severeWarningBackground',\n _a[MessageBarType.info] = 'infoBackground',\n _a);\nvar iconColor = (_b = {},\n _b[MessageBarType.error] = 'errorIcon',\n _b[MessageBarType.blocked] = 'errorIcon',\n _b[MessageBarType.success] = 'successIcon',\n _b[MessageBarType.warning] = 'warningIcon',\n _b[MessageBarType.severeWarning] = 'severeWarningIcon',\n _b[MessageBarType.info] = 'infoIcon',\n _b);\nvar highContrastBorderColor = (_c = {},\n _c[MessageBarType.error] = '#ff0000',\n _c[MessageBarType.blocked] = '#ff0000',\n _c[MessageBarType.success] = '#bad80a',\n _c[MessageBarType.warning] = '#fff100',\n _c[MessageBarType.severeWarning] = '#ff0000',\n _c[MessageBarType.info] = 'WindowText',\n _c);\nvar highContrastWhiteBorderColor = (_d = {},\n _d[MessageBarType.error] = '#e81123',\n _d[MessageBarType.blocked] = '#e81123',\n _d[MessageBarType.success] = '#107c10',\n _d[MessageBarType.warning] = '#966400',\n _d[MessageBarType.severeWarning] = '#d83b01',\n _d[MessageBarType.info] = 'WindowText',\n _d);\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;\n var theme = props.theme, className = props.className, onDismiss = props.onDismiss, truncated = props.truncated, isMultiline = props.isMultiline, expandSingleLine = props.expandSingleLine, _m = props.messageBarType, messageBarType = _m === void 0 ? MessageBarType.info : _m;\n var semanticColors = theme.semanticColors, fonts = theme.fonts;\n var SmallScreenSelector = getScreenSelector(0, ScreenWidthMaxSmall);\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var dismissalAndExpandIconStyle = {\n fontSize: IconFontSizes.xSmall,\n height: 10,\n lineHeight: '10px',\n color: semanticColors.messageText,\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign(__assign({}, getHighContrastNoAdjustStyle()), { color: 'WindowText' }),\n _a),\n };\n var dismissalAndExpandStyle = [\n getFocusStyle(theme, {\n inset: 1,\n highContrastStyle: {\n outlineOffset: '-6px',\n outline: '1px solid Highlight',\n },\n borderColor: 'transparent',\n }),\n {\n flexShrink: 0,\n width: 32,\n height: 32,\n padding: '8px 12px',\n selectors: {\n '& .ms-Button-icon': dismissalAndExpandIconStyle,\n ':hover': {\n backgroundColor: 'transparent',\n },\n ':active': {\n backgroundColor: 'transparent',\n },\n },\n },\n ];\n return {\n root: [\n classNames.root,\n fonts.medium,\n messageBarType === MessageBarType.error && classNames.error,\n messageBarType === MessageBarType.blocked && classNames.blocked,\n messageBarType === MessageBarType.severeWarning && classNames.severeWarning,\n messageBarType === MessageBarType.success && classNames.success,\n messageBarType === MessageBarType.warning && classNames.warning,\n isMultiline ? classNames.multiline : classNames.singleline,\n !isMultiline && onDismiss && classNames.dismissalSingleLine,\n !isMultiline && truncated && classNames.expandingSingleLine,\n {\n background: semanticColors[backgroundColor[messageBarType]],\n boxSizing: 'border-box',\n color: semanticColors.messageText,\n minHeight: 32,\n width: '100%',\n display: 'flex',\n wordBreak: 'break-word',\n selectors: (_b = {\n '.ms-Link': {\n color: semanticColors.messageLink,\n selectors: {\n ':hover': {\n color: semanticColors.messageLinkHovered,\n },\n },\n }\n },\n _b[HighContrastSelector] = __assign(__assign({}, getHighContrastNoAdjustStyle()), { background: 'transparent', border: \"1px solid \".concat(highContrastBorderColor[messageBarType]), color: 'WindowText' }),\n _b[HighContrastSelectorWhite] = {\n border: \"1px solid \".concat(highContrastWhiteBorderColor[messageBarType]),\n },\n _b),\n },\n isMultiline && {\n flexDirection: 'column',\n },\n className,\n ],\n content: [\n classNames.content,\n (_c = {\n display: 'flex',\n width: '100%',\n lineHeight: 'normal'\n },\n _c[SmallScreenSelector] = {\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto',\n gridTemplateRows: '1fr auto',\n gridTemplateAreas: \"\\n \\\"icon text close\\\"\\n \\\"action action action\\\"\\n \",\n },\n _c),\n ],\n iconContainer: [\n classNames.iconContainer,\n (_d = {\n fontSize: IconFontSizes.medium,\n minWidth: 16,\n minHeight: 16,\n display: 'flex',\n flexShrink: 0,\n margin: '8px 0 8px 12px'\n },\n _d[SmallScreenSelector] = {\n gridArea: 'icon',\n },\n _d),\n ],\n icon: {\n color: semanticColors[iconColor[messageBarType]],\n selectors: (_e = {},\n _e[HighContrastSelector] = __assign(__assign({}, getHighContrastNoAdjustStyle()), { color: 'WindowText' }),\n _e),\n },\n text: [\n classNames.text,\n __assign(__assign({ minWidth: 0, display: 'flex', flexGrow: 1, margin: 8 }, fonts.small), (_f = {}, _f[SmallScreenSelector] = {\n gridArea: 'text',\n }, _f.selectors = (_g = {},\n _g[HighContrastSelector] = __assign({}, getHighContrastNoAdjustStyle()),\n _g), _f)),\n !onDismiss && {\n marginRight: 12,\n },\n ],\n innerText: [\n classNames.innerText,\n {\n lineHeight: 16,\n selectors: {\n '& span a:last-child': {\n paddingLeft: 4,\n },\n },\n },\n truncated && {\n overflow: 'visible',\n whiteSpace: 'pre-wrap',\n },\n !isMultiline && {\n // In high contrast this causes the top and bottom of links' focus outline to be clipped\n // (not sure of a good way around that while still maintaining text clipping)\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n !isMultiline &&\n !truncated && {\n selectors: (_h = {},\n _h[SmallScreenSelector] = {\n overflow: 'visible',\n whiteSpace: 'pre-wrap',\n },\n _h),\n },\n expandSingleLine && {\n overflow: 'visible',\n whiteSpace: 'pre-wrap',\n },\n ],\n dismissSingleLine: [\n classNames.dismissSingleLine,\n (_j = {},\n _j[SmallScreenSelector] = {\n gridArea: 'close',\n },\n _j),\n ],\n expandSingleLine: classNames.expandSingleLine,\n dismissal: [classNames.dismissal, dismissalAndExpandStyle],\n expand: [classNames.expand, dismissalAndExpandStyle],\n actions: [\n isMultiline ? classNames.actions : classNames.actionsSingleline,\n (_k = {\n display: 'flex',\n flexGrow: 0,\n flexShrink: 0,\n flexBasis: 'auto',\n flexDirection: 'row-reverse',\n alignItems: 'center',\n margin: '0 12px 0 8px',\n // reset forced colors to browser control for inner actions\n forcedColorAdjust: 'auto',\n MsHighContrastAdjust: 'auto'\n },\n _k[SmallScreenSelector] = {\n gridArea: 'action',\n marginRight: 8,\n marginBottom: 8,\n },\n _k.selectors = {\n '& button:nth-child(n+2)': (_l = {\n marginLeft: 8\n },\n _l[SmallScreenSelector] = {\n marginBottom: 0,\n },\n _l),\n },\n _k),\n isMultiline && {\n marginBottom: 8,\n },\n onDismiss &&\n !isMultiline && {\n marginRight: 0,\n },\n ],\n };\n};\n//# sourceMappingURL=MessageBar.styles.js.map","import { styled } from '../../Utilities';\nimport { MessageBarBase } from './MessageBar.base';\nimport { getStyles } from './MessageBar.styles';\nexport var MessageBar = styled(MessageBarBase, getStyles, undefined, {\n scope: 'MessageBar',\n});\n//# sourceMappingURL=MessageBar.js.map","/**\n * {@docCategory Panel}\n */\nexport var PanelType;\n(function (PanelType) {\n /**\n * Renders the Panel with a `fluid` (full screen) width.\n * Recommended for use on small screen breakpoints.\n * - Small (320-479): full screen width, 16px left/right padding\n * - Medium (480-639): full screen width, 16px left/right padding\n * - Large (640-1023): full screen width, 32px left/right padding\n * - XLarge (1024-1365): full screen width, 32px left/right padding\n * - XXLarge (1366-up): full screen width, 40px left/right padding\n */\n PanelType[PanelType[\"smallFluid\"] = 0] = \"smallFluid\";\n /**\n * Renders the Panel in fixed-width `small` size, anchored to the far side (right in LTR mode).\n * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint\n * - Medium (480-639): 340px width, 16px left/right padding\n * - Large (640-1023): 340px width, 32px left/right padding\n * - XLarge (1024-1365): 340px width, 32px left/right padding\n * - XXLarge (1366-up): 340px width, 40px left/right padding\n */\n PanelType[PanelType[\"smallFixedFar\"] = 1] = \"smallFixedFar\";\n /**\n * Renders the Panel in fixed-width `small` size, anchored to the near side (left in LTR mode).\n * - Small (320-479): 272px width, 16px left/right padding\n * - Medium (480-639): 272px width, 16px left/right padding\n * - Large (640-1023): 272px width, 32px left/right padding\n * - XLarge (1024-1365): 272px width, 32px left/right padding\n * - XXLarge (1366-up): 272px width, 40px left/right padding\n */\n PanelType[PanelType[\"smallFixedNear\"] = 2] = \"smallFixedNear\";\n /**\n * Renders the Panel in `medium` size, anchored to the far side (right in LTR mode).\n * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint\n * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint\n * - Large (640-1023): 592px width, 32px left/right padding\n * - XLarge (1024-1365): 644px width, 32px left/right padding\n * - XXLarge (1366-up): 644px width, 40px left/right padding\n */\n PanelType[PanelType[\"medium\"] = 3] = \"medium\";\n /**\n * Renders the Panel in `large` size, anchored to the far side (right in LTR mode).\n * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint\n * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint\n * - Large (640-1023): adapts to `PanelType.medium` at this breakpoint\n * - XLarge (1024-1365): 48px fixed left margin, fluid width, 32px left/right padding\n * - XXLarge (1366-up): 428px fixed left margin, fluid width, 40px left/right padding\n */\n PanelType[PanelType[\"large\"] = 4] = \"large\";\n /**\n * Renders the Panel in `large` size, anchored to the far side (right in LTR mode), with a fixed width at\n * XX-Large breakpoint.\n * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint\n * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint\n * - Large (640-1023): adapts to `PanelType.medium` at this breakpoint\n * - XLarge (1024-1365): 48px fixed left margin, fluid width, 32px left/right padding\n * - XXLarge (1366-up): 940px width, 40px left/right padding\n */\n PanelType[PanelType[\"largeFixed\"] = 5] = \"largeFixed\";\n /**\n * Renders the Panel in `extra large` size, anchored to the far side (right in LTR mode).\n * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint\n * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint\n * - Large (640-1023): adapts to `PanelType.medium` at this breakpoint\n * - XLarge (1024-1365): adapts to `PanelType.large` at this breakpoint\n * - XXLarge (1366-1919): 176px fixed left margin, fluid width, 40px left/right padding\n * - XXXLarge (1920-up): 176px fixed left margin, fluid width, 40px left/right padding\n */\n PanelType[PanelType[\"extraLarge\"] = 6] = \"extraLarge\";\n /**\n * Renders the Panel in `custom` size using `customWidth`, anchored to the far side (right in LTR mode).\n * - Has a fixed width provided by the `customWidth` prop\n * - When screen width reaches the `customWidth` value it will behave like a fluid width Panel\n * taking up 100% of the viewport width\n */\n PanelType[PanelType[\"custom\"] = 7] = \"custom\";\n /**\n * Renders the Panel in `custom` size using `customWidth`, anchored to the near side (left in LTR mode).\n * - Has a fixed width provided by the `customWidth` prop\n * - When screen width reaches the `customWidth` value it will behave like a fluid width Panel\n * taking up 100% of the viewport width\n */\n PanelType[PanelType[\"customNear\"] = 8] = \"customNear\";\n})(PanelType || (PanelType = {}));\n//# sourceMappingURL=Panel.types.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { IconButton } from '../../Button';\nimport { Layer } from '../../Layer';\nimport { Overlay } from '../../Overlay';\nimport { Popup } from '../../Popup';\nimport { allowScrollOnElement, allowOverscrollOnElement, classNamesFunction, divProperties, elementContains, getId, getNativeProps, getRTL, css, warnDeprecations, Async, EventGroup, initializeComponentRef, } from '../../Utilities';\nimport { FocusTrapZone } from '../FocusTrapZone/index';\nimport { PanelType } from './Panel.types';\nvar getClassNames = classNamesFunction();\nvar COMPONENT_NAME = 'Panel';\nvar PanelVisibilityState;\n(function (PanelVisibilityState) {\n PanelVisibilityState[PanelVisibilityState[\"closed\"] = 0] = \"closed\";\n PanelVisibilityState[PanelVisibilityState[\"animatingOpen\"] = 1] = \"animatingOpen\";\n PanelVisibilityState[PanelVisibilityState[\"open\"] = 2] = \"open\";\n PanelVisibilityState[PanelVisibilityState[\"animatingClosed\"] = 3] = \"animatingClosed\";\n})(PanelVisibilityState || (PanelVisibilityState = {}));\nvar PanelBase = /** @class */ (function (_super) {\n __extends(PanelBase, _super);\n function PanelBase(props) {\n var _this = _super.call(this, props) || this;\n _this._panel = React.createRef();\n _this._animationCallback = null;\n _this._hasCustomNavigation = !!(_this.props.onRenderNavigation || _this.props.onRenderNavigationContent);\n _this.dismiss = function (ev) {\n if (_this.props.onDismiss && _this.isActive) {\n _this.props.onDismiss(ev);\n }\n if (!ev || (ev && !ev.defaultPrevented)) {\n _this.close();\n }\n };\n // Allow the user to scroll within the panel but not on the body\n _this._allowScrollOnPanel = function (elt) {\n if (elt) {\n if (_this._allowTouchBodyScroll) {\n allowOverscrollOnElement(elt, _this._events);\n }\n else {\n allowScrollOnElement(elt, _this._events);\n }\n }\n else {\n _this._events.off(_this._scrollableContent);\n }\n _this._scrollableContent = elt;\n };\n _this._onRenderNavigation = function (props) {\n if (!_this.props.onRenderNavigationContent && !_this.props.onRenderNavigation && !_this.props.hasCloseButton) {\n return null;\n }\n var _a = _this.props.onRenderNavigationContent, onRenderNavigationContent = _a === void 0 ? _this._onRenderNavigationContent : _a;\n return (React.createElement(\"div\", { className: _this._classNames.navigation }, onRenderNavigationContent(props, _this._onRenderNavigationContent)));\n };\n _this._onRenderNavigationContent = function (props) {\n var _a;\n var closeButtonAriaLabel = props.closeButtonAriaLabel, hasCloseButton = props.hasCloseButton, _b = props.onRenderHeader, onRenderHeader = _b === void 0 ? _this._onRenderHeader : _b;\n if (hasCloseButton) {\n var iconButtonStyles = (_a = _this._classNames.subComponentStyles) === null || _a === void 0 ? void 0 : _a.closeButton();\n return (React.createElement(React.Fragment, null,\n !_this._hasCustomNavigation && onRenderHeader(_this.props, _this._onRenderHeader, _this._headerTextId),\n React.createElement(IconButton, { styles: iconButtonStyles, className: _this._classNames.closeButton, onClick: _this._onPanelClick, ariaLabel: closeButtonAriaLabel, title: closeButtonAriaLabel, \"data-is-visible\": true, iconProps: { iconName: 'Cancel' } })));\n }\n return null;\n };\n _this._onRenderHeader = function (props, defaultRender, headerTextId) {\n var headerText = props.headerText, _a = props.headerTextProps, headerTextProps = _a === void 0 ? {} : _a;\n if (headerText) {\n return (React.createElement(\"div\", { className: _this._classNames.header },\n React.createElement(\"div\", __assign({ id: headerTextId, role: \"heading\", \"aria-level\": 1 }, headerTextProps, { className: css(_this._classNames.headerText, headerTextProps.className) }), headerText)));\n }\n return null;\n };\n _this._onRenderBody = function (props) {\n return React.createElement(\"div\", { className: _this._classNames.content }, props.children);\n };\n _this._onRenderFooter = function (props) {\n var _a = _this.props.onRenderFooterContent, onRenderFooterContent = _a === void 0 ? null : _a;\n if (onRenderFooterContent) {\n return (React.createElement(\"div\", { className: _this._classNames.footer },\n React.createElement(\"div\", { className: _this._classNames.footerInner }, onRenderFooterContent())));\n }\n return null;\n };\n _this._animateTo = function (newVisibilityState) {\n if (newVisibilityState === PanelVisibilityState.open && _this.props.onOpen) {\n _this.props.onOpen();\n }\n _this._animationCallback = _this._async.setTimeout(function () {\n _this.setState({ visibility: newVisibilityState });\n _this._onTransitionComplete(newVisibilityState);\n }, 200);\n };\n _this._clearExistingAnimationTimer = function () {\n if (_this._animationCallback !== null) {\n _this._async.clearTimeout(_this._animationCallback);\n }\n };\n _this._onPanelClick = function (ev) {\n _this.dismiss(ev);\n };\n _this._onTransitionComplete = function (newVisibilityState) {\n _this._updateFooterPosition();\n if (newVisibilityState === PanelVisibilityState.open && _this.props.onOpened) {\n _this.props.onOpened();\n }\n if (newVisibilityState === PanelVisibilityState.closed && _this.props.onDismissed) {\n _this.props.onDismissed();\n }\n };\n var _a = _this.props.allowTouchBodyScroll, allowTouchBodyScroll = _a === void 0 ? false : _a;\n _this._allowTouchBodyScroll = allowTouchBodyScroll;\n initializeComponentRef(_this);\n warnDeprecations(COMPONENT_NAME, props, {\n ignoreExternalFocusing: 'focusTrapZoneProps',\n forceFocusInsideTrap: 'focusTrapZoneProps',\n firstFocusableSelector: 'focusTrapZoneProps',\n });\n _this.state = {\n isFooterSticky: false,\n // intentionally ignore props so animation takes place during componentDidMount\n visibility: PanelVisibilityState.closed,\n id: getId('Panel'),\n };\n return _this;\n }\n PanelBase.getDerivedStateFromProps = function (nextProps, prevState) {\n if (nextProps.isOpen === undefined) {\n return null; // no state update\n }\n if (nextProps.isOpen &&\n (prevState.visibility === PanelVisibilityState.closed ||\n prevState.visibility === PanelVisibilityState.animatingClosed)) {\n return { visibility: PanelVisibilityState.animatingOpen };\n }\n if (!nextProps.isOpen &&\n (prevState.visibility === PanelVisibilityState.open ||\n prevState.visibility === PanelVisibilityState.animatingOpen)) {\n return { visibility: PanelVisibilityState.animatingClosed };\n }\n return null;\n };\n PanelBase.prototype.componentDidMount = function () {\n this._async = new Async(this);\n this._events = new EventGroup(this);\n this._events.on(window, 'resize', this._updateFooterPosition);\n if (this._shouldListenForOuterClick(this.props)) {\n this._events.on(document.body, 'mousedown', this._dismissOnOuterClick, true);\n }\n if (this.props.isOpen) {\n this.setState({ visibility: PanelVisibilityState.animatingOpen });\n }\n };\n PanelBase.prototype.componentDidUpdate = function (previousProps, previousState) {\n var shouldListenOnOuterClick = this._shouldListenForOuterClick(this.props);\n var previousShouldListenOnOuterClick = this._shouldListenForOuterClick(previousProps);\n if (this.state.visibility !== previousState.visibility) {\n this._clearExistingAnimationTimer();\n if (this.state.visibility === PanelVisibilityState.animatingOpen) {\n this._animateTo(PanelVisibilityState.open);\n }\n else if (this.state.visibility === PanelVisibilityState.animatingClosed) {\n this._animateTo(PanelVisibilityState.closed);\n }\n }\n if (shouldListenOnOuterClick && !previousShouldListenOnOuterClick) {\n this._events.on(document.body, 'mousedown', this._dismissOnOuterClick, true);\n }\n else if (!shouldListenOnOuterClick && previousShouldListenOnOuterClick) {\n this._events.off(document.body, 'mousedown', this._dismissOnOuterClick, true);\n }\n };\n PanelBase.prototype.componentWillUnmount = function () {\n this._async.dispose();\n this._events.dispose();\n };\n PanelBase.prototype.render = function () {\n var _a = this.props, _b = _a.className, className = _b === void 0 ? '' : _b, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, \n /* eslint-disable deprecation/deprecation */\n firstFocusableSelector = _a.firstFocusableSelector, focusTrapZoneProps = _a.focusTrapZoneProps, forceFocusInsideTrap = _a.forceFocusInsideTrap, hasCloseButton = _a.hasCloseButton, headerText = _a.headerText, _c = _a.headerClassName, headerClassName = _c === void 0 ? '' : _c, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isFooterAtBottom = _a.isFooterAtBottom, isLightDismiss = _a.isLightDismiss, isHiddenOnDismiss = _a.isHiddenOnDismiss, layerProps = _a.layerProps, overlayProps = _a.overlayProps, popupProps = _a.popupProps, type = _a.type, styles = _a.styles, theme = _a.theme, customWidth = _a.customWidth, _d = _a.onLightDismissClick, onLightDismissClick = _d === void 0 ? this._onPanelClick : _d, _e = _a.onRenderNavigation, onRenderNavigation = _e === void 0 ? this._onRenderNavigation : _e, _f = _a.onRenderHeader, onRenderHeader = _f === void 0 ? this._onRenderHeader : _f, _g = _a.onRenderBody, onRenderBody = _g === void 0 ? this._onRenderBody : _g, _h = _a.onRenderFooter, onRenderFooter = _h === void 0 ? this._onRenderFooter : _h;\n var _j = this.state, isFooterSticky = _j.isFooterSticky, visibility = _j.visibility, id = _j.id;\n var isLeft = type === PanelType.smallFixedNear || type === PanelType.customNear ? true : false;\n var isRTL = getRTL(theme);\n var isOnRightSide = isRTL ? isLeft : !isLeft;\n var customWidthStyles = type === PanelType.custom || type === PanelType.customNear ? { width: customWidth } : {};\n var nativeProps = getNativeProps(this.props, divProperties);\n var isOpen = this.isActive;\n var isAnimating = visibility === PanelVisibilityState.animatingClosed || visibility === PanelVisibilityState.animatingOpen;\n this._headerTextId = headerText && id + '-headerText';\n if (!isOpen && !isAnimating && !isHiddenOnDismiss) {\n return null;\n }\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n focusTrapZoneClassName: focusTrapZoneProps ? focusTrapZoneProps.className : undefined,\n hasCloseButton: hasCloseButton,\n headerClassName: headerClassName,\n isAnimating: isAnimating,\n isFooterSticky: isFooterSticky,\n isFooterAtBottom: isFooterAtBottom,\n isOnRightSide: isOnRightSide,\n isOpen: isOpen,\n isHiddenOnDismiss: isHiddenOnDismiss,\n type: type,\n hasCustomNavigation: this._hasCustomNavigation,\n });\n var _k = this, _classNames = _k._classNames, _allowTouchBodyScroll = _k._allowTouchBodyScroll;\n var overlay;\n if (isBlocking && isOpen) {\n overlay = (React.createElement(Overlay, __assign({ className: _classNames.overlay, isDarkThemed: false, onClick: isLightDismiss ? onLightDismissClick : undefined, allowTouchBodyScroll: _allowTouchBodyScroll }, overlayProps)));\n }\n return (React.createElement(Layer, __assign({}, layerProps),\n React.createElement(Popup, __assign({ role: \"dialog\", \"aria-modal\": isBlocking ? 'true' : undefined, ariaLabelledBy: this._headerTextId ? this._headerTextId : undefined, onDismiss: this.dismiss, className: _classNames.hiddenPanel, enableAriaHiddenSiblings: isOpen ? true : false }, popupProps),\n React.createElement(\"div\", __assign({ \"aria-hidden\": !isOpen && isAnimating }, nativeProps, { ref: this._panel, className: _classNames.root }),\n overlay,\n React.createElement(FocusTrapZone, __assign({ ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: !isBlocking || (isHiddenOnDismiss && !isOpen) ? false : forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector, isClickableOutsideFocusTrap: true }, focusTrapZoneProps, { className: _classNames.main, style: customWidthStyles, elementToFocusOnDismiss: elementToFocusOnDismiss }),\n React.createElement(\"div\", { className: _classNames.contentInner },\n React.createElement(\"div\", { ref: this._allowScrollOnPanel, className: _classNames.scrollableContent, \"data-is-scrollable\": true },\n React.createElement(\"div\", { className: _classNames.commands, \"data-is-visible\": true }, onRenderNavigation(this.props, this._onRenderNavigation)),\n (this._hasCustomNavigation || !hasCloseButton) &&\n onRenderHeader(this.props, this._onRenderHeader, this._headerTextId),\n onRenderBody(this.props, this._onRenderBody),\n onRenderFooter(this.props, this._onRenderFooter))))))));\n };\n PanelBase.prototype.open = function () {\n if (this.props.isOpen !== undefined) {\n return;\n }\n if (this.isActive) {\n return;\n }\n this.setState({ visibility: PanelVisibilityState.animatingOpen });\n };\n PanelBase.prototype.close = function () {\n if (this.props.isOpen !== undefined) {\n return;\n }\n if (!this.isActive) {\n return;\n }\n this.setState({ visibility: PanelVisibilityState.animatingClosed });\n };\n Object.defineProperty(PanelBase.prototype, \"isActive\", {\n /** isActive is true when panel is open or opening. */\n get: function () {\n return (this.state.visibility === PanelVisibilityState.open ||\n this.state.visibility === PanelVisibilityState.animatingOpen);\n },\n enumerable: false,\n configurable: true\n });\n PanelBase.prototype._shouldListenForOuterClick = function (props) {\n return !!props.isBlocking && !!props.isOpen;\n };\n PanelBase.prototype._updateFooterPosition = function () {\n var scrollableContent = this._scrollableContent;\n if (scrollableContent) {\n var height = scrollableContent.clientHeight;\n var innerHeight_1 = scrollableContent.scrollHeight;\n this.setState({\n isFooterSticky: height < innerHeight_1 ? true : false,\n });\n }\n };\n PanelBase.prototype._dismissOnOuterClick = function (ev) {\n var panel = this._panel.current;\n if (this.isActive && panel && !ev.defaultPrevented) {\n if (!elementContains(panel, ev.target)) {\n if (this.props.onOuterClick) {\n this.props.onOuterClick(ev);\n }\n else {\n this.dismiss(ev);\n }\n }\n }\n };\n PanelBase.defaultProps = {\n isHiddenOnDismiss: false,\n isOpen: undefined,\n isBlocking: true,\n hasCloseButton: true,\n type: PanelType.smallFixedFar,\n };\n return PanelBase;\n}(React.Component));\nexport { PanelBase };\n//# sourceMappingURL=Panel.base.js.map","var _a, _b, _c, _d, _e;\nimport { __assign } from \"tslib\";\nimport { PanelType } from './Panel.types';\nimport { AnimationClassNames, AnimationVariables, getGlobalClassNames, HighContrastSelector, ScreenWidthMinMedium, ScreenWidthMinLarge, ScreenWidthMinXLarge, ScreenWidthMinXXLarge, ScreenWidthMinUhfMobile, IconFontSizes, } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Panel',\n main: 'ms-Panel-main',\n commands: 'ms-Panel-commands',\n contentInner: 'ms-Panel-contentInner',\n scrollableContent: 'ms-Panel-scrollableContent',\n navigation: 'ms-Panel-navigation',\n closeButton: 'ms-Panel-closeButton ms-PanelAction-close',\n header: 'ms-Panel-header',\n headerText: 'ms-Panel-headerText',\n content: 'ms-Panel-content',\n footer: 'ms-Panel-footer',\n footerInner: 'ms-Panel-footerInner',\n isOpen: 'is-open',\n hasCloseButton: 'ms-Panel--hasCloseButton',\n smallFluid: 'ms-Panel--smFluid',\n smallFixedNear: 'ms-Panel--smLeft',\n smallFixedFar: 'ms-Panel--sm',\n medium: 'ms-Panel--md',\n large: 'ms-Panel--lg',\n largeFixed: 'ms-Panel--fixed',\n extraLarge: 'ms-Panel--xl',\n custom: 'ms-Panel--custom',\n customNear: 'ms-Panel--customLeft',\n};\nvar panelWidth = {\n full: '100%',\n auto: 'auto',\n xs: 272,\n sm: 340,\n md1: 592,\n md2: 644,\n lg: 940,\n};\nvar panelMargin = {\n auto: 'auto',\n none: 0,\n md: 48,\n lg: 428,\n xl: 176,\n};\n// Following consts are used below in `getPanelBreakpoints()` function to provide\n// necessary fallbacks for different types of Panel in different breakpoints.\nvar smallPanelSelectors = (_a = {},\n _a[\"@media (min-width: \".concat(ScreenWidthMinMedium, \"px)\")] = {\n width: panelWidth.sm,\n },\n _a);\nvar mediumPanelSelectors = (_b = {},\n _b[\"@media (min-width: \".concat(ScreenWidthMinLarge, \"px)\")] = {\n width: panelWidth.md1,\n },\n _b[\"@media (min-width: \".concat(ScreenWidthMinXLarge, \"px)\")] = {\n width: panelWidth.md2,\n },\n _b);\nvar largePanelSelectors = (_c = {},\n _c[\"@media (min-width: \".concat(ScreenWidthMinUhfMobile, \"px)\")] = {\n left: panelMargin.md,\n width: panelWidth.auto,\n },\n _c[\"@media (min-width: \".concat(ScreenWidthMinXXLarge, \"px)\")] = {\n left: panelMargin.lg,\n },\n _c);\nvar largeFixedPanelSelectors = (_d = {},\n _d[\"@media (min-width: \".concat(ScreenWidthMinXXLarge, \"px)\")] = {\n left: panelMargin.auto,\n width: panelWidth.lg,\n },\n _d);\nvar extraLargePanelSelectors = (_e = {},\n _e[\"@media (min-width: \".concat(ScreenWidthMinXXLarge, \"px)\")] = {\n left: panelMargin.xl,\n },\n _e);\n// Make sure Panels have fallbacks to different breakpoints by reusing same selectors.\n// This is done in the effort to follow design redlines.\nvar getPanelBreakpoints = function (type) {\n var selectors;\n // Panel types `smallFluid`, `smallFixedNear`, `custom` and `customNear`\n // are not checked in here because they render the same in all the breakpoints\n // and have the checks done separately in the `getStyles` function below.\n switch (type) {\n case PanelType.smallFixedFar:\n selectors = __assign({}, smallPanelSelectors);\n break;\n case PanelType.medium:\n selectors = __assign(__assign({}, smallPanelSelectors), mediumPanelSelectors);\n break;\n case PanelType.large:\n selectors = __assign(__assign(__assign({}, smallPanelSelectors), mediumPanelSelectors), largePanelSelectors);\n break;\n case PanelType.largeFixed:\n selectors = __assign(__assign(__assign(__assign({}, smallPanelSelectors), mediumPanelSelectors), largePanelSelectors), largeFixedPanelSelectors);\n break;\n case PanelType.extraLarge:\n selectors = __assign(__assign(__assign(__assign({}, smallPanelSelectors), mediumPanelSelectors), largePanelSelectors), extraLargePanelSelectors);\n break;\n default:\n break;\n }\n return selectors;\n};\nvar commandBarHeight = '44px';\nvar sharedPaddingStyles = {\n paddingLeft: '24px',\n paddingRight: '24px',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c, _d;\n var className = props.className, focusTrapZoneClassName = props.focusTrapZoneClassName, hasCloseButton = props.hasCloseButton, headerClassName = props.headerClassName, isAnimating = props.isAnimating, isFooterSticky = props.isFooterSticky, isFooterAtBottom = props.isFooterAtBottom, isOnRightSide = props.isOnRightSide, isOpen = props.isOpen, isHiddenOnDismiss = props.isHiddenOnDismiss, hasCustomNavigation = props.hasCustomNavigation, theme = props.theme, _e = props.type, type = _e === void 0 ? PanelType.smallFixedFar : _e;\n var effects = theme.effects, fonts = theme.fonts, semanticColors = theme.semanticColors;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var isCustomPanel = type === PanelType.custom || type === PanelType.customNear;\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n isOpen && classNames.isOpen,\n hasCloseButton && classNames.hasCloseButton,\n {\n pointerEvents: 'none',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n },\n isCustomPanel && isOnRightSide && classNames.custom,\n isCustomPanel && !isOnRightSide && classNames.customNear,\n className,\n ],\n overlay: [\n {\n pointerEvents: 'auto',\n cursor: 'pointer',\n },\n isOpen && isAnimating && AnimationClassNames.fadeIn100,\n !isOpen && isAnimating && AnimationClassNames.fadeOut100,\n ],\n hiddenPanel: [\n !isOpen &&\n !isAnimating &&\n isHiddenOnDismiss && {\n visibility: 'hidden',\n },\n ],\n main: [\n classNames.main,\n {\n backgroundColor: semanticColors.bodyBackground,\n boxShadow: effects.elevation64,\n pointerEvents: 'auto',\n position: 'absolute',\n display: 'flex',\n flexDirection: 'column',\n overflowX: 'hidden',\n overflowY: 'auto',\n WebkitOverflowScrolling: 'touch',\n bottom: 0,\n top: 0,\n // left, right, width are overridden depending on the type of the Panel and the screen breakpoint.\n left: panelMargin.auto,\n right: panelMargin.none,\n width: panelWidth.full,\n selectors: __assign((_a = {}, _a[HighContrastSelector] = {\n borderLeft: \"3px solid \".concat(semanticColors.variantBorder),\n borderRight: \"3px solid \".concat(semanticColors.variantBorder),\n }, _a), getPanelBreakpoints(type)),\n },\n type === PanelType.smallFluid && {\n left: panelMargin.none,\n },\n type === PanelType.smallFixedNear && {\n left: panelMargin.none,\n right: panelMargin.auto,\n width: panelWidth.xs,\n },\n type === PanelType.customNear && {\n right: 'auto',\n left: 0,\n },\n isCustomPanel && {\n maxWidth: '100vw',\n },\n isOpen && isAnimating && !isOnRightSide && AnimationClassNames.slideRightIn40,\n isOpen && isAnimating && isOnRightSide && AnimationClassNames.slideLeftIn40,\n !isOpen && isAnimating && !isOnRightSide && AnimationClassNames.slideLeftOut40,\n !isOpen && isAnimating && isOnRightSide && AnimationClassNames.slideRightOut40,\n focusTrapZoneClassName,\n ],\n commands: [\n classNames.commands,\n {\n // Ensures that the sticky header always has a background to prevent overlaps on scroll.\n backgroundColor: semanticColors.bodyBackground,\n paddingTop: 18,\n selectors: (_b = {},\n _b[\"@media (min-height: \".concat(ScreenWidthMinMedium, \"px)\")] = {\n position: 'sticky',\n top: 0,\n zIndex: 1,\n },\n _b),\n },\n hasCustomNavigation && {\n paddingTop: 'inherit',\n },\n ],\n navigation: [\n classNames.navigation,\n {\n display: 'flex',\n justifyContent: 'flex-end',\n },\n hasCustomNavigation && {\n height: commandBarHeight,\n },\n ],\n contentInner: [\n classNames.contentInner,\n {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n overflowY: 'hidden',\n },\n ],\n header: [\n classNames.header,\n sharedPaddingStyles,\n {\n alignSelf: 'flex-start',\n },\n hasCloseButton &&\n !hasCustomNavigation && {\n flexGrow: 1,\n },\n hasCustomNavigation && {\n // Ensure that title doesn't shrink if screen is too small\n flexShrink: 0,\n },\n ],\n headerText: [\n classNames.headerText,\n fonts.xLarge,\n {\n color: semanticColors.bodyText,\n lineHeight: '27px',\n overflowWrap: 'break-word',\n wordWrap: 'break-word',\n wordBreak: 'break-word',\n hyphens: 'auto',\n },\n headerClassName,\n ],\n scrollableContent: [\n classNames.scrollableContent,\n {\n overflowY: 'auto',\n },\n isFooterAtBottom && {\n flexGrow: 1,\n display: 'inherit',\n flexDirection: 'inherit',\n },\n ],\n content: [\n classNames.content,\n sharedPaddingStyles,\n {\n paddingBottom: 20,\n },\n isFooterAtBottom && {\n selectors: (_c = {},\n _c[\"@media (min-height: \".concat(ScreenWidthMinMedium, \"px)\")] = {\n flexGrow: 1,\n },\n _c),\n },\n ],\n footer: [\n classNames.footer,\n {\n // Ensure that footer doesn't shrink if screen is too small\n flexShrink: 0,\n borderTop: '1px solid transparent',\n transition: \"opacity \".concat(AnimationVariables.durationValue3, \" \").concat(AnimationVariables.easeFunction2),\n selectors: (_d = {},\n _d[\"@media (min-height: \".concat(ScreenWidthMinMedium, \"px)\")] = {\n position: 'sticky',\n bottom: 0,\n },\n _d),\n },\n isFooterSticky && {\n backgroundColor: semanticColors.bodyBackground,\n borderTopColor: semanticColors.variantBorder,\n },\n ],\n footerInner: [\n classNames.footerInner,\n sharedPaddingStyles,\n {\n paddingBottom: 16,\n paddingTop: 16,\n },\n ],\n subComponentStyles: {\n closeButton: {\n root: [\n classNames.closeButton,\n {\n marginRight: 14,\n color: theme.palette.neutralSecondary,\n fontSize: IconFontSizes.large,\n },\n hasCustomNavigation && {\n marginRight: 0,\n height: 'auto',\n width: '44px',\n },\n ],\n rootHovered: {\n color: theme.palette.neutralPrimary,\n },\n },\n },\n };\n};\n//# sourceMappingURL=Panel.styles.js.map","import { styled } from '../../Utilities';\nimport { PanelBase } from './Panel.base';\nimport { getStyles } from './Panel.styles';\n/**\n * Panel description\n */\nexport var Panel = styled(PanelBase, getStyles, undefined, {\n scope: 'Panel',\n});\n//# sourceMappingURL=Panel.js.map","import { getWindow } from '@fluentui/utilities';\n/**\n * Wrapper for ResizeObserver, with fallback for browsers that don't support ResizeObserver.\n *\n * Calls the onResize callback once layout is complete, and again whenever any of the target(s) change size.\n * Or if ResizeObserver isn't supported, calls the callback whenever the window changes size.\n *\n * @param target - Either a single element, or array of elements to watch for size changes.\n * @param onResize - Callback to be notified when layout is complete, and when the target(s) change size.\n * If this browser supports ResizeObserver, the callback will be passed the ResizeObserverEntry[] array.\n * Otherwise, the entries array will be undefined, and you'll need to find another way to get the element's size,\n * (e.g. clientWidth/clientHeight or getBoundingClientRect).\n *\n * @returns A function to clean up the observer/listener.\n */\nexport var observeResize = function (target, onResize) {\n if (typeof ResizeObserver !== 'undefined') {\n var observer_1 = new ResizeObserver(onResize);\n if (Array.isArray(target)) {\n target.forEach(function (t) { return observer_1.observe(t); });\n }\n else {\n observer_1.observe(target);\n }\n return function () { return observer_1.disconnect(); };\n }\n else {\n // Fallback for browsers that don't support ResizeObserver\n var onResizeWrapper_1 = function () { return onResize(undefined); };\n var win_1 = getWindow(Array.isArray(target) ? target[0] : target);\n if (!win_1) {\n // Can't listen for resize if we can't get the window object\n return function () {\n // Nothing to clean up\n };\n }\n // Listen for the first animation frame, which will happen after layout is complete\n var animationFrameId_1 = win_1.requestAnimationFrame(onResizeWrapper_1);\n win_1.addEventListener('resize', onResizeWrapper_1, false);\n return function () {\n win_1.cancelAnimationFrame(animationFrameId_1);\n win_1.removeEventListener('resize', onResizeWrapper_1, false);\n };\n }\n};\n//# sourceMappingURL=observeResize.js.map","import * as React from 'react';\nimport { useIsomorphicLayoutEffect, useRefEffect } from '@fluentui/react-hooks';\nimport { getWindow } from '@fluentui/utilities';\nimport { observeResize } from './observeResize';\n/**\n * Track whether any items don't fit within their container, and move them to the overflow menu.\n * Items are moved into the overflow menu from back to front, excluding pinned items.\n *\n * The overflow menu button must be the last sibling of all of the items that can be put into the overflow, and it\n * must be hooked up to the `setMenuButtonRef` setter function that's returned by `useOverflow`:\n * ```ts\n * const overflow = useOverflow(...);\n * ```\n * ```jsx\n * \n * // Index 0\n * // Index 1\n * ...\n *