@gravionlabs/helix-core 22.0.0

package/fesm2022/gravionlabs-helix-core-focustrap.mjs

@@ -0,0 +1,105 @@
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, inject, PLATFORM_ID, Directive, NgModule } from '@angular/core';
+import { createElement, getFirstFocusableElement, focus, getLastFocusableElement } from '@gravionlabs/helix-core/uix/utils';
+import { BaseComponent } from '@gravionlabs/helix-core/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;
+    onInit() {
+        if (isPlatformBrowser(this.platformId) && !this.pFocusTrapDisabled()) {
+            !this.firstHiddenFocusableElement && !this.lastHiddenFocusableElement && this.createHiddenFocusableElements();
+        }
+    }
+    onChanges(changes) {
+        if (changes.pFocusTrapDisabled && isPlatformBrowser(this.platformId)) {
+            if (changes.pFocusTrapDisabled.currentValue) {
+                this.removeHiddenFocusableElements();
+            }
+            else {
+                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(.h-hidden-focusable):not([data-h-hidden-focusable="true"])${selector ?? ''}`;
+    }
+    createHiddenFocusableElements() {
+        const tabindex = '0';
+        const createFocusableElement = (onFocus) => {
+            return createElement('span', {
+                class: 'h-hidden-accessible h-hidden-focusable',
+                tabindex,
+                role: 'presentation',
+                'aria-hidden': true,
+                'data-h-hidden-accessible': true,
+                'data-h-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(.h-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(.h-hidden-focusable)') : this.firstHiddenFocusableElement;
+        focus(focusableElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FocusTrap, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: FocusTrap, isStandalone: true, selector: "[hFocusTrap]", 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.6", ngImport: i0, type: FocusTrap, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hFocusTrap]',
+                    standalone: true
+                }]
+        }], 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.6", ngImport: i0, type: FocusTrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: FocusTrapModule, imports: [FocusTrap], exports: [FocusTrap] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FocusTrapModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FocusTrapModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [FocusTrap],
+                    exports: [FocusTrap]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FocusTrap, FocusTrapModule };
+//# sourceMappingURL=gravionlabs-helix-core-focustrap.mjs.map

package/fesm2022/gravionlabs-helix-core-focustrap.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"gravionlabs-helix-core-focustrap.mjs","sources":["../../../projects/core/focustrap/focustrap.ts","../../../projects/core/focustrap/gravionlabs-helix-core-focustrap.ts"],"sourcesContent":["import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { booleanAttribute, Directive, inject, NgModule, PLATFORM_ID, SimpleChanges, input } from '@angular/core';\nimport { createElement, focus, getFirstFocusableElement, getLastFocusableElement } from '@gravionlabs/helix-core/uix/utils';\nimport { BaseComponent } from '@gravionlabs/helix-core/basecomponent';\n\n/**\n * Focus Trap keeps focus within a certain DOM element while tabbing.\n * @group Components\n */\n@Directive({\n    selector: '[hFocusTrap]',\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    readonly pFocusTrapDisabled = input<boolean, unknown>(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    onInit() {\n        if (isPlatformBrowser(this.platformId) && !this.pFocusTrapDisabled()) {\n            !this.firstHiddenFocusableElement && !this.lastHiddenFocusableElement && this.createHiddenFocusableElements();\n        }\n    }\n\n    onChanges(changes: SimpleChanges) {\n        if (changes.pFocusTrapDisabled && isPlatformBrowser(this.platformId)) {\n            if (changes.pFocusTrapDisabled.currentValue) {\n                this.removeHiddenFocusableElements();\n            } else {\n                this.createHiddenFocusableElements();\n            }\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(.h-hidden-focusable):not([data-h-hidden-focusable=\"true\"])${selector ?? ''}`;\n    }\n\n    createHiddenFocusableElements() {\n        const tabindex = '0';\n\n        const createFocusableElement = (onFocus) => {\n            return createElement('span', {\n                class: 'h-hidden-accessible h-hidden-focusable',\n                tabindex,\n                role: 'presentation',\n                'aria-hidden': true,\n                'data-h-hidden-accessible': true,\n                'data-h-hidden-focusable': true,\n                onFocus: onFocus?.bind(this)\n            }) as HTMLElement;\n        };\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(.h-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(.h-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;IACM,kBAAkB,GAAG,KAAK,CAAmB,KAAK,0FAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE7F,IAAA,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;AAEhC,IAAA,QAAQ,GAAa,MAAM,CAAC,QAAQ,CAAC;AAErC,IAAA,2BAA2B;AAE3B,IAAA,0BAA0B;IAE1B,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;AAEA,IAAA,SAAS,CAAC,OAAsB,EAAA;QAC5B,IAAI,OAAO,CAAC,kBAAkB,IAAI,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;AAClE,YAAA,IAAI,OAAO,CAAC,kBAAkB,CAAC,YAAY,EAAE;gBACzC,IAAI,CAAC,6BAA6B,EAAE;YACxC;iBAAO;gBACH,IAAI,CAAC,6BAA6B,EAAE;YACxC;QACJ;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;AAEpB,QAAA,MAAM,sBAAsB,GAAG,CAAC,OAAO,KAAI;YACvC,OAAO,aAAa,CAAC,MAAM,EAAE;AACzB,gBAAA,KAAK,EAAE,wCAAwC;gBAC/C,QAAQ;AACR,gBAAA,IAAI,EAAE,cAAc;AACpB,gBAAA,aAAa,EAAE,IAAI;AACnB,gBAAA,0BAA0B,EAAE,IAAI;AAChC,gBAAA,yBAAyB,EAAE,IAAI;AAC/B,gBAAA,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI;AAC9B,aAAA,CAAgB;AACrB,QAAA,CAAC;QAED,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;uGAnFS,SAAS,EAAA,IAAA,EAAA,IAAA,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;;MA2FY,eAAe,CAAA;uGAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAf,eAAe,EAAA,OAAA,EAAA,CA1Ff,SAAS,CAAA,EAAA,OAAA,EAAA,CAAT,SAAS,CAAA,EAAA,CAAA;wGA0FT,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;;;ACtGD;;AAEG;;"}