@wawjs/ngx-prime 22.0.0

package/fesm2022/wawjs-ngx-prime-focustrap.mjs

@@ -0,0 +1,107 @@
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, inject, PLATFORM_ID, effect, Directive, NgModule } from '@angular/core';
+import { createElement, getFirstFocusableElement, focus, getLastFocusableElement } from '@wawjs/css-prime-utils';
+import { BaseComponent } from '@wawjs/ngx-prime/basecomponent';
+
+/**
+ * Focus Trap keeps focus within a certain DOM element while tabbing.
+ * @group Components
+ */
+class FocusTrap extends BaseComponent {
+    /**
+     * When set as true, focus wouldn't be managed.
+     * @group Props
+     */
+    pFocusTrapDisabled = input(false, { ...(ngDevMode ? { debugName: "pFocusTrapDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    platformId = inject(PLATFORM_ID);
+    document = inject(DOCUMENT);
+    firstHiddenFocusableElement;
+    lastHiddenFocusableElement;
+    constructor() {
+        super();
+        effect(() => {
+            const disabled = this.pFocusTrapDisabled();
+            if (isPlatformBrowser(this.platformId)) {
+                if (disabled) {
+                    this.removeHiddenFocusableElements();
+                }
+                else {
+                    this.createHiddenFocusableElements();
+                }
+            }
+        });
+    }
+    onInit() {
+        if (isPlatformBrowser(this.platformId) && !this.pFocusTrapDisabled()) {
+            !this.firstHiddenFocusableElement && !this.lastHiddenFocusableElement && this.createHiddenFocusableElements();
+        }
+    }
+    removeHiddenFocusableElements() {
+        if (this.firstHiddenFocusableElement && this.firstHiddenFocusableElement.parentNode) {
+            this.firstHiddenFocusableElement.parentNode.removeChild(this.firstHiddenFocusableElement);
+        }
+        if (this.lastHiddenFocusableElement && this.lastHiddenFocusableElement.parentNode) {
+            this.lastHiddenFocusableElement.parentNode.removeChild(this.lastHiddenFocusableElement);
+        }
+    }
+    getComputedSelector(selector) {
+        return `:not(.p-hidden-focusable):not([data-p-hidden-focusable="true"])${selector ?? ''}`;
+    }
+    createHiddenFocusableElements() {
+        const tabindex = '0';
+        const createFocusableElement = (onFocus) => createElement('span', {
+            class: 'p-hidden-accessible p-hidden-focusable',
+            tabindex,
+            role: 'presentation',
+            'aria-hidden': true,
+            'data-p-hidden-accessible': true,
+            'data-p-hidden-focusable': true,
+            onFocus: onFocus?.bind(this)
+        });
+        this.firstHiddenFocusableElement = createFocusableElement(this.onFirstHiddenElementFocus);
+        this.lastHiddenFocusableElement = createFocusableElement(this.onLastHiddenElementFocus);
+        this.firstHiddenFocusableElement.setAttribute('data-pc-section', 'firstfocusableelement');
+        this.lastHiddenFocusableElement.setAttribute('data-pc-section', 'lastfocusableelement');
+        this.el.nativeElement.prepend(this.firstHiddenFocusableElement);
+        this.el.nativeElement.append(this.lastHiddenFocusableElement);
+    }
+    onFirstHiddenElementFocus(event) {
+        const { currentTarget, relatedTarget } = event;
+        const focusableElement = relatedTarget === this.lastHiddenFocusableElement || !this.el.nativeElement?.contains(relatedTarget) ? getFirstFocusableElement(currentTarget.parentElement, ':not(.p-hidden-focusable)') : this.lastHiddenFocusableElement;
+        focus(focusableElement);
+    }
+    onLastHiddenElementFocus(event) {
+        const { currentTarget, relatedTarget } = event;
+        const focusableElement = relatedTarget === this.firstHiddenFocusableElement || !this.el.nativeElement?.contains(relatedTarget) ? getLastFocusableElement(currentTarget.parentElement, ':not(.p-hidden-focusable)') : this.firstHiddenFocusableElement;
+        focus(focusableElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FocusTrap, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: FocusTrap, isStandalone: true, selector: "[pFocusTrap]", inputs: { pFocusTrapDisabled: { classPropertyName: "pFocusTrapDisabled", publicName: "pFocusTrapDisabled", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FocusTrap, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pFocusTrap]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { pFocusTrapDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pFocusTrapDisabled", required: false }] }] } });
+class FocusTrapModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FocusTrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: FocusTrapModule, imports: [FocusTrap], exports: [FocusTrap] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FocusTrapModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FocusTrapModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [FocusTrap],
+                    exports: [FocusTrap]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FocusTrap, FocusTrapModule };
+//# sourceMappingURL=wawjs-ngx-prime-focustrap.mjs.map

package/fesm2022/wawjs-ngx-prime-focustrap.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"wawjs-ngx-prime-focustrap.mjs","sources":["../../src/focustrap/focustrap.ts","../../src/focustrap/wawjs-ngx-prime-focustrap.ts"],"sourcesContent":["import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { booleanAttribute, Directive, effect, inject, input, NgModule, PLATFORM_ID } from '@angular/core';\nimport { createElement, focus, getFirstFocusableElement, getLastFocusableElement } from '@wawjs/css-prime-utils';\nimport { BaseComponent } from '@wawjs/ngx-prime/basecomponent';\n\n/**\n * Focus Trap keeps focus within a certain DOM element while tabbing.\n * @group Components\n */\n@Directive({\n    selector: '[pFocusTrap]',\n    standalone: true\n})\nexport class FocusTrap extends BaseComponent {\n    /**\n     * When set as true, focus wouldn't be managed.\n     * @group Props\n     */\n    pFocusTrapDisabled = input(false, { transform: booleanAttribute });\n\n    platformId = inject(PLATFORM_ID);\n\n    document: Document = inject(DOCUMENT);\n\n    firstHiddenFocusableElement!: HTMLElement;\n\n    lastHiddenFocusableElement!: HTMLElement;\n\n    constructor() {\n        super();\n\n        effect(() => {\n            const disabled = this.pFocusTrapDisabled();\n\n            if (isPlatformBrowser(this.platformId)) {\n                if (disabled) {\n                    this.removeHiddenFocusableElements();\n                } else {\n                    this.createHiddenFocusableElements();\n                }\n            }\n        });\n    }\n\n    onInit() {\n        if (isPlatformBrowser(this.platformId) && !this.pFocusTrapDisabled()) {\n            !this.firstHiddenFocusableElement && !this.lastHiddenFocusableElement && this.createHiddenFocusableElements();\n        }\n    }\n\n    removeHiddenFocusableElements() {\n        if (this.firstHiddenFocusableElement && this.firstHiddenFocusableElement.parentNode) {\n            this.firstHiddenFocusableElement.parentNode.removeChild(this.firstHiddenFocusableElement);\n        }\n\n        if (this.lastHiddenFocusableElement && this.lastHiddenFocusableElement.parentNode) {\n            this.lastHiddenFocusableElement.parentNode.removeChild(this.lastHiddenFocusableElement);\n        }\n    }\n    getComputedSelector(selector) {\n        return `:not(.p-hidden-focusable):not([data-p-hidden-focusable=\"true\"])${selector ?? ''}`;\n    }\n\n    createHiddenFocusableElements() {\n        const tabindex = '0';\n\n        const createFocusableElement = (onFocus) =>\n            createElement('span', {\n                class: 'p-hidden-accessible p-hidden-focusable',\n                tabindex,\n                role: 'presentation',\n                'aria-hidden': true,\n                'data-p-hidden-accessible': true,\n                'data-p-hidden-focusable': true,\n                onFocus: onFocus?.bind(this)\n            }) as HTMLElement;\n\n        this.firstHiddenFocusableElement = createFocusableElement(this.onFirstHiddenElementFocus);\n        this.lastHiddenFocusableElement = createFocusableElement(this.onLastHiddenElementFocus);\n\n        this.firstHiddenFocusableElement.setAttribute('data-pc-section', 'firstfocusableelement');\n        this.lastHiddenFocusableElement.setAttribute('data-pc-section', 'lastfocusableelement');\n\n        this.el.nativeElement.prepend(this.firstHiddenFocusableElement);\n        this.el.nativeElement.append(this.lastHiddenFocusableElement);\n    }\n\n    onFirstHiddenElementFocus(event) {\n        const { currentTarget, relatedTarget } = event;\n        const focusableElement =\n            relatedTarget === this.lastHiddenFocusableElement || !this.el.nativeElement?.contains(relatedTarget) ? getFirstFocusableElement(currentTarget.parentElement, ':not(.p-hidden-focusable)') : this.lastHiddenFocusableElement;\n\n        focus(focusableElement as any);\n    }\n\n    onLastHiddenElementFocus(event) {\n        const { currentTarget, relatedTarget } = event;\n        const focusableElement =\n            relatedTarget === this.firstHiddenFocusableElement || !this.el.nativeElement?.contains(relatedTarget) ? getLastFocusableElement(currentTarget.parentElement, ':not(.p-hidden-focusable)') : this.firstHiddenFocusableElement;\n\n        focus(focusableElement as any);\n    }\n}\n\n@NgModule({\n    imports: [FocusTrap],\n    exports: [FocusTrap]\n})\nexport class FocusTrapModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;AAKA;;;AAGG;AAKG,MAAO,SAAU,SAAQ,aAAa,CAAA;AACxC;;;AAGG;IACH,kBAAkB,GAAG,KAAK,CAAC,KAAK,0FAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAElE,IAAA,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;AAEhC,IAAA,QAAQ,GAAa,MAAM,CAAC,QAAQ,CAAC;AAErC,IAAA,2BAA2B;AAE3B,IAAA,0BAA0B;AAE1B,IAAA,WAAA,GAAA;AACI,QAAA,KAAK,EAAE;QAEP,MAAM,CAAC,MAAK;AACR,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,EAAE;AAE1C,YAAA,IAAI,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;gBACpC,IAAI,QAAQ,EAAE;oBACV,IAAI,CAAC,6BAA6B,EAAE;gBACxC;qBAAO;oBACH,IAAI,CAAC,6BAA6B,EAAE;gBACxC;YACJ;AACJ,QAAA,CAAC,CAAC;IACN;IAEA,MAAM,GAAA;AACF,QAAA,IAAI,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE;AAClE,YAAA,CAAC,IAAI,CAAC,2BAA2B,IAAI,CAAC,IAAI,CAAC,0BAA0B,IAAI,IAAI,CAAC,6BAA6B,EAAE;QACjH;IACJ;IAEA,6BAA6B,GAAA;QACzB,IAAI,IAAI,CAAC,2BAA2B,IAAI,IAAI,CAAC,2BAA2B,CAAC,UAAU,EAAE;YACjF,IAAI,CAAC,2BAA2B,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,2BAA2B,CAAC;QAC7F;QAEA,IAAI,IAAI,CAAC,0BAA0B,IAAI,IAAI,CAAC,0BAA0B,CAAC,UAAU,EAAE;YAC/E,IAAI,CAAC,0BAA0B,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,0BAA0B,CAAC;QAC3F;IACJ;AACA,IAAA,mBAAmB,CAAC,QAAQ,EAAA;AACxB,QAAA,OAAO,CAAA,+DAAA,EAAkE,QAAQ,IAAI,EAAE,EAAE;IAC7F;IAEA,6BAA6B,GAAA;QACzB,MAAM,QAAQ,GAAG,GAAG;QAEpB,MAAM,sBAAsB,GAAG,CAAC,OAAO,KACnC,aAAa,CAAC,MAAM,EAAE;AAClB,YAAA,KAAK,EAAE,wCAAwC;YAC/C,QAAQ;AACR,YAAA,IAAI,EAAE,cAAc;AACpB,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,0BAA0B,EAAE,IAAI;AAChC,YAAA,yBAAyB,EAAE,IAAI;AAC/B,YAAA,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI;AAC9B,SAAA,CAAgB;QAErB,IAAI,CAAC,2BAA2B,GAAG,sBAAsB,CAAC,IAAI,CAAC,yBAAyB,CAAC;QACzF,IAAI,CAAC,0BAA0B,GAAG,sBAAsB,CAAC,IAAI,CAAC,wBAAwB,CAAC;QAEvF,IAAI,CAAC,2BAA2B,CAAC,YAAY,CAAC,iBAAiB,EAAE,uBAAuB,CAAC;QACzF,IAAI,CAAC,0BAA0B,CAAC,YAAY,CAAC,iBAAiB,EAAE,sBAAsB,CAAC;QAEvF,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC;QAC/D,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,0BAA0B,CAAC;IACjE;AAEA,IAAA,yBAAyB,CAAC,KAAK,EAAA;AAC3B,QAAA,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,KAAK;AAC9C,QAAA,MAAM,gBAAgB,GAClB,aAAa,KAAK,IAAI,CAAC,0BAA0B,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC,aAAa,CAAC,GAAG,wBAAwB,CAAC,aAAa,CAAC,aAAa,EAAE,2BAA2B,CAAC,GAAG,IAAI,CAAC,0BAA0B;QAE/N,KAAK,CAAC,gBAAuB,CAAC;IAClC;AAEA,IAAA,wBAAwB,CAAC,KAAK,EAAA;AAC1B,QAAA,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,KAAK;AAC9C,QAAA,MAAM,gBAAgB,GAClB,aAAa,KAAK,IAAI,CAAC,2BAA2B,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC,aAAa,CAAC,GAAG,uBAAuB,CAAC,aAAa,CAAC,aAAa,EAAE,2BAA2B,CAAC,GAAG,IAAI,CAAC,2BAA2B;QAEhO,KAAK,CAAC,gBAAuB,CAAC;IAClC;uGAxFS,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAT,SAAS,EAAA,UAAA,EAAA,CAAA;kBAJrB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,UAAU,EAAE;AACf,iBAAA;;MAgGY,eAAe,CAAA;uGAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAf,eAAe,EAAA,OAAA,EAAA,CA/Ff,SAAS,CAAA,EAAA,OAAA,EAAA,CAAT,SAAS,CAAA,EAAA,CAAA;wGA+FT,eAAe,EAAA,CAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,SAAS,CAAC;oBACpB,OAAO,EAAE,CAAC,SAAS;AACtB,iBAAA;;;AC3GD;;AAEG;;;;"}