fix(docs-infra): host binding type issues (angular#60481)

crisbeto · alxhub · commit b26b0abad694 · 2025-03-20T11:55:52.000-07:00
Resolves typing issues inside host binding in adev. PR Close angular#60481
diff --git a/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts b/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts
@@ -79,7 +79,7 @@ export class DocViewer implements OnChanges {
   private readonly injector = inject(Injector);
   private readonly appRef = inject(ApplicationRef);
 
-  private animateContent = false;
+  protected animateContent = false;
   private readonly pendingTasks = inject(PendingTasks);
 
   private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
diff --git a/adev/shared-docs/directives/click-outside/click-outside.directive.ts b/adev/shared-docs/directives/click-outside/click-outside.directive.ts
@@ -22,23 +22,23 @@ export class ClickOutside {
   private readonly document = inject(DOCUMENT);
   private readonly elementRef = inject(ElementRef<HTMLElement>);
 
-  onClick($event: PointerEvent): void {
+  onClick(event: MouseEvent): void {
     if (
-      !this.elementRef.nativeElement.contains($event.target) &&
-      !this.wasClickedOnIgnoredElement($event)
+      !this.elementRef.nativeElement.contains(event.target) &&
+      !this.wasClickedOnIgnoredElement(event)
     ) {
       this.clickOutside.emit();
     }
   }
 
-  private wasClickedOnIgnoredElement($event: PointerEvent): boolean {
+  private wasClickedOnIgnoredElement(event: MouseEvent): boolean {
     if (this.ignoredElementsIds.length === 0) {
       return false;
     }
 
     return this.ignoredElementsIds.some((elementId) => {
       const element = this.document.getElementById(elementId);
-      const target = $event.target as Node;
+      const target = event.target as Node;
       const contains = element?.contains(target);
       return contains;
     });
diff --git a/adev/src/app/editor/embedded-editor.component.html b/adev/src/app/editor/embedded-editor.component.html
@@ -1,6 +1,6 @@
 <div class="adev-editor-container" #editorContainer>
   <as-split class="docs-editor" [direction]="splitDirection" restrictMove="true" gutterSize="5">
-    <as-split-area class="adev-left-side" [size]="50">
+    <as-split-area class="adev-left-side" size="50">
       <!-- Code Editor -->
       @if (!displayOnlyTerminal()) {
       <docs-tutorial-code-editor class="adev-tutorial-code-editor" />
@@ -15,13 +15,13 @@
       }
     </as-split-area>
 
-    <as-split-area [size]="50">
+    <as-split-area size="50">
       <!-- Preview, Terminal & Console -->
       @if (!displayOnlyTerminal()) {
       <as-split class="docs-right-side" direction="vertical" restrictMove="true" gutterSize="5">
         <!-- Preview Section: for larger screens -->
         @if (!displayPreviewInMatTabGroup()) {
-        <as-split-area [size]="50">
+        <as-split-area size="50">
           <!-- Preview Section: for larger screens -->
           <div class="adev-preview-section">
             <div class="adev-preview-header">
@@ -34,7 +34,7 @@
         </as-split-area>
         }
 
-        <as-split-area class="docs-editor-tabs-and-refresh" [size]="50">
+        <as-split-area class="docs-editor-tabs-and-refresh" size="50">
           <!-- Container to hide preview, console and footer when only the interactive terminal is used  -->
           <mat-tab-group class="docs-editor-tabs" animationDuration="0ms" mat-stretch-tabs="false">
             @if (displayPreviewInMatTabGroup()) {
