@azure/communication-react 1.21.0-alpha-202410180016 → 1.21.0-alpha-202410190016

package/dist/dist-esm/react-components/src/components/EndCallButton.js

@@ -1,7 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { concatStyleSets, Icon } from '@fluentui/react';
-/* @conditional-compile-remove(end-call-options) */
 import { mergeStyles } from '@fluentui/react';
 import React, { useCallback } from 'react';
 import { useLocale } from '../localization';
@@ -9,9 +8,7 @@ import { useTheme } from '../theming';
 import { darkTheme, lightTheme } from '../theming/themes';
 import { isDarkThemed } from '../theming/themeUtils';
 import { ControlBarButton } from './ControlBarButton';
-/* @conditional-compile-remove(end-call-options) */
 import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../acs-ui-common/src";
-/* @conditional-compile-remove(end-call-options) */
 const spacerClass = mergeStyles({
     width: 4
 });
@@ -24,17 +21,15 @@ const spacerClass = mergeStyles({
  */
 export const EndCallButton = (props) => {
     var _a, _b;
-    const { styles, /* @conditional-compile-remove(end-call-options) */ enableEndCallMenu, onHangUp } = props;
+    const { styles, enableEndCallMenu, onHangUp } = props;
     const localeStrings = useLocale().strings.endCallButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const theme = useTheme();
     const isDarkTheme = isDarkThemed(theme);
-    const componentStyles = concatStyleSets(isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles, 
-    /* @conditional-compile-remove(end-call-options) */ enableEndCallMenu ? menupButtonPadding : {}, styles !== null && styles !== void 0 ? styles : {});
+    const componentStyles = concatStyleSets(isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles, enableEndCallMenu ? menupButtonPadding : {}, styles !== null && styles !== void 0 ? styles : {});
     const onRenderEndCallIcon = useCallback(() => (React.createElement(React.Fragment, null,
-        React.createElement(Icon, { iconName: "ControlButtonEndCall" }), /* @conditional-compile-remove(end-call-options) */
-        enableEndCallMenu && React.createElement("span", { className: spacerClass }))), [/* @conditional-compile-remove(end-call-options) */ enableEndCallMenu]);
-    /* @conditional-compile-remove(end-call-options) */
+        React.createElement(Icon, { iconName: "ControlButtonEndCall" }),
+        enableEndCallMenu && React.createElement("span", { className: spacerClass }))), [enableEndCallMenu]);
     const defaultMenuProps = {
         items: [
             {
@@ -65,9 +60,7 @@ export const EndCallButton = (props) => {
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(ControlBarButton, Object.assign({}, props, { 
-            /* @conditional-compile-remove(end-call-options) */
-            menuProps: enableEndCallMenu ? defaultMenuProps : props.menuProps, onClick: onHangUp ? () => onHangUp() : props.onClick, styles: componentStyles, onRenderIcon: (_a = props.onRenderIcon) !== null && _a !== void 0 ? _a : onRenderEndCallIcon, strings: strings, labelKey: (_b = props.labelKey) !== null && _b !== void 0 ? _b : 'endCallButtonLabel' }))));
+        React.createElement(ControlBarButton, Object.assign({}, props, { menuProps: enableEndCallMenu ? defaultMenuProps : props.menuProps, onClick: onHangUp ? () => onHangUp() : props.onClick, styles: componentStyles, onRenderIcon: (_a = props.onRenderIcon) !== null && _a !== void 0 ? _a : onRenderEndCallIcon, strings: strings, labelKey: (_b = props.labelKey) !== null && _b !== void 0 ? _b : 'endCallButtonLabel' }))));
 };
 const getButtonStyles = (theme) => {
     var _a;
@@ -134,7 +127,6 @@ const lightThemeCallButtonStyles = {
         color: lightTheme.callingPalette.iconWhite
     }
 };
-/* @conditional-compile-remove(end-call-options) */
 const menupButtonPadding = {
     root: { padding: '0 0.75rem' }
 };

package/dist/dist-esm/react-components/src/components/EndCallButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"EndCallButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/EndCallButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,IAAI,EAAwB,MAAM,iBAAiB,CAAC;AAC9E,mDAAmD;AACnD,OAAO,EAAwB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAgB,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,mDAAmD;AACnD,OAAO,EAAE,sBAAsB,IAAI,qBAAqB,EAAE,mCAAgC;AAiD1F,mDAAmD;AACnD,MAAM,WAAW,GAAG,WAAW,CAAC;IAC9B,KAAK,EAAE,CAAC;CACT,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;;IACtE,MAAM,EAAE,MAAM,EAAE,mDAAmD,CAAC,iBAAiB,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE1G,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC;IACxD,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,eAAe,GAAG,eAAe,CACrC,WAAW,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,0BAA0B;IACpE,mDAAmD,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAC/F,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,CACb,CAAC;IAEF,MAAM,mBAAmB,GAAG,WAAW,CACrC,GAAgB,EAAE,CAAC,CACjB;QACE,oBAAC,IAAI,IAAC,QAAQ,EAAC,sBAAsB,GAAG,EACvC,mDAAmD;QAAC,iBAAiB,IAAI,8BAAM,SAAS,EAAE,WAAW,GAAI,CACzG,CACJ,EACD,CAAC,mDAAmD,CAAC,iBAAiB,CAAC,CACxE,CAAC;IAEF,mDAAmD;IACnD,MAAM,gBAAgB,GAAyB;QAC7C,KAAK,EAAE;YACL;gBACE,GAAG,EAAE,YAAY;gBACjB,IAAI,EAAE,aAAa,CAAC,WAAW;gBAC/B,KAAK,EAAE,aAAa,CAAC,WAAW;gBAChC,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAC9B,CAAC;aACF;YACD;gBACE,GAAG,EAAE,gBAAgB;gBACrB,IAAI,EAAE,aAAa,CAAC,aAAa;gBACjC,KAAK,EAAE,aAAa,CAAC,aAAa;gBAClC,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;gBAC7B,CAAC;aACF;SACF;QACD,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,YAAY,EAAE;YACZ,MAAM,EAAE;gBACN,IAAI,EAAE;oBACJ,QAAQ,EAAE,KAAK;iBAChB;aACF;YACD,qBAAqB;SACtB;KACF,CAAC;IAEF,OAAO,CACL;QACE,oBAAC,gBAAgB,oBACX,KAAK;YACT,mDAAmD;YACnD,SAAS,EAAE,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,EACjE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EACpD,MAAM,EAAE,eAAe,EACvB,YAAY,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,mBAAmB,EACvD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,oBAAoB,IAChD,CACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CACtB,KAAkC,EACqB,EAAE;;IAAC,OAAA,CAAC;QAC3D,OAAO,EAAE;YACP,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;YACrC,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO;YACxC,gCAAgC,EAAE;gBAChC,iBAAiB,EAAE,MAAM;gBACzB,MAAM,EAAE,OAAO,MAAA,KAAK,CAAC,OAAO,0CAAE,oBAAoB,QAAQ;aAC3D;YACD,IAAI,EAAE;gBACJ,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;aACtC;YACD,eAAe,EAAE,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,cAAc,CAAC,SAAS,aAAa,EAAE,CAAC,+DAA+D;SAClJ;QACD,OAAO,EAAE;YACP,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;YACrC,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa;YAC9C,MAAM,EAAE,MAAM;YACd,IAAI,EAAE;gBACJ,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;aACtC;YACD,gCAAgC,EAAE;gBAChC,iBAAiB,EAAE,MAAM;aAC1B;SACF;QACD,OAAO,EAAE;YACP,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;YACrC,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW;YAC5C,MAAM,EAAE,MAAM;YACd,IAAI,EAAE;gBACJ,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;aACtC;YACD,gCAAgC,EAAE;gBAChC,iBAAiB,EAAE,MAAM;aAC1B;SACF;KACF,CAAC,CAAA;CAAA,CAAC;AAEH,MAAM,qBAAqB,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;AACzD,MAAM,sBAAsB,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;AAE3D,yEAAyE;AACzE,MAAM,yBAAyB,GAAG;IAChC,IAAI,EAAE,qBAAqB,CAAC,OAAO;IACnC,WAAW,EAAE,qBAAqB,CAAC,OAAO;IAC1C,WAAW,EAAE,qBAAqB,CAAC,OAAO;IAC1C,KAAK,EAAE;QACL,KAAK,EAAE,SAAS,CAAC,cAAc,CAAC,SAAS;KAC1C;IACD,qBAAqB,kCACf,qBAAqB,CAAC,OAAkB,KAC5C,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,qBAAqB,CAAC,OAAO,GACzC;IACD,4BAA4B,EAAE,qBAAqB,CAAC,OAAO;IAC3D,6BAA6B,EAAE,qBAAqB,CAAC,OAAO;CAC7D,CAAC;AAEF,MAAM,0BAA0B,GAAG;IACjC,IAAI,EAAE,sBAAsB,CAAC,OAAO;IACpC,WAAW,EAAE,sBAAsB,CAAC,OAAO;IAC3C,WAAW,EAAE,sBAAsB,CAAC,OAAO;IAC3C,qBAAqB,kCACf,sBAAsB,CAAC,OAAkB,KAC7C,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,sBAAsB,CAAC,OAAO,GAC1C;IACD,4BAA4B,EAAE,sBAAsB,CAAC,OAAO;IAC5D,6BAA6B,EAAE,sBAAsB,CAAC,OAAO;IAC7D,sBAAsB,EAAE,sBAAsB,CAAC,OAAO;IACtD,KAAK,EAAE;QACL,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,SAAS;KAC3C;CACF,CAAC;AAEF,mDAAmD;AACnD,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;CAC/B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon, IStyle, PartialTheme } from '@fluentui/react';\n/* @conditional-compile-remove(end-call-options) */\nimport { IContextualMenuProps, mergeStyles } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { CallingTheme, darkTheme, lightTheme } from '../theming/themes';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\n/* @conditional-compile-remove(end-call-options) */\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Strings of {@link EndCallButton} that can be overridden.\n *\n * @public\n */\nexport interface EndCallButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /** Tooltip content. */\n  tooltipContent?: string;\n\n  /* @conditional-compile-remove(end-call-options) */\n  /** Label for leave option when ending call */\n  leaveOption?: string;\n\n  /* @conditional-compile-remove(end-call-options) */\n  /** Label for end the whole call option when ending call */\n  endCallOption?: string;\n}\n\n/**\n * Props for {@link EndCallButton}.\n *\n * @public\n */\nexport interface EndCallButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onHangUp?: (forEveryone?: boolean) => Promise<void>;\n\n  /* @conditional-compile-remove(end-call-options) */\n  /**\n   * Set this to true to make it a split button.\n   * The split arrow will trigger a contextual menu to allow end for everyone or just for the user.\n   */\n  enableEndCallMenu?: boolean;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: EndCallButtonStrings;\n}\n\n/* @conditional-compile-remove(end-call-options) */\nconst spacerClass = mergeStyles({\n  width: 4\n});\n\n/**\n * A button to end an ongoing call.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const EndCallButton = (props: EndCallButtonProps): JSX.Element => {\n  const { styles, /* @conditional-compile-remove(end-call-options) */ enableEndCallMenu, onHangUp } = props;\n\n  const localeStrings = useLocale().strings.endCallButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const theme = useTheme();\n  const isDarkTheme = isDarkThemed(theme);\n  const componentStyles = concatStyleSets(\n    isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles,\n    /* @conditional-compile-remove(end-call-options) */ enableEndCallMenu ? menupButtonPadding : {},\n    styles ?? {}\n  );\n\n  const onRenderEndCallIcon = useCallback(\n    (): JSX.Element => (\n      <>\n        <Icon iconName=\"ControlButtonEndCall\" />\n        {/* @conditional-compile-remove(end-call-options) */ enableEndCallMenu && <span className={spacerClass} />}\n      </>\n    ),\n    [/* @conditional-compile-remove(end-call-options) */ enableEndCallMenu]\n  );\n\n  /* @conditional-compile-remove(end-call-options) */\n  const defaultMenuProps: IContextualMenuProps = {\n    items: [\n      {\n        key: 'endForSelf',\n        text: localeStrings.leaveOption,\n        title: localeStrings.leaveOption,\n        onClick: () => {\n          onHangUp && onHangUp(false);\n        }\n      },\n      {\n        key: 'endForEveryone',\n        text: localeStrings.endCallOption,\n        title: localeStrings.endCallOption,\n        onClick: () => {\n          onHangUp && onHangUp(true);\n        }\n      }\n    ],\n    styles: props.styles,\n    calloutProps: {\n      styles: {\n        root: {\n          maxWidth: '95%'\n        }\n      },\n      preventDismissOnEvent\n    }\n  };\n\n  return (\n    <>\n      <ControlBarButton\n        {...props}\n        /* @conditional-compile-remove(end-call-options) */\n        menuProps={enableEndCallMenu ? defaultMenuProps : props.menuProps}\n        onClick={onHangUp ? () => onHangUp() : props.onClick}\n        styles={componentStyles}\n        onRenderIcon={props.onRenderIcon ?? onRenderEndCallIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'endCallButtonLabel'}\n      />\n    </>\n  );\n};\n\nconst getButtonStyles = (\n  theme: PartialTheme & CallingTheme\n): { regular: IStyle; pressed: IStyle; hovered: IStyle } => ({\n  regular: {\n    color: theme.callingPalette.iconWhite,\n    background: theme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto',\n      border: `1px ${theme.palette?.neutralQuaternaryAlt} solid`\n    },\n    ' i': {\n      color: theme.callingPalette.iconWhite\n    },\n    ':focus::after': { outlineColor: `${theme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles\n  },\n  pressed: {\n    color: theme.callingPalette.iconWhite,\n    background: theme.callingPalette.callRedDarker,\n    border: 'none',\n    ' i': {\n      color: theme.callingPalette.iconWhite\n    },\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  },\n  hovered: {\n    color: theme.callingPalette.iconWhite,\n    background: theme.callingPalette.callRedDark,\n    border: 'none',\n    ' i': {\n      color: theme.callingPalette.iconWhite\n    },\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  }\n});\n\nconst darkThemeButtonStyles = getButtonStyles(darkTheme);\nconst lightThemeButtonStyles = getButtonStyles(lightTheme);\n\n// using media query to prevent windows from overwriting the button color\nconst darkThemeCallButtonStyles = {\n  root: darkThemeButtonStyles.regular,\n  rootHovered: darkThemeButtonStyles.hovered,\n  rootPressed: darkThemeButtonStyles.pressed,\n  label: {\n    color: darkTheme.callingPalette.iconWhite\n  },\n  splitButtonMenuButton: {\n    ...(darkThemeButtonStyles.regular as object),\n    borderTop: 'none',\n    borderRight: 'none',\n    borderBottom: 'none',\n    '&:hover': darkThemeButtonStyles.hovered\n  },\n  splitButtonMenuButtonChecked: darkThemeButtonStyles.hovered,\n  splitButtonMenuButtonExpanded: darkThemeButtonStyles.pressed\n};\n\nconst lightThemeCallButtonStyles = {\n  root: lightThemeButtonStyles.regular,\n  rootHovered: lightThemeButtonStyles.hovered,\n  rootPressed: lightThemeButtonStyles.pressed,\n  splitButtonMenuButton: {\n    ...(lightThemeButtonStyles.regular as object),\n    borderTop: 'none',\n    borderRight: 'none',\n    borderBottom: 'none',\n    '&:hover': lightThemeButtonStyles.hovered\n  },\n  splitButtonMenuButtonChecked: lightThemeButtonStyles.hovered,\n  splitButtonMenuButtonExpanded: lightThemeButtonStyles.pressed,\n  splitButtonMenuFocused: lightThemeButtonStyles.pressed,\n  label: {\n    color: lightTheme.callingPalette.iconWhite\n  }\n};\n\n/* @conditional-compile-remove(end-call-options) */\nconst menupButtonPadding = {\n  root: { padding: '0 0.75rem' }\n};\n"]}
+{"version":3,"file":"EndCallButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/EndCallButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,IAAI,EAAwB,MAAM,iBAAiB,CAAC;AAC9E,OAAO,EAAwB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAgB,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,sBAAsB,IAAI,qBAAqB,EAAE,mCAAgC;AA8C1F,MAAM,WAAW,GAAG,WAAW,CAAC;IAC9B,KAAK,EAAE,CAAC;CACT,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;;IACtE,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEtD,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC;IACxD,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,eAAe,GAAG,eAAe,CACrC,WAAW,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,0BAA0B,EACpE,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAC3C,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,CACb,CAAC;IAEF,MAAM,mBAAmB,GAAG,WAAW,CACrC,GAAgB,EAAE,CAAC,CACjB;QACE,oBAAC,IAAI,IAAC,QAAQ,EAAC,sBAAsB,GAAG;QACvC,iBAAiB,IAAI,8BAAM,SAAS,EAAE,WAAW,GAAI,CACrD,CACJ,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF,MAAM,gBAAgB,GAAyB;QAC7C,KAAK,EAAE;YACL;gBACE,GAAG,EAAE,YAAY;gBACjB,IAAI,EAAE,aAAa,CAAC,WAAW;gBAC/B,KAAK,EAAE,aAAa,CAAC,WAAW;gBAChC,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAC9B,CAAC;aACF;YACD;gBACE,GAAG,EAAE,gBAAgB;gBACrB,IAAI,EAAE,aAAa,CAAC,aAAa;gBACjC,KAAK,EAAE,aAAa,CAAC,aAAa;gBAClC,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;gBAC7B,CAAC;aACF;SACF;QACD,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,YAAY,EAAE;YACZ,MAAM,EAAE;gBACN,IAAI,EAAE;oBACJ,QAAQ,EAAE,KAAK;iBAChB;aACF;YACD,qBAAqB;SACtB;KACF,CAAC;IAEF,OAAO,CACL;QACE,oBAAC,gBAAgB,oBACX,KAAK,IACT,SAAS,EAAE,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,EACjE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EACpD,MAAM,EAAE,eAAe,EACvB,YAAY,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,mBAAmB,EACvD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,oBAAoB,IAChD,CACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CACtB,KAAkC,EACqB,EAAE;;IAAC,OAAA,CAAC;QAC3D,OAAO,EAAE;YACP,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;YACrC,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO;YACxC,gCAAgC,EAAE;gBAChC,iBAAiB,EAAE,MAAM;gBACzB,MAAM,EAAE,OAAO,MAAA,KAAK,CAAC,OAAO,0CAAE,oBAAoB,QAAQ;aAC3D;YACD,IAAI,EAAE;gBACJ,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;aACtC;YACD,eAAe,EAAE,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,cAAc,CAAC,SAAS,aAAa,EAAE,CAAC,+DAA+D;SAClJ;QACD,OAAO,EAAE;YACP,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;YACrC,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa;YAC9C,MAAM,EAAE,MAAM;YACd,IAAI,EAAE;gBACJ,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;aACtC;YACD,gCAAgC,EAAE;gBAChC,iBAAiB,EAAE,MAAM;aAC1B;SACF;QACD,OAAO,EAAE;YACP,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;YACrC,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW;YAC5C,MAAM,EAAE,MAAM;YACd,IAAI,EAAE;gBACJ,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;aACtC;YACD,gCAAgC,EAAE;gBAChC,iBAAiB,EAAE,MAAM;aAC1B;SACF;KACF,CAAC,CAAA;CAAA,CAAC;AAEH,MAAM,qBAAqB,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;AACzD,MAAM,sBAAsB,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;AAE3D,yEAAyE;AACzE,MAAM,yBAAyB,GAAG;IAChC,IAAI,EAAE,qBAAqB,CAAC,OAAO;IACnC,WAAW,EAAE,qBAAqB,CAAC,OAAO;IAC1C,WAAW,EAAE,qBAAqB,CAAC,OAAO;IAC1C,KAAK,EAAE;QACL,KAAK,EAAE,SAAS,CAAC,cAAc,CAAC,SAAS;KAC1C;IACD,qBAAqB,kCACf,qBAAqB,CAAC,OAAkB,KAC5C,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,qBAAqB,CAAC,OAAO,GACzC;IACD,4BAA4B,EAAE,qBAAqB,CAAC,OAAO;IAC3D,6BAA6B,EAAE,qBAAqB,CAAC,OAAO;CAC7D,CAAC;AAEF,MAAM,0BAA0B,GAAG;IACjC,IAAI,EAAE,sBAAsB,CAAC,OAAO;IACpC,WAAW,EAAE,sBAAsB,CAAC,OAAO;IAC3C,WAAW,EAAE,sBAAsB,CAAC,OAAO;IAC3C,qBAAqB,kCACf,sBAAsB,CAAC,OAAkB,KAC7C,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,sBAAsB,CAAC,OAAO,GAC1C;IACD,4BAA4B,EAAE,sBAAsB,CAAC,OAAO;IAC5D,6BAA6B,EAAE,sBAAsB,CAAC,OAAO;IAC7D,sBAAsB,EAAE,sBAAsB,CAAC,OAAO;IACtD,KAAK,EAAE;QACL,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,SAAS;KAC3C;CACF,CAAC;AAEF,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;CAC/B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon, IStyle, PartialTheme } from '@fluentui/react';\nimport { IContextualMenuProps, mergeStyles } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { CallingTheme, darkTheme, lightTheme } from '../theming/themes';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Strings of {@link EndCallButton} that can be overridden.\n *\n * @public\n */\nexport interface EndCallButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /** Tooltip content. */\n  tooltipContent?: string;\n\n  /** Label for leave option when ending call */\n  leaveOption?: string;\n\n  /** Label for end the whole call option when ending call */\n  endCallOption?: string;\n}\n\n/**\n * Props for {@link EndCallButton}.\n *\n * @public\n */\nexport interface EndCallButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onHangUp?: (forEveryone?: boolean) => Promise<void>;\n\n  /**\n   * Set this to true to make it a split button.\n   * The split arrow will trigger a contextual menu to allow end for everyone or just for the user.\n   */\n  enableEndCallMenu?: boolean;\n\n  /**\n   * Optional strings to override in component\n   */\n  strings?: EndCallButtonStrings;\n}\n\nconst spacerClass = mergeStyles({\n  width: 4\n});\n\n/**\n * A button to end an ongoing call.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const EndCallButton = (props: EndCallButtonProps): JSX.Element => {\n  const { styles, enableEndCallMenu, onHangUp } = props;\n\n  const localeStrings = useLocale().strings.endCallButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const theme = useTheme();\n  const isDarkTheme = isDarkThemed(theme);\n  const componentStyles = concatStyleSets(\n    isDarkTheme ? darkThemeCallButtonStyles : lightThemeCallButtonStyles,\n    enableEndCallMenu ? menupButtonPadding : {},\n    styles ?? {}\n  );\n\n  const onRenderEndCallIcon = useCallback(\n    (): JSX.Element => (\n      <>\n        <Icon iconName=\"ControlButtonEndCall\" />\n        {enableEndCallMenu && <span className={spacerClass} />}\n      </>\n    ),\n    [enableEndCallMenu]\n  );\n\n  const defaultMenuProps: IContextualMenuProps = {\n    items: [\n      {\n        key: 'endForSelf',\n        text: localeStrings.leaveOption,\n        title: localeStrings.leaveOption,\n        onClick: () => {\n          onHangUp && onHangUp(false);\n        }\n      },\n      {\n        key: 'endForEveryone',\n        text: localeStrings.endCallOption,\n        title: localeStrings.endCallOption,\n        onClick: () => {\n          onHangUp && onHangUp(true);\n        }\n      }\n    ],\n    styles: props.styles,\n    calloutProps: {\n      styles: {\n        root: {\n          maxWidth: '95%'\n        }\n      },\n      preventDismissOnEvent\n    }\n  };\n\n  return (\n    <>\n      <ControlBarButton\n        {...props}\n        menuProps={enableEndCallMenu ? defaultMenuProps : props.menuProps}\n        onClick={onHangUp ? () => onHangUp() : props.onClick}\n        styles={componentStyles}\n        onRenderIcon={props.onRenderIcon ?? onRenderEndCallIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'endCallButtonLabel'}\n      />\n    </>\n  );\n};\n\nconst getButtonStyles = (\n  theme: PartialTheme & CallingTheme\n): { regular: IStyle; pressed: IStyle; hovered: IStyle } => ({\n  regular: {\n    color: theme.callingPalette.iconWhite,\n    background: theme.callingPalette.callRed,\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto',\n      border: `1px ${theme.palette?.neutralQuaternaryAlt} solid`\n    },\n    ' i': {\n      color: theme.callingPalette.iconWhite\n    },\n    ':focus::after': { outlineColor: `${theme.callingPalette.iconWhite} !important` } // added !important to avoid override by FluentUI button styles\n  },\n  pressed: {\n    color: theme.callingPalette.iconWhite,\n    background: theme.callingPalette.callRedDarker,\n    border: 'none',\n    ' i': {\n      color: theme.callingPalette.iconWhite\n    },\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  },\n  hovered: {\n    color: theme.callingPalette.iconWhite,\n    background: theme.callingPalette.callRedDark,\n    border: 'none',\n    ' i': {\n      color: theme.callingPalette.iconWhite\n    },\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'auto'\n    }\n  }\n});\n\nconst darkThemeButtonStyles = getButtonStyles(darkTheme);\nconst lightThemeButtonStyles = getButtonStyles(lightTheme);\n\n// using media query to prevent windows from overwriting the button color\nconst darkThemeCallButtonStyles = {\n  root: darkThemeButtonStyles.regular,\n  rootHovered: darkThemeButtonStyles.hovered,\n  rootPressed: darkThemeButtonStyles.pressed,\n  label: {\n    color: darkTheme.callingPalette.iconWhite\n  },\n  splitButtonMenuButton: {\n    ...(darkThemeButtonStyles.regular as object),\n    borderTop: 'none',\n    borderRight: 'none',\n    borderBottom: 'none',\n    '&:hover': darkThemeButtonStyles.hovered\n  },\n  splitButtonMenuButtonChecked: darkThemeButtonStyles.hovered,\n  splitButtonMenuButtonExpanded: darkThemeButtonStyles.pressed\n};\n\nconst lightThemeCallButtonStyles = {\n  root: lightThemeButtonStyles.regular,\n  rootHovered: lightThemeButtonStyles.hovered,\n  rootPressed: lightThemeButtonStyles.pressed,\n  splitButtonMenuButton: {\n    ...(lightThemeButtonStyles.regular as object),\n    borderTop: 'none',\n    borderRight: 'none',\n    borderBottom: 'none',\n    '&:hover': lightThemeButtonStyles.hovered\n  },\n  splitButtonMenuButtonChecked: lightThemeButtonStyles.hovered,\n  splitButtonMenuButtonExpanded: lightThemeButtonStyles.pressed,\n  splitButtonMenuFocused: lightThemeButtonStyles.pressed,\n  label: {\n    color: lightTheme.callingPalette.iconWhite\n  }\n};\n\nconst menupButtonPadding = {\n  root: { padding: '0 0.75rem' }\n};\n"]}

package/dist/dist-esm/react-components/src/components/MeetingConferencePhoneInfo.js

@@ -25,7 +25,7 @@ export const MeetingConferencePhoneInfoModal = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTitle, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: PhoneInfoModalStyle },
             React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: titleContainerClassName },
-                React.createElement(Text, { className: titleClassName }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTitle),
+                React.createElement(Text, { role: "heading", "aria-level": 2, className: titleClassName }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTitle),
                 React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTitle, onClick: onDismiss, style: { color: theme.palette.black } })),
             conferencePhoneInfoList.length === 0 && (React.createElement(Stack, { horizontal: true },
                 React.createElement(Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalNoPhoneAvailable))),

package/dist/dist-esm/react-components/src/components/MeetingConferencePhoneInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"MeetingConferencePhoneInfo.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MeetingConferencePhoneInfo.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton, Icon } from '@fluentui/react';\n\nimport {\n  themedPhoneInfoModalStyle,\n  titleClassName,\n  titleContainerClassName,\n  phoneInfoTextStyle,\n  phoneInfoIcon,\n  phoneInfoInctructionLine,\n  phoneInfoStep,\n  stepTextStyle,\n  infoConnectionLinkStyle,\n  phoneInfoIconStyle\n} from './styles/TeamsMeetingConferenceInfo';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { useLocale } from '../localization';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { _formatPhoneNumber } from './utils/formatPhoneNumber';\n\n/**\n * strings for phone info modal\n * @public\n */\nexport interface MeetingConferencePhoneInfoModalStrings {\n  /**\n   * Header for the phone info modal\n   */\n  meetingConferencePhoneInfoModalTitle: string;\n  /**\n   * Phone number instruction\n   */\n  meetingConferencePhoneInfoModalDialIn: string;\n  /**\n   * Meeting ID instruction\n   */\n  meetingConferencePhoneInfoModalMeetingId: string;\n  /**\n   * Wait for phone connection\n   */\n  meetingConferencePhoneInfoModalWait: string;\n  /**\n   * Toll Free Phone Label\n   */\n  meetingConferencePhoneInfoModalTollFree: string;\n  /**\n   * Toll Phone Label\n   */\n  meetingConferencePhoneInfoModalToll: string;\n  /**\n   * Toll Phone Label without geo data\n   */\n  meetingConferencePhoneInfoModalTollGeoData: string;\n  /**\n   * No phone number available message\n   */\n  meetingConferencePhoneInfoModalNoPhoneAvailable: string;\n}\n\n/**\n * @public\n * MeetingConferencePhoneInfoModal Component Props.\n */\nexport interface MeetingConferencePhoneInfoModalProps {\n  conferencePhoneInfoList: ConferencePhoneInfo[];\n  showModal?: boolean;\n  onDismissMeetingPhoneInfoSettings?: () => void;\n}\n\n/**\n * @public\n * a component for setting spoken languages\n */\nexport const MeetingConferencePhoneInfoModal = (props: MeetingConferencePhoneInfoModalProps): JSX.Element => {\n  const { conferencePhoneInfoList, showModal, onDismissMeetingPhoneInfoSettings } = props;\n\n  const theme = useTheme();\n  const strings = useLocale().strings.meetingConferencePhoneInfo;\n\n  const onDismiss = useCallback((): void => {\n    if (onDismissMeetingPhoneInfoSettings) {\n      onDismissMeetingPhoneInfoSettings();\n    }\n  }, [onDismissMeetingPhoneInfoSettings]);\n\n  const PhoneInfoModalStyle: Partial<IModalStyles> = useMemo(() => themedPhoneInfoModalStyle(theme), [theme]);\n\n  return (\n    <>\n      <Modal\n        titleAriaId={strings?.meetingConferencePhoneInfoModalTitle}\n        isOpen={showModal}\n        onDismiss={onDismiss}\n        isBlocking={true}\n        styles={PhoneInfoModalStyle}\n      >\n        <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n          <Text className={titleClassName}>{strings?.meetingConferencePhoneInfoModalTitle}</Text>\n          <IconButton\n            iconProps={{ iconName: 'Cancel' }}\n            ariaLabel={strings?.meetingConferencePhoneInfoModalTitle}\n            onClick={onDismiss}\n            style={{ color: theme.palette.black }}\n          />\n        </Stack>\n        {conferencePhoneInfoList.length === 0 && (\n          <Stack horizontal>\n            <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalNoPhoneAvailable}</Text>\n          </Stack>\n        )}\n        {conferencePhoneInfoList.length > 0 && (\n          <Stack>\n            <Stack horizontal horizontalAlign=\"space-between\" className={phoneInfoInctructionLine}>\n              <Stack.Item style={{ display: 'flex' }}>\n                <Stack horizontal className={phoneInfoStep}>\n                  <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n                  <Stack.Item className={phoneInfoIcon(theme)}>\n                    <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n                      <Icon iconName=\"JoinByPhoneDialStepIcon\" className={phoneInfoIconStyle(theme)} />\n                    </Stack>\n                  </Stack.Item>\n                  <Stack.Item>\n                    <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalDialIn}</Text>\n                  </Stack.Item>\n                </Stack>\n              </Stack.Item>\n              <Stack.Item className={phoneInfoStep}>\n                {conferencePhoneInfoList.map((phoneNumber, index) => (\n                  <Stack.Item key={index}>\n                    <Text className={phoneInfoTextStyle}>\n                      {_formatPhoneNumber(phoneNumber.phoneNumber, true)}{' '}\n                      {phoneNumber.isTollFree\n                        ? strings.meetingConferencePhoneInfoModalTollFree\n                        : strings.meetingConferencePhoneInfoModalToll}\n                    </Text>\n                    <br />\n                    <Text className={phoneInfoTextStyle}> {formatPhoneNumberInfo(phoneNumber, strings)}</Text>\n                  </Stack.Item>\n                ))}\n              </Stack.Item>\n            </Stack>\n            <Stack\n              horizontal\n              horizontalAlign=\"space-between\"\n              verticalAlign=\"center\"\n              className={phoneInfoInctructionLine}\n            >\n              <Stack.Item style={{ display: 'flex' }}>\n                <Stack horizontal>\n                  <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n                  <Stack.Item className={phoneInfoIcon(theme)}>\n                    <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n                      <Icon iconName=\"JoinByPhoneConferenceIdIcon\" className={phoneInfoIconStyle(theme)} />\n                    </Stack>\n                  </Stack.Item>\n                  <Stack.Item>\n                    <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalMeetingId}</Text>\n                  </Stack.Item>\n                </Stack>\n              </Stack.Item>\n              <Text className={phoneInfoTextStyle}>{formatMeetingId(conferencePhoneInfoList[0]?.conferenceId)}</Text>\n            </Stack>\n            <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n              <Stack horizontal>\n                <Stack.Item className={phoneInfoIcon(theme)} style={{ marginLeft: _pxToRem(2) }}>\n                  <Icon iconName=\"JoinByPhoneWaitToBeAdmittedIcon\" className={phoneInfoIconStyle(theme)} />\n                </Stack.Item>\n                <Stack.Item>\n                  <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalWait}</Text>\n                </Stack.Item>\n              </Stack>\n            </Stack>\n          </Stack>\n        )}\n      </Modal>\n    </>\n  );\n};\n\n/**\n * @internal\n * format phone number link\n */\nexport const formatPhoneNumberLink = (phoneNumber: ConferencePhoneInfo): string => {\n  return `tel:+${phoneNumber.phoneNumber},,${phoneNumber.conferenceId}#`;\n};\n\n/**\n * @internal\n * format phone number\n */\nexport const formatPhoneNumberInfo = (\n  phoneNumber: ConferencePhoneInfo,\n  strings: MeetingConferencePhoneInfoModalStrings | undefined\n): string => {\n  const templateText =\n    phoneNumber.country && phoneNumber.city ? strings?.meetingConferencePhoneInfoModalTollGeoData : '';\n  return (\n    templateText\n      ?.replace('{country}', phoneNumber.country || '')\n      .replace('{city}', phoneNumber.city || '')\n      .trim() || ''\n  );\n};\n\n/**\n * @internal\n * format meeting id\n */\nexport const formatMeetingId = (meetingId?: string): string => {\n  if (!meetingId) {\n    return '';\n  }\n  if (meetingId?.length !== 9) {\n    return meetingId;\n  }\n\n  return [meetingId.slice(0, 3), meetingId.slice(3, 6), meetingId.slice(6, 9)].join(' ') + '#';\n};\n\n/**\n * @public\n * Information for conference phone info\n */\nexport interface ConferencePhoneInfo {\n  phoneNumber: string;\n  conferenceId: string;\n  isTollFree: boolean;\n  country?: string;\n  city?: string;\n}\n"]}
+{"version":3,"file":"MeetingConferencePhoneInfo.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MeetingConferencePhoneInfo.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton, Icon } from '@fluentui/react';\n\nimport {\n  themedPhoneInfoModalStyle,\n  titleClassName,\n  titleContainerClassName,\n  phoneInfoTextStyle,\n  phoneInfoIcon,\n  phoneInfoInctructionLine,\n  phoneInfoStep,\n  stepTextStyle,\n  infoConnectionLinkStyle,\n  phoneInfoIconStyle\n} from './styles/TeamsMeetingConferenceInfo';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { useLocale } from '../localization';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { _formatPhoneNumber } from './utils/formatPhoneNumber';\n\n/**\n * strings for phone info modal\n * @public\n */\nexport interface MeetingConferencePhoneInfoModalStrings {\n  /**\n   * Header for the phone info modal\n   */\n  meetingConferencePhoneInfoModalTitle: string;\n  /**\n   * Phone number instruction\n   */\n  meetingConferencePhoneInfoModalDialIn: string;\n  /**\n   * Meeting ID instruction\n   */\n  meetingConferencePhoneInfoModalMeetingId: string;\n  /**\n   * Wait for phone connection\n   */\n  meetingConferencePhoneInfoModalWait: string;\n  /**\n   * Toll Free Phone Label\n   */\n  meetingConferencePhoneInfoModalTollFree: string;\n  /**\n   * Toll Phone Label\n   */\n  meetingConferencePhoneInfoModalToll: string;\n  /**\n   * Toll Phone Label without geo data\n   */\n  meetingConferencePhoneInfoModalTollGeoData: string;\n  /**\n   * No phone number available message\n   */\n  meetingConferencePhoneInfoModalNoPhoneAvailable: string;\n}\n\n/**\n * @public\n * MeetingConferencePhoneInfoModal Component Props.\n */\nexport interface MeetingConferencePhoneInfoModalProps {\n  conferencePhoneInfoList: ConferencePhoneInfo[];\n  showModal?: boolean;\n  onDismissMeetingPhoneInfoSettings?: () => void;\n}\n\n/**\n * @public\n * a component for setting spoken languages\n */\nexport const MeetingConferencePhoneInfoModal = (props: MeetingConferencePhoneInfoModalProps): JSX.Element => {\n  const { conferencePhoneInfoList, showModal, onDismissMeetingPhoneInfoSettings } = props;\n\n  const theme = useTheme();\n  const strings = useLocale().strings.meetingConferencePhoneInfo;\n\n  const onDismiss = useCallback((): void => {\n    if (onDismissMeetingPhoneInfoSettings) {\n      onDismissMeetingPhoneInfoSettings();\n    }\n  }, [onDismissMeetingPhoneInfoSettings]);\n\n  const PhoneInfoModalStyle: Partial<IModalStyles> = useMemo(() => themedPhoneInfoModalStyle(theme), [theme]);\n\n  return (\n    <>\n      <Modal\n        titleAriaId={strings?.meetingConferencePhoneInfoModalTitle}\n        isOpen={showModal}\n        onDismiss={onDismiss}\n        isBlocking={true}\n        styles={PhoneInfoModalStyle}\n      >\n        <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n          <Text role=\"heading\" aria-level={2} className={titleClassName}>\n            {strings?.meetingConferencePhoneInfoModalTitle}\n          </Text>\n          <IconButton\n            iconProps={{ iconName: 'Cancel' }}\n            ariaLabel={strings?.meetingConferencePhoneInfoModalTitle}\n            onClick={onDismiss}\n            style={{ color: theme.palette.black }}\n          />\n        </Stack>\n        {conferencePhoneInfoList.length === 0 && (\n          <Stack horizontal>\n            <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalNoPhoneAvailable}</Text>\n          </Stack>\n        )}\n        {conferencePhoneInfoList.length > 0 && (\n          <Stack>\n            <Stack horizontal horizontalAlign=\"space-between\" className={phoneInfoInctructionLine}>\n              <Stack.Item style={{ display: 'flex' }}>\n                <Stack horizontal className={phoneInfoStep}>\n                  <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n                  <Stack.Item className={phoneInfoIcon(theme)}>\n                    <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n                      <Icon iconName=\"JoinByPhoneDialStepIcon\" className={phoneInfoIconStyle(theme)} />\n                    </Stack>\n                  </Stack.Item>\n                  <Stack.Item>\n                    <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalDialIn}</Text>\n                  </Stack.Item>\n                </Stack>\n              </Stack.Item>\n              <Stack.Item className={phoneInfoStep}>\n                {conferencePhoneInfoList.map((phoneNumber, index) => (\n                  <Stack.Item key={index}>\n                    <Text className={phoneInfoTextStyle}>\n                      {_formatPhoneNumber(phoneNumber.phoneNumber, true)}{' '}\n                      {phoneNumber.isTollFree\n                        ? strings.meetingConferencePhoneInfoModalTollFree\n                        : strings.meetingConferencePhoneInfoModalToll}\n                    </Text>\n                    <br />\n                    <Text className={phoneInfoTextStyle}> {formatPhoneNumberInfo(phoneNumber, strings)}</Text>\n                  </Stack.Item>\n                ))}\n              </Stack.Item>\n            </Stack>\n            <Stack\n              horizontal\n              horizontalAlign=\"space-between\"\n              verticalAlign=\"center\"\n              className={phoneInfoInctructionLine}\n            >\n              <Stack.Item style={{ display: 'flex' }}>\n                <Stack horizontal>\n                  <Stack className={infoConnectionLinkStyle(theme)}></Stack>\n                  <Stack.Item className={phoneInfoIcon(theme)}>\n                    <Stack verticalAlign=\"center\" horizontalAlign=\"center\">\n                      <Icon iconName=\"JoinByPhoneConferenceIdIcon\" className={phoneInfoIconStyle(theme)} />\n                    </Stack>\n                  </Stack.Item>\n                  <Stack.Item>\n                    <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalMeetingId}</Text>\n                  </Stack.Item>\n                </Stack>\n              </Stack.Item>\n              <Text className={phoneInfoTextStyle}>{formatMeetingId(conferencePhoneInfoList[0]?.conferenceId)}</Text>\n            </Stack>\n            <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n              <Stack horizontal>\n                <Stack.Item className={phoneInfoIcon(theme)} style={{ marginLeft: _pxToRem(2) }}>\n                  <Icon iconName=\"JoinByPhoneWaitToBeAdmittedIcon\" className={phoneInfoIconStyle(theme)} />\n                </Stack.Item>\n                <Stack.Item>\n                  <Text className={stepTextStyle}>{strings?.meetingConferencePhoneInfoModalWait}</Text>\n                </Stack.Item>\n              </Stack>\n            </Stack>\n          </Stack>\n        )}\n      </Modal>\n    </>\n  );\n};\n\n/**\n * @internal\n * format phone number link\n */\nexport const formatPhoneNumberLink = (phoneNumber: ConferencePhoneInfo): string => {\n  return `tel:+${phoneNumber.phoneNumber},,${phoneNumber.conferenceId}#`;\n};\n\n/**\n * @internal\n * format phone number\n */\nexport const formatPhoneNumberInfo = (\n  phoneNumber: ConferencePhoneInfo,\n  strings: MeetingConferencePhoneInfoModalStrings | undefined\n): string => {\n  const templateText =\n    phoneNumber.country && phoneNumber.city ? strings?.meetingConferencePhoneInfoModalTollGeoData : '';\n  return (\n    templateText\n      ?.replace('{country}', phoneNumber.country || '')\n      .replace('{city}', phoneNumber.city || '')\n      .trim() || ''\n  );\n};\n\n/**\n * @internal\n * format meeting id\n */\nexport const formatMeetingId = (meetingId?: string): string => {\n  if (!meetingId) {\n    return '';\n  }\n  if (meetingId?.length !== 9) {\n    return meetingId;\n  }\n\n  return [meetingId.slice(0, 3), meetingId.slice(3, 6), meetingId.slice(6, 9)].join(' ') + '#';\n};\n\n/**\n * @public\n * Information for conference phone info\n */\nexport interface ConferencePhoneInfo {\n  phoneNumber: string;\n  conferenceId: string;\n  isTollFree: boolean;\n  country?: string;\n  city?: string;\n}\n"]}

package/dist/dist-esm/react-components/src/components/MicrophoneButton.js

@@ -13,9 +13,7 @@ import React, { useState, useCallback } from 'react';
 import { useLocale } from '../localization';
 import { ControlBarButton } from './ControlBarButton';
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
-import { ContextualMenuItemType } from '@fluentui/react';
-/* @conditional-compile-remove(DNS) */
-import { Toggle, Stack } from '@fluentui/react';
+import { ContextualMenuItemType, Toggle, Stack } from '@fluentui/react';
 import { generateDefaultDeviceMenuProps } from './DevicesButton';
 import { Announcer } from './Announcer';
 /**
@@ -62,7 +60,6 @@ export const MicrophoneButton = (props) => {
             }
         }
     }), [isMicOn, onToggleMicrophone, toggleAnnouncerString]);
-    /* @conditional-compile-remove(DNS) */
     const deepNoiseSuppressionToggleStyles = {
         root: {
             margin: '4px',
@@ -73,7 +70,6 @@ export const MicrophoneButton = (props) => {
         label: { fontWeight: 400 }
     };
     const splitButtonMenuItems = [];
-    /* @conditional-compile-remove(DNS) */
     if (props.showNoiseSuppressionButton) {
         splitButtonMenuItems.push({
             key: 'microphoneDNSToggle',

package/dist/dist-esm/react-components/src/components/MicrophoneButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MicrophoneButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MicrophoneButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useCallback } from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuStyles\n} from '@fluentui/react';\n/* @conditional-compile-remove(DNS) */\nimport { Toggle, Stack, IStyleFunctionOrObject, IToggleStyleProps, IToggleStyles } from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\n/**\n * Strings of {@link MicrophoneButton} that can be overridden.\n *\n * @public\n */\nexport interface MicrophoneButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** * Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n  /**\n   * Title of microphone menu\n   */\n  microphoneMenuTitle?: string;\n  /**\n   * Title of speaker menu\n   */\n  speakerMenuTitle?: string;\n  /**\n   * Tooltip of microphone menu\n   */\n  microphoneMenuTooltip?: string;\n  /**\n   * Tooltip of speaker menu\n   */\n  speakerMenuTooltip?: string;\n  /**\n   * Description of microphone button split button role\n   */\n  microphoneButtonSplitRoleDescription?: string;\n  /**\n   * Microphone split button aria label when mic is enabled.\n   */\n  onSplitButtonAriaLabel?: string;\n  /**\n   * Microphone split button aria label when mic is disabled.\n   */\n  offSplitButtonAriaLabel?: string;\n  /**\n   * Microphone action turned on string for announcer\n   */\n  microphoneActionTurnedOnAnnouncement?: string;\n  /**\n   * Microphone action turned off string for announcer\n   */\n  microphoneActionTurnedOffAnnouncement?: string;\n  /**\n   * Primary action for the microphone when microphone is live.\n   */\n  onSplitButtonMicrophonePrimaryAction?: string;\n  /**\n   * Primary action for the microphone when the microphone is muted.\n   */\n  offSplitButtonMicrophonePrimaryAction?: string;\n  /**\n   * Title for primary action section of split button\n   */\n  microphonePrimaryActionSplitButtonTitle?: string;\n  /**\n   * Aria description for the microphone button\n   */\n  microphoneAriaDescription?: string;\n  /* @conditional-compile-remove(DNS) */\n  /**\n   * Title for deep noise suppression button\n   */\n  deepNoiseSuppressionTitle?: string;\n  /* @conditional-compile-remove(DNS) */\n  /**\n   * Noise Suppression turned on string for announcer\n   */\n  deepNoiseSuppressionOnAnnouncement?: string;\n  /* @conditional-compile-remove(DNS) */\n  /**\n   * Noise Suppression turned off string for announcer\n   */\n  deepNoiseSuppressionOffAnnouncement?: string;\n}\n\n/**\n * Styles for {@link MicrophoneButton}\n *\n * @public\n */\nexport interface MicrophoneButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link MicrophoneButton} menu.\n   */\n  menuStyles?: Partial<MicrophoneButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link MicrophoneButton} menu.\n *\n * @public\n */\nexport interface MicrophoneButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link MicrophoneButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Props for {@link MicrophoneButton}.\n *\n * @public\n */\nexport interface MicrophoneButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleMicrophone?: () => Promise<void>;\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Microphone that is shown as currently selected\n   */\n  selectedMicrophone?: OptionsDevice;\n  /**\n   * Speaker that is shown as currently selected\n   */\n  selectedSpeaker?: OptionsDevice;\n  /**\n   * Callback when a microphone is selected\n   */\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Speaker when a speaker is selected\n   */\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n   *\n   * default: false\n   */\n  enableDeviceSelectionMenu?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<MicrophoneButtonStrings>;\n  /**\n   * Styles for {@link MicrophoneButton} and the device selection flyout.\n   */\n  styles?: Partial<MicrophoneButtonStyles>;\n  /* @conditional-compile-remove(DNS) */\n  /**\n   * Whether the deep noise suppression is on or off\n   */\n  isDeepNoiseSuppressionOn?: boolean;\n  /* @conditional-compile-remove(DNS) */\n  /**\n   * Callback when noise suppression is clicked\n   */\n  onClickNoiseSuppression?: () => void;\n  /* @conditional-compile-remove(DNS) */\n  /**\n   * Show/Hide the deep noise suppression button\n   */\n  showNoiseSuppressionButton?: boolean;\n}\n\n/**\n * A button to turn microphone on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {\n  const { onToggleMicrophone } = props;\n  const localeStrings = useLocale().strings.microphoneButton;\n  const strings = { ...localeStrings, ...props.strings };\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n\n  const isSplit = props.split ?? props.enableDeviceSelectionMenu;\n\n  // The button should be disabled when there are no mics. However if the button is a split button, if there are\n  // no mics but there are speakers, then only the primary part of the button should be disabled to allow for\n  // speaker change.\n  const primaryDisabled = props.primaryDisabled || (isSplit && !props.microphones?.length ? true : undefined);\n  const disabled =\n    props.disabled ||\n    (isSplit && !props.microphones?.length && !props.speakers?.length) ||\n    (!isSplit && props.microphones && props.microphones?.length === 0);\n\n  const onRenderMicOnIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonMicOn\" />;\n  };\n  const onRenderMicOffIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonMicOff\" />;\n  };\n\n  const isMicOn = props.checked;\n\n  const splitButtonAriaString = isMicOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n\n  const toggleAnnouncerString = useCallback(\n    (isMicOn: boolean) => {\n      setAnnouncerString(\n        !isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement\n      );\n    },\n    [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]\n  );\n\n  const onToggleClick = useCallback(async () => {\n    if (onToggleMicrophone) {\n      try {\n        await onToggleMicrophone();\n        // allows for the setting of narrator strings triggering the announcer when microphone is turned on or off.\n        toggleAnnouncerString(!isMicOn);\n        // eslint-disable-next-line no-empty\n      } finally {\n      }\n    }\n  }, [isMicOn, onToggleMicrophone, toggleAnnouncerString]);\n\n  /* @conditional-compile-remove(DNS) */\n  const deepNoiseSuppressionToggleStyles: IStyleFunctionOrObject<IToggleStyleProps, IToggleStyles> = {\n    root: {\n      margin: '4px',\n      padding: '0px 12px',\n      flexFlow: 'row-reverse',\n      justifyContent: 'space-between'\n    },\n    label: { fontWeight: 400 }\n  };\n\n  const splitButtonMenuItems: IContextualMenuItem[] = [];\n\n  /* @conditional-compile-remove(DNS) */\n  if (props.showNoiseSuppressionButton) {\n    splitButtonMenuItems.push({\n      key: 'microphoneDNSToggle',\n      onRender: () => {\n        return (\n          <Stack\n            onClick={async () => {\n              await props.onClickNoiseSuppression?.();\n              setAnnouncerString(\n                props.isDeepNoiseSuppressionOn\n                  ? strings.deepNoiseSuppressionOnAnnouncement\n                  : strings.deepNoiseSuppressionOffAnnouncement\n              );\n            }}\n          >\n            <Toggle\n              label={strings.deepNoiseSuppressionTitle}\n              checked={props.isDeepNoiseSuppressionOn}\n              inlineLabel\n              styles={deepNoiseSuppressionToggleStyles}\n            />\n          </Stack>\n        );\n      }\n    });\n  }\n\n  splitButtonMenuItems.push({\n    key: 'microphonePrimaryAction',\n    text: props.checked ? strings.onSplitButtonMicrophonePrimaryAction : strings.offSplitButtonMicrophonePrimaryAction,\n    onClick: () => {\n      onToggleClick();\n    },\n    iconProps: {\n      iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',\n      styles: { root: { lineHeight: 0 } }\n    }\n  });\n\n  /**\n   * We need to also include the primary action of the button to the\n   * split button for mobile devices.\n   */\n  const splitButtonPrimaryAction: IContextualMenuItem = {\n    key: 'primaryAction',\n    title: 'toggle mic',\n    itemType: ContextualMenuItemType.Section,\n    sectionProps: {\n      topDivider: true,\n      items: splitButtonMenuItems\n    }\n  };\n\n  return (\n    <>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <ControlBarButton\n        {...props}\n        onClick={props.onToggleMicrophone ? onToggleClick : props.onClick}\n        onRenderOnIcon={props.onRenderOnIcon ?? onRenderMicOnIcon}\n        onRenderOffIcon={props.onRenderOffIcon ?? onRenderMicOffIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'microphoneButtonLabel'}\n        menuProps={\n          props.menuProps ??\n          (props.enableDeviceSelectionMenu\n            ? generateDefaultDeviceMenuProps(\n                { ...props, styles: props.styles?.menuStyles },\n                strings,\n                splitButtonPrimaryAction\n              )\n            : undefined)\n        }\n        menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}\n        split={props.split ?? props.enableDeviceSelectionMenu}\n        aria-roledescription={\n          props.enableDeviceSelectionMenu ? strings.microphoneButtonSplitRoleDescription : undefined\n        }\n        aria-description={strings.microphoneAriaDescription}\n        splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n        disabled={disabled}\n        primaryDisabled={primaryDisabled}\n      />\n    </>\n  );\n};\n"]}
+{"version":3,"file":"MicrophoneButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MicrophoneButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useCallback } from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuStyles,\n  Toggle,\n  Stack,\n  IStyleFunctionOrObject,\n  IToggleStyleProps,\n  IToggleStyles\n} from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\n/**\n * Strings of {@link MicrophoneButton} that can be overridden.\n *\n * @public\n */\nexport interface MicrophoneButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** * Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n  /**\n   * Title of microphone menu\n   */\n  microphoneMenuTitle?: string;\n  /**\n   * Title of speaker menu\n   */\n  speakerMenuTitle?: string;\n  /**\n   * Tooltip of microphone menu\n   */\n  microphoneMenuTooltip?: string;\n  /**\n   * Tooltip of speaker menu\n   */\n  speakerMenuTooltip?: string;\n  /**\n   * Description of microphone button split button role\n   */\n  microphoneButtonSplitRoleDescription?: string;\n  /**\n   * Microphone split button aria label when mic is enabled.\n   */\n  onSplitButtonAriaLabel?: string;\n  /**\n   * Microphone split button aria label when mic is disabled.\n   */\n  offSplitButtonAriaLabel?: string;\n  /**\n   * Microphone action turned on string for announcer\n   */\n  microphoneActionTurnedOnAnnouncement?: string;\n  /**\n   * Microphone action turned off string for announcer\n   */\n  microphoneActionTurnedOffAnnouncement?: string;\n  /**\n   * Primary action for the microphone when microphone is live.\n   */\n  onSplitButtonMicrophonePrimaryAction?: string;\n  /**\n   * Primary action for the microphone when the microphone is muted.\n   */\n  offSplitButtonMicrophonePrimaryAction?: string;\n  /**\n   * Title for primary action section of split button\n   */\n  microphonePrimaryActionSplitButtonTitle?: string;\n  /**\n   * Aria description for the microphone button\n   */\n  microphoneAriaDescription?: string;\n  /**\n   * Title for deep noise suppression button\n   */\n  deepNoiseSuppressionTitle?: string;\n  /**\n   * Noise Suppression turned on string for announcer\n   */\n  deepNoiseSuppressionOnAnnouncement?: string;\n  /**\n   * Noise Suppression turned off string for announcer\n   */\n  deepNoiseSuppressionOffAnnouncement?: string;\n}\n\n/**\n * Styles for {@link MicrophoneButton}\n *\n * @public\n */\nexport interface MicrophoneButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link MicrophoneButton} menu.\n   */\n  menuStyles?: Partial<MicrophoneButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link MicrophoneButton} menu.\n *\n * @public\n */\nexport interface MicrophoneButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link MicrophoneButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Props for {@link MicrophoneButton}.\n *\n * @public\n */\nexport interface MicrophoneButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleMicrophone?: () => Promise<void>;\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Microphone that is shown as currently selected\n   */\n  selectedMicrophone?: OptionsDevice;\n  /**\n   * Speaker that is shown as currently selected\n   */\n  selectedSpeaker?: OptionsDevice;\n  /**\n   * Callback when a microphone is selected\n   */\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Speaker when a speaker is selected\n   */\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n   *\n   * default: false\n   */\n  enableDeviceSelectionMenu?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<MicrophoneButtonStrings>;\n  /**\n   * Styles for {@link MicrophoneButton} and the device selection flyout.\n   */\n  styles?: Partial<MicrophoneButtonStyles>;\n  /**\n   * Whether the deep noise suppression is on or off\n   */\n  isDeepNoiseSuppressionOn?: boolean;\n  /**\n   * Callback when noise suppression is clicked\n   */\n  onClickNoiseSuppression?: () => void;\n  /**\n   * Show/Hide the deep noise suppression button\n   */\n  showNoiseSuppressionButton?: boolean;\n}\n\n/**\n * A button to turn microphone on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {\n  const { onToggleMicrophone } = props;\n  const localeStrings = useLocale().strings.microphoneButton;\n  const strings = { ...localeStrings, ...props.strings };\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n\n  const isSplit = props.split ?? props.enableDeviceSelectionMenu;\n\n  // The button should be disabled when there are no mics. However if the button is a split button, if there are\n  // no mics but there are speakers, then only the primary part of the button should be disabled to allow for\n  // speaker change.\n  const primaryDisabled = props.primaryDisabled || (isSplit && !props.microphones?.length ? true : undefined);\n  const disabled =\n    props.disabled ||\n    (isSplit && !props.microphones?.length && !props.speakers?.length) ||\n    (!isSplit && props.microphones && props.microphones?.length === 0);\n\n  const onRenderMicOnIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonMicOn\" />;\n  };\n  const onRenderMicOffIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonMicOff\" />;\n  };\n\n  const isMicOn = props.checked;\n\n  const splitButtonAriaString = isMicOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n\n  const toggleAnnouncerString = useCallback(\n    (isMicOn: boolean) => {\n      setAnnouncerString(\n        !isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement\n      );\n    },\n    [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]\n  );\n\n  const onToggleClick = useCallback(async () => {\n    if (onToggleMicrophone) {\n      try {\n        await onToggleMicrophone();\n        // allows for the setting of narrator strings triggering the announcer when microphone is turned on or off.\n        toggleAnnouncerString(!isMicOn);\n        // eslint-disable-next-line no-empty\n      } finally {\n      }\n    }\n  }, [isMicOn, onToggleMicrophone, toggleAnnouncerString]);\n\n  const deepNoiseSuppressionToggleStyles: IStyleFunctionOrObject<IToggleStyleProps, IToggleStyles> = {\n    root: {\n      margin: '4px',\n      padding: '0px 12px',\n      flexFlow: 'row-reverse',\n      justifyContent: 'space-between'\n    },\n    label: { fontWeight: 400 }\n  };\n\n  const splitButtonMenuItems: IContextualMenuItem[] = [];\n\n  if (props.showNoiseSuppressionButton) {\n    splitButtonMenuItems.push({\n      key: 'microphoneDNSToggle',\n      onRender: () => {\n        return (\n          <Stack\n            onClick={async () => {\n              await props.onClickNoiseSuppression?.();\n              setAnnouncerString(\n                props.isDeepNoiseSuppressionOn\n                  ? strings.deepNoiseSuppressionOnAnnouncement\n                  : strings.deepNoiseSuppressionOffAnnouncement\n              );\n            }}\n          >\n            <Toggle\n              label={strings.deepNoiseSuppressionTitle}\n              checked={props.isDeepNoiseSuppressionOn}\n              inlineLabel\n              styles={deepNoiseSuppressionToggleStyles}\n            />\n          </Stack>\n        );\n      }\n    });\n  }\n\n  splitButtonMenuItems.push({\n    key: 'microphonePrimaryAction',\n    text: props.checked ? strings.onSplitButtonMicrophonePrimaryAction : strings.offSplitButtonMicrophonePrimaryAction,\n    onClick: () => {\n      onToggleClick();\n    },\n    iconProps: {\n      iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',\n      styles: { root: { lineHeight: 0 } }\n    }\n  });\n\n  /**\n   * We need to also include the primary action of the button to the\n   * split button for mobile devices.\n   */\n  const splitButtonPrimaryAction: IContextualMenuItem = {\n    key: 'primaryAction',\n    title: 'toggle mic',\n    itemType: ContextualMenuItemType.Section,\n    sectionProps: {\n      topDivider: true,\n      items: splitButtonMenuItems\n    }\n  };\n\n  return (\n    <>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <ControlBarButton\n        {...props}\n        onClick={props.onToggleMicrophone ? onToggleClick : props.onClick}\n        onRenderOnIcon={props.onRenderOnIcon ?? onRenderMicOnIcon}\n        onRenderOffIcon={props.onRenderOffIcon ?? onRenderMicOffIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'microphoneButtonLabel'}\n        menuProps={\n          props.menuProps ??\n          (props.enableDeviceSelectionMenu\n            ? generateDefaultDeviceMenuProps(\n                { ...props, styles: props.styles?.menuStyles },\n                strings,\n                splitButtonPrimaryAction\n              )\n            : undefined)\n        }\n        menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}\n        split={props.split ?? props.enableDeviceSelectionMenu}\n        aria-roledescription={\n          props.enableDeviceSelectionMenu ? strings.microphoneButtonSplitRoleDescription : undefined\n        }\n        aria-description={strings.microphoneAriaDescription}\n        splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n        disabled={disabled}\n        primaryDisabled={primaryDisabled}\n      />\n    </>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VerticalGallery.js

@@ -7,6 +7,7 @@ import { useIdentifiers } from '../identifiers';
 import { useTheme } from '../theming';
 import { childrenContainerStyle, pageNavigationControlBarContainerStyle, participantPageCounter, leftRightButtonStyles, navIconStyles, rootStyle } from './styles/VerticalGallery.styles';
 import { bucketize } from './utils/overFlowGalleriesUtils';
+import { _formatString } from "../../../acs-ui-common/src";
 /**
  * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks
  * participants on the Y-axis of the VideoGallery for better use of horizontal space.
@@ -97,11 +98,17 @@ const VerticalGalleryControlBar = (props) => {
         return mergeStyles(leftRightButtonStyles(theme), styles === null || styles === void 0 ? void 0 : styles.nextButton);
     }, [styles === null || styles === void 0 ? void 0 : styles.nextButton, theme]);
     const controlBarSpacing = { childrenGap: '0.5rem' };
+    const previousButtonAriaLabel = strings.leftNavButtonAriaLabel
+        ? _formatString(strings.leftNavButtonAriaLabel, { current: `${currentPage}`, total: `${totalPages}` })
+        : undefined;
+    const nextButtonAriaLabel = strings.rightNavButtonAriaLabel
+        ? _formatString(strings.rightNavButtonAriaLabel, { current: `${currentPage}`, total: `${totalPages}` })
+        : undefined;
     return (React.createElement(Stack, { horizontalAlign: "center", tokens: controlBarSpacing, horizontal: true, className: pageCounterContainerStyles },
-        React.createElement(DefaultButton, { className: previousButtonSyles, onClick: onPreviousButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.previous, ariaLabel: strings.leftNavButtonAriaLabel, "data-ui-id": ids.overflowGalleryLeftNavButton },
+        React.createElement(DefaultButton, { className: previousButtonSyles, onClick: onPreviousButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.previous, ariaLabel: previousButtonAriaLabel, "data-ui-id": ids.overflowGalleryLeftNavButton },
             React.createElement(Icon, { iconName: "VerticalGalleryLeftButton", styles: navIconStyles })),
         React.createElement(Text, { "data-ui-id": ids.verticalGalleryPageCounter, className: pageCounterStyles }, `${currentPage} / ${totalPages}`),
-        React.createElement(DefaultButton, { className: nextButtonsStyles, onClick: onNextButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.next, ariaLabel: strings.rightNavButtonAriaLabel, "data-ui-id": ids.overflowGalleryRightNavButton },
+        React.createElement(DefaultButton, { className: nextButtonsStyles, onClick: onNextButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.next, ariaLabel: nextButtonAriaLabel, "data-ui-id": ids.overflowGalleryRightNavButton },
             React.createElement(Icon, { iconName: "VerticalGalleryRightButton", styles: navIconStyles }))));
 };
 //# sourceMappingURL=VerticalGallery.js.map

package/dist/dist-esm/react-components/src/components/VerticalGallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport {\n  childrenContainerStyle,\n  pageNavigationControlBarContainerStyle,\n  participantPageCounter,\n  leftRightButtonStyles,\n  navIconStyles,\n  rootStyle\n} from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/**\n * Styles for the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryStyles extends BaseCustomStyles {\n  /** Styles for each video tile in the vertical gallery */\n  children?: IStyle;\n  /** Styles for the verticalGallery control bar */\n  controlBar?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * Strings for localization of the vertical gallery.\n *\n * @public\n */\nexport interface VerticalGalleryStrings {\n  /** Aria label for the left page navigation button */\n  leftNavButtonAriaLabel?: string;\n  /** Aria label for the right page navigation button */\n  rightNavButtonAriaLabel?: string;\n}\n\n/**\n * Styles for the control bar inside the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryControlBarStyles extends BaseCustomStyles {\n  /**\n   * styles for the next button in the VerticalGalleryControlBar\n   */\n  nextButton?: IStyle;\n  /**\n   * Styles for the previous button in the VerticalGalleryControlBar\n   */\n  previousButton?: IStyle;\n  /**\n   * Styles for the counter in the VerticalGalleryControlBar\n   */\n  counter?: IStyle;\n}\n/**\n * Props for the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryProps {\n  /** Video tiles for the remote participants in the vertical gallery */\n  children: React.ReactNode;\n  /** Max number of children per page in the vertical Gallery */\n  childrenPerPage: number;\n  /** Styles to customize the vertical gallery */\n  styles?: VerticalGalleryStyles;\n  /** helper function to choose which tiles to give video to. */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n}\n\ninterface VerticalGalleryControlBarProps {\n  onNextButtonClick: () => void;\n  onPreviousButtonClick: () => void;\n  buttonsDisabled: { next: boolean; previous: boolean };\n  totalPages: number;\n  currentPage: number;\n  styles?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\n *\n * @public\n */\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n  const { children, styles, childrenPerPage, onFetchTilesToRender } = props;\n\n  const [page, setPage] = useState(1);\n  const [buttonState, setButtonState] = useState<{ previous: boolean; next: boolean }>({ previous: true, next: true });\n\n  const ids = useIdentifiers();\n\n  const numberOfChildren = React.Children.count(children);\n  const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n\n  const indexesArray: number[][] = useMemo(() => {\n    return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n  }, [numberOfChildren, childrenPerPage]);\n\n  useEffect(() => {\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray[page - 1] ?? []);\n    }\n  }, [indexesArray, onFetchTilesToRender, page]);\n\n  const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;\n  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n  const childrenOnCurrentPage = useMemo(() => {\n    if (indexesArray[0] !== undefined) {\n      return indexesArray[clippedPage - 1]?.map((index) => {\n        return React.Children.toArray(children)[index];\n      });\n    }\n    return;\n  }, [indexesArray, clippedPage, children]);\n\n  const showButtons = numberOfChildren > childrenPerPage;\n\n  const onPreviousButtonClick = (): void => {\n    setPage(page - 1);\n  };\n  const onNextButtonClick = (): void => {\n    setPage(page + 1);\n  };\n\n  if (page > lastPage && lastPage > 0) {\n    setPage(lastPage);\n  }\n\n  useEffect(() => {\n    if (page > 1 && page < lastPage && showButtons) {\n      // we are somewhere in between first and last pages.\n      setButtonState({ previous: false, next: false });\n    } else if (page === 1 && showButtons) {\n      // we are on the first page.\n      setButtonState({ previous: true, next: false });\n    } else if (page === lastPage && showButtons) {\n      // we are on the last page.\n      setButtonState({ previous: false, next: true });\n    }\n  }, [page, numberOfChildren, lastPage, showButtons]);\n\n  const childContainerStyle = useMemo(() => {\n    return { root: childrenContainerStyle(2) };\n  }, []);\n\n  const childrenStyles = useMemo(() => {\n    return { root: styles?.children };\n  }, [styles?.children]);\n\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n\n  return (\n    <Stack className={mergeStyles(rootStyle, styles?.root)}>\n      <Stack styles={childContainerStyle}>\n        {childrenOnCurrentPage?.map((child, i) => {\n          return (\n            <Stack.Item key={i} styles={childrenStyles} data-ui-id={ids.verticalGalleryVideoTile}>\n              {child}\n            </Stack.Item>\n          );\n        })}\n      </Stack>\n      {showButtons && (\n        <VerticalGalleryControlBar\n          buttonsDisabled={buttonState}\n          onPreviousButtonClick={onPreviousButtonClick}\n          onNextButtonClick={onNextButtonClick}\n          totalPages={lastPage}\n          currentPage={page}\n        />\n      )}\n    </Stack>\n  );\n};\n\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n  const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;\n  const theme = useTheme();\n  const ids = useIdentifiers();\n\n  const strings = useLocale().strings.verticalGallery;\n\n  const pageCounterContainerStyles = useMemo(() => {\n    return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n  }, [styles?.root]);\n\n  const previousButtonSyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n  }, [styles?.previousButton, theme]);\n\n  const pageCounterStyles = useMemo(() => {\n    return mergeStyles(participantPageCounter, styles?.counter);\n  }, [styles?.counter]);\n\n  const nextButtonsStyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n  }, [styles?.nextButton, theme]);\n\n  const controlBarSpacing = { childrenGap: '0.5rem' };\n\n  return (\n    <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n      <DefaultButton\n        className={previousButtonSyles}\n        onClick={onPreviousButtonClick}\n        disabled={buttonsDisabled?.previous}\n        ariaLabel={strings.leftNavButtonAriaLabel}\n        data-ui-id={ids.overflowGalleryLeftNavButton}\n      >\n        <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n      </DefaultButton>\n      <Text\n        data-ui-id={ids.verticalGalleryPageCounter}\n        className={pageCounterStyles}\n      >{`${currentPage} / ${totalPages}`}</Text>\n      <DefaultButton\n        className={nextButtonsStyles}\n        onClick={onNextButtonClick}\n        disabled={buttonsDisabled?.next}\n        ariaLabel={strings.rightNavButtonAriaLabel}\n        data-ui-id={ids.overflowGalleryRightNavButton}\n      >\n        <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n      </DefaultButton>\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport {\n  childrenContainerStyle,\n  pageNavigationControlBarContainerStyle,\n  participantPageCounter,\n  leftRightButtonStyles,\n  navIconStyles,\n  rootStyle\n} from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryStyles extends BaseCustomStyles {\n  /** Styles for each video tile in the vertical gallery */\n  children?: IStyle;\n  /** Styles for the verticalGallery control bar */\n  controlBar?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * Strings for localization of the vertical gallery.\n *\n * @public\n */\nexport interface VerticalGalleryStrings {\n  /** Aria label for the left page navigation button */\n  leftNavButtonAriaLabel?: string;\n  /** Aria label for the right page navigation button */\n  rightNavButtonAriaLabel?: string;\n}\n\n/**\n * Styles for the control bar inside the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryControlBarStyles extends BaseCustomStyles {\n  /**\n   * styles for the next button in the VerticalGalleryControlBar\n   */\n  nextButton?: IStyle;\n  /**\n   * Styles for the previous button in the VerticalGalleryControlBar\n   */\n  previousButton?: IStyle;\n  /**\n   * Styles for the counter in the VerticalGalleryControlBar\n   */\n  counter?: IStyle;\n}\n/**\n * Props for the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryProps {\n  /** Video tiles for the remote participants in the vertical gallery */\n  children: React.ReactNode;\n  /** Max number of children per page in the vertical Gallery */\n  childrenPerPage: number;\n  /** Styles to customize the vertical gallery */\n  styles?: VerticalGalleryStyles;\n  /** helper function to choose which tiles to give video to. */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n}\n\ninterface VerticalGalleryControlBarProps {\n  onNextButtonClick: () => void;\n  onPreviousButtonClick: () => void;\n  buttonsDisabled: { next: boolean; previous: boolean };\n  totalPages: number;\n  currentPage: number;\n  styles?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\n *\n * @public\n */\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n  const { children, styles, childrenPerPage, onFetchTilesToRender } = props;\n\n  const [page, setPage] = useState(1);\n  const [buttonState, setButtonState] = useState<{ previous: boolean; next: boolean }>({ previous: true, next: true });\n\n  const ids = useIdentifiers();\n\n  const numberOfChildren = React.Children.count(children);\n  const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n\n  const indexesArray: number[][] = useMemo(() => {\n    return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n  }, [numberOfChildren, childrenPerPage]);\n\n  useEffect(() => {\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray[page - 1] ?? []);\n    }\n  }, [indexesArray, onFetchTilesToRender, page]);\n\n  const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;\n  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n  const childrenOnCurrentPage = useMemo(() => {\n    if (indexesArray[0] !== undefined) {\n      return indexesArray[clippedPage - 1]?.map((index) => {\n        return React.Children.toArray(children)[index];\n      });\n    }\n    return;\n  }, [indexesArray, clippedPage, children]);\n\n  const showButtons = numberOfChildren > childrenPerPage;\n\n  const onPreviousButtonClick = (): void => {\n    setPage(page - 1);\n  };\n  const onNextButtonClick = (): void => {\n    setPage(page + 1);\n  };\n\n  if (page > lastPage && lastPage > 0) {\n    setPage(lastPage);\n  }\n\n  useEffect(() => {\n    if (page > 1 && page < lastPage && showButtons) {\n      // we are somewhere in between first and last pages.\n      setButtonState({ previous: false, next: false });\n    } else if (page === 1 && showButtons) {\n      // we are on the first page.\n      setButtonState({ previous: true, next: false });\n    } else if (page === lastPage && showButtons) {\n      // we are on the last page.\n      setButtonState({ previous: false, next: true });\n    }\n  }, [page, numberOfChildren, lastPage, showButtons]);\n\n  const childContainerStyle = useMemo(() => {\n    return { root: childrenContainerStyle(2) };\n  }, []);\n\n  const childrenStyles = useMemo(() => {\n    return { root: styles?.children };\n  }, [styles?.children]);\n\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n\n  return (\n    <Stack className={mergeStyles(rootStyle, styles?.root)}>\n      <Stack styles={childContainerStyle}>\n        {childrenOnCurrentPage?.map((child, i) => {\n          return (\n            <Stack.Item key={i} styles={childrenStyles} data-ui-id={ids.verticalGalleryVideoTile}>\n              {child}\n            </Stack.Item>\n          );\n        })}\n      </Stack>\n      {showButtons && (\n        <VerticalGalleryControlBar\n          buttonsDisabled={buttonState}\n          onPreviousButtonClick={onPreviousButtonClick}\n          onNextButtonClick={onNextButtonClick}\n          totalPages={lastPage}\n          currentPage={page}\n        />\n      )}\n    </Stack>\n  );\n};\n\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n  const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;\n  const theme = useTheme();\n  const ids = useIdentifiers();\n\n  const strings = useLocale().strings.verticalGallery;\n\n  const pageCounterContainerStyles = useMemo(() => {\n    return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n  }, [styles?.root]);\n\n  const previousButtonSyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n  }, [styles?.previousButton, theme]);\n\n  const pageCounterStyles = useMemo(() => {\n    return mergeStyles(participantPageCounter, styles?.counter);\n  }, [styles?.counter]);\n\n  const nextButtonsStyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n  }, [styles?.nextButton, theme]);\n\n  const controlBarSpacing = { childrenGap: '0.5rem' };\n\n  const previousButtonAriaLabel = strings.leftNavButtonAriaLabel\n    ? _formatString(strings.leftNavButtonAriaLabel, { current: `${currentPage}`, total: `${totalPages}` })\n    : undefined;\n\n  const nextButtonAriaLabel = strings.rightNavButtonAriaLabel\n    ? _formatString(strings.rightNavButtonAriaLabel, { current: `${currentPage}`, total: `${totalPages}` })\n    : undefined;\n\n  return (\n    <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n      <DefaultButton\n        className={previousButtonSyles}\n        onClick={onPreviousButtonClick}\n        disabled={buttonsDisabled?.previous}\n        ariaLabel={previousButtonAriaLabel}\n        data-ui-id={ids.overflowGalleryLeftNavButton}\n      >\n        <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n      </DefaultButton>\n      <Text\n        data-ui-id={ids.verticalGalleryPageCounter}\n        className={pageCounterStyles}\n      >{`${currentPage} / ${totalPages}`}</Text>\n      <DefaultButton\n        className={nextButtonsStyles}\n        onClick={onNextButtonClick}\n        disabled={buttonsDisabled?.next}\n        ariaLabel={nextButtonAriaLabel}\n        data-ui-id={ids.overflowGalleryRightNavButton}\n      >\n        <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n      </DefaultButton>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json

@@ -643,8 +643,8 @@
         "step4DigitText": "4"
     },
     "verticalGallery": {
-        "leftNavButtonAriaLabel": "previous page",
-        "rightNavButtonAriaLabel": "next page"
+        "leftNavButtonAriaLabel": "previous page {current} of {total}",
+        "rightNavButtonAriaLabel": "next page {current} of {total}"
     },
     "meetingConferencePhoneInfo": {
         "meetingConferencePhoneInfoModalTitle": "Join call from your phone",

package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.js.map

@@ -1 +1 @@
-{"version":3,"file":"Strings.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/Strings.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { SpokenLanguageStrings, CaptionLanguageStrings } from '@internal/react-components';\nimport { SurveyIssues, SurveyIssuesHeadingStrings } from '@internal/react-components';\nimport { CapabilityChangedNotificationStrings } from './components/CapabilitiesChangedNotificationBar';\nimport { SpotlightPromptStrings } from './components/Prompt';\n\n/**\n * Strings used by the {@link CallComposite} directly.\n *\n * This strings are in addition to those used by the components from the component library.\n *\n * @public\n */\nexport interface CallCompositeStrings {\n  /**\n   * Title of configuration page.\n   */\n  configurationPageTitle: string;\n  /**\n   * Optional 1-2 lines on the call details used on the configuration page.\n   */\n  configurationPageCallDetails?: string;\n  /**\n   * Text in button to start call in configuration page.\n   */\n  startCallButtonLabel: string;\n  /**\n   * Text in button to rejoin an ended call.\n   */\n  rejoinCallButtonLabel: string;\n  /**\n   * Placeholder text for local device settings dropdowns.\n   */\n  defaultPlaceHolder: string;\n  /**\n   * Label for camera dropdown.\n   */\n  cameraLabel: string;\n  /**\n   * Label for when there are no cameras present on configuration screen.\n   */\n  noCamerasLabel: string;\n  /**\n   * Label for sound dropdown.\n   */\n  soundLabel: string;\n  /**\n   * Label for when no microphones were found on the configuration screen\n   */\n  noMicrophonesLabel: string;\n  /**\n   * Label for when no speakers were found on the configuration screen.\n   */\n  noSpeakersLabel: string;\n  /**\n   * Error shown when camera access is blocked by the browser.\n   */\n  cameraPermissionDenied: string;\n  /**\n   * Error shown when the camera is turned off.\n   */\n  cameraTurnedOff: string;\n  /**\n   * Error shown when microphone access is blocked by the browser.\n   */\n  microphonePermissionDenied: string;\n  /**\n   * Title text of the page shown to the user when joining a Teams meeting fails because meeting owner denied access.\n   */\n  failedToJoinTeamsMeetingReasonAccessDeniedTitle: string;\n  /**\n   * More details text of the page shown to the user when joining a Teams meeting fails because meeting owner denied access.\n   */\n  failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails?: string;\n  /**\n   * Title text of the page shown to the user when joining a call fails due to a network problem.\n   */\n  failedToJoinCallDueToNoNetworkTitle: string;\n  /**\n   * More details text of the page shown to the user when joining a call fails due to a network problem.\n   */\n  failedToJoinCallDueToNoNetworkMoreDetails?: string;\n  /**\n   * Text to display on a leaving page.\n   */\n  leavingCallTitle?: string;\n  /**\n   * Title text of the page shown to the user when they leave a call in the call composite.\n   */\n  leftCallTitle: string;\n  /**\n   * More details text of the page shown to the user when they leave a call in the call composite.\n   */\n  leftCallMoreDetails?: string;\n  /**\n   * Title text of the page shown to the user when they are removed from a call in the call composite.\n   */\n  removedFromCallTitle: string;\n  /**\n   * More details text of the page shown to the user when they are removed from a call in the call composite.\n   */\n  removedFromCallMoreDetails?: string;\n  /**\n   * Text shown to the user on the lobby screen when connecting to a call.\n   */\n  lobbyScreenConnectingToCallTitle: string;\n  /**\n   * Optional addition details shown to the user on the lobby screen when connection to a call.\n   */\n  lobbyScreenConnectingToCallMoreDetails?: string;\n  /**\n   * Text shown to the user on the lobby screen when waiting to be admitted to a call.\n   */\n  lobbyScreenWaitingToBeAdmittedTitle: string;\n  /**\n   * Optional additional details shown to the user on the lobby screen when waiting to be admitted to a call.\n   */\n  lobbyScreenWaitingToBeAdmittedMoreDetails?: string;\n  /**\n   * Message shown to the user when they are speaking while muted.\n   */\n  mutedMessage: string;\n  /**\n   * Text for link to MS privacy policy in Compliance Banner.\n   */\n  privacyPolicy: string;\n  /**\n   * Text for link to learn more about a specific subject.\n   */\n  learnMore: string;\n  /**\n   * Message to let user know the meeting is only being recorded (no transcription) in ComplianceBanner.\n   */\n  complianceBannerNowOnlyRecording: string;\n  /**\n   * Message to let user know the meeting is only being transcripted (no recording) in ComplianceBanner.\n   */\n  complianceBannerNowOnlyTranscription: string;\n  /**\n   * Message to let user know recording and transcription of the meeting are saved in ComplianceBanner.\n   */\n  complianceBannerRecordingAndTranscriptionSaved: string;\n  /**\n   * Message to let user know recording and transcription of the meeting have started in ComplianceBanner.\n   */\n  complianceBannerRecordingAndTranscriptionStarted: string;\n  /**\n   * Message to let user know recording and transcription of the meeting have stopped in ComplianceBanner.\n   */\n  complianceBannerRecordingAndTranscriptionStopped: string;\n  /**\n   * Message to let user know recording of the meeting is being saved in ComplianceBanner.\n   */\n  complianceBannerRecordingSaving: string;\n  /**\n   * Message to let user know recording of the meeting has started in ComplianceBanner.\n   */\n  complianceBannerRecordingStarted: string;\n  /**\n   * Message to let user know recording of the meeting has stopped in ComplianceBanner.\n   */\n  complianceBannerRecordingStopped: string;\n  /**\n   * Message to let user know they are giving consent to meeting being transcripted in ComplianceBanner.\n   */\n  complianceBannerTranscriptionConsent: string;\n  /**\n   * Message to let user know transcription of the meeting is being saved in ComplianceBanner.\n   */\n  complianceBannerTranscriptionSaving: string;\n  /**\n   * Message to let user know transcription of the meeting has started in ComplianceBanner.\n   */\n  complianceBannerTranscriptionStarted: string;\n  /**\n   * Message to let user know the transcription of the meeting has stopped in ComplianceBanner.\n   */\n  complianceBannerTranscriptionStopped: string;\n  /**\n   * Text for close button.\n   */\n  close: string;\n  /**\n   * Title text of the page shown to the user when there is intermittent network failure during a call.\n   */\n  networkReconnectTitle: string;\n  /**\n   * More details text of the page shown to the user when there is intermittent network failure during a call.\n   */\n  networkReconnectMoreDetails: string;\n  /**\n   * Tooltip text used to inform a user that toggling microphone in lobby is not supported.\n   */\n  microphoneToggleInLobbyNotAllowed: string;\n  /**\n   * Side pane People section Title.\n   */\n  peoplePaneTitle: string;\n  /**\n   * Aria label of more button in people pane\n   */\n  peoplePaneMoreButtonAriaLabel: string;\n  /**\n   * Aria label string for return to call back button\n   */\n  returnToCallButtonAriaLabel?: string;\n  /**\n   * Aria Description string for return to call button\n   */\n  returnToCallButtonAriaDescription?: string;\n  /**\n   * control bar People button label\n   */\n  peopleButtonLabel: string;\n  /**\n   * control bar People button label when checked\n   */\n  selectedPeopleButtonLabel: string;\n  /**\n   * control bar Chat button label.\n   */\n  chatButtonLabel: string;\n  /**\n   * Label for SidePaneHeader dismiss button\n   */\n  dismissSidePaneButtonLabel?: string;\n  /**\n   * Side pane People section subheader.\n   */\n  peoplePaneSubTitle?: string;\n  /**\n   * Label for button to copy invite link\n   */\n  copyInviteLinkButtonLabel?: string;\n  /**\n   * Label for button to copy invite link when it has been actioned\n   */\n  copyInviteLinkButtonActionedLabel?: string;\n  /**\n   * Label for button to open dialpad\n   */\n  openDialpadButtonLabel?: string;\n  /**\n   * Label for menu item to remove participant\n   */\n  removeMenuLabel?: string;\n  /**\n   * Label for menu item to start spotlight on participant\n   */\n  startSpotlightMenuLabel: string;\n  /**\n   * Label for menu item to add spotlight on participant\n   */\n  addSpotlightMenuLabel: string;\n  /**\n   * Label for menu item to stop spotlight on participant\n   */\n  stopSpotlightMenuLabel: string;\n  /**\n   * Label for menu item to stop spotlight on local user\n   */\n  stopSpotlightOnSelfMenuLabel: string;\n  /**\n   * Label for menu item to stop spotlight on local user\n   */\n  spotlightLimitReachedMenuTitle: string;\n  /**\n   * Label for menu item to stop all spotlight\n   */\n  stopAllSpotlightMenuLabel: string;\n  /**\n   * Label for add people dropdown\n   */\n  peoplePaneAddPeopleButtonLabel?: string;\n  /**\n   * Label for button to start a call\n   */\n  dialpadStartCallButtonLabel?: string;\n  /**\n   * Title for dialpad Modal\n   */\n  dialpadModalTitle?: string;\n  /**\n   * Aria Label for dialpad Modal\n   */\n  dialpadModalAriaLabel?: string;\n  /**\n   * Aria Label for dialpad Modal close button\n   */\n  dialpadCloseModalButtonAriaLabel?: string;\n  /**\n   * label for more button in the Calling composite\n   */\n  moreButtonCallingLabel: string;\n  /**\n   * Label for the resume call button on the hold pane\n   */\n  resumeCallButtonLabel?: string;\n  /**\n   * Label for the resume call button on the hold pane when call is resuming\n   */\n  resumingCallButtonLabel?: string;\n  /**\n   * Aria label for the resume call button on the hold pane\n   */\n  resumeCallButtonAriaLabel?: string;\n  /**\n   * Aria label for the resume call button on the hold pane when call is resuming\n   */\n  resumingCallButtonAriaLabel?: string;\n  /**\n   * Label for the hold pane\n   */\n  holdScreenLabel?: string;\n  /**\n   * Placeholder text for dtmf dialpad\n   */\n  dtmfDialpadPlaceholderText?: string;\n  /**\n   * Label for the button to open dtmf dialpad\n   */\n  openDtmfDialpadLabel?: string;\n  /**\n   * aria label for when the invite link has been actioned\n   */\n  copyInviteLinkActionedAriaLabel: string;\n  /**\n   * Title text of the page shown to the user when the user attempts to join a room that cannot be found.\n   */\n  roomNotFoundTitle: string;\n  /**\n   * More details text of the page shown to the user when the user attempts to join a room that cannot be found.\n   */\n  roomNotFoundDetails?: string;\n  /**\n   * Title text of the page shown to the user when the user attempts to join a room that is not valid.\n   */\n  roomNotValidTitle: string;\n  /**\n   * More details text of the page shown to the user when the user attempts to join a room that is not valid.\n   */\n  roomNotValidDetails?: string;\n  /**\n   * Title text of the page shown to the user when the user's permission to join the room is removed.\n   */\n  inviteToRoomRemovedTitle: string;\n  /**\n   * More details text of the page shown to the user when the user's permission to join the room is removed.\n   */\n  inviteToRoomRemovedDetails?: string;\n\n  /**\n   * Video Effects pane title.\n   */\n  videoEffectsPaneTitle: string;\n\n  /**\n   * Video Effects pane sub section title for choosing background.\n   */\n  videoEffectsPaneBackgroundSelectionTitle: string;\n\n  /**\n   * Aria label for video effects pane\n   */\n  videoEffectsPaneAriaLabel: string;\n\n  /**\n   * Label for the button to open effects\n   */\n  configurationPageVideoEffectsButtonLabel?: string;\n\n  /**\n   * Error message for video effect failure\n   */\n  unableToStartVideoEffect?: string;\n\n  /**\n   * Label for the blur video background effect item\n   */\n  blurBackgroundEffectButtonLabel?: string;\n\n  /**\n   * Tooltip text for the blur video background effect item\n   */\n  blurBackgroundTooltip?: string;\n\n  /**\n   * Label for the remove video background effect item\n   */\n  removeBackgroundEffectButtonLabel?: string;\n\n  /**\n   * Tooltip text for the blur video background effect item\n   */\n  removeBackgroundTooltip?: string;\n\n  /**\n   * Text to show when warning the user the camera is off and inform the user to turn the camera on to see the selected video background effect.\n   */\n  cameraOffBackgroundEffectWarningText?: string;\n  /**\n   * Title text of the page shown to the user when the user attempts to join a room they are not invited to.\n   */\n  notInvitedToRoomTitle: string;\n  /**\n   * More details text of the page shown to the user when the user attempts to join a room they are not invited to.\n   */\n  notInvitedToRoomDetails?: string;\n  /**\n   * Control bar People button ToolTipContent\n   */\n  peopleButtonTooltipOpen: string;\n  /**\n   * Control bar People button ToolTipContent\n   */\n  peopleButtonTooltipClose: string;\n  /**\n   * Label disaplayed on the lobby screen during a 1:1 outbound call.\n   */\n  outboundCallingNoticeString?: string;\n  /**\n   * Notice to be announced by narrator when a participant joins a call\n   */\n  participantJoinedNoticeString: string;\n  /**\n   * Notice to be announced by narrator when a participant joins a call\n   */\n  twoParticipantJoinedNoticeString: string;\n  /**\n   * Notice to be announced by narrator when a participant joins a call\n   */\n  threeParticipantJoinedNoticeString: string;\n  /**\n   * Notice to be announced by narrator when a participant leaves a call\n   */\n  participantLeftNoticeString: string;\n  /**\n   * Notice to be announced by narrator when 2 participants leave a call\n   */\n  twoParticipantLeftNoticeString: string;\n  /**\n   * Notice to be announced by narrator when 3 participants leave a call\n   */\n  threeParticipantLeftNoticeString: string;\n  /**\n   * string to be used to announce a change in participant if they have no displayName\n   */\n  unnamedParticipantString: string;\n  /**\n   * string to be used to announce when more than 3 participants have joined at the same time.\n   */\n  manyParticipantsJoined: string;\n  /**\n   * string to be used to announce when more than 3 participants have left at the same time.\n   */\n  manyParticipantsLeft: string;\n  /**\n   * string to be used to announce when multiple unnamed participants have joined at the same time.\n   */\n  manyUnnamedParticipantsJoined: string;\n  /**\n   * string to be used to announce when multiple unnamed participants have left at the same time.\n   */\n  manyUnnamedParticipantsLeft: string;\n  /**\n   * string to be used to open live captions contextual menu\n   */\n  liveCaptionsLabel?: string;\n  /**\n   * label for opening captions setting modal\n   */\n  captionsSettingsLabel?: string;\n  /**\n   * string to be used to start captions\n   */\n  startCaptionsButtonOnLabel?: string;\n  /**\n   * string to be used to stop captions\n   */\n  startCaptionsButtonOffLabel?: string;\n  /**\n   * tooltip string to be used to show captions is on\n   */\n  startCaptionsButtonTooltipOnContent?: string;\n  /**\n   *tooltip string to be used to show captions is off\n   */\n  startCaptionsButtonTooltipOffContent?: string;\n  /**\n   * captions setting modal title\n   */\n  captionsSettingsModalTitle?: string;\n  /**\n   * label for spoken language dropdown inside captions setting modal\n   */\n  captionsSettingsSpokenLanguageDropdownLabel?: string;\n  /**\n   * label for captions language inside captions setting modal\n   */\n  captionsSettingsCaptionLanguageDropdownLabel?: string;\n  /**\n   * text under captions setting dropdown indicating what the dropdown is for\n   */\n  captionsSettingsSpokenLanguageDropdownInfoText?: string;\n  /**\n   * text under captions setting dropdown indicating what the dropdown is for\n   */\n  captionsSettingsCaptionLanguageDropdownInfoText?: string;\n  /**\n   * confirm button label in captions setting modal\n   */\n  captionsSettingsConfirmButtonLabel?: string;\n  /**\n   * cancel button label in captions setting modal\n   */\n  captionsSettingsCancelButtonLabel?: string;\n  /**\n   * arial label for captions setting modal\n   */\n  captionsSettingsModalAriaLabel?: string;\n  /**\n   * arial label for captions setting modal close button\n   */\n  captionsSettingsCloseModalButtonAriaLabel?: string;\n  /**\n   * label for more button inside captions banner\n   */\n  captionsBannerMoreButtonCallingLabel?: string;\n  /**\n   * arial label for more button inside captions banner\n   */\n  captionsBannerMoreButtonTooltip?: string;\n  /**\n   * list of key value pairs that pairs spoken language code to language names\n   */\n  spokenLanguageStrings?: SpokenLanguageStrings;\n  /**\n   * list of key value pairs that pairs caption language code to language names\n   */\n  captionLanguageStrings?: CaptionLanguageStrings;\n  /**\n   * captions banner loading spinner label\n   */\n  captionsBannerSpinnerText?: string;\n  /**\n   * transfer page text when showing the transferor who initiated the transfer\n   */\n  transferPageTransferorText: string;\n  /**\n   * transfer page text when showing the transfer target\n   */\n  transferPageTransferTargetText: string;\n  /**\n   * transfer page display name for unknown participant\n   */\n  transferPageUnknownTransferorDisplayName: string;\n  /**\n   * transfer page display name for unknown participant\n   */\n  transferPageUnknownTransferTargetDisplayName: string;\n  /**\n   * notice to be announced by narrator the transfer page is showing\n   */\n  transferPageNoticeString: string;\n\n  /**\n   * Title text of the page shown to the user when target participant could not be reached\n   */\n  participantCouldNotBeReachedTitle?: string;\n\n  /**\n   * More details text of the page shown to the user when target participant could not be reached\n   */\n  participantCouldNotBeReachedMoreDetails?: string;\n\n  /**\n   * Title text of the page shown to the user when permission to reach participant is not allowed\n   */\n  permissionToReachTargetParticipantNotAllowedTitle?: string;\n\n  /**\n   * More details text of the page shown to the user when permission to reach participant is not allowed\n   */\n  permissionToReachTargetParticipantNotAllowedMoreDetails?: string;\n\n  /**\n   * Title text of the page shown to the user when tenant id for the target participant could not be resolved\n   */\n  unableToResolveTenantTitle?: string;\n\n  /**\n   * More details text of the page shown to the user when tenant id for the target participant could not be resolved\n   */\n  unableToResolveTenantMoreDetails?: string;\n\n  /**\n   * Title text of the page shown to the user when target participant id is malformed\n   */\n  participantIdIsMalformedTitle?: string;\n\n  /**\n   * More details text of the page shown to the user when target participant id is malformed\n   */\n  participantIdIsMalformedMoreDetails?: string;\n  /**\n   * Controls label to move the overflow gallery around\n   */\n  moreButtonGalleryControlLabel?: string;\n  /**\n   * Label for the toggle to move the overflow gallery to the top\n   */\n  moreButtonGalleryPositionToggleLabel?: string;\n  /**\n   * Label for the selection of the speaker layout\n   */\n  moreButtonGallerySpeakerLayoutLabel?: string;\n  /**\n   * Label for the selection of the default (Gallery) layout\n   */\n  moreButtonGalleryDefaultLayoutLabel?: string;\n  /**\n   * Label for the selection of the default (Gallery) layout\n   */\n  moreButtonLargeGalleryDefaultLayoutLabel?: string;\n  /**\n   * Label for the selection of the floatingLocalVideo (Dynamic) layout\n   */\n  moreButtonGalleryFloatingLocalLayoutLabel?: string;\n  /**\n   * Label for the selection of the focusedContentLayout (Focused content) layout\n   */\n  moreButtonGalleryFocusedContentLayoutLabel?: string;\n\n  /**\n   * All strings for capability changed notification\n   */\n  capabilityChangedNotification?: CapabilityChangedNotificationStrings;\n  /**\n   * Title for the survey\n   */\n  surveyTitle: string;\n  /**\n   * Helper text to explain what the survey is for\n   */\n  starSurveyHelperText: string;\n  /**\n   * Helper text displayed below survey question after user select one star\n   */\n  starSurveyOneStarText: string;\n  /**\n   * Helper text displayed below survey question after user select two star\n   */\n  starSurveyTwoStarText: string;\n  /**\n   * Helper text displayed below survey question after user select three star\n   */\n  starSurveyThreeStarText: string;\n  /**\n   * Helper text displayed below survey question after user select four star\n   */\n  starSurveyFourStarText: string;\n  /**\n   * Helper text displayed below survey question after user select five star\n   */\n  starSurveyFiveStarText: string;\n  /**\n   * Aria Label for each individual star rating\n   */\n  starRatingAriaLabel: string;\n  /**\n   * Tags Survey Question\n   */\n  tagsSurveyQuestion: string;\n  /**\n   * Default text for free form text field inside tags survey\n   */\n  tagsSurveyTextFieldDefaultText: string;\n  /**\n   * Tags Survey helper text\n   */\n  tagsSurveyHelperText: string;\n  /**\n   * Confirm button label for survey\n   */\n  surveyConfirmButtonLabel: string;\n  /**\n   * Cancel button label for survey\n   */\n  surveySkipButtonLabel: string;\n  /**\n   * Thank you text appeared on screen after survey is submitted\n   */\n  endOfSurveyText: string;\n  /**\n   * Corresponding texts to each call issue\n   */\n  surveyIssues: SurveyIssues;\n  /**\n   * Corresponding texts to each call category\n   */\n  surveyIssuesHeadingStrings: SurveyIssuesHeadingStrings;\n  /**\n   * String for the dismiss control on the local and remote PIP on mobile\n   */\n  dismissModalAriaLabel?: string;\n  /**\n   * String for title when the call is rejected by the callee\n   */\n  callRejectedTitle?: string;\n  /**\n   * String for more details when the call is rejected by the callee\n   */\n  callRejectedMoreDetails?: string;\n  /**\n   * String for title when the call times out because the remote user does not answer\n   */\n  callTimeoutTitle?: string;\n  /**\n   * String for title when the call times out when calling a bot.\n   */\n  callTimeoutBotTitle?: string;\n  /**\n   * String for more details when the call times out because the remote user does not answer\n   */\n  callTimeoutDetails?: string;\n  /**\n   * String for more details when the call times out when calling a bot\n   */\n  callTimeoutBotDetails?: string;\n  /**\n   * Label for the control bar button to show the dtmf dialer when the more button is disabled\n   */\n  dtmfDialerButtonLabel?: string;\n  /**\n   * Tooltip for the control bar button to show the dtmf dialer when the more button is disabled\n   */\n  dtmfDialerButtonTooltipOn?: string;\n  /**\n   * Tooltip for the control bar button to hide the dtmf dialer when the more button is disabled\n   */\n  dtmfDialerButtonTooltipOff?: string;\n  /**\n   * Label to show the dtmf dialer in the more button menu\n   */\n  dtmfDialerMoreButtonLabelOn?: string;\n  /**\n   * Label to hide the dtmf dialer in the more button menu\n   */\n  dtmfDialerMoreButtonLabelOff?: string;\n  /**\n   * Strings for spotlight prompt\n   */\n  spotlightPrompt: SpotlightPromptStrings;\n  /**\n   * Label for button to exit spotlight\n   */\n  exitSpotlightButtonLabel: string;\n  /**\n   * Tooltip for button to exit spotlight\n   */\n  exitSpotlightButtonTooltip: string;\n  /* @conditional-compile-remove(end-call-options) */\n  /**\n   * Label for confirm button of hang up for everyone dialog\n   */\n  leaveConfirmButtonLabel?: string;\n  /* @conditional-compile-remove(end-call-options) */\n  /**\n   * Label for confirm button of leave confim dialog\n   */\n  endCallConfirmButtonLabel?: string;\n  /* @conditional-compile-remove(end-call-options) */\n  /**\n   * Label for cancel button in hang up confirm dialog\n   */\n  hangUpCancelButtonLabel?: string;\n  /* @conditional-compile-remove(end-call-options) */\n  /**\n   * Title of confirm dialog when leaving\n   */\n  leaveConfirmDialogTitle?: string;\n  /* @conditional-compile-remove(end-call-options) */\n  /**\n   * Content of confirm dialog when leaving\n   */\n  leaveConfirmDialogContent?: string;\n  /* @conditional-compile-remove(end-call-options) */\n  /**\n   * Title of confirm dialog when leaving\n   */\n  endCallConfirmDialogTitle?: string;\n  /* @conditional-compile-remove(end-call-options) */\n  /**\n   * Content of confirm dialog when leaving\n   */\n  endCallConfirmDialogContent?: string;\n  /**\n   * Error message when the meeting identifier or passcode is invalid\n   */\n  invalidMeetingIdentifier: string;\n  /**\n   * Menu text shown in Participant Item contextual menu for pinning a remote participant's video tile\n   *\n   */\n  pinParticipantMenuLabel: string;\n  /**\n   * Menu text shown in Participant Item contextual menu when pinning limit is reached\n   *\n   */\n  pinParticipantLimitReachedMenuLabel: string;\n  /**\n   * Menu text shown in Participant Item contextual menu for unpinning a remote participant's video tile\n   *\n   */\n  unpinParticipantMenuLabel: string;\n  /**\n   * Aria label for unpin participant menu item of remote participant\n   */\n  unpinParticipantMenuItemAriaLabel: string;\n  /**\n   * Aria label to announce when remote participant is pinned\n   */\n  pinParticipantMenuItemAriaLabel: string;\n  /**\n   * Error message when the meeting identifier or passcode is invalid\n   */\n  phoneCallMoreButtonLabel: string;\n  /* @conditional-compile-remove(soft-mute) */\n  /**\n   * Label for mute all remote participants menu item in People Pane\n   */\n  muteAllMenuLabel: string;\n  /* @conditional-compile-remove(soft-mute) */\n  /**\n   * Label for mute all prompt title\n   */\n  muteAllDialogTitle: string;\n  /* @conditional-compile-remove(soft-mute) */\n  /**\n   * Label for mute all prompt content\n   */\n  muteAllDialogContent: string;\n  /* @conditional-compile-remove(soft-mute) */\n  /**\n   * Label for mute all confirm button\n   */\n  muteAllConfirmButtonLabel: string;\n  /* @conditional-compile-remove(soft-mute) */\n  /**\n   * Label for mute all cancel button\n   */\n  muteAllCancelButtonLabel: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Label for join breakout room button\n   */\n  joinBreakoutRoomButtonLabel: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Label for button to return from breakout room\n   */\n  returnFromBreakoutRoomButtonLabel: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Label for button to leave breakout room and meeting\n   */\n  leaveBreakoutRoomAndMeetingButtonLabel: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Notification title for when a user joins a breakout room\n   */\n  breakoutRoomJoinedNotificationTitle: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Title for banner to join the assigned breakout room. The banner is shown in mobile view instead of the\n   * notification.\n   */\n  joinBreakoutRoomBannerTitle: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Label for button in banner to join breakout room. The banner is shown in mobile view instead of the notification.\n   */\n  joinBreakoutRoomBannerButtonLabel: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Title for banner to return from breakout room. The banner is shown in mobile view instead of the notification.\n   */\n  returnFromBreakoutRoomBannerTitle: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Label for button in banner to return from breakout room. The banner is shown in mobile view instead of the\n   * notification.\n   */\n  returnFromBreakoutRoomBannerButtonLabel: string;\n}\n"]}
+{"version":3,"file":"Strings.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/Strings.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { SpokenLanguageStrings, CaptionLanguageStrings } from '@internal/react-components';\nimport { SurveyIssues, SurveyIssuesHeadingStrings } from '@internal/react-components';\nimport { CapabilityChangedNotificationStrings } from './components/CapabilitiesChangedNotificationBar';\nimport { SpotlightPromptStrings } from './components/Prompt';\n\n/**\n * Strings used by the {@link CallComposite} directly.\n *\n * This strings are in addition to those used by the components from the component library.\n *\n * @public\n */\nexport interface CallCompositeStrings {\n  /**\n   * Title of configuration page.\n   */\n  configurationPageTitle: string;\n  /**\n   * Optional 1-2 lines on the call details used on the configuration page.\n   */\n  configurationPageCallDetails?: string;\n  /**\n   * Text in button to start call in configuration page.\n   */\n  startCallButtonLabel: string;\n  /**\n   * Text in button to rejoin an ended call.\n   */\n  rejoinCallButtonLabel: string;\n  /**\n   * Placeholder text for local device settings dropdowns.\n   */\n  defaultPlaceHolder: string;\n  /**\n   * Label for camera dropdown.\n   */\n  cameraLabel: string;\n  /**\n   * Label for when there are no cameras present on configuration screen.\n   */\n  noCamerasLabel: string;\n  /**\n   * Label for sound dropdown.\n   */\n  soundLabel: string;\n  /**\n   * Label for when no microphones were found on the configuration screen\n   */\n  noMicrophonesLabel: string;\n  /**\n   * Label for when no speakers were found on the configuration screen.\n   */\n  noSpeakersLabel: string;\n  /**\n   * Error shown when camera access is blocked by the browser.\n   */\n  cameraPermissionDenied: string;\n  /**\n   * Error shown when the camera is turned off.\n   */\n  cameraTurnedOff: string;\n  /**\n   * Error shown when microphone access is blocked by the browser.\n   */\n  microphonePermissionDenied: string;\n  /**\n   * Title text of the page shown to the user when joining a Teams meeting fails because meeting owner denied access.\n   */\n  failedToJoinTeamsMeetingReasonAccessDeniedTitle: string;\n  /**\n   * More details text of the page shown to the user when joining a Teams meeting fails because meeting owner denied access.\n   */\n  failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails?: string;\n  /**\n   * Title text of the page shown to the user when joining a call fails due to a network problem.\n   */\n  failedToJoinCallDueToNoNetworkTitle: string;\n  /**\n   * More details text of the page shown to the user when joining a call fails due to a network problem.\n   */\n  failedToJoinCallDueToNoNetworkMoreDetails?: string;\n  /**\n   * Text to display on a leaving page.\n   */\n  leavingCallTitle?: string;\n  /**\n   * Title text of the page shown to the user when they leave a call in the call composite.\n   */\n  leftCallTitle: string;\n  /**\n   * More details text of the page shown to the user when they leave a call in the call composite.\n   */\n  leftCallMoreDetails?: string;\n  /**\n   * Title text of the page shown to the user when they are removed from a call in the call composite.\n   */\n  removedFromCallTitle: string;\n  /**\n   * More details text of the page shown to the user when they are removed from a call in the call composite.\n   */\n  removedFromCallMoreDetails?: string;\n  /**\n   * Text shown to the user on the lobby screen when connecting to a call.\n   */\n  lobbyScreenConnectingToCallTitle: string;\n  /**\n   * Optional addition details shown to the user on the lobby screen when connection to a call.\n   */\n  lobbyScreenConnectingToCallMoreDetails?: string;\n  /**\n   * Text shown to the user on the lobby screen when waiting to be admitted to a call.\n   */\n  lobbyScreenWaitingToBeAdmittedTitle: string;\n  /**\n   * Optional additional details shown to the user on the lobby screen when waiting to be admitted to a call.\n   */\n  lobbyScreenWaitingToBeAdmittedMoreDetails?: string;\n  /**\n   * Message shown to the user when they are speaking while muted.\n   */\n  mutedMessage: string;\n  /**\n   * Text for link to MS privacy policy in Compliance Banner.\n   */\n  privacyPolicy: string;\n  /**\n   * Text for link to learn more about a specific subject.\n   */\n  learnMore: string;\n  /**\n   * Message to let user know the meeting is only being recorded (no transcription) in ComplianceBanner.\n   */\n  complianceBannerNowOnlyRecording: string;\n  /**\n   * Message to let user know the meeting is only being transcripted (no recording) in ComplianceBanner.\n   */\n  complianceBannerNowOnlyTranscription: string;\n  /**\n   * Message to let user know recording and transcription of the meeting are saved in ComplianceBanner.\n   */\n  complianceBannerRecordingAndTranscriptionSaved: string;\n  /**\n   * Message to let user know recording and transcription of the meeting have started in ComplianceBanner.\n   */\n  complianceBannerRecordingAndTranscriptionStarted: string;\n  /**\n   * Message to let user know recording and transcription of the meeting have stopped in ComplianceBanner.\n   */\n  complianceBannerRecordingAndTranscriptionStopped: string;\n  /**\n   * Message to let user know recording of the meeting is being saved in ComplianceBanner.\n   */\n  complianceBannerRecordingSaving: string;\n  /**\n   * Message to let user know recording of the meeting has started in ComplianceBanner.\n   */\n  complianceBannerRecordingStarted: string;\n  /**\n   * Message to let user know recording of the meeting has stopped in ComplianceBanner.\n   */\n  complianceBannerRecordingStopped: string;\n  /**\n   * Message to let user know they are giving consent to meeting being transcripted in ComplianceBanner.\n   */\n  complianceBannerTranscriptionConsent: string;\n  /**\n   * Message to let user know transcription of the meeting is being saved in ComplianceBanner.\n   */\n  complianceBannerTranscriptionSaving: string;\n  /**\n   * Message to let user know transcription of the meeting has started in ComplianceBanner.\n   */\n  complianceBannerTranscriptionStarted: string;\n  /**\n   * Message to let user know the transcription of the meeting has stopped in ComplianceBanner.\n   */\n  complianceBannerTranscriptionStopped: string;\n  /**\n   * Text for close button.\n   */\n  close: string;\n  /**\n   * Title text of the page shown to the user when there is intermittent network failure during a call.\n   */\n  networkReconnectTitle: string;\n  /**\n   * More details text of the page shown to the user when there is intermittent network failure during a call.\n   */\n  networkReconnectMoreDetails: string;\n  /**\n   * Tooltip text used to inform a user that toggling microphone in lobby is not supported.\n   */\n  microphoneToggleInLobbyNotAllowed: string;\n  /**\n   * Side pane People section Title.\n   */\n  peoplePaneTitle: string;\n  /**\n   * Aria label of more button in people pane\n   */\n  peoplePaneMoreButtonAriaLabel: string;\n  /**\n   * Aria label string for return to call back button\n   */\n  returnToCallButtonAriaLabel?: string;\n  /**\n   * Aria Description string for return to call button\n   */\n  returnToCallButtonAriaDescription?: string;\n  /**\n   * control bar People button label\n   */\n  peopleButtonLabel: string;\n  /**\n   * control bar People button label when checked\n   */\n  selectedPeopleButtonLabel: string;\n  /**\n   * control bar Chat button label.\n   */\n  chatButtonLabel: string;\n  /**\n   * Label for SidePaneHeader dismiss button\n   */\n  dismissSidePaneButtonLabel?: string;\n  /**\n   * Side pane People section subheader.\n   */\n  peoplePaneSubTitle?: string;\n  /**\n   * Label for button to copy invite link\n   */\n  copyInviteLinkButtonLabel?: string;\n  /**\n   * Label for button to copy invite link when it has been actioned\n   */\n  copyInviteLinkButtonActionedLabel?: string;\n  /**\n   * Label for button to open dialpad\n   */\n  openDialpadButtonLabel?: string;\n  /**\n   * Label for menu item to remove participant\n   */\n  removeMenuLabel?: string;\n  /**\n   * Label for menu item to start spotlight on participant\n   */\n  startSpotlightMenuLabel: string;\n  /**\n   * Label for menu item to add spotlight on participant\n   */\n  addSpotlightMenuLabel: string;\n  /**\n   * Label for menu item to stop spotlight on participant\n   */\n  stopSpotlightMenuLabel: string;\n  /**\n   * Label for menu item to stop spotlight on local user\n   */\n  stopSpotlightOnSelfMenuLabel: string;\n  /**\n   * Label for menu item to stop spotlight on local user\n   */\n  spotlightLimitReachedMenuTitle: string;\n  /**\n   * Label for menu item to stop all spotlight\n   */\n  stopAllSpotlightMenuLabel: string;\n  /**\n   * Label for add people dropdown\n   */\n  peoplePaneAddPeopleButtonLabel?: string;\n  /**\n   * Label for button to start a call\n   */\n  dialpadStartCallButtonLabel?: string;\n  /**\n   * Title for dialpad Modal\n   */\n  dialpadModalTitle?: string;\n  /**\n   * Aria Label for dialpad Modal\n   */\n  dialpadModalAriaLabel?: string;\n  /**\n   * Aria Label for dialpad Modal close button\n   */\n  dialpadCloseModalButtonAriaLabel?: string;\n  /**\n   * label for more button in the Calling composite\n   */\n  moreButtonCallingLabel: string;\n  /**\n   * Label for the resume call button on the hold pane\n   */\n  resumeCallButtonLabel?: string;\n  /**\n   * Label for the resume call button on the hold pane when call is resuming\n   */\n  resumingCallButtonLabel?: string;\n  /**\n   * Aria label for the resume call button on the hold pane\n   */\n  resumeCallButtonAriaLabel?: string;\n  /**\n   * Aria label for the resume call button on the hold pane when call is resuming\n   */\n  resumingCallButtonAriaLabel?: string;\n  /**\n   * Label for the hold pane\n   */\n  holdScreenLabel?: string;\n  /**\n   * Placeholder text for dtmf dialpad\n   */\n  dtmfDialpadPlaceholderText?: string;\n  /**\n   * Label for the button to open dtmf dialpad\n   */\n  openDtmfDialpadLabel?: string;\n  /**\n   * aria label for when the invite link has been actioned\n   */\n  copyInviteLinkActionedAriaLabel: string;\n  /**\n   * Title text of the page shown to the user when the user attempts to join a room that cannot be found.\n   */\n  roomNotFoundTitle: string;\n  /**\n   * More details text of the page shown to the user when the user attempts to join a room that cannot be found.\n   */\n  roomNotFoundDetails?: string;\n  /**\n   * Title text of the page shown to the user when the user attempts to join a room that is not valid.\n   */\n  roomNotValidTitle: string;\n  /**\n   * More details text of the page shown to the user when the user attempts to join a room that is not valid.\n   */\n  roomNotValidDetails?: string;\n  /**\n   * Title text of the page shown to the user when the user's permission to join the room is removed.\n   */\n  inviteToRoomRemovedTitle: string;\n  /**\n   * More details text of the page shown to the user when the user's permission to join the room is removed.\n   */\n  inviteToRoomRemovedDetails?: string;\n\n  /**\n   * Video Effects pane title.\n   */\n  videoEffectsPaneTitle: string;\n\n  /**\n   * Video Effects pane sub section title for choosing background.\n   */\n  videoEffectsPaneBackgroundSelectionTitle: string;\n\n  /**\n   * Aria label for video effects pane\n   */\n  videoEffectsPaneAriaLabel: string;\n\n  /**\n   * Label for the button to open effects\n   */\n  configurationPageVideoEffectsButtonLabel?: string;\n\n  /**\n   * Error message for video effect failure\n   */\n  unableToStartVideoEffect?: string;\n\n  /**\n   * Label for the blur video background effect item\n   */\n  blurBackgroundEffectButtonLabel?: string;\n\n  /**\n   * Tooltip text for the blur video background effect item\n   */\n  blurBackgroundTooltip?: string;\n\n  /**\n   * Label for the remove video background effect item\n   */\n  removeBackgroundEffectButtonLabel?: string;\n\n  /**\n   * Tooltip text for the blur video background effect item\n   */\n  removeBackgroundTooltip?: string;\n\n  /**\n   * Text to show when warning the user the camera is off and inform the user to turn the camera on to see the selected video background effect.\n   */\n  cameraOffBackgroundEffectWarningText?: string;\n  /**\n   * Title text of the page shown to the user when the user attempts to join a room they are not invited to.\n   */\n  notInvitedToRoomTitle: string;\n  /**\n   * More details text of the page shown to the user when the user attempts to join a room they are not invited to.\n   */\n  notInvitedToRoomDetails?: string;\n  /**\n   * Control bar People button ToolTipContent\n   */\n  peopleButtonTooltipOpen: string;\n  /**\n   * Control bar People button ToolTipContent\n   */\n  peopleButtonTooltipClose: string;\n  /**\n   * Label disaplayed on the lobby screen during a 1:1 outbound call.\n   */\n  outboundCallingNoticeString?: string;\n  /**\n   * Notice to be announced by narrator when a participant joins a call\n   */\n  participantJoinedNoticeString: string;\n  /**\n   * Notice to be announced by narrator when a participant joins a call\n   */\n  twoParticipantJoinedNoticeString: string;\n  /**\n   * Notice to be announced by narrator when a participant joins a call\n   */\n  threeParticipantJoinedNoticeString: string;\n  /**\n   * Notice to be announced by narrator when a participant leaves a call\n   */\n  participantLeftNoticeString: string;\n  /**\n   * Notice to be announced by narrator when 2 participants leave a call\n   */\n  twoParticipantLeftNoticeString: string;\n  /**\n   * Notice to be announced by narrator when 3 participants leave a call\n   */\n  threeParticipantLeftNoticeString: string;\n  /**\n   * string to be used to announce a change in participant if they have no displayName\n   */\n  unnamedParticipantString: string;\n  /**\n   * string to be used to announce when more than 3 participants have joined at the same time.\n   */\n  manyParticipantsJoined: string;\n  /**\n   * string to be used to announce when more than 3 participants have left at the same time.\n   */\n  manyParticipantsLeft: string;\n  /**\n   * string to be used to announce when multiple unnamed participants have joined at the same time.\n   */\n  manyUnnamedParticipantsJoined: string;\n  /**\n   * string to be used to announce when multiple unnamed participants have left at the same time.\n   */\n  manyUnnamedParticipantsLeft: string;\n  /**\n   * string to be used to open live captions contextual menu\n   */\n  liveCaptionsLabel?: string;\n  /**\n   * label for opening captions setting modal\n   */\n  captionsSettingsLabel?: string;\n  /**\n   * string to be used to start captions\n   */\n  startCaptionsButtonOnLabel?: string;\n  /**\n   * string to be used to stop captions\n   */\n  startCaptionsButtonOffLabel?: string;\n  /**\n   * tooltip string to be used to show captions is on\n   */\n  startCaptionsButtonTooltipOnContent?: string;\n  /**\n   *tooltip string to be used to show captions is off\n   */\n  startCaptionsButtonTooltipOffContent?: string;\n  /**\n   * captions setting modal title\n   */\n  captionsSettingsModalTitle?: string;\n  /**\n   * label for spoken language dropdown inside captions setting modal\n   */\n  captionsSettingsSpokenLanguageDropdownLabel?: string;\n  /**\n   * label for captions language inside captions setting modal\n   */\n  captionsSettingsCaptionLanguageDropdownLabel?: string;\n  /**\n   * text under captions setting dropdown indicating what the dropdown is for\n   */\n  captionsSettingsSpokenLanguageDropdownInfoText?: string;\n  /**\n   * text under captions setting dropdown indicating what the dropdown is for\n   */\n  captionsSettingsCaptionLanguageDropdownInfoText?: string;\n  /**\n   * confirm button label in captions setting modal\n   */\n  captionsSettingsConfirmButtonLabel?: string;\n  /**\n   * cancel button label in captions setting modal\n   */\n  captionsSettingsCancelButtonLabel?: string;\n  /**\n   * arial label for captions setting modal\n   */\n  captionsSettingsModalAriaLabel?: string;\n  /**\n   * arial label for captions setting modal close button\n   */\n  captionsSettingsCloseModalButtonAriaLabel?: string;\n  /**\n   * label for more button inside captions banner\n   */\n  captionsBannerMoreButtonCallingLabel?: string;\n  /**\n   * arial label for more button inside captions banner\n   */\n  captionsBannerMoreButtonTooltip?: string;\n  /**\n   * list of key value pairs that pairs spoken language code to language names\n   */\n  spokenLanguageStrings?: SpokenLanguageStrings;\n  /**\n   * list of key value pairs that pairs caption language code to language names\n   */\n  captionLanguageStrings?: CaptionLanguageStrings;\n  /**\n   * captions banner loading spinner label\n   */\n  captionsBannerSpinnerText?: string;\n  /**\n   * transfer page text when showing the transferor who initiated the transfer\n   */\n  transferPageTransferorText: string;\n  /**\n   * transfer page text when showing the transfer target\n   */\n  transferPageTransferTargetText: string;\n  /**\n   * transfer page display name for unknown participant\n   */\n  transferPageUnknownTransferorDisplayName: string;\n  /**\n   * transfer page display name for unknown participant\n   */\n  transferPageUnknownTransferTargetDisplayName: string;\n  /**\n   * notice to be announced by narrator the transfer page is showing\n   */\n  transferPageNoticeString: string;\n\n  /**\n   * Title text of the page shown to the user when target participant could not be reached\n   */\n  participantCouldNotBeReachedTitle?: string;\n\n  /**\n   * More details text of the page shown to the user when target participant could not be reached\n   */\n  participantCouldNotBeReachedMoreDetails?: string;\n\n  /**\n   * Title text of the page shown to the user when permission to reach participant is not allowed\n   */\n  permissionToReachTargetParticipantNotAllowedTitle?: string;\n\n  /**\n   * More details text of the page shown to the user when permission to reach participant is not allowed\n   */\n  permissionToReachTargetParticipantNotAllowedMoreDetails?: string;\n\n  /**\n   * Title text of the page shown to the user when tenant id for the target participant could not be resolved\n   */\n  unableToResolveTenantTitle?: string;\n\n  /**\n   * More details text of the page shown to the user when tenant id for the target participant could not be resolved\n   */\n  unableToResolveTenantMoreDetails?: string;\n\n  /**\n   * Title text of the page shown to the user when target participant id is malformed\n   */\n  participantIdIsMalformedTitle?: string;\n\n  /**\n   * More details text of the page shown to the user when target participant id is malformed\n   */\n  participantIdIsMalformedMoreDetails?: string;\n  /**\n   * Controls label to move the overflow gallery around\n   */\n  moreButtonGalleryControlLabel?: string;\n  /**\n   * Label for the toggle to move the overflow gallery to the top\n   */\n  moreButtonGalleryPositionToggleLabel?: string;\n  /**\n   * Label for the selection of the speaker layout\n   */\n  moreButtonGallerySpeakerLayoutLabel?: string;\n  /**\n   * Label for the selection of the default (Gallery) layout\n   */\n  moreButtonGalleryDefaultLayoutLabel?: string;\n  /**\n   * Label for the selection of the default (Gallery) layout\n   */\n  moreButtonLargeGalleryDefaultLayoutLabel?: string;\n  /**\n   * Label for the selection of the floatingLocalVideo (Dynamic) layout\n   */\n  moreButtonGalleryFloatingLocalLayoutLabel?: string;\n  /**\n   * Label for the selection of the focusedContentLayout (Focused content) layout\n   */\n  moreButtonGalleryFocusedContentLayoutLabel?: string;\n\n  /**\n   * All strings for capability changed notification\n   */\n  capabilityChangedNotification?: CapabilityChangedNotificationStrings;\n  /**\n   * Title for the survey\n   */\n  surveyTitle: string;\n  /**\n   * Helper text to explain what the survey is for\n   */\n  starSurveyHelperText: string;\n  /**\n   * Helper text displayed below survey question after user select one star\n   */\n  starSurveyOneStarText: string;\n  /**\n   * Helper text displayed below survey question after user select two star\n   */\n  starSurveyTwoStarText: string;\n  /**\n   * Helper text displayed below survey question after user select three star\n   */\n  starSurveyThreeStarText: string;\n  /**\n   * Helper text displayed below survey question after user select four star\n   */\n  starSurveyFourStarText: string;\n  /**\n   * Helper text displayed below survey question after user select five star\n   */\n  starSurveyFiveStarText: string;\n  /**\n   * Aria Label for each individual star rating\n   */\n  starRatingAriaLabel: string;\n  /**\n   * Tags Survey Question\n   */\n  tagsSurveyQuestion: string;\n  /**\n   * Default text for free form text field inside tags survey\n   */\n  tagsSurveyTextFieldDefaultText: string;\n  /**\n   * Tags Survey helper text\n   */\n  tagsSurveyHelperText: string;\n  /**\n   * Confirm button label for survey\n   */\n  surveyConfirmButtonLabel: string;\n  /**\n   * Cancel button label for survey\n   */\n  surveySkipButtonLabel: string;\n  /**\n   * Thank you text appeared on screen after survey is submitted\n   */\n  endOfSurveyText: string;\n  /**\n   * Corresponding texts to each call issue\n   */\n  surveyIssues: SurveyIssues;\n  /**\n   * Corresponding texts to each call category\n   */\n  surveyIssuesHeadingStrings: SurveyIssuesHeadingStrings;\n  /**\n   * String for the dismiss control on the local and remote PIP on mobile\n   */\n  dismissModalAriaLabel?: string;\n  /**\n   * String for title when the call is rejected by the callee\n   */\n  callRejectedTitle?: string;\n  /**\n   * String for more details when the call is rejected by the callee\n   */\n  callRejectedMoreDetails?: string;\n  /**\n   * String for title when the call times out because the remote user does not answer\n   */\n  callTimeoutTitle?: string;\n  /**\n   * String for title when the call times out when calling a bot.\n   */\n  callTimeoutBotTitle?: string;\n  /**\n   * String for more details when the call times out because the remote user does not answer\n   */\n  callTimeoutDetails?: string;\n  /**\n   * String for more details when the call times out when calling a bot\n   */\n  callTimeoutBotDetails?: string;\n  /**\n   * Label for the control bar button to show the dtmf dialer when the more button is disabled\n   */\n  dtmfDialerButtonLabel?: string;\n  /**\n   * Tooltip for the control bar button to show the dtmf dialer when the more button is disabled\n   */\n  dtmfDialerButtonTooltipOn?: string;\n  /**\n   * Tooltip for the control bar button to hide the dtmf dialer when the more button is disabled\n   */\n  dtmfDialerButtonTooltipOff?: string;\n  /**\n   * Label to show the dtmf dialer in the more button menu\n   */\n  dtmfDialerMoreButtonLabelOn?: string;\n  /**\n   * Label to hide the dtmf dialer in the more button menu\n   */\n  dtmfDialerMoreButtonLabelOff?: string;\n  /**\n   * Strings for spotlight prompt\n   */\n  spotlightPrompt: SpotlightPromptStrings;\n  /**\n   * Label for button to exit spotlight\n   */\n  exitSpotlightButtonLabel: string;\n  /**\n   * Tooltip for button to exit spotlight\n   */\n  exitSpotlightButtonTooltip: string;\n  /**\n   * Label for confirm button of hang up for everyone dialog\n   */\n  leaveConfirmButtonLabel?: string;\n  /**\n   * Label for confirm button of leave confim dialog\n   */\n  endCallConfirmButtonLabel?: string;\n  /**\n   * Label for cancel button in hang up confirm dialog\n   */\n  hangUpCancelButtonLabel?: string;\n  /**\n   * Title of confirm dialog when leaving\n   */\n  leaveConfirmDialogTitle?: string;\n  /**\n   * Content of confirm dialog when leaving\n   */\n  leaveConfirmDialogContent?: string;\n  /**\n   * Title of confirm dialog when leaving\n   */\n  endCallConfirmDialogTitle?: string;\n  /**\n   * Content of confirm dialog when leaving\n   */\n  endCallConfirmDialogContent?: string;\n  /**\n   * Error message when the meeting identifier or passcode is invalid\n   */\n  invalidMeetingIdentifier: string;\n  /**\n   * Menu text shown in Participant Item contextual menu for pinning a remote participant's video tile\n   *\n   */\n  pinParticipantMenuLabel: string;\n  /**\n   * Menu text shown in Participant Item contextual menu when pinning limit is reached\n   *\n   */\n  pinParticipantLimitReachedMenuLabel: string;\n  /**\n   * Menu text shown in Participant Item contextual menu for unpinning a remote participant's video tile\n   *\n   */\n  unpinParticipantMenuLabel: string;\n  /**\n   * Aria label for unpin participant menu item of remote participant\n   */\n  unpinParticipantMenuItemAriaLabel: string;\n  /**\n   * Aria label to announce when remote participant is pinned\n   */\n  pinParticipantMenuItemAriaLabel: string;\n  /**\n   * Error message when the meeting identifier or passcode is invalid\n   */\n  phoneCallMoreButtonLabel: string;\n  /* @conditional-compile-remove(soft-mute) */\n  /**\n   * Label for mute all remote participants menu item in People Pane\n   */\n  muteAllMenuLabel: string;\n  /* @conditional-compile-remove(soft-mute) */\n  /**\n   * Label for mute all prompt title\n   */\n  muteAllDialogTitle: string;\n  /* @conditional-compile-remove(soft-mute) */\n  /**\n   * Label for mute all prompt content\n   */\n  muteAllDialogContent: string;\n  /* @conditional-compile-remove(soft-mute) */\n  /**\n   * Label for mute all confirm button\n   */\n  muteAllConfirmButtonLabel: string;\n  /* @conditional-compile-remove(soft-mute) */\n  /**\n   * Label for mute all cancel button\n   */\n  muteAllCancelButtonLabel: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Label for join breakout room button\n   */\n  joinBreakoutRoomButtonLabel: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Label for button to return from breakout room\n   */\n  returnFromBreakoutRoomButtonLabel: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Label for button to leave breakout room and meeting\n   */\n  leaveBreakoutRoomAndMeetingButtonLabel: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Notification title for when a user joins a breakout room\n   */\n  breakoutRoomJoinedNotificationTitle: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Title for banner to join the assigned breakout room. The banner is shown in mobile view instead of the\n   * notification.\n   */\n  joinBreakoutRoomBannerTitle: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Label for button in banner to join breakout room. The banner is shown in mobile view instead of the notification.\n   */\n  joinBreakoutRoomBannerButtonLabel: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Title for banner to return from breakout room. The banner is shown in mobile view instead of the notification.\n   */\n  returnFromBreakoutRoomBannerTitle: string;\n  /* @conditional-compile-remove(breakout-rooms) */\n  /**\n   * Label for button in banner to return from breakout room. The banner is shown in mobile view instead of the\n   * notification.\n   */\n  returnFromBreakoutRoomBannerButtonLabel: string;\n}\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.d.ts

@@ -21,10 +21,9 @@ import { CommunicationTokenCredential, CommunicationUserIdentifier, Communicatio
 import { PhoneNumberIdentifier } from '@azure/communication-common';
 import { AdapterError } from '../../common/adapters';
 import { OnFetchProfileCallback } from './OnFetchProfileCallback';
-import { VideoBackgroundEffectsDependency } from "../../../../../calling-component-bindings/src";
+import { DeepNoiseSuppressionEffectDependency, VideoBackgroundEffectsDependency } from "../../../../../calling-component-bindings/src";
 import { CallSurvey, CallSurveyResponse } from '@azure/communication-calling';
 import { CallingSounds } from './CallAdapter';
-import { DeepNoiseSuppressionEffectDependency } from "../../../../../calling-component-bindings/src";
 type CallTypeOf<AgentType extends CallAgent | TeamsCallAgent> = AgentType extends CallAgent ? Call : TeamsCall;
 /**
  * @private