@odx/angular 5.7.4 → 6.0.1

package/fesm2022/odx-angular-cdk-custom-form-control.mjs

@@ -22,26 +22,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+/**
+ * An abstract directive that serves as a base for custom form controls, integrating seamlessly with Angular Forms.
+ * It incorporates common form control behaviors such as handling disabled and readonly states, validation, and more.
+ *
+ * This approach allows the creation of highly reusable and consistent form controls within Angular applications,
+ * simplifying the integration with Angular Forms and the handling of common form behaviors.
+ *
+ * Extends Controller to provide a consistent API for managing state changes and subscriptions.
+ *
+ * @see {Controller}
+ */
 class CustomFormControl extends Controller {
     static { this.CURRENT_INDEX = 0; }
+    /**
+     * The current value of the form control. Setting this value updates the internal state and marks the control
+     * for checking changes. Getting this value returns the current internal value of the control.
+     *
+     * @example
+     * ```ts
+     * this.customInputControl.value = 'newValue'; // Sets the value
+     * const currentValue = this.customInputControl.value; // Gets the current value
+     * ```
+     */
     set value(value) {
         if (this.internalValue !== value) {
             this.internalValue = value;
             this.triggerControllerChange();
         }
     }
+    /**
+     * Gets the value of the custom form control.
+     *
+     * @returns {T} - The value of the custom form control.
+     */
     get value() {
         return this.internalValue;
     }
+    /**
+     * Indicates whether the form control currently has an error. This takes into account any ignored errors.
+     *
+     * @returns {boolean} - True if the form control has an error, false otherwise.
+     *
+     * @example
+     * ```ts
+     * if (this.customInputControl.hasError) { ... }
+     * ```
+     */
     get hasError() {
         return !!this.ngControl?.touched && !!this.ngControl?.invalid && this.hasNonIgnoredError(this.ngControl.errors);
     }
+    /**
+     * Indicates whether the form control is currently disabled.
+     *
+     * @returns {boolean} - True if the form control is disabled, false otherwise.
+     *
+     * @example
+     * ```ts
+     * if (this.customInputControl.isDisabled) { ... }
+     * ```
+     */
     get isDisabled() {
         return !!this.disabledController?.disabled;
     }
+    /**
+     * Indicates whether the form control is currently in a readonly state.
+     *
+     * @returns {boolean} - True if the form control is readonly, false otherwise.
+     *
+     * @example
+     * ```ts
+     * if (this.customInputControl.isReadonly) { ... }
+     * ```
+     */
     get isReadonly() {
         return !!this.readonlyController?.readonly;
     }
+    /**
+     * Indicates whether the form control is marked as required, either through Validators.required, Validators.requiredTrue,
+     * or by a required attribute on a parent form field.
+     *
+     * @returns {boolean} - True if the form control is required, false otherwise.
+     *
+     * @example
+     * ````ts
+     * if (this.customInputControl.isRequired) { ... }
+     * ````
+     */
     get isRequired() {
         return !!this.requiredValidator?.required || this.hasValidator(Validators.required) || this.hasValidator(Validators.requiredTrue);
     }
@@ -51,37 +118,76 @@ class CustomFormControl extends Controller {
         this.disabledController = DisabledController.inject();
         this.readonlyController = ReadonlyController.inject();
         this.ngControl = inject(NgControl, { self: true, optional: true });
+        /**
+         * A unique identifier for the custom form control. If not provided, a unique ID is generated automatically.
+         * This can be useful for associating form control with a label.
+         *
+         * @type {string}
+         */
         this.id = null;
+        /**
+         * The name attribute for the custom form control. Defaults to a unique name if not provided.
+         * This is useful when the form control is part of a form and needs to be identified.
+         *
+         * @type {string}
+         */
         this.name = `odx-form-control-${CustomFormControl.CURRENT_INDEX++}`;
+        /**
+         * The tabindex attribute for the custom form control. Can be used to control the order of focus navigation.
+         *
+         * @type {string | null}
+         */
         this.tabindex = null;
+        /**
+         * An array of error codes to ignore. If an error code is included in this array, the form control will not
+         * consider it as an error state. Useful for ignoring specific validation errors.
+         *
+         * @type {string[]}
+         */
         this.ignoreErrors = [];
+        /**
+         * A reference to the `ControlDirective` if it exists within the same host. This allows for direct interaction
+         * with the underlying form control directive.
+         *
+         * @type {ControlDirective | null}
+         *
+         * @example
+         * ```ts
+         * this.customInputControl.control?.focus();
+         * ```
+         */
         this.control = null;
         this.internalValue = initialValue;
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
     }
+    /** @internal */
     onTouched() {
         // implemented by control value accessor
     }
+    /** @internal */
     onChange(_value) {
         // implemented by control value accessor
     }
+    /** @internal */
     registerOnChange(fn) {
         this.onChange = fn;
     }
+    /** @internal */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /** @internal */
     setDisabledState(isDisabled) {
         this.disabledController?.setDisabledState(isDisabled);
     }
+    /** @internal */
     writeValue(value) {
-        if (this.isDisabled)
-            return;
         this.value = value;
         this.onChange(value);
     }
+    /** @internal */
     updateValue(value) {
         if (this.isDisabled)
             return;
@@ -129,24 +235,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [ControlDirective]
             }], hasNonIgnoredError: [] } });
 
+/**
+ * An abstract directive that facilitates handling input changes, focusing, and blurring programmatically for input elements.
+ * It provides a reactive `valueChange$` observable to subscribe to input changes.
+ * This directive can be extended to create more specific input handlers.
+ *
+ * @example
+ * Extending InputControlDirective in a custom directive:
+ * ```ts
+ * @Directive({
+ *   selector: '[appCustomInput]',
+ *   standalone: true,
+ * })
+ * export class CustomInputDirective extends InputControlDirective {
+ *   // Custom logic here
+ * }
+ * ```
+ *
+ * Using the directive in a component template:
+ * ```html
+ * <input appCustomInput type="text" />
+ * ```
+ *
+ * Subscribing to input changes in the component:
+ * ```ts
+ * @Component({...})
+ * export class MyComponent implements AfterViewInit {
+ *   @ViewChild(CustomInputDirective) customInputDirective!: CustomInputDirective;
+ *
+ *   ngAfterViewInit(): void {
+ *     this.customInputDirective.valueChange$.subscribe(value => {
+ *       console.log('Input value changed to:', value);
+ *     });
+ *   }
+ * }
+ *
+ * // Focusing the input programmatically
+ * this.customInputDirective.focus();
+ *
+ * // Blurring the input programmatically
+ * this.customInputDirective.blur();
+ *
+ * // Resetting the input value programmatically
+ * this.customInputDirective.reset();
+ * ```
+ */
 class InputControlDirective {
     constructor() {
         this.takeUntilDestroyed = untilDestroyed();
         this.element = injectElement();
+        /**
+         * Represents an observable stream of value changes for the input control.
+         *
+         * @emits {string} input value changes.
+         */
         this.valueChange$ = fromEvent(this.element.nativeElement, 'input').pipe(distinctUntilChanged(), map(() => this.nativeElementValue));
     }
+    /**
+     * Gets the current value of the input element.
+     *
+     * @type {string} The current value of the input element.
+     */
     get nativeElementValue() {
         return this.element.nativeElement.value;
     }
+    /**
+     * Sets the value of the input element.
+     *
+     * @param {string} value - The value to set.
+     */
     set nativeElementValue(value) {
         this.element.nativeElement.value = value;
     }
+    /**
+     * Sets focus on the input element.
+     *
+     * @returns {void}
+     */
     focus() {
         this.element.nativeElement.focus();
     }
+    /**
+     * Removes focus from the input element.
+     *
+     * @returns {void}
+     */
     blur() {
         this.element.nativeElement.blur();
     }
+    /**
+     * Resets the input element value to an empty string.
+     *
+     * @returns {void}
+     */
     reset() {
         this.element.nativeElement.value = '';
     }

package/fesm2022/odx-angular-cdk-custom-form-control.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-cdk-custom-form-control.mjs","sources":["../../../../libs/angular/cdk/custom-form-control/src/lib/control.directive.ts","../../../../libs/angular/cdk/custom-form-control/src/lib/custom-form-control.ts","../../../../libs/angular/cdk/custom-form-control/src/lib/input-control.directive.ts","../../../../libs/angular/cdk/custom-form-control/src/odx-angular-cdk-custom-form-control.ts"],"sourcesContent":["import { Directive } from '@angular/core';\nimport { injectElement } from '@odx/angular/utils';\n\n@Directive({\n  standalone: true,\n  selector: '[odxControl]',\n  exportAs: 'odxControl',\n})\nexport class ControlDirective {\n  public readonly element = injectElement();\n}\n","import { Directive, inject, Input, ViewChild } from '@angular/core';\nimport { ControlValueAccessor, NgControl, RequiredValidator, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';\nimport { Controller, DisabledController, ReadonlyController } from '@odx/angular';\nimport { arrayAttribute, Pure } from '@odx/angular/utils';\nimport { ControlDirective } from './control.directive';\n\n@Directive({\n  host: {\n    '[class.has-error]': 'hasError',\n    '[class.is-disabled]': 'isDisabled',\n    '[class.is-readonly]': 'isReadonly',\n    '[class.is-required]': 'required',\n  },\n})\nexport abstract class CustomFormControl<T> extends Controller implements ControlValueAccessor {\n  private static CURRENT_INDEX = 0;\n\n  private readonly requiredValidator = inject(RequiredValidator, { optional: true, self: true });\n  private internalValue: T;\n  protected readonly disabledController = DisabledController.inject();\n  protected readonly readonlyController = ReadonlyController.inject();\n  protected readonly ngControl = inject(NgControl, { self: true, optional: true });\n\n  @Input()\n  public id: string | null = null;\n\n  @Input()\n  public name = `odx-form-control-${CustomFormControl.CURRENT_INDEX++}`;\n\n  @Input()\n  public tabindex: string | null = null;\n\n  @Input({ transform: arrayAttribute })\n  public ignoreErrors: string[] = [];\n\n  public set value(value: T) {\n    if (this.internalValue !== value) {\n      this.internalValue = value;\n      this.triggerControllerChange();\n    }\n  }\n  public get value(): T {\n    return this.internalValue;\n  }\n\n  public get hasError(): boolean {\n    return !!this.ngControl?.touched && !!this.ngControl?.invalid && this.hasNonIgnoredError(this.ngControl.errors);\n  }\n\n  public get isDisabled(): boolean {\n    return !!this.disabledController?.disabled;\n  }\n\n  public get isReadonly(): boolean {\n    return !!this.readonlyController?.readonly;\n  }\n\n  public get isRequired(): boolean {\n    return !!this.requiredValidator?.required || this.hasValidator(Validators.required) || this.hasValidator(Validators.requiredTrue);\n  }\n\n  @ViewChild(ControlDirective)\n  public readonly control: ControlDirective | null = null;\n\n  constructor(initialValue: T) {\n    super();\n    this.internalValue = initialValue;\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  public onTouched() {\n    // implemented by control value accessor\n  }\n\n  public onChange(_value: T) {\n    // implemented by control value accessor\n  }\n\n  public registerOnChange(fn: (value: T) => void): void {\n    this.onChange = fn;\n  }\n\n  public registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  public setDisabledState(isDisabled: boolean): void {\n    this.disabledController?.setDisabledState(isDisabled);\n  }\n\n  public writeValue(value: T): void {\n    if (this.isDisabled) return;\n    this.value = value;\n    this.onChange(value);\n  }\n\n  public updateValue(value: T): void {\n    if (this.isDisabled) return;\n    this.writeValue(value);\n    this.onTouched();\n  }\n\n  protected hasValidator(validator: ValidatorFn): boolean {\n    return !!this.ngControl?.control?.hasValidator(validator);\n  }\n\n  @Pure\n  private hasNonIgnoredError(errors: ValidationErrors | null): boolean {\n    if (!errors) return false;\n\n    return Object.keys(errors).some((error) => !this.ignoreErrors.includes(error));\n  }\n}\n","import { Directive } from '@angular/core';\nimport { injectElement, untilDestroyed } from '@odx/angular/utils';\nimport { distinctUntilChanged, fromEvent, map } from 'rxjs';\n\n@Directive({\n  standalone: true,\n})\nexport abstract class InputControlDirective {\n  protected readonly takeUntilDestroyed = untilDestroyed();\n\n  public readonly element = injectElement<HTMLInputElement>();\n\n  public valueChange$ = fromEvent(this.element.nativeElement, 'input').pipe(\n    distinctUntilChanged(),\n    map(() => this.nativeElementValue),\n  );\n\n  public get nativeElementValue(): string {\n    return this.element.nativeElement.value;\n  }\n\n  public set nativeElementValue(value: string) {\n    this.element.nativeElement.value = value;\n  }\n\n  public focus(): void {\n    this.element.nativeElement.focus();\n  }\n\n  public blur(): void {\n    this.element.nativeElement.blur();\n  }\n\n  public reset(): void {\n    this.element.nativeElement.value = '';\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"odx-angular-cdk-custom-form-control.mjs","sources":["../../../../libs/angular/cdk/custom-form-control/src/lib/control.directive.ts","../../../../libs/angular/cdk/custom-form-control/src/lib/custom-form-control.ts","../../../../libs/angular/cdk/custom-form-control/src/lib/input-control.directive.ts","../../../../libs/angular/cdk/custom-form-control/src/odx-angular-cdk-custom-form-control.ts"],"sourcesContent":["import { Directive } from '@angular/core';\nimport { injectElement } from '@odx/angular/utils';\n\n@Directive({\n  standalone: true,\n  selector: '[odxControl]',\n  exportAs: 'odxControl',\n})\nexport class ControlDirective {\n  public readonly element = injectElement();\n}\n","import { Directive, inject, Input, ViewChild } from '@angular/core';\nimport { ControlValueAccessor, NgControl, RequiredValidator, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';\nimport { Controller, DisabledController, ReadonlyController } from '@odx/angular';\nimport { arrayAttribute, Pure } from '@odx/angular/utils';\nimport { ControlDirective } from './control.directive';\n\n/**\n * An abstract directive that serves as a base for custom form controls, integrating seamlessly with Angular Forms.\n * It incorporates common form control behaviors such as handling disabled and readonly states, validation, and more.\n *\n * This approach allows the creation of highly reusable and consistent form controls within Angular applications,\n * simplifying the integration with Angular Forms and the handling of common form behaviors.\n *\n * Extends Controller to provide a consistent API for managing state changes and subscriptions.\n *\n * @see {Controller}\n */\n@Directive({\n  host: {\n    '[class.has-error]': 'hasError',\n    '[class.is-disabled]': 'isDisabled',\n    '[class.is-readonly]': 'isReadonly',\n    '[class.is-required]': 'required',\n  },\n})\nexport abstract class CustomFormControl<T> extends Controller implements ControlValueAccessor {\n  private static CURRENT_INDEX = 0;\n\n  private readonly requiredValidator = inject(RequiredValidator, { optional: true, self: true });\n  private internalValue: T;\n  protected readonly disabledController = DisabledController.inject();\n  protected readonly readonlyController = ReadonlyController.inject();\n  protected readonly ngControl = inject(NgControl, { self: true, optional: true });\n\n  /**\n   * A unique identifier for the custom form control. If not provided, a unique ID is generated automatically.\n   * This can be useful for associating form control with a label.\n   *\n   * @type {string}\n   */\n  @Input()\n  public id: string | null = null;\n\n  /**\n   * The name attribute for the custom form control. Defaults to a unique name if not provided.\n   * This is useful when the form control is part of a form and needs to be identified.\n   *\n   * @type {string}\n   */\n  @Input()\n  public name = `odx-form-control-${CustomFormControl.CURRENT_INDEX++}`;\n\n  /**\n   * The tabindex attribute for the custom form control. Can be used to control the order of focus navigation.\n   *\n   * @type {string | null}\n   */\n  @Input()\n  public tabindex: string | null = null;\n\n  /**\n   * An array of error codes to ignore. If an error code is included in this array, the form control will not\n   * consider it as an error state. Useful for ignoring specific validation errors.\n   *\n   * @type {string[]}\n   */\n  @Input({ transform: arrayAttribute })\n  public ignoreErrors: string[] = [];\n\n  /**\n   * The current value of the form control. Setting this value updates the internal state and marks the control\n   * for checking changes. Getting this value returns the current internal value of the control.\n   *\n   * @example\n   * ```ts\n   * this.customInputControl.value = 'newValue'; // Sets the value\n   * const currentValue = this.customInputControl.value; // Gets the current value\n   * ```\n   */\n  public set value(value: T) {\n    if (this.internalValue !== value) {\n      this.internalValue = value;\n      this.triggerControllerChange();\n    }\n  }\n\n  /**\n   * Gets the value of the custom form control.\n   *\n   * @returns {T} - The value of the custom form control.\n   */\n  public get value(): T {\n    return this.internalValue;\n  }\n\n  /**\n   * Indicates whether the form control currently has an error. This takes into account any ignored errors.\n   *\n   * @returns {boolean} - True if the form control has an error, false otherwise.\n   *\n   * @example\n   * ```ts\n   * if (this.customInputControl.hasError) { ... }\n   * ```\n   */\n  public get hasError(): boolean {\n    return !!this.ngControl?.touched && !!this.ngControl?.invalid && this.hasNonIgnoredError(this.ngControl.errors);\n  }\n\n  /**\n   * Indicates whether the form control is currently disabled.\n   *\n   * @returns {boolean} - True if the form control is disabled, false otherwise.\n   *\n   * @example\n   * ```ts\n   * if (this.customInputControl.isDisabled) { ... }\n   * ```\n   */\n  public get isDisabled(): boolean {\n    return !!this.disabledController?.disabled;\n  }\n\n  /**\n   * Indicates whether the form control is currently in a readonly state.\n   *\n   * @returns {boolean} - True if the form control is readonly, false otherwise.\n   *\n   * @example\n   * ```ts\n   * if (this.customInputControl.isReadonly) { ... }\n   * ```\n   */\n  public get isReadonly(): boolean {\n    return !!this.readonlyController?.readonly;\n  }\n\n  /**\n   * Indicates whether the form control is marked as required, either through Validators.required, Validators.requiredTrue,\n   * or by a required attribute on a parent form field.\n   *\n   * @returns {boolean} - True if the form control is required, false otherwise.\n   *\n   * @example\n   * ````ts\n   * if (this.customInputControl.isRequired) { ... }\n   * ````\n   */\n  public get isRequired(): boolean {\n    return !!this.requiredValidator?.required || this.hasValidator(Validators.required) || this.hasValidator(Validators.requiredTrue);\n  }\n\n  /**\n   * A reference to the `ControlDirective` if it exists within the same host. This allows for direct interaction\n   * with the underlying form control directive.\n   *\n   * @type {ControlDirective | null}\n   *\n   * @example\n   * ```ts\n   * this.customInputControl.control?.focus();\n   * ```\n   */\n  @ViewChild(ControlDirective)\n  public readonly control: ControlDirective | null = null;\n\n  constructor(initialValue: T) {\n    super();\n    this.internalValue = initialValue;\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  /** @internal */\n  public onTouched() {\n    // implemented by control value accessor\n  }\n\n  /** @internal */\n  public onChange(_value: T) {\n    // implemented by control value accessor\n  }\n\n  /** @internal */\n  public registerOnChange(fn: (value: T) => void): void {\n    this.onChange = fn;\n  }\n  /** @internal */\n  public registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /** @internal */\n  public setDisabledState(isDisabled: boolean): void {\n    this.disabledController?.setDisabledState(isDisabled);\n  }\n\n  /** @internal */\n  public writeValue(value: T): void {\n    this.value = value;\n    this.onChange(value);\n  }\n\n  /** @internal */\n  public updateValue(value: T): void {\n    if (this.isDisabled) return;\n    this.writeValue(value);\n    this.onTouched();\n  }\n\n  protected hasValidator(validator: ValidatorFn): boolean {\n    return !!this.ngControl?.control?.hasValidator(validator);\n  }\n\n  @Pure\n  private hasNonIgnoredError(errors: ValidationErrors | null): boolean {\n    if (!errors) return false;\n\n    return Object.keys(errors).some((error) => !this.ignoreErrors.includes(error));\n  }\n}\n","import { Directive } from '@angular/core';\nimport { injectElement, untilDestroyed } from '@odx/angular/utils';\nimport { distinctUntilChanged, fromEvent, map } from 'rxjs';\n\n/**\n * An abstract directive that facilitates handling input changes, focusing, and blurring programmatically for input elements.\n * It provides a reactive `valueChange$` observable to subscribe to input changes.\n * This directive can be extended to create more specific input handlers.\n *\n * @example\n * Extending InputControlDirective in a custom directive:\n * ```ts\n * @Directive({\n *   selector: '[appCustomInput]',\n *   standalone: true,\n * })\n * export class CustomInputDirective extends InputControlDirective {\n *   // Custom logic here\n * }\n * ```\n *\n * Using the directive in a component template:\n * ```html\n * <input appCustomInput type=\"text\" />\n * ```\n *\n * Subscribing to input changes in the component:\n * ```ts\n * @Component({...})\n * export class MyComponent implements AfterViewInit {\n *   @ViewChild(CustomInputDirective) customInputDirective!: CustomInputDirective;\n *\n *   ngAfterViewInit(): void {\n *     this.customInputDirective.valueChange$.subscribe(value => {\n *       console.log('Input value changed to:', value);\n *     });\n *   }\n * }\n *\n * // Focusing the input programmatically\n * this.customInputDirective.focus();\n *\n * // Blurring the input programmatically\n * this.customInputDirective.blur();\n *\n * // Resetting the input value programmatically\n * this.customInputDirective.reset();\n * ```\n */\n@Directive({\n  standalone: true,\n})\nexport abstract class InputControlDirective {\n  protected readonly takeUntilDestroyed = untilDestroyed();\n\n  public readonly element = injectElement<HTMLInputElement>();\n\n  /**\n   * Represents an observable stream of value changes for the input control.\n   *\n   * @emits {string} input value changes.\n   */\n  public valueChange$ = fromEvent(this.element.nativeElement, 'input').pipe(\n    distinctUntilChanged(),\n    map(() => this.nativeElementValue),\n  );\n\n  /**\n   * Gets the current value of the input element.\n   *\n   * @type {string} The current value of the input element.\n   */\n  public get nativeElementValue(): string {\n    return this.element.nativeElement.value;\n  }\n\n  /**\n   * Sets the value of the input element.\n   *\n   * @param {string} value - The value to set.\n   */\n  public set nativeElementValue(value: string) {\n    this.element.nativeElement.value = value;\n  }\n\n  /**\n   * Sets focus on the input element.\n   *\n   * @returns {void}\n   */\n  public focus(): void {\n    this.element.nativeElement.focus();\n  }\n\n  /**\n   * Removes focus from the input element.\n   *\n   * @returns {void}\n   */\n  public blur(): void {\n    this.element.nativeElement.blur();\n  }\n\n  /**\n   * Resets the input element value to an empty string.\n   *\n   * @returns {void}\n   */\n  public reset(): void {\n    this.element.nativeElement.value = '';\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/odx-angular-cdk-dynamic-view.mjs

@@ -44,6 +44,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Prepares an array of node arrays suitable for projection into the `<ng-content>` slots
+ * of a dynamically created Angular component based on its content selectors.
+ *
+ * The function inspects the component's content selectors and aligns the provided nodes
+ * for projection according to these selectors. A selector of '*' indicates that the nodes
+ * should be projected into this slot. If a content selector does not match '*', an empty
+ * array is returned for that slot, indicating no nodes are projected into it.
+ *
+ * @param {Type<unknown>} component - The component class for which the projectable nodes are being prepared.
+ * @param {Node[]} nodes - The nodes intended for projection into the component's `<ng-content>` slots.
+ * @returns {Node[][]} An array of node arrays, each corresponding to a `<ng-content>` slot in the component.
+ * Each sub-array contains nodes to be projected into the respective `<ng-content>` slot, based on the component's content selectors.
+ *
+ * @example
+ * ```ts
+ * // Given a component with two `<ng-content>` slots, the first without a selector and the second with the selector `<ng-content select=".selector-class">`,
+ * const nodes = [document.createTextNode('Hello'), document.createElement('div')];
+ * const projectableNodes = createProjectableNodes(MyComponent, nodes);
+ * // projectableNodes would be `[[TextNode, DivElement], []]` for a component with selectors ['*', '.selector-class']
+ * ```
+ */
 function createProjectableNodes(component, nodes) {
     const componentType = reflectComponentType(component);
     if (componentType && componentType.ngContentSelectors.length > 0) {
@@ -52,10 +74,43 @@ function createProjectableNodes(component, nodes) {
     return [];
 }
 
+/**
+ * Type guard function to check if a given value is considered dynamic text content.
+ * Dynamic text content can either be a plain string or an Observable. This function
+ * facilitates type-safe handling of dynamic text content by checking the type of the value.
+ *
+ * @param {unknown} value - The value to be checked.
+ * @returns {value is DynamicTextContent} Returns `true` if the value is a string or an Observable,
+ * indicating it can be used as dynamic text content; otherwise, returns `false`.
+ *
+ * @example
+ * ```ts
+ * // Example usage of the isDynamicTextContent function
+ * const textValue: unknown = getTextValue(); // This function may return either string or Observable
+ *
+ * if (isDynamicTextContent(textValue)) {
+ *   // The type of textValue is now narrowed to DynamicTextContent (string | Observable)
+ *   console.log('The value can be used as dynamic text content.');
+ * } else {
+ *   console.log('The value is not suitable as dynamic text content.');
+ * }
+ * ```
+ */
 function isDynamicTextContent(value) {
     return isString(value) || isObservable(value);
 }
 
+/**
+ * The DynamicComponentRef class is a powerful utility for dynamically creating and managing
+ * Angular components at runtime. It encapsulates the logic for component creation, input handling,
+ * and lifecycle management, making it easier to work with dynamic components in complex applications.
+ *
+ * A reference to a dynamically created component, providing methods to manage its lifecycle,
+ * detect changes, and update its inputs based on a context.
+ *
+ * @template T - The type of the component being managed.
+ * @template C - The type of the context used to update the component's inputs.
+ */
 class DynamicComponentRef {
     constructor(options) {
         this.options = options;
@@ -86,9 +141,16 @@ class DynamicComponentRef {
             this.update(context);
         }
     }
+    /**
+     * Triggers change detection for the dynamically created component, ensuring that any updates to inputs
+     * or internal state are reflected in the view.
+     */
     detectChanges() {
         this.componentRef?.changeDetectorRef.detectChanges();
     }
+    /**
+     * Destroys the dynamically created component, cleaning up resources and detaching it from the application view.
+     */
     destroy() {
         if (this.componentRef?.hostView.destroyed) {
             this.componentRef = null;
@@ -101,9 +163,20 @@ class DynamicComponentRef {
         this.componentRef = null;
         this.componentInputs = null;
     }
+    /**
+     * Retrieves the native element associated with the dynamically created component's host view.
+     *
+     * @returns {Element} The native DOM element of the component.
+     */
     getElement() {
         return this.componentRef?.location.nativeElement ?? null;
     }
+    /**
+     * Updates the component's inputs based on the provided context. Merges the new context with the existing
+     * context and applies the combined context as inputs to the component.
+     *
+     * @param {C} context - The context containing new values for the component's inputs.
+     */
     update(context) {
         this.options.context = deepmerge({}, this.options.context, context);
         if (!this.componentRef)
@@ -114,14 +187,31 @@ class DynamicComponentRef {
             }
         }
     }
+    /**
+     * Retrieves the current context used for the component's inputs.
+     *
+     * @returns {GetDynamicViewContext<T>} The current context object.
+     */
     getContext() {
         return this.options.context ?? {};
     }
+    /**
+     * Retrieves the view reference associated with the dynamically created component.
+     *
+     * @returns {ViewRef | null} The view reference, or null if the component has not been created or has been destroyed.
+     */
     getView() {
         return this.componentRef?.hostView ?? null;
     }
 }
 
+/**
+ * A reference to a dynamically created template, offering methods to manage its lifecycle,
+ * detect changes, and update its context. It encapsulates the logic for creating and manipulating
+ * an `EmbeddedViewRef` from a given `TemplateRef`.
+ *
+ * @template T - The type of the `NgTemplateRef` being managed.
+ */
 class DynamicTemplateRef {
     constructor(options) {
         this.options = options;
@@ -129,9 +219,17 @@ class DynamicTemplateRef {
         this.embeddedViewRef = null;
         this.create(options);
     }
+    /**
+     * Triggers change detection on the embedded view created from the template, ensuring that any updates
+     * to the context or internal state are reflected in the view.
+     */
     detectChanges() {
         this.embeddedViewRef?.detectChanges();
     }
+    /**
+     * Destroys the embedded view associated with the template, cleaning up resources and detaching it from the
+     * application view if necessary.
+     */
     destroy() {
         if (this.embeddedViewRef?.destroyed) {
             this.embeddedViewRef = null;
@@ -143,9 +241,20 @@ class DynamicTemplateRef {
         this.embeddedViewRef?.destroy();
         this.embeddedViewRef = null;
     }
+    /**
+     * Retrieves the native element associated with the template's embedded view's root node.
+     *
+     * @returns {Element} The native DOM element of the embedded view's root node, if available.
+     */
     getElement() {
         return this.embeddedViewRef?.rootNodes?.[0] ?? null;
     }
+    /**
+     * Updates the context of the embedded view based on the provided context object. Merges the new context
+     * with the existing one and applies the combined context to the embedded view.
+     *
+     * @param {GetDynamicViewContext<T>} context - The context containing new values for the template's view.
+     */
     update(context) {
         this.options.context = deepmerge({}, this.options.context, context);
         if (this.embeddedViewRef) {
@@ -153,9 +262,19 @@ class DynamicTemplateRef {
             this.detectChanges();
         }
     }
+    /**
+     * Retrieves the current context used for the template's view.
+     *
+     * @returns {GetDynamicViewContext<T>} The current context object.
+     */
     getContext() {
         return this.options.context ?? {};
     }
+    /**
+     * Retrieves the view reference (`ViewRef`) associated with the dynamically created template's embedded view.
+     *
+     * @returns {ViewRef | null} The view reference, or null if the template has not been instantiated or has been destroyed.
+     */
     getView() {
         return this.embeddedViewRef;
     }
@@ -170,6 +289,28 @@ class DynamicTemplateRef {
     }
 }
 
+/**
+ * Type guard function to check if a given value is a reference to a dynamically created view.
+ * This helps in distinguishing between dynamic view references (`DynamicComponentRef` or `DynamicTemplateRef`)
+ * and other types of values, facilitating type-safe operations on dynamic views.
+ *
+ * @param {unknown} value - The value to check.
+ * @returns {value is DynamicViewRef<DynamicContent>} `true` if the value is an instance of `DynamicComponentRef`
+ * or `DynamicTemplateRef`, indicating it is a dynamic view reference; otherwise, `false`.
+ *
+ * @example
+ * ```ts
+ * // Given a value that could be a dynamic view reference or something else
+ * const value: unknown = getSomeValue();
+ *
+ * if (isDynamicView(value)) {
+ *   // TypeScript now knows `value` is a dynamic view reference, so you can access its methods safely
+ *   value.detectChanges();
+ * } else {
+ *   console.log('Value is not a dynamic view reference');
+ * }
+ * ```
+ */
 function isDynamicView(value) {
     return value instanceof DynamicComponentRef || value instanceof DynamicTemplateRef;
 }
@@ -184,11 +325,41 @@ function getDynamicViewDefaultHost() {
     return inject(ODX_DYNAMIC_VIEW_DEFAULT_HOST);
 }
 
+/**
+ * A service for creating and managing dynamic views in an Angular application.
+ * It supports rendering Angular components, templates, and text content dynamically,
+ * allowing for flexible and dynamic content composition.
+ */
 class DynamicViewService {
     constructor() {
         this.injector = inject(Injector);
         this.defaultHost = getDynamicViewDefaultHost();
     }
+    /**
+     * Creates and returns a reference to a dynamic view based on the provided content and options.
+     * The method supports dynamic creation of components, template references, and text content,
+     * providing a unified API for dynamic content rendering.
+     *
+     * @template T - The type of the content to be dynamically rendered.
+     * @param {T} content - The content to be rendered dynamically. This can be a component class,
+     * a template reference, or text content.
+     * @param {Partial<DynamicViewOptions<T>>} [options={}] - Optional configuration for the dynamic view creation,
+     * including a custom injector, context, host element, and additional providers for the dynamic component's injector.
+     * @returns {DynamicViewRef<T>} A reference to the dynamically created view, encapsulating the rendered content
+     * and providing methods for interaction and management.
+     * @throws {Error} Throws an error if the content type is not supported.
+     * @example
+     * ```ts
+     * // Create a dynamic view for a component
+     * const componentRef = dynamicViewService.createView(MyComponent, { context: { ... } });
+     *
+     * // Create a dynamic view for a template reference
+     * const templateRef = dynamicViewService.createView(myTemplate, { context: { ... } });
+     *
+     * // Create a dynamic view for text content
+     * const textRef = dynamicViewService.createView('Dynamic text content', {});
+     * ```
+     */
     createView(content, options = {}) {
         const viewOptions = {
             ...options,
@@ -221,6 +392,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * A directive that dynamically renders content based on the provided input. It supports rendering
+ * Angular components, templates, and text content, allowing for dynamic and flexible content
+ * management within Angular applications.
+ *
+ * @template T - A type parameter that extends `DynamicContent<unknown>`, representing the type of content to be dynamically rendered.
+ */
 class DynamicViewDirective {
     constructor() {
         this.dynamicViewService = inject(DynamicViewService);
@@ -228,6 +406,10 @@ class DynamicViewDirective {
         this.template = inject(TemplateRef);
         this.viewRef = null;
         this.contentViewRef = null;
+        /**
+         * The content to be dynamically rendered. This can be a component, template reference, or text content.
+         * The content is wrapped in a `DynamicViewRef`, providing additional control over the dynamically rendered view.
+         */
         // eslint-disable-next-line @angular-eslint/no-input-rename
         this.content = null;
     }
@@ -249,6 +431,12 @@ class DynamicViewDirective {
     ngOnDestroy() {
         this.destroy();
     }
+    /**
+     * Retrieves the current `DynamicViewRef` associated with the rendered content, providing access
+     * to the view reference for additional operations like updating context or manual destruction.
+     *
+     * @returns {DynamicViewRef<T> | null} The current view reference for the dynamically rendered content, if available.
+     */
     getView() {
         return this.viewRef;
     }