ci: reformat files

This is after we've slightly changed a rule in #66056

adev/shared-docs/components/navigation-list/navigation-list.component.html

@@ -7,7 +7,7 @@
       @let groupLabel = itemGroup[0];
       @let items = itemGroup[1];
       @if (groupLabel) {
-        <li class="docs-navigation-group">{{groupLabel | titlecase}}</li>
+        <li class="docs-navigation-group">{{ groupLabel | titlecase }}</li>
       }
       @for (item of items; track $index) {
         <li class="docs-faceted-list-item">
@@ -39,7 +39,12 @@
               <a
                 [routerLink]="'/' + item.path"
                 routerLinkActive="docs-faceted-list-item-active"
-                [routerLinkActiveOptions]="{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
+                [routerLinkActiveOptions]="{
+                  paths: 'exact',
+                  queryParams: 'ignored',
+                  matrixParams: 'ignored',
+                  fragment: 'ignored',
+                }"
                 (click)="emitClickOnLink()"
                 [matTooltip]="item.label"
                 [matTooltipDisabled]="itemLabel.length < 27"
@@ -48,7 +53,7 @@
                 [matTooltipClass]="'API-tooltip'"
               >
                 <span class="docs-faceted-list-item-text">
-                  {{item.label}}
+                  {{ item.label }}
                   <ng-container *ngTemplateOutlet="itemStatus; context: {$implicit: item}" />
                 </span>
 
@@ -69,7 +74,7 @@
                 [matTooltipClass]="'API-tooltip'"
               >
                 <span class="docs-faceted-list-item-text">
-                  {{item.label}}
+                  {{ item.label }}
                   <ng-container *ngTemplateOutlet="itemStatus; context: {$implicit: item}" />
                 </span>
               </div>
@@ -77,7 +82,8 @@
 
             <!-- Nav Button Expand/Collapse -->
             @if (
-              (item.children && item.level === expandableLevel()) || item.level === collapsableLevel()
+              (item.children && item.level === expandableLevel()) ||
+              item.level === collapsableLevel()
             ) {
               <button
                 type="button"
@@ -89,7 +95,8 @@
                 [class.docs-expanded-button]="item.children && item.level == collapsableLevel()"
                 [class.docs-not-expanded-button]="item.children && item.level === expandableLevel()"
                 [class.docs-nav-item-has-icon]="
-              item.children && item.level === expandableLevel() && !item.isExpanded"
+                  item.children && item.level === expandableLevel() && !item.isExpanded
+                "
                 [matTooltip]="item.label"
                 [matTooltipDisabled]="itemLabel.length < 27"
                 matTooltipPosition="after"
@@ -107,10 +114,16 @@
             }
           }
           @if (
-            item.level && displayItemsToLevel() > item.level && item.children && item.children.length > 0
+            item.level &&
+            displayItemsToLevel() > item.level &&
+            item.children &&
+            item.children.length > 0
           ) {
             <ng-container
-              *ngTemplateOutlet="navigationList; context: {$implicit: item.children, level: item.level}"
+              *ngTemplateOutlet="
+                navigationList;
+                context: {$implicit: item.children, level: item.level}
+              "
             />
           }
         </li>

adev/shared-docs/components/search-dialog/search-dialog.component.html

@@ -23,7 +23,7 @@
                   <!-- Icon -->
                   <span class="docs-search-result-icon" aria-hidden="true">
                     <i role="presentation" class="material-symbols-outlined docs-icon-small">
-                      {{ result.type === 'code' ? 'code' : 'description'}}
+                      {{ result.type === 'code' ? 'code' : 'description' }}
                     </i>
                   </span>
 

adev/shared-docs/components/tab-group/tab-group.component.html

@@ -9,7 +9,7 @@
       [aria-controls]="tab.tabPanelId"
       (click)="selectedTab.set(tab.tabId)"
     >
-      {{tab.label}}
+      {{ tab.label }}
     </button>
   }
 </div>

adev/shared-docs/components/top-level-banner/top-level-banner.component.html

@@ -4,16 +4,14 @@
     <a [href]="link()" class="docs-top-level-banner">
       <h1 tabindex="-1" class="docs-top-level-banner-cta shimmer">{{ text() }}</h1>
       <h1 tabindex="0" class="docs-top-level-banner-cta background">
-        <span class="docs-top-level-banner-cta__text">{{ text()
-        }}</span>
+        <span class="docs-top-level-banner-cta__text">{{ text() }}</span>
       </h1>
     </a>
   } @else {
     <div class="docs-top-level-banner">
       <h1 tabindex="-1" class="docs-top-level-banner-cta shimmer">{{ text() }}</h1>
       <h1 tabindex="0" class="docs-top-level-banner-cta background">
-        <span class="docs-top-level-banner-cta__text">{{ text()
-        }}</span>
+        <span class="docs-top-level-banner-cta__text">{{ text() }}</span>
       </h1>
     </div>
   }

adev/src/app/core/layout/footer/footer.component.html

@@ -115,6 +115,6 @@
     <a routerLink="/license" title="License text">MIT-style License</a>
     . Documentation licensed under
     <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>
-    . Built by Angular at v{{angularVersion}}.
+    . Built by Angular at v{{ angularVersion }}.
   </p>
 </div>

adev/src/app/features/references/api-items-section/api-items-section.component.html

@@ -7,7 +7,7 @@
       class="adev-api-anchor"
       tabindex="-1"
     >
-      {{group().title}}
+      {{ group().title }}
     </a>
   </h3>
 </header>

adev/src/app/features/references/api-reference-list/api-reference-list.component.html

@@ -10,9 +10,9 @@
   <div class="adev-reference-list-status">
     <mat-chip-listbox multiple="true" aria-label="Status selection">
       <!-- null indicates to not re-order the object keys -->
-      @for (stat of statuses | keyvalue:null; track $index) {
+      @for (stat of statuses | keyvalue: null; track $index) {
         <mat-chip-option [selected]="isStatusSelected(stat.value)" (click)="setStatus(stat.value)">
-          {{statusLabels[stat.value]}}
+          {{ statusLabels[stat.value] }}
         </mat-chip-option>
       }
     </mat-chip-listbox>
@@ -27,7 +27,7 @@
         (click)="setItemType(itemType)"
       >
         <docs-api-item-label [type]="itemType" mode="short" class="docs-api-item-label" />
-        <span class="docs-api-item-label-full">{{ itemType | adevApiLabel : 'full' }}</span>
+        <span class="docs-api-item-label-full">{{ itemType | adevApiLabel: 'full' }}</span>
       </li>
     }
   </ul>

adev/src/app/features/tutorial/tutorial.component.html

@@ -30,7 +30,7 @@
     <div #editor class="docs-tutorial-editor" [class.adev-split-tutorial]="shouldRenderContent()">
       @if (embeddedEditorComponent) {
         <ng-container
-          *ngComponentOutlet="embeddedEditorComponent; inputs:{restrictedMode:restrictedMode()}"
+          *ngComponentOutlet="embeddedEditorComponent; inputs: {restrictedMode: restrictedMode()}"
         />
       }
     </div>

adev/src/app/features/update/update.component.html

@@ -19,7 +19,7 @@
             <ul class="adev-template-dropdown" cdkMenu>
               @for (version of versions; track $index) {
                 <li>
-                  <button cdkMenuItem type="button" (click)="from=version; showUpdatePath()">
+                  <button cdkMenuItem type="button" (click)="from = version; showUpdatePath()">
                     <span>{{ version.name }}</span>
                   </button>
                 </li>
@@ -40,7 +40,7 @@
               <ul class="adev-template-dropdown" cdkMenu>
                 @for (version of versions; track $index) {
                   <li>
-                    <button cdkMenuItem type="button" (click)="to=version; showUpdatePath()">
+                    <button cdkMenuItem type="button" (click)="to = version; showUpdatePath()">
                       <span>{{ version.name }}</span>
                     </button>
                   </li>
@@ -70,7 +70,7 @@
         </div>
       }
 
-      @if ((to.number - from.number > 150) && from.number > 240) {
+      @if (to.number - from.number > 150 && from.number > 240) {
         <div class="docs-alert docs-alert-critical">
           <p>
             <strong>Warning:</strong>
@@ -86,7 +86,7 @@
       <mat-button-toggle-group
         (change)="level = $event.value; showUpdatePath()"
         [value]="level"
-        style="margin-bottom:16px;"
+        style="margin-bottom: 16px"
       >
         <mat-button-toggle [value]="1">Basic</mat-button-toggle>
         <mat-button-toggle [value]="2">Medium</mat-button-toggle>
@@ -106,7 +106,7 @@
           <mat-checkbox
             (change)="options[option.id] = $event.checked; showUpdatePath()"
             [checked]="options[option.id]"
-            >I use {{option.name}} {{option.description}}</mat-checkbox
+            >I use {{ option.name }} {{ option.description }}</mat-checkbox
           >
         </div>
       }
@@ -137,19 +137,21 @@
   <!-- RECOMMENDATIONS SECTION -->
 
   @if (
-    beforeRecommendations.length > 0 || duringRecommendations.length > 0 || afterRecommendations.length > 0
+    beforeRecommendations.length > 0 ||
+    duringRecommendations.length > 0 ||
+    afterRecommendations.length > 0
   ) {
     <div class="recommendations">
-      <h2>{{title()}}</h2>
+      <h2>{{ title() }}</h2>
 
       <h3>Before you update</h3>
-      @for (r  of beforeRecommendations; track $index) {
+      @for (r of beforeRecommendations; track $index) {
         <div class="adev-recommendation-item">
           <mat-checkbox />
           <div class="adev-recommendation-content">
             <div [innerHTML]="r.renderedStep"></div>
             <span class="adev-complexity-badge" [class]="'adev-complexity-' + r.level">
-              {{getComplexityLevelName(r.level)}}
+              {{ getComplexityLevelName(r.level) }}
             </span>
           </div>
         </div>
@@ -173,7 +175,7 @@
           <div class="adev-recommendation-content">
             <div [innerHTML]="r.renderedStep"></div>
             <span class="adev-complexity-badge" [class]="'adev-complexity-' + r.level">
-              {{getComplexityLevelName(r.level)}}
+              {{ getComplexityLevelName(r.level) }}
             </span>
           </div>
         </div>
@@ -191,7 +193,7 @@
           <div class="adev-recommendation-content">
             <div [innerHTML]="r.renderedStep"></div>
             <span class="adev-complexity-badge" [class]="'adev-complexity-' + r.level">
-              {{getComplexityLevelName(r.level)}}
+              {{ getComplexityLevelName(r.level) }}
             </span>
           </div>
         </div>

adev/src/content/examples/animations/src/app/native-css/stagger.component.html

@@ -4,7 +4,7 @@
 @if (show()) {
   <ul class="items">
     @for (item of items; track item) {
-      <li class="item" style="--index: {{ item }}">{{item}}</li>
+      <li class="item" style="--index: {{ item }}">{{ item }}</li>
     }
   </ul>
 }

adev/src/content/examples/aria/accordion/src/disabled-focusable/retro/app/app.html

@@ -2,12 +2,9 @@
   <h3>
     <span ngAccordionTrigger panelId="q1" #trigger1="ngAccordionTrigger">
       Unlock Treasure Box
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined"
-        translate="no"
-        >{{trigger1.expanded() ? 'lock_open_right' : 'lock'}}</span
-      >
+      <span aria-hidden="true" class="material-symbols-outlined" translate="no">{{
+        trigger1.expanded() ? 'lock_open_right' : 'lock'
+      }}</span>
     </span>
   </h3>
   <div ngAccordionPanel panelId="q1">
@@ -19,12 +16,9 @@
   <h3>
     <span ngAccordionTrigger panelId="q2" #trigger2="ngAccordionTrigger" disabled>
       Unlock Treasure Box
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined"
-        translate="no"
-        >{{trigger2.expanded() ? 'lock_open_right' : 'lock'}}</span
-      >
+      <span aria-hidden="true" class="material-symbols-outlined" translate="no">{{
+        trigger2.expanded() ? 'lock_open_right' : 'lock'
+      }}</span>
     </span>
   </h3>
   <div ngAccordionPanel panelId="q2">
@@ -36,12 +30,9 @@
   <h3>
     <span ngAccordionTrigger panelId="q3" #trigger3="ngAccordionTrigger" [expanded]="true">
       Unlock Treasure Box
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined"
-        translate="no"
-        >{{trigger3.expanded() ? 'lock_open_right' : 'lock'}}</span
-      >
+      <span aria-hidden="true" class="material-symbols-outlined" translate="no">{{
+        trigger3.expanded() ? 'lock_open_right' : 'lock'
+      }}</span>
     </span>
   </h3>
   <div ngAccordionPanel panelId="q3">

adev/src/content/examples/aria/accordion/src/multi-expansion/retro/app/app.html

@@ -2,12 +2,9 @@
   <h3>
     <span ngAccordionTrigger panelId="q1" #trigger1="ngAccordionTrigger">
       Unlock Treasure Box
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined"
-        translate="no"
-        >{{trigger1.expanded() ? 'lock_open_right' : 'lock'}}</span
-      >
+      <span aria-hidden="true" class="material-symbols-outlined" translate="no">{{
+        trigger1.expanded() ? 'lock_open_right' : 'lock'
+      }}</span>
     </span>
   </h3>
   <div ngAccordionPanel panelId="q1">
@@ -19,12 +16,9 @@
   <h3>
     <span ngAccordionTrigger panelId="q2" #trigger2="ngAccordionTrigger">
       Unlock Treasure Box
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined"
-        translate="no"
-        >{{trigger2.expanded() ? 'lock_open_right' : 'lock'}}</span
-      >
+      <span aria-hidden="true" class="material-symbols-outlined" translate="no">{{
+        trigger2.expanded() ? 'lock_open_right' : 'lock'
+      }}</span>
     </span>
   </h3>
   <div ngAccordionPanel panelId="q2">
@@ -36,12 +30,9 @@
   <h3>
     <span ngAccordionTrigger panelId="q3" #trigger3="ngAccordionTrigger">
       Unlock Treasure Box
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined"
-        translate="no"
-        >{{trigger3.expanded() ? 'lock_open_right' : 'lock'}}</span
-      >
+      <span aria-hidden="true" class="material-symbols-outlined" translate="no">{{
+        trigger3.expanded() ? 'lock_open_right' : 'lock'
+      }}</span>
     </span>
   </h3>
   <div ngAccordionPanel panelId="q3">

adev/src/content/examples/aria/accordion/src/single-expansion/retro/app/app.html

@@ -2,12 +2,9 @@
   <h3>
     <span ngAccordionTrigger panelId="q1" #trigger1="ngAccordionTrigger">
       Unlock Treasure Box
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined"
-        translate="no"
-        >{{trigger1.expanded() ? 'lock_open_right' : 'lock'}}</span
-      >
+      <span aria-hidden="true" class="material-symbols-outlined" translate="no">{{
+        trigger1.expanded() ? 'lock_open_right' : 'lock'
+      }}</span>
     </span>
   </h3>
   <div ngAccordionPanel panelId="q1">
@@ -19,12 +16,9 @@
   <h3>
     <span ngAccordionTrigger panelId="q2" #trigger2="ngAccordionTrigger">
       Unlock Treasure Box
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined"
-        translate="no"
-        >{{trigger2.expanded() ? 'lock_open_right' : 'lock'}}</span
-      >
+      <span aria-hidden="true" class="material-symbols-outlined" translate="no">{{
+        trigger2.expanded() ? 'lock_open_right' : 'lock'
+      }}</span>
     </span>
   </h3>
   <div ngAccordionPanel panelId="q2">
@@ -36,12 +30,9 @@
   <h3>
     <span ngAccordionTrigger panelId="q3" #trigger3="ngAccordionTrigger">
       Unlock Treasure Box
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined"
-        translate="no"
-        >{{trigger3.expanded() ? 'lock_open_right' : 'lock'}}</span
-      >
+      <span aria-hidden="true" class="material-symbols-outlined" translate="no">{{
+        trigger3.expanded() ? 'lock_open_right' : 'lock'
+      }}</span>
     </span>
   </h3>
   <div ngAccordionPanel panelId="q3">

adev/src/content/examples/aria/autocomplete/src/basic/app/app.html

@@ -24,7 +24,7 @@
         <div ngListbox>
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{country}}</span>
+              <span class="option-label">{{ country }}</span>
               <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
                 >check</span
               >

adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.html

@@ -24,7 +24,7 @@
         <div ngListbox>
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{country}}</span>
+              <span class="option-label">{{ country }}</span>
               <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
                 >check</span
               >

adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.html

@@ -24,7 +24,7 @@
         <div ngListbox>
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{country}}</span>
+              <span class="option-label">{{ country }}</span>
               <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
                 >check</span
               >

adev/src/content/examples/aria/autocomplete/src/highlight/app/app.html

@@ -24,7 +24,7 @@
         <div ngListbox>
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{country}}</span>
+              <span class="option-label">{{ country }}</span>
               <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
                 >check</span
               >

adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.html

@@ -24,7 +24,7 @@
         <div ngListbox>
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{country}}</span>
+              <span class="option-label">{{ country }}</span>
               <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
                 >check</span
               >

adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.html

@@ -24,7 +24,7 @@
         <div ngListbox>
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{country}}</span>
+              <span class="option-label">{{ country }}</span>
               <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
                 >check</span
               >

adev/src/content/examples/aria/autocomplete/src/manual/app/app.html

@@ -24,7 +24,7 @@
         <div ngListbox>
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{country}}</span>
+              <span class="option-label">{{ country }}</span>
               <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
                 >check</span
               >

adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.html

@@ -24,7 +24,7 @@
         <div ngListbox>
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{country}}</span>
+              <span class="option-label">{{ country }}</span>
               <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
                 >check</span
               >

adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.html

@@ -24,7 +24,7 @@
         <div ngListbox>
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country">
-              <span class="option-label">{{country}}</span>
+              <span class="option-label">{{ country }}</span>
               <span class="check-icon material-symbols-outlined" translate="no" aria-hidden="true"
                 >check</span
               >

adev/src/content/examples/aria/combobox/src/dialog/app/app.html

@@ -29,7 +29,7 @@
           <div ngListbox [(values)]="selectedCountries">
             @for (option of options(); track option) {
               <div ngOption [value]="option" [label]="option">
-                <span class="option-label">{{option}}</span>
+                <span class="option-label">{{ option }}</span>
                 <span
                   class="material-symbols-outlined icon check-icon"
                   translate="no"

adev/src/content/examples/aria/combobox/src/dialog/material/app/app.html

@@ -29,7 +29,7 @@
           <div ngListbox [(values)]="selectedCountries">
             @for (option of options(); track option) {
               <div ngOption [value]="option" [label]="option">
-                <span class="option-label">{{option}}</span>
+                <span class="option-label">{{ option }}</span>
                 <span
                   class="material-symbols-outlined icon check-icon"
                   translate="no"

adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.html

@@ -25,7 +25,7 @@
           <div ngListbox [(values)]="selectedCountries">
             @for (option of options(); track option) {
               <div ngOption [value]="option" [label]="option">
-                <span>{{option}}</span>
+                <span>{{ option }}</span>
                 <span
                   class="material-symbols-outlined icon selected-icon"
                   translate="no"

adev/src/content/examples/aria/grid/src/calendar/basic/app/app.html

@@ -5,7 +5,7 @@
         >chevron_left</span
       >
     </button>
-    <h3>{{monthYearLabel()}}</h3>
+    <h3>{{ monthYearLabel() }}</h3>
     <button class="month-control" aria-label="next month" (click)="nextMonth()">
       <span aria-hidden="true" class="material-symbols-outlined" translate="no" aria-hidden="true"
         >chevron_right</span
@@ -26,8 +26,8 @@
       <tr>
         @for (day of weekdays(); track day.long) {
           <th scope="col">
-            <span class="visually-hidden">{{day.long}}</span>
-            <span aria-hidden="true">{{day.narrow}}</span>
+            <span class="visually-hidden">{{ day.long }}</span>
+            <span aria-hidden="true">{{ day.narrow }}</span>
           </th>
         }
       </tr>
@@ -37,21 +37,21 @@
       <tr ngGridRow>
         @if ($first) {
           @for (day of daysFromPrevMonth(); track day) {
-            <td ngGridCell disabled>{{day}}</td>
+            <td ngGridCell disabled>{{ day }}</td>
           }
         }
 
         @for (day of week; track day) {
           <td ngGridCell [(selected)]="day.selected">
             <button ngGridCellWidget [attr.aria-label]="day.ariaLabel" [attr.data-day]="day.day">
-              {{day.displayName}}
+              {{ day.displayName }}
             </button>
           </td>
         }
 
         @if ($last && week.length < 7) {
           @for (day of [].constructor(7 - week.length); track $index) {
-            <td ngGridCell disabled>{{$index + 1}}</td>
+            <td ngGridCell disabled>{{ $index + 1 }}</td>
           }
         }
       </tr>

adev/src/content/examples/aria/grid/src/calendar/material/app/app.html

@@ -5,7 +5,7 @@
         >chevron_left</span
       >
     </button>
-    <h3>{{monthYearLabel()}}</h3>
+    <h3>{{ monthYearLabel() }}</h3>
     <button class="month-control" aria-label="next month" (click)="nextMonth()">
       <span aria-hidden="true" class="material-symbols-outlined" translate="no" aria-hidden="true"
         >chevron_right</span
@@ -26,8 +26,8 @@
       <tr>
         @for (day of weekdays(); track day.long) {
           <th scope="col">
-            <span class="visually-hidden">{{day.long}}</span>
-            <span aria-hidden="true">{{day.narrow}}</span>
+            <span class="visually-hidden">{{ day.long }}</span>
+            <span aria-hidden="true">{{ day.narrow }}</span>
           </th>
         }
       </tr>
@@ -37,21 +37,21 @@
       <tr ngGridRow>
         @if ($first) {
           @for (day of daysFromPrevMonth(); track day) {
-            <td ngGridCell disabled>{{day}}</td>
+            <td ngGridCell disabled>{{ day }}</td>
           }
         }
 
         @for (day of week; track day) {
           <td ngGridCell [(selected)]="day.selected">
             <button ngGridCellWidget [attr.aria-label]="day.ariaLabel" [attr.data-day]="day.day">
-              {{day.displayName}}
+              {{ day.displayName }}
             </button>
           </td>
         }
 
         @if ($last && week.length < 7) {
           @for (day of [].constructor(7 - week.length); track $index) {
-            <td ngGridCell disabled>{{$index + 1}}</td>
+            <td ngGridCell disabled>{{ $index + 1 }}</td>
           }
         }
       </tr>

adev/src/content/examples/aria/grid/src/calendar/retro/app/app.html

@@ -5,7 +5,7 @@
         >chevron_left</span
       >
     </button>
-    <h3>{{monthYearLabel()}}</h3>
+    <h3>{{ monthYearLabel() }}</h3>
     <button class="month-control" aria-label="next month" (click)="nextMonth()">
       <span aria-hidden="true" class="material-symbols-outlined" translate="no" aria-hidden="true"
         >chevron_right</span
@@ -26,8 +26,8 @@
       <tr>
         @for (day of weekdays(); track day.long) {
           <th scope="col">
-            <span class="visually-hidden">{{day.long}}</span>
-            <span aria-hidden="true">{{day.narrow}}</span>
+            <span class="visually-hidden">{{ day.long }}</span>
+            <span aria-hidden="true">{{ day.narrow }}</span>
           </th>
         }
       </tr>
@@ -37,21 +37,21 @@
       <tr ngGridRow>
         @if ($first) {
           @for (day of daysFromPrevMonth(); track day) {
-            <td ngGridCell disabled>{{day}}</td>
+            <td ngGridCell disabled>{{ day }}</td>
           }
         }
 
         @for (day of week; track day) {
           <td ngGridCell [(selected)]="day.selected">
             <button ngGridCellWidget [attr.aria-label]="day.ariaLabel" [attr.data-day]="day.day">
-              {{day.displayName}}
+              {{ day.displayName }}
             </button>
           </td>
         }
 
         @if ($last && week.length < 7) {
           @for (day of [].constructor(7 - week.length); track $index) {
-            <td ngGridCell disabled>{{$index + 1}}</td>
+            <td ngGridCell disabled>{{ $index + 1 }}</td>
           }
         }
       </tr>

adev/src/content/examples/aria/grid/src/pill-list/basic/app/app.html

@@ -1,7 +1,7 @@
 <div ngGrid colWrap="continuous" class="basic-pill-list">
   @for (tag of tags(); track $index) {
     <div ngGridRow>
-      <span ngGridCell>#{{tag}}</span>
+      <span ngGridCell>#{{ tag }}</span>
       <span ngGridCell>
         <button
           ngGridCellWidget

adev/src/content/examples/aria/grid/src/pill-list/material/app/app.html

@@ -1,7 +1,7 @@
 <div ngGrid colWrap="continuous" class="material-pill-list">
   @for (tag of tags(); track $index) {
     <div ngGridRow>
-      <span ngGridCell>{{tag}}</span>
+      <span ngGridCell>{{ tag }}</span>
       <span ngGridCell>
         <button
           ngGridCellWidget

adev/src/content/examples/aria/grid/src/pill-list/retro/app/app.html

@@ -1,7 +1,7 @@
 <div ngGrid colWrap="continuous" class="retro-pill-list">
   @for (tag of tags(); track $index) {
     <div ngGridRow>
-      <span ngGridCell>#{{tag}}</span>
+      <span ngGridCell>#{{ tag }}</span>
       <span ngGridCell>
         <button
           ngGridCellWidget

adev/src/content/examples/aria/grid/src/table/basic/app/app.html

@@ -25,7 +25,7 @@
             translate="no"
             aria-hidden="true"
           >
-            {{sortAscending ? 'arrow_upward' : 'arrow_downward'}}
+            {{ sortAscending ? 'arrow_upward' : 'arrow_downward' }}
           </span>
         </button>
       </th>
@@ -40,14 +40,14 @@
         <td ngGridCell>
           <input
             ngGridCellWidget
-            aria-label="Select row {{$index + 1}}"
+            aria-label="Select row {{ $index + 1 }}"
             type="checkbox"
             [(ngModel)]="task.selected"
           />
         </td>
-        <td ngGridCell>{{task.taskId}}</td>
-        <td ngGridCell>{{task.summary}}</td>
-        <td ngGridCell>{{task.priority}}</td>
+        <td ngGridCell>{{ task.taskId }}</td>
+        <td ngGridCell>{{ task.summary }}</td>
+        <td ngGridCell>{{ task.priority }}</td>
         <td ngGridCell class="assignee-cell">
           <div
             type="button"
@@ -58,7 +58,7 @@
             (onDeactivate)="completeEdit($event, task)"
             #widget="ngGridCellWidget"
           >
-            <span [class.hidden]="widget.isActivated()">{{task.assignee}}</span>
+            <span [class.hidden]="widget.isActivated()">{{ task.assignee }}</span>
             <input
               [class.hidden]="!widget.isActivated()"
               class="assignee-edit-input"

adev/src/content/examples/aria/grid/src/table/retro/app/app.html

@@ -25,7 +25,7 @@
             translate="no"
             aria-hidden="true"
           >
-            {{sortAscending ? 'arrow_upward' : 'arrow_downward'}}
+            {{ sortAscending ? 'arrow_upward' : 'arrow_downward' }}
           </span>
         </button>
       </th>
@@ -40,14 +40,14 @@
         <td ngGridCell>
           <input
             ngGridCellWidget
-            aria-label="Select row {{$index + 1}}"
+            aria-label="Select row {{ $index + 1 }}"
             type="checkbox"
             [(ngModel)]="task.selected"
           />
         </td>
-        <td ngGridCell>${{task.reward}}</td>
-        <td ngGridCell>{{task.target}}</td>
-        <td ngGridCell>{{task.rank}}</td>
+        <td ngGridCell>${{ task.reward }}</td>
+        <td ngGridCell>{{ task.target }}</td>
+        <td ngGridCell>{{ task.rank }}</td>
         <td ngGridCell class="assignee-cell">
           <div
             type="button"
@@ -58,7 +58,7 @@
             (onDeactivate)="completeEdit($event, task)"
             #widget="ngGridCellWidget"
           >
-            <span [class.hidden]="widget.isActivated()">{{task.hunter}}</span>
+            <span [class.hidden]="widget.isActivated()">{{ task.hunter }}</span>
             <input
               [class.hidden]="!widget.isActivated()"
               class="assignee-edit-input"

adev/src/content/examples/aria/menu/src/menu-standalone/app/app.html

@@ -30,7 +30,9 @@
       <ng-template
         [cdkConnectedOverlayOpen]="hasInteracted()"
         [cdkConnectedOverlay]="{origin: resetItem, usePopover: 'inline'}"
-        [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+        [cdkConnectedOverlayPositions]="[
+          {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+        ]"
         cdkAttachPopoverAsChild
       >
         <div ngMenu #updateMenu="ngMenu">

adev/src/content/examples/aria/menu/src/menu-standalone/material/app/app.html

@@ -35,7 +35,9 @@
       <ng-template
         [cdkConnectedOverlayOpen]="hasInteracted()"
         [cdkConnectedOverlay]="{origin: resetItem, usePopover: 'inline'}"
-        [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+        [cdkConnectedOverlayPositions]="[
+          {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+        ]"
         cdkAttachPopoverAsChild
       >
         <div ngMenu #updateMenu="ngMenu">

adev/src/content/examples/aria/menu/src/menu-standalone/retro/app/app.html

@@ -35,7 +35,9 @@
       <ng-template
         [cdkConnectedOverlayOpen]="hasInteracted()"
         [cdkConnectedOverlay]="{origin: resetItem, usePopover: 'inline'}"
-        [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+        [cdkConnectedOverlayPositions]="[
+          {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+        ]"
         cdkAttachPopoverAsChild
       >
         <div ngMenu #updateMenu="ngMenu">

adev/src/content/examples/aria/menu/src/menu-trigger-disabled/app/app.html

@@ -3,7 +3,9 @@
 <ng-template
   [cdkConnectedOverlayOpen]="trigger.expanded()"
   [cdkConnectedOverlay]="{origin, usePopover: 'inline'}"
-  [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+  [cdkConnectedOverlayPositions]="[
+    {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+  ]"
   cdkAttachPopoverAsChild
 >
   <div ngMenu class="menu" #formatMenu="ngMenu">
@@ -42,7 +44,9 @@
       <ng-template
         [cdkConnectedOverlayOpen]="formatMenu.visible()"
         [cdkConnectedOverlay]="{origin: categorizeItem, usePopover: 'inline'}"
-        [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+        [cdkConnectedOverlayPositions]="[
+          {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+        ]"
         cdkAttachPopoverAsChild
       >
         <div ngMenu class="menu" #categorizeMenu="ngMenu">

adev/src/content/examples/aria/menu/src/menu-trigger-disabled/material/app/app.html

@@ -3,7 +3,9 @@
 <ng-template
   [cdkConnectedOverlayOpen]="trigger.expanded()"
   [cdkConnectedOverlay]="{origin, usePopover: 'inline'}"
-  [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+  [cdkConnectedOverlayPositions]="[
+    {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+  ]"
   cdkAttachPopoverAsChild
 >
   <div ngMenu class="menu" #formatMenu="ngMenu">
@@ -52,7 +54,9 @@
       <ng-template
         [cdkConnectedOverlayOpen]="formatMenu.visible()"
         [cdkConnectedOverlay]="{origin: categorizeItem, usePopover: 'inline'}"
-        [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+        [cdkConnectedOverlayPositions]="[
+          {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+        ]"
         cdkAttachPopoverAsChild
       >
         <div ngMenu class="menu" #categorizeMenu="ngMenu">

adev/src/content/examples/aria/menu/src/menu-trigger-disabled/retro/app/app.html

@@ -5,7 +5,9 @@
 <ng-template
   [cdkConnectedOverlayOpen]="trigger.expanded()"
   [cdkConnectedOverlay]="{origin, usePopover: 'inline'}"
-  [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+  [cdkConnectedOverlayPositions]="[
+    {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+  ]"
   cdkAttachPopoverAsChild
 >
   <div ngMenu class="menu" #formatMenu="ngMenu">
@@ -43,7 +45,9 @@
       <ng-template
         [cdkConnectedOverlayOpen]="formatMenu.visible()"
         [cdkConnectedOverlay]="{origin: categorizeItem, usePopover: 'inline'}"
-        [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+        [cdkConnectedOverlayPositions]="[
+          {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+        ]"
         cdkAttachPopoverAsChild
       >
         <div ngMenu class="menu" #categorizeMenu="ngMenu">

adev/src/content/examples/aria/menu/src/menu-trigger/app/app.html

@@ -3,7 +3,9 @@
 <ng-template
   [cdkConnectedOverlayOpen]="trigger.expanded()"
   [cdkConnectedOverlay]="{origin, usePopover: 'inline'}"
-  [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+  [cdkConnectedOverlayPositions]="[
+    {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+  ]"
   cdkAttachPopoverAsChild
 >
   <div ngMenu class="menu" #formatMenu="ngMenu">
@@ -41,7 +43,9 @@
       <ng-template
         [cdkConnectedOverlayOpen]="formatMenu.visible()"
         [cdkConnectedOverlay]="{origin: categorizeItem, usePopover: 'inline'}"
-        [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+        [cdkConnectedOverlayPositions]="[
+          {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+        ]"
         cdkAttachPopoverAsChild
       >
         <div ngMenu class="menu" #categorizeMenu="ngMenu">

adev/src/content/examples/aria/menu/src/menu-trigger/material/app/app.html

@@ -3,7 +3,9 @@
 <ng-template
   [cdkConnectedOverlayOpen]="trigger.expanded()"
   [cdkConnectedOverlay]="{origin, usePopover: 'inline'}"
-  [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+  [cdkConnectedOverlayPositions]="[
+    {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+  ]"
   cdkAttachPopoverAsChild
 >
   <div ngMenu class="menu" #formatMenu="ngMenu">
@@ -52,7 +54,9 @@
       <ng-template
         [cdkConnectedOverlayOpen]="formatMenu.visible()"
         [cdkConnectedOverlay]="{origin: categorizeItem, usePopover: 'inline'}"
-        [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+        [cdkConnectedOverlayPositions]="[
+          {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+        ]"
         cdkAttachPopoverAsChild
       >
         <div ngMenu class="menu" #categorizeMenu="ngMenu">

adev/src/content/examples/aria/menu/src/menu-trigger/retro/app/app.html

@@ -5,7 +5,9 @@
 <ng-template
   [cdkConnectedOverlayOpen]="trigger.expanded()"
   [cdkConnectedOverlay]="{origin, usePopover: 'inline'}"
-  [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+  [cdkConnectedOverlayPositions]="[
+    {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+  ]"
   cdkAttachPopoverAsChild
 >
   <div ngMenu class="menu" #formatMenu="ngMenu">
@@ -43,7 +45,9 @@
       <ng-template
         [cdkConnectedOverlayOpen]="formatMenu.visible()"
         [cdkConnectedOverlay]="{origin: categorizeItem, usePopover: 'inline'}"
-        [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+        [cdkConnectedOverlayPositions]="[
+          {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+        ]"
         cdkAttachPopoverAsChild
       >
         <div ngMenu class="menu" #categorizeMenu="ngMenu">

adev/src/content/examples/aria/menubar/src/basic/app/app.html

@@ -13,7 +13,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -56,7 +58,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!fileItem.expanded()"
           [cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -123,7 +127,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -193,7 +199,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -247,7 +255,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -265,7 +275,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -314,7 +326,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -374,7 +388,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -392,7 +408,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -441,7 +459,9 @@
               <ng-template
                 [cdkConnectedOverlayOpen]="!!textItem.expanded()"
                 [cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}"
-                [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+                [cdkConnectedOverlayPositions]="[
+                  {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+                ]"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -475,7 +495,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -500,7 +522,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">

adev/src/content/examples/aria/menubar/src/basic/material/app/app.html

@@ -13,7 +13,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -56,7 +58,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!fileItem.expanded()"
           [cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -123,7 +127,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -193,7 +199,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -247,7 +255,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -265,7 +275,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -314,7 +326,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -374,7 +388,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -392,7 +408,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -441,7 +459,9 @@
               <ng-template
                 [cdkConnectedOverlayOpen]="!!textItem.expanded()"
                 [cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}"
-                [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+                [cdkConnectedOverlayPositions]="[
+                  {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+                ]"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -475,7 +495,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -500,7 +522,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">

adev/src/content/examples/aria/menubar/src/basic/retro/app/app.html

@@ -13,7 +13,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -56,7 +58,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!fileItem.expanded()"
           [cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -123,7 +127,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -193,7 +199,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -247,7 +255,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -265,7 +275,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -314,7 +326,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -374,7 +388,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -392,7 +408,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -441,7 +459,9 @@
               <ng-template
                 [cdkConnectedOverlayOpen]="!!textItem.expanded()"
                 [cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}"
-                [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+                [cdkConnectedOverlayPositions]="[
+                  {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+                ]"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -475,7 +495,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -500,7 +522,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">

adev/src/content/examples/aria/menubar/src/disabled/app/app.html

@@ -13,7 +13,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -56,7 +58,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!fileItem.expanded()"
           [cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -123,7 +127,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -193,7 +199,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -247,7 +255,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -265,7 +275,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -314,7 +326,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -374,7 +388,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -392,7 +408,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -441,7 +459,9 @@
               <ng-template
                 [cdkConnectedOverlayOpen]="!!textItem.expanded()"
                 [cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}"
-                [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+                [cdkConnectedOverlayPositions]="[
+                  {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+                ]"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -475,7 +495,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -500,7 +522,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">

adev/src/content/examples/aria/menubar/src/disabled/material/app/app.html

@@ -13,7 +13,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -56,7 +58,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!fileItem.expanded()"
           [cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -123,7 +127,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -193,7 +199,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -247,7 +255,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -265,7 +275,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -314,7 +326,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -374,7 +388,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -392,7 +408,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -441,7 +459,9 @@
               <ng-template
                 [cdkConnectedOverlayOpen]="!!textItem.expanded()"
                 [cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}"
-                [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+                [cdkConnectedOverlayPositions]="[
+                  {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+                ]"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -475,7 +495,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -500,7 +522,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">

adev/src/content/examples/aria/menubar/src/disabled/retro/app/app.html

@@ -13,7 +13,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -56,7 +58,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!fileItem.expanded()"
           [cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -123,7 +127,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -193,7 +199,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -247,7 +255,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -265,7 +275,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -314,7 +326,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -374,7 +388,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -392,7 +408,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -441,7 +459,9 @@
               <ng-template
                 [cdkConnectedOverlayOpen]="!!textItem.expanded()"
                 [cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}"
-                [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+                [cdkConnectedOverlayPositions]="[
+                  {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+                ]"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -475,7 +495,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -500,7 +522,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">

adev/src/content/examples/aria/menubar/src/rtl/app/app.html

@@ -13,7 +13,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -56,7 +58,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!fileItem.expanded()"
           [cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -123,7 +127,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -193,7 +199,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -247,7 +255,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -265,7 +275,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -314,7 +326,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -374,7 +388,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -392,7 +408,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -441,7 +459,9 @@
               <ng-template
                 [cdkConnectedOverlayOpen]="!!textItem.expanded()"
                 [cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}"
-                [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+                [cdkConnectedOverlayPositions]="[
+                  {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
+                ]"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -475,7 +495,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -500,7 +522,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">

adev/src/content/examples/aria/menubar/src/rtl/material/app/app.html

@@ -13,7 +13,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -56,7 +58,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!fileItem.expanded()"
           [cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -123,7 +127,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -193,7 +199,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -247,7 +255,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -265,7 +275,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -314,7 +326,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -374,7 +388,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -392,7 +408,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -441,7 +459,9 @@
               <ng-template
                 [cdkConnectedOverlayOpen]="!!textItem.expanded()"
                 [cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}"
-                [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+                [cdkConnectedOverlayPositions]="[
+                  {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
+                ]"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -475,7 +495,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -500,7 +522,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -6},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">

adev/src/content/examples/aria/menubar/src/rtl/retro/app/app.html

@@ -13,7 +13,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: fileEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #fileMenu="ngMenu">
@@ -56,7 +58,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!fileItem.expanded()"
           [cdkConnectedOverlay]="{origin: shareEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #shareMenu="ngMenu">
@@ -123,7 +127,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: editEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #editMenu="ngMenu">
@@ -193,7 +199,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: viewEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #viewMenu="ngMenu">
@@ -247,7 +255,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: insertEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #insertMenu="ngMenu">
@@ -265,7 +275,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: imageEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #imageMenu="ngMenu">
@@ -314,7 +326,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!insertItem.expanded()"
           [cdkConnectedOverlay]="{origin: chartEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #chartMenu="ngMenu">
@@ -374,7 +388,9 @@
   <ng-template
     [cdkConnectedOverlayOpen]="rendered()"
     [cdkConnectedOverlay]="{origin: formatEl, usePopover: 'inline'}"
-    [cdkConnectedOverlayPositions]="[{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}]"
+    [cdkConnectedOverlayPositions]="[
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4},
+    ]"
     cdkAttachPopoverAsChild
   >
     <div ngMenu #formatMenu="ngMenu">
@@ -392,7 +408,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: textEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #textMenu="ngMenu">
@@ -441,7 +459,15 @@
               <ng-template
                 [cdkConnectedOverlayOpen]="!!textItem.expanded()"
                 [cdkConnectedOverlay]="{origin: sizeEl, usePopover: 'inline'}"
-                [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12}]"
+                [cdkConnectedOverlayPositions]="[
+                  {
+                    originX: 'end',
+                    originY: 'top',
+                    overlayY: 'top',
+                    overlayX: 'start',
+                    offsetX: -12,
+                  },
+                ]"
                 cdkAttachPopoverAsChild
               >
                 <div ngMenu #sizeMenu="ngMenu">
@@ -475,7 +501,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: paragraphEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #paragraphMenu="ngMenu">
@@ -500,7 +528,9 @@
         <ng-template
           [cdkConnectedOverlayOpen]="!!formatItem.expanded()"
           [cdkConnectedOverlay]="{origin: alignEl, usePopover: 'inline'}"
-          [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12}]"
+          [cdkConnectedOverlayPositions]="[
+            {originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: -12},
+          ]"
           cdkAttachPopoverAsChild
         >
           <div ngMenu #alignMenu="ngMenu">

adev/src/content/examples/aria/multiselect/src/basic/app/app.html

@@ -18,7 +18,7 @@
         <div ngListbox multi>
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{label}}</span>
+              <span class="example-option-text">{{ label }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/multiselect/src/basic/material/app/app.html

@@ -18,7 +18,7 @@
         <div ngListbox multi>
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{label}}</span>
+              <span class="example-option-text">{{ label }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.html

@@ -18,7 +18,7 @@
         <div ngListbox multi>
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{label}}</span>
+              <span class="example-option-text">{{ label }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/multiselect/src/icons/app/app.html

@@ -28,9 +28,9 @@
                 class="example-option-icon material-symbols-outlined"
                 translate="no"
                 aria-hidden="true"
-                >{{label.icon}}</span
+                >{{ label.icon }}</span
               >
-              <span class="example-option-text">{{label.value}}</span>
+              <span class="example-option-text">{{ label.value }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/multiselect/src/icons/material/app/app.html

@@ -28,9 +28,9 @@
                 class="example-option-icon material-symbols-outlined"
                 translate="no"
                 aria-hidden="true"
-                >{{label.icon}}</span
+                >{{ label.icon }}</span
               >
-              <span class="example-option-text">{{label.value}}</span>
+              <span class="example-option-text">{{ label.value }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.html

@@ -28,9 +28,9 @@
                 class="example-option-icon material-symbols-outlined"
                 translate="no"
                 aria-hidden="true"
-                >{{label.icon}}</span
+                >{{ label.icon }}</span
               >
-              <span class="example-option-text">{{label.value}}</span>
+              <span class="example-option-text">{{ label.value }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/multiselect/src/limited/app/app.html

@@ -18,7 +18,7 @@
         <div ngListbox multi>
           @for (label of labels; track label.value) {
             <div ngOption [value]="label.value" [label]="label.value" [disabled]="label.disabled()">
-              <span class="example-option-text">{{label.value}}</span>
+              <span class="example-option-text">{{ label.value }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/multiselect/src/limited/material/app/app.html

@@ -18,7 +18,7 @@
         <div ngListbox multi>
           @for (label of labels; track label.value) {
             <div ngOption [value]="label.value" [label]="label.value" [disabled]="label.disabled()">
-              <span class="example-option-text">{{label.value}}</span>
+              <span class="example-option-text">{{ label.value }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.html

@@ -18,7 +18,7 @@
         <div ngListbox multi>
           @for (label of labels; track label.value) {
             <div ngOption [value]="label.value" [label]="label.value" [disabled]="label.disabled()">
-              <span class="example-option-text">{{label.value}}</span>
+              <span class="example-option-text">{{ label.value }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/select/src/basic/app/app.html

@@ -18,7 +18,7 @@
         <div ngListbox>
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{label}}</span>
+              <span class="example-option-text">{{ label }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/select/src/basic/material/app/app.html

@@ -18,7 +18,7 @@
         <div ngListbox>
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{label}}</span>
+              <span class="example-option-text">{{ label }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/select/src/basic/retro/app/app.html

@@ -18,7 +18,7 @@
         <div ngListbox>
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{label}}</span>
+              <span class="example-option-text">{{ label }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/select/src/disabled/app/app.html

@@ -18,7 +18,7 @@
         <div ngListbox>
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{label}}</span>
+              <span class="example-option-text">{{ label }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/select/src/disabled/material/app/app.html

@@ -18,7 +18,7 @@
         <div ngListbox>
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{label}}</span>
+              <span class="example-option-text">{{ label }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/select/src/disabled/retro/app/app.html

@@ -18,7 +18,7 @@
         <div ngListbox>
           @for (label of labels; track label) {
             <div ngOption [value]="label" [label]="label">
-              <span class="example-option-text">{{label}}</span>
+              <span class="example-option-text">{{ label }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/select/src/icons/app/app.html

@@ -28,9 +28,9 @@
                 class="example-option-icon material-symbols-outlined"
                 translate="no"
                 aria-hidden="true"
-                >{{label.icon}}</span
+                >{{ label.icon }}</span
               >
-              <span class="example-option-text">{{label.value}}</span>
+              <span class="example-option-text">{{ label.value }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/select/src/icons/material/app/app.html

@@ -28,9 +28,9 @@
                 class="example-option-icon material-symbols-outlined"
                 translate="no"
                 aria-hidden="true"
-                >{{label.icon}}</span
+                >{{ label.icon }}</span
               >
-              <span class="example-option-text">{{label.value}}</span>
+              <span class="example-option-text">{{ label.value }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/select/src/icons/retro/app/app.html

@@ -28,9 +28,9 @@
                 class="example-option-icon material-symbols-outlined"
                 translate="no"
                 aria-hidden="true"
-                >{{label.icon}}</span
+                >{{ label.icon }}</span
               >
-              <span class="example-option-text">{{label.value}}</span>
+              <span class="example-option-text">{{ label.value }}</span>
               <span
                 class="example-option-check material-symbols-outlined"
                 translate="no"

adev/src/content/examples/aria/tree/src/disabled-focusable/basic/app/app.html

@@ -16,18 +16,12 @@
       [(expanded)]="node.expanded"
       #treeItem="ngTreeItem"
     >
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined expand-icon"
-        translate="no"
-        >{{node.children ? 'chevron_right' : ''}}</span
-      >
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined"
-        translate="no"
-        >{{node.children ? 'folder' : 'docs'}}</span
-      >
+      <span aria-hidden="true" class="material-symbols-outlined expand-icon" translate="no">{{
+        node.children ? 'chevron_right' : ''
+      }}</span>
+      <span aria-hidden="true" class="material-symbols-outlined" translate="no">{{
+        node.children ? 'folder' : 'docs'
+      }}</span>
       {{ node.name }}
       <span
         aria-hidden="true"

adev/src/content/examples/aria/tree/src/disabled-focusable/retro/app/app.html

@@ -32,7 +32,7 @@
   </div>
 
   <div class="status-bar">
-    <div class="status-panel status-panel-grow">{{selectedCount()}} object(s) selected</div>
+    <div class="status-panel status-panel-grow">{{ selectedCount() }} object(s) selected</div>
     <div class="status-panel status-panel-right">4.5MB</div>
   </div>
 </div>
@@ -50,7 +50,7 @@
     >
       <span aria-hidden="true">
         @if (node.children) {
-          {{treeItem.expanded() ? '📂' : '📁'}}
+          {{ treeItem.expanded() ? '📂' : '📁' }}
         } @else {
           📄
         }

adev/src/content/examples/aria/tree/src/multi-select/basic/app/app.html

@@ -16,18 +16,12 @@
       [(expanded)]="node.expanded"
       #treeItem="ngTreeItem"
     >
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined expand-icon"
-        translate="no"
-        >{{node.children ? 'chevron_right' : ''}}</span
-      >
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined"
-        translate="no"
-        >{{node.children ? 'folder' : 'docs'}}</span
-      >
+      <span aria-hidden="true" class="material-symbols-outlined expand-icon" translate="no">{{
+        node.children ? 'chevron_right' : ''
+      }}</span>
+      <span aria-hidden="true" class="material-symbols-outlined" translate="no">{{
+        node.children ? 'folder' : 'docs'
+      }}</span>
       {{ node.name }}
       <span
         aria-hidden="true"

adev/src/content/examples/aria/tree/src/multi-select/retro/app/app.html

@@ -32,7 +32,7 @@
   </div>
 
   <div class="status-bar">
-    <div class="status-panel status-panel-grow">{{selectedCount()}} object(s) selected</div>
+    <div class="status-panel status-panel-grow">{{ selectedCount() }} object(s) selected</div>
     <div class="status-panel status-panel-right">4.5MB</div>
   </div>
 </div>
@@ -50,7 +50,7 @@
     >
       <span aria-hidden="true">
         @if (node.children) {
-          {{treeItem.expanded() ? '📂' : '📁'}}
+          {{ treeItem.expanded() ? '📂' : '📁' }}
         } @else {
           📄
         }

adev/src/content/examples/aria/tree/src/nav/basic/app/app.html

@@ -24,15 +24,12 @@
         class="material-symbols-outlined"
         translate="no"
         aria-hidden="true"
-        >{{node.icon}}</span
+        >{{ node.icon }}</span
       >
       {{ node.name }}
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined expand-icon"
-        translate="no"
-        >{{node.children ? 'keyboard_arrow_up' : ''}}</span
-      >
+      <span aria-hidden="true" class="material-symbols-outlined expand-icon" translate="no">{{
+        node.children ? 'keyboard_arrow_up' : ''
+      }}</span>
     </a>
 
     @if (node.children) {

adev/src/content/examples/aria/tree/src/single-select-follow-focus/basic/app/app.html

@@ -16,18 +16,12 @@
       [(expanded)]="node.expanded"
       #treeItem="ngTreeItem"
     >
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined expand-icon"
-        translate="no"
-        >{{node.children ? 'chevron_right' : ''}}</span
-      >
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined"
-        translate="no"
-        >{{node.children ? 'folder' : 'docs'}}</span
-      >
+      <span aria-hidden="true" class="material-symbols-outlined expand-icon" translate="no">{{
+        node.children ? 'chevron_right' : ''
+      }}</span>
+      <span aria-hidden="true" class="material-symbols-outlined" translate="no">{{
+        node.children ? 'folder' : 'docs'
+      }}</span>
       {{ node.name }}
       <span
         aria-hidden="true"

adev/src/content/examples/aria/tree/src/single-select-follow-focus/retro/app/app.html

@@ -32,7 +32,7 @@
   </div>
 
   <div class="status-bar">
-    <div class="status-panel status-panel-grow">{{selectedCount()}} object(s) selected</div>
+    <div class="status-panel status-panel-grow">{{ selectedCount() }} object(s) selected</div>
     <div class="status-panel status-panel-right">4.5MB</div>
   </div>
 </div>
@@ -50,7 +50,7 @@
     >
       <span aria-hidden="true">
         @if (node.children) {
-          {{treeItem.expanded() ? '📂' : '📁'}}
+          {{ treeItem.expanded() ? '📂' : '📁' }}
         } @else {
           📄
         }

adev/src/content/examples/aria/tree/src/single-select/basic/app/app.html

@@ -16,18 +16,12 @@
       [(expanded)]="node.expanded"
       #treeItem="ngTreeItem"
     >
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined expand-icon"
-        translate="no"
-        >{{node.children ? 'chevron_right' : ''}}</span
-      >
-      <span
-        aria-hidden="true"
-        class="material-symbols-outlined"
-        translate="no"
-        >{{node.children ? 'folder' : 'docs'}}</span
-      >
+      <span aria-hidden="true" class="material-symbols-outlined expand-icon" translate="no">{{
+        node.children ? 'chevron_right' : ''
+      }}</span>
+      <span aria-hidden="true" class="material-symbols-outlined" translate="no">{{
+        node.children ? 'folder' : 'docs'
+      }}</span>
       {{ node.name }}
       <span
         aria-hidden="true"

adev/src/content/examples/aria/tree/src/single-select/retro/app/app.html

@@ -32,7 +32,7 @@
   </div>
 
   <div class="status-bar">
-    <div class="status-panel status-panel-grow">{{selectedCount()}} object(s) selected</div>
+    <div class="status-panel status-panel-grow">{{ selectedCount() }} object(s) selected</div>
     <div class="status-panel status-panel-right">4.5MB</div>
   </div>
 </div>
@@ -50,7 +50,7 @@
     >
       <span aria-hidden="true">
         @if (node.children) {
-          {{treeItem.expanded() ? '📂' : '📁'}}
+          {{ treeItem.expanded() ? '📂' : '📁' }}
         } @else {
           📄
         }

adev/src/content/examples/attribute-directives/src/app/app.component.html

@@ -3,9 +3,9 @@
 
 <h2>Pick a highlight color</h2>
 <div>
-  <input type="radio" name="colors" (click)="color='lightgreen'" />Green
-  <input type="radio" name="colors" (click)="color='yellow'" />Yellow
-  <input type="radio" name="colors" (click)="color='cyan'" />Cyan
+  <input type="radio" name="colors" (click)="color = 'lightgreen'" />Green
+  <input type="radio" name="colors" (click)="color = 'yellow'" />Yellow
+  <input type="radio" name="colors" (click)="color = 'cyan'" />Cyan
 </div>
 <!-- #docregion color -->
 <p [appHighlight]="color">Highlight me!</p>
@@ -32,6 +32,6 @@
 <!-- #docregion ngNonBindable-with-directive -->
 <h3>ngNonBindable with a directive</h3>
 <div ngNonBindable [appHighlight]="'yellow'">
-  This should not evaluate: {{ 1 +1 }}, but will highlight yellow.
+  This should not evaluate: {{ 1 + 1 }}, but will highlight yellow.
 </div>
 <!-- #enddocregion ngNonBindable-with-directive -->

adev/src/content/examples/built-in-directives/src/app/app.component.html

@@ -9,7 +9,7 @@
   <p>Current item name: {{ currentItem.name }}</p>
   <p>
     <label for="without">without NgModel:</label>
-    <input [value]="currentItem.name" (input)="currentItem.name=getValue($event)" id="without" />
+    <input [value]="currentItem.name" (input)="currentItem.name = getValue($event)" id="without" />
   </p>
 
   <p>
@@ -23,7 +23,7 @@
     <label for="example-change">(ngModelChange)="...name=$event":</label>
     <input
       [ngModel]="currentItem.name"
-      (ngModelChange)="currentItem.name=$event"
+      (ngModelChange)="currentItem.name = $event"
       id="example-change"
     />
   </p>
@@ -59,7 +59,7 @@
     <input
       type="checkbox"
       [value]="!isUnchanged"
-      (change)="isUnchanged=!isUnchanged"
+      (change)="isUnchanged = !isUnchanged"
       id="modified"
     />
   </li>
@@ -72,9 +72,9 @@
 <button type="button" (click)="setCurrentClasses()">Refresh currentClasses</button>
 
 <div [ngClass]="currentClasses">
-  This div should be {{ canSave ? "": "not"}} saveable,
-  {{ isUnchanged ? "unchanged" : "modified" }} and {{ isSpecial ? "": "not"}} special after clicking
-  "Refresh".
+  This div should be {{ canSave ? '' : 'not' }} saveable,
+  {{ isUnchanged ? 'unchanged' : 'modified' }} and {{ isSpecial ? '' : 'not' }} special after
+  clicking "Refresh".
 </div>
 <br /><br />
 <!-- #docregion special-div -->
@@ -82,7 +82,7 @@
 <div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
 <!-- #enddocregion special-div -->
 <div class="helpful study course">Helpful study course</div>
-<div [ngClass]="{'helpful':false, 'study':true, 'course':true}">Study course</div>
+<div [ngClass]="{'helpful': false, 'study': true, 'course': true}">Study course</div>
 
 <!-- NgStyle binding -->
 <hr />
@@ -110,9 +110,9 @@
 <button type="button" (click)="setCurrentStyles()">Refresh currentStyles</button>
 <br /><br />
 <div [ngStyle]="currentStyles">
-  This div should be {{ canSave ? "italic": "plain"}},
-  {{ isUnchanged ? "normal weight" : "bold" }} and,
-  {{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".
+  This div should be {{ canSave ? 'italic' : 'plain' }},
+  {{ isUnchanged ? 'normal weight' : 'bold' }} and,
+  {{ isSpecial ? 'extra large' : 'normal size' }} after clicking "Refresh".
 </div>
 
 <hr />
@@ -152,7 +152,7 @@
 <app-item-detail [class.hidden]="isSpecial"></app-item-detail>
 
 <div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
-<div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>
+<div [style.display]="isSpecial ? 'none' : 'block'">Hide with style</div>
 
 <hr />
 <h2 id="ngFor">NgFor Binding</h2>
@@ -174,13 +174,13 @@
 <p>with <em>semi-colon</em> separator</p>
 <div class="box">
   <!-- #docregion NgFor-3 -->
-  <div *ngFor="let item of items; let i=index">{{ i + 1 }} - {{ item.name }}</div>
+  <div *ngFor="let item of items; let i = index">{{ i + 1 }} - {{ item.name }}</div>
   <!-- #enddocregion NgFor-3 -->
 </div>
 
 <p>with <em>comma</em> separator</p>
 <div class="box">
-  <div *ngFor="let item of items, let i=index">{{ i + 1 }} - {{ item.name }}</div>
+  <div *ngFor="let item of items; let i = index">{{ i + 1 }} - {{ item.name }}</div>
 </div>
 
 <h4 id="ngFor-trackBy">*ngFor trackBy</h4>
@@ -219,17 +219,17 @@
 
 <p>with trackBy and <em>comma</em> separator</p>
 <div class="box">
-  <div *ngFor="let item of items, trackBy: trackByItems">({{ item.id }}) {{ item.name }}</div>
+  <div *ngFor="let item of items; trackBy: trackByItems">({{ item.id }}) {{ item.name }}</div>
 </div>
 
 <p>with trackBy and <em>space</em> separator</p>
 <div class="box">
-  <div *ngFor="let item of items trackBy: trackByItems">({{ item.id }}) {{ item.name }}</div>
+  <div *ngFor="let item of items; trackBy: trackByItems">({{ item.id }}) {{ item.name }}</div>
 </div>
 
 <p>with <em>generic</em> trackById function</p>
 <div class="box">
-  <div *ngFor="let item of items, trackBy: trackById">({{ item.id }}) {{ item.name }}</div>
+  <div *ngFor="let item of items; trackBy: trackById">({{ item.id }}) {{ item.name }}</div>
 </div>
 
 <hr />
@@ -237,15 +237,11 @@
 
 <p>Pick your favorite item</p>
 <div>
-  <label for="item-{{i}}" *ngFor="let i of items">
+  <label for="item-{{ i }}" *ngFor="let i of items">
     <div>
-      <input
-        id="item-{{i}}"
-        type="radio"
-        name="items"
-        [(ngModel)]="currentItem"
-        [value]="i"
-      />{{ i.name }}
+      <input id="item-{{ i }}" type="radio" name="items" [(ngModel)]="currentItem" [value]="i" />{{
+        i.name
+      }}
     </div>
   </label>
 </div>

adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.html

@@ -9,7 +9,7 @@
       (cdkDropListDropped)="drop($event)"
     >
       @for (item of todo; track item) {
-        <div class="example-box" cdkDrag>{{item}}</div>
+        <div class="example-box" cdkDrag>{{ item }}</div>
       }
     </div>
   </div>
@@ -24,7 +24,7 @@
       (cdkDropListDropped)="drop($event)"
     >
       @for (item of done; track item) {
-        <div class="example-box" cdkDrag>{{item}}</div>
+        <div class="example-box" cdkDrag>{{ item }}</div>
       }
     </div>
   </div>

adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.html

@@ -10,7 +10,7 @@
     (cdkDropListDropped)="drop($event)"
   >
     @for (item of todo; track item) {
-      <div class="example-box" cdkDrag>{{item}}</div>
+      <div class="example-box" cdkDrag>{{ item }}</div>
     }
   </div>
 </div>
@@ -27,7 +27,7 @@
     (cdkDropListDropped)="drop($event)"
   >
     @for (item of done; track item) {
-      <div class="example-box" cdkDrag>{{item}}</div>
+      <div class="example-box" cdkDrag>{{ item }}</div>
     }
   </div>
 </div>

adev/src/content/examples/drag-drop/src/copy-list/app/app.component.html

@@ -10,7 +10,7 @@
     class="example-list"
   >
     @for (product of products; track $index) {
-      <div class="example-box" cdkDrag [cdkDragData]="product">{{product}}</div>
+      <div class="example-box" cdkDrag [cdkDragData]="product">{{ product }}</div>
     }
   </div>
 </div>
@@ -26,7 +26,7 @@
     (cdkDropListDropped)="drop($event)"
   >
     @for (product of cart; track $index) {
-      <div class="example-box" cdkDrag>{{product}}</div>
+      <div class="example-box" cdkDrag>{{ product }}</div>
     }
   </div>
 </div>

adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.html

@@ -2,7 +2,7 @@
   @for (movie of movies; track movie) {
     <div class="example-box" cdkDrag>
       <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
-      {{movie}}
+      {{ movie }}
     </div>
   }
 </div>

adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.html

@@ -1,7 +1,7 @@
 <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
   @for (movie of movies; track movie) {
     <div class="example-box" cdkDrag>
-      {{movie.title}}
+      {{ movie.title }}
       <img *cdkDragPreview [src]="movie.poster" [alt]="movie.title" />
     </div>
   }

adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.html

@@ -1,5 +1,5 @@
 <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
   @for (item of items; track item) {
-    <div class="example-box" cdkDrag [cdkDragDisabled]="item.disabled">{{item.value}}</div>
+    <div class="example-box" cdkDrag [cdkDragDisabled]="item.disabled">{{ item.value }}</div>
   }
 </div>

adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.html

@@ -10,7 +10,7 @@
       (cdkDropListDropped)="drop($event)"
     >
       @for (item of items; track item) {
-        <div class="example-box" cdkDrag>{{item}}</div>
+        <div class="example-box" cdkDrag>{{ item }}</div>
       }
     </div>
   </div>
@@ -25,7 +25,7 @@
       (cdkDropListDropped)="drop($event)"
     >
       @for (item of basket; track item) {
-        <div class="example-box" cdkDrag>{{item}}</div>
+        <div class="example-box" cdkDrag>{{ item }}</div>
       }
     </div>
   </div>

adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.html

@@ -11,7 +11,7 @@
     [cdkDropListEnterPredicate]="noReturnPredicate"
   >
     @for (number of all; track number) {
-      <div class="example-box" [cdkDragData]="number" cdkDrag>{{number}}</div>
+      <div class="example-box" [cdkDragData]="number" cdkDrag>{{ number }}</div>
     }
   </div>
 </div>
@@ -29,7 +29,7 @@
     [cdkDropListEnterPredicate]="evenPredicate"
   >
     @for (number of even; track number) {
-      <div class="example-box" cdkDrag [cdkDragData]="number">{{number}}</div>
+      <div class="example-box" cdkDrag [cdkDragData]="number">{{ number }}</div>
     }
   </div>
 </div>

adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.html

@@ -5,6 +5,6 @@
   (cdkDropListDropped)="drop($event)"
 >
   @for (timePeriod of timePeriods; track timePeriod) {
-    <div class="example-box" cdkDrag>{{timePeriod}}</div>
+    <div class="example-box" cdkDrag>{{ timePeriod }}</div>
   }
 </div>

adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.html

@@ -5,6 +5,6 @@
   (cdkDropListDropped)="drop($event)"
 >
   @for (item of items; track item) {
-    <div class="example-box" cdkDrag>{{item}}</div>
+    <div class="example-box" cdkDrag>{{ item }}</div>
   }
 </div>

adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.html

@@ -5,6 +5,6 @@
   [cdkDropListSortPredicate]="sortPredicate"
 >
   @for (number of numbers; track number) {
-    <div class="example-box" [cdkDragData]="number" cdkDrag>{{number}}</div>
+    <div class="example-box" [cdkDragData]="number" cdkDrag>{{ number }}</div>
   }
 </div>

adev/src/content/examples/drag-drop/src/sorting/app/app.component.html

@@ -1,5 +1,5 @@
 <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
   @for (movie of movies; track movie) {
-    <div class="example-box" cdkDrag>{{movie}}</div>
+    <div class="example-box" cdkDrag>{{ movie }}</div>
   }
 </div>

adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html

@@ -6,7 +6,9 @@
     <div [hidden]="formDir.submitted">
       <div
         class="cross-validation"
-        [class.cross-validation-error]="actorForm.hasError('unambiguousRole') && (actorForm.touched || actorForm.dirty)"
+        [class.cross-validation-error]="
+          actorForm.hasError('unambiguousRole') && (actorForm.touched || actorForm.dirty)
+        "
       >
         <div class="form-group">
           <label for="name">Name</label>

adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html

@@ -7,7 +7,9 @@
     <div [hidden]="actorForm.submitted">
       <div
         class="cross-validation"
-        [class.cross-validation-error]="actorForm.hasError('unambiguousRole') && (actorForm.touched || actorForm.dirty)"
+        [class.cross-validation-error]="
+          actorForm.hasError('unambiguousRole') && (actorForm.touched || actorForm.dirty)
+        "
       >
         <div class="form-group">
           <label for="name">Name</label>
@@ -51,7 +53,7 @@
             name="role"
             #role="ngModel"
             [(ngModel)]="actor.role"
-            [ngModelOptions]="{ updateOn: 'blur' }"
+            [ngModelOptions]="{updateOn: 'blur'}"
             appUniqueRole
           />
           <!-- #enddocregion role-input -->

adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html

@@ -100,7 +100,7 @@
       <div class="col-xs-9">{{ model.skill }}</div>
     </div>
     <br />
-    <button type="button" class="btn btn-primary" (click)="submitted=false">Edit</button>
+    <button type="button" class="btn btn-primary" (click)="submitted = false">Edit</button>
   </div>
   <!-- #enddocregion submitted -->
 </div>
@@ -119,12 +119,12 @@
 <!-- ====================================================  -->
 <hr />
 <style>
-    .no-style .ng-valid {
-    border-left: 1px  solid #CCC
+  .no-style .ng-valid {
+    border-left: 1px solid #ccc;
   }
 
-    .no-style .ng-invalid {
-    border-left: 1px  solid #CCC
+  .no-style .ng-invalid {
+    border-left: 1px solid #ccc;
   }
 </style>
 <div class="no-style" style="margin-left: 4px">
@@ -205,7 +205,7 @@
   <hr />
   <!-- #docregion ngModelName-1 -->
   <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" />
-  TODO: remove this: {{ model.name}}
+  TODO: remove this: {{ model.name }}
   <!-- #enddocregion ngModelName-1 -->
   <hr />
   <input
@@ -217,5 +217,5 @@
     name="name"
     (ngModelChange)="model.name = $event"
   />
-  TODO: remove this: {{ model.name}}
+  TODO: remove this: {{ model.name }}
 </div>

adev/src/content/examples/i18n/src/app/app.component.html

@@ -39,5 +39,5 @@
 <br /><br />
 <!--#docregion i18n-conditional-->
 <button type="button" (click)="toggleDisplay()">Toggle</button>
-<div i18n [attr.aria-label]="toggleAriaLabel()">{{toggle()}}</div>
+<div i18n [attr.aria-label]="toggleAriaLabel()">{{ toggle() }}</div>
 <!--#enddocregion i18n-conditional-->

adev/src/content/examples/pipes/src/app/birthday-formatting.component.html

@@ -1,7 +1,7 @@
-<p>The hero's birthday is {{ birthday | date:"shortDate" }} in the "shortDate" format.</p>
+<p>The hero's birthday is {{ birthday | date: 'shortDate' }} in the "shortDate" format.</p>
 
 <p>
-  The hero's birthday is {{ birthday | date:format }} in "{{ format }}" format. Click the toggle
+  The hero's birthday is {{ birthday | date: format }} in "{{ format }}" format. Click the toggle
   button to change formats.
 </p>
 

adev/src/content/examples/pipes/src/app/birthday-pipe-chaining.component.html

@@ -5,5 +5,5 @@
 
 <p>
   The chained hero's uppercase birthday in "fullDate" format is
-  {{ birthday | date:'fullDate' | uppercase }}
+  {{ birthday | date: 'fullDate' | uppercase }}
 </p>

adev/src/content/examples/pipes/src/app/flying-heroes-impure.component.html

@@ -7,7 +7,7 @@
   type="text"
   id="hero-name"
   #box
-  (keyup.enter)="addHero(box.value); box.value=''"
+  (keyup.enter)="addHero(box.value); box.value = ''"
   placeholder="hero name"
 />
 <div>
@@ -23,7 +23,7 @@
 <h3>Heroes who fly (piped)</h3>
 <div id="flyers">
   <!-- #docregion template-flying-heroes -->
-  @for (hero of (heroes | flyingHeroesImpure); track hero) {
+  @for (hero of heroes | flyingHeroesImpure; track hero) {
     <div>{{ hero.name }}</div>
   }
   <!-- #enddocregion template-flying-heroes -->

adev/src/content/examples/pipes/src/app/flying-heroes.component.html

@@ -8,7 +8,7 @@
   type="text"
   #box
   id="hero-name"
-  (keyup.enter)="addHero(box.value); box.value=''"
+  (keyup.enter)="addHero(box.value); box.value = ''"
   placeholder="hero name"
 />
 <!-- #enddocregion template-1 -->
@@ -27,7 +27,7 @@
 <h3>Heroes who fly (piped)</h3>
 <div id="flyers">
   <!-- #docregion template-flying-heroes -->
-  @for (hero of (heroes | flyingHeroes); track hero) {
+  @for (hero of heroes | flyingHeroes; track hero) {
     <div>{{ hero.name }}</div>
   }
   <!-- #enddocregion template-flying-heroes -->