fix(common): resolve host binding type issues (#60481)

crisbeto · alxhub · commit 785a1110e603 · 2025-03-20T11:55:52.000-07:00
Fixes type issues in the host bindings of `NgOptimizedImage`. PR Close #60481
diff --git a/goldens/public-api/common/index.api.md b/goldens/public-api/common/index.api.md
@@ -605,6 +605,7 @@ export class NgOptimizedImage implements OnInit, OnChanges {
     constructor();
     disableOptimizedSrcset: boolean;
     fill: boolean;
+    protected generatePlaceholder(placeholderInput: string | boolean): string | boolean | null;
     height: number | undefined;
     loaderParams?: {
         [key: string]: any;
@@ -633,6 +634,7 @@ export class NgOptimizedImage implements OnInit, OnChanges {
     placeholder?: string | boolean;
     placeholderConfig?: ImagePlaceholderConfig;
     priority: boolean;
+    protected shouldBlurPlaceholder(placeholderConfig?: ImagePlaceholderConfig): boolean;
     sizes?: string;
     width: number | undefined;
     // (undocumented)
diff --git a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
@@ -111,11 +111,6 @@ const OVERSIZED_IMAGE_TOLERANCE = 1000;
 const FIXED_SRCSET_WIDTH_LIMIT = 1920;
 const FIXED_SRCSET_HEIGHT_LIMIT = 1080;
 
-/**
- * Default blur radius of the CSS filter used on placeholder images, in pixels
- */
-export const PLACEHOLDER_BLUR_AMOUNT = 15;
-
 /**
  * Placeholder dimension (height or width) limit in pixels. Angular produces a warning
  * when this limit is crossed.
@@ -279,7 +274,8 @@ export interface ImagePlaceholderConfig {
     '[style.background-position]': 'placeholder ? "50% 50%" : null',
     '[style.background-repeat]': 'placeholder ? "no-repeat" : null',
     '[style.background-image]': 'placeholder ? generatePlaceholder(placeholder) : null',
-    '[style.filter]': `placeholder && shouldBlurPlaceholder(placeholderConfig) ? "blur(${PLACEHOLDER_BLUR_AMOUNT}px)" : null`,
+    '[style.filter]':
+      'placeholder && shouldBlurPlaceholder(placeholderConfig) ? "blur(15px)" : null',
   },
 })
 export class NgOptimizedImage implements OnInit, OnChanges {
@@ -687,7 +683,7 @@ export class NgOptimizedImage implements OnInit, OnChanges {
    * * A base64 encoded image, which is wrapped and passed through.
    * * A boolean. If true, calls the image loader to generate a small placeholder url.
    */
-  private generatePlaceholder(placeholderInput: string | boolean): string | boolean | null {
+  protected generatePlaceholder(placeholderInput: string | boolean): string | boolean | null {
     const {placeholderResolution} = this.config;
     if (placeholderInput === true) {
       return `url(${this.callImageLoader({
@@ -705,7 +701,7 @@ export class NgOptimizedImage implements OnInit, OnChanges {
    * Determines if blur should be applied, based on an optional boolean
    * property `blur` within the optional configuration object `placeholderConfig`.
    */
-  private shouldBlurPlaceholder(placeholderConfig?: ImagePlaceholderConfig): boolean {
+  protected shouldBlurPlaceholder(placeholderConfig?: ImagePlaceholderConfig): boolean {
     if (!placeholderConfig || !placeholderConfig.hasOwnProperty('blur')) {
       return true;
     }
diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts
@@ -28,13 +28,14 @@ import {
   DATA_URL_ERROR_LIMIT,
   DATA_URL_WARN_LIMIT,
   NgOptimizedImage,
-  PLACEHOLDER_BLUR_AMOUNT,
   RECOMMENDED_SRCSET_DENSITY_CAP,
   resetImagePriorityCount,
 } from '../../src/directives/ng_optimized_image/ng_optimized_image';
 import {PRECONNECT_CHECK_BLOCKLIST} from '../../src/directives/ng_optimized_image/preconnect_link_checker';
 
 describe('Image directive', () => {
+  const PLACEHOLDER_BLUR_AMOUNT = 15;
+
   describe('preload <link> element on a server', () => {
     describe('server', () => {
       beforeEach(() => {
