@odx/angular 6.0.0 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @odx/angular
 
+## 6.1.0
+
+### Minor Changes
+
+- 0c16b13: Fixed autocomplete bugs: 1. Bug that caused the need for double [enter] when choosing an option. 2. Bug, where uses typed first letter of query but did not get updated options list.
+- 8993495: Added possibility to display a subtitle for radio button component
+- e1fad79: Now toast can accept dynamic content or a component as a description. This broadens the possibilities for customizing the toasts.
+
+### Patch Changes
+
+- 6db69cf: Tabbar component: update selected index after tab query changes
+- 4a0be88: Internal API marked
+- 4b50b62: Fixed behavior for disabled options in the selection component
+- 6b85430: Disable the possibility to select the options by arrow navigation when multiselect is closed
+
+## 6.0.1
+
+### Patch Changes
+
+- 9252c3d: Initial value with disabled state fixed
+- 65562b6: jsdoc documentation for library
+
 ## 6.0.0
 
 ### Major Changes

package/animations/lib/expand.d.ts

@@ -1,2 +1,46 @@
+/**
+ * Animation for smoothly expanding an element from height 0 to its natural height.
+ * It transitions the element's height, padding, margin, and opacity from a collapsed state to an expanded state,
+ * making the element smoothly grow into view.
+ *
+ * The `expand` animation uses `DEFAULT_ANIMATION_PARAMS` for its default parameters, which can be overridden
+ * when using the animation.
+ *
+ * @example
+ * ```ts
+ * // Example usage in an Angular component
+ * import { expand, collapse } from '@odx/angular/animations';
+ *
+ * @Component({
+ *   selector: 'my-expandable-component',
+ *   templateUrl: './expandable-component.html',
+ *   animations: [
+ *     trigger('expandCollapse', [
+ *       transition('collapsed => expanded', useAnimation(expand)),
+ *       transition('expanded => collapsed', useAnimation(collapse)),
+ *     ])
+ *   ]
+ * })
+ * export class ExpandableComponent {
+ *   state = 'collapsed';
+ *
+ *   toggle(): void {
+ *     this.state = this.state === 'collapsed' ? 'expanded' : 'collapsed';
+ *   }
+ * }
+ * ```
+ *
+ * The animation smoothly transitions various properties (height, padding, margin, and opacity) and is controlled
+ * through parameters defined in `DEFAULT_ANIMATION_PARAMS` or those provided during usage.
+ */
 export declare const expand: import("@angular/animations").AnimationReferenceMetadata;
+/**
+ * Animation for smoothly collapsing an element from its natural height to height 0.
+ * It transitions the element's height, padding, margin, and opacity from an expanded state to a collapsed state,
+ * making the element smoothly shrink out of view.
+ *
+ * The `collapse` animation also uses `DEFAULT_ANIMATION_PARAMS` for its default parameters, which can be overridden
+ * when using the animation. It's designed to be used in conjunction with the `expand` animation for creating
+ * expandable/collapsible elements.
+ */
 export declare const collapse: import("@angular/animations").AnimationReferenceMetadata;

package/animations/lib/fade.d.ts

@@ -1,2 +1,72 @@
+/**
+ * Generates a fadeIn animation with customizable opacity target.
+ * This animation gradually changes the element's opacity from 0 to a specified value, creating a "fade in" visual effect.
+ *
+ * @param {number} to - The final opacity value of the element at the end of the animation. Defaults to 1 (fully opaque).
+ * @returns {AnimationReferenceMetadata} An Angular animation object that can be used with Angular's animation system.
+ *
+ * @example
+ * ```ts
+ * // Example usage in an Angular component with a fadeIn animation
+ * import { fadeIn } from '@odx/angular/animations';
+ * import { trigger, transition, useAnimation } from '@angular/animations';
+ *
+ * @Component({
+ *   selector: 'app-fade-in-example',
+ *   template: `
+ *       <div @fadeInAnimation *ngIf="isVisible">Fade In Content</div>
+ *       <button (click)="showContent()">Show Content</button>`,
+ *   animations: [
+ *     trigger('fadeInAnimation', [
+ *       transition(':enter', useAnimation(fadeIn(), { params: { duration: '500ms' } }))
+ *     ])
+ *   ]
+ * })
+ * export class FadeInExampleComponent {
+ *   isVisible = false;
+ *
+ *   showContent(): void {
+ *     this.isVisible = true;
+ *   }
+ * }
+ * ```
+ *
+ * This example demonstrates how to apply the fadeIn animation to an element, making it smoothly appear on the screen.
+ */
 export declare const fadeIn: (to?: number) => import("@angular/animations").AnimationReferenceMetadata;
+/**
+ * Generates a fadeOut animation with customizable opacity target.
+ * This animation gradually changes the element's opacity from its current value to a specified value, creating a "fade out" visual effect.
+ *
+ * @param {number} to - The target opacity value of the element at the end of the animation. Defaults to 0 (fully transparent).
+ * @returns {AnimationReferenceMetadata} An Angular animation object that can be used with Angular's animation system.
+ *
+ * @example
+ * ```ts
+ * // Example usage in an Angular component with a fadeOut animation
+ * import { fadeOut } from '@odx/angular/animations';
+ * import { trigger, transition, useAnimation } from '@angular/animations';
+ *
+ * @Component({
+ *   selector: 'app-fade-out-example',
+ *   template: `
+ *      <div @fadeOutAnimation *ngIf="isVisible">Fade Out Content</div>
+ *      <button (click)="hideContent()">Hide Content</button>`,
+ *   animations: [
+ *     trigger('fadeOutAnimation', [
+ *       transition(':leave', useAnimation(fadeOut(), { params: { duration: '500ms' } }))
+ *     ])
+ *   ]
+ * })
+ * export class FadeOutExampleComponent {
+ *   isVisible = true;
+ *
+ *   hideContent(): void {
+ *     this.isVisible = false;
+ *   }
+ * }
+ * ```
+ *
+ * This example demonstrates how to apply the fadeOut animation to an element, making it smoothly disappear from the screen.
+ */
 export declare const fadeOut: (to?: number) => import("@angular/animations").AnimationReferenceMetadata;

package/animations/lib/slide.d.ts

@@ -1,4 +1,25 @@
 import { AnimationReferenceMetadata } from '@angular/animations';
+/**
+ * Utility functions for creating slide-in and slide-out animations in specific directions.
+ * These include slideInX, slideInY, slideInDown, slideInUp, slideInLeft, slideInRight,
+ * slideOutX, slideOutY, slideOutDown, slideOutUp, slideOutLeft, and slideOutRight.
+ * Each function is configured for a specific slide direction and distance, making it easy to apply
+ * consistent slide animations across your application.
+ *
+ * @example
+ * ```ts
+ * // Using slideInLeft and slideOutRight in a component
+ * animations: [
+ *   trigger('slideInOut', [
+ *     transition(':enter', [useAnimation(slideInLeft)]),
+ *     transition(':leave', [useAnimation(slideOutRight)])
+ *   ])
+ * ]
+ * ```
+ *
+ * Note: The 'from' and 'to' parameters for slideIn and slideOut functions respectively
+ * can be customized for different slide distances.
+ */
 export declare const slideInX: (from: string) => AnimationReferenceMetadata;
 export declare const slideInY: (from: string) => AnimationReferenceMetadata;
 export declare const slideInDown: AnimationReferenceMetadata;

package/animations/lib/wait-for-child-animations.d.ts

@@ -1 +1,39 @@
+/**
+ * Utility animation that waits for animations on child components to complete.
+ * This animation should be used within parent components that have child components with their
+ * own animations. It ensures that the parent's enter and leave animations are only triggered
+ * after all child animations have completed, creating a seamless animation sequence.
+ *
+ * This utility uses Angular's animation functions `query` and `animateChild` to find and animate
+ * child elements marked with Angular's animation triggers. The `{ optional: true }` parameter
+ * ensures that the animation gracefully handles cases where no child animations are defined.
+ *
+ * @example
+ * ```ts
+ * // Using waitForChildAnimations in a parent component with children that have animations
+ * import { trigger, transition, style, animate, query, animateChild } from '@angular/animations';
+ * import { waitForChildAnimations } from '@odx/angular/animations';
+ *
+ * @Component({
+ *   selector: 'app-parent',
+ *   templateUrl: './parent.component.html',
+ *   animations: [
+ *     trigger('parentAnimation', [
+ *       // Define parent animations here
+ *       transition(':enter', [style({ opacity: 0 }), animate('0.5s ease-in', style({ opacity: 1 }))]),
+ *       transition(':leave', [animate('0.5s ease-out', style({ opacity: 0 }))]),
+ *       // Use waitForChildAnimations for coordinating with child animations
+ *       waitForChildAnimations
+ *     ])
+ *   ]
+ * })
+ * export class ParentComponent {
+ *   // Component logic here
+ * }
+ * ```
+ *
+ * Note: The `waitForChildAnimations` utility is added to the parent component's animation triggers,
+ * ensuring that any child component animations are completed before continuing with the parent's
+ * own animations.
+ */
 export declare const waitForChildAnimations: import("@angular/animations").AnimationTransitionMetadata;

package/breakpoints/lib/breakpoints.config.d.ts

@@ -1,3 +1,18 @@
+/**
+ * Defines default responsive breakpoints for the application. These breakpoints are used to
+ * apply responsive styles and behaviors across various device sizes. Each breakpoint is
+ * configured with a name, a minimum width, and a maximum width, defining the range of device
+ * sizes it targets.
+ *
+ * @constant
+ * @type {Record<string, string>}
+ *
+ * @example
+ * ```ts
+ * // Accessing a breakpoint value
+ * console.log(DEFAULT_BREAKPOINTS['=phone']); // Outputs: "(min-width: 480px) and (max-width: 767px)"
+ * ```
+ */
 export declare const DEFAULT_BREAKPOINTS: {
     readonly "<desktop": string;
     readonly "=desktop": string;
@@ -18,4 +33,27 @@ export declare const DEFAULT_BREAKPOINTS: {
 export interface BreakpointsConfig {
     breakpoints: Partial<OdxAngular.Breakpoints>;
 }
+/**
+ * Provides Angular dependency injection tokens for accessing and configuring breakpoints
+ * within the application. This enables a type-safe and modular way to manage responsive
+ * design breakpoints across the app.
+ *
+ * @example
+ * ```ts
+ * // Providing custom breakpoints in an Angular module
+ * import { NgModule } from '@angular/core';
+ * import { provideBreakpointsConfig } from '@odx/angular/breakpoints';
+ *
+ * @NgModule({
+ *   providers: [
+ *     provideBreakpointsConfig({
+ *       breakpoints: {
+ *         ...configureBreakpoint('custom-tablet', 640, 1024),
+ *       },
+ *     }),
+ *   ],
+ * })
+ * export class CustomModule {}
+ * ```
+ */
 export declare const BreakpointsConfig: import("@angular/core").InjectionToken<Partial<BreakpointsConfig>>, BreakpointsDefaultConfig: BreakpointsConfig, injectBreakpointsConfig: () => BreakpointsConfig, provideBreakpointsConfig: <D extends import("@odx/angular/utils").ConfigDependencies<unknown> = import("@odx/angular/utils").ConfigDependencies<Partial<BreakpointsConfig>>>(config: import("@odx/angular/utils").ConfigProvider<Partial<BreakpointsConfig>, D>) => import("@angular/core").FactoryProvider | import("@angular/core").ValueProvider;

package/breakpoints/lib/breakpoints.service.d.ts

@@ -1,10 +1,53 @@
 import { Observable } from 'rxjs';
 import { BreakpointName } from './models';
 import * as i0 from "@angular/core";
+/**
+ * Service to observe and react to changes in viewport size based on predefined breakpoints.
+ * Utilizes Angular CDK's BreakpointObserver for listening to media query changes and integrates
+ * it with the application's custom breakpoints configuration.
+ *
+ * @Injectable({ providedIn: 'root' })
+ */
 export declare class BreakpointsService {
     private readonly breakpointObserver;
     private readonly config;
+    /**
+     * Observes the specified breakpoints and returns an Observable that emits true if any
+     * of the specified breakpoints match the current viewport size, and false otherwise.
+     *
+     * @param {BreakpointName[]} breakpoints - An array of breakpoints to observe.
+     * @returns {Observable<boolean>} - An Observable that emits true if the viewport matches the specified breakpoints.
+     *
+     * @example
+     * ```ts
+     * // Component that uses BreakpointsService to apply dynamic styles based on breakpoints
+     * @Component({
+     *   selector: 'app-responsive-component',
+     *   templateUrl: './responsive-component.component.html',
+     * })
+     * export class ResponsiveComponent {
+     *   isMobile$: Observable<boolean>;
+     *
+     *   constructor(private breakpointsService: BreakpointsService) {
+     *     this.isMobile$ = this.breakpointsService.observe(['phone', 'tablet']);
+     *   }
+     * }
+     * ```
+     */
     observe(breakpoints: BreakpointName[]): Observable<boolean>;
+    /**
+     * Checks if any of the specified breakpoints match the current viewport size.
+     *
+     * @param {BreakpointName[]} breakpoints - An array of breakpoints to check.
+     * @returns {boolean} - Returns true if the viewport matches the specified breakpoints, false otherwise.
+     *
+     * @example
+     * ```ts
+     * // Checking if the current viewport matches the 'desktop' breakpoint
+     * const isDesktop = this.breakpointsService.matches(['desktop']);
+     * console.log(`Is desktop view? ${isDesktop}`);
+     * ```
+     */
     matches(breakpoints: BreakpointName[]): boolean;
     private getMediaQueries;
     private createBreakpointObserver;

package/breakpoints/lib/directives/match-breakpoints.directive.d.ts

@@ -1,13 +1,49 @@
 import { OnInit, TemplateRef } from '@angular/core';
 import { BreakpointName } from '../models';
 import * as i0 from "@angular/core";
+/**
+ * A structural directive that conditionally includes an Angular template based on whether the viewport matches
+ * specified breakpoints. It leverages the BreakpointsService to observe changes in viewport size and apply
+ * the appropriate template.
+ *
+ * @Directive
+ * @param {BreakpointsService} breakpointsService - Injects BreakpointsService to observe breakpoint changes.
+ * @param {TemplateRef} template - Injects the Angular template to render when breakpoints match.
+ * @param {ViewContainerRef} viewContainer - Injects the container where the template will be rendered.
+ *
+ * @example
+ * ```html
+ * // Usage in a component template to conditionally display content based on breakpoints
+ * // Assume 'mobile' and 'tablet' are defined breakpoints
+ * <ng-template [odxMatchBreakpoints]="['mobile', 'tablet']">
+ *   Content to display on mobile and tablet sizes.
+ * </ng-template>
+ * <ng-template [odxMatchBreakpoints]="['desktop']" [odxMatchBreakpointsElse]="elseTemplate">
+ *   Content to display on desktop size.
+ * </ng-template>
+ * <ng-template #elseTemplate>
+ *   Content to display when not on desktop size.
+ * </ng-template>
+ * ```
+ */
 export declare class MatchBreakpointsDirective implements OnInit {
     private readonly breakpoints$$;
     private readonly breakpointsService;
     private readonly takeUntilDestroyed;
     private readonly template;
     private readonly viewContainer;
+    /**
+     * Sets the breakpoints to observe. The directive's content is displayed if the current viewport matches
+     * any of the specified breakpoints.
+     *
+     * @param {BreakpointName | BreakpointName[]} value - The breakpoint(s) to match against the current viewport size.
+     */
     set breakpoints(value: BreakpointName | BreakpointName[] | null | undefined);
+    /**
+     * Optionally specifies a template to render when the viewport does not match the specified breakpoints.
+     *
+     * @param {TemplateRef<unknown>} elseTemplate - The template to render when the viewport does not match the breakpoints.
+     */
     elseTemplate?: TemplateRef<unknown> | null;
     ngOnInit(): void;
     private render;

package/breakpoints/lib/helpers/configure-breakpoint.d.ts

@@ -1,4 +1,23 @@
 type BreakpointOperators = '<' | '=' | '>';
 type BreakpointConfig<T extends string> = Record<`${BreakpointOperators}${T}`, string>;
+/**
+ * Generates a configuration object containing CSS media query strings for a named breakpoint.
+ * The function creates media queries for three scenarios: below (`<`), exactly (`=`), and above (`>`) the specified breakpoint.
+ *
+ * @template T - The string literal type representing the name of the breakpoint.
+ * @param {T} name - The name of the breakpoint (e.g., 'md' for medium).
+ * @param {number} min - The minimum width (inclusive) where the breakpoint starts.
+ * @param {number} max - The maximum width (exclusive) where the breakpoint ends.
+ * @returns {BreakpointConfig<T>} An object containing media query strings for targeting screen sizes relative to the breakpoint.
+ *
+ * @example
+ * ```ts
+ * // Define a medium (md) breakpoint
+ * const mdBreakpoint = configureBreakpoint('md', 768, 1024);
+ * console.log(mdBreakpoint['<md']); // Outputs: "(max-width: 767px)"
+ * console.log(mdBreakpoint['=md']); // Outputs: "(min-width: 768px) and (max-width: 1023px)"
+ * console.log(mdBreakpoint['>md']); // Outputs: "(min-width: 768px)"
+ * ```
+ */
 export declare function configureBreakpoint<T extends string>(name: T, min: number, max: number): BreakpointConfig<T>;
 export {};

package/cdk/a11y/lib/directives/interactive.directive.d.ts

@@ -1,9 +1,41 @@
 import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@odx/angular";
+/**
+ * Directive that makes an element interactive, responding to click, Enter key, and Space key events.
+ * It automatically handles the disabled state through `DisabledController`, inhibiting interactions when disabled.
+ * This directive can be useful for creating custom buttons or interactive elements that are not natively interactive,
+ * such as divs or custom components.
+ *
+ * @Directive
+ * @CSSComponent cdk-interactive - A CSS Component class that can be targeted for styling interactive elements.
+ * @selector '[odxCdkInteractive]' - Applies this directive to any element with the 'odxCdkInteractive' attribute.
+ * @hostDirectives {WithDisabledState, WithTabIndex} - Applies disabled state and tab index handling.
+ * @host role='button' - Assigns a role of 'button' to the host element for accessibility.
+ *
+ * @example
+ * Applying the directive to a div element to make it interactive:
+ * ```html
+ * <div odxCdkInteractive (odxCdkInteractive)="onInteract($event)">
+ *   Click or press Enter/Space to interact
+ * </div>
+ * ```
+ *
+ * @example
+ * Using the directive on a custom Angular component
+ * ```html
+ * <app-custom-button odxCdkInteractive (odxCdkInteractive)="onCustomButtonInteract($event)">
+ * </app-custom-button>
+ * ```
+ */
 export declare class InteractiveDirective {
     private readonly disabledController;
     readonly element: import("@angular/core").ElementRef<HTMLElement>;
+    /**
+     * Emits an event when the element is interacted with via click, Enter key, or Space key.
+     *
+     * @emits {MouseEvent | KeyboardEvent} - The event that triggered the interaction.
+     */
     interact: EventEmitter<MouseEvent | KeyboardEvent>;
     protected handleEvents(event: MouseEvent | KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<InteractiveDirective, never>;

package/cdk/a11y/lib/directives/list-focus-manager-option.directive.d.ts

@@ -1,9 +1,31 @@
 import { FocusableOption } from '@angular/cdk/a11y';
 import * as i0 from "@angular/core";
+/**
+ * Directive to make an element focusable as part of a list, integrating with Angular CDK's FocusKeyManager.
+ * It listens to the disabled state controlled by `DisabledController` to manage focus correctly based on
+ * the enabled state of the element.
+ *
+ * @example
+ * In a component template, apply this directive to list items that should be focusable and managed by a FocusKeyManager:
+ * ```html
+ * <li odxListFocusManagerOption *ngFor="let item of items">
+ *   {{ item }}
+ * </li>
+ * ```
+ */
 export declare class ListFocusManagerOptionDirective implements FocusableOption {
     private readonly disabledController;
     private readonly element;
+    /**
+     * Reflects the disabled state of the element, managed by `DisabledController`.
+     * If disabled, the element is not focusable.
+     *
+     * @returns {boolean} True if the directive's host element is disabled.
+     */
     get disabled(): boolean;
+    /**
+     * Focuses the host element. If the element is disabled, it will not be focused.
+     */
     focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ListFocusManagerOptionDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ListFocusManagerOptionDirective, "[odxListFocusManagerOption]", never, {}, {}, never, never, true, never>;

package/cdk/a11y/lib/directives/list-focus-manager.directive.d.ts

@@ -1,6 +1,23 @@
 import { AfterContentInit, OnDestroy, QueryList } from '@angular/core';
 import { ListFocusManagerOptionDirective } from './list-focus-manager-option.directive';
 import * as i0 from "@angular/core";
+/**
+ * Directive that sets up keyboard navigation for a list or a group of focusable elements.
+ * Utilizes `FocusKeyManager` from Angular CDK to manage focus among items.
+ * It automatically skips disabled items and wraps around when navigating past the first or last item.
+ * Handles keydown events to navigate through the focusable options.
+ *
+ * @example
+ * In a component template, use this directive on a container element and `odxListFocusManagerOption`
+ * on each focusable list item:
+ * ```html
+ * <ul odxListFocusManager>
+ *   <li odxListFocusManagerOption *ngFor="let item of items">
+ *     {{ item }}
+ *   </li>
+ * </ul>
+ * ```
+ */
 export declare class ListFocusManagerDirective implements AfterContentInit, OnDestroy {
     private keyManager;
     protected options: QueryList<ListFocusManagerOptionDirective>;

package/cdk/active-indicator/lib/active-indicator.directive.d.ts

@@ -3,16 +3,79 @@ import { NgChanges } from '@odx/angular/utils';
 import { ActiveIndicatorPosition } from './models';
 import { ActiveIndicatorDirection } from './models/active-indicator-direction';
 import * as i0 from "@angular/core";
+/**
+ * `ActiveIndicatorDirective` is designed to adjust an indicator's position and size dynamically to highlight
+ * the active element within a container. It's useful for tabs, menus, or any list where an active state is visually represented.
+ * The directive can be customized to align the indicator based on the active element's position and supports
+ * both horizontal and vertical orientations.
+ *
+ * To use this directive, apply it to the element you want to use as an active indicator.
+ * Then, bind the active element using the `odxActiveIndicator` input. Optionally, specify
+ * the container element with `odxActiveIndicatorParent` if the container is not the immediate parent of the indicator.
+ *
+ * @example
+ * ```html
+ * <div class="tabs-container" #tabsContainer>
+ *   <div class="tab" *ngFor="let tab of tabs" [class.active]="tab.isActive" #tabElement>{{ tab.label }}</div>
+ *   <div class="indicator" [odxActiveIndicator]="activeTabElement" [odxActiveIndicatorParent]="tabsContainer"></div>
+ * </div>
+ * ```
+ *
+ * ```ts
+ * @Component({
+ *   selector: 'app-tabs',
+ *   templateUrl: './tabs.component.html',
+ *   imports: [ActiveIndicatorDirective, NgForOf],
+ * })
+ * export class TabsComponent {
+ *   tabs = [{ label: 'Tab 1', isActive: true }, { label: 'Tab 2', isActive: false }];
+ *   @ViewChildren('tabElement') tabElements?: QueryList<ElementRef>;
+ *   @ViewChild('tabsContainer') tabsContainer!: ElementRef;
+ *
+ *   get activeTabElement(): HTMLElement {
+ *     const activeTab = this.tabElements?.find((tab) => tab.nativeElement.classList.contains('active'));
+ *     return activeTab ? activeTab.nativeElement : null;
+ *   }
+ * }
+ * ```
+ */
 export declare class ActiveIndicatorDirective implements OnChanges, AfterViewInit {
     private readonly takeUntilDestroyed;
     private readonly parentElement$$;
     private readonly onResize$;
     readonly element: import("@angular/core").ElementRef<HTMLElement>;
+    /**
+     * Indicates whether the element is active or not.
+     *
+     * @type {boolean}
+     */
     isActive: boolean;
+    /**
+     * The currently active element to which the indicator should align.
+     * It dynamically updates the indicator's position and size based on this element.
+     *
+     * @type {HTMLElement | null}
+     */
     activeElement?: HTMLElement | null;
+    /**
+     * The parent container element of the active elements.
+     * If not set, the indicator's immediate parent element is used.
+     *
+     * @type {HTMLElement | null}
+     */
     set parent(value: HTMLElement | null);
     get parent(): HTMLElement | null;
+    /**
+     * The direction in which the indicator should move.
+     *
+     * @type {ActiveIndicatorDirection}
+     */
     direction: ActiveIndicatorDirection;
+    /**
+     * The position of the indicator relative to the active element.
+     *
+     * @type {ActiveIndicatorPosition}
+     */
     position: ActiveIndicatorPosition;
     ngAfterViewInit(): void;
     ngOnChanges(changes: NgChanges<ActiveIndicatorDirective>): void;

package/cdk/autocomplete-control/lib/autocomplete-control.d.ts

@@ -6,6 +6,21 @@ import { OptionControl } from '@odx/angular/cdk/option-control';
 import { DropdownDirective } from '@odx/angular/components/dropdown';
 import { FormFieldComponent } from '@odx/angular/components/form-field';
 import * as i0 from "@angular/core";
+/**
+ * `AutocompleteControl` is a base directive to enhance an input field with autocomplete functionality,
+ * providing keyboard navigation and selection for options displayed in a dropdown. It's designed to be extended
+ * for specific implementations.
+ * Extends `CustomFormControl` to provide form control behavior and state management.
+ *
+ * @see {CustomFormControl}
+ *
+ * This directive manages the open/close state of the dropdown, the loading state indication, and the interaction between
+ * the autocomplete input and the dropdown options. It utilizes `ActiveDescendantKeyManager` for keyboard navigation among options.
+ *
+ * Extend this directive to create a fully functional autocomplete control tailored to your data type and UI requirements.
+ *
+ * @template T - The type of the items displayed in the autocomplete dropdown.
+ */
 export declare abstract class AutocompleteControl<T> extends CustomFormControl<T | null> implements AfterViewInit {
     protected abstract readonly options?: QueryList<OptionControl<T>>;
     protected readonly changeDetector: ChangeDetectorRef;
@@ -20,10 +35,48 @@ export declare abstract class AutocompleteControl<T> extends CustomFormControl<T
     get hasOptions(): boolean;
     get isOpen(): boolean;
     isLoading: boolean;
+    /**
+     * A function that converts an item of type T to a string representation.
+     * Used by the AutocompleteControl component to display the selected item.
+     *
+     * @type {StringifyFn<T>}
+     *
+     * @example
+     * ```ts
+     * // Define a stringify function for a custom type Person
+     * const stringifyPerson: StringifyFn<Person> = (person) => `${person.firstName} ${person.lastName}`;
+     *
+     * // Assign the stringify function to the AutocompleteControl
+     * autocompleteControl.stringify = stringifyPerson;
+     * ```
+     */
     stringify?: StringifyFn<T>;
+    /**
+     * Emits the selected option when an option is selected from the dropdown.
+     *
+     * @emits {T} - The selected option.
+     *
+     * @example
+     * ```ts
+     * autocompleteControl.optionSelected.subscribe((selectedOption) => {
+     *   console.log('Selected option:', selectedOption);
+     * });
+     * ```
+     */
     optionSelected: EventEmitter<T>;
     constructor();
     ngAfterViewInit(): void;
+    /**
+     * Scrolls the specified option element into view.
+     * @param {OptionControl<T>} option - The option control containing the element to scroll into view.
+     * @returns {void}
+     *
+     * @example
+     * ```ts
+     * const optionControl: OptionControl<string> = { element: myOptionElement };
+     * scrollOptionIntoView(optionControl);
+     * ```
+     */
     scrollOptionIntoView({ element }: OptionControl<T>): void;
     protected abstract handleQueryListOption(options: QueryList<OptionControl<T>>): void;
     protected abstract handleSearchFieldChanges(): void;

package/cdk/checkbox-control/lib/checkbox-control.directive.d.ts

@@ -1,6 +1,9 @@
 import { EventEmitter } from '@angular/core';
 import { CustomFormControl } from '@odx/angular/cdk/custom-form-control';
 import * as i0 from "@angular/core";
+/**
+ * `CheckBoxControl` is a directive that extends `CustomFormControl` to create a custom checkbox control. It integrates seamlessly with Angular forms and provides additional events and bindings for enhanced functionality.
+ */
 export declare class CheckBoxControl extends CustomFormControl<boolean> {
     readonly element: import("@angular/core").ElementRef<HTMLElement>;
     set checked(value: boolean);