@ngbase/adk 0.1.11 → 0.1.12

package/drag/index.d.ts

@@ -1,5 +1,107 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@ngbase/adk/drag" />
-export * from './public-api';
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { Subject } from 'rxjs';
+
+declare class DragData {
+    x: number;
+    y: number;
+    dx: number;
+    dy: number;
+    type: 'start' | 'move' | 'end';
+    event?: PointerEvent | undefined;
+    clientX?: number | undefined;
+    clientY?: number | undefined;
+    direction?: "left" | "right" | undefined;
+    velocity: number;
+    time: number;
+    constructor(x?: number, y?: number, dx?: number, dy?: number, type?: 'start' | 'move' | 'end', event?: PointerEvent | undefined, clientX?: number | undefined, clientY?: number | undefined, direction?: "left" | "right" | undefined, velocity?: number, // pixels per millisecond
+    time?: number);
+}
+declare class DragHandle {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DragHandle, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DragHandle, "[ngbDragHandle]", ["ngbDragHandle"], {}, {}, never, never, true, never>;
+}
+declare class Drag {
+    readonly el: ElementRef<any>;
+    readonly document: Document;
+    readonly handle: _angular_core.Signal<ElementRef<any> | undefined>;
+    readonly events: Subject<DragData>;
+    readonly ngbDrag: _angular_core.OutputRef<DragData>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly lockAxis: _angular_core.InputSignal<"x" | "y" | undefined>;
+    readonly dragBoundary: _angular_core.InputSignal<string | undefined>;
+    _lockAxis: _angular_core.WritableSignal<"x" | "y" | undefined>;
+    _dragBoundary: _angular_core.WritableSignal<string | undefined>;
+    _disabled: _angular_core.WritableSignal<boolean>;
+    private readonly dragBoundaryElement;
+    private boundaryRect;
+    startEvent: PointerEvent;
+    lastValue: DragData;
+    isDragging: boolean;
+    constructor();
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private startDrag;
+    private moveDrag;
+    private endDrag;
+    private toggleUserSelect;
+    private getDirection;
+    private getDragEvent;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Drag, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Drag, "[ngbDrag]", ["ngbDrag"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "lockAxis": { "alias": "lockAxis"; "required": false; "isSignal": true; }; "dragBoundary": { "alias": "dragBoundary"; "required": false; "isSignal": true; }; }, { "ngbDrag": "ngbDrag"; }, ["handle"], never, true, never>;
+}
+
+declare class DragMove {
+    private drag;
+    private el;
+    readonly target: _angular_core.InputSignal<HTMLElement | undefined>;
+    private scale;
+    private x;
+    private y;
+    private lastX;
+    private lastY;
+    constructor();
+    private get element();
+    private updateTransform;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DragMove, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DragMove, "[ngbDragMove]", never, { "target": { "alias": "target"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof Drag; inputs: { "dragBoundary": "dragBoundary"; }; outputs: {}; }]>;
+}
+
+interface DropEvent<T> {
+    previousIndex: number;
+    currentIndex: number;
+    container: {
+        data: T;
+    };
+    previousContainer: {
+        data: T;
+    };
+}
+declare class DragDrop<T> {
+    readonly el: ElementRef<any>;
+    readonly dragItems: _angular_core.Signal<readonly Drag[]>;
+    readonly data: _angular_core.InputSignal<T | undefined>;
+    readonly orderChanged: _angular_core.OutputEmitterRef<DropEvent<T>>;
+    private sortableElements;
+    private previousIndex;
+    private currentIndex;
+    private height;
+    constructor();
+    private onDrag;
+    fromThis(dragData: DragData): boolean;
+    private onDragStart;
+    private onDragMove;
+    private onDragEnd;
+    private rearrangeItems;
+    private updateItemPositions;
+    private resetPositions;
+    private emitNewOrder;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DragDrop<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DragDrop<any>, "[ngbDrop]", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; }, { "orderChanged": "orderChanged"; }, ["dragItems"], never, true, never>;
+}
+declare function moveItemInArray<T>(array: T[], fromIndex: number, toIndex: number): void;
+declare function transferArrayItem<T>(fromArray: T[], toArray: T[], fromIndex: number, toIndex: number): void;
+
+export { Drag, DragData, DragDrop, DragHandle, DragMove, moveItemInArray, transferArrayItem };
+export type { DropEvent };

package/fesm2022/ngbase-adk-a11y.mjs

@@ -1,13 +1,12 @@
-import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, ElementRef, model, input, booleanAttribute, linkedSignal, computed, effect, untracked, Directive, output, ApplicationRef } from '@angular/core';
+import { signal, Injectable, inject, ElementRef, DOCUMENT, model, input, booleanAttribute, linkedSignal, computed, effect, untracked, Directive, output, InjectionToken, afterRenderEffect, ApplicationRef, afterEveryRender } from '@angular/core';
 import { Directionality } from '@ngbase/adk/bidi';
 import { documentListener, isClient } from '@ngbase/adk/utils';
 import { Subject } from 'rxjs';
 
 class AccessibilityService {
     constructor() {
-        this.groups = signal(new Map());
+        this.groups = signal(new Map(), ...(ngDevMode ? [{ debugName: "groups" }] : []));
         this.activeGroupOrder = [];
         this.usingMouse = false;
         documentListener('keydown', () => (this.usingMouse = false), { capture: true });
@@ -48,10 +47,10 @@ class AccessibilityService {
         });
         this.removeActiveGroup(key);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: AccessibilityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: AccessibilityService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: AccessibilityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: AccessibilityService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: AccessibilityService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: AccessibilityService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -63,15 +62,15 @@ class AccessibleGroup {
         this.el = inject(ElementRef);
         this.document = inject(DOCUMENT);
         this.dir = inject(Directionality);
-        this.ayId = model('');
-        this.columns = input();
-        this.ariaLabel = input('');
-        this.ariaLabelledby = input('');
-        this.isPopup = input(false);
-        this.loop = input(true);
-        this.disabled = input(false, { transform: booleanAttribute });
-        this.clickable = model(false);
-        this.initialFocus = input(true);
+        this.ayId = model('', ...(ngDevMode ? [{ debugName: "ayId" }] : []));
+        this.columns = input(...(ngDevMode ? [undefined, { debugName: "columns" }] : []));
+        this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+        this.ariaLabelledby = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
+        this.isPopup = input(false, ...(ngDevMode ? [{ debugName: "isPopup" }] : []));
+        this.loop = input(true, ...(ngDevMode ? [{ debugName: "loop" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.clickable = model(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
+        this.initialFocus = input(true, ...(ngDevMode ? [{ debugName: "initialFocus" }] : []));
         // Hacky way to make sure the signals are updated
         this._ayId = linkedSignal(this.ayId);
         this._disabled = linkedSignal(this.disabled);
@@ -82,7 +81,7 @@ class AccessibleGroup {
         this._columns = linkedSignal(this.columns);
         this._initialFocus = linkedSignal(this.initialFocus);
         this.isOn = false;
-        this.elements = signal([]);
+        this.elements = signal([], ...(ngDevMode ? [{ debugName: "elements" }] : []));
         this.items = computed(() => {
             const _ = this._ayId() || '';
             const items = this.elements();
@@ -95,7 +94,7 @@ class AccessibleGroup {
                     : 1;
             });
             return items;
-        });
+        }, ...(ngDevMode ? [{ debugName: "items" }] : []));
         this.handleFocusIn = (_) => {
             if (!this.isOn) {
                 // console.log(`focus in ${this._ayId()}`);
@@ -386,10 +385,10 @@ class AccessibleGroup {
     unregister(item) {
         this.elements.update(x => x.filter(y => y !== item));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: AccessibleGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: AccessibleGroup, isStandalone: true, selector: "[ngbAccessibleGroup]", inputs: { ayId: { classPropertyName: "ayId", publicName: "ayId", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, isPopup: { classPropertyName: "isPopup", publicName: "isPopup", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ayId: "ayIdChange", clickable: "clickableChange" }, host: { attributes: { "role": "group", "tabindex": "0" }, properties: { "attr.aria-label": "_ariaLabel()", "attr.aria-labelledby": "_ariaLabelledby()", "attr.aria-disabled": "_disabled()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: AccessibleGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0", type: AccessibleGroup, isStandalone: true, selector: "[ngbAccessibleGroup]", inputs: { ayId: { classPropertyName: "ayId", publicName: "ayId", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, isPopup: { classPropertyName: "isPopup", publicName: "isPopup", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ayId: "ayIdChange", clickable: "clickableChange" }, host: { attributes: { "role": "group", "tabindex": "0" }, properties: { "attr.aria-label": "_ariaLabel()", "attr.aria-labelledby": "_ariaLabelledby()", "attr.aria-disabled": "_disabled()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: AccessibleGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: AccessibleGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbAccessibleGroup]',
@@ -407,16 +406,16 @@ class AccessibleItem {
     constructor() {
         this.allyService = inject(AccessibilityService);
         this.host = inject(ElementRef);
-        this.id = input('');
-        this.ayId = input('');
-        this.role = input('button');
-        this.disabled = input(false, { transform: booleanAttribute });
-        this.selected = input(false, { transform: booleanAttribute });
-        this.data = input();
-        this.skip = input(false, { transform: booleanAttribute });
-        this.level = model(0);
-        this.expandable = model(false);
-        this.expanded = model(false);
+        this.id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.ayId = input('', ...(ngDevMode ? [{ debugName: "ayId" }] : []));
+        this.role = input('button', ...(ngDevMode ? [{ debugName: "role" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
+        this.skip = input(false, ...(ngDevMode ? [{ debugName: "skip", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.level = model(0, ...(ngDevMode ? [{ debugName: "level" }] : []));
+        this.expandable = model(false, ...(ngDevMode ? [{ debugName: "expandable" }] : []));
+        this.expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
         this.selectedChange = output();
         // inputs writable for hacky reasons
         this._disabled = linkedSignal(this.disabled);
@@ -427,9 +426,9 @@ class AccessibleItem {
         this._skip = linkedSignal(this.skip);
         this._expandable = linkedSignal(this.expandable);
         this._expanded = linkedSignal(this.expanded);
-        this.group = computed(() => this.allyService.getGroup(this._ayId() || ''));
-        this.pressed = signal(false);
-        this.hasPopup = computed(() => this.el.getAttribute('aria-haspopup') === 'true');
+        this.group = computed(() => this.allyService.getGroup(this._ayId() || ''), ...(ngDevMode ? [{ debugName: "group" }] : []));
+        this.pressed = signal(false, ...(ngDevMode ? [{ debugName: "pressed" }] : []));
+        this.hasPopup = computed(() => this.el.getAttribute('aria-haspopup') === 'true', ...(ngDevMode ? [{ debugName: "hasPopup" }] : []));
         this.events = new Subject();
         this.count = 1;
         /**
@@ -488,10 +487,10 @@ class AccessibleItem {
     ngOnDestroy() {
         this.isDestroyed = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: AccessibleItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: AccessibleItem, isStandalone: true, selector: "[ngbAccessibleItem]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ayId: { classPropertyName: "ayId", publicName: "ayId", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "skip", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { level: "levelChange", expandable: "expandableChange", expanded: "expandedChange", selectedChange: "selectedChange" }, host: { listeners: { "click": "onFocus()" }, properties: { "attr.aria-pressed": "pressed()", "attr.aria-disabled": "_disabled() || null", "attr.aria-selected": "_selected()", "tabindex": "_disabled() ? -1 : 0" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: AccessibleItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0", type: AccessibleItem, isStandalone: true, selector: "[ngbAccessibleItem]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ayId: { classPropertyName: "ayId", publicName: "ayId", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "skip", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { level: "levelChange", expandable: "expandableChange", expanded: "expandedChange", selectedChange: "selectedChange" }, host: { listeners: { "click": "onFocus()" }, properties: { "attr.aria-pressed": "pressed()", "attr.aria-disabled": "_disabled() || null", "attr.aria-selected": "_selected()", "tabindex": "_disabled() ? -1 : 0" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: AccessibleItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: AccessibleItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbAccessibleItem]',
@@ -505,45 +504,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+const FOCUS_TRAP_OPTIONS = new InjectionToken('focusTrapOptions', {
+    factory: () => ({ initial: true }),
+});
+function provideFocusTrapOptions(optionsFn) {
+    return { provide: FOCUS_TRAP_OPTIONS, useFactory: optionsFn };
+}
 class FocusTrap {
     constructor() {
         this.el = inject(ElementRef);
-        this.ngbFocusTrap = input(true, { transform: booleanAttribute });
-        this.focusInitial = input(true, { transform: booleanAttribute });
+        this.options = inject(FOCUS_TRAP_OPTIONS, { optional: true });
+        this.ngbFocusTrap = input(true, ...(ngDevMode ? [{ debugName: "ngbFocusTrap", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.focusInitial = input(true, ...(ngDevMode ? [{ debugName: "focusInitial", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         // hacky way
         this._focusTrap = linkedSignal(this.ngbFocusTrap);
-        this._focusInitial = linkedSignal(this.focusInitial);
-        this.firstFocusableElement = null;
-        this.lastFocusableElement = null;
+        this._focusInitial = linkedSignal(() => this.focusInitial() || this.options?.initial || false);
+        this.cachedFocusableElements = null;
         this.onKeydown = (event) => {
             if (event.key === 'Tab') {
+                const focusableElements = this.getFocusableElements();
+                if (focusableElements.length === 0)
+                    return;
+                const firstFocusable = focusableElements[0];
+                const lastFocusable = focusableElements[focusableElements.length - 1];
                 if (event.shiftKey) {
                     // Shift + Tab
-                    if (document.activeElement === this.firstFocusableElement) {
+                    if (document.activeElement === firstFocusable) {
                         event.preventDefault();
-                        this.lastFocusableElement?.focus();
+                        lastFocusable.focus();
                     }
                 }
                 else {
                     // Tab
-                    if (document.activeElement === this.lastFocusableElement) {
+                    if (document.activeElement === lastFocusable) {
                         event.preventDefault();
-                        this.firstFocusableElement?.focus();
+                        firstFocusable.focus();
                     }
                 }
             }
         };
         let initialFocus = false;
-        effect(cleanup => {
+        afterRenderEffect(cleanup => {
             if (this._focusTrap()) {
-                const observer = new MutationObserver(() => this.setFocusableElements());
-                observer.observe(this.el.nativeElement, { childList: true, subtree: true });
-                // we have call this manually because mutation observer not trigger on initial render
-                this.setFocusableElements();
+                const observer = new MutationObserver(() => {
+                    this.invalidateCache();
+                });
+                observer.observe(this.el.nativeElement, {
+                    childList: true,
+                    subtree: true,
+                    attributes: true,
+                    attributeFilter: ['disabled', 'tabindex', 'aria-hidden', 'hidden'],
+                });
                 if (!initialFocus && this._focusInitial()) {
                     initialFocus = true;
-                    // console.log('focusInitial', this.el.nativeElement);
-                    this.firstFocusableElement?.focus();
+                    const focusableElements = this.getFocusableElements();
+                    if (focusableElements.length > 0) {
+                        focusableElements[0].focus();
+                    }
                 }
                 // listen to the keydown event
                 this.el.nativeElement.addEventListener('keydown', this.onKeydown);
@@ -554,15 +571,28 @@ class FocusTrap {
             }
         });
     }
-    setFocusableElements() {
-        const focusableElements = this.el.nativeElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-        this.firstFocusableElement = focusableElements[0];
-        this.lastFocusableElement = focusableElements[focusableElements.length - 1];
+    isElementFocusable(element) {
+        return (!element.hasAttribute('disabled') && !element.hasAttribute('aria-hidden') && !element.hidden);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FocusTrap, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: FocusTrap, isStandalone: true, selector: "[ngbFocusTrap]", inputs: { ngbFocusTrap: { classPropertyName: "ngbFocusTrap", publicName: "ngbFocusTrap", isSignal: true, isRequired: false, transformFunction: null }, focusInitial: { classPropertyName: "focusInitial", publicName: "focusInitial", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    getFocusableElements() {
+        if (this.cachedFocusableElements === null) {
+            const allFocusableElements = this.el.nativeElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            this.cachedFocusableElements = [];
+            for (let i = 0; i < allFocusableElements.length; i++) {
+                if (this.isElementFocusable(allFocusableElements[i])) {
+                    this.cachedFocusableElements.push(allFocusableElements[i]);
+                }
+            }
+        }
+        return this.cachedFocusableElements;
+    }
+    invalidateCache() {
+        this.cachedFocusableElements = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: FocusTrap, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0", type: FocusTrap, isStandalone: true, selector: "[ngbFocusTrap]", inputs: { ngbFocusTrap: { classPropertyName: "ngbFocusTrap", publicName: "ngbFocusTrap", isSignal: true, isRequired: false, transformFunction: null }, focusInitial: { classPropertyName: "focusInitial", publicName: "focusInitial", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FocusTrap, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: FocusTrap, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbFocusTrap]',
@@ -574,11 +604,13 @@ class Autofocus {
         this.el = inject(ElementRef);
         this.applicationRef = inject(ApplicationRef);
         this.document = inject(DOCUMENT);
-        this.focusDelay = input(300);
+        this.focusDelay = input(300, ...(ngDevMode ? [{ debugName: "focusDelay" }] : []));
         this.isFocused = false;
         this.client = isClient();
         if (this.client) {
-            this.elWatcher();
+            afterEveryRender(() => {
+                this.elWatcher();
+            });
         }
     }
     elWatcher() {
@@ -612,23 +644,17 @@ class Autofocus {
     //     }, this.focusDelay());
     //   }
     // }
-    focusElement() {
-        this.subscription?.unsubscribe();
-        this.subscription = this.applicationRef.isStable.subscribe(res => {
-            if (res) {
-                this.subscription?.unsubscribe();
-                this.subscription = undefined;
-                this.el.nativeElement.focus();
-            }
-        });
+    async focusElement() {
+        await this.applicationRef.whenStable();
+        this.el.nativeElement.focus();
     }
     ngOnDestroy() {
         this.intersectionObserver?.disconnect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: Autofocus, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: Autofocus, isStandalone: true, selector: "[ngbAutofocus]", inputs: { focusDelay: { classPropertyName: "focusDelay", publicName: "focusDelay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: Autofocus, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0", type: Autofocus, isStandalone: true, selector: "[ngbAutofocus]", inputs: { focusDelay: { classPropertyName: "focusDelay", publicName: "focusDelay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: Autofocus, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: Autofocus, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbAutofocus]',
@@ -639,5 +665,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccessibleGroup, AccessibleItem, Autofocus, FocusTrap };
+export { AccessibleGroup, AccessibleItem, Autofocus, FocusTrap, provideFocusTrapOptions };
 //# sourceMappingURL=ngbase-adk-a11y.mjs.map