@odx/angular 2.16.1 → 3.1.0

package/fesm2022/odx-angular-cdk-active-indicator.mjs

@@ -0,0 +1,143 @@
+import { __decorate, __metadata } from 'tslib';
+import * as i0 from '@angular/core';
+import { Directive, Input } from '@angular/core';
+import { CSSModifier, CSSComponent } from '@odx/angular/internal';
+import { fromElementResize$ } from '@odx/angular/rxjs';
+import { untilDestroyed, injectElement, hasChanged, isPresent, px, disableCSSTransitions, applyStyles } from '@odx/angular/utils';
+import { BehaviorSubject, distinctUntilChanged, switchMap, EMPTY } from 'rxjs';
+
+const ActiveIndicatorDirection = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical',
+};
+
+const ActiveIndicatorPosition = {
+    START: 'start',
+    CENTER: 'center',
+    END: 'end',
+};
+
+let ActiveIndicatorDirective = class ActiveIndicatorDirective {
+    constructor() {
+        this.takeUntilDestroyed = untilDestroyed();
+        this.parentElement$$ = new BehaviorSubject(null);
+        this.onResize$ = this.parentElement$$.pipe(distinctUntilChanged(), switchMap((parentElement) => {
+            return parentElement ? fromElementResize$(parentElement) : EMPTY;
+        }));
+        this.element = injectElement();
+        this.isActive = false;
+        this.activeElement = null;
+        this.direction = ActiveIndicatorDirection.HORIZONTAL;
+        this.position = ActiveIndicatorPosition.CENTER;
+    }
+    set parent(value) {
+        this.parentElement$$.next(value);
+    }
+    get parent() {
+        return this.parentElement$$.getValue();
+    }
+    ngAfterViewInit() {
+        this.onResize$.pipe(this.takeUntilDestroyed()).subscribe(() => this.updateStyles());
+        this.parent ??= this.element.nativeElement.parentElement;
+    }
+    ngOnChanges(changes) {
+        if (hasChanged(changes, 'activeElement', false)) {
+            this.isActive = !!this.activeElement;
+        }
+        if (hasChanged(changes, ['activeElement', 'direction', 'position'])) {
+            this.updateStyles(!isPresent(changes.activeElement?.previousValue));
+        }
+    }
+    updateStyles(disableTransition = false) {
+        if (!this.activeElement)
+            return;
+        const isHorizontal = this.direction === ActiveIndicatorDirection.HORIZONTAL;
+        const isVertical = this.direction === ActiveIndicatorDirection.VERTICAL;
+        const relativeOffset = this.getIndicatorRelativeOffset();
+        let transform = null;
+        if (isHorizontal) {
+            const positionX = this.getIndicatorPositionX(this.activeElement);
+            transform = `translateX(${px(positionX)}) translateX(${relativeOffset}%)`;
+        }
+        if (isVertical) {
+            const positionY = this.getIndicatorPositionY(this.activeElement);
+            transform = `translateY(${px(positionY)}) translateY(${relativeOffset}%)`;
+        }
+        disableTransition && disableCSSTransitions(this.element.nativeElement, true);
+        applyStyles(this.element.nativeElement, {
+            transform,
+            width: isHorizontal ? px(this.activeElement.offsetWidth) : null,
+            height: isVertical ? px(this.activeElement.offsetHeight) : null,
+        });
+        disableTransition && disableCSSTransitions(this.element.nativeElement, false);
+    }
+    getIndicatorPositionX(activeElement) {
+        switch (this.position) {
+            case ActiveIndicatorPosition.START:
+                return activeElement.offsetLeft;
+            case ActiveIndicatorPosition.CENTER:
+                return activeElement.offsetLeft + activeElement.offsetWidth / 2;
+            case ActiveIndicatorPosition.END:
+                return activeElement.offsetLeft + activeElement.offsetWidth;
+        }
+    }
+    getIndicatorPositionY(activeElement) {
+        switch (this.position) {
+            case ActiveIndicatorPosition.START:
+                return activeElement.offsetTop;
+            case ActiveIndicatorPosition.CENTER:
+                return activeElement.offsetTop + activeElement.offsetHeight / 2;
+            case ActiveIndicatorPosition.END:
+                return activeElement.offsetTop + activeElement.offsetHeight;
+        }
+    }
+    getIndicatorRelativeOffset() {
+        switch (this.position) {
+            case ActiveIndicatorPosition.START:
+                return 0;
+            case ActiveIndicatorPosition.CENTER:
+                return -50;
+            case ActiveIndicatorPosition.END:
+                return -100;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActiveIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ActiveIndicatorDirective, isStandalone: true, selector: "[odxActiveIndicator]", inputs: { activeElement: ["odxActiveIndicator", "activeElement"], parent: ["odxActiveIndicatorParent", "parent"], direction: ["odxActiveIndicatorDirection", "direction"], position: ["odxActiveIndicatorPosition", "position"] }, usesOnChanges: true, ngImport: i0 }); }
+};
+__decorate([
+    CSSModifier(),
+    __metadata("design:type", Object)
+], ActiveIndicatorDirective.prototype, "isActive", void 0);
+__decorate([
+    CSSModifier(),
+    __metadata("design:type", String)
+], ActiveIndicatorDirective.prototype, "direction", void 0);
+ActiveIndicatorDirective = __decorate([
+    CSSComponent('cdk-active-indicator')
+], ActiveIndicatorDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActiveIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[odxActiveIndicator]',
+                }]
+        }], propDecorators: { isActive: [], activeElement: [{
+                type: Input,
+                args: ['odxActiveIndicator']
+            }], parent: [{
+                type: Input,
+                args: ['odxActiveIndicatorParent']
+            }], direction: [{
+                type: Input,
+                args: ['odxActiveIndicatorDirection']
+            }], position: [{
+                type: Input,
+                args: ['odxActiveIndicatorPosition']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActiveIndicatorDirection, ActiveIndicatorDirective, ActiveIndicatorPosition };
+//# sourceMappingURL=odx-angular-cdk-active-indicator.mjs.map

package/fesm2022/odx-angular-cdk-active-indicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"odx-angular-cdk-active-indicator.mjs","sources":["../../../../libs/angular/cdk/active-indicator/src/lib/models/active-indicator-direction.ts","../../../../libs/angular/cdk/active-indicator/src/lib/models/active-indicator-position.ts","../../../../libs/angular/cdk/active-indicator/src/lib/active-indicator.directive.ts","../../../../libs/angular/cdk/active-indicator/src/odx-angular-cdk-active-indicator.ts"],"sourcesContent":["export type ActiveIndicatorDirection = typeof ActiveIndicatorDirection[keyof typeof ActiveIndicatorDirection];\n\nexport const ActiveIndicatorDirection = {\n  HORIZONTAL: 'horizontal',\n  VERTICAL: 'vertical',\n} as const;\n","export type ActiveIndicatorPosition = typeof ActiveIndicatorPosition[keyof typeof ActiveIndicatorPosition];\n\nexport const ActiveIndicatorPosition = {\n  START: 'start',\n  CENTER: 'center',\n  END: 'end',\n} as const;\n","import { AfterViewInit, Directive, Input, OnChanges } from '@angular/core';\nimport { CSSComponent, CSSModifier } from '@odx/angular/internal';\nimport { fromElementResize$ } from '@odx/angular/rxjs';\nimport { applyStyles, disableCSSTransitions, hasChanged, injectElement, isPresent, NgChanges, px, untilDestroyed } from '@odx/angular/utils';\nimport { BehaviorSubject, distinctUntilChanged, EMPTY, switchMap } from 'rxjs';\nimport { ActiveIndicatorPosition } from './models';\nimport { ActiveIndicatorDirection } from './models/active-indicator-direction';\n\n@CSSComponent('cdk-active-indicator')\n@Directive({\n  standalone: true,\n  selector: '[odxActiveIndicator]',\n})\nexport class ActiveIndicatorDirective implements OnChanges, AfterViewInit {\n  private readonly takeUntilDestroyed = untilDestroyed();\n  private readonly parentElement$$ = new BehaviorSubject<HTMLElement | null>(null);\n  private readonly onResize$ = this.parentElement$$.pipe(\n    distinctUntilChanged(),\n    switchMap((parentElement) => {\n      return parentElement ? fromElementResize$(parentElement) : EMPTY;\n    })\n  );\n\n  public readonly element = injectElement();\n\n  @CSSModifier()\n  public isActive = false;\n\n  @Input('odxActiveIndicator')\n  public activeElement?: HTMLElement | null = null;\n\n  @Input('odxActiveIndicatorParent')\n  public set parent(value: HTMLElement | null) {\n    this.parentElement$$.next(value);\n  }\n  public get parent(): HTMLElement | null {\n    return this.parentElement$$.getValue();\n  }\n\n  @CSSModifier()\n  @Input('odxActiveIndicatorDirection')\n  public direction: ActiveIndicatorDirection = ActiveIndicatorDirection.HORIZONTAL;\n\n  @Input('odxActiveIndicatorPosition')\n  public position: ActiveIndicatorPosition = ActiveIndicatorPosition.CENTER;\n\n  public ngAfterViewInit(): void {\n    this.onResize$.pipe(this.takeUntilDestroyed()).subscribe(() => this.updateStyles());\n    this.parent ??= this.element.nativeElement.parentElement;\n  }\n\n  public ngOnChanges(changes: NgChanges<ActiveIndicatorDirective>): void {\n    if (hasChanged(changes, 'activeElement', false)) {\n      this.isActive = !!this.activeElement;\n    }\n    if (hasChanged(changes, ['activeElement', 'direction', 'position'])) {\n      this.updateStyles(!isPresent(changes.activeElement?.previousValue));\n    }\n  }\n\n  private updateStyles(disableTransition = false): void {\n    if (!this.activeElement) return;\n    const isHorizontal = this.direction === ActiveIndicatorDirection.HORIZONTAL;\n    const isVertical = this.direction === ActiveIndicatorDirection.VERTICAL;\n    const relativeOffset = this.getIndicatorRelativeOffset();\n\n    let transform = null;\n    if (isHorizontal) {\n      const positionX = this.getIndicatorPositionX(this.activeElement);\n      transform = `translateX(${px(positionX)}) translateX(${relativeOffset}%)`;\n    }\n    if (isVertical) {\n      const positionY = this.getIndicatorPositionY(this.activeElement);\n      transform = `translateY(${px(positionY)}) translateY(${relativeOffset}%)`;\n    }\n\n    disableTransition && disableCSSTransitions(this.element.nativeElement, true);\n    applyStyles(this.element.nativeElement, {\n      transform,\n      width: isHorizontal ? px(this.activeElement.offsetWidth) : null,\n      height: isVertical ? px(this.activeElement.offsetHeight) : null,\n    });\n    disableTransition && disableCSSTransitions(this.element.nativeElement, false);\n  }\n\n  private getIndicatorPositionX(activeElement: HTMLElement): number {\n    switch (this.position) {\n      case ActiveIndicatorPosition.START:\n        return activeElement.offsetLeft;\n      case ActiveIndicatorPosition.CENTER:\n        return activeElement.offsetLeft + activeElement.offsetWidth / 2;\n      case ActiveIndicatorPosition.END:\n        return activeElement.offsetLeft + activeElement.offsetWidth;\n    }\n  }\n\n  private getIndicatorPositionY(activeElement: HTMLElement): number {\n    switch (this.position) {\n      case ActiveIndicatorPosition.START:\n        return activeElement.offsetTop;\n      case ActiveIndicatorPosition.CENTER:\n        return activeElement.offsetTop + activeElement.offsetHeight / 2;\n      case ActiveIndicatorPosition.END:\n        return activeElement.offsetTop + activeElement.offsetHeight;\n    }\n  }\n\n  private getIndicatorRelativeOffset(): number {\n    switch (this.position) {\n      case ActiveIndicatorPosition.START:\n        return 0;\n      case ActiveIndicatorPosition.CENTER:\n        return -50;\n      case ActiveIndicatorPosition.END:\n        return -100;\n    }\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-autocomplete-control.mjs

@@ -0,0 +1,136 @@
+import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Directive, ViewChild, Input, Output, HostListener, InjectionToken } from '@angular/core';
+import { detectControllerChanges, ODX_STRING_SEARCH_HANDLER, ODX_STRINGIFY } from '@odx/angular';
+import { CustomFormControl } from '@odx/angular/cdk/custom-form-control';
+import { DropdownDirective } from '@odx/angular/components/dropdown';
+import { untilDestroyed, injectElement, isFunction, Pure } from '@odx/angular/utils';
+import { __decorate, __metadata } from 'tslib';
+
+class AutocompleteControl extends CustomFormControl {
+    get hasOptions() {
+        return !!this.options?.length;
+    }
+    get isOpen() {
+        return !!this.dropdown?.isOpen;
+    }
+    constructor() {
+        super(null);
+        this.smoothScrollEnabled = false;
+        this.takeUntilDestroyed = untilDestroyed();
+        this.changeDetector = inject(ChangeDetectorRef);
+        this.element = injectElement();
+        this.isLoading = false;
+        this.optionSelected = new EventEmitter();
+        detectControllerChanges(this).subscribe();
+    }
+    ngAfterViewInit() {
+        if (!this.options)
+            return;
+        this.initKeyManager(this.options);
+        this.handleQueryListOption(this.options);
+        this.handleSearchFieldChanges();
+    }
+    scrollOptionIntoView({ element }) {
+        const behavior = this.smoothScrollEnabled ? 'smooth' : undefined;
+        if (isFunction(element.nativeElement.scrollIntoView)) {
+            element.nativeElement.scrollIntoView({ block: 'center', behavior });
+        }
+    }
+    initKeyManager(options) {
+        this.keyManager = new ActiveDescendantKeyManager(options).withHomeAndEnd();
+    }
+    disableSmoothScroll() {
+        this.smoothScrollEnabled = false;
+    }
+    enableSmoothScroll() {
+        this.smoothScrollEnabled = true;
+    }
+    openDropdown() {
+        this.dropdown?.open();
+    }
+    closeDropdown() {
+        this.dropdown?.close();
+    }
+    handleFocusOut(event) {
+        if (this.isOpen) {
+            event.stopImmediatePropagation();
+        }
+        this.onTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutocompleteControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "16.2.12", type: AutocompleteControl, isStandalone: true, inputs: { isLoading: ["isLoading", "isLoading", booleanAttribute], stringify: "stringify" }, outputs: { optionSelected: "optionSelected" }, host: { listeners: { "focusout": "handleFocusOut($event)" }, properties: { "class.is-open": "isOpen", "attr.aria-disabled": "isDisabled || null" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: DropdownDirective, descendants: true }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutocompleteControl, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    host: {
+                        '[class.is-open]': 'isOpen',
+                        '[attr.aria-disabled]': 'isDisabled || null',
+                    },
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { dropdown: [{
+                type: ViewChild,
+                args: [DropdownDirective]
+            }], isLoading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], stringify: [{
+                type: Input
+            }], optionSelected: [{
+                type: Output
+            }], handleFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }] } });
+
+const ODX_SEARCH_FILTER_HOST = new InjectionToken('@odx/angular/cdk/autocomplete-control::SearchFilterHost');
+class BaseSearchFilterPipe {
+    constructor() {
+        this.stringSearchHandler = inject(ODX_STRING_SEARCH_HANDLER);
+        this.defaultStringify = inject(ODX_STRINGIFY);
+        this.hostController = inject(ODX_SEARCH_FILTER_HOST, { optional: true });
+    }
+    get searchField() {
+        return this.hostController?.searchField;
+    }
+    get stringify() {
+        return this.hostController?.stringify ?? this.defaultStringify;
+    }
+    transform(items, optionsOrHandler) {
+        const searchHandler = this.isStringSearchHandler(optionsOrHandler) ? optionsOrHandler : optionsOrHandler?.searchHandler;
+        const stringify = this.isStringSearchHandler(optionsOrHandler) ? null : optionsOrHandler?.stringify;
+        if (this.searchField) {
+            return this.filter(items, this.searchField.nativeElementValue, stringify ?? this.stringify, searchHandler ?? this.stringSearchHandler);
+        }
+        return items;
+    }
+    queryHandler(query) {
+        return query?.trim() || '';
+    }
+    filter(items, query, stringify, searchHandler) {
+        if (!items)
+            return null;
+        query = this.queryHandler(query);
+        if (query === '')
+            return items;
+        return items.filter((item) => searchHandler(stringify(item), query));
+    }
+    isStringSearchHandler(optionsOrHandler) {
+        return isFunction(optionsOrHandler);
+    }
+}
+__decorate([
+    Pure,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object, String, Function, Function]),
+    __metadata("design:returntype", Object)
+], BaseSearchFilterPipe.prototype, "filter", null);
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AutocompleteControl, BaseSearchFilterPipe, ODX_SEARCH_FILTER_HOST };
+//# sourceMappingURL=odx-angular-cdk-autocomplete-control.mjs.map

package/fesm2022/odx-angular-cdk-autocomplete-control.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"odx-angular-cdk-autocomplete-control.mjs","sources":["../../../../libs/angular/cdk/autocomplete-control/src/lib/autocomplete-control.ts","../../../../libs/angular/cdk/autocomplete-control/src/lib/pipes/base-search-filter-pipe.ts","../../../../libs/angular/cdk/autocomplete-control/src/odx-angular-cdk-autocomplete-control.ts"],"sourcesContent":["import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';\nimport {\n  AfterViewInit,\n  booleanAttribute,\n  ChangeDetectorRef,\n  Directive,\n  EventEmitter,\n  HostListener,\n  inject,\n  Input,\n  Output,\n  QueryList,\n  ViewChild,\n} from '@angular/core';\nimport { detectControllerChanges, StringifyFn } from '@odx/angular';\nimport { CustomFormControl, InputControlDirective } from '@odx/angular/cdk/custom-form-control';\nimport { OptionControl } from '@odx/angular/cdk/option-control';\nimport { DropdownDirective } from '@odx/angular/components/dropdown';\nimport { injectElement, isFunction, untilDestroyed } from '@odx/angular/utils';\n\n@Directive({\n  standalone: true,\n  host: {\n    '[class.is-open]': 'isOpen',\n    '[attr.aria-disabled]': 'isDisabled || null',\n  },\n})\nexport abstract class AutocompleteControl<T> extends CustomFormControl<T | null> implements AfterViewInit {\n  protected keyManager?: ActiveDescendantKeyManager<OptionControl<T>>;\n\n  protected smoothScrollEnabled = false;\n\n  @ViewChild(DropdownDirective)\n  protected readonly dropdown?: DropdownDirective;\n\n  protected abstract readonly options?: QueryList<OptionControl<T>>;\n\n  protected readonly takeUntilDestroyed = untilDestroyed();\n\n  protected readonly changeDetector = inject(ChangeDetectorRef);\n\n  public abstract searchField?: InputControlDirective;\n\n  public readonly element = injectElement();\n\n  public get hasOptions(): boolean {\n    return !!this.options?.length;\n  }\n\n  public get isOpen(): boolean {\n    return !!this.dropdown?.isOpen;\n  }\n\n  @Input({ transform: booleanAttribute })\n  public isLoading = false;\n\n  @Input()\n  public stringify?: StringifyFn<T>;\n\n  @Output()\n  public optionSelected = new EventEmitter<T>();\n\n  constructor() {\n    super(null);\n    detectControllerChanges(this).subscribe();\n  }\n\n  public ngAfterViewInit(): void {\n    if (!this.options) return;\n\n    this.initKeyManager(this.options);\n    this.handleQueryListOption(this.options);\n    this.handleSearchFieldChanges();\n  }\n\n  public scrollOptionIntoView({ element }: OptionControl<T>): void {\n    const behavior = this.smoothScrollEnabled ? 'smooth' : undefined;\n    if (isFunction(element.nativeElement.scrollIntoView)) {\n      element.nativeElement.scrollIntoView({ block: 'center', behavior });\n    }\n  }\n\n  protected abstract handleQueryListOption(options: QueryList<OptionControl<T>>): void;\n\n  protected abstract handleSearchFieldChanges(): void;\n\n  protected abstract activateSelectedOption(): void;\n\n  protected initKeyManager(options: QueryList<OptionControl<T>>): void {\n    this.keyManager = new ActiveDescendantKeyManager(options).withHomeAndEnd();\n  }\n\n  protected disableSmoothScroll(): void {\n    this.smoothScrollEnabled = false;\n  }\n\n  protected enableSmoothScroll(): void {\n    this.smoothScrollEnabled = true;\n  }\n\n  protected openDropdown(): void {\n    this.dropdown?.open();\n  }\n\n  protected closeDropdown(): void {\n    this.dropdown?.close();\n  }\n\n  @HostListener('focusout', ['$event'])\n  protected handleFocusOut(event: FocusEvent): void {\n    if (this.isOpen) {\n      event.stopImmediatePropagation();\n    }\n    this.onTouched();\n  }\n}\n","import { inject, InjectionToken, PipeTransform } from '@angular/core';\nimport { ODX_STRINGIFY, ODX_STRING_SEARCH_HANDLER, StringifyFn, StringSearchHandler } from '@odx/angular';\nimport { InputControlDirective } from '@odx/angular/cdk/custom-form-control';\nimport { isFunction, Pure } from '@odx/angular/utils';\n\ninterface HostController {\n  searchField?: InputControlDirective;\n  stringify?: StringifyFn<unknown>;\n}\n\ninterface SearchFilterPipeOptions<T> {\n  searchHandler?: StringSearchHandler;\n  stringify?: StringifyFn<T>;\n}\n\nexport const ODX_SEARCH_FILTER_HOST = new InjectionToken<HostController>('@odx/angular/cdk/autocomplete-control::SearchFilterHost');\n\nexport abstract class BaseSearchFilterPipe implements PipeTransform {\n  private readonly stringSearchHandler = inject(ODX_STRING_SEARCH_HANDLER);\n  private readonly defaultStringify = inject(ODX_STRINGIFY);\n  protected readonly hostController = inject(ODX_SEARCH_FILTER_HOST, { optional: true });\n\n  protected get searchField(): InputControlDirective | undefined {\n    return this.hostController?.searchField;\n  }\n\n  protected get stringify(): StringifyFn<unknown> {\n    return this.hostController?.stringify ?? this.defaultStringify;\n  }\n\n  public transform<T>(items: T[] | null, optionsOrHandler?: SearchFilterPipeOptions<T> | StringSearchHandler): T[] | null {\n    const searchHandler = this.isStringSearchHandler(optionsOrHandler) ? optionsOrHandler : optionsOrHandler?.searchHandler;\n    const stringify = this.isStringSearchHandler(optionsOrHandler) ? null : optionsOrHandler?.stringify;\n    if (this.searchField) {\n      return this.filter(items, this.searchField.nativeElementValue, stringify ?? (this.stringify as never), searchHandler ?? this.stringSearchHandler);\n    }\n    return items;\n  }\n\n  protected queryHandler(query: string): string {\n    return query?.trim() || '';\n  }\n\n  @Pure\n  private filter<T>(items: T[] | null, query: string, stringify: StringifyFn<T>, searchHandler: StringSearchHandler): T[] | null {\n    if (!items) return null;\n\n    query = this.queryHandler(query);\n\n    if (query === '') return items;\n\n    return items.filter((item) => searchHandler(stringify(item), query));\n  }\n\n  private isStringSearchHandler<T>(optionsOrHandler?: SearchFilterPipeOptions<T> | StringSearchHandler): optionsOrHandler is StringSearchHandler {\n    return isFunction(optionsOrHandler);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AA2BM,MAAgB,mBAAuB,SAAQ,iBAA2B,CAAA;AAkB9E,IAAA,IAAW,UAAU,GAAA;AACnB,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC;KAC/B;AAED,IAAA,IAAW,MAAM,GAAA;AACf,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;KAChC;AAWD,IAAA,WAAA,GAAA;QACE,KAAK,CAAC,IAAI,CAAC,CAAC;QAjCJ,IAAmB,CAAA,mBAAA,GAAG,KAAK,CAAC;QAOnB,IAAkB,CAAA,kBAAA,GAAG,cAAc,EAAE,CAAC;AAEtC,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;QAI9C,IAAO,CAAA,OAAA,GAAG,aAAa,EAAE,CAAC;QAWnC,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;AAMlB,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,YAAY,EAAK,CAAC;AAI5C,QAAA,uBAAuB,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,CAAC;KAC3C;IAEM,eAAe,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;AAE1B,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAClC,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACzC,IAAI,CAAC,wBAAwB,EAAE,CAAC;KACjC;IAEM,oBAAoB,CAAC,EAAE,OAAO,EAAoB,EAAA;AACvD,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,mBAAmB,GAAG,QAAQ,GAAG,SAAS,CAAC;QACjE,IAAI,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE;AACpD,YAAA,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;AACrE,SAAA;KACF;AAQS,IAAA,cAAc,CAAC,OAAoC,EAAA;QAC3D,IAAI,CAAC,UAAU,GAAG,IAAI,0BAA0B,CAAC,OAAO,CAAC,CAAC,cAAc,EAAE,CAAC;KAC5E;IAES,mBAAmB,GAAA;AAC3B,QAAA,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;KAClC;IAES,kBAAkB,GAAA;AAC1B,QAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;KACjC;IAES,YAAY,GAAA;AACpB,QAAA,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC;KACvB;IAES,aAAa,GAAA;AACrB,QAAA,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;KACxB;AAGS,IAAA,cAAc,CAAC,KAAiB,EAAA;QACxC,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,KAAK,CAAC,wBAAwB,EAAE,CAAC;AAClC,SAAA;QACD,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;+GAvFmB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,CAAA,WAAA,EAAA,WAAA,EA0BnB,gBAAgB,CAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,UAAA,EAAA,wBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EArBzB,iBAAiB,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;4FALR,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAPxC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,iBAAiB,EAAE,QAAQ;AAC3B,wBAAA,sBAAsB,EAAE,oBAAoB;AAC7C,qBAAA;AACF,iBAAA,CAAA;0EAOoB,QAAQ,EAAA,CAAA;sBAD1B,SAAS;uBAAC,iBAAiB,CAAA;gBAsBrB,SAAS,EAAA,CAAA;sBADf,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAI/B,SAAS,EAAA,CAAA;sBADf,KAAK;gBAIC,cAAc,EAAA,CAAA;sBADpB,MAAM;gBAkDG,cAAc,EAAA,CAAA;sBADvB,YAAY;uBAAC,UAAU,EAAE,CAAC,QAAQ,CAAC,CAAA;;;MC7FzB,sBAAsB,GAAG,IAAI,cAAc,CAAiB,yDAAyD,EAAE;MAE9G,oBAAoB,CAAA;AAA1C,IAAA,WAAA,GAAA;AACmB,QAAA,IAAA,CAAA,mBAAmB,GAAG,MAAM,CAAC,yBAAyB,CAAC,CAAC;AACxD,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;QACvC,IAAc,CAAA,cAAA,GAAG,MAAM,CAAC,sBAAsB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;KAqCxF;AAnCC,IAAA,IAAc,WAAW,GAAA;AACvB,QAAA,OAAO,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC;KACzC;AAED,IAAA,IAAc,SAAS,GAAA;QACrB,OAAO,IAAI,CAAC,cAAc,EAAE,SAAS,IAAI,IAAI,CAAC,gBAAgB,CAAC;KAChE;IAEM,SAAS,CAAI,KAAiB,EAAE,gBAAmE,EAAA;AACxG,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,GAAG,gBAAgB,GAAG,gBAAgB,EAAE,aAAa,CAAC;AACxH,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,GAAG,IAAI,GAAG,gBAAgB,EAAE,SAAS,CAAC;QACpG,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,kBAAkB,EAAE,SAAS,IAAK,IAAI,CAAC,SAAmB,EAAE,aAAa,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC;AACnJ,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;KACd;AAES,IAAA,YAAY,CAAC,KAAa,EAAA;AAClC,QAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;KAC5B;AAGO,IAAA,MAAM,CAAI,KAAiB,EAAE,KAAa,EAAE,SAAyB,EAAE,aAAkC,EAAA;AAC/G,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,IAAI,CAAC;AAExB,QAAA,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAEjC,IAAI,KAAK,KAAK,EAAE;AAAE,YAAA,OAAO,KAAK,CAAC;AAE/B,QAAA,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;KACtE;AAEO,IAAA,qBAAqB,CAAI,gBAAmE,EAAA;AAClG,QAAA,OAAO,UAAU,CAAC,gBAAgB,CAAC,CAAC;KACrC;AACF,CAAA;AAbS,UAAA,CAAA;IADP,IAAI;;;;AASJ,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,IAAA,CAAA;;ACpDH;;AAEG;;;;"}

package/fesm2022/odx-angular-cdk-checkbox-control.mjs

@@ -0,0 +1,53 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, booleanAttribute, Directive, Input, Output } from '@angular/core';
+import { detectControllerChanges } from '@odx/angular';
+import { CustomFormControl } from '@odx/angular/cdk/custom-form-control';
+import { booleanToAttributeString, injectElement } from '@odx/angular/utils';
+
+class CheckBoxControl extends CustomFormControl {
+    set checked(value) {
+        this.value = value;
+    }
+    get checked() {
+        return this.value;
+    }
+    get ariaChecked() {
+        return booleanToAttributeString(this.checked);
+    }
+    constructor() {
+        super(false);
+        this.element = injectElement();
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        this.controlValue = null;
+        this.checkedChange = new EventEmitter();
+        detectControllerChanges(this).subscribe();
+    }
+    onChanged(event) {
+        event.stopPropagation();
+        super.updateValue(event.target.checked);
+        this.checkedChange.next(this.checked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "16.2.12", type: CheckBoxControl, selector: "[odxCheckBoxControl]", inputs: { checked: ["checked", "checked", booleanAttribute], controlValue: ["value", "controlValue"] }, outputs: { checkedChange: "checkedChange" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxControl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[odxCheckBoxControl]',
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { checked: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], controlValue: [{
+                type: Input,
+                args: ['value']
+            }], checkedChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CheckBoxControl };
+//# sourceMappingURL=odx-angular-cdk-checkbox-control.mjs.map

package/fesm2022/odx-angular-cdk-checkbox-control.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"odx-angular-cdk-checkbox-control.mjs","sources":["../../../../libs/angular/cdk/checkbox-control/src/lib/checkbox-control.directive.ts","../../../../libs/angular/cdk/checkbox-control/src/odx-angular-cdk-checkbox-control.ts"],"sourcesContent":["import { booleanAttribute, Directive, EventEmitter, Input, Output } from '@angular/core';\nimport { detectControllerChanges } from '@odx/angular';\nimport { CustomFormControl } from '@odx/angular/cdk/custom-form-control';\nimport { booleanToAttributeString, injectElement } from '@odx/angular/utils';\n\n@Directive({\n  selector: '[odxCheckBoxControl]',\n})\nexport class CheckBoxControl extends CustomFormControl<boolean> {\n  public readonly element = injectElement();\n\n  @Input({ transform: booleanAttribute })\n  public set checked(value: boolean) {\n    this.value = value;\n  }\n  public get checked(): boolean {\n    return this.value;\n  }\n\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  @Input('value')\n  public controlValue: string | null = null;\n\n  @Output()\n  public checkedChange = new EventEmitter<boolean>();\n\n  public get ariaChecked(): string {\n    return booleanToAttributeString(this.checked);\n  }\n\n  constructor() {\n    super(false);\n    detectControllerChanges(this).subscribe();\n  }\n\n  public onChanged(event: Event): void {\n    event.stopPropagation();\n    super.updateValue((event.target as HTMLInputElement).checked);\n    this.checkedChange.next(this.checked);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAQM,MAAO,eAAgB,SAAQ,iBAA0B,CAAA;IAG7D,IACW,OAAO,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;KACpB;AACD,IAAA,IAAW,OAAO,GAAA;QAChB,OAAO,IAAI,CAAC,KAAK,CAAC;KACnB;AASD,IAAA,IAAW,WAAW,GAAA;AACpB,QAAA,OAAO,wBAAwB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC/C;AAED,IAAA,WAAA,GAAA;QACE,KAAK,CAAC,KAAK,CAAC,CAAC;QAtBC,IAAO,CAAA,OAAA,GAAG,aAAa,EAAE,CAAC;;QAYnC,IAAY,CAAA,YAAA,GAAkB,IAAI,CAAC;AAGnC,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAW,CAAC;AAQjD,QAAA,uBAAuB,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,CAAC;KAC3C;AAEM,IAAA,SAAS,CAAC,KAAY,EAAA;QAC3B,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,WAAW,CAAE,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC,CAAC;QAC9D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACvC;+GA/BU,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,8EAGN,gBAAgB,CAAA,EAAA,YAAA,EAAA,CAAA,OAAA,EAAA,cAAA,CAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;4FAHzB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAH3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sBAAsB;AACjC,iBAAA,CAAA;0EAKY,OAAO,EAAA,CAAA;sBADjB,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAU/B,YAAY,EAAA,CAAA;sBADlB,KAAK;uBAAC,OAAO,CAAA;gBAIP,aAAa,EAAA,CAAA;sBADnB,MAAM;;;ACvBT;;AAEG;;;;"}

package/fesm2022/odx-angular-cdk-connected-overlay.mjs

@@ -0,0 +1,222 @@
+import { __decorate } from 'tslib';
+import { trigger, transition, group, useAnimation } from '@angular/animations';
+import * as i0 from '@angular/core';
+import { inject, Renderer2, NgZone, Injector, RendererStyleFlags2, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, Output, Injectable } from '@angular/core';
+import { arrow, flip, computePosition, offset, shift, size, hide, autoUpdate } from '@floating-ui/dom';
+import { CoreModule } from '@odx/angular';
+import { waitForChildAnimations, slideInUp, fadeIn, slideOutUp, fadeOut, slideInLeft, slideOutRight, slideOutDown, slideInRight, slideOutLeft } from '@odx/angular/animations';
+import { DynamicViewDirective, DynamicViewService } from '@odx/angular/cdk/dynamic-view';
+import { CSSComponent, deepmerge } from '@odx/angular/internal';
+import { applyStyles, px, cssTranslate, getSide, getOppositeSide, Position, injectElement, hasChanged, isPresent } from '@odx/angular/utils';
+import { EMPTY, Subject } from 'rxjs';
+
+async function computeOverlayPosition(referenceElement, overlayElement, contentElement, arrowElement, options) {
+    const { position, offset: offset$1, outerPadding, matchReferenceWidth, enableFallback, fallbackAxisSideDirection, strategy, minHeight } = options;
+    const arrowSize = options.showArrow ? arrowElement.offsetWidth : 0;
+    const arrowMiddleware = options.showArrow ? [arrow({ element: arrowElement, padding: 8 })] : [];
+    const flipMiddleWare = enableFallback ? [flip({ fallbackAxisSideDirection })] : [];
+    return computePosition(referenceElement, overlayElement, {
+        strategy,
+        placement: position,
+        middleware: [
+            offset(Math.max(offset$1, arrowSize + offset$1)),
+            shift({ padding: outerPadding }),
+            ...flipMiddleWare,
+            size({
+                padding: outerPadding,
+                apply: ({ availableHeight, availableWidth, rects }) => {
+                    applyStyles(contentElement, {
+                        maxHeight: px(availableHeight),
+                        maxWidth: px(availableWidth),
+                        minHeight: minHeight ? px(Math.min(availableHeight, minHeight)) : null,
+                        minWidth: matchReferenceWidth ? px(rects.reference.width) : null,
+                    });
+                },
+            }),
+            ...arrowMiddleware,
+            hide(),
+        ],
+    }).then((result) => {
+        applyStyles(overlayElement, {
+            top: '0',
+            left: '0',
+            transform: cssTranslate(px(result.x), px(result.y)),
+        });
+        if (options.hiddenClass) {
+            overlayElement.classList.toggle(options.hiddenClass, !!result.middlewareData.hide?.referenceHidden);
+        }
+        if (options.showArrow) {
+            const overlaySide = getSide(result.placement);
+            const arrowSide = getOppositeSide(result.placement);
+            applyStyles(arrowElement, {
+                display: null,
+                top: px(result.middlewareData.arrow?.y),
+                left: px(result.middlewareData.arrow?.x),
+                [arrowSide]: px(-arrowSize / 2),
+                [overlaySide]: null,
+            });
+        }
+        else {
+            applyStyles(arrowElement, { display: 'none' });
+        }
+        return result;
+    });
+}
+
+const DefaultConnectedOverlayOptions = {
+    hiddenClass: 'is-hidden',
+    enableFallback: false,
+    fallbackAxisSideDirection: 'start',
+    matchReferenceWidth: false,
+    offset: 8,
+    outerPadding: 12,
+    position: Position.BOTTOM,
+    strategy: 'fixed',
+};
+
+class ConnectedOverlayRef {
+    constructor(dynamicViewRef) {
+        this.dynamicViewRef = dynamicViewRef;
+        this.element = this.dynamicViewRef.getElement();
+        this.onClose$ = this.dynamicViewRef.getContext().closed ?? EMPTY;
+    }
+    update(options) {
+        this.dynamicViewRef.update({ options: options });
+    }
+    close() {
+        this.dynamicViewRef.destroy();
+    }
+}
+
+let ConnectedOverlayComponent = class ConnectedOverlayComponent {
+    constructor() {
+        this.renderer = inject(Renderer2);
+        this.zone = inject(NgZone);
+        this.positionUpdater = null;
+        this.injector = inject(Injector);
+        this.element = injectElement();
+        this.options = DefaultConnectedOverlayOptions;
+        this.closed = new Subject();
+    }
+    ngOnChanges(changes) {
+        if (hasChanged(changes, ['options'], false)) {
+            this.overlaySide = getSide(this.options.position);
+        }
+        if (hasChanged(changes, ['referenceElement', 'options'], false)) {
+            this.stopPositionUpdater();
+            this.startPositionUpdater();
+        }
+    }
+    ngOnDestroy() {
+        this.stopPositionUpdater();
+    }
+    onAnimationStart({ fromState, toState }) {
+        if (!fromState)
+            return;
+        if (fromState === 'void') {
+            this.renderer.setStyle(this.element.nativeElement, 'pointer-events', 'none', RendererStyleFlags2.Important);
+            this.options.hooks?.beforeOpen?.();
+        }
+        else if (toState === 'void') {
+            this.options.hooks?.beforeClose?.();
+        }
+    }
+    onAnimationDone({ fromState, toState }) {
+        if (!fromState)
+            return;
+        if (fromState === 'void') {
+            this.options.hooks?.afterOpen?.();
+            this.renderer.removeStyle(this.element.nativeElement, 'pointer-events');
+        }
+        else if (toState === 'void') {
+            this.options.hooks?.afterClose?.();
+        }
+    }
+    startPositionUpdater() {
+        this.positionUpdater = this.zone.runOutsideAngular(() => autoUpdate(this.referenceElement, this.element.nativeElement, () => this.updatePosition(), {
+            elementResize: isPresent(window.ResizeObserver),
+        }));
+    }
+    stopPositionUpdater() {
+        this.positionUpdater?.();
+        this.positionUpdater = null;
+    }
+    async updatePosition() {
+        return computeOverlayPosition(this.referenceElement, this.element.nativeElement, this.contentElement.nativeElement, this.arrowElement.nativeElement, this.options).then(({ placement }) => {
+            this.overlaySide = getSide(placement);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectedOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConnectedOverlayComponent, isStandalone: true, selector: "odx-connected-overlay", inputs: { referenceElement: "referenceElement", options: "options" }, outputs: { closed: "closed" }, host: { properties: { "@hostAnimation": "true" } }, viewQueries: [{ propertyName: "contentElement", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "arrowElement", first: true, predicate: ["arrow"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [@contentAnimation]=\"overlaySide\"\n  (@contentAnimation.start)=\"onAnimationStart($event)\"\n  (@contentAnimation.done)=\"onAnimationDone($event)\"\n  class=\"odx-cdk-connected-overlay__content {{ options.containerClass }}\"\n  #content\n>\n  <ng-template [odxDynamicView]=\"options.content\" [odxDynamicViewContext]=\"options.context\" [odxDynamicViewInjector]=\"injector\"></ng-template>\n  <div class=\"odx-cdk-connected-overlay-arrow\" #arrow></div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: DynamicViewDirective, selector: "ng-template[odxDynamicView]", inputs: ["odxDynamicView", "odxDynamicViewInjector", "odxDynamicViewContext"] }], animations: [
+            trigger('hostAnimation', [waitForChildAnimations]),
+            trigger('contentAnimation', [
+                transition('void => top', group([useAnimation(slideInUp, { params: { from: '-8px' } }), useAnimation(fadeIn())])),
+                transition('top => void', group([useAnimation(slideOutUp, { params: { to: '-8px' } }), useAnimation(fadeOut())])),
+                transition('void => right', group([useAnimation(slideInLeft, { params: { from: '8px' } }), useAnimation(fadeIn())])),
+                transition('right => void', group([useAnimation(slideOutRight, { params: { to: '8px' } }), useAnimation(fadeOut())])),
+                transition('void => bottom', group([useAnimation(slideInUp, { params: { from: '8px' } }), useAnimation(fadeIn())])),
+                transition('bottom => void', group([useAnimation(slideOutDown, { params: { to: '8px' } }), useAnimation(fadeOut())])),
+                transition('void => left', group([useAnimation(slideInRight, { params: { from: '-8px' } }), useAnimation(fadeIn())])),
+                transition('left => void', group([useAnimation(slideOutLeft, { params: { to: '-8px' } }), useAnimation(fadeOut())])),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+};
+ConnectedOverlayComponent = __decorate([
+    CSSComponent('cdk-connected-overlay')
+], ConnectedOverlayComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectedOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'odx-connected-overlay', imports: [CoreModule, DynamicViewDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[@hostAnimation]': 'true',
+                    }, animations: [
+                        trigger('hostAnimation', [waitForChildAnimations]),
+                        trigger('contentAnimation', [
+                            transition('void => top', group([useAnimation(slideInUp, { params: { from: '-8px' } }), useAnimation(fadeIn())])),
+                            transition('top => void', group([useAnimation(slideOutUp, { params: { to: '-8px' } }), useAnimation(fadeOut())])),
+                            transition('void => right', group([useAnimation(slideInLeft, { params: { from: '8px' } }), useAnimation(fadeIn())])),
+                            transition('right => void', group([useAnimation(slideOutRight, { params: { to: '8px' } }), useAnimation(fadeOut())])),
+                            transition('void => bottom', group([useAnimation(slideInUp, { params: { from: '8px' } }), useAnimation(fadeIn())])),
+                            transition('bottom => void', group([useAnimation(slideOutDown, { params: { to: '8px' } }), useAnimation(fadeOut())])),
+                            transition('void => left', group([useAnimation(slideInRight, { params: { from: '-8px' } }), useAnimation(fadeIn())])),
+                            transition('left => void', group([useAnimation(slideOutLeft, { params: { to: '-8px' } }), useAnimation(fadeOut())])),
+                        ]),
+                    ], template: "<div\n  [@contentAnimation]=\"overlaySide\"\n  (@contentAnimation.start)=\"onAnimationStart($event)\"\n  (@contentAnimation.done)=\"onAnimationDone($event)\"\n  class=\"odx-cdk-connected-overlay__content {{ options.containerClass }}\"\n  #content\n>\n  <ng-template [odxDynamicView]=\"options.content\" [odxDynamicViewContext]=\"options.context\" [odxDynamicViewInjector]=\"injector\"></ng-template>\n  <div class=\"odx-cdk-connected-overlay-arrow\" #arrow></div>\n</div>\n" }]
+        }], propDecorators: { contentElement: [{
+                type: ViewChild,
+                args: ['content', { static: true }]
+            }], arrowElement: [{
+                type: ViewChild,
+                args: ['arrow', { static: true }]
+            }], referenceElement: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }] } });
+
+class ConnectedOverlayService {
+    constructor() {
+        this.dynamicViewService = inject(DynamicViewService);
+    }
+    createOverlay(referenceElement, options, renderingOptions) {
+        const dynamicViewRef = this.dynamicViewService.createView(ConnectedOverlayComponent, {
+            ...renderingOptions,
+            context: { options: deepmerge(DefaultConnectedOverlayOptions, options), referenceElement },
+        });
+        return new ConnectedOverlayRef(dynamicViewRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectedOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectedOverlayService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectedOverlayService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ConnectedOverlayComponent, ConnectedOverlayRef, ConnectedOverlayService, DefaultConnectedOverlayOptions };
+//# sourceMappingURL=odx-angular-cdk-connected-overlay.mjs.map