@angular/common 21.0.0-next.9 → 21.0.0-rc.0

package/fesm2022/common.mjs

@@ -1,2048 +1,1346 @@
 /**
- * @license Angular v21.0.0-next.9
+ * @license Angular v21.0.0-rc.0
  * (c) 2010-2025 Google LLC. https://angular.dev/
  * License: MIT
  */
 
 export { AsyncPipe, CommonModule, CurrencyPipe, DATE_PIPE_DEFAULT_OPTIONS, DATE_PIPE_DEFAULT_TIMEZONE, DatePipe, DecimalPipe, FormStyle, FormatWidth, HashLocationStrategy, I18nPluralPipe, I18nSelectPipe, JsonPipe, KeyValuePipe, LowerCasePipe, NgClass, NgComponentOutlet, NgForOf as NgFor, NgForOf, NgForOfContext, NgIf, NgIfContext, NgLocaleLocalization, NgLocalization, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NumberFormatStyle, NumberSymbol, PercentPipe, Plural, SlicePipe, TitleCasePipe, TranslationWidth, UpperCasePipe, WeekDay, formatCurrency, formatDate, formatNumber, formatPercent, getCurrencySymbol, getLocaleCurrencyCode, getLocaleCurrencyName, getLocaleCurrencySymbol, getLocaleDateFormat, getLocaleDateTimeFormat, getLocaleDayNames, getLocaleDayPeriods, getLocaleDirection, getLocaleEraNames, getLocaleExtraDayPeriodRules, getLocaleExtraDayPeriods, getLocaleFirstDayOfWeek, getLocaleId, getLocaleMonthNames, getLocaleNumberFormat, getLocaleNumberSymbol, getLocalePluralCase, getLocaleTimeFormat, getLocaleWeekEndRange, getNumberOfCurrencyDigits } from './_common_module-chunk.mjs';
 import * as i0 from '@angular/core';
-import { ɵregisterLocaleData as _registerLocaleData, Version, ɵɵdefineInjectable as __defineInjectable, inject, DOCUMENT, ɵformatRuntimeError as _formatRuntimeError, InjectionToken, ɵRuntimeError as _RuntimeError, Injectable, ɵIMAGE_CONFIG as _IMAGE_CONFIG, Renderer2, ElementRef, Injector, DestroyRef, ɵperformanceMarkFeature as _performanceMarkFeature, NgZone, ApplicationRef, numberAttribute, booleanAttribute, Directive, Input, ɵIMAGE_CONFIG_DEFAULTS as _IMAGE_CONFIG_DEFAULTS, ɵunwrapSafeValue as _unwrapSafeValue, ChangeDetectorRef } from '@angular/core';
+import { inject, DestroyRef, Injectable, ɵregisterLocaleData as _registerLocaleData, Version, ɵɵdefineInjectable as __defineInjectable, DOCUMENT, ɵformatRuntimeError as _formatRuntimeError, InjectionToken, ɵRuntimeError as _RuntimeError, ɵIMAGE_CONFIG as _IMAGE_CONFIG, Renderer2, ElementRef, Injector, ɵperformanceMarkFeature as _performanceMarkFeature, NgZone, ApplicationRef, numberAttribute, booleanAttribute, Directive, Input, ɵIMAGE_CONFIG_DEFAULTS as _IMAGE_CONFIG_DEFAULTS, ɵunwrapSafeValue as _unwrapSafeValue, ChangeDetectorRef } from '@angular/core';
 export { DOCUMENT, ɵIMAGE_CONFIG as IMAGE_CONFIG } from '@angular/core';
-export { PlatformNavigation } from './_platform_navigation-chunk.mjs';
+import { PlatformNavigation } from './_platform_navigation-chunk.mjs';
 export { XhrFactory, parseCookieValue as ɵparseCookieValue } from './_xhr-chunk.mjs';
-export { APP_BASE_HREF, BrowserPlatformLocation, LOCATION_INITIALIZED, Location, LocationStrategy, PathLocationStrategy, PlatformLocation, DomAdapter as ɵDomAdapter, getDOM as ɵgetDOM, normalizeQueryParams as ɵnormalizeQueryParams, setRootDomAdapter as ɵsetRootDomAdapter } from './_location-chunk.mjs';
+import { Location, LocationStrategy, normalizeQueryParams } from './_location-chunk.mjs';
+export { APP_BASE_HREF, BrowserPlatformLocation, LOCATION_INITIALIZED, PathLocationStrategy, PlatformLocation, DomAdapter as ɵDomAdapter, getDOM as ɵgetDOM, setRootDomAdapter as ɵsetRootDomAdapter } from './_location-chunk.mjs';
 import 'rxjs';
 
-/**
- * Register global data to be used internally by Angular. See the
- * ["I18n guide"](guide/i18n/format-data-locale) to know how to import additional locale
- * data.
- *
- * The signature registerLocaleData(data: any, extraData?: any) is deprecated since v5.1
- *
- * @publicApi
- */
+class NavigationAdapterForLocation extends Location {
+  navigation = inject(PlatformNavigation);
+  destroyRef = inject(DestroyRef);
+  constructor() {
+    super(inject(LocationStrategy));
+    this.registerNavigationListeners();
+  }
+  registerNavigationListeners() {
+    const currentEntryChangeListener = () => {
+      this._notifyUrlChangeListeners(this.path(true), this.getState());
+    };
+    this.navigation.addEventListener('currententrychange', currentEntryChangeListener);
+    this.destroyRef.onDestroy(() => {
+      this.navigation.removeEventListener('currententrychange', currentEntryChangeListener);
+    });
+  }
+  getState() {
+    return this.navigation.currentEntry?.getState();
+  }
+  replaceState(path, query = '', state = null) {
+    const url = this.prepareExternalUrl(path + normalizeQueryParams(query));
+    this.navigation.navigate(url, {
+      state,
+      history: 'replace'
+    });
+  }
+  go(path, query = '', state = null) {
+    const url = this.prepareExternalUrl(path + normalizeQueryParams(query));
+    this.navigation.navigate(url, {
+      state,
+      history: 'push'
+    });
+  }
+  back() {
+    this.navigation.back();
+  }
+  forward() {
+    this.navigation.forward();
+  }
+  onUrlChange(fn) {
+    this._urlChangeListeners.push(fn);
+    return () => {
+      const fnIndex = this._urlChangeListeners.indexOf(fn);
+      this._urlChangeListeners.splice(fnIndex, 1);
+    };
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "21.0.0-rc.0",
+    ngImport: i0,
+    type: NavigationAdapterForLocation,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Injectable
+  });
+  static ɵprov = i0.ɵɵngDeclareInjectable({
+    minVersion: "12.0.0",
+    version: "21.0.0-rc.0",
+    ngImport: i0,
+    type: NavigationAdapterForLocation
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "21.0.0-rc.0",
+  ngImport: i0,
+  type: NavigationAdapterForLocation,
+  decorators: [{
+    type: Injectable
+  }],
+  ctorParameters: () => []
+});
+
 function registerLocaleData(data, localeId, extraData) {
-    return _registerLocaleData(data, localeId, extraData);
+  return _registerLocaleData(data, localeId, extraData);
 }
 
 const PLATFORM_BROWSER_ID = 'browser';
 const PLATFORM_SERVER_ID = 'server';
-/**
- * Returns whether a platform id represents a browser platform.
- * @publicApi
- */
 function isPlatformBrowser(platformId) {
-    return platformId === PLATFORM_BROWSER_ID;
+  return platformId === PLATFORM_BROWSER_ID;
 }
-/**
- * Returns whether a platform id represents a server platform.
- * @publicApi
- */
 function isPlatformServer(platformId) {
-    return platformId === PLATFORM_SERVER_ID;
+  return platformId === PLATFORM_SERVER_ID;
 }
 
-/**
- * @module
- * @description
- * Entry point for all public APIs of the common package.
- */
-/**
- * @publicApi
- */
-const VERSION = new Version('21.0.0-next.9');
+const VERSION = new Version('21.0.0-rc.0');
 
-/**
- * Defines a scroll position manager. Implemented by `BrowserViewportScroller`.
- *
- * @publicApi
- */
 class ViewportScroller {
-    // De-sugared tree-shakable injection
-    // See #23917
-    /** @nocollapse */
-    static ɵprov = /** @pureOrBreakMyCode */ /* @__PURE__ */ __defineInjectable({
-        token: ViewportScroller,
-        providedIn: 'root',
-        factory: () => typeof ngServerMode !== 'undefined' && ngServerMode
-            ? new NullViewportScroller()
-            : new BrowserViewportScroller(inject(DOCUMENT), window),
-    });
+  static ɵprov =
+  /* @__PURE__ */
+  __defineInjectable({
+    token: ViewportScroller,
+    providedIn: 'root',
+    factory: () => typeof ngServerMode !== 'undefined' && ngServerMode ? new NullViewportScroller() : new BrowserViewportScroller(inject(DOCUMENT), window)
+  });
 }
-/**
- * Manages the scroll position for a browser window.
- */
 class BrowserViewportScroller {
-    document;
-    window;
-    offset = () => [0, 0];
-    constructor(document, window) {
-        this.document = document;
-        this.window = window;
-    }
-    /**
-     * Configures the top offset used when scrolling to an anchor.
-     * @param offset A position in screen coordinates (a tuple with x and y values)
-     * or a function that returns the top offset position.
-     *
-     */
-    setOffset(offset) {
-        if (Array.isArray(offset)) {
-            this.offset = () => offset;
-        }
-        else {
-            this.offset = offset;
-        }
-    }
-    /**
-     * Retrieves the current scroll position.
-     * @returns The position in screen coordinates.
-     */
-    getScrollPosition() {
-        return [this.window.scrollX, this.window.scrollY];
-    }
-    /**
-     * Sets the scroll position.
-     * @param position The new position in screen coordinates.
-     */
-    scrollToPosition(position, options) {
-        this.window.scrollTo({ ...options, left: position[0], top: position[1] });
-    }
-    /**
-     * Scrolls to an element and attempts to focus the element.
-     *
-     * Note that the function name here is misleading in that the target string may be an ID for a
-     * non-anchor element.
-     *
-     * @param target The ID of an element or name of the anchor.
-     *
-     * @see https://html.spec.whatwg.org/#the-indicated-part-of-the-document
-     * @see https://html.spec.whatwg.org/#scroll-to-fragid
-     */
-    scrollToAnchor(target, options) {
-        const elSelected = findAnchorFromDocument(this.document, target);
-        if (elSelected) {
-            this.scrollToElement(elSelected, options);
-            // After scrolling to the element, the spec dictates that we follow the focus steps for the
-            // target. Rather than following the robust steps, simply attempt focus.
-            //
-            // @see https://html.spec.whatwg.org/#get-the-focusable-area
-            // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus
-            // @see https://html.spec.whatwg.org/#focusable-area
-            elSelected.focus();
-        }
-    }
-    /**
-     * Disables automatic scroll restoration provided by the browser.
-     */
-    setHistoryScrollRestoration(scrollRestoration) {
-        try {
-            this.window.history.scrollRestoration = scrollRestoration;
-        }
-        catch {
-            console.warn(_formatRuntimeError(2400 /* RuntimeErrorCode.SCROLL_RESTORATION_UNSUPPORTED */, ngDevMode &&
-                'Failed to set `window.history.scrollRestoration`. ' +
-                    'This may occur when:\n' +
-                    '• The script is running inside a sandboxed iframe\n' +
-                    '• The window is partially navigated or inactive\n' +
-                    '• The script is executed in an untrusted or special context (e.g., test runners, browser extensions, or content previews)\n' +
-                    'Scroll position may not be preserved across navigation.'));
-        }
-    }
-    /**
-     * Scrolls to an element using the native offset and the specified offset set on this scroller.
-     *
-     * The offset can be used when we know that there is a floating header and scrolling naively to an
-     * element (ex: `scrollIntoView`) leaves the element hidden behind the floating header.
-     */
-    scrollToElement(el, options) {
-        const rect = el.getBoundingClientRect();
-        const left = rect.left + this.window.pageXOffset;
-        const top = rect.top + this.window.pageYOffset;
-        const offset = this.offset();
-        this.window.scrollTo({
-            ...options,
-            left: left - offset[0],
-            top: top - offset[1],
-        });
-    }
+  document;
+  window;
+  offset = () => [0, 0];
+  constructor(document, window) {
+    this.document = document;
+    this.window = window;
+  }
+  setOffset(offset) {
+    if (Array.isArray(offset)) {
+      this.offset = () => offset;
+    } else {
+      this.offset = offset;
+    }
+  }
+  getScrollPosition() {
+    return [this.window.scrollX, this.window.scrollY];
+  }
+  scrollToPosition(position, options) {
+    this.window.scrollTo({
+      ...options,
+      left: position[0],
+      top: position[1]
+    });
+  }
+  scrollToAnchor(target, options) {
+    const elSelected = findAnchorFromDocument(this.document, target);
+    if (elSelected) {
+      this.scrollToElement(elSelected, options);
+      elSelected.focus();
+    }
+  }
+  setHistoryScrollRestoration(scrollRestoration) {
+    try {
+      this.window.history.scrollRestoration = scrollRestoration;
+    } catch {
+      console.warn(_formatRuntimeError(2400, ngDevMode && 'Failed to set `window.history.scrollRestoration`. ' + 'This may occur when:\n' + '• The script is running inside a sandboxed iframe\n' + '• The window is partially navigated or inactive\n' + '• The script is executed in an untrusted or special context (e.g., test runners, browser extensions, or content previews)\n' + 'Scroll position may not be preserved across navigation.'));
+    }
+  }
+  scrollToElement(el, options) {
+    const rect = el.getBoundingClientRect();
+    const left = rect.left + this.window.pageXOffset;
+    const top = rect.top + this.window.pageYOffset;
+    const offset = this.offset();
+    this.window.scrollTo({
+      ...options,
+      left: left - offset[0],
+      top: top - offset[1]
+    });
+  }
 }
 function findAnchorFromDocument(document, target) {
-    const documentResult = document.getElementById(target) || document.getElementsByName(target)[0];
-    if (documentResult) {
-        return documentResult;
-    }
-    // `getElementById` and `getElementsByName` won't pierce through the shadow DOM so we
-    // have to traverse the DOM manually and do the lookup through the shadow roots.
-    if (typeof document.createTreeWalker === 'function' &&
-        document.body &&
-        typeof document.body.attachShadow === 'function') {
-        const treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);
-        let currentNode = treeWalker.currentNode;
-        while (currentNode) {
-            const shadowRoot = currentNode.shadowRoot;
-            if (shadowRoot) {
-                // Note that `ShadowRoot` doesn't support `getElementsByName`
-                // so we have to fall back to `querySelector`.
-                const result = shadowRoot.getElementById(target) || shadowRoot.querySelector(`[name="${target}"]`);
-                if (result) {
-                    return result;
-                }
-            }
-            currentNode = treeWalker.nextNode();
+  const documentResult = document.getElementById(target) || document.getElementsByName(target)[0];
+  if (documentResult) {
+    return documentResult;
+  }
+  if (typeof document.createTreeWalker === 'function' && document.body && typeof document.body.attachShadow === 'function') {
+    const treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);
+    let currentNode = treeWalker.currentNode;
+    while (currentNode) {
+      const shadowRoot = currentNode.shadowRoot;
+      if (shadowRoot) {
+        const result = shadowRoot.getElementById(target) || shadowRoot.querySelector(`[name="${target}"]`);
+        if (result) {
+          return result;
         }
+      }
+      currentNode = treeWalker.nextNode();
     }
-    return null;
+  }
+  return null;
 }
-/**
- * Provides an empty implementation of the viewport scroller.
- */
 class NullViewportScroller {
-    /**
-     * Empty implementation
-     */
-    setOffset(offset) { }
-    /**
-     * Empty implementation
-     */
-    getScrollPosition() {
-        return [0, 0];
-    }
-    /**
-     * Empty implementation
-     */
-    scrollToPosition(position) { }
-    /**
-     * Empty implementation
-     */
-    scrollToAnchor(anchor) { }
-    /**
-     * Empty implementation
-     */
-    setHistoryScrollRestoration(scrollRestoration) { }
+  setOffset(offset) {}
+  getScrollPosition() {
+    return [0, 0];
+  }
+  scrollToPosition(position) {}
+  scrollToAnchor(anchor) {}
+  setHistoryScrollRestoration(scrollRestoration) {}
 }
 
-/**
- * Value (out of 100) of the requested quality for placeholder images.
- */
 const PLACEHOLDER_QUALITY = '20';
 
-// Converts a string that represents a URL into a URL class instance.
 function getUrl(src, win) {
-    // Don't use a base URL is the URL is absolute.
-    return isAbsoluteUrl(src) ? new URL(src) : new URL(src, win.location.href);
+  return isAbsoluteUrl(src) ? new URL(src) : new URL(src, win.location.href);
 }
-// Checks whether a URL is absolute (i.e. starts with `http://` or `https://`).
 function isAbsoluteUrl(src) {
-    return /^https?:\/\//.test(src);
+  return /^https?:\/\//.test(src);
 }
-// Given a URL, extract the hostname part.
-// If a URL is a relative one - the URL is returned as is.
 function extractHostname(url) {
-    return isAbsoluteUrl(url) ? new URL(url).hostname : url;
+  return isAbsoluteUrl(url) ? new URL(url).hostname : url;
 }
 function isValidPath(path) {
-    const isString = typeof path === 'string';
-    if (!isString || path.trim() === '') {
-        return false;
-    }
-    // Calling new URL() will throw if the path string is malformed
-    try {
-        const url = new URL(path);
-        return true;
-    }
-    catch {
-        return false;
-    }
+  const isString = typeof path === 'string';
+  if (!isString || path.trim() === '') {
+    return false;
+  }
+  try {
+    const url = new URL(path);
+    return true;
+  } catch {
+    return false;
+  }
 }
 function normalizePath(path) {
-    return path.endsWith('/') ? path.slice(0, -1) : path;
+  return path.endsWith('/') ? path.slice(0, -1) : path;
 }
 function normalizeSrc(src) {
-    return src.startsWith('/') ? src.slice(1) : src;
+  return src.startsWith('/') ? src.slice(1) : src;
 }
 
-/**
- * Noop image loader that does no transformation to the original src and just returns it as is.
- * This loader is used as a default one if more specific logic is not provided in an app config.
- *
- * @see {@link ImageLoader}
- * @see {@link NgOptimizedImage}
- */
-const noopImageLoader = (config) => config.src;
-/**
- * Injection token that configures the image loader function.
- *
- * @see {@link ImageLoader}
- * @see {@link NgOptimizedImage}
- * @publicApi
- */
+const noopImageLoader = config => config.src;
 const IMAGE_LOADER = new InjectionToken(typeof ngDevMode !== undefined && ngDevMode ? 'ImageLoader' : '', {
-    providedIn: 'root',
-    factory: () => noopImageLoader,
+  providedIn: 'root',
+  factory: () => noopImageLoader
 });
-/**
- * Internal helper function that makes it easier to introduce custom image loaders for the
- * `NgOptimizedImage` directive. It is enough to specify a URL builder function to obtain full DI
- * configuration for a given loader: a DI token corresponding to the actual loader function, plus DI
- * tokens managing preconnect check functionality.
- * @param buildUrlFn a function returning a full URL based on loader's configuration
- * @param exampleUrls example of full URLs for a given loader (used in error messages)
- * @returns a set of DI providers corresponding to the configured image loader
- */
 function createImageLoader(buildUrlFn, exampleUrls) {
-    return function provideImageLoader(path) {
-        if (!isValidPath(path)) {
-            throwInvalidPathError(path, exampleUrls || []);
-        }
-        // The trailing / is stripped (if provided) to make URL construction (concatenation) easier in
-        // the individual loader functions.
-        path = normalizePath(path);
-        const loaderFn = (config) => {
-            if (isAbsoluteUrl(config.src)) {
-                // Image loader functions expect an image file name (e.g. `my-image.png`)
-                // or a relative path + a file name (e.g. `/a/b/c/my-image.png`) as an input,
-                // so the final absolute URL can be constructed.
-                // When an absolute URL is provided instead - the loader can not
-                // build a final URL, thus the error is thrown to indicate that.
-                throwUnexpectedAbsoluteUrlError(path, config.src);
-            }
-            return buildUrlFn(path, { ...config, src: normalizeSrc(config.src) });
-        };
-        const providers = [{ provide: IMAGE_LOADER, useValue: loaderFn }];
-        return providers;
+  return function provideImageLoader(path) {
+    if (!isValidPath(path)) {
+      throwInvalidPathError(path, exampleUrls || []);
+    }
+    path = normalizePath(path);
+    const loaderFn = config => {
+      if (isAbsoluteUrl(config.src)) {
+        throwUnexpectedAbsoluteUrlError(path, config.src);
+      }
+      return buildUrlFn(path, {
+        ...config,
+        src: normalizeSrc(config.src)
+      });
     };
+    const providers = [{
+      provide: IMAGE_LOADER,
+      useValue: loaderFn
+    }];
+    return providers;
+  };
 }
 function throwInvalidPathError(path, exampleUrls) {
-    throw new _RuntimeError(2959 /* RuntimeErrorCode.INVALID_LOADER_ARGUMENTS */, ngDevMode &&
-        `Image loader has detected an invalid path (\`${path}\`). ` +
-            `To fix this, supply a path using one of the following formats: ${exampleUrls.join(' or ')}`);
+  throw new _RuntimeError(2959, ngDevMode && `Image loader has detected an invalid path (\`${path}\`). ` + `To fix this, supply a path using one of the following formats: ${exampleUrls.join(' or ')}`);
 }
 function throwUnexpectedAbsoluteUrlError(path, url) {
-    throw new _RuntimeError(2959 /* RuntimeErrorCode.INVALID_LOADER_ARGUMENTS */, ngDevMode &&
-        `Image loader has detected a \`<img>\` tag with an invalid \`ngSrc\` attribute: ${url}. ` +
-            `This image loader expects \`ngSrc\` to be a relative URL - ` +
-            `however the provided value is an absolute URL. ` +
-            `To fix this, provide \`ngSrc\` as a path relative to the base URL ` +
-            `configured for this loader (\`${path}\`).`);
+  throw new _RuntimeError(2959, ngDevMode && `Image loader has detected a \`<img>\` tag with an invalid \`ngSrc\` attribute: ${url}. ` + `This image loader expects \`ngSrc\` to be a relative URL - ` + `however the provided value is an absolute URL. ` + `To fix this, provide \`ngSrc\` as a path relative to the base URL ` + `configured for this loader (\`${path}\`).`);
 }
 
-/**
- * Function that generates an ImageLoader for [Cloudflare Image
- * Resizing](https://developers.cloudflare.com/images/image-resizing/) and turns it into an Angular
- * provider. Note: Cloudflare has multiple image products - this provider is specifically for
- * Cloudflare Image Resizing; it will not work with Cloudflare Images or Cloudflare Polish.
- *
- * @param path Your domain name, e.g. https://mysite.com
- * @returns Provider that provides an ImageLoader function
- *
- * @publicApi
- */
 const provideCloudflareLoader = createImageLoader(createCloudflareUrl, ngDevMode ? ['https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>'] : undefined);
 function createCloudflareUrl(path, config) {
-    let params = `format=auto`;
-    if (config.width) {
-        params += `,width=${config.width}`;
-    }
-    // When requesting a placeholder image we ask for a low quality image to reduce the load time.
-    if (config.isPlaceholder) {
-        params += `,quality=${PLACEHOLDER_QUALITY}`;
-    }
-    // Cloudflare image URLs format:
-    // https://developers.cloudflare.com/images/image-resizing/url-format/
-    return `${path}/cdn-cgi/image/${params}/${config.src}`;
+  let params = `format=auto`;
+  if (config.width) {
+    params += `,width=${config.width}`;
+  }
+  if (config.isPlaceholder) {
+    params += `,quality=${PLACEHOLDER_QUALITY}`;
+  }
+  return `${path}/cdn-cgi/image/${params}/${config.src}`;
 }
 
-/**
- * Name and URL tester for Cloudinary.
- */
 const cloudinaryLoaderInfo = {
-    name: 'Cloudinary',
-    testUrl: isCloudinaryUrl,
+  name: 'Cloudinary',
+  testUrl: isCloudinaryUrl
 };
 const CLOUDINARY_LOADER_REGEX = /https?\:\/\/[^\/]+\.cloudinary\.com\/.+/;
-/**
- * Tests whether a URL is from Cloudinary CDN.
- */
 function isCloudinaryUrl(url) {
-    return CLOUDINARY_LOADER_REGEX.test(url);
+  return CLOUDINARY_LOADER_REGEX.test(url);
 }
-/**
- * Function that generates an ImageLoader for Cloudinary and turns it into an Angular provider.
- *
- * @param path Base URL of your Cloudinary images
- * This URL should match one of the following formats:
- * https://res.cloudinary.com/mysite
- * https://mysite.cloudinary.com
- * https://subdomain.mysite.com
- * @returns Set of providers to configure the Cloudinary loader.
- *
- * @publicApi
- */
-const provideCloudinaryLoader = createImageLoader(createCloudinaryUrl, ngDevMode
-    ? [
-        'https://res.cloudinary.com/mysite',
-        'https://mysite.cloudinary.com',
-        'https://subdomain.mysite.com',
-    ]
-    : undefined);
+const provideCloudinaryLoader = createImageLoader(createCloudinaryUrl, ngDevMode ? ['https://res.cloudinary.com/mysite', 'https://mysite.cloudinary.com', 'https://subdomain.mysite.com'] : undefined);
 function createCloudinaryUrl(path, config) {
-    // Cloudinary image URLformat:
-    // https://cloudinary.com/documentation/image_transformations#transformation_url_structure
-    // Example of a Cloudinary image URL:
-    // https://res.cloudinary.com/mysite/image/upload/c_scale,f_auto,q_auto,w_600/marketing/tile-topics-m.png
-    // For a placeholder image, we use the lowest image setting available to reduce the load time
-    // else we use the auto size
-    const quality = config.isPlaceholder ? 'q_auto:low' : 'q_auto';
-    let params = `f_auto,${quality}`;
-    if (config.width) {
-        params += `,w_${config.width}`;
-    }
-    if (config.loaderParams?.['rounded']) {
-        params += `,r_max`;
-    }
-    return `${path}/image/upload/${params}/${config.src}`;
+  const quality = config.isPlaceholder ? 'q_auto:low' : 'q_auto';
+  let params = `f_auto,${quality}`;
+  if (config.width) {
+    params += `,w_${config.width}`;
+  }
+  if (config.loaderParams?.['rounded']) {
+    params += `,r_max`;
+  }
+  return `${path}/image/upload/${params}/${config.src}`;
 }
 
-/**
- * Name and URL tester for ImageKit.
- */
 const imageKitLoaderInfo = {
-    name: 'ImageKit',
-    testUrl: isImageKitUrl,
+  name: 'ImageKit',
+  testUrl: isImageKitUrl
 };
 const IMAGE_KIT_LOADER_REGEX = /https?\:\/\/[^\/]+\.imagekit\.io\/.+/;
-/**
- * Tests whether a URL is from ImageKit CDN.
- */
 function isImageKitUrl(url) {
-    return IMAGE_KIT_LOADER_REGEX.test(url);
+  return IMAGE_KIT_LOADER_REGEX.test(url);
 }
-/**
- * Function that generates an ImageLoader for ImageKit and turns it into an Angular provider.
- *
- * @param path Base URL of your ImageKit images
- * This URL should match one of the following formats:
- * https://ik.imagekit.io/myaccount
- * https://subdomain.mysite.com
- * @returns Set of providers to configure the ImageKit loader.
- *
- * @publicApi
- */
 const provideImageKitLoader = createImageLoader(createImagekitUrl, ngDevMode ? ['https://ik.imagekit.io/mysite', 'https://subdomain.mysite.com'] : undefined);
 function createImagekitUrl(path, config) {
-    // Example of an ImageKit image URL:
-    // https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg
-    const { src, width } = config;
-    const params = [];
-    if (width) {
-        params.push(`w-${width}`);
-    }
-    // When requesting a placeholder image we ask for a low quality image to reduce the load time.
-    if (config.isPlaceholder) {
-        params.push(`q-${PLACEHOLDER_QUALITY}`);
-    }
-    const urlSegments = params.length ? [path, `tr:${params.join(',')}`, src] : [path, src];
-    const url = new URL(urlSegments.join('/'));
-    return url.href;
+  const {
+    src,
+    width
+  } = config;
+  const params = [];
+  if (width) {
+    params.push(`w-${width}`);
+  }
+  if (config.isPlaceholder) {
+    params.push(`q-${PLACEHOLDER_QUALITY}`);
+  }
+  const urlSegments = params.length ? [path, `tr:${params.join(',')}`, src] : [path, src];
+  const url = new URL(urlSegments.join('/'));
+  return url.href;
 }
 
-/**
- * Name and URL tester for Imgix.
- */
 const imgixLoaderInfo = {
-    name: 'Imgix',
-    testUrl: isImgixUrl,
+  name: 'Imgix',
+  testUrl: isImgixUrl
 };
 const IMGIX_LOADER_REGEX = /https?\:\/\/[^\/]+\.imgix\.net\/.+/;
-/**
- * Tests whether a URL is from Imgix CDN.
- */
 function isImgixUrl(url) {
-    return IMGIX_LOADER_REGEX.test(url);
+  return IMGIX_LOADER_REGEX.test(url);
 }
-/**
- * Function that generates an ImageLoader for Imgix and turns it into an Angular provider.
- *
- * @param path path to the desired Imgix origin,
- * e.g. https://somepath.imgix.net or https://images.mysite.com
- * @returns Set of providers to configure the Imgix loader.
- *
- * @publicApi
- */
 const provideImgixLoader = createImageLoader(createImgixUrl, ngDevMode ? ['https://somepath.imgix.net/'] : undefined);
 function createImgixUrl(path, config) {
-    const url = new URL(`${path}/${config.src}`);
-    // This setting ensures the smallest allowable format is set.
-    url.searchParams.set('auto', 'format');
-    if (config.width) {
-        url.searchParams.set('w', config.width.toString());
-    }
-    // When requesting a placeholder image we ask a low quality image to reduce the load time.
-    if (config.isPlaceholder) {
-        url.searchParams.set('q', PLACEHOLDER_QUALITY);
-    }
-    return url.href;
+  const url = new URL(`${path}/${config.src}`);
+  url.searchParams.set('auto', 'format');
+  if (config.width) {
+    url.searchParams.set('w', config.width.toString());
+  }
+  if (config.isPlaceholder) {
+    url.searchParams.set('q', PLACEHOLDER_QUALITY);
+  }
+  return url.href;
 }
 
-/**
- * Name and URL tester for Netlify.
- */
 const netlifyLoaderInfo = {
-    name: 'Netlify',
-    testUrl: isNetlifyUrl,
+  name: 'Netlify',
+  testUrl: isNetlifyUrl
 };
 const NETLIFY_LOADER_REGEX = /https?\:\/\/[^\/]+\.netlify\.app\/.+/;
-/**
- * Tests whether a URL is from a Netlify site. This won't catch sites with a custom domain,
- * but it's a good start for sites in development. This is only used to warn users who haven't
- * configured an image loader.
- */
 function isNetlifyUrl(url) {
-    return NETLIFY_LOADER_REGEX.test(url);
+  return NETLIFY_LOADER_REGEX.test(url);
 }
-/**
- * Function that generates an ImageLoader for Netlify and turns it into an Angular provider.
- *
- * @param path optional URL of the desired Netlify site. Defaults to the current site.
- * @returns Set of providers to configure the Netlify loader.
- *
- * @publicApi
- */
 function provideNetlifyLoader(path) {
-    if (path && !isValidPath(path)) {
-        throw new _RuntimeError(2959 /* RuntimeErrorCode.INVALID_LOADER_ARGUMENTS */, ngDevMode &&
-            `Image loader has detected an invalid path (\`${path}\`). ` +
-                `To fix this, supply either the full URL to the Netlify site, or leave it empty to use the current site.`);
-    }
-    if (path) {
-        const url = new URL(path);
-        path = url.origin;
-    }
-    const loaderFn = (config) => {
-        return createNetlifyUrl(config, path);
-    };
-    const providers = [{ provide: IMAGE_LOADER, useValue: loaderFn }];
-    return providers;
-}
-const validParams = new Map([
-    ['height', 'h'],
-    ['fit', 'fit'],
-    ['quality', 'q'],
-    ['q', 'q'],
-    ['position', 'position'],
-]);
+  if (path && !isValidPath(path)) {
+    throw new _RuntimeError(2959, ngDevMode && `Image loader has detected an invalid path (\`${path}\`). ` + `To fix this, supply either the full URL to the Netlify site, or leave it empty to use the current site.`);
+  }
+  if (path) {
+    const url = new URL(path);
+    path = url.origin;
+  }
+  const loaderFn = config => {
+    return createNetlifyUrl(config, path);
+  };
+  const providers = [{
+    provide: IMAGE_LOADER,
+    useValue: loaderFn
+  }];
+  return providers;
+}
+const validParams = new Map([['height', 'h'], ['fit', 'fit'], ['quality', 'q'], ['q', 'q'], ['position', 'position']]);
 function createNetlifyUrl(config, path) {
-    // Note: `path` can be undefined, in which case we use a fake one to construct a `URL` instance.
-    const url = new URL(path ?? 'https://a/');
-    url.pathname = '/.netlify/images';
-    if (!isAbsoluteUrl(config.src) && !config.src.startsWith('/')) {
-        config.src = '/' + config.src;
-    }
-    url.searchParams.set('url', config.src);
-    if (config.width) {
-        url.searchParams.set('w', config.width.toString());
-    }
-    // When requesting a placeholder image we ask for a low quality image to reduce the load time.
-    // If the quality is specified in the loader config - always use provided value.
-    const configQuality = config.loaderParams?.['quality'] ?? config.loaderParams?.['q'];
-    if (config.isPlaceholder && !configQuality) {
-        url.searchParams.set('q', PLACEHOLDER_QUALITY);
-    }
-    for (const [param, value] of Object.entries(config.loaderParams ?? {})) {
-        if (validParams.has(param)) {
-            url.searchParams.set(validParams.get(param), value.toString());
-        }
-        else {
-            if (ngDevMode) {
-                console.warn(_formatRuntimeError(2959 /* RuntimeErrorCode.INVALID_LOADER_ARGUMENTS */, `The Netlify image loader has detected an \`<img>\` tag with the unsupported attribute "\`${param}\`".`));
-            }
-        }
-    }
-    // The "a" hostname is used for relative URLs, so we can remove it from the final URL.
-    return url.hostname === 'a' ? url.href.replace(url.origin, '') : url.href;
+  const url = new URL(path ?? 'https://a/');
+  url.pathname = '/.netlify/images';
+  if (!isAbsoluteUrl(config.src) && !config.src.startsWith('/')) {
+    config.src = '/' + config.src;
+  }
+  url.searchParams.set('url', config.src);
+  if (config.width) {
+    url.searchParams.set('w', config.width.toString());
+  }
+  const configQuality = config.loaderParams?.['quality'] ?? config.loaderParams?.['q'];
+  if (config.isPlaceholder && !configQuality) {
+    url.searchParams.set('q', PLACEHOLDER_QUALITY);
+  }
+  for (const [param, value] of Object.entries(config.loaderParams ?? {})) {
+    if (validParams.has(param)) {
+      url.searchParams.set(validParams.get(param), value.toString());
+    } else {
+      if (ngDevMode) {
+        console.warn(_formatRuntimeError(2959, `The Netlify image loader has detected an \`<img>\` tag with the unsupported attribute "\`${param}\`".`));
+      }
+    }
+  }
+  return url.hostname === 'a' ? url.href.replace(url.origin, '') : url.href;
 }
 
-// Assembles directive details string, useful for error messages.
 function imgDirectiveDetails(ngSrc, includeNgSrc = true) {
-    const ngSrcInfo = includeNgSrc
-        ? `(activated on an <img> element with the \`ngSrc="${ngSrc}"\`) `
-        : '';
-    return `The NgOptimizedImage directive ${ngSrcInfo}has detected that`;
+  const ngSrcInfo = includeNgSrc ? `(activated on an <img> element with the \`ngSrc="${ngSrc}"\`) ` : '';
+  return `The NgOptimizedImage directive ${ngSrcInfo}has detected that`;
 }
 
-/**
- * Asserts that the application is in development mode. Throws an error if the application is in
- * production mode. This assert can be used to make sure that there is no dev-mode code invoked in
- * the prod mode accidentally.
- */
 function assertDevMode(checkName) {
-    if (!ngDevMode) {
-        throw new _RuntimeError(2958 /* RuntimeErrorCode.UNEXPECTED_DEV_MODE_CHECK_IN_PROD_MODE */, `Unexpected invocation of the ${checkName} in the prod mode. ` +
-            `Please make sure that the prod mode is enabled for production builds.`);
-    }
+  if (!ngDevMode) {
+    throw new _RuntimeError(2958, `Unexpected invocation of the ${checkName} in the prod mode. ` + `Please make sure that the prod mode is enabled for production builds.`);
+  }
 }
 
-/**
- * Observer that detects whether an image with `NgOptimizedImage`
- * is treated as a Largest Contentful Paint (LCP) element. If so,
- * asserts that the image has the `priority` attribute.
- *
- * Note: this is a dev-mode only class and it does not appear in prod bundles,
- * thus there is no `ngDevMode` use in the code.
- *
- * Based on https://web.dev/lcp/#measure-lcp-in-javascript.
- */
 class LCPImageObserver {
-    // Map of full image URLs -> original `ngSrc` values.
-    images = new Map();
-    window = inject(DOCUMENT).defaultView;
-    observer = null;
-    constructor() {
-        assertDevMode('LCP checker');
-        if ((typeof ngServerMode === 'undefined' || !ngServerMode) &&
-            typeof PerformanceObserver !== 'undefined') {
-            this.observer = this.initPerformanceObserver();
-        }
-    }
-    /**
-     * Inits PerformanceObserver and subscribes to LCP events.
-     * Based on https://web.dev/lcp/#measure-lcp-in-javascript
-     */
-    initPerformanceObserver() {
-        const observer = new PerformanceObserver((entryList) => {
-            const entries = entryList.getEntries();
-            if (entries.length === 0)
-                return;
-            // We use the latest entry produced by the `PerformanceObserver` as the best
-            // signal on which element is actually an LCP one. As an example, the first image to load on
-            // a page, by virtue of being the only thing on the page so far, is often a LCP candidate
-            // and gets reported by PerformanceObserver, but isn't necessarily the LCP element.
-            const lcpElement = entries[entries.length - 1];
-            // Cast to `any` due to missing `element` on the `LargestContentfulPaint` type of entry.
-            // See https://developer.mozilla.org/en-US/docs/Web/API/LargestContentfulPaint
-            const imgSrc = lcpElement.element?.src ?? '';
-            // Exclude `data:` and `blob:` URLs, since they are not supported by the directive.
-            if (imgSrc.startsWith('data:') || imgSrc.startsWith('blob:'))
-                return;
-            const img = this.images.get(imgSrc);
-            if (!img)
-                return;
-            if (!img.priority && !img.alreadyWarnedPriority) {
-                img.alreadyWarnedPriority = true;
-                logMissingPriorityError(imgSrc);
-            }
-            if (img.modified && !img.alreadyWarnedModified) {
-                img.alreadyWarnedModified = true;
-                logModifiedWarning(imgSrc);
-            }
-        });
-        observer.observe({ type: 'largest-contentful-paint', buffered: true });
-        return observer;
-    }
-    registerImage(rewrittenSrc, originalNgSrc, isPriority) {
-        if (!this.observer)
-            return;
-        const newObservedImageState = {
-            priority: isPriority,
-            modified: false,
-            alreadyWarnedModified: false,
-            alreadyWarnedPriority: false,
-        };
-        this.images.set(getUrl(rewrittenSrc, this.window).href, newObservedImageState);
-    }
-    unregisterImage(rewrittenSrc) {
-        if (!this.observer)
-            return;
-        this.images.delete(getUrl(rewrittenSrc, this.window).href);
-    }
-    updateImage(originalSrc, newSrc) {
-        if (!this.observer)
-            return;
-        const originalUrl = getUrl(originalSrc, this.window).href;
-        const img = this.images.get(originalUrl);
-        if (img) {
-            img.modified = true;
-            this.images.set(getUrl(newSrc, this.window).href, img);
-            this.images.delete(originalUrl);
-        }
-    }
-    ngOnDestroy() {
-        if (!this.observer)
-            return;
-        this.observer.disconnect();
-        this.images.clear();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: LCPImageObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: LCPImageObserver, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: LCPImageObserver, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
+  images = new Map();
+  window = inject(DOCUMENT).defaultView;
+  observer = null;
+  constructor() {
+    assertDevMode('LCP checker');
+    if ((typeof ngServerMode === 'undefined' || !ngServerMode) && typeof PerformanceObserver !== 'undefined') {
+      this.observer = this.initPerformanceObserver();
+    }
+  }
+  initPerformanceObserver() {
+    const observer = new PerformanceObserver(entryList => {
+      const entries = entryList.getEntries();
+      if (entries.length === 0) return;
+      const lcpElement = entries[entries.length - 1];
+      const imgSrc = lcpElement.element?.src ?? '';
+      if (imgSrc.startsWith('data:') || imgSrc.startsWith('blob:')) return;
+      const img = this.images.get(imgSrc);
+      if (!img) return;
+      if (!img.priority && !img.alreadyWarnedPriority) {
+        img.alreadyWarnedPriority = true;
+        logMissingPriorityError(imgSrc);
+      }
+      if (img.modified && !img.alreadyWarnedModified) {
+        img.alreadyWarnedModified = true;
+        logModifiedWarning(imgSrc);
+      }
+    });
+    observer.observe({
+      type: 'largest-contentful-paint',
+      buffered: true
+    });
+    return observer;
+  }
+  registerImage(rewrittenSrc, originalNgSrc, isPriority) {
+    if (!this.observer) return;
+    const newObservedImageState = {
+      priority: isPriority,
+      modified: false,
+      alreadyWarnedModified: false,
+      alreadyWarnedPriority: false
+    };
+    this.images.set(getUrl(rewrittenSrc, this.window).href, newObservedImageState);
+  }
+  unregisterImage(rewrittenSrc) {
+    if (!this.observer) return;
+    this.images.delete(getUrl(rewrittenSrc, this.window).href);
+  }
+  updateImage(originalSrc, newSrc) {
+    if (!this.observer) return;
+    const originalUrl = getUrl(originalSrc, this.window).href;
+    const img = this.images.get(originalUrl);
+    if (img) {
+      img.modified = true;
+      this.images.set(getUrl(newSrc, this.window).href, img);
+      this.images.delete(originalUrl);
+    }
+  }
+  ngOnDestroy() {
+    if (!this.observer) return;
+    this.observer.disconnect();
+    this.images.clear();
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "21.0.0-rc.0",
+    ngImport: i0,
+    type: LCPImageObserver,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Injectable
+  });
+  static ɵprov = i0.ɵɵngDeclareInjectable({
+    minVersion: "12.0.0",
+    version: "21.0.0-rc.0",
+    ngImport: i0,
+    type: LCPImageObserver,
+    providedIn: 'root'
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "21.0.0-rc.0",
+  ngImport: i0,
+  type: LCPImageObserver,
+  decorators: [{
+    type: Injectable,
+    args: [{
+      providedIn: 'root'
+    }]
+  }],
+  ctorParameters: () => []
+});
 function logMissingPriorityError(ngSrc) {
-    const directiveDetails = imgDirectiveDetails(ngSrc);
-    console.error(_formatRuntimeError(2955 /* RuntimeErrorCode.LCP_IMG_MISSING_PRIORITY */, `${directiveDetails} this image is the Largest Contentful Paint (LCP) ` +
-        `element but was not marked "priority". This image should be marked ` +
-        `"priority" in order to prioritize its loading. ` +
-        `To fix this, add the "priority" attribute.`));
+  const directiveDetails = imgDirectiveDetails(ngSrc);
+  console.error(_formatRuntimeError(2955, `${directiveDetails} this image is the Largest Contentful Paint (LCP) ` + `element but was not marked "priority". This image should be marked ` + `"priority" in order to prioritize its loading. ` + `To fix this, add the "priority" attribute.`));
 }
 function logModifiedWarning(ngSrc) {
-    const directiveDetails = imgDirectiveDetails(ngSrc);
-    console.warn(_formatRuntimeError(2964 /* RuntimeErrorCode.LCP_IMG_NGSRC_MODIFIED */, `${directiveDetails} this image is the Largest Contentful Paint (LCP) ` +
-        `element and has had its "ngSrc" attribute modified. This can cause ` +
-        `slower loading performance. It is recommended not to modify the "ngSrc" ` +
-        `property on any image which could be the LCP element.`));
+  const directiveDetails = imgDirectiveDetails(ngSrc);
+  console.warn(_formatRuntimeError(2964, `${directiveDetails} this image is the Largest Contentful Paint (LCP) ` + `element and has had its "ngSrc" attribute modified. This can cause ` + `slower loading performance. It is recommended not to modify the "ngSrc" ` + `property on any image which could be the LCP element.`));
 }
 
-// Set of origins that are always excluded from the preconnect checks.
-const INTERNAL_PRECONNECT_CHECK_BLOCKLIST = new Set(['localhost', '127.0.0.1', '0.0.0.0']);
-/**
- * Injection token to configure which origins should be excluded
- * from the preconnect checks. It can either be a single string or an array of strings
- * to represent a group of origins, for example:
- *
- * ```ts
- *  {provide: PRECONNECT_CHECK_BLOCKLIST, useValue: 'https://your-domain.com'}
- * ```
- *
- * or:
- *
- * ```ts
- *  {provide: PRECONNECT_CHECK_BLOCKLIST,
- *   useValue: ['https://your-domain-1.com', 'https://your-domain-2.com']}
- * ```
- *
- * @publicApi
- */
+const INTERNAL_PRECONNECT_CHECK_BLOCKLIST = new Set(['localhost', '127.0.0.1', '0.0.0.0', '[::1]']);
 const PRECONNECT_CHECK_BLOCKLIST = new InjectionToken(typeof ngDevMode !== undefined && ngDevMode ? 'PRECONNECT_CHECK_BLOCKLIST' : '');
-/**
- * Contains the logic to detect whether an image, marked with the "priority" attribute
- * has a corresponding `<link rel="preconnect">` tag in the `document.head`.
- *
- * Note: this is a dev-mode only class, which should not appear in prod bundles,
- * thus there is no `ngDevMode` use in the code.
- */
 class PreconnectLinkChecker {
-    document = inject(DOCUMENT);
-    /**
-     * Set of <link rel="preconnect"> tags found on this page.
-     * The `null` value indicates that there was no DOM query operation performed.
-     */
-    preconnectLinks = null;
-    /*
-     * Keep track of all already seen origin URLs to avoid repeating the same check.
-     */
-    alreadySeen = new Set();
-    window = this.document.defaultView;
-    blocklist = new Set(INTERNAL_PRECONNECT_CHECK_BLOCKLIST);
-    constructor() {
-        assertDevMode('preconnect link checker');
-        const blocklist = inject(PRECONNECT_CHECK_BLOCKLIST, { optional: true });
-        if (blocklist) {
-            this.populateBlocklist(blocklist);
-        }
-    }
-    populateBlocklist(origins) {
-        if (Array.isArray(origins)) {
-            deepForEach(origins, (origin) => {
-                this.blocklist.add(extractHostname(origin));
-            });
-        }
-        else {
-            this.blocklist.add(extractHostname(origins));
-        }
-    }
-    /**
-     * Checks that a preconnect resource hint exists in the head for the
-     * given src.
-     *
-     * @param rewrittenSrc src formatted with loader
-     * @param originalNgSrc ngSrc value
-     */
-    assertPreconnect(rewrittenSrc, originalNgSrc) {
-        if (typeof ngServerMode !== 'undefined' && ngServerMode)
-            return;
-        const imgUrl = getUrl(rewrittenSrc, this.window);
-        if (this.blocklist.has(imgUrl.hostname) || this.alreadySeen.has(imgUrl.origin))
-            return;
-        // Register this origin as seen, so we don't check it again later.
-        this.alreadySeen.add(imgUrl.origin);
-        // Note: we query for preconnect links only *once* and cache the results
-        // for the entire lifespan of an application, since it's unlikely that the
-        // list would change frequently. This allows to make sure there are no
-        // performance implications of making extra DOM lookups for each image.
-        this.preconnectLinks ??= this.queryPreconnectLinks();
-        if (!this.preconnectLinks.has(imgUrl.origin)) {
-            console.warn(_formatRuntimeError(2956 /* RuntimeErrorCode.PRIORITY_IMG_MISSING_PRECONNECT_TAG */, `${imgDirectiveDetails(originalNgSrc)} there is no preconnect tag present for this ` +
-                `image. Preconnecting to the origin(s) that serve priority images ensures that these ` +
-                `images are delivered as soon as possible. To fix this, please add the following ` +
-                `element into the <head> of the document:\n` +
-                `  <link rel="preconnect" href="${imgUrl.origin}">`));
-        }
-    }
-    queryPreconnectLinks() {
-        const preconnectUrls = new Set();
-        const links = this.document.querySelectorAll('link[rel=preconnect]');
-        for (const link of links) {
-            const url = getUrl(link.href, this.window);
-            preconnectUrls.add(url.origin);
-        }
-        return preconnectUrls;
-    }
-    ngOnDestroy() {
-        this.preconnectLinks?.clear();
-        this.alreadySeen.clear();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: PreconnectLinkChecker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: PreconnectLinkChecker, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: PreconnectLinkChecker, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-/**
- * Invokes a callback for each element in the array. Also invokes a callback
- * recursively for each nested array.
- */
+  document = inject(DOCUMENT);
+  preconnectLinks = null;
+  alreadySeen = new Set();
+  window = this.document.defaultView;
+  blocklist = new Set(INTERNAL_PRECONNECT_CHECK_BLOCKLIST);
+  constructor() {
+    assertDevMode('preconnect link checker');
+    const blocklist = inject(PRECONNECT_CHECK_BLOCKLIST, {
+      optional: true
+    });
+    if (blocklist) {
+      this.populateBlocklist(blocklist);
+    }
+  }
+  populateBlocklist(origins) {
+    if (Array.isArray(origins)) {
+      deepForEach(origins, origin => {
+        this.blocklist.add(extractHostname(origin));
+      });
+    } else {
+      this.blocklist.add(extractHostname(origins));
+    }
+  }
+  assertPreconnect(rewrittenSrc, originalNgSrc) {
+    if (typeof ngServerMode !== 'undefined' && ngServerMode) return;
+    const imgUrl = getUrl(rewrittenSrc, this.window);
+    if (this.blocklist.has(imgUrl.hostname) || this.alreadySeen.has(imgUrl.origin)) return;
+    this.alreadySeen.add(imgUrl.origin);
+    this.preconnectLinks ??= this.queryPreconnectLinks();
+    if (!this.preconnectLinks.has(imgUrl.origin)) {
+      console.warn(_formatRuntimeError(2956, `${imgDirectiveDetails(originalNgSrc)} there is no preconnect tag present for this ` + `image. Preconnecting to the origin(s) that serve priority images ensures that these ` + `images are delivered as soon as possible. To fix this, please add the following ` + `element into the <head> of the document:\n` + `  <link rel="preconnect" href="${imgUrl.origin}">`));
+    }
+  }
+  queryPreconnectLinks() {
+    const preconnectUrls = new Set();
+    const links = this.document.querySelectorAll('link[rel=preconnect]');
+    for (const link of links) {
+      const url = getUrl(link.href, this.window);
+      preconnectUrls.add(url.origin);
+    }
+    return preconnectUrls;
+  }
+  ngOnDestroy() {
+    this.preconnectLinks?.clear();
+    this.alreadySeen.clear();
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "21.0.0-rc.0",
+    ngImport: i0,
+    type: PreconnectLinkChecker,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Injectable
+  });
+  static ɵprov = i0.ɵɵngDeclareInjectable({
+    minVersion: "12.0.0",
+    version: "21.0.0-rc.0",
+    ngImport: i0,
+    type: PreconnectLinkChecker,
+    providedIn: 'root'
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "21.0.0-rc.0",
+  ngImport: i0,
+  type: PreconnectLinkChecker,
+  decorators: [{
+    type: Injectable,
+    args: [{
+      providedIn: 'root'
+    }]
+  }],
+  ctorParameters: () => []
+});
 function deepForEach(input, fn) {
-    for (let value of input) {
-        Array.isArray(value) ? deepForEach(value, fn) : fn(value);
-    }
+  for (let value of input) {
+    Array.isArray(value) ? deepForEach(value, fn) : fn(value);
+  }
 }
 
-/**
- * In SSR scenarios, a preload `<link>` element is generated for priority images.
- * Having a large number of preload tags may negatively affect the performance,
- * so we warn developers (by throwing an error) if the number of preloaded images
- * is above a certain threshold. This const specifies this threshold.
- */
 const DEFAULT_PRELOADED_IMAGES_LIMIT = 5;
-/**
- * Helps to keep track of priority images that already have a corresponding
- * preload tag (to avoid generating multiple preload tags with the same URL).
- *
- * This Set tracks the original src passed into the `ngSrc` input not the src after it has been
- * run through the specified `IMAGE_LOADER`.
- */
 const PRELOADED_IMAGES = new InjectionToken(typeof ngDevMode === 'undefined' || ngDevMode ? 'NG_OPTIMIZED_PRELOADED_IMAGES' : '', {
-    providedIn: 'root',
-    factory: () => new Set(),
+  providedIn: 'root',
+  factory: () => new Set()
 });
 
-/**
- * @description Contains the logic needed to track and add preload link tags to the `<head>` tag. It
- * will also track what images have already had preload link tags added so as to not duplicate link
- * tags.
- *
- * In dev mode this service will validate that the number of preloaded images does not exceed the
- * configured default preloaded images limit: {@link DEFAULT_PRELOADED_IMAGES_LIMIT}.
- */
 class PreloadLinkCreator {
-    preloadedImages = inject(PRELOADED_IMAGES);
-    document = inject(DOCUMENT);
-    errorShown = false;
-    /**
-     * @description Add a preload `<link>` to the `<head>` of the `index.html` that is served from the
-     * server while using Angular Universal and SSR to kick off image loads for high priority images.
-     *
-     * The `sizes` (passed in from the user) and `srcset` (parsed and formatted from `ngSrcset`)
-     * properties used to set the corresponding attributes, `imagesizes` and `imagesrcset`
-     * respectively, on the preload `<link>` tag so that the correctly sized image is preloaded from
-     * the CDN.
-     *
-     * {@link https://web.dev/preload-responsive-images/#imagesrcset-and-imagesizes}
-     *
-     * @param renderer The `Renderer2` passed in from the directive
-     * @param src The original src of the image that is set on the `ngSrc` input.
-     * @param srcset The parsed and formatted srcset created from the `ngSrcset` input
-     * @param sizes The value of the `sizes` attribute passed in to the `<img>` tag
-     */
-    createPreloadLinkTag(renderer, src, srcset, sizes) {
-        if (ngDevMode &&
-            !this.errorShown &&
-            this.preloadedImages.size >= DEFAULT_PRELOADED_IMAGES_LIMIT) {
-            this.errorShown = true;
-            console.warn(_formatRuntimeError(2961 /* RuntimeErrorCode.TOO_MANY_PRELOADED_IMAGES */, `The \`NgOptimizedImage\` directive has detected that more than ` +
-                `${DEFAULT_PRELOADED_IMAGES_LIMIT} images were marked as priority. ` +
-                `This might negatively affect an overall performance of the page. ` +
-                `To fix this, remove the "priority" attribute from images with less priority.`));
-        }
-        if (this.preloadedImages.has(src)) {
-            return;
-        }
-        this.preloadedImages.add(src);
-        const preload = renderer.createElement('link');
-        renderer.setAttribute(preload, 'as', 'image');
-        renderer.setAttribute(preload, 'href', src);
-        renderer.setAttribute(preload, 'rel', 'preload');
-        renderer.setAttribute(preload, 'fetchpriority', 'high');
-        if (sizes) {
-            renderer.setAttribute(preload, 'imageSizes', sizes);
-        }
-        if (srcset) {
-            renderer.setAttribute(preload, 'imageSrcset', srcset);
-        }
-        renderer.appendChild(this.document.head, preload);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: PreloadLinkCreator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: PreloadLinkCreator, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: PreloadLinkCreator, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+  preloadedImages = inject(PRELOADED_IMAGES);
+  document = inject(DOCUMENT);
+  errorShown = false;
+  createPreloadLinkTag(renderer, src, srcset, sizes) {
+    if (ngDevMode && !this.errorShown && this.preloadedImages.size >= DEFAULT_PRELOADED_IMAGES_LIMIT) {
+      this.errorShown = true;
+      console.warn(_formatRuntimeError(2961, `The \`NgOptimizedImage\` directive has detected that more than ` + `${DEFAULT_PRELOADED_IMAGES_LIMIT} images were marked as priority. ` + `This might negatively affect an overall performance of the page. ` + `To fix this, remove the "priority" attribute from images with less priority.`));
+    }
+    if (this.preloadedImages.has(src)) {
+      return;
+    }
+    this.preloadedImages.add(src);
+    const preload = renderer.createElement('link');
+    renderer.setAttribute(preload, 'as', 'image');
+    renderer.setAttribute(preload, 'href', src);
+    renderer.setAttribute(preload, 'rel', 'preload');
+    renderer.setAttribute(preload, 'fetchpriority', 'high');
+    if (sizes) {
+      renderer.setAttribute(preload, 'imageSizes', sizes);
+    }
+    if (srcset) {
+      renderer.setAttribute(preload, 'imageSrcset', srcset);
+    }
+    renderer.appendChild(this.document.head, preload);
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "21.0.0-rc.0",
+    ngImport: i0,
+    type: PreloadLinkCreator,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Injectable
+  });
+  static ɵprov = i0.ɵɵngDeclareInjectable({
+    minVersion: "12.0.0",
+    version: "21.0.0-rc.0",
+    ngImport: i0,
+    type: PreloadLinkCreator,
+    providedIn: 'root'
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "21.0.0-rc.0",
+  ngImport: i0,
+  type: PreloadLinkCreator,
+  decorators: [{
+    type: Injectable,
+    args: [{
+      providedIn: 'root'
+    }]
+  }]
+});
 
-/**
- * When a Base64-encoded image is passed as an input to the `NgOptimizedImage` directive,
- * an error is thrown. The image content (as a string) might be very long, thus making
- * it hard to read an error message if the entire string is included. This const defines
- * the number of characters that should be included into the error message. The rest
- * of the content is truncated.
- */
 const BASE64_IMG_MAX_LENGTH_IN_ERROR = 50;
-/**
- * RegExpr to determine whether a src in a srcset is using width descriptors.
- * Should match something like: "100w, 200w".
- */
 const VALID_WIDTH_DESCRIPTOR_SRCSET = /^((\s*\d+w\s*(,|$)){1,})$/;
-/**
- * RegExpr to determine whether a src in a srcset is using density descriptors.
- * Should match something like: "1x, 2x, 50x". Also supports decimals like "1.5x, 1.50x".
- */
 const VALID_DENSITY_DESCRIPTOR_SRCSET = /^((\s*\d+(\.\d+)?x\s*(,|$)){1,})$/;
-/**
- * Srcset values with a density descriptor higher than this value will actively
- * throw an error. Such densities are not permitted as they cause image sizes
- * to be unreasonably large and slow down LCP.
- */
 const ABSOLUTE_SRCSET_DENSITY_CAP = 3;
-/**
- * Used only in error message text to communicate best practices, as we will
- * only throw based on the slightly more conservative ABSOLUTE_SRCSET_DENSITY_CAP.
- */
 const RECOMMENDED_SRCSET_DENSITY_CAP = 2;
-/**
- * Used in generating automatic density-based srcsets
- */
 const DENSITY_SRCSET_MULTIPLIERS = [1, 2];
-/**
- * Used to determine which breakpoints to use on full-width images
- */
 const VIEWPORT_BREAKPOINT_CUTOFF = 640;
-/**
- * Used to determine whether two aspect ratios are similar in value.
- */
 const ASPECT_RATIO_TOLERANCE = 0.1;
-/**
- * Used to determine whether the image has been requested at an overly
- * large size compared to the actual rendered image size (after taking
- * into account a typical device pixel ratio). In pixels.
- */
 const OVERSIZED_IMAGE_TOLERANCE = 1000;
-/**
- * Used to limit automatic srcset generation of very large sources for
- * fixed-size images. In pixels.
- */
 const FIXED_SRCSET_WIDTH_LIMIT = 1920;
 const FIXED_SRCSET_HEIGHT_LIMIT = 1080;
-/**
- * Placeholder dimension (height or width) limit in pixels. Angular produces a warning
- * when this limit is crossed.
- */
 const PLACEHOLDER_DIMENSION_LIMIT = 1000;
-/**
- * Used to warn or error when the user provides an overly large dataURL for the placeholder
- * attribute.
- * Character count of Base64 images is 1 character per byte, and base64 encoding is approximately
- * 33% larger than base images, so 4000 characters is around 3KB on disk and 10000 characters is
- * around 7.7KB. Experimentally, 4000 characters is about 20x20px in PNG or medium-quality JPEG
- * format, and 10,000 is around 50x50px, but there's quite a bit of variation depending on how the
- * image is saved.
- */
 const DATA_URL_WARN_LIMIT = 4000;
 const DATA_URL_ERROR_LIMIT = 10000;
-/** Info about built-in loaders we can test for. */
-const BUILT_IN_LOADERS = [
-    imgixLoaderInfo,
-    imageKitLoaderInfo,
-    cloudinaryLoaderInfo,
-    netlifyLoaderInfo,
-];
-/**
- * Threshold for the PRIORITY_TRUE_COUNT
- */
+const BUILT_IN_LOADERS = [imgixLoaderInfo, imageKitLoaderInfo, cloudinaryLoaderInfo, netlifyLoaderInfo];
 const PRIORITY_COUNT_THRESHOLD = 10;
-/**
- * This count is used to log a devMode warning
- * when the count of directive instances with priority=true
- * exceeds the threshold PRIORITY_COUNT_THRESHOLD
- */
 let IMGS_WITH_PRIORITY_ATTR_COUNT = 0;
-/**
- * Directive that improves image loading performance by enforcing best practices.
- *
- * `NgOptimizedImage` ensures that the loading of the Largest Contentful Paint (LCP) image is
- * prioritized by:
- * - Automatically setting the `fetchpriority` attribute on the `<img>` tag
- * - Lazy loading non-priority images by default
- * - Automatically generating a preconnect link tag in the document head
- *
- * In addition, the directive:
- * - Generates appropriate asset URLs if a corresponding `ImageLoader` function is provided
- * - Automatically generates a srcset
- * - Requires that `width` and `height` are set
- * - Warns if `width` or `height` have been set incorrectly
- * - Warns if the image will be visually distorted when rendered
- *
- * @usageNotes
- * The `NgOptimizedImage` directive is marked as [standalone](guide/components/importing) and can
- * be imported directly.
- *
- * Follow the steps below to enable and use the directive:
- * 1. Import it into the necessary NgModule or a standalone Component.
- * 2. Optionally provide an `ImageLoader` if you use an image hosting service.
- * 3. Update the necessary `<img>` tags in templates and replace `src` attributes with `ngSrc`.
- * Using a `ngSrc` allows the directive to control when the `src` gets set, which triggers an image
- * download.
- *
- * Step 1: import the `NgOptimizedImage` directive.
- *
- * ```ts
- * import { NgOptimizedImage } from '@angular/common';
- *
- * // Include it into the necessary NgModule
- * @NgModule({
- *   imports: [NgOptimizedImage],
- * })
- * class AppModule {}
- *
- * // ... or a standalone Component
- * @Component({
- *   imports: [NgOptimizedImage],
- * })
- * class MyStandaloneComponent {}
- * ```
- *
- * Step 2: configure a loader.
- *
- * To use the **default loader**: no additional code changes are necessary. The URL returned by the
- * generic loader will always match the value of "src". In other words, this loader applies no
- * transformations to the resource URL and the value of the `ngSrc` attribute will be used as is.
- *
- * To use an existing loader for a **third-party image service**: add the provider factory for your
- * chosen service to the `providers` array. In the example below, the Imgix loader is used:
- *
- * ```ts
- * import {provideImgixLoader} from '@angular/common';
- *
- * // Call the function and add the result to the `providers` array:
- * providers: [
- *   provideImgixLoader("https://my.base.url/"),
- * ],
- * ```
- *
- * The `NgOptimizedImage` directive provides the following functions:
- * - `provideCloudflareLoader`
- * - `provideCloudinaryLoader`
- * - `provideImageKitLoader`
- * - `provideImgixLoader`
- *
- * If you use a different image provider, you can create a custom loader function as described
- * below.
- *
- * To use a **custom loader**: provide your loader function as a value for the `IMAGE_LOADER` DI
- * token.
- *
- * ```ts
- * import {IMAGE_LOADER, ImageLoaderConfig} from '@angular/common';
- *
- * // Configure the loader using the `IMAGE_LOADER` token.
- * providers: [
- *   {
- *      provide: IMAGE_LOADER,
- *      useValue: (config: ImageLoaderConfig) => {
- *        return `https://example.com/${config.src}-${config.width}.jpg`;
- *      }
- *   },
- * ],
- * ```
- *
- * Step 3: update `<img>` tags in templates to use `ngSrc` instead of `src`.
- *
- * ```html
- * <img ngSrc="logo.png" width="200" height="100">
- * ```
- *
- * @publicApi
- * @see [Image Optimization Guide](guide/image-optimization)
- */
 class NgOptimizedImage {
-    imageLoader = inject(IMAGE_LOADER);
-    config = processConfig(inject(_IMAGE_CONFIG));
-    renderer = inject(Renderer2);
-    imgElement = inject(ElementRef).nativeElement;
-    injector = inject(Injector);
-    // An LCP image observer should be injected only in development mode.
-    // Do not assign it to `null` to avoid having a redundant property in the production bundle.
-    lcpObserver;
-    /**
-     * Calculate the rewritten `src` once and store it.
-     * This is needed to avoid repetitive calculations and make sure the directive cleanup in the
-     * `ngOnDestroy` does not rely on the `IMAGE_LOADER` logic (which in turn can rely on some other
-     * instance that might be already destroyed).
-     */
-    _renderedSrc = null;
-    /**
-     * Name of the source image.
-     * Image name will be processed by the image loader and the final URL will be applied as the `src`
-     * property of the image.
-     */
-    ngSrc;
-    /**
-     * A comma separated list of width or density descriptors.
-     * The image name will be taken from `ngSrc` and combined with the list of width or density
-     * descriptors to generate the final `srcset` property of the image.
-     *
-     * Example:
-     * ```html
-     * <img ngSrc="hello.jpg" ngSrcset="100w, 200w" />  =>
-     * <img src="path/hello.jpg" srcset="path/hello.jpg?w=100 100w, path/hello.jpg?w=200 200w" />
-     * ```
-     */
-    ngSrcset;
-    /**
-     * The base `sizes` attribute passed through to the `<img>` element.
-     * Providing sizes causes the image to create an automatic responsive srcset.
-     */
-    sizes;
-    /**
-     * For responsive images: the intrinsic width of the image in pixels.
-     * For fixed size images: the desired rendered width of the image in pixels.
-     */
-    width;
-    /**
-     * For responsive images: the intrinsic height of the image in pixels.
-     * For fixed size images: the desired rendered height of the image in pixels.
-     */
-    height;
-    /**
-     * The desired decoding behavior for the image. Defaults to `auto`
-     * if not explicitly set, matching native browser behavior.
-     *
-     * Use `async` to decode the image off the main thread (non-blocking),
-     * `sync` for immediate decoding (blocking), or `auto` to let the
-     * browser decide the optimal strategy.
-     *
-     * [Spec](https://html.spec.whatwg.org/multipage/images.html#image-decoding-hint)
-     */
-    decoding;
-    /**
-     * The desired loading behavior (lazy, eager, or auto). Defaults to `lazy`,
-     * which is recommended for most images.
-     *
-     * Warning: Setting images as loading="eager" or loading="auto" marks them
-     * as non-priority images and can hurt loading performance. For images which
-     * may be the LCP element, use the `priority` attribute instead of `loading`.
-     */
-    loading;
-    /**
-     * Indicates whether this image should have a high priority.
-     */
-    priority = false;
-    /**
-     * Data to pass through to custom loaders.
-     */
-    loaderParams;
-    /**
-     * Disables automatic srcset generation for this image.
-     */
-    disableOptimizedSrcset = false;
-    /**
-     * Sets the image to "fill mode", which eliminates the height/width requirement and adds
-     * styles such that the image fills its containing element.
-     */
-    fill = false;
-    /**
-     * A URL or data URL for an image to be used as a placeholder while this image loads.
-     */
-    placeholder;
-    /**
-     * Configuration object for placeholder settings. Options:
-     *   * blur: Setting this to false disables the automatic CSS blur.
-     */
-    placeholderConfig;
-    /**
-     * Value of the `src` attribute if set on the host `<img>` element.
-     * This input is exclusively read to assert that `src` is not set in conflict
-     * with `ngSrc` and that images don't start to load until a lazy loading strategy is set.
-     * @internal
-     */
-    src;
-    /**
-     * Value of the `srcset` attribute if set on the host `<img>` element.
-     * This input is exclusively read to assert that `srcset` is not set in conflict
-     * with `ngSrcset` and that images don't start to load until a lazy loading strategy is set.
-     * @internal
-     */
-    srcset;
-    constructor() {
-        if (ngDevMode) {
-            this.lcpObserver = this.injector.get(LCPImageObserver);
-            // Using `DestroyRef` to avoid having an empty `ngOnDestroy` method since this
-            // is only run in development mode.
-            const destroyRef = inject(DestroyRef);
-            destroyRef.onDestroy(() => {
-                if (!this.priority && this._renderedSrc !== null) {
-                    this.lcpObserver.unregisterImage(this._renderedSrc);
-                }
-            });
-        }
-    }
-    /** @docs-private */
-    ngOnInit() {
-        _performanceMarkFeature('NgOptimizedImage');
-        if (ngDevMode) {
-            const ngZone = this.injector.get(NgZone);
-            assertNonEmptyInput(this, 'ngSrc', this.ngSrc);
-            assertValidNgSrcset(this, this.ngSrcset);
-            assertNoConflictingSrc(this);
-            if (this.ngSrcset) {
-                assertNoConflictingSrcset(this);
-            }
-            assertNotBase64Image(this);
-            assertNotBlobUrl(this);
-            if (this.fill) {
-                assertEmptyWidthAndHeight(this);
-                // This leaves the Angular zone to avoid triggering unnecessary change detection cycles when
-                // `load` tasks are invoked on images.
-                ngZone.runOutsideAngular(() => assertNonZeroRenderedHeight(this, this.imgElement, this.renderer));
-            }
-            else {
-                assertNonEmptyWidthAndHeight(this);
-                if (this.height !== undefined) {
-                    assertGreaterThanZero(this, this.height, 'height');
-                }
-                if (this.width !== undefined) {
-                    assertGreaterThanZero(this, this.width, 'width');
-                }
-                // Only check for distorted images when not in fill mode, where
-                // images may be intentionally stretched, cropped or letterboxed.
-                ngZone.runOutsideAngular(() => assertNoImageDistortion(this, this.imgElement, this.renderer));
-            }
-            assertValidLoadingInput(this);
-            assertValidDecodingInput(this);
-            if (!this.ngSrcset) {
-                assertNoComplexSizes(this);
-            }
-            assertValidPlaceholder(this, this.imageLoader);
-            assertNotMissingBuiltInLoader(this.ngSrc, this.imageLoader);
-            assertNoNgSrcsetWithoutLoader(this, this.imageLoader);
-            assertNoLoaderParamsWithoutLoader(this, this.imageLoader);
-            ngZone.runOutsideAngular(() => {
-                this.lcpObserver.registerImage(this.getRewrittenSrc(), this.ngSrc, this.priority);
-            });
-            if (this.priority) {
-                const checker = this.injector.get(PreconnectLinkChecker);
-                checker.assertPreconnect(this.getRewrittenSrc(), this.ngSrc);
-                if (typeof ngServerMode !== 'undefined' && !ngServerMode) {
-                    const applicationRef = this.injector.get(ApplicationRef);
-                    assetPriorityCountBelowThreshold(applicationRef);
-                }
-            }
+  imageLoader = inject(IMAGE_LOADER);
+  config = processConfig(inject(_IMAGE_CONFIG));
+  renderer = inject(Renderer2);
+  imgElement = inject(ElementRef).nativeElement;
+  injector = inject(Injector);
+  lcpObserver;
+  _renderedSrc = null;
+  ngSrc;
+  ngSrcset;
+  sizes;
+  width;
+  height;
+  decoding;
+  loading;
+  priority = false;
+  loaderParams;
+  disableOptimizedSrcset = false;
+  fill = false;
+  placeholder;
+  placeholderConfig;
+  src;
+  srcset;
+  constructor() {
+    if (ngDevMode) {
+      this.lcpObserver = this.injector.get(LCPImageObserver);
+      const destroyRef = inject(DestroyRef);
+      destroyRef.onDestroy(() => {
+        if (!this.priority && this._renderedSrc !== null) {
+          this.lcpObserver.unregisterImage(this._renderedSrc);
         }
-        if (this.placeholder) {
-            this.removePlaceholderOnLoad(this.imgElement);
-        }
-        this.setHostAttributes();
-    }
-    setHostAttributes() {
-        // Must set width/height explicitly in case they are bound (in which case they will
-        // only be reflected and not found by the browser)
-        if (this.fill) {
-            this.sizes ||= '100vw';
+      });
+    }
+  }
+  ngOnInit() {
+    _performanceMarkFeature('NgOptimizedImage');
+    if (ngDevMode) {
+      const ngZone = this.injector.get(NgZone);
+      assertNonEmptyInput(this, 'ngSrc', this.ngSrc);
+      assertValidNgSrcset(this, this.ngSrcset);
+      assertNoConflictingSrc(this);
+      if (this.ngSrcset) {
+        assertNoConflictingSrcset(this);
+      }
+      assertNotBase64Image(this);
+      assertNotBlobUrl(this);
+      if (this.fill) {
+        assertEmptyWidthAndHeight(this);
+        ngZone.runOutsideAngular(() => assertNonZeroRenderedHeight(this, this.imgElement, this.renderer));
+      } else {
+        assertNonEmptyWidthAndHeight(this);
+        if (this.height !== undefined) {
+          assertGreaterThanZero(this, this.height, 'height');
         }
-        else {
-            this.setHostAttribute('width', this.width.toString());
-            this.setHostAttribute('height', this.height.toString());
+        if (this.width !== undefined) {
+          assertGreaterThanZero(this, this.width, 'width');
         }
-        this.setHostAttribute('loading', this.getLoadingBehavior());
-        this.setHostAttribute('fetchpriority', this.getFetchPriority());
-        this.setHostAttribute('decoding', this.getDecoding());
-        // The `data-ng-img` attribute flags an image as using the directive, to allow
-        // for analysis of the directive's performance.
-        this.setHostAttribute('ng-img', 'true');
-        // The `src` and `srcset` attributes should be set last since other attributes
-        // could affect the image's loading behavior.
-        const rewrittenSrcset = this.updateSrcAndSrcset();
-        if (this.sizes) {
-            if (this.getLoadingBehavior() === 'lazy') {
-                this.setHostAttribute('sizes', 'auto, ' + this.sizes);
-            }
-            else {
-                this.setHostAttribute('sizes', this.sizes);
-            }
+        ngZone.runOutsideAngular(() => assertNoImageDistortion(this, this.imgElement, this.renderer));
+      }
+      assertValidLoadingInput(this);
+      assertValidDecodingInput(this);
+      if (!this.ngSrcset) {
+        assertNoComplexSizes(this);
+      }
+      assertValidPlaceholder(this, this.imageLoader);
+      assertNotMissingBuiltInLoader(this.ngSrc, this.imageLoader);
+      assertNoNgSrcsetWithoutLoader(this, this.imageLoader);
+      assertNoLoaderParamsWithoutLoader(this, this.imageLoader);
+      ngZone.runOutsideAngular(() => {
+        this.lcpObserver.registerImage(this.getRewrittenSrc(), this.ngSrc, this.priority);
+      });
+      if (this.priority) {
+        const checker = this.injector.get(PreconnectLinkChecker);
+        checker.assertPreconnect(this.getRewrittenSrc(), this.ngSrc);
+        if (typeof ngServerMode !== 'undefined' && !ngServerMode) {
+          const applicationRef = this.injector.get(ApplicationRef);
+          assetPriorityCountBelowThreshold(applicationRef);
         }
-        else {
-            if (this.ngSrcset &&
-                VALID_WIDTH_DESCRIPTOR_SRCSET.test(this.ngSrcset) &&
-                this.getLoadingBehavior() === 'lazy') {
-                this.setHostAttribute('sizes', 'auto, 100vw');
-            }
+      }
+    }
+    if (this.placeholder) {
+      this.removePlaceholderOnLoad(this.imgElement);
+    }
+    this.setHostAttributes();
+  }
+  setHostAttributes() {
+    if (this.fill) {
+      this.sizes ||= '100vw';
+    } else {
+      this.setHostAttribute('width', this.width.toString());
+      this.setHostAttribute('height', this.height.toString());
+    }
+    this.setHostAttribute('loading', this.getLoadingBehavior());
+    this.setHostAttribute('fetchpriority', this.getFetchPriority());
+    this.setHostAttribute('decoding', this.getDecoding());
+    this.setHostAttribute('ng-img', 'true');
+    const rewrittenSrcset = this.updateSrcAndSrcset();
+    if (this.sizes) {
+      if (this.getLoadingBehavior() === 'lazy') {
+        this.setHostAttribute('sizes', 'auto, ' + this.sizes);
+      } else {
+        this.setHostAttribute('sizes', this.sizes);
+      }
+    } else {
+      if (this.ngSrcset && VALID_WIDTH_DESCRIPTOR_SRCSET.test(this.ngSrcset) && this.getLoadingBehavior() === 'lazy') {
+        this.setHostAttribute('sizes', 'auto, 100vw');
+      }
+    }
+    if (typeof ngServerMode !== 'undefined' && ngServerMode && this.priority) {
+      const preloadLinkCreator = this.injector.get(PreloadLinkCreator);
+      preloadLinkCreator.createPreloadLinkTag(this.renderer, this.getRewrittenSrc(), rewrittenSrcset, this.sizes);
+    }
+  }
+  ngOnChanges(changes) {
+    if (ngDevMode) {
+      assertNoPostInitInputChange(this, changes, ['ngSrcset', 'width', 'height', 'priority', 'fill', 'loading', 'sizes', 'loaderParams', 'disableOptimizedSrcset']);
+    }
+    if (changes['ngSrc'] && !changes['ngSrc'].isFirstChange()) {
+      const oldSrc = this._renderedSrc;
+      this.updateSrcAndSrcset(true);
+      if (ngDevMode) {
+        const newSrc = this._renderedSrc;
+        if (oldSrc && newSrc && oldSrc !== newSrc) {
+          const ngZone = this.injector.get(NgZone);
+          ngZone.runOutsideAngular(() => {
+            this.lcpObserver.updateImage(oldSrc, newSrc);
+          });
         }
-        if (typeof ngServerMode !== 'undefined' && ngServerMode && this.priority) {
-            const preloadLinkCreator = this.injector.get(PreloadLinkCreator);
-            preloadLinkCreator.createPreloadLinkTag(this.renderer, this.getRewrittenSrc(), rewrittenSrcset, this.sizes);
-        }
-    }
-    /** @docs-private */
-    ngOnChanges(changes) {
-        if (ngDevMode) {
-            assertNoPostInitInputChange(this, changes, [
-                'ngSrcset',
-                'width',
-                'height',
-                'priority',
-                'fill',
-                'loading',
-                'sizes',
-                'loaderParams',
-                'disableOptimizedSrcset',
-            ]);
-        }
-        if (changes['ngSrc'] && !changes['ngSrc'].isFirstChange()) {
-            const oldSrc = this._renderedSrc;
-            this.updateSrcAndSrcset(true);
-            if (ngDevMode) {
-                const newSrc = this._renderedSrc;
-                if (oldSrc && newSrc && oldSrc !== newSrc) {
-                    const ngZone = this.injector.get(NgZone);
-                    ngZone.runOutsideAngular(() => {
-                        this.lcpObserver.updateImage(oldSrc, newSrc);
-                    });
-                }
-            }
-        }
-        if (ngDevMode &&
-            changes['placeholder']?.currentValue &&
-            typeof ngServerMode !== 'undefined' &&
-            !ngServerMode) {
-            assertPlaceholderDimensions(this, this.imgElement);
-        }
-    }
-    callImageLoader(configWithoutCustomParams) {
-        let augmentedConfig = configWithoutCustomParams;
-        if (this.loaderParams) {
-            augmentedConfig.loaderParams = this.loaderParams;
-        }
-        return this.imageLoader(augmentedConfig);
-    }
-    getLoadingBehavior() {
-        if (!this.priority && this.loading !== undefined) {
-            return this.loading;
-        }
-        return this.priority ? 'eager' : 'lazy';
-    }
-    getFetchPriority() {
-        return this.priority ? 'high' : 'auto';
-    }
-    getDecoding() {
-        if (this.priority) {
-            // `sync` means the image is decoded immediately when it's loaded,
-            // reducing the risk of content shifting later (important for LCP).
-            // If we're marking an image as priority, we want it decoded and
-            // painted as early as possible.
-            return 'sync';
-        }
-        // Returns the value of the `decoding` attribute, defaulting to `auto`
-        // if not explicitly provided. This mimics native browser behavior and
-        // avoids breaking changes when no decoding strategy is specified.
-        return this.decoding ?? 'auto';
-    }
-    getRewrittenSrc() {
-        // ImageLoaderConfig supports setting a width property. However, we're not setting width here
-        // because if the developer uses rendered width instead of intrinsic width in the HTML width
-        // attribute, the image requested may be too small for 2x+ screens.
-        if (!this._renderedSrc) {
-            const imgConfig = { src: this.ngSrc };
-            // Cache calculated image src to reuse it later in the code.
-            this._renderedSrc = this.callImageLoader(imgConfig);
-        }
-        return this._renderedSrc;
-    }
-    getRewrittenSrcset() {
-        const widthSrcSet = VALID_WIDTH_DESCRIPTOR_SRCSET.test(this.ngSrcset);
-        const finalSrcs = this.ngSrcset
-            .split(',')
-            .filter((src) => src !== '')
-            .map((srcStr) => {
-            srcStr = srcStr.trim();
-            const width = widthSrcSet ? parseFloat(srcStr) : parseFloat(srcStr) * this.width;
-            return `${this.callImageLoader({ src: this.ngSrc, width })} ${srcStr}`;
-        });
-        return finalSrcs.join(', ');
-    }
-    getAutomaticSrcset() {
-        if (this.sizes) {
-            return this.getResponsiveSrcset();
-        }
-        else {
-            return this.getFixedSrcset();
-        }
-    }
-    getResponsiveSrcset() {
-        const { breakpoints } = this.config;
-        let filteredBreakpoints = breakpoints;
-        if (this.sizes?.trim() === '100vw') {
-            // Since this is a full-screen-width image, our srcset only needs to include
-            // breakpoints with full viewport widths.
-            filteredBreakpoints = breakpoints.filter((bp) => bp >= VIEWPORT_BREAKPOINT_CUTOFF);
-        }
-        const finalSrcs = filteredBreakpoints.map((bp) => `${this.callImageLoader({ src: this.ngSrc, width: bp })} ${bp}w`);
-        return finalSrcs.join(', ');
-    }
-    updateSrcAndSrcset(forceSrcRecalc = false) {
-        if (forceSrcRecalc) {
-            // Reset cached value, so that the followup `getRewrittenSrc()` call
-            // will recalculate it and update the cache.
-            this._renderedSrc = null;
-        }
-        const rewrittenSrc = this.getRewrittenSrc();
-        this.setHostAttribute('src', rewrittenSrc);
-        let rewrittenSrcset = undefined;
-        if (this.ngSrcset) {
-            rewrittenSrcset = this.getRewrittenSrcset();
-        }
-        else if (this.shouldGenerateAutomaticSrcset()) {
-            rewrittenSrcset = this.getAutomaticSrcset();
-        }
-        if (rewrittenSrcset) {
-            this.setHostAttribute('srcset', rewrittenSrcset);
-        }
-        return rewrittenSrcset;
-    }
-    getFixedSrcset() {
-        const finalSrcs = DENSITY_SRCSET_MULTIPLIERS.map((multiplier) => `${this.callImageLoader({
-            src: this.ngSrc,
-            width: this.width * multiplier,
-        })} ${multiplier}x`);
-        return finalSrcs.join(', ');
-    }
-    shouldGenerateAutomaticSrcset() {
-        let oversizedImage = false;
-        if (!this.sizes) {
-            oversizedImage =
-                this.width > FIXED_SRCSET_WIDTH_LIMIT || this.height > FIXED_SRCSET_HEIGHT_LIMIT;
-        }
-        return (!this.disableOptimizedSrcset &&
-            !this.srcset &&
-            this.imageLoader !== noopImageLoader &&
-            !oversizedImage);
-    }
-    /**
-     * Returns an image url formatted for use with the CSS background-image property. Expects one of:
-     * * A base64 encoded image, which is wrapped and passed through.
-     * * A boolean. If true, calls the image loader to generate a small placeholder url.
-     */
-    generatePlaceholder(placeholderInput) {
-        const { placeholderResolution } = this.config;
-        if (placeholderInput === true) {
-            return `url(${this.callImageLoader({
-                src: this.ngSrc,
-                width: placeholderResolution,
-                isPlaceholder: true,
-            })})`;
-        }
-        else if (typeof placeholderInput === 'string') {
-            return `url(${placeholderInput})`;
-        }
-        return null;
-    }
-    /**
-     * Determines if blur should be applied, based on an optional boolean
-     * property `blur` within the optional configuration object `placeholderConfig`.
-     */
-    shouldBlurPlaceholder(placeholderConfig) {
-        if (!placeholderConfig || !placeholderConfig.hasOwnProperty('blur')) {
-            return true;
-        }
-        return Boolean(placeholderConfig.blur);
-    }
-    removePlaceholderOnLoad(img) {
-        const callback = () => {
-            const changeDetectorRef = this.injector.get(ChangeDetectorRef);
-            removeLoadListenerFn();
-            removeErrorListenerFn();
-            this.placeholder = false;
-            changeDetectorRef.markForCheck();
-        };
-        const removeLoadListenerFn = this.renderer.listen(img, 'load', callback);
-        const removeErrorListenerFn = this.renderer.listen(img, 'error', callback);
-        callOnLoadIfImageIsLoaded(img, callback);
-    }
-    setHostAttribute(name, value) {
-        this.renderer.setAttribute(this.imgElement, name, value);
+      }
+    }
+    if (ngDevMode && changes['placeholder']?.currentValue && typeof ngServerMode !== 'undefined' && !ngServerMode) {
+      assertPlaceholderDimensions(this, this.imgElement);
+    }
+  }
+  callImageLoader(configWithoutCustomParams) {
+    let augmentedConfig = configWithoutCustomParams;
+    if (this.loaderParams) {
+      augmentedConfig.loaderParams = this.loaderParams;
+    }
+    return this.imageLoader(augmentedConfig);
+  }
+  getLoadingBehavior() {
+    if (!this.priority && this.loading !== undefined) {
+      return this.loading;
+    }
+    return this.priority ? 'eager' : 'lazy';
+  }
+  getFetchPriority() {
+    return this.priority ? 'high' : 'auto';
+  }
+  getDecoding() {
+    if (this.priority) {
+      return 'sync';
+    }
+    return this.decoding ?? 'auto';
+  }
+  getRewrittenSrc() {
+    if (!this._renderedSrc) {
+      const imgConfig = {
+        src: this.ngSrc
+      };
+      this._renderedSrc = this.callImageLoader(imgConfig);
+    }
+    return this._renderedSrc;
+  }
+  getRewrittenSrcset() {
+    const widthSrcSet = VALID_WIDTH_DESCRIPTOR_SRCSET.test(this.ngSrcset);
+    const finalSrcs = this.ngSrcset.split(',').filter(src => src !== '').map(srcStr => {
+      srcStr = srcStr.trim();
+      const width = widthSrcSet ? parseFloat(srcStr) : parseFloat(srcStr) * this.width;
+      return `${this.callImageLoader({
+        src: this.ngSrc,
+        width
+      })} ${srcStr}`;
+    });
+    return finalSrcs.join(', ');
+  }
+  getAutomaticSrcset() {
+    if (this.sizes) {
+      return this.getResponsiveSrcset();
+    } else {
+      return this.getFixedSrcset();
+    }
+  }
+  getResponsiveSrcset() {
+    const {
+      breakpoints
+    } = this.config;
+    let filteredBreakpoints = breakpoints;
+    if (this.sizes?.trim() === '100vw') {
+      filteredBreakpoints = breakpoints.filter(bp => bp >= VIEWPORT_BREAKPOINT_CUTOFF);
+    }
+    const finalSrcs = filteredBreakpoints.map(bp => `${this.callImageLoader({
+      src: this.ngSrc,
+      width: bp
+    })} ${bp}w`);
+    return finalSrcs.join(', ');
+  }
+  updateSrcAndSrcset(forceSrcRecalc = false) {
+    if (forceSrcRecalc) {
+      this._renderedSrc = null;
+    }
+    const rewrittenSrc = this.getRewrittenSrc();
+    this.setHostAttribute('src', rewrittenSrc);
+    let rewrittenSrcset = undefined;
+    if (this.ngSrcset) {
+      rewrittenSrcset = this.getRewrittenSrcset();
+    } else if (this.shouldGenerateAutomaticSrcset()) {
+      rewrittenSrcset = this.getAutomaticSrcset();
+    }
+    if (rewrittenSrcset) {
+      this.setHostAttribute('srcset', rewrittenSrcset);
+    }
+    return rewrittenSrcset;
+  }
+  getFixedSrcset() {
+    const finalSrcs = DENSITY_SRCSET_MULTIPLIERS.map(multiplier => `${this.callImageLoader({
+      src: this.ngSrc,
+      width: this.width * multiplier
+    })} ${multiplier}x`);
+    return finalSrcs.join(', ');
+  }
+  shouldGenerateAutomaticSrcset() {
+    let oversizedImage = false;
+    if (!this.sizes) {
+      oversizedImage = this.width > FIXED_SRCSET_WIDTH_LIMIT || this.height > FIXED_SRCSET_HEIGHT_LIMIT;
+    }
+    return !this.disableOptimizedSrcset && !this.srcset && this.imageLoader !== noopImageLoader && !oversizedImage;
+  }
+  generatePlaceholder(placeholderInput) {
+    const {
+      placeholderResolution
+    } = this.config;
+    if (placeholderInput === true) {
+      return `url(${this.callImageLoader({
+        src: this.ngSrc,
+        width: placeholderResolution,
+        isPlaceholder: true
+      })})`;
+    } else if (typeof placeholderInput === 'string') {
+      return `url(${placeholderInput})`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: NgOptimizedImage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0-next.9", type: NgOptimizedImage, isStandalone: true, selector: "img[ngSrc]", inputs: { ngSrc: ["ngSrc", "ngSrc", unwrapSafeUrl], ngSrcset: "ngSrcset", sizes: "sizes", width: ["width", "width", numberAttribute], height: ["height", "height", numberAttribute], decoding: "decoding", loading: "loading", priority: ["priority", "priority", booleanAttribute], loaderParams: "loaderParams", disableOptimizedSrcset: ["disableOptimizedSrcset", "disableOptimizedSrcset", booleanAttribute], fill: ["fill", "fill", booleanAttribute], placeholder: ["placeholder", "placeholder", booleanOrUrlAttribute], placeholderConfig: "placeholderConfig", src: "src", srcset: "srcset" }, host: { properties: { "style.position": "fill ? \"absolute\" : null", "style.width": "fill ? \"100%\" : null", "style.height": "fill ? \"100%\" : null", "style.inset": "fill ? \"0\" : null", "style.background-size": "placeholder ? \"cover\" : null", "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(15px)\" : null" } }, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: NgOptimizedImage, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'img[ngSrc]',
-                    host: {
-                        '[style.position]': 'fill ? "absolute" : null',
-                        '[style.width]': 'fill ? "100%" : null',
-                        '[style.height]': 'fill ? "100%" : null',
-                        '[style.inset]': 'fill ? "0" : null',
-                        '[style.background-size]': 'placeholder ? "cover" : null',
-                        '[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(15px)" : null',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { ngSrc: [{
-                type: Input,
-                args: [{ required: true, transform: unwrapSafeUrl }]
-            }], ngSrcset: [{
-                type: Input
-            }], sizes: [{
-                type: Input
-            }], width: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], height: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], decoding: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], priority: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], loaderParams: [{
-                type: Input
-            }], disableOptimizedSrcset: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], fill: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], placeholder: [{
-                type: Input,
-                args: [{ transform: booleanOrUrlAttribute }]
-            }], placeholderConfig: [{
-                type: Input
-            }], src: [{
-                type: Input
-            }], srcset: [{
-                type: Input
-            }] } });
-/***** Helpers *****/
-/**
- * Sorts provided config breakpoints and uses defaults.
- */
+    return null;
+  }
+  shouldBlurPlaceholder(placeholderConfig) {
+    if (!placeholderConfig || !placeholderConfig.hasOwnProperty('blur')) {
+      return true;
+    }
+    return Boolean(placeholderConfig.blur);
+  }
+  removePlaceholderOnLoad(img) {
+    const callback = () => {
+      const changeDetectorRef = this.injector.get(ChangeDetectorRef);
+      removeLoadListenerFn();
+      removeErrorListenerFn();
+      this.placeholder = false;
+      changeDetectorRef.markForCheck();
+    };
+    const removeLoadListenerFn = this.renderer.listen(img, 'load', callback);
+    const removeErrorListenerFn = this.renderer.listen(img, 'error', callback);
+    callOnLoadIfImageIsLoaded(img, callback);
+  }
+  setHostAttribute(name, value) {
+    this.renderer.setAttribute(this.imgElement, name, value);
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "21.0.0-rc.0",
+    ngImport: i0,
+    type: NgOptimizedImage,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "16.1.0",
+    version: "21.0.0-rc.0",
+    type: NgOptimizedImage,
+    isStandalone: true,
+    selector: "img[ngSrc]",
+    inputs: {
+      ngSrc: ["ngSrc", "ngSrc", unwrapSafeUrl],
+      ngSrcset: "ngSrcset",
+      sizes: "sizes",
+      width: ["width", "width", numberAttribute],
+      height: ["height", "height", numberAttribute],
+      decoding: "decoding",
+      loading: "loading",
+      priority: ["priority", "priority", booleanAttribute],
+      loaderParams: "loaderParams",
+      disableOptimizedSrcset: ["disableOptimizedSrcset", "disableOptimizedSrcset", booleanAttribute],
+      fill: ["fill", "fill", booleanAttribute],
+      placeholder: ["placeholder", "placeholder", booleanOrUrlAttribute],
+      placeholderConfig: "placeholderConfig",
+      src: "src",
+      srcset: "srcset"
+    },
+    host: {
+      properties: {
+        "style.position": "fill ? \"absolute\" : null",
+        "style.width": "fill ? \"100%\" : null",
+        "style.height": "fill ? \"100%\" : null",
+        "style.inset": "fill ? \"0\" : null",
+        "style.background-size": "placeholder ? \"cover\" : null",
+        "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(15px)\" : null"
+      }
+    },
+    usesOnChanges: true,
+    ngImport: i0
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "21.0.0-rc.0",
+  ngImport: i0,
+  type: NgOptimizedImage,
+  decorators: [{
+    type: Directive,
+    args: [{
+      selector: 'img[ngSrc]',
+      host: {
+        '[style.position]': 'fill ? "absolute" : null',
+        '[style.width]': 'fill ? "100%" : null',
+        '[style.height]': 'fill ? "100%" : null',
+        '[style.inset]': 'fill ? "0" : null',
+        '[style.background-size]': 'placeholder ? "cover" : null',
+        '[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(15px)" : null'
+      }
+    }]
+  }],
+  ctorParameters: () => [],
+  propDecorators: {
+    ngSrc: [{
+      type: Input,
+      args: [{
+        required: true,
+        transform: unwrapSafeUrl
+      }]
+    }],
+    ngSrcset: [{
+      type: Input
+    }],
+    sizes: [{
+      type: Input
+    }],
+    width: [{
+      type: Input,
+      args: [{
+        transform: numberAttribute
+      }]
+    }],
+    height: [{
+      type: Input,
+      args: [{
+        transform: numberAttribute
+      }]
+    }],
+    decoding: [{
+      type: Input
+    }],
+    loading: [{
+      type: Input
+    }],
+    priority: [{
+      type: Input,
+      args: [{
+        transform: booleanAttribute
+      }]
+    }],
+    loaderParams: [{
+      type: Input
+    }],
+    disableOptimizedSrcset: [{
+      type: Input,
+      args: [{
+        transform: booleanAttribute
+      }]
+    }],
+    fill: [{
+      type: Input,
+      args: [{
+        transform: booleanAttribute
+      }]
+    }],
+    placeholder: [{
+      type: Input,
+      args: [{
+        transform: booleanOrUrlAttribute
+      }]
+    }],
+    placeholderConfig: [{
+      type: Input
+    }],
+    src: [{
+      type: Input
+    }],
+    srcset: [{
+      type: Input
+    }]
+  }
+});
 function processConfig(config) {
-    let sortedBreakpoints = {};
-    if (config.breakpoints) {
-        sortedBreakpoints.breakpoints = config.breakpoints.sort((a, b) => a - b);
-    }
-    return Object.assign({}, _IMAGE_CONFIG_DEFAULTS, config, sortedBreakpoints);
+  let sortedBreakpoints = {};
+  if (config.breakpoints) {
+    sortedBreakpoints.breakpoints = config.breakpoints.sort((a, b) => a - b);
+  }
+  return Object.assign({}, _IMAGE_CONFIG_DEFAULTS, config, sortedBreakpoints);
 }
-/***** Assert functions *****/
-/**
- * Verifies that there is no `src` set on a host element.
- */
 function assertNoConflictingSrc(dir) {
-    if (dir.src) {
-        throw new _RuntimeError(2950 /* RuntimeErrorCode.UNEXPECTED_SRC_ATTR */, `${imgDirectiveDetails(dir.ngSrc)} both \`src\` and \`ngSrc\` have been set. ` +
-            `Supplying both of these attributes breaks lazy loading. ` +
-            `The NgOptimizedImage directive sets \`src\` itself based on the value of \`ngSrc\`. ` +
-            `To fix this, please remove the \`src\` attribute.`);
-    }
+  if (dir.src) {
+    throw new _RuntimeError(2950, `${imgDirectiveDetails(dir.ngSrc)} both \`src\` and \`ngSrc\` have been set. ` + `Supplying both of these attributes breaks lazy loading. ` + `The NgOptimizedImage directive sets \`src\` itself based on the value of \`ngSrc\`. ` + `To fix this, please remove the \`src\` attribute.`);
+  }
 }
-/**
- * Verifies that there is no `srcset` set on a host element.
- */
 function assertNoConflictingSrcset(dir) {
-    if (dir.srcset) {
-        throw new _RuntimeError(2951 /* RuntimeErrorCode.UNEXPECTED_SRCSET_ATTR */, `${imgDirectiveDetails(dir.ngSrc)} both \`srcset\` and \`ngSrcset\` have been set. ` +
-            `Supplying both of these attributes breaks lazy loading. ` +
-            `The NgOptimizedImage directive sets \`srcset\` itself based on the value of ` +
-            `\`ngSrcset\`. To fix this, please remove the \`srcset\` attribute.`);
-    }
+  if (dir.srcset) {
+    throw new _RuntimeError(2951, `${imgDirectiveDetails(dir.ngSrc)} both \`srcset\` and \`ngSrcset\` have been set. ` + `Supplying both of these attributes breaks lazy loading. ` + `The NgOptimizedImage directive sets \`srcset\` itself based on the value of ` + `\`ngSrcset\`. To fix this, please remove the \`srcset\` attribute.`);
+  }
 }
-/**
- * Verifies that the `ngSrc` is not a Base64-encoded image.
- */
 function assertNotBase64Image(dir) {
-    let ngSrc = dir.ngSrc.trim();
-    if (ngSrc.startsWith('data:')) {
-        if (ngSrc.length > BASE64_IMG_MAX_LENGTH_IN_ERROR) {
-            ngSrc = ngSrc.substring(0, BASE64_IMG_MAX_LENGTH_IN_ERROR) + '...';
-        }
-        throw new _RuntimeError(2952 /* RuntimeErrorCode.INVALID_INPUT */, `${imgDirectiveDetails(dir.ngSrc, false)} \`ngSrc\` is a Base64-encoded string ` +
-            `(${ngSrc}). NgOptimizedImage does not support Base64-encoded strings. ` +
-            `To fix this, disable the NgOptimizedImage directive for this element ` +
-            `by removing \`ngSrc\` and using a standard \`src\` attribute instead.`);
+  let ngSrc = dir.ngSrc.trim();
+  if (ngSrc.startsWith('data:')) {
+    if (ngSrc.length > BASE64_IMG_MAX_LENGTH_IN_ERROR) {
+      ngSrc = ngSrc.substring(0, BASE64_IMG_MAX_LENGTH_IN_ERROR) + '...';
     }
+    throw new _RuntimeError(2952, `${imgDirectiveDetails(dir.ngSrc, false)} \`ngSrc\` is a Base64-encoded string ` + `(${ngSrc}). NgOptimizedImage does not support Base64-encoded strings. ` + `To fix this, disable the NgOptimizedImage directive for this element ` + `by removing \`ngSrc\` and using a standard \`src\` attribute instead.`);
+  }
 }
-/**
- * Verifies that the 'sizes' only includes responsive values.
- */
 function assertNoComplexSizes(dir) {
-    let sizes = dir.sizes;
-    if (sizes?.match(/((\)|,)\s|^)\d+px/)) {
-        throw new _RuntimeError(2952 /* RuntimeErrorCode.INVALID_INPUT */, `${imgDirectiveDetails(dir.ngSrc, false)} \`sizes\` was set to a string including ` +
-            `pixel values. For automatic \`srcset\` generation, \`sizes\` must only include responsive ` +
-            `values, such as \`sizes="50vw"\` or \`sizes="(min-width: 768px) 50vw, 100vw"\`. ` +
-            `To fix this, modify the \`sizes\` attribute, or provide your own \`ngSrcset\` value directly.`);
-    }
+  let sizes = dir.sizes;
+  if (sizes?.match(/((\)|,)\s|^)\d+px/)) {
+    throw new _RuntimeError(2952, `${imgDirectiveDetails(dir.ngSrc, false)} \`sizes\` was set to a string including ` + `pixel values. For automatic \`srcset\` generation, \`sizes\` must only include responsive ` + `values, such as \`sizes="50vw"\` or \`sizes="(min-width: 768px) 50vw, 100vw"\`. ` + `To fix this, modify the \`sizes\` attribute, or provide your own \`ngSrcset\` value directly.`);
+  }
 }
 function assertValidPlaceholder(dir, imageLoader) {
-    assertNoPlaceholderConfigWithoutPlaceholder(dir);
-    assertNoRelativePlaceholderWithoutLoader(dir, imageLoader);
-    assertNoOversizedDataUrl(dir);
+  assertNoPlaceholderConfigWithoutPlaceholder(dir);
+  assertNoRelativePlaceholderWithoutLoader(dir, imageLoader);
+  assertNoOversizedDataUrl(dir);
 }
-/**
- * Verifies that placeholderConfig isn't being used without placeholder
- */
 function assertNoPlaceholderConfigWithoutPlaceholder(dir) {
-    if (dir.placeholderConfig && !dir.placeholder) {
-        throw new _RuntimeError(2952 /* RuntimeErrorCode.INVALID_INPUT */, `${imgDirectiveDetails(dir.ngSrc, false)} \`placeholderConfig\` options were provided for an ` +
-            `image that does not use the \`placeholder\` attribute, and will have no effect.`);
-    }
+  if (dir.placeholderConfig && !dir.placeholder) {
+    throw new _RuntimeError(2952, `${imgDirectiveDetails(dir.ngSrc, false)} \`placeholderConfig\` options were provided for an ` + `image that does not use the \`placeholder\` attribute, and will have no effect.`);
+  }
 }
-/**
- * Warns if a relative URL placeholder is specified, but no loader is present to provide the small
- * image.
- */
 function assertNoRelativePlaceholderWithoutLoader(dir, imageLoader) {
-    if (dir.placeholder === true && imageLoader === noopImageLoader) {
-        throw new _RuntimeError(2963 /* RuntimeErrorCode.MISSING_NECESSARY_LOADER */, `${imgDirectiveDetails(dir.ngSrc)} the \`placeholder\` attribute is set to true but ` +
-            `no image loader is configured (i.e. the default one is being used), ` +
-            `which would result in the same image being used for the primary image and its placeholder. ` +
-            `To fix this, provide a loader or remove the \`placeholder\` attribute from the image.`);
-    }
+  if (dir.placeholder === true && imageLoader === noopImageLoader) {
+    throw new _RuntimeError(2963, `${imgDirectiveDetails(dir.ngSrc)} the \`placeholder\` attribute is set to true but ` + `no image loader is configured (i.e. the default one is being used), ` + `which would result in the same image being used for the primary image and its placeholder. ` + `To fix this, provide a loader or remove the \`placeholder\` attribute from the image.`);
+  }
 }
-/**
- * Warns or throws an error if an oversized dataURL placeholder is provided.
- */
 function assertNoOversizedDataUrl(dir) {
-    if (dir.placeholder &&
-        typeof dir.placeholder === 'string' &&
-        dir.placeholder.startsWith('data:')) {
-        if (dir.placeholder.length > DATA_URL_ERROR_LIMIT) {
-            throw new _RuntimeError(2965 /* RuntimeErrorCode.OVERSIZED_PLACEHOLDER */, `${imgDirectiveDetails(dir.ngSrc)} the \`placeholder\` attribute is set to a data URL which is longer ` +
-                `than ${DATA_URL_ERROR_LIMIT} characters. This is strongly discouraged, as large inline placeholders ` +
-                `directly increase the bundle size of Angular and hurt page load performance. To fix this, generate ` +
-                `a smaller data URL placeholder.`);
-        }
-        if (dir.placeholder.length > DATA_URL_WARN_LIMIT) {
-            console.warn(_formatRuntimeError(2965 /* RuntimeErrorCode.OVERSIZED_PLACEHOLDER */, `${imgDirectiveDetails(dir.ngSrc)} the \`placeholder\` attribute is set to a data URL which is longer ` +
-                `than ${DATA_URL_WARN_LIMIT} characters. This is discouraged, as large inline placeholders ` +
-                `directly increase the bundle size of Angular and hurt page load performance. For better loading performance, ` +
-                `generate a smaller data URL placeholder.`));
-        }
+  if (dir.placeholder && typeof dir.placeholder === 'string' && dir.placeholder.startsWith('data:')) {
+    if (dir.placeholder.length > DATA_URL_ERROR_LIMIT) {
+      throw new _RuntimeError(2965, `${imgDirectiveDetails(dir.ngSrc)} the \`placeholder\` attribute is set to a data URL which is longer ` + `than ${DATA_URL_ERROR_LIMIT} characters. This is strongly discouraged, as large inline placeholders ` + `directly increase the bundle size of Angular and hurt page load performance. To fix this, generate ` + `a smaller data URL placeholder.`);
+    }
+    if (dir.placeholder.length > DATA_URL_WARN_LIMIT) {
+      console.warn(_formatRuntimeError(2965, `${imgDirectiveDetails(dir.ngSrc)} the \`placeholder\` attribute is set to a data URL which is longer ` + `than ${DATA_URL_WARN_LIMIT} characters. This is discouraged, as large inline placeholders ` + `directly increase the bundle size of Angular and hurt page load performance. For better loading performance, ` + `generate a smaller data URL placeholder.`));
     }
+  }
 }
-/**
- * Verifies that the `ngSrc` is not a Blob URL.
- */
 function assertNotBlobUrl(dir) {
-    const ngSrc = dir.ngSrc.trim();
-    if (ngSrc.startsWith('blob:')) {
-        throw new _RuntimeError(2952 /* RuntimeErrorCode.INVALID_INPUT */, `${imgDirectiveDetails(dir.ngSrc)} \`ngSrc\` was set to a blob URL (${ngSrc}). ` +
-            `Blob URLs are not supported by the NgOptimizedImage directive. ` +
-            `To fix this, disable the NgOptimizedImage directive for this element ` +
-            `by removing \`ngSrc\` and using a regular \`src\` attribute instead.`);
-    }
+  const ngSrc = dir.ngSrc.trim();
+  if (ngSrc.startsWith('blob:')) {
+    throw new _RuntimeError(2952, `${imgDirectiveDetails(dir.ngSrc)} \`ngSrc\` was set to a blob URL (${ngSrc}). ` + `Blob URLs are not supported by the NgOptimizedImage directive. ` + `To fix this, disable the NgOptimizedImage directive for this element ` + `by removing \`ngSrc\` and using a regular \`src\` attribute instead.`);
+  }
 }
-/**
- * Verifies that the input is set to a non-empty string.
- */
 function assertNonEmptyInput(dir, name, value) {
-    const isString = typeof value === 'string';
-    const isEmptyString = isString && value.trim() === '';
-    if (!isString || isEmptyString) {
-        throw new _RuntimeError(2952 /* RuntimeErrorCode.INVALID_INPUT */, `${imgDirectiveDetails(dir.ngSrc)} \`${name}\` has an invalid value ` +
-            `(\`${value}\`). To fix this, change the value to a non-empty string.`);
-    }
+  const isString = typeof value === 'string';
+  const isEmptyString = isString && value.trim() === '';
+  if (!isString || isEmptyString) {
+    throw new _RuntimeError(2952, `${imgDirectiveDetails(dir.ngSrc)} \`${name}\` has an invalid value ` + `(\`${value}\`). To fix this, change the value to a non-empty string.`);
+  }
 }
-/**
- * Verifies that the `ngSrcset` is in a valid format, e.g. "100w, 200w" or "1x, 2x".
- */
 function assertValidNgSrcset(dir, value) {
-    if (value == null)
-        return;
-    assertNonEmptyInput(dir, 'ngSrcset', value);
-    const stringVal = value;
-    const isValidWidthDescriptor = VALID_WIDTH_DESCRIPTOR_SRCSET.test(stringVal);
-    const isValidDensityDescriptor = VALID_DENSITY_DESCRIPTOR_SRCSET.test(stringVal);
-    if (isValidDensityDescriptor) {
-        assertUnderDensityCap(dir, stringVal);
-    }
-    const isValidSrcset = isValidWidthDescriptor || isValidDensityDescriptor;
-    if (!isValidSrcset) {
-        throw new _RuntimeError(2952 /* RuntimeErrorCode.INVALID_INPUT */, `${imgDirectiveDetails(dir.ngSrc)} \`ngSrcset\` has an invalid value (\`${value}\`). ` +
-            `To fix this, supply \`ngSrcset\` using a comma-separated list of one or more width ` +
-            `descriptors (e.g. "100w, 200w") or density descriptors (e.g. "1x, 2x").`);
-    }
+  if (value == null) return;
+  assertNonEmptyInput(dir, 'ngSrcset', value);
+  const stringVal = value;
+  const isValidWidthDescriptor = VALID_WIDTH_DESCRIPTOR_SRCSET.test(stringVal);
+  const isValidDensityDescriptor = VALID_DENSITY_DESCRIPTOR_SRCSET.test(stringVal);
+  if (isValidDensityDescriptor) {
+    assertUnderDensityCap(dir, stringVal);
+  }
+  const isValidSrcset = isValidWidthDescriptor || isValidDensityDescriptor;
+  if (!isValidSrcset) {
+    throw new _RuntimeError(2952, `${imgDirectiveDetails(dir.ngSrc)} \`ngSrcset\` has an invalid value (\`${value}\`). ` + `To fix this, supply \`ngSrcset\` using a comma-separated list of one or more width ` + `descriptors (e.g. "100w, 200w") or density descriptors (e.g. "1x, 2x").`);
+  }
 }
 function assertUnderDensityCap(dir, value) {
-    const underDensityCap = value
-        .split(',')
-        .every((num) => num === '' || parseFloat(num) <= ABSOLUTE_SRCSET_DENSITY_CAP);
-    if (!underDensityCap) {
-        throw new _RuntimeError(2952 /* RuntimeErrorCode.INVALID_INPUT */, `${imgDirectiveDetails(dir.ngSrc)} the \`ngSrcset\` contains an unsupported image density:` +
-            `\`${value}\`. NgOptimizedImage generally recommends a max image density of ` +
-            `${RECOMMENDED_SRCSET_DENSITY_CAP}x but supports image densities up to ` +
-            `${ABSOLUTE_SRCSET_DENSITY_CAP}x. The human eye cannot distinguish between image densities ` +
-            `greater than ${RECOMMENDED_SRCSET_DENSITY_CAP}x - which makes them unnecessary for ` +
-            `most use cases. Images that will be pinch-zoomed are typically the primary use case for ` +
-            `${ABSOLUTE_SRCSET_DENSITY_CAP}x images. Please remove the high density descriptor and try again.`);
-    }
+  const underDensityCap = value.split(',').every(num => num === '' || parseFloat(num) <= ABSOLUTE_SRCSET_DENSITY_CAP);
+  if (!underDensityCap) {
+    throw new _RuntimeError(2952, `${imgDirectiveDetails(dir.ngSrc)} the \`ngSrcset\` contains an unsupported image density:` + `\`${value}\`. NgOptimizedImage generally recommends a max image density of ` + `${RECOMMENDED_SRCSET_DENSITY_CAP}x but supports image densities up to ` + `${ABSOLUTE_SRCSET_DENSITY_CAP}x. The human eye cannot distinguish between image densities ` + `greater than ${RECOMMENDED_SRCSET_DENSITY_CAP}x - which makes them unnecessary for ` + `most use cases. Images that will be pinch-zoomed are typically the primary use case for ` + `${ABSOLUTE_SRCSET_DENSITY_CAP}x images. Please remove the high density descriptor and try again.`);
+  }
 }
-/**
- * Creates a `RuntimeError` instance to represent a situation when an input is set after
- * the directive has initialized.
- */
 function postInitInputChangeError(dir, inputName) {
-    let reason;
-    if (inputName === 'width' || inputName === 'height') {
-        reason =
-            `Changing \`${inputName}\` may result in different attribute value ` +
-                `applied to the underlying image element and cause layout shifts on a page.`;
-    }
-    else {
-        reason =
-            `Changing the \`${inputName}\` would have no effect on the underlying ` +
-                `image element, because the resource loading has already occurred.`;
-    }
-    return new _RuntimeError(2953 /* RuntimeErrorCode.UNEXPECTED_INPUT_CHANGE */, `${imgDirectiveDetails(dir.ngSrc)} \`${inputName}\` was updated after initialization. ` +
-        `The NgOptimizedImage directive will not react to this input change. ${reason} ` +
-        `To fix this, either switch \`${inputName}\` to a static value ` +
-        `or wrap the image element in an @if that is gated on the necessary value.`);
+  let reason;
+  if (inputName === 'width' || inputName === 'height') {
+    reason = `Changing \`${inputName}\` may result in different attribute value ` + `applied to the underlying image element and cause layout shifts on a page.`;
+  } else {
+    reason = `Changing the \`${inputName}\` would have no effect on the underlying ` + `image element, because the resource loading has already occurred.`;
+  }
+  return new _RuntimeError(2953, `${imgDirectiveDetails(dir.ngSrc)} \`${inputName}\` was updated after initialization. ` + `The NgOptimizedImage directive will not react to this input change. ${reason} ` + `To fix this, either switch \`${inputName}\` to a static value ` + `or wrap the image element in an @if that is gated on the necessary value.`);
 }
-/**
- * Verify that none of the listed inputs has changed.
- */
 function assertNoPostInitInputChange(dir, changes, inputs) {
-    inputs.forEach((input) => {
-        const isUpdated = changes.hasOwnProperty(input);
-        if (isUpdated && !changes[input].isFirstChange()) {
-            if (input === 'ngSrc') {
-                // When the `ngSrc` input changes, we detect that only in the
-                // `ngOnChanges` hook, thus the `ngSrc` is already set. We use
-                // `ngSrc` in the error message, so we use a previous value, but
-                // not the updated one in it.
-                dir = { ngSrc: changes[input].previousValue };
-            }
-            throw postInitInputChangeError(dir, input);
-        }
-    });
+  inputs.forEach(input => {
+    const isUpdated = changes.hasOwnProperty(input);
+    if (isUpdated && !changes[input].isFirstChange()) {
+      if (input === 'ngSrc') {
+        dir = {
+          ngSrc: changes[input].previousValue
+        };
+      }
+      throw postInitInputChangeError(dir, input);
+    }
+  });
 }
-/**
- * Verifies that a specified input is a number greater than 0.
- */
 function assertGreaterThanZero(dir, inputValue, inputName) {
-    const validNumber = typeof inputValue === 'number' && inputValue > 0;
-    const validString = typeof inputValue === 'string' && /^\d+$/.test(inputValue.trim()) && parseInt(inputValue) > 0;
-    if (!validNumber && !validString) {
-        throw new _RuntimeError(2952 /* RuntimeErrorCode.INVALID_INPUT */, `${imgDirectiveDetails(dir.ngSrc)} \`${inputName}\` has an invalid value. ` +
-            `To fix this, provide \`${inputName}\` as a number greater than 0.`);
-    }
+  const validNumber = typeof inputValue === 'number' && inputValue > 0;
+  const validString = typeof inputValue === 'string' && /^\d+$/.test(inputValue.trim()) && parseInt(inputValue) > 0;
+  if (!validNumber && !validString) {
+    throw new _RuntimeError(2952, `${imgDirectiveDetails(dir.ngSrc)} \`${inputName}\` has an invalid value. ` + `To fix this, provide \`${inputName}\` as a number greater than 0.`);
+  }
 }
-/**
- * Verifies that the rendered image is not visually distorted. Effectively this is checking:
- * - Whether the "width" and "height" attributes reflect the actual dimensions of the image.
- * - Whether image styling is "correct" (see below for a longer explanation).
- */
 function assertNoImageDistortion(dir, img, renderer) {
-    const callback = () => {
-        removeLoadListenerFn();
-        removeErrorListenerFn();
-        const computedStyle = window.getComputedStyle(img);
-        let renderedWidth = parseFloat(computedStyle.getPropertyValue('width'));
-        let renderedHeight = parseFloat(computedStyle.getPropertyValue('height'));
-        const boxSizing = computedStyle.getPropertyValue('box-sizing');
-        if (boxSizing === 'border-box') {
-            const paddingTop = computedStyle.getPropertyValue('padding-top');
-            const paddingRight = computedStyle.getPropertyValue('padding-right');
-            const paddingBottom = computedStyle.getPropertyValue('padding-bottom');
-            const paddingLeft = computedStyle.getPropertyValue('padding-left');
-            renderedWidth -= parseFloat(paddingRight) + parseFloat(paddingLeft);
-            renderedHeight -= parseFloat(paddingTop) + parseFloat(paddingBottom);
-        }
-        const renderedAspectRatio = renderedWidth / renderedHeight;
-        const nonZeroRenderedDimensions = renderedWidth !== 0 && renderedHeight !== 0;
-        const intrinsicWidth = img.naturalWidth;
-        const intrinsicHeight = img.naturalHeight;
-        const intrinsicAspectRatio = intrinsicWidth / intrinsicHeight;
-        const suppliedWidth = dir.width;
-        const suppliedHeight = dir.height;
-        const suppliedAspectRatio = suppliedWidth / suppliedHeight;
-        // Tolerance is used to account for the impact of subpixel rendering.
-        // Due to subpixel rendering, the rendered, intrinsic, and supplied
-        // aspect ratios of a correctly configured image may not exactly match.
-        // For example, a `width=4030 height=3020` image might have a rendered
-        // size of "1062w, 796.48h". (An aspect ratio of 1.334... vs. 1.333...)
-        const inaccurateDimensions = Math.abs(suppliedAspectRatio - intrinsicAspectRatio) > ASPECT_RATIO_TOLERANCE;
-        const stylingDistortion = nonZeroRenderedDimensions &&
-            Math.abs(intrinsicAspectRatio - renderedAspectRatio) > ASPECT_RATIO_TOLERANCE;
-        if (inaccurateDimensions) {
-            console.warn(_formatRuntimeError(2952 /* RuntimeErrorCode.INVALID_INPUT */, `${imgDirectiveDetails(dir.ngSrc)} the aspect ratio of the image does not match ` +
-                `the aspect ratio indicated by the width and height attributes. ` +
-                `\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` +
-                `(aspect-ratio: ${round(intrinsicAspectRatio)}). \nSupplied width and height attributes: ` +
-                `${suppliedWidth}w x ${suppliedHeight}h (aspect-ratio: ${round(suppliedAspectRatio)}). ` +
-                `\nTo fix this, update the width and height attributes.`));
-        }
-        else if (stylingDistortion) {
-            console.warn(_formatRuntimeError(2952 /* RuntimeErrorCode.INVALID_INPUT */, `${imgDirectiveDetails(dir.ngSrc)} the aspect ratio of the rendered image ` +
-                `does not match the image's intrinsic aspect ratio. ` +
-                `\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` +
-                `(aspect-ratio: ${round(intrinsicAspectRatio)}). \nRendered image size: ` +
-                `${renderedWidth}w x ${renderedHeight}h (aspect-ratio: ` +
-                `${round(renderedAspectRatio)}). \nThis issue can occur if "width" and "height" ` +
-                `attributes are added to an image without updating the corresponding ` +
-                `image styling. To fix this, adjust image styling. In most cases, ` +
-                `adding "height: auto" or "width: auto" to the image styling will fix ` +
-                `this issue.`));
-        }
-        else if (!dir.ngSrcset && nonZeroRenderedDimensions) {
-            // If `ngSrcset` hasn't been set, sanity check the intrinsic size.
-            const recommendedWidth = RECOMMENDED_SRCSET_DENSITY_CAP * renderedWidth;
-            const recommendedHeight = RECOMMENDED_SRCSET_DENSITY_CAP * renderedHeight;
-            const oversizedWidth = intrinsicWidth - recommendedWidth >= OVERSIZED_IMAGE_TOLERANCE;
-            const oversizedHeight = intrinsicHeight - recommendedHeight >= OVERSIZED_IMAGE_TOLERANCE;
-            if (oversizedWidth || oversizedHeight) {
-                console.warn(_formatRuntimeError(2960 /* RuntimeErrorCode.OVERSIZED_IMAGE */, `${imgDirectiveDetails(dir.ngSrc)} the intrinsic image is significantly ` +
-                    `larger than necessary. ` +
-                    `\nRendered image size: ${renderedWidth}w x ${renderedHeight}h. ` +
-                    `\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h. ` +
-                    `\nRecommended intrinsic image size: ${recommendedWidth}w x ${recommendedHeight}h. ` +
-                    `\nNote: Recommended intrinsic image size is calculated assuming a maximum DPR of ` +
-                    `${RECOMMENDED_SRCSET_DENSITY_CAP}. To improve loading time, resize the image ` +
-                    `or consider using the "ngSrcset" and "sizes" attributes.`));
-            }
-        }
-    };
-    const removeLoadListenerFn = renderer.listen(img, 'load', callback);
-    // We only listen to the `error` event to remove the `load` event listener because it will not be
-    // fired if the image fails to load. This is done to prevent memory leaks in development mode
-    // because image elements aren't garbage-collected properly. It happens because zone.js stores the
-    // event listener directly on the element and closures capture `dir`.
-    const removeErrorListenerFn = renderer.listen(img, 'error', () => {
-        removeLoadListenerFn();
-        removeErrorListenerFn();
-    });
-    callOnLoadIfImageIsLoaded(img, callback);
+  const callback = () => {
+    removeLoadListenerFn();
+    removeErrorListenerFn();
+    const computedStyle = window.getComputedStyle(img);
+    let renderedWidth = parseFloat(computedStyle.getPropertyValue('width'));
+    let renderedHeight = parseFloat(computedStyle.getPropertyValue('height'));
+    const boxSizing = computedStyle.getPropertyValue('box-sizing');
+    if (boxSizing === 'border-box') {
+      const paddingTop = computedStyle.getPropertyValue('padding-top');
+      const paddingRight = computedStyle.getPropertyValue('padding-right');
+      const paddingBottom = computedStyle.getPropertyValue('padding-bottom');
+      const paddingLeft = computedStyle.getPropertyValue('padding-left');
+      renderedWidth -= parseFloat(paddingRight) + parseFloat(paddingLeft);
+      renderedHeight -= parseFloat(paddingTop) + parseFloat(paddingBottom);
+    }
+    const renderedAspectRatio = renderedWidth / renderedHeight;
+    const nonZeroRenderedDimensions = renderedWidth !== 0 && renderedHeight !== 0;
+    const intrinsicWidth = img.naturalWidth;
+    const intrinsicHeight = img.naturalHeight;
+    const intrinsicAspectRatio = intrinsicWidth / intrinsicHeight;
+    const suppliedWidth = dir.width;
+    const suppliedHeight = dir.height;
+    const suppliedAspectRatio = suppliedWidth / suppliedHeight;
+    const inaccurateDimensions = Math.abs(suppliedAspectRatio - intrinsicAspectRatio) > ASPECT_RATIO_TOLERANCE;
+    const stylingDistortion = nonZeroRenderedDimensions && Math.abs(intrinsicAspectRatio - renderedAspectRatio) > ASPECT_RATIO_TOLERANCE;
+    if (inaccurateDimensions) {
+      console.warn(_formatRuntimeError(2952, `${imgDirectiveDetails(dir.ngSrc)} the aspect ratio of the image does not match ` + `the aspect ratio indicated by the width and height attributes. ` + `\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` + `(aspect-ratio: ${round(intrinsicAspectRatio)}). \nSupplied width and height attributes: ` + `${suppliedWidth}w x ${suppliedHeight}h (aspect-ratio: ${round(suppliedAspectRatio)}). ` + `\nTo fix this, update the width and height attributes.`));
+    } else if (stylingDistortion) {
+      console.warn(_formatRuntimeError(2952, `${imgDirectiveDetails(dir.ngSrc)} the aspect ratio of the rendered image ` + `does not match the image's intrinsic aspect ratio. ` + `\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` + `(aspect-ratio: ${round(intrinsicAspectRatio)}). \nRendered image size: ` + `${renderedWidth}w x ${renderedHeight}h (aspect-ratio: ` + `${round(renderedAspectRatio)}). \nThis issue can occur if "width" and "height" ` + `attributes are added to an image without updating the corresponding ` + `image styling. To fix this, adjust image styling. In most cases, ` + `adding "height: auto" or "width: auto" to the image styling will fix ` + `this issue.`));
+    } else if (!dir.ngSrcset && nonZeroRenderedDimensions) {
+      const recommendedWidth = RECOMMENDED_SRCSET_DENSITY_CAP * renderedWidth;
+      const recommendedHeight = RECOMMENDED_SRCSET_DENSITY_CAP * renderedHeight;
+      const oversizedWidth = intrinsicWidth - recommendedWidth >= OVERSIZED_IMAGE_TOLERANCE;
+      const oversizedHeight = intrinsicHeight - recommendedHeight >= OVERSIZED_IMAGE_TOLERANCE;
+      if (oversizedWidth || oversizedHeight) {
+        console.warn(_formatRuntimeError(2960, `${imgDirectiveDetails(dir.ngSrc)} the intrinsic image is significantly ` + `larger than necessary. ` + `\nRendered image size: ${renderedWidth}w x ${renderedHeight}h. ` + `\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h. ` + `\nRecommended intrinsic image size: ${recommendedWidth}w x ${recommendedHeight}h. ` + `\nNote: Recommended intrinsic image size is calculated assuming a maximum DPR of ` + `${RECOMMENDED_SRCSET_DENSITY_CAP}. To improve loading time, resize the image ` + `or consider using the "ngSrcset" and "sizes" attributes.`));
+      }
+    }
+  };
+  const removeLoadListenerFn = renderer.listen(img, 'load', callback);
+  const removeErrorListenerFn = renderer.listen(img, 'error', () => {
+    removeLoadListenerFn();
+    removeErrorListenerFn();
+  });
+  callOnLoadIfImageIsLoaded(img, callback);
 }
-/**
- * Verifies that a specified input is set.
- */
 function assertNonEmptyWidthAndHeight(dir) {
-    let missingAttributes = [];
-    if (dir.width === undefined)
-        missingAttributes.push('width');
-    if (dir.height === undefined)
-        missingAttributes.push('height');
-    if (missingAttributes.length > 0) {
-        throw new _RuntimeError(2954 /* RuntimeErrorCode.REQUIRED_INPUT_MISSING */, `${imgDirectiveDetails(dir.ngSrc)} these required attributes ` +
-            `are missing: ${missingAttributes.map((attr) => `"${attr}"`).join(', ')}. ` +
-            `Including "width" and "height" attributes will prevent image-related layout shifts. ` +
-            `To fix this, include "width" and "height" attributes on the image tag or turn on ` +
-            `"fill" mode with the \`fill\` attribute.`);
-    }
+  let missingAttributes = [];
+  if (dir.width === undefined) missingAttributes.push('width');
+  if (dir.height === undefined) missingAttributes.push('height');
+  if (missingAttributes.length > 0) {
+    throw new _RuntimeError(2954, `${imgDirectiveDetails(dir.ngSrc)} these required attributes ` + `are missing: ${missingAttributes.map(attr => `"${attr}"`).join(', ')}. ` + `Including "width" and "height" attributes will prevent image-related layout shifts. ` + `To fix this, include "width" and "height" attributes on the image tag or turn on ` + `"fill" mode with the \`fill\` attribute.`);
+  }
 }
-/**
- * Verifies that width and height are not set. Used in fill mode, where those attributes don't make
- * sense.
- */
 function assertEmptyWidthAndHeight(dir) {
-    if (dir.width || dir.height) {
-        throw new _RuntimeError(2952 /* RuntimeErrorCode.INVALID_INPUT */, `${imgDirectiveDetails(dir.ngSrc)} the attributes \`height\` and/or \`width\` are present ` +
-            `along with the \`fill\` attribute. Because \`fill\` mode causes an image to fill its containing ` +
-            `element, the size attributes have no effect and should be removed.`);
-    }
+  if (dir.width || dir.height) {
+    throw new _RuntimeError(2952, `${imgDirectiveDetails(dir.ngSrc)} the attributes \`height\` and/or \`width\` are present ` + `along with the \`fill\` attribute. Because \`fill\` mode causes an image to fill its containing ` + `element, the size attributes have no effect and should be removed.`);
+  }
 }
-/**
- * Verifies that the rendered image has a nonzero height. If the image is in fill mode, provides
- * guidance that this can be caused by the containing element's CSS position property.
- */
 function assertNonZeroRenderedHeight(dir, img, renderer) {
-    const callback = () => {
-        removeLoadListenerFn();
-        removeErrorListenerFn();
-        const renderedHeight = img.clientHeight;
-        if (dir.fill && renderedHeight === 0) {
-            console.warn(_formatRuntimeError(2952 /* RuntimeErrorCode.INVALID_INPUT */, `${imgDirectiveDetails(dir.ngSrc)} the height of the fill-mode image is zero. ` +
-                `This is likely because the containing element does not have the CSS 'position' ` +
-                `property set to one of the following: "relative", "fixed", or "absolute". ` +
-                `To fix this problem, make sure the container element has the CSS 'position' ` +
-                `property defined and the height of the element is not zero.`));
-        }
-    };
-    const removeLoadListenerFn = renderer.listen(img, 'load', callback);
-    // See comments in the `assertNoImageDistortion`.
-    const removeErrorListenerFn = renderer.listen(img, 'error', () => {
-        removeLoadListenerFn();
-        removeErrorListenerFn();
-    });
-    callOnLoadIfImageIsLoaded(img, callback);
+  const callback = () => {
+    removeLoadListenerFn();
+    removeErrorListenerFn();
+    const renderedHeight = img.clientHeight;
+    if (dir.fill && renderedHeight === 0) {
+      console.warn(_formatRuntimeError(2952, `${imgDirectiveDetails(dir.ngSrc)} the height of the fill-mode image is zero. ` + `This is likely because the containing element does not have the CSS 'position' ` + `property set to one of the following: "relative", "fixed", or "absolute". ` + `To fix this problem, make sure the container element has the CSS 'position' ` + `property defined and the height of the element is not zero.`));
+    }
+  };
+  const removeLoadListenerFn = renderer.listen(img, 'load', callback);
+  const removeErrorListenerFn = renderer.listen(img, 'error', () => {
+    removeLoadListenerFn();
+    removeErrorListenerFn();
+  });
+  callOnLoadIfImageIsLoaded(img, callback);
 }
-/**
- * Verifies that the `loading` attribute is set to a valid input &
- * is not used on priority images.
- */
 function assertValidLoadingInput(dir) {
-    if (dir.loading && dir.priority) {
-        throw new _RuntimeError(2952 /* RuntimeErrorCode.INVALID_INPUT */, `${imgDirectiveDetails(dir.ngSrc)} the \`loading\` attribute ` +
-            `was used on an image that was marked "priority". ` +
-            `Setting \`loading\` on priority images is not allowed ` +
-            `because these images will always be eagerly loaded. ` +
-            `To fix this, remove the “loading” attribute from the priority image.`);
-    }
-    const validInputs = ['auto', 'eager', 'lazy'];
-    if (typeof dir.loading === 'string' && !validInputs.includes(dir.loading)) {
-        throw new _RuntimeError(2952 /* RuntimeErrorCode.INVALID_INPUT */, `${imgDirectiveDetails(dir.ngSrc)} the \`loading\` attribute ` +
-            `has an invalid value (\`${dir.loading}\`). ` +
-            `To fix this, provide a valid value ("lazy", "eager", or "auto").`);
-    }
+  if (dir.loading && dir.priority) {
+    throw new _RuntimeError(2952, `${imgDirectiveDetails(dir.ngSrc)} the \`loading\` attribute ` + `was used on an image that was marked "priority". ` + `Setting \`loading\` on priority images is not allowed ` + `because these images will always be eagerly loaded. ` + `To fix this, remove the “loading” attribute from the priority image.`);
+  }
+  const validInputs = ['auto', 'eager', 'lazy'];
+  if (typeof dir.loading === 'string' && !validInputs.includes(dir.loading)) {
+    throw new _RuntimeError(2952, `${imgDirectiveDetails(dir.ngSrc)} the \`loading\` attribute ` + `has an invalid value (\`${dir.loading}\`). ` + `To fix this, provide a valid value ("lazy", "eager", or "auto").`);
+  }
 }
-/**
- * Verifies that the `decoding` attribute is set to a valid input.
- */
 function assertValidDecodingInput(dir) {
-    const validInputs = ['sync', 'async', 'auto'];
-    if (typeof dir.decoding === 'string' && !validInputs.includes(dir.decoding)) {
-        throw new _RuntimeError(2952 /* RuntimeErrorCode.INVALID_INPUT */, `${imgDirectiveDetails(dir.ngSrc)} the \`decoding\` attribute ` +
-            `has an invalid value (\`${dir.decoding}\`). ` +
-            `To fix this, provide a valid value ("sync", "async", or "auto").`);
-    }
+  const validInputs = ['sync', 'async', 'auto'];
+  if (typeof dir.decoding === 'string' && !validInputs.includes(dir.decoding)) {
+    throw new _RuntimeError(2952, `${imgDirectiveDetails(dir.ngSrc)} the \`decoding\` attribute ` + `has an invalid value (\`${dir.decoding}\`). ` + `To fix this, provide a valid value ("sync", "async", or "auto").`);
+  }
 }
-/**
- * Warns if NOT using a loader (falling back to the generic loader) and
- * the image appears to be hosted on one of the image CDNs for which
- * we do have a built-in image loader. Suggests switching to the
- * built-in loader.
- *
- * @param ngSrc Value of the ngSrc attribute
- * @param imageLoader ImageLoader provided
- */
 function assertNotMissingBuiltInLoader(ngSrc, imageLoader) {
-    if (imageLoader === noopImageLoader) {
-        let builtInLoaderName = '';
-        for (const loader of BUILT_IN_LOADERS) {
-            if (loader.testUrl(ngSrc)) {
-                builtInLoaderName = loader.name;
-                break;
-            }
-        }
-        if (builtInLoaderName) {
-            console.warn(_formatRuntimeError(2962 /* RuntimeErrorCode.MISSING_BUILTIN_LOADER */, `NgOptimizedImage: It looks like your images may be hosted on the ` +
-                `${builtInLoaderName} CDN, but your app is not using Angular's ` +
-                `built-in loader for that CDN. We recommend switching to use ` +
-                `the built-in by calling \`provide${builtInLoaderName}Loader()\` ` +
-                `in your \`providers\` and passing it your instance's base URL. ` +
-                `If you don't want to use the built-in loader, define a custom ` +
-                `loader function using IMAGE_LOADER to silence this warning.`));
-        }
+  if (imageLoader === noopImageLoader) {
+    let builtInLoaderName = '';
+    for (const loader of BUILT_IN_LOADERS) {
+      if (loader.testUrl(ngSrc)) {
+        builtInLoaderName = loader.name;
+        break;
+      }
+    }
+    if (builtInLoaderName) {
+      console.warn(_formatRuntimeError(2962, `NgOptimizedImage: It looks like your images may be hosted on the ` + `${builtInLoaderName} CDN, but your app is not using Angular's ` + `built-in loader for that CDN. We recommend switching to use ` + `the built-in by calling \`provide${builtInLoaderName}Loader()\` ` + `in your \`providers\` and passing it your instance's base URL. ` + `If you don't want to use the built-in loader, define a custom ` + `loader function using IMAGE_LOADER to silence this warning.`));
     }
+  }
 }
-/**
- * Warns if ngSrcset is present and no loader is configured (i.e. the default one is being used).
- */
 function assertNoNgSrcsetWithoutLoader(dir, imageLoader) {
-    if (dir.ngSrcset && imageLoader === noopImageLoader) {
-        console.warn(_formatRuntimeError(2963 /* RuntimeErrorCode.MISSING_NECESSARY_LOADER */, `${imgDirectiveDetails(dir.ngSrc)} the \`ngSrcset\` attribute is present but ` +
-            `no image loader is configured (i.e. the default one is being used), ` +
-            `which would result in the same image being used for all configured sizes. ` +
-            `To fix this, provide a loader or remove the \`ngSrcset\` attribute from the image.`));
-    }
+  if (dir.ngSrcset && imageLoader === noopImageLoader) {
+    console.warn(_formatRuntimeError(2963, `${imgDirectiveDetails(dir.ngSrc)} the \`ngSrcset\` attribute is present but ` + `no image loader is configured (i.e. the default one is being used), ` + `which would result in the same image being used for all configured sizes. ` + `To fix this, provide a loader or remove the \`ngSrcset\` attribute from the image.`));
+  }
 }
-/**
- * Warns if loaderParams is present and no loader is configured (i.e. the default one is being
- * used).
- */
 function assertNoLoaderParamsWithoutLoader(dir, imageLoader) {
-    if (dir.loaderParams && imageLoader === noopImageLoader) {
-        console.warn(_formatRuntimeError(2963 /* RuntimeErrorCode.MISSING_NECESSARY_LOADER */, `${imgDirectiveDetails(dir.ngSrc)} the \`loaderParams\` attribute is present but ` +
-            `no image loader is configured (i.e. the default one is being used), ` +
-            `which means that the loaderParams data will not be consumed and will not affect the URL. ` +
-            `To fix this, provide a custom loader or remove the \`loaderParams\` attribute from the image.`));
-    }
+  if (dir.loaderParams && imageLoader === noopImageLoader) {
+    console.warn(_formatRuntimeError(2963, `${imgDirectiveDetails(dir.ngSrc)} the \`loaderParams\` attribute is present but ` + `no image loader is configured (i.e. the default one is being used), ` + `which means that the loaderParams data will not be consumed and will not affect the URL. ` + `To fix this, provide a custom loader or remove the \`loaderParams\` attribute from the image.`));
+  }
 }
-/**
- * Warns if the priority attribute is used too often on page load
- */
 async function assetPriorityCountBelowThreshold(appRef) {
-    if (IMGS_WITH_PRIORITY_ATTR_COUNT === 0) {
-        IMGS_WITH_PRIORITY_ATTR_COUNT++;
-        await appRef.whenStable();
-        if (IMGS_WITH_PRIORITY_ATTR_COUNT > PRIORITY_COUNT_THRESHOLD) {
-            console.warn(_formatRuntimeError(2966 /* RuntimeErrorCode.TOO_MANY_PRIORITY_ATTRIBUTES */, `NgOptimizedImage: The "priority" attribute is set to true more than ${PRIORITY_COUNT_THRESHOLD} times (${IMGS_WITH_PRIORITY_ATTR_COUNT} times). ` +
-                `Marking too many images as "high" priority can hurt your application's LCP (https://web.dev/lcp). ` +
-                `"Priority" should only be set on the image expected to be the page's LCP element.`));
-        }
-    }
-    else {
-        IMGS_WITH_PRIORITY_ATTR_COUNT++;
+  if (IMGS_WITH_PRIORITY_ATTR_COUNT === 0) {
+    IMGS_WITH_PRIORITY_ATTR_COUNT++;
+    await appRef.whenStable();
+    if (IMGS_WITH_PRIORITY_ATTR_COUNT > PRIORITY_COUNT_THRESHOLD) {
+      console.warn(_formatRuntimeError(2966, `NgOptimizedImage: The "priority" attribute is set to true more than ${PRIORITY_COUNT_THRESHOLD} times (${IMGS_WITH_PRIORITY_ATTR_COUNT} times). ` + `Marking too many images as "high" priority can hurt your application's LCP (https://web.dev/lcp). ` + `"Priority" should only be set on the image expected to be the page's LCP element.`));
     }
+  } else {
+    IMGS_WITH_PRIORITY_ATTR_COUNT++;
+  }
 }
-/**
- * Warns if placeholder's dimension are over a threshold.
- *
- * This assert function is meant to only run on the browser.
- */
 function assertPlaceholderDimensions(dir, imgElement) {
-    const computedStyle = window.getComputedStyle(imgElement);
-    let renderedWidth = parseFloat(computedStyle.getPropertyValue('width'));
-    let renderedHeight = parseFloat(computedStyle.getPropertyValue('height'));
-    if (renderedWidth > PLACEHOLDER_DIMENSION_LIMIT || renderedHeight > PLACEHOLDER_DIMENSION_LIMIT) {
-        console.warn(_formatRuntimeError(2967 /* RuntimeErrorCode.PLACEHOLDER_DIMENSION_LIMIT_EXCEEDED */, `${imgDirectiveDetails(dir.ngSrc)} it uses a placeholder image, but at least one ` +
-            `of the dimensions attribute (height or width) exceeds the limit of ${PLACEHOLDER_DIMENSION_LIMIT}px. ` +
-            `To fix this, use a smaller image as a placeholder.`));
-    }
+  const computedStyle = window.getComputedStyle(imgElement);
+  let renderedWidth = parseFloat(computedStyle.getPropertyValue('width'));
+  let renderedHeight = parseFloat(computedStyle.getPropertyValue('height'));
+  if (renderedWidth > PLACEHOLDER_DIMENSION_LIMIT || renderedHeight > PLACEHOLDER_DIMENSION_LIMIT) {
+    console.warn(_formatRuntimeError(2967, `${imgDirectiveDetails(dir.ngSrc)} it uses a placeholder image, but at least one ` + `of the dimensions attribute (height or width) exceeds the limit of ${PLACEHOLDER_DIMENSION_LIMIT}px. ` + `To fix this, use a smaller image as a placeholder.`));
+  }
 }
 function callOnLoadIfImageIsLoaded(img, callback) {
-    // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-complete
-    // The spec defines that `complete` is truthy once its request state is fully available.
-    // The image may already be available if it’s loaded from the browser cache.
-    // In that case, the `load` event will not fire at all, meaning that all setup
-    // callbacks listening for the `load` event will not be invoked.
-    // In Safari, there is a known behavior where the `complete` property of an
-    // `HTMLImageElement` may sometimes return `true` even when the image is not fully loaded.
-    // Checking both `img.complete` and `img.naturalWidth` is the most reliable way to
-    // determine if an image has been fully loaded, especially in browsers where the
-    // `complete` property may return `true` prematurely.
-    if (img.complete && img.naturalWidth) {
-        callback();
-    }
+  if (img.complete && img.naturalWidth) {
+    callback();
+  }
 }
 function round(input) {
-    return Number.isInteger(input) ? input : input.toFixed(2);
+  return Number.isInteger(input) ? input : input.toFixed(2);
 }
-// Transform function to handle SafeValue input for ngSrc. This doesn't do any sanitization,
-// as that is not needed for img.src and img.srcset. This transform is purely for compatibility.
 function unwrapSafeUrl(value) {
-    if (typeof value === 'string') {
-        return value;
-    }
-    return _unwrapSafeValue(value);
+  if (typeof value === 'string') {
+    return value;
+  }
+  return _unwrapSafeValue(value);
 }
-// Transform function to handle inputs which may be booleans, strings, or string representations
-// of boolean values. Used for the placeholder attribute.
 function booleanOrUrlAttribute(value) {
-    if (typeof value === 'string' && value !== 'true' && value !== 'false' && value !== '') {
-        return value;
-    }
-    return booleanAttribute(value);
+  if (typeof value === 'string' && value !== 'true' && value !== 'false' && value !== '') {
+    return value;
+  }
+  return booleanAttribute(value);
 }
 
-export { IMAGE_LOADER, NgOptimizedImage, PRECONNECT_CHECK_BLOCKLIST, VERSION, ViewportScroller, isPlatformBrowser, isPlatformServer, provideCloudflareLoader, provideCloudinaryLoader, provideImageKitLoader, provideImgixLoader, provideNetlifyLoader, registerLocaleData, NullViewportScroller as ɵNullViewportScroller, PLATFORM_BROWSER_ID as ɵPLATFORM_BROWSER_ID, PLATFORM_SERVER_ID as ɵPLATFORM_SERVER_ID };
+export { IMAGE_LOADER, Location, LocationStrategy, NgOptimizedImage, PRECONNECT_CHECK_BLOCKLIST, PlatformNavigation, VERSION, ViewportScroller, isPlatformBrowser, isPlatformServer, provideCloudflareLoader, provideCloudinaryLoader, provideImageKitLoader, provideImgixLoader, provideNetlifyLoader, registerLocaleData, NavigationAdapterForLocation as ɵNavigationAdapterForLocation, NullViewportScroller as ɵNullViewportScroller, PLATFORM_BROWSER_ID as ɵPLATFORM_BROWSER_ID, PLATFORM_SERVER_ID as ɵPLATFORM_SERVER_ID, normalizeQueryParams as ɵnormalizeQueryParams };
 //# sourceMappingURL=common.mjs.map