@acorex/cdk 22.0.0-next.9 → 22.0.1-next.0

package/fesm2022/acorex-cdk-carousel.mjs

@@ -6,15 +6,24 @@ class AXCarouselDirective {
     constructor() {
         this.carousel = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "carousel" }] : /* istanbul ignore next */ []));
-        // carouselOptions = input<AXCarouselOptions>();
         this.el = inject(ElementRef);
         this.platformId = inject(PLATFORM_ID);
+        this.initId = 0;
+    }
+    destroy() {
+        const instance = this.carousel();
+        if (!instance)
+            return;
+        this.carousel.set(null);
+        if (instance.destroyed)
+            return;
+        instance.destroy(true, true);
     }
     async init(option) {
         if (!isPlatformBrowser(this.platformId))
             return;
-        if (this.carousel())
-            this.carousel().destroy;
+        const id = ++this.initId;
+        this.destroy();
         const parentElem = this.el.nativeElement;
         const slides = parentElem.querySelectorAll('.ax-carousel-slide');
         parentElem.querySelector('.ax-carousel-wrapper')?.classList.add('swiper-wrapper');
@@ -28,7 +37,12 @@ class AXCarouselDirective {
             item.classList.add('swiper-slide');
         });
         const { A11y, Autoplay, Controller, EffectCoverflow, EffectCube, EffectFade, EffectFlip, EffectCreative, EffectCards, HashNavigation, History, Keyboard, Mousewheel, Navigation, Pagination, Parallax, Scrollbar, Thumbs, Virtual, Zoom, FreeMode, Grid, Manipulation, } = await import('swiper/modules');
-        const res = new (await import('swiper')).Swiper(parentElem, {
+        if (id !== this.initId)
+            return;
+        const SwiperCtor = (await import('swiper')).Swiper;
+        if (id !== this.initId)
+            return;
+        const res = new SwiperCtor(parentElem, {
             ...option,
             modules: [
                 A11y,
@@ -56,6 +70,10 @@ class AXCarouselDirective {
                 Manipulation,
             ],
         });
+        if (id !== this.initId) {
+            res.destroy(true, true);
+            return;
+        }
         this.carousel.set(res);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXCarouselDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }

package/fesm2022/acorex-cdk-carousel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-cdk-carousel.mjs","sources":["../../../../packages/cdk/carousel/src/carousel.directive.ts","../../../../packages/cdk/carousel/src/acorex-cdk-carousel.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport { Directive, ElementRef, inject, PLATFORM_ID, signal } from '@angular/core';\nimport type { Swiper, SwiperOptions } from 'swiper/types';\n\nexport type AXCarousel = Swiper;\nexport type AXCarouselOptions = SwiperOptions;\n\n@Directive({\n  selector: '[axCarousel]',\n  exportAs: 'axCarousel',\n})\nexport class AXCarouselDirective {\n  carousel = signal<AXCarousel>(null);\n  // carouselOptions = input<AXCarouselOptions>();\n  private el = inject(ElementRef);\n  private platformId = inject(PLATFORM_ID);\n\n  async init(option: AXCarouselOptions) {\n    if (!isPlatformBrowser(this.platformId)) return;\n    if (this.carousel()) this.carousel().destroy;\n    const parentElem = this.el.nativeElement as HTMLElement;\n    const slides = parentElem.querySelectorAll('.ax-carousel-slide');\n\n    parentElem.querySelector('.ax-carousel-wrapper')?.classList.add('swiper-wrapper');\n    parentElem.querySelector('.ax-carousel-pagination')?.classList.add('swiper-pagination');\n    parentElem.querySelector('.ax-carousel-scrollbar')?.classList.add('swiper-scrollbar');\n    parentElem.querySelector('.ax-carousel-button-prev')?.classList.add('swiper-button-prev');\n    parentElem.querySelector('.ax-carousel-button-next')?.classList.add('swiper-button-next');\n\n    slides?.forEach((item) => {\n      if (item.classList.contains('swiper-slide')) return;\n      item.classList.add('swiper-slide');\n    });\n\n    const {\n      A11y,\n      Autoplay,\n      Controller,\n      EffectCoverflow,\n      EffectCube,\n      EffectFade,\n      EffectFlip,\n      EffectCreative,\n      EffectCards,\n      HashNavigation,\n      History,\n      Keyboard,\n      Mousewheel,\n      Navigation,\n      Pagination,\n      Parallax,\n      Scrollbar,\n      Thumbs,\n      Virtual,\n      Zoom,\n      FreeMode,\n      Grid,\n      Manipulation,\n    } = await import('swiper/modules');\n\n    const res = new (await import('swiper')).Swiper(parentElem, {\n      ...option,\n      modules: [\n        A11y,\n        Autoplay,\n        Controller,\n        EffectCoverflow,\n        EffectCube,\n        EffectFade,\n        EffectFlip,\n        EffectCreative,\n        EffectCards,\n        HashNavigation,\n        History,\n        Keyboard,\n        Mousewheel,\n        Navigation,\n        Pagination,\n        Parallax,\n        Scrollbar,\n        Thumbs,\n        Virtual,\n        Zoom,\n        FreeMode,\n        Grid,\n        Manipulation,\n      ],\n    });\n\n    this.carousel.set(res);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-cdk-carousel.mjs","sources":["../../../../packages/cdk/carousel/src/carousel.directive.ts","../../../../packages/cdk/carousel/src/acorex-cdk-carousel.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport { Directive, ElementRef, inject, PLATFORM_ID, signal } from '@angular/core';\nimport type { Swiper, SwiperOptions } from 'swiper/types';\n\nexport type AXCarousel = Swiper;\nexport type AXCarouselOptions = SwiperOptions;\n\n@Directive({\n  selector: '[axCarousel]',\n  exportAs: 'axCarousel',\n})\nexport class AXCarouselDirective {\n  carousel = signal<AXCarousel>(null);\n  private el = inject(ElementRef);\n  private platformId = inject(PLATFORM_ID);\n  private initId = 0;\n\n  destroy(): void {\n    const instance = this.carousel();\n    if (!instance) return;\n    this.carousel.set(null);\n    if (instance.destroyed) return;\n    instance.destroy(true, true);\n  }\n\n  async init(option: AXCarouselOptions) {\n    if (!isPlatformBrowser(this.platformId)) return;\n    const id = ++this.initId;\n    this.destroy();\n    const parentElem = this.el.nativeElement as HTMLElement;\n    const slides = parentElem.querySelectorAll('.ax-carousel-slide');\n\n    parentElem.querySelector('.ax-carousel-wrapper')?.classList.add('swiper-wrapper');\n    parentElem.querySelector('.ax-carousel-pagination')?.classList.add('swiper-pagination');\n    parentElem.querySelector('.ax-carousel-scrollbar')?.classList.add('swiper-scrollbar');\n    parentElem.querySelector('.ax-carousel-button-prev')?.classList.add('swiper-button-prev');\n    parentElem.querySelector('.ax-carousel-button-next')?.classList.add('swiper-button-next');\n\n    slides?.forEach((item) => {\n      if (item.classList.contains('swiper-slide')) return;\n      item.classList.add('swiper-slide');\n    });\n\n    const {\n      A11y,\n      Autoplay,\n      Controller,\n      EffectCoverflow,\n      EffectCube,\n      EffectFade,\n      EffectFlip,\n      EffectCreative,\n      EffectCards,\n      HashNavigation,\n      History,\n      Keyboard,\n      Mousewheel,\n      Navigation,\n      Pagination,\n      Parallax,\n      Scrollbar,\n      Thumbs,\n      Virtual,\n      Zoom,\n      FreeMode,\n      Grid,\n      Manipulation,\n    } = await import('swiper/modules');\n\n    if (id !== this.initId) return;\n\n    const SwiperCtor = (await import('swiper')).Swiper;\n    if (id !== this.initId) return;\n\n    const res = new SwiperCtor(parentElem, {\n      ...option,\n      modules: [\n        A11y,\n        Autoplay,\n        Controller,\n        EffectCoverflow,\n        EffectCube,\n        EffectFade,\n        EffectFlip,\n        EffectCreative,\n        EffectCards,\n        HashNavigation,\n        History,\n        Keyboard,\n        Mousewheel,\n        Navigation,\n        Pagination,\n        Parallax,\n        Scrollbar,\n        Thumbs,\n        Virtual,\n        Zoom,\n        FreeMode,\n        Grid,\n        Manipulation,\n      ],\n    });\n\n    if (id !== this.initId) {\n      res.destroy(true, true);\n      return;\n    }\n\n    this.carousel.set(res);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-cdk-common.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { model, output, Component, inject, ElementRef, signal, afterNextRender, Injectable, ChangeDetectorRef, ViewContainerRef, EventEmitter, DOCUMENT, PLATFORM_ID, Renderer2, Input, Directive, NgModule, InjectionToken, Output, input, effect } from '@angular/core';
+import { model, output, Component, inject, ElementRef, signal, afterNextRender, Injectable, EventEmitter, PLATFORM_ID, ChangeDetectorRef, ViewContainerRef, DOCUMENT as DOCUMENT$1, Renderer2, Input, Directive, NgModule, InjectionToken, Output, input, effect } from '@angular/core';
 import { AXHtmlUtil } from '@acorex/core/utils';
-import { flatten, cloneDeep, isEqual, omit, get } from 'lodash-es';
 import { isBrowser } from '@acorex/core/platform';
 import { AXValidationService } from '@acorex/core/validation';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { omit, isEqual, flatten, cloneDeep, get } from 'lodash-es';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import { isPlatformBrowser } from '@angular/common';
 import { noop, Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, Subject, fromEvent, skip } from 'rxjs';
 import { DataSource } from '@angular/cdk/collections';
 import { EventManager } from '@angular/platform-browser';
@@ -66,6 +66,13 @@ class NXComponent {
     get nativeElement() {
         return this.#elementRef.nativeElement;
     }
+    /**
+     * Gets the host HTML element of the component.
+     * Same contract as classic editors so `ax-label` / `ax-form-field` can associate the field.
+     */
+    getHostElement() {
+        return this.nativeElement;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NXComponent }); }
 }
@@ -136,25 +143,155 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }], propDecorators: { look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }, { type: i0.Output, args: ["lookChange"] }] } });
 
-class NXValueComponent {
+/**
+ * Signal-based value editor with the same `ax-validation-rule` / `ax-form` contract as the classic value mixins.
+ */
+class NXValueComponent extends NXComponent {
     constructor() {
-        this.readonly = model(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "readonly" }] : /* istanbul ignore next */ []));
-        this.name = model(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
-        this.value = model(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-        this.onValueChanged = output();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NXValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: NXValueComponent, isStandalone: true, selector: "ng-component", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { readonly: "readonlyChange", name: "nameChange", value: "valueChange", onValueChanged: "onValueChanged" }, ngImport: i0, template: '', isInline: true }); }
+        super(...arguments);
+        this.validationRulesChange = new EventEmitter();
+        this.#validationRules = [];
+        this.#state = 'clear';
+        this.#validationService = inject(AXValidationService);
+        this.#document = inject(DOCUMENT);
+        this.#platformId = inject(PLATFORM_ID);
+        this.#registerValidation = afterNextRender(() => {
+            this.registerValidation();
+        });
+    }
+    #validationRules;
+    #state;
+    #validationService;
+    #document;
+    #platformId;
+    #registerValidation;
+    get isRequired() {
+        return this.#validationRules.some((rule) => rule.rule == 'required');
+    }
+    get state() {
+        return this.#state;
+    }
+    registerValidation() {
+        this.nativeElement.querySelectorAll('[ax-form-item="true"]').forEach((node) => {
+            node.removeAttribute('ax-form-item');
+        });
+        this.nativeElement.setAttribute('ax-form-item', 'true');
+    }
+    addValidationRule(rule) {
+        this.#validationRules.push(rule);
+        this.validationRulesChange.emit(this.#validationRules);
+    }
+    removeValidationRule(ruleToRemove) {
+        this.#validationRules = this.#validationRules.filter((rule) => {
+            if (rule.rule !== ruleToRemove.rule) {
+                return true;
+            }
+            const ruleOptions = omit(rule.options, ['title']);
+            const removeOptions = omit(ruleToRemove.options, ['title']);
+            return !isEqual(ruleOptions['pattern'], removeOptions['pattern']);
+        });
+        this.validationRulesChange.emit(this.#validationRules);
+        this.setState('clear');
+    }
+    removeValidationRuleByType(type) {
+        this.#validationRules = this.#validationRules.filter((rule) => rule.rule !== type);
+        this.validationRulesChange.emit(this.#validationRules);
+        this.setState('clear');
+    }
+    async validate() {
+        const containerClasses = ['ax-editor-container', 'ax-checkbox', 'ax-radio'];
+        const container = containerClasses.some((className) => this.nativeElement.classList.contains(className))
+            ? this.nativeElement
+            : this.nativeElement.querySelector('.ax-editor-container');
+        const formField = (container || this.nativeElement).closest('ax-form-field') || container?.closest('ax-checkbox');
+        const label = formField?.querySelector('ax-label') || formField?.querySelector('label');
+        const rules = this.#validationService.ruleFor(this.#currentValue());
+        this.#validationRules.forEach((rule) => {
+            rule.options ??= {};
+            rule.options['title'] = (label?.firstChild?.textContent ?? this.#currentName())?.replace('*', '').trim();
+            rules.addRule(rule.rule, rule.options);
+        });
+        const result = await rules.validate();
+        if (result.result) {
+            this.setState('clear');
+        }
+        else {
+            const message = result.rules.find((rule) => !rule.result)?.message;
+            this.setState('error', message);
+        }
+        return result;
+    }
+    setState(state, ...args) {
+        if (!isBrowser()) {
+            return;
+        }
+        const container = this.nativeElement.classList.contains('ax-editor-container')
+            ? this.nativeElement
+            : this.nativeElement.querySelector('.ax-editor-container');
+        const formField = (container || this.nativeElement).closest('ax-form-field');
+        const label = formField?.querySelector('ax-label') || formField?.querySelector('label');
+        let target = container || this.nativeElement.firstElementChild;
+        if (target?.querySelector('.ax-error-container')) {
+            target = target.querySelector('.ax-error-container');
+        }
+        const parent = target?.parentElement;
+        if (!target || !parent) {
+            return;
+        }
+        switch (state) {
+            case 'clear':
+                this.#state = 'clear';
+                parent.querySelector('span.ax-error-message')?.remove();
+                label?.classList.remove('ax-state-error');
+                target.classList.remove('ax-state-error', 'ax-state-success');
+                break;
+            case 'success':
+                this.setState('clear');
+                target.classList.add('ax-state-success');
+                this.#state = 'success';
+                break;
+            case 'error':
+                this.setState('clear');
+                if (isPlatformBrowser(this.#platformId)) {
+                    const message = args[0] ?? '';
+                    if (message) {
+                        const span = this.#document.createElement('span');
+                        span.innerHTML = message;
+                        span.classList.add('ax-error-message');
+                        parent.appendChild(span);
+                    }
+                }
+                label?.classList.add('ax-state-error');
+                target.classList.add('ax-state-error');
+                this.#state = 'error';
+                break;
+        }
+    }
+    resetErrors() {
+        this.setState('clear');
+    }
+    commitValue(value, _isUserInteraction = false) {
+        const model = this.#valueModel();
+        model?.set?.(value);
+    }
+    #currentValue() {
+        return this.#resolve(this.value);
+    }
+    #currentName() {
+        return String(this.#resolve(this.name) ?? '');
+    }
+    #valueModel() {
+        return this.value;
+    }
+    #resolve(prop) {
+        return typeof prop === 'function' ? prop() : prop;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NXValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NXValueComponent }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NXValueComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: '',
-                }]
-        }], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }, { type: i0.Output, args: ["readonlyChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }, { type: i0.Output, args: ["nameChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onValueChanged: [{ type: i0.Output, args: ["onValueChanged"] }] } });
+            type: Injectable
+        }] });
 
 const defaultOffset = 3;
 function convertToPlacement(value) {
@@ -575,7 +712,7 @@ class MXValueComponent extends MXInteractiveComponent {
         this._isUserInteraction = false;
         this.stateChange = new EventEmitter();
         this._state = 'clear';
-        this.document = inject(DOCUMENT);
+        this.document = inject(DOCUMENT$1);
         this.platformID = inject(PLATFORM_ID);
         this.validationService = inject(AXValidationService);
         this.validationRulesChange = new EventEmitter();
@@ -1263,7 +1400,7 @@ class AXAutoFocusDirective {
         this._host = inject(AXFocusableComponent, { host: true, self: true, optional: true });
         this.autoFocus = true;
         this.time = 50;
-        this.document = inject(DOCUMENT);
+        this.document = inject(DOCUMENT$1);
         this.platformID = inject(PLATFORM_ID);
     }
     ngAfterViewInit() {
@@ -1309,7 +1446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 class AXHotkeysService {
     constructor() {
         this.eventManager = inject(EventManager);
-        this.document = inject(DOCUMENT);
+        this.document = inject(DOCUMENT$1);
         this.defaults = {
             element: this.document,
         };
@@ -1977,9 +2114,17 @@ class MXSelectionValueComponent extends MXValueComponent {
         const valueKey = isComplexObject ? get(itemRecord, this.valueField) : item;
         const key = valueKey != null ? String(valueKey) : String(item);
         const cacheKey = this.createCacheKey(key);
-        // Return cached item if available and has text
         const cachedItem = this.dataService.cacheList[cacheKey];
         if (cachedItem && get(cachedItem, this.textField) != null) {
+            if (isComplexObject) {
+                const incomingText = get(itemRecord, this.textField);
+                if (incomingText != null &&
+                    incomingText !== get(cachedItem, this.textField) &&
+                    incomingText !== '@acorex:common.status.loading') {
+                    Object.assign(cachedItem, itemRecord);
+                    delete cachedItem['_lastDisplayTextResult'];
+                }
+            }
             return cachedItem;
         }
         const hasTextProperty = !isComplexObject || get(itemRecord, this.textField) != null;
@@ -2177,6 +2322,20 @@ class MXSelectionValueComponent extends MXValueComponent {
         if (item && typeof item === 'object' && item['_displayTextLoading']) {
             return '@acorex:common.status.loading';
         }
+        if (item && typeof item === 'object') {
+            const incomingText = get(item, this.textField);
+            if (incomingText != null && incomingText !== '' && incomingText !== '@acorex:common.status.loading') {
+                const itemKey = get(item, this.valueField);
+                if (itemKey != null) {
+                    const cachedItem = this.dataService.cacheList[this.createCacheKey(String(itemKey))];
+                    if (cachedItem && cachedItem[this.textField] !== incomingText) {
+                        cachedItem[this.textField] = incomingText;
+                        delete cachedItem['_lastDisplayTextResult'];
+                    }
+                }
+                return String(incomingText);
+            }
+        }
         // Add timestamp-based debouncing to prevent excessive calls for ALL item types
         const now = Date.now();
         const itemKey = typeof item === 'string' ? item : get(item, this.valueField);
@@ -2491,7 +2650,7 @@ class AXRippleDirective {
         this.cdr = inject(ChangeDetectorRef);
         this.enabled = true;
         this.axRippleColor = 'var(--ax-comp-ripple-color, rgba(255, 255, 255, 0.3))';
-        this.document = inject(DOCUMENT);
+        this.document = inject(DOCUMENT$1);
         this.platformID = inject(PLATFORM_ID);
     }
     ngOnInit() {
@@ -2546,9 +2705,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Scrolls `element` into view inside `container` using nearest-edge behavior.
+ * Only adjusts the container's own scrollTop — never the document — so overlay
+ * dismissal on document scroll is not triggered.
+ */
+function scrollNearestIntoView(container, element, topInset = 0) {
+    const containerRect = container.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    const top = elementRect.top - containerRect.top - topInset;
+    const bottom = elementRect.bottom - containerRect.bottom;
+    if (top < 0) {
+        container.scrollTop += top;
+    }
+    else if (bottom > 0) {
+        container.scrollTop += bottom;
+    }
+}
+/**
+ * Scrolls an option into view inside a scrollable container using nearest-edge behavior.
+ * Uses bounding rects relative to the container so it works even when offsetParent differs.
+ */
+function scrollOptionWithinContainer(container, option) {
+    const containerRect = container.getBoundingClientRect();
+    const optionRect = option.getBoundingClientRect();
+    const relativeTop = optionRect.top - containerRect.top + container.scrollTop;
+    const relativeBottom = relativeTop + option.offsetHeight;
+    const viewTop = container.scrollTop;
+    const viewBottom = viewTop + container.clientHeight;
+    const maxScroll = Math.max(0, container.scrollHeight - container.clientHeight);
+    if (relativeTop < viewTop) {
+        container.scrollTop = relativeTop;
+    }
+    else if (relativeBottom > viewBottom) {
+        container.scrollTop = Math.min(relativeBottom - container.clientHeight, maxScroll);
+    }
+}
+/**
+ * Retries `fn` on successive animation frames until it returns true or `attempts` is exhausted.
+ * Used when the target element appears only after an overlay has been positioned and laid out.
+ */
+function retryFrames(fn, attempts = 5) {
+    if (typeof requestAnimationFrame === 'undefined') {
+        return;
+    }
+    let remaining = attempts;
+    const tick = () => {
+        if (fn() || --remaining <= 0) {
+            return;
+        }
+        requestAnimationFrame(tick);
+    };
+    requestAnimationFrame(tick);
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXAutoFocusDirective, AXAutocompleteParentComponent, AXButtonClickEvent, AXClearableComponent, AXClickEvent, AXClosableComponent, AXCommonModule, AXComponent, AXComponentCloseEvent, AXComponentClosedPromise, AXComponentClosing, AXComponentResult, AXDataSource, AXDomService, AXEvent, AXFocusEvent, AXFocusableComponent, AXHotkeyDirective, AXHotkeysService, AXHtmlEvent, AXInfiniteScrollerDirective, AXInvertedColorDirective, AXItemClickEvent, AXItemSelectedEvent, AXListDataSource, AXNgModelDelayedValueChangedDirective, AXOptionChangedEvent, AXPagedComponent, AXRangeChangedEvent, AXResponsiveDirective, AXRippleDirective, AXSearchableComponent, AXSelectionValueChangedEvent, AXValuableComponent, AXValueChangedEvent, AX_LOCATIONS, AX_PLACEMENT_BOTTOM, AX_PLACEMENT_BOTTOM_END, AX_PLACEMENT_BOTTOM_START, AX_PLACEMENT_END, AX_PLACEMENT_END_BOTTOM, AX_PLACEMENT_END_TOP, AX_PLACEMENT_MAP, AX_PLACEMENT_START, AX_PLACEMENT_START_BOTTOM, AX_PLACEMENT_START_TOP, AX_PLACEMENT_TOP, AX_PLACEMENT_TOP_END, AX_PLACEMENT_TOP_START, AX_SELECTION_DATA_TOKEN, AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, MXBaseComponent, MXButtonBaseComponent, MXColorComponent, MXColorLookComponent, MXInputBaseValueComponent, MXInteractiveComponent, MXLookComponent, MXLookableComponent, MXSelectionBridgeService, MXSelectionValueComponent, MXValueComponent, NXButtonComponent, NXClickEvent, NXColorComponent, NXComponent, NXEvent, NXInteractiveComponent, NXLookComponent, NXNativeEvent, NXValueComponent, TAB_META_KEY, applyDataSourceQuery, convertArrayToDataSource, convertToPlacement };
+export { AXAutoFocusDirective, AXAutocompleteParentComponent, AXButtonClickEvent, AXClearableComponent, AXClickEvent, AXClosableComponent, AXCommonModule, AXComponent, AXComponentCloseEvent, AXComponentClosedPromise, AXComponentClosing, AXComponentResult, AXDataSource, AXDomService, AXEvent, AXFocusEvent, AXFocusableComponent, AXHotkeyDirective, AXHotkeysService, AXHtmlEvent, AXInfiniteScrollerDirective, AXInvertedColorDirective, AXItemClickEvent, AXItemSelectedEvent, AXListDataSource, AXNgModelDelayedValueChangedDirective, AXOptionChangedEvent, AXPagedComponent, AXRangeChangedEvent, AXResponsiveDirective, AXRippleDirective, AXSearchableComponent, AXSelectionValueChangedEvent, AXValuableComponent, AXValueChangedEvent, AX_LOCATIONS, AX_PLACEMENT_BOTTOM, AX_PLACEMENT_BOTTOM_END, AX_PLACEMENT_BOTTOM_START, AX_PLACEMENT_END, AX_PLACEMENT_END_BOTTOM, AX_PLACEMENT_END_TOP, AX_PLACEMENT_MAP, AX_PLACEMENT_START, AX_PLACEMENT_START_BOTTOM, AX_PLACEMENT_START_TOP, AX_PLACEMENT_TOP, AX_PLACEMENT_TOP_END, AX_PLACEMENT_TOP_START, AX_SELECTION_DATA_TOKEN, AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, MXBaseComponent, MXButtonBaseComponent, MXColorComponent, MXColorLookComponent, MXInputBaseValueComponent, MXInteractiveComponent, MXLookComponent, MXLookableComponent, MXSelectionBridgeService, MXSelectionValueComponent, MXValueComponent, NXButtonComponent, NXClickEvent, NXColorComponent, NXComponent, NXEvent, NXInteractiveComponent, NXLookComponent, NXNativeEvent, NXValueComponent, TAB_META_KEY, applyDataSourceQuery, convertArrayToDataSource, convertToPlacement, retryFrames, scrollNearestIntoView, scrollOptionWithinContainer };
 //# sourceMappingURL=acorex-cdk-common.mjs.map