ng-primitives 0.52.0 → 0.54.0

package/fesm2022/ng-primitives-utils.mjs

@@ -1,6 +1,8 @@
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { inject, signal, DestroyRef, effect, untracked, Renderer2, ElementRef, afterNextRender } from '@angular/core';
+import { inject, DestroyRef, signal, afterNextRender, effect, untracked, Renderer2, ElementRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { pipe, NEVER, EMPTY } from 'rxjs';
+import { takeUntil, catchError, defaultIfEmpty } from 'rxjs/operators';
 
 /**
  * A simple helper function to provide a value accessor for a given type.
@@ -10,6 +12,39 @@ function provideValueAccessor(type) {
     return { provide: NG_VALUE_ACCESSOR, useExisting: type, multi: true };
 }
 
+/**
+ * The built-in `takeUntilDestroyed` operator does not handle the case when the component is destroyed before the source observable emits.
+ * This operator ensures that the source observable completes gracefully without throwing an error.
+ * https://github.com/angular/angular/issues/54527#issuecomment-2098254508
+ *
+ * @internal
+ */
+function safeTakeUntilDestroyed(destroyRef) {
+    return pipe(takeUntil(NEVER.pipe(takeUntilDestroyed(destroyRef), catchError(() => EMPTY), defaultIfEmpty(null))));
+}
+
+function setStatusSignal(control, status) {
+    if (!control?.control) {
+        return;
+    }
+    status.set({
+        valid: control?.control?.valid ?? null,
+        invalid: control?.control?.invalid ?? null,
+        pristine: control?.control?.pristine ?? null,
+        dirty: control?.control?.dirty ?? null,
+        touched: control?.control?.touched ?? null,
+        pending: control?.control?.pending ?? null,
+        disabled: control?.control?.disabled ?? null,
+    });
+}
+function subscribeToControlStatus(control, status, destroyRef) {
+    if (!control?.control) {
+        return;
+    }
+    control.control.events
+        .pipe(safeTakeUntilDestroyed(destroyRef))
+        .subscribe(() => setStatusSignal(control, status));
+}
 /**
  * A utility function to get the status of an Angular form control as a reactive signal.
  * This function injects the NgControl and returns a signal that reflects the control's status.
@@ -17,6 +52,7 @@ function provideValueAccessor(type) {
  */
 function controlStatus() {
     const control = inject(NgControl, { optional: true });
+    const destroyRef = inject(DestroyRef);
     const status = signal({
         valid: null,
         invalid: null,
@@ -28,19 +64,21 @@ function controlStatus() {
     });
     // Fallback if control is not yet available
     if (!control?.control) {
+        // There is still a chance that the control will be available i.e. after executing OnInit lifecycle hook
+        // in `formControlName` directive, so we set up an effect to subscribe to the control status
+        afterNextRender({
+            write: () => {
+                // If control is still not available, we do nothing, otherwise we subscribe to the control status
+                if (control?.control) {
+                    subscribeToControlStatus(control, status, destroyRef);
+                    // We re-set the status to ensure it reflects the current state on initialization
+                    setStatusSignal(control, status);
+                }
+            },
+        });
         return status;
     }
-    control.control.statusChanges.pipe(takeUntilDestroyed()).subscribe(() => {
-        status.set({
-            valid: control?.control?.valid ?? null,
-            invalid: control?.control?.invalid ?? null,
-            pristine: control?.control?.pristine ?? null,
-            dirty: control?.control?.dirty ?? null,
-            touched: control?.control?.touched ?? null,
-            pending: control?.control?.pending ?? null,
-            disabled: control?.control?.disabled ?? null,
-        });
-    });
+    subscribeToControlStatus(control, status);
     return status;
 }
 
@@ -212,5 +250,5 @@ function injectDimensions() {
  * Generated bundle index. Do not edit.
  */
 
-export { controlStatus, injectDimensions, injectDisposables, onBooleanChange, onChange, provideValueAccessor, uniqueId };
+export { controlStatus, injectDimensions, injectDisposables, onBooleanChange, onChange, provideValueAccessor, safeTakeUntilDestroyed, uniqueId };
 //# sourceMappingURL=ng-primitives-utils.mjs.map

package/fesm2022/ng-primitives-utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-utils.mjs","sources":["../../../../packages/ng-primitives/utils/src/forms/providers.ts","../../../../packages/ng-primitives/utils/src/forms/status.ts","../../../../packages/ng-primitives/utils/src/helpers/disposables.ts","../../../../packages/ng-primitives/utils/src/helpers/unique-id.ts","../../../../packages/ng-primitives/utils/src/signals/index.ts","../../../../packages/ng-primitives/utils/src/ui/dimensions.ts","../../../../packages/ng-primitives/utils/src/ng-primitives-utils.ts"],"sourcesContent":["import { ExistingProvider, Type } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n/**\n * A simple helper function to provide a value accessor for a given type.\n * @param type The type to provide the value accessor for\n */\nexport function provideValueAccessor<T>(type: Type<T>): ExistingProvider {\n  return { provide: NG_VALUE_ACCESSOR, useExisting: type, multi: true };\n}\n","import { Signal, inject, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NgControl } from '@angular/forms';\n\nexport interface NgpControlStatus {\n  valid: boolean | null;\n  invalid: boolean | null;\n  pristine: boolean | null;\n  dirty: boolean | null;\n  touched: boolean | null;\n  pending: boolean | null;\n  disabled: boolean | null;\n}\n\n/**\n * A utility function to get the status of an Angular form control as a reactive signal.\n * This function injects the NgControl and returns a signal that reflects the control's status.\n * @internal\n */\nexport function controlStatus(): Signal<NgpControlStatus> {\n  const control = inject(NgControl, { optional: true });\n\n  const status = signal<NgpControlStatus>({\n    valid: null,\n    invalid: null,\n    pristine: null,\n    dirty: null,\n    touched: null,\n    pending: null,\n    disabled: null,\n  });\n\n  // Fallback if control is not yet available\n  if (!control?.control) {\n    return status;\n  }\n\n  control.control.statusChanges.pipe(takeUntilDestroyed()).subscribe(() => {\n    status.set({\n      valid: control?.control?.valid ?? null,\n      invalid: control?.control?.invalid ?? null,\n      pristine: control?.control?.pristine ?? null,\n      dirty: control?.control?.dirty ?? null,\n      touched: control?.control?.touched ?? null,\n      pending: control?.control?.pending ?? null,\n      disabled: control?.control?.disabled ?? null,\n    });\n  });\n\n  return status;\n}\n","import { DestroyRef, inject } from '@angular/core';\n\n/**\n * Disposable functions are a way to manage timers, intervals, and event listeners\n * that should be cleared when a component is destroyed.\n *\n * This is heavily inspired by Headless UI disposables:\n * https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/utils/disposables.ts\n */\nexport function injectDisposables() {\n  const destroyRef = inject(DestroyRef);\n  let isDestroyed = false;\n\n  destroyRef.onDestroy(() => (isDestroyed = true));\n\n  return {\n    /**\n     * Set a timeout that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @param delay The delay before the callback is executed\n     * @returns A function to clear the timeout\n     */\n    setTimeout: (callback: () => void, delay: number) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      const id = setTimeout(callback, delay);\n      const cleanup = () => clearTimeout(id);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n    /**\n     * Set an interval that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @param delay The delay before the callback is executed\n     * @param target\n     * @param type\n     * @param listener\n     * @param options\n     * @returns A function to clear the interval\n     */\n    addEventListener: <K extends keyof HTMLElementEventMap>(\n      target: EventTarget,\n      type: K,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,\n      options?: boolean | AddEventListenerOptions,\n    ) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      target.addEventListener(type, listener as EventListenerOrEventListenerObject, options);\n      const cleanup = () =>\n        target.removeEventListener(type, listener as EventListenerOrEventListenerObject, options);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n    /**\n     * Set an interval that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @param delay The delay before the callback is executed\n     * @returns A function to clear the interval\n     */\n    setInterval: (callback: () => void, delay: number) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      const id = setInterval(callback, delay);\n      const cleanup = () => clearInterval(id);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n    /**\n     * Set a requestAnimationFrame that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @returns A function to clear the requestAnimationFrame\n     */\n    requestAnimationFrame: (callback: FrameRequestCallback) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      const id = requestAnimationFrame(callback);\n      const cleanup = () => cancelAnimationFrame(id);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n  };\n}\n","/**\n * Store a map of unique ids for elements so that there are no collisions.\n */\nconst uniqueIdMap = new Map<string, number>();\n\n/**\n * Generate a unique id for an element\n * @param prefix - The prefix to use for the id\n * @returns The generated id\n */\nexport function uniqueId(prefix: string): string {\n  const id = uniqueIdMap.get(prefix) ?? 0;\n  uniqueIdMap.set(prefix, id + 1);\n  return `${prefix}-${id}`;\n}\n","import { effect, Injector, Signal, signal, untracked } from '@angular/core';\n\n/**\n * Listen for changes to a signal and call a function when the signal changes.\n * @param source\n * @param fn\n * @param options\n * @param options.injector\n * @internal\n */\nexport function onChange<T>(\n  source: Signal<T | null | undefined>,\n  fn: (value: T | null | undefined, previousValue: T | null | undefined) => void,\n  options?: { injector: Injector },\n): void {\n  const previousValue = signal(source());\n\n  effect(\n    () => {\n      const value = source();\n      if (value !== previousValue()) {\n        untracked(() => fn(value, previousValue()));\n        previousValue.set(value);\n      }\n    },\n    { injector: options?.injector },\n  );\n\n  // call the fn with the initial value\n  fn(source(), null);\n}\n\n/**\n * Listen for changes to a boolean signal and call one of two functions when the signal changes.\n * @param source\n * @param onTrue\n * @param onFalse\n * @param options\n */\nexport function onBooleanChange(\n  source: Signal<boolean>,\n  onTrue?: () => void,\n  onFalse?: () => void,\n  options?: { injector: Injector },\n): void {\n  onChange(source, value => (value ? onTrue?.() : onFalse?.()), options);\n}\n","import { ElementRef, Renderer2, afterNextRender, inject, signal } from '@angular/core';\n\n/**\n * Injects the dimensions of the element\n * @returns The dimensions of the element\n */\nexport function injectDimensions() {\n  const renderer = inject(Renderer2);\n  const element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  const size = signal<{ width: number; height: number; mounted: boolean }>({\n    width: 0,\n    height: 0,\n    mounted: false,\n  });\n  let transitionDuration: string | undefined, animationName: string | undefined;\n\n  afterNextRender({\n    earlyRead: () => {\n      transitionDuration = element.style.transitionDuration;\n      animationName = element.style.animationName;\n    },\n    write: () => {\n      // block any animations/transitions so the element renders at its full dimensions\n      renderer.setStyle(element, 'transitionDuration', '0s');\n      renderer.setStyle(element, 'animationName', 'none');\n    },\n    read: () => {\n      const { width, height } = element.getBoundingClientRect();\n      size.set({ width, height, mounted: true });\n      // restore the original transition duration and animation name\n      renderer.setStyle(element, 'transitionDuration', transitionDuration);\n      renderer.setStyle(element, 'animationName', animationName);\n    },\n  });\n\n  return size;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-primitives-utils.mjs","sources":["../../../../packages/ng-primitives/utils/src/forms/providers.ts","../../../../packages/ng-primitives/utils/src/observables/take-until-destroyed.ts","../../../../packages/ng-primitives/utils/src/forms/status.ts","../../../../packages/ng-primitives/utils/src/helpers/disposables.ts","../../../../packages/ng-primitives/utils/src/helpers/unique-id.ts","../../../../packages/ng-primitives/utils/src/signals/index.ts","../../../../packages/ng-primitives/utils/src/ui/dimensions.ts","../../../../packages/ng-primitives/utils/src/ng-primitives-utils.ts"],"sourcesContent":["import { ExistingProvider, Type } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n/**\n * A simple helper function to provide a value accessor for a given type.\n * @param type The type to provide the value accessor for\n */\nexport function provideValueAccessor<T>(type: Type<T>): ExistingProvider {\n  return { provide: NG_VALUE_ACCESSOR, useExisting: type, multi: true };\n}\n","/* eslint-disable @nx/workspace-take-until-destroyed */\nimport { DestroyRef } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { EMPTY, MonoTypeOperatorFunction, NEVER, pipe } from 'rxjs';\nimport { catchError, defaultIfEmpty, takeUntil } from 'rxjs/operators';\n\n/**\n * The built-in `takeUntilDestroyed` operator does not handle the case when the component is destroyed before the source observable emits.\n * This operator ensures that the source observable completes gracefully without throwing an error.\n * https://github.com/angular/angular/issues/54527#issuecomment-2098254508\n *\n * @internal\n */\nexport function safeTakeUntilDestroyed<T>(destroyRef?: DestroyRef): MonoTypeOperatorFunction<T> {\n  return pipe(\n    takeUntil(\n      NEVER.pipe(\n        takeUntilDestroyed(destroyRef),\n        catchError(() => EMPTY),\n        defaultIfEmpty(null),\n      ),\n    ),\n  );\n}\n","import { DestroyRef, Signal, WritableSignal, afterNextRender, inject, signal } from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { safeTakeUntilDestroyed } from '../observables/take-until-destroyed';\n\nexport interface NgpControlStatus {\n  valid: boolean | null;\n  invalid: boolean | null;\n  pristine: boolean | null;\n  dirty: boolean | null;\n  touched: boolean | null;\n  pending: boolean | null;\n  disabled: boolean | null;\n}\n\nfunction setStatusSignal(\n  control: NgControl | null,\n  status: WritableSignal<NgpControlStatus>,\n): void {\n  if (!control?.control) {\n    return;\n  }\n\n  status.set({\n    valid: control?.control?.valid ?? null,\n    invalid: control?.control?.invalid ?? null,\n    pristine: control?.control?.pristine ?? null,\n    dirty: control?.control?.dirty ?? null,\n    touched: control?.control?.touched ?? null,\n    pending: control?.control?.pending ?? null,\n    disabled: control?.control?.disabled ?? null,\n  });\n}\n\nfunction subscribeToControlStatus(\n  control: NgControl | null,\n  status: WritableSignal<NgpControlStatus>,\n  destroyRef?: DestroyRef,\n): void {\n  if (!control?.control) {\n    return;\n  }\n\n  control.control.events\n    .pipe(safeTakeUntilDestroyed(destroyRef))\n    .subscribe(() => setStatusSignal(control, status));\n}\n\n/**\n * A utility function to get the status of an Angular form control as a reactive signal.\n * This function injects the NgControl and returns a signal that reflects the control's status.\n * @internal\n */\nexport function controlStatus(): Signal<NgpControlStatus> {\n  const control = inject(NgControl, { optional: true });\n  const destroyRef = inject(DestroyRef);\n\n  const status = signal<NgpControlStatus>({\n    valid: null,\n    invalid: null,\n    pristine: null,\n    dirty: null,\n    touched: null,\n    pending: null,\n    disabled: null,\n  });\n\n  // Fallback if control is not yet available\n  if (!control?.control) {\n    // There is still a chance that the control will be available i.e. after executing OnInit lifecycle hook\n    // in `formControlName` directive, so we set up an effect to subscribe to the control status\n    afterNextRender({\n      write: () => {\n        // If control is still not available, we do nothing, otherwise we subscribe to the control status\n        if (control?.control) {\n          subscribeToControlStatus(control, status, destroyRef);\n          // We re-set the status to ensure it reflects the current state on initialization\n          setStatusSignal(control, status);\n        }\n      },\n    });\n    return status;\n  }\n\n  subscribeToControlStatus(control, status);\n\n  return status;\n}\n","import { DestroyRef, inject } from '@angular/core';\n\n/**\n * Disposable functions are a way to manage timers, intervals, and event listeners\n * that should be cleared when a component is destroyed.\n *\n * This is heavily inspired by Headless UI disposables:\n * https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/utils/disposables.ts\n */\nexport function injectDisposables() {\n  const destroyRef = inject(DestroyRef);\n  let isDestroyed = false;\n\n  destroyRef.onDestroy(() => (isDestroyed = true));\n\n  return {\n    /**\n     * Set a timeout that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @param delay The delay before the callback is executed\n     * @returns A function to clear the timeout\n     */\n    setTimeout: (callback: () => void, delay: number) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      const id = setTimeout(callback, delay);\n      const cleanup = () => clearTimeout(id);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n    /**\n     * Set an interval that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @param delay The delay before the callback is executed\n     * @param target\n     * @param type\n     * @param listener\n     * @param options\n     * @returns A function to clear the interval\n     */\n    addEventListener: <K extends keyof HTMLElementEventMap>(\n      target: EventTarget,\n      type: K,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,\n      options?: boolean | AddEventListenerOptions,\n    ) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      target.addEventListener(type, listener as EventListenerOrEventListenerObject, options);\n      const cleanup = () =>\n        target.removeEventListener(type, listener as EventListenerOrEventListenerObject, options);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n    /**\n     * Set an interval that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @param delay The delay before the callback is executed\n     * @returns A function to clear the interval\n     */\n    setInterval: (callback: () => void, delay: number) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      const id = setInterval(callback, delay);\n      const cleanup = () => clearInterval(id);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n    /**\n     * Set a requestAnimationFrame that will be cleared when the component is destroyed.\n     * @param callback The callback to execute\n     * @returns A function to clear the requestAnimationFrame\n     */\n    requestAnimationFrame: (callback: FrameRequestCallback) => {\n      if (isDestroyed) {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        return () => {};\n      }\n\n      const id = requestAnimationFrame(callback);\n      const cleanup = () => cancelAnimationFrame(id);\n      destroyRef.onDestroy(cleanup);\n      return cleanup;\n    },\n  };\n}\n","/**\n * Store a map of unique ids for elements so that there are no collisions.\n */\nconst uniqueIdMap = new Map<string, number>();\n\n/**\n * Generate a unique id for an element\n * @param prefix - The prefix to use for the id\n * @returns The generated id\n */\nexport function uniqueId(prefix: string): string {\n  const id = uniqueIdMap.get(prefix) ?? 0;\n  uniqueIdMap.set(prefix, id + 1);\n  return `${prefix}-${id}`;\n}\n","import { effect, Injector, Signal, signal, untracked } from '@angular/core';\n\n/**\n * Listen for changes to a signal and call a function when the signal changes.\n * @param source\n * @param fn\n * @param options\n * @param options.injector\n * @internal\n */\nexport function onChange<T>(\n  source: Signal<T | null | undefined>,\n  fn: (value: T | null | undefined, previousValue: T | null | undefined) => void,\n  options?: { injector: Injector },\n): void {\n  const previousValue = signal(source());\n\n  effect(\n    () => {\n      const value = source();\n      if (value !== previousValue()) {\n        untracked(() => fn(value, previousValue()));\n        previousValue.set(value);\n      }\n    },\n    { injector: options?.injector },\n  );\n\n  // call the fn with the initial value\n  fn(source(), null);\n}\n\n/**\n * Listen for changes to a boolean signal and call one of two functions when the signal changes.\n * @param source\n * @param onTrue\n * @param onFalse\n * @param options\n */\nexport function onBooleanChange(\n  source: Signal<boolean>,\n  onTrue?: () => void,\n  onFalse?: () => void,\n  options?: { injector: Injector },\n): void {\n  onChange(source, value => (value ? onTrue?.() : onFalse?.()), options);\n}\n","import { ElementRef, Renderer2, afterNextRender, inject, signal } from '@angular/core';\n\n/**\n * Injects the dimensions of the element\n * @returns The dimensions of the element\n */\nexport function injectDimensions() {\n  const renderer = inject(Renderer2);\n  const element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  const size = signal<{ width: number; height: number; mounted: boolean }>({\n    width: 0,\n    height: 0,\n    mounted: false,\n  });\n  let transitionDuration: string | undefined, animationName: string | undefined;\n\n  afterNextRender({\n    earlyRead: () => {\n      transitionDuration = element.style.transitionDuration;\n      animationName = element.style.animationName;\n    },\n    write: () => {\n      // block any animations/transitions so the element renders at its full dimensions\n      renderer.setStyle(element, 'transitionDuration', '0s');\n      renderer.setStyle(element, 'animationName', 'none');\n    },\n    read: () => {\n      const { width, height } = element.getBoundingClientRect();\n      size.set({ width, height, mounted: true });\n      // restore the original transition duration and animation name\n      renderer.setStyle(element, 'transitionDuration', transitionDuration);\n      renderer.setStyle(element, 'animationName', animationName);\n    },\n  });\n\n  return size;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/form-field/form-control/form-control.d.ts

@@ -1,5 +1,6 @@
 import { BooleanInput } from '@angular/cdk/coercion';
 import { Signal } from '@angular/core';
+import { NgpControlStatus } from 'ng-primitives/utils';
 import * as i0 from "@angular/core";
 /**
  * Typically this primitive would be not be used directly, but instead a more specific form control primitive would be used (e.g. `ngpInput`). All of our form control primitives use `ngpFormControl` internally so they will have the same accessibility features as described below.
@@ -27,5 +28,5 @@ interface FormControlState {
     id: Signal<string>;
     disabled?: Signal<boolean>;
 }
-export declare function setupFormControl({ id, disabled }: FormControlState): void;
+export declare function setupFormControl({ id, disabled, }: FormControlState): Signal<NgpControlStatus>;
 export {};

package/input/input/input.d.ts

@@ -1,4 +1,6 @@
 import { BooleanInput } from '@angular/cdk/coercion';
+import { Signal } from '@angular/core';
+import { NgpControlStatus } from 'ng-primitives/utils';
 import * as i0 from "@angular/core";
 import * as i1 from "ng-primitives/autofill";
 export declare class NgpInput {
@@ -18,6 +20,10 @@ export declare class NgpInput {
      * Whether the element is disabled.
      */
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The form control status.
+     */
+    protected readonly status: Signal<NgpControlStatus>;
     /**
      * The input state.
      */

package/package.json

@@ -2,7 +2,7 @@
   "name": "ng-primitives",
   "description": "Angular Primitives is a low-level headless UI component library with a focus on accessibility, customization, and developer experience. ",
   "license": "Apache-2.0",
-  "version": "0.52.0",
+  "version": "0.54.0",
   "keywords": [
     "angular",
     "primitives",

package/portal/overlay-token.d.ts

@@ -1,12 +1,12 @@
-import { ValueProvider } from '@angular/core';
+import { Signal, ValueProvider } from '@angular/core';
 /**
  * Injects the context for the overlay.
  * @internal
  */
-export declare function injectOverlayContext<T>(): T;
+export declare function injectOverlayContext<T>(): Signal<T>;
 /**
  * Provides the context for the overlay.
  * @param value The value to provide as the context.
  * @internal
  */
-export declare function provideOverlayContext<T>(value: T): ValueProvider;
+export declare function provideOverlayContext<T>(value: Signal<T | undefined> | undefined): ValueProvider;

package/portal/overlay.d.ts

@@ -1,5 +1,5 @@
 import { FocusOrigin } from '@angular/cdk/a11y';
-import { Injector, Provider, TemplateRef, Type, ViewContainerRef } from '@angular/core';
+import { Injector, Provider, Signal, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { Middleware, Placement, Strategy } from '@floating-ui/dom';
 import { Subject } from 'rxjs';
 /**
@@ -16,7 +16,7 @@ export interface NgpOverlayConfig<T = unknown> {
     /** ViewContainerRef to use for creating the portal */
     viewContainerRef: ViewContainerRef;
     /** Context data to pass to the overlay content */
-    context?: T | null;
+    context?: Signal<T | undefined>;
     /** Container element to attach the overlay to (defaults to document.body) */
     container?: HTMLElement | null;
     /** Preferred placement of the overlay relative to the trigger */
@@ -76,7 +76,7 @@ export declare class NgpOverlay<T = unknown> {
      * Determine if the overlay has been positioned
      * @internal
      */
-    readonly isPositioned: import("@angular/core").Signal<boolean>;
+    readonly isPositioned: Signal<boolean>;
     /** Signal tracking the trigger element width */
     readonly triggerWidth: import("@angular/core").WritableSignal<number | null>;
     /** The transform origin for the overlay */

package/schematics/ng-generate/templates/popover/popover.__fileSuffix@dasherize__.ts.template

@@ -5,7 +5,7 @@ import { injectPopoverContext, NgpPopover } from 'ng-primitives/popover';
   selector: '<%= prefix %>-popover',
   hostDirectives: [NgpPopover],
   template: `
-    {{ content }}
+    {{ content() }}
   `,
   styles: `
 /* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */

package/schematics/ng-generate/templates/tooltip/tooltip.__fileSuffix@dasherize__.ts.template

@@ -5,7 +5,7 @@ import { injectTooltipContext, NgpTooltip } from 'ng-primitives/tooltip';
   selector: '<%= prefix %>-tooltip',
   hostDirectives: [NgpTooltip],
   template: `
-    {{ content }}
+    {{ content() }}
   `,
   styles: `
 /* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */

package/utils/index.d.ts

@@ -5,3 +5,4 @@ export { injectDisposables } from './helpers/disposables';
 export { uniqueId } from './helpers/unique-id';
 export { onBooleanChange, onChange } from './signals';
 export { injectDimensions } from './ui/dimensions';
+export { safeTakeUntilDestroyed } from './observables/take-until-destroyed';

package/utils/observables/take-until-destroyed.d.ts

@@ -0,0 +1,10 @@
+import { DestroyRef } from '@angular/core';
+import { MonoTypeOperatorFunction } from 'rxjs';
+/**
+ * The built-in `takeUntilDestroyed` operator does not handle the case when the component is destroyed before the source observable emits.
+ * This operator ensures that the source observable completes gracefully without throwing an error.
+ * https://github.com/angular/angular/issues/54527#issuecomment-2098254508
+ *
+ * @internal
+ */
+export declare function safeTakeUntilDestroyed<T>(destroyRef?: DestroyRef): MonoTypeOperatorFunction<T>;