@acorex/cdk 21.0.2-next.33 → 21.0.2-next.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, signal, afterNextRender, HostListener, Directive } from '@angular/core';
|
|
2
|
+
import { input, inject, ElementRef, signal, afterNextRender, HostListener, Directive } from '@angular/core';
|
|
3
3
|
|
|
4
4
|
class AXFocusTrapDirective {
|
|
5
5
|
constructor() {
|
|
6
|
+
this.arrowNavigation = input(false, { ...(ngDevMode ? { debugName: "arrowNavigation" } : /* istanbul ignore next */ {}), alias: 'axFocusTrapArrowNavigation' });
|
|
6
7
|
this.el = inject(ElementRef);
|
|
7
8
|
this.focusableElements = [];
|
|
8
9
|
this.nativeElement = signal(null, ...(ngDevMode ? [{ debugName: "nativeElement" }] : /* istanbul ignore next */ []));
|
|
@@ -29,36 +30,35 @@ class AXFocusTrapDirective {
|
|
|
29
30
|
this.focusableElements = Array.from(this.nativeElement().querySelectorAll(focusableSelectors.join(',')))
|
|
30
31
|
.filter((el) => !el.hasAttribute('disabled'))
|
|
31
32
|
.map((el) => el);
|
|
32
|
-
if (this.focusableElements.length) {
|
|
33
|
-
this.firstElement = this.focusableElements[0];
|
|
34
|
-
this.lastElement = this.focusableElements[this.focusableElements.length - 1];
|
|
35
|
-
}
|
|
36
33
|
}
|
|
37
34
|
handleKeyboardEvent(event) {
|
|
38
|
-
|
|
35
|
+
const items = this.focusableElements;
|
|
36
|
+
if (!items.length)
|
|
39
37
|
return;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
38
|
+
const activeIndex = items.indexOf(document.activeElement);
|
|
39
|
+
if (event.key === 'Tab') {
|
|
40
|
+
if (event.shiftKey ? activeIndex === 0 : activeIndex === items.length - 1) {
|
|
43
41
|
event.preventDefault();
|
|
42
|
+
items[event.shiftKey ? items.length - 1 : 0]?.focus();
|
|
44
43
|
}
|
|
44
|
+
return;
|
|
45
45
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
this.firstElement.focus();
|
|
49
|
-
event.preventDefault();
|
|
50
|
-
}
|
|
46
|
+
if (!this.arrowNavigation() || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') || activeIndex === -1) {
|
|
47
|
+
return;
|
|
51
48
|
}
|
|
49
|
+
event.preventDefault();
|
|
50
|
+
const delta = event.key === 'ArrowRight' ? 1 : -1;
|
|
51
|
+
items[(activeIndex + delta + items.length) % items.length]?.focus();
|
|
52
52
|
}
|
|
53
53
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFocusTrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
54
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
54
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: AXFocusTrapDirective, isStandalone: true, selector: "[axFocusTrap]", inputs: { arrowNavigation: { classPropertyName: "arrowNavigation", publicName: "axFocusTrapArrowNavigation", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, ngImport: i0 }); }
|
|
55
55
|
}
|
|
56
56
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFocusTrapDirective, decorators: [{
|
|
57
57
|
type: Directive,
|
|
58
58
|
args: [{
|
|
59
59
|
selector: '[axFocusTrap]',
|
|
60
60
|
}]
|
|
61
|
-
}], propDecorators: { handleKeyboardEvent: [{
|
|
61
|
+
}], propDecorators: { arrowNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "axFocusTrapArrowNavigation", required: false }] }], handleKeyboardEvent: [{
|
|
62
62
|
type: HostListener,
|
|
63
63
|
args: ['keydown', ['$event']]
|
|
64
64
|
}] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-cdk-focus-trap.mjs","sources":["../../../../packages/cdk/focus-trap/src/lib/focus-trap.directive.ts","../../../../packages/cdk/focus-trap/src/acorex-cdk-focus-trap.ts"],"sourcesContent":["import { afterNextRender, Directive, ElementRef, HostListener, inject, OnDestroy, signal } from '@angular/core';\n\n@Directive({\n selector: '[axFocusTrap]',\n})\nexport class AXFocusTrapDirective implements OnDestroy {\n private el = inject(ElementRef);\n private focusableElements: HTMLElement[] = [];\n private
|
|
1
|
+
{"version":3,"file":"acorex-cdk-focus-trap.mjs","sources":["../../../../packages/cdk/focus-trap/src/lib/focus-trap.directive.ts","../../../../packages/cdk/focus-trap/src/acorex-cdk-focus-trap.ts"],"sourcesContent":["import { afterNextRender, Directive, ElementRef, HostListener, inject, input, OnDestroy, signal } from '@angular/core';\n\n@Directive({\n selector: '[axFocusTrap]',\n})\nexport class AXFocusTrapDirective implements OnDestroy {\n arrowNavigation = input(false, { alias: 'axFocusTrapArrowNavigation' });\n\n private el = inject(ElementRef);\n private focusableElements: HTMLElement[] = [];\n private nativeElement = signal<HTMLElement>(null);\n private observer = new MutationObserver(() => this.setFocusableElements());\n\n #init = afterNextRender(() => {\n this.nativeElement.set(this.el.nativeElement);\n this.setFocusableElements();\n this.observer.observe(this.el.nativeElement, { childList: true, subtree: true });\n });\n\n ngOnDestroy(): void {\n this.observer.disconnect();\n }\n\n private setFocusableElements() {\n const focusableSelectors = [\n 'a[href]',\n 'button:not([disabled])',\n 'textarea:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n ];\n\n this.focusableElements = Array.from(this.nativeElement().querySelectorAll(focusableSelectors.join(',')))\n .filter((el: Element) => !el.hasAttribute('disabled'))\n .map((el) => el as HTMLElement);\n }\n\n @HostListener('keydown', ['$event'])\n handleKeyboardEvent(event: KeyboardEvent): void {\n const items = this.focusableElements;\n if (!items.length) return;\n\n const activeIndex = items.indexOf(document.activeElement as HTMLElement);\n\n if (event.key === 'Tab') {\n if (event.shiftKey ? activeIndex === 0 : activeIndex === items.length - 1) {\n event.preventDefault();\n items[event.shiftKey ? items.length - 1 : 0]?.focus();\n }\n return;\n }\n\n if (!this.arrowNavigation() || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') || activeIndex === -1) {\n return;\n }\n\n event.preventDefault();\n const delta = event.key === 'ArrowRight' ? 1 : -1;\n items[(activeIndex + delta + items.length) % items.length]?.focus();\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -3,17 +3,16 @@ import { OnDestroy } from '@angular/core';
|
|
|
3
3
|
|
|
4
4
|
declare class AXFocusTrapDirective implements OnDestroy {
|
|
5
5
|
#private;
|
|
6
|
+
arrowNavigation: i0.InputSignal<boolean>;
|
|
6
7
|
private el;
|
|
7
8
|
private focusableElements;
|
|
8
|
-
private firstElement;
|
|
9
|
-
private lastElement;
|
|
10
9
|
private nativeElement;
|
|
11
10
|
private observer;
|
|
12
11
|
ngOnDestroy(): void;
|
|
13
12
|
private setFocusableElements;
|
|
14
13
|
handleKeyboardEvent(event: KeyboardEvent): void;
|
|
15
14
|
static ɵfac: i0.ɵɵFactoryDeclaration<AXFocusTrapDirective, never>;
|
|
16
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<AXFocusTrapDirective, "[axFocusTrap]", never, {}, {}, never, never, true, never>;
|
|
15
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<AXFocusTrapDirective, "[axFocusTrap]", never, { "arrowNavigation": { "alias": "axFocusTrapArrowNavigation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
17
16
|
}
|
|
18
17
|
|
|
19
18
|
export { AXFocusTrapDirective };
|