docs: resolve some docs typos (#22514)

Fixes some typos for `the the` and `takes takes`.

Fixes #22327.

(cherry picked from commit 1678df9)

Author: crisbeto

.circleci/env.sh

@@ -46,7 +46,7 @@ cp "${projectDir}/.circleci/bazel.linux.rc" "$HOME/.bazelrc";
 ####################################################################################################
 ####################################################################################################
 ##                  Source `$BASH_ENV` to make the variables available immediately.               ##
-##                  ***NOTE: This must remain the the last action in this script***               ##
+##                  ***NOTE: This must remain the last action in this script***                   ##
 ####################################################################################################
 ####################################################################################################
 source $BASH_ENV;

guides/theming-your-components.md

@@ -163,10 +163,10 @@ have a config specified.
 @mixin color($theme) {
   // Get the color config from the theme.
   $color-config: mat.get-color-config($theme);
-  
+
   // Get the primary color palette from the color-config.
   $primary-palette: map.get($color-config, 'primary');
-  
+
   .my-carousel-button {
     // Read the 500 hue from the primary color palette.
     color: mat.get-color-from-palette($primary-palette, 500);
@@ -198,7 +198,7 @@ have a config specified.
 ### Step 4: Include the theme mixin in your application
 
 Now that you've defined the carousel component's theme mixin, you can include this mixin along with
-the the other theme mixins in your application.
+the other theme mixins in your application.
 
 ```scss
 @use '~@angular/material' as mat;

guides/typography.md

@@ -63,7 +63,7 @@ table below.
 
 You can define a typography level with the `define-typography-config` Sass function. This function
 accepts, in order, CSS values for `font-size`, `line-height`, `font-weight`, `font-family`, and
-`letter-spacing`. You can also specify the parameters by name, as demonstrated in the example below. 
+`letter-spacing`. You can also specify the parameters by name, as demonstrated in the example below.
 
 ```scss
 @use '~@angular/material' as mat;
@@ -75,7 +75,7 @@ $my-custom-level: mat.define-typography-level(
   $line-height: 1,
   $letter-spacing: normal,
 );
-``` 
+```
 
 ## Typography config
 
@@ -121,7 +121,7 @@ In addition to the `core` mixin, you can specify your typography config when inc
 mixin, as described in the [theming guide][theming-system]. Because the `core` mixin always emits
 typography styles, specifying a typography config to a theme mixin results in duplicate typography
 CSS. You should only provide a typography config when applying your theme if you need to specify
-multiple typography styles that are conditionally applied based on your application's behavior. 
+multiple typography styles that are conditionally applied based on your application's behavior.
 
 The following example shows a typical theme definition and a "kids theme" that only applies when
 the `".kids-theme"` CSS class is present. You can [see the theming guide for more guidance on
@@ -151,15 +151,15 @@ $my-theme: mat.define-light-theme((
     // Specify "Comic Sans" as the default font family for all levels.
     $font-family: 'Comic Sans',
   );
-  
+
   $kids-theme: mat.define-light-theme((
    color: (
      primary: $my-primary,
      accent: $my-accent,
    ),
    typography: $kids-typography,
   ));
-  
+
   @include mat.all-component-themes($kids-theme);
 }
 ```
@@ -185,7 +185,7 @@ $kids-typography: mat.define-typography-config(
 In addition to styles shared between components, the `core` mixin includes CSS classes for styling
 your application. These CSS classes correspond to the typography levels in your typography config.
 This mixin also emits styles for native header elements scoped within the `.mat-typography` CSS
-class. The table below lists the the CSS classes emitted and the native elements styled.
+class. The table below lists the CSS classes emitted and the native elements styled.
 
 | CSS class                           | Level name     | Native elements |
 |-------------------------------------|----------------|-----------------|
@@ -218,14 +218,14 @@ The following example demonstrates usage of the typography styles emitted by the
 <body>
   <!-- This header will *not* be styled because it is outside `.mat-typography` -->
   <h1>Top header</h1>
-    
+
   <!-- This paragraph will be styled as `body-1` via the `.mat-body` CSS class applied -->
   <p class="mat-body">Introductory text</p>
-  
+
   <div class="mat-typography">
     <!-- This header will be styled as `title` because it is inside `.mat-typography` -->
     <h2>Inner header</h2>
-    
+
     <!-- This paragraph will be styled as `body-1` because it is inside `.mat-typography` -->
     <p>Some inner text</p>
   </div>

src/cdk-experimental/menu/menu-bar.spec.ts

@@ -743,7 +743,7 @@ describe('MenuBar', () => {
         grabElementsForTesting();
       }
 
-      /** set focus the the MenuBar and run change detection. */
+      /** set focus the MenuBar and run change detection. */
       function focusMenuBar() {
         dispatchKeyboardEvent(document, 'keydown', TAB);
         nativeMenuBar.focus();

src/cdk-experimental/menu/menu-item-radio.ts

@@ -15,7 +15,7 @@ import {CDK_MENU, Menu} from './menu-interface';
 import {MENU_AIM, MenuAim} from './menu-aim';
 
 /**
- * A directive providing behavior for the the "menuitemradio" ARIA role, which behaves similarly to
+ * A directive providing behavior for the "menuitemradio" ARIA role, which behaves similarly to
  * a conventional radio-button. Any sibling `CdkMenuItemRadio` instances within the same `CdkMenu`
  * or `CdkMenuGroup` comprise a radio group with unique selection enforced.
  */

src/components-examples/material/button-toggle/button-toggle-harness/button-toggle-harness-example.spec.ts

@@ -32,7 +32,7 @@ describe('ButtonToggleHarnessExample', () => {
     expect(groups.length).toBe(1);
   });
 
-  it('should load the the toggles inside the group', async () => {
+  it('should load the toggles inside the group', async () => {
     const group = await loader.getHarness(MatButtonToggleGroupHarness);
     const toggles = await group.getToggles();
     expect(toggles.length).toBe(2);

src/google-maps/map-directions-renderer/README.md

@@ -2,7 +2,7 @@
 
 The `MapDirectionsRenderer` component wraps the [`google.maps.DirectionsRenderer` class](https://developers.google.com/maps/documentation/javascript/reference/directions#DirectionsRenderer) from the Google Maps JavaScript API. This can easily be used with the `MapDirectionsService` that wraps [`google.maps.DirectionsService`](https://developers.google.com/maps/documentation/javascript/reference/directions#DirectionsService) which is designed to be used with Angular by returning an `Observable` response and works inside the Angular Zone.
 
-The `MapDirectionsService`, like the `google.maps.DirectionsService`, has a single method, `route`. Normally, the `google.maps.DirectionsService` takes two arguments, a `google.maps.DirectionsRequest` and a callback that takes the `google.maps.DirectionsResult` and `google.maps.DirectionsStatus` as arguments. The `MapDirectionsService` route method takes takes the `google.maps.DirectionsRequest` as the single argument, and returns an `Observable` of a `MapDirectionsResponse`, which is an interface defined as follows:
+The `MapDirectionsService`, like the `google.maps.DirectionsService`, has a single method, `route`. Normally, the `google.maps.DirectionsService` takes two arguments, a `google.maps.DirectionsRequest` and a callback that takes the `google.maps.DirectionsResult` and `google.maps.DirectionsStatus` as arguments. The `MapDirectionsService` route method takes the `google.maps.DirectionsRequest` as the single argument, and returns an `Observable` of a `MapDirectionsResponse`, which is an interface defined as follows:
 
 ```typescript
 export interface MapDirectionsResponse {

src/google-maps/map-geocoder/README.md

@@ -3,7 +3,7 @@
 The `MapGeocoder`, like the `google.maps.Geocoder`, has a single method, `geocode`. Normally, the
 `google.maps.Geocoder` takes two arguments, a `google.maps.GeocoderRequest` and a callback that
 takes the `google.maps.GeocoderResult` and `google.maps.GeocoderStatus` as arguments.
-The `MapGeocoder.geocode` method takes takes the `google.maps.GeocoderRequest` as the single
+The `MapGeocoder.geocode` method takes the `google.maps.GeocoderRequest` as the single
 argument, and returns an `Observable` of a `MapGeocoderResponse`, which is an interface defined as
 follows:
 

src/material/button-toggle/testing/button-toggle-group-shared.spec.ts

@@ -28,7 +28,7 @@ export function runHarnessTests(
     expect(groups.length).toBe(1);
   });
 
-  it('should load the the toggles inside the group', async () => {
+  it('should load the toggles inside the group', async () => {
     const group = await loader.getHarness(buttonToggleGroupHarness);
     const toggles = await group.getToggles();
     expect(toggles.length).toBe(2);