@odx/angular 12.26.1 → 13.0.1

package/cdk/a11y/index.d.ts

@@ -1,2 +1,116 @@
-export * from './lib/a11y.module';
-export * from './lib/directives';
+import * as i0 from '@angular/core';
+import { AfterContentInit, OnDestroy, QueryList, EventEmitter } from '@angular/core';
+import * as i1$1 from '@angular/cdk/a11y';
+import { FocusableOption } from '@angular/cdk/a11y';
+import * as i1 from '@odx/angular';
+
+/**
+ * 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
+ * @for(item of items; track item) {
+ * <li odxListFocusManagerOption>
+ *   {{ item }}
+ * </li>
+ * }
+ * ```
+ */
+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>;
+}
+
+/**
+ * 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>
+ *   @for(item of items; track item) {
+ *   <li odxListFocusManagerOption>
+ *     {{ item }}
+ *   </li>
+ *   }
+ * </ul>
+ * ```
+ */
+declare class ListFocusManagerDirective implements AfterContentInit, OnDestroy {
+    private keyManager;
+    protected options: QueryList<ListFocusManagerOptionDirective>;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ListFocusManagerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ListFocusManagerDirective, "[odxListFocusManager]", never, {}, {}, ["options"], never, true, never>;
+}
+
+/**
+ * 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>
+ * ```
+ */
+declare class InteractiveDirective {
+    private readonly disabledController;
+    readonly element: i0.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>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<InteractiveDirective, "[odxCdkInteractive]", never, {}, { "interact": "odxCdkInteractive"; }, never, never, true, [{ directive: typeof i1.WithDisabledState; inputs: {}; outputs: {}; }, { directive: typeof i1.WithTabIndex; inputs: {}; outputs: {}; }]>;
+}
+
+declare class A11yModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<A11yModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<A11yModule, never, [typeof i1$1.A11yModule, typeof ListFocusManagerDirective, typeof ListFocusManagerOptionDirective, typeof InteractiveDirective], [typeof i1.CoreModule, typeof i1$1.A11yModule, typeof ListFocusManagerDirective, typeof ListFocusManagerOptionDirective, typeof InteractiveDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<A11yModule>;
+}
+
+export { A11yModule, InteractiveDirective, ListFocusManagerDirective, ListFocusManagerOptionDirective };

package/cdk/active-indicator/index.d.ts

@@ -1,2 +1,104 @@
-export * from './lib/active-indicator.directive';
-export * from './lib/models';
+import * as i0 from '@angular/core';
+import { OnChanges, AfterViewInit } from '@angular/core';
+import { NgChanges } from '@odx/angular/utils';
+
+type ActiveIndicatorDirection = typeof ActiveIndicatorDirection[keyof typeof ActiveIndicatorDirection];
+declare const ActiveIndicatorDirection: {
+    readonly HORIZONTAL: "horizontal";
+    readonly VERTICAL: "vertical";
+};
+
+type ActiveIndicatorPosition = typeof ActiveIndicatorPosition[keyof typeof ActiveIndicatorPosition];
+declare const ActiveIndicatorPosition: {
+    readonly START: "start";
+    readonly CENTER: "center";
+    readonly END: "end";
+};
+
+/**
+ * `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>
+ *   @for(tab of tabs; track tab.id) {
+ *   <div class="tab" [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;
+ *   }
+ * }
+ * ```
+ */
+declare class ActiveIndicatorDirective implements OnChanges, AfterViewInit {
+    private readonly takeUntilDestroyed;
+    private readonly parentElement$$;
+    private readonly onResize$;
+    readonly element: i0.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;
+    private updateStyles;
+    private getIndicatorPositionX;
+    private getIndicatorPositionY;
+    private getIndicatorRelativeOffset;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActiveIndicatorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ActiveIndicatorDirective, "[odxActiveIndicator]", never, { "activeElement": { "alias": "odxActiveIndicator"; "required": false; }; "parent": { "alias": "odxActiveIndicatorParent"; "required": false; }; "direction": { "alias": "odxActiveIndicatorDirection"; "required": false; }; "position": { "alias": "odxActiveIndicatorPosition"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+export { ActiveIndicatorDirection, ActiveIndicatorDirective, ActiveIndicatorPosition };

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

@@ -1,3 +1,189 @@
-export * from './lib/autocomplete-control';
-export * from './lib/directives';
-export * from './lib/pipes';
+import * as _angular_core from '@angular/core';
+import { AfterViewInit, QueryList, ChangeDetectorRef, EventEmitter, InjectionToken, PipeTransform } from '@angular/core';
+import * as rxjs from 'rxjs';
+import { ActiveDescendantKeyManager, Highlightable } from '@angular/cdk/a11y';
+import { StringifyFn, StringSearchHandler } from '@odx/angular';
+import { CustomFormControl, InputControlDirective } from '@odx/angular/cdk/custom-form-control';
+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 _angular_platform_browser from '@angular/platform-browser';
+
+/**
+ * `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.
+ */
+declare abstract class AutocompleteControl<T> extends CustomFormControl<T | null> implements AfterViewInit {
+    protected abstract readonly options?: QueryList<OptionControl<T>>;
+    protected readonly changeDetector: ChangeDetectorRef;
+    protected readonly formField: FormFieldComponent | null;
+    protected readonly takeUntilDestroyed: <T_1>() => rxjs.MonoTypeOperatorFunction<T_1>;
+    protected keyManager?: ActiveDescendantKeyManager<Highlightable>;
+    protected smoothScrollEnabled: boolean;
+    protected readonly dropdown?: DropdownDirective;
+    abstract searchField?: InputControlDirective;
+    readonly element: _angular_core.ElementRef<HTMLElement>;
+    get dropdownReferenceElement(): HTMLElement;
+    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>;
+    /**
+     * Event emitted before the dropdown opens.
+     * @emits {void}
+     *
+     * @example
+     * ```html
+     * <odx-select (beforeDropdownOpen)="onBeforeDropdownOpen()">
+     * </odx-select>
+     * ```
+     */
+    beforeDropdownOpen: EventEmitter<void>;
+    /**
+     * Event emitted after the dropdown opened.
+     *
+     * @emits {void}
+     *
+     * @example
+     * ```html
+     * <odx-select (afterDropdownOpen)="onAfterDropdownOpen()">
+     * </odx-select>
+     * ```
+     */
+    afterDropdownOpen: EventEmitter<void>;
+    /**
+     * Event emitted before the dropdown closes.
+     *
+     * @emits {void}
+     *
+     * @example
+     * ```html
+     * <odx-select (beforeDropdownClose)="onBeforeDropdownClose()">
+     * </odx-select>
+     * ```
+     */
+    beforeDropdownClose: EventEmitter<void>;
+    /**
+     * Event emitted after the dropdown closed.
+     *
+     * @emits {void}
+     *
+     * @example
+     * ```html
+     * <odx-select (afterDropdownClose)="onAfterDropdownClose()">
+     * </odx-select>
+     * ```
+     */
+    afterDropdownClose: EventEmitter<void>;
+    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;
+    protected abstract activateSelectedOption(): void;
+    protected initKeyManager(options: Highlightable[]): void;
+    protected disableSmoothScroll(): void;
+    protected enableSmoothScroll(): void;
+    protected openDropdown(): void;
+    protected closeDropdown(): void;
+    protected onDropdownOpen(): void;
+    protected onDropdownOpened(): void;
+    protected onDropdownClose(): void;
+    protected onDropdownClosed(): void;
+    protected handleFocusOut(event: FocusEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AutocompleteControl<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AutocompleteControl<any>, never, never, { "isLoading": { "alias": "isLoading"; "required": false; }; "stringify": { "alias": "stringify"; "required": false; }; }, { "optionSelected": "optionSelected"; "beforeDropdownOpen": "beforeDropdownOpen"; "afterDropdownOpen": "afterDropdownOpen"; "beforeDropdownClose": "beforeDropdownClose"; "afterDropdownClose": "afterDropdownClose"; }, never, never, true, never>;
+    static ngAcceptInputType_isLoading: unknown;
+}
+
+declare class HighlightSearchDirective {
+    private readonly sanitizer;
+    protected highlightedText: _angular_core.Signal<_angular_platform_browser.SafeHtml>;
+    /**
+     * Search string
+     * @required
+     * @type string
+     */
+    odxHighlightSearch: _angular_core.InputSignal<string>;
+    /**
+     * Text to highlight
+     * @required
+     * @type string
+     */
+    text: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HighlightSearchDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HighlightSearchDirective, "odx-highlight", never, { "odxHighlightSearch": { "alias": "odxHighlightSearch"; "required": true; "isSignal": true; }; "text": { "alias": "text"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface HostController {
+    searchField?: InputControlDirective;
+    stringify?: StringifyFn<unknown>;
+}
+interface SearchFilterPipeOptions<T> {
+    searchHandler?: StringSearchHandler;
+    stringify?: StringifyFn<T>;
+}
+declare const ODX_SEARCH_FILTER_HOST: InjectionToken<HostController>;
+declare abstract class BaseSearchFilterPipe implements PipeTransform {
+    private readonly stringSearchHandler;
+    private readonly defaultStringify;
+    protected readonly hostController: HostController | null;
+    protected get searchField(): InputControlDirective | undefined;
+    protected get stringify(): StringifyFn<unknown>;
+    transform<T>(items: T[] | null, optionsOrHandler?: SearchFilterPipeOptions<T> | StringSearchHandler): T[] | null;
+    protected queryHandler(query: string): string;
+    private filter;
+    private isStringSearchHandler;
+}
+
+export { AutocompleteControl, BaseSearchFilterPipe, HighlightSearchDirective, ODX_SEARCH_FILTER_HOST };

package/cdk/checkbox-control/index.d.ts

@@ -1 +1,40 @@
-export * from './lib/checkbox-control.directive';
+import * as i0 from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { CustomFormControl } from '@odx/angular/cdk/custom-form-control';
+
+/**
+ * `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.
+ */
+declare class CheckBoxControl extends CustomFormControl<boolean> {
+    readonly element: i0.ElementRef<HTMLElement>;
+    set checked(value: boolean);
+    get checked(): boolean;
+    /**
+     * The value of the checkbox control.
+     *
+     * @type {string | null}
+     * @default null
+     */
+    controlValue: string | null;
+    /**
+     * A boolean value when the checked state of the checkbox changes.
+     *
+     * @emits {boolean} - The new checked state of the checkbox.
+     */
+    checkedChange: EventEmitter<boolean>;
+    /**
+     * Aria attribute that represents the checked state of the checkbox.
+     *
+     * @type {string}
+     */
+    get ariaChecked(): string;
+    constructor();
+    onChanged(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CheckBoxControl, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CheckBoxControl, "[odxCheckBoxControl]", never, { "checked": { "alias": "checked"; "required": false; }; "controlValue": { "alias": "value"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+    static ngAcceptInputType_checked: unknown;
+}
+
+export { CheckBoxControl };

package/cdk/connected-overlay/index.d.ts

@@ -1,3 +1,165 @@
-export * from './lib/connected-overlay.component';
-export * from './lib/connected-overlay.service';
-export * from './lib/models';
+import * as i0 from '@angular/core';
+import { OnInit, OnChanges, OnDestroy, Injector, ElementRef } from '@angular/core';
+import { Strategy, VirtualElement } from '@floating-ui/dom';
+import { Position, Side, NgChanges } from '@odx/angular/utils';
+import { Observable, Subject } from 'rxjs';
+import { DynamicContent, DynamicViewRef, DynamicViewRenderingOptions } from '@odx/angular/cdk/dynamic-view';
+
+interface ConnectedOverlayOptions {
+    content?: DynamicContent | null;
+    context?: Record<string, unknown>;
+    containerClass?: string | null;
+    hiddenClass: string | null;
+    enableFallback: boolean;
+    fallbackAxisSideDirection: 'start' | 'end';
+    matchReferenceWidth: boolean;
+    minHeight?: number | null;
+    offset: number;
+    outerPadding: number;
+    position: Position;
+    strategy: Strategy;
+    showArrow?: boolean;
+    updateOnAnimationFrame?: boolean;
+    nonInteractive?: boolean;
+    hooks?: {
+        beforeOpen?: () => void;
+        afterOpen?: () => void;
+        beforeClose?: () => void;
+        afterClose?: () => void;
+    };
+}
+declare const DefaultConnectedOverlayOptions: ConnectedOverlayOptions;
+
+/**
+ * A reference to a connected overlay created by the `ConnectedOverlayService`. This class provides methods to interact
+ * with the overlay, such as updating its options or closing it. It encapsulates the `DynamicViewRef` for the overlay's instance,
+ * allowing for direct manipulation of the overlay's state and behavior.
+ *
+ * This example demonstrates how to use a `ConnectedOverlayRef` to update and close a connected overlay in response
+ * to user interactions.
+ *
+ * @example
+ * ```ts
+ * class MyComponent {
+ *   private overlayRef?: ConnectedOverlayRef;
+ *
+ *   constructor(private overlayService: ConnectedOverlayService) {}
+ *
+ *   openOverlay() {
+ *     this.overlayRef = this.overlayService.createOverlay(this.someElementRef.nativeElement, { position: 'bottom' });
+ *   }
+ *
+ *   updateOverlayPosition() {
+ *     if (this.overlayRef) {
+ *       this.overlayRef.update({ position: 'top' });
+ *     }
+ *   }
+ *
+ *   closeOverlay() {
+ *     this.overlayRef?.close();
+ *   }
+ * }
+ * ```
+ *
+ * In this example, `MyComponent` uses the `ConnectedOverlayService` to create an overlay. It stores a reference to
+ * the created overlay in `overlayRef`, allowing it to update the overlay's position or close it when necessary.
+ */
+declare class ConnectedOverlayRef {
+    private readonly dynamicViewRef;
+    readonly element: Element;
+    /**
+     * An Observable that emits when the overlay is closed.
+     *
+     * @emits {void} - Emits when the overlay is closed.
+     *
+     */
+    readonly onClose$: Observable<void>;
+    constructor(dynamicViewRef: DynamicViewRef<typeof ConnectedOverlayComponent>);
+    /**
+     * Updates the connected overlay with new options.
+     *
+     * @param options {Partial<ConnectedOverlayOptions>} - The new options to be applied to the connected overlay.
+     */
+    update(options: Partial<ConnectedOverlayOptions>): void;
+    /**
+     * Closes the connected overlay.
+     *
+     * @returns {void}
+     */
+    close(force?: boolean): Promise<void>;
+}
+
+declare class ConnectedOverlayComponent implements OnInit, OnChanges, OnDestroy {
+    private readonly zone;
+    private positionUpdater;
+    protected readonly injector: Injector;
+    protected overlaySide?: Side;
+    protected contentElement: ElementRef<HTMLElement>;
+    protected arrowElement: ElementRef<HTMLElement>;
+    readonly element: ElementRef<HTMLElement>;
+    referenceElement: VirtualElement;
+    options: ConnectedOverlayOptions;
+    closed: Subject<void>;
+    ngOnInit(): void;
+    ngOnChanges(changes: NgChanges<ConnectedOverlayComponent>): void;
+    ngOnDestroy(): void;
+    private startPositionUpdater;
+    private stopPositionUpdater;
+    private updatePosition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConnectedOverlayComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConnectedOverlayComponent, "odx-connected-overlay[popover=\"manual\"]", never, { "referenceElement": { "alias": "referenceElement"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * Service for creating and managing connected overlays. These overlays are UI elements such as popovers, tooltips,
+ * or dropdown menus that are positioned relative to a reference element in the DOM. This service leverages the `DynamicViewService`
+ * for dynamic component rendering and provides a streamlined API for creating overlays with custom positioning and options.
+ *
+ * Use the `ConnectedOverlayService` to dynamically create an overlay next to a specific element in your Angular application.
+ * This example demonstrates creating a connected overlay next to a button element when the button is clicked.
+ *
+ * @example
+ * ```ts
+ * import { Component, ElementRef, ViewChild } from '@angular/core';
+ * import { ConnectedOverlayService, ConnectedOverlayOptions } from '@odx/angular/cdk/connected-overlay';
+ *
+ * @Component({
+ *   selector: 'app-example',
+ *   template: `<button #triggerElement>Click me</button>`,
+ * })
+ * class AppComponent {
+ *   @ViewChild('triggerElement') triggerElementRef!: ElementRef;
+ *
+ *   constructor(private connectedOverlayService: ConnectedOverlayService) {}
+ *
+ *   showOverlay(): void {
+ *     const options: Partial<ConnectedOverlayOptions> = {
+ *       position: 'bottom-start',
+ *       showArrow: true,
+ *       content: 'Hello, world!',
+ *     };
+ *
+ *     this.connectedOverlayService.createOverlay(this.triggerElementRef.nativeElement, options);
+ *   }
+ * }
+ * ```
+ *
+ * This service simplifies the process of creating dynamic, positionally aware overlays that enhance the interactivity
+ * and visual appeal of Angular applications.
+ */
+declare class ConnectedOverlayService {
+    private readonly dynamicViewService;
+    /**
+     * Creates a connected overlay.
+     * @param referenceElement - The reference element to which the overlay will be connected.
+     * @param options - Optional configuration for the connected overlay.
+     * @param renderingOptions - Optional rendering options for the connected overlay.
+     * @returns {ConnectedOverlayRef} The created Connected Overlay reference instance.
+     */
+    createOverlay(referenceElement: VirtualElement, options?: Partial<ConnectedOverlayOptions>, renderingOptions?: Partial<DynamicViewRenderingOptions>): ConnectedOverlayRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConnectedOverlayService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ConnectedOverlayService>;
+}
+
+export { ConnectedOverlayComponent, ConnectedOverlayRef, ConnectedOverlayService, DefaultConnectedOverlayOptions };
+export type { ConnectedOverlayOptions };