@nova-ui/bits
Version:
SolarWinds Nova Framework
63 lines • 9.23 kB
JavaScript
// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to
// deal in the Software without restriction, including without limitation the
// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
// sell copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
import { Injectable } from "@angular/core";
import isNull from "lodash/isNull";
import * as i0 from "@angular/core";
export const focusableElementsCSSSelector = "[tabindex], button, a, input:not([type=hidden])";
export class TabNavigationService {
constructor() {
// cache to remember the altered DOM elements that will be later restored
this.tabFocusableElements = [];
}
disableTabNavigation(domElRef) {
// dom manipulation to cache the altered elements
// and do tabIndex=-1 on focusable HTML elements
this.tabFocusableElements = [];
domElRef.nativeElement
.querySelectorAll(focusableElementsCSSSelector)
.forEach((domEl) => {
const tabIndex = domEl.getAttribute("tabindex");
this.tabFocusableElements.push({
nativeElement: domEl,
tabIndex: isNull(tabIndex) ? undefined : tabIndex,
});
// disable focusing element via tab
domEl.setAttribute("tabindex", "-1");
});
}
restoreTabNavigation() {
// dom manipulation to restore the tabIndex for the cached elements
// and remove the tabIndex for those who didn't had it at all
this.tabFocusableElements.forEach((e) => {
if (e?.tabIndex?.length) {
e.nativeElement.setAttribute("tabindex", e.tabIndex);
}
else {
e.nativeElement.removeAttribute("tabindex");
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabNavigationService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabNavigationService, decorators: [{
type: Injectable
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLW5hdmlnYXRpb24uc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zZXJ2aWNlcy90YWItbmF2aWdhdGlvbi5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlEQUF5RDtBQUN6RCxFQUFFO0FBQ0YsK0VBQStFO0FBQy9FLDRFQUE0RTtBQUM1RSw4RUFBOEU7QUFDOUUsK0VBQStFO0FBQy9FLDhFQUE4RTtBQUM5RSw0REFBNEQ7QUFDNUQsRUFBRTtBQUNGLDZFQUE2RTtBQUM3RSx1REFBdUQ7QUFDdkQsRUFBRTtBQUNGLDZFQUE2RTtBQUM3RSw0RUFBNEU7QUFDNUUsK0VBQStFO0FBQy9FLDBFQUEwRTtBQUMxRSxpRkFBaUY7QUFDakYsNkVBQTZFO0FBQzdFLGlCQUFpQjtBQUVqQixPQUFPLEVBQWMsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZELE9BQU8sTUFBTSxNQUFNLGVBQWUsQ0FBQzs7QUFFbkMsTUFBTSxDQUFDLE1BQU0sNEJBQTRCLEdBQ3JDLGlEQUFpRCxDQUFDO0FBY3RELE1BQU0sT0FBTyxvQkFBb0I7SUFEakM7UUFFSSx5RUFBeUU7UUFDakUseUJBQW9CLEdBQXdCLEVBQUUsQ0FBQztLQStCMUQ7SUE3QlUsb0JBQW9CLENBQUMsUUFBb0I7UUFDNUMsaURBQWlEO1FBQ2pELGdEQUFnRDtRQUNoRCxJQUFJLENBQUMsb0JBQW9CLEdBQUcsRUFBRSxDQUFDO1FBQy9CLFFBQVEsQ0FBQyxhQUFhO2FBQ2pCLGdCQUFnQixDQUFDLDRCQUE0QixDQUFDO2FBQzlDLE9BQU8sQ0FBQyxDQUFDLEtBQWMsRUFBRSxFQUFFO1lBQ3hCLE1BQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxZQUFZLENBQUMsVUFBVSxDQUFDLENBQUM7WUFDaEQsSUFBSSxDQUFDLG9CQUFvQixDQUFDLElBQUksQ0FBQztnQkFDM0IsYUFBYSxFQUFFLEtBQUs7Z0JBQ3BCLFFBQVEsRUFBRSxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsUUFBUTthQUNwRCxDQUFDLENBQUM7WUFFSCxtQ0FBbUM7WUFDbkMsS0FBSyxDQUFDLFlBQVksQ0FBQyxVQUFVLEVBQUUsSUFBSSxDQUFDLENBQUM7UUFDekMsQ0FBQyxDQUFDLENBQUM7SUFDWCxDQUFDO0lBRU0sb0JBQW9CO1FBQ3ZCLG1FQUFtRTtRQUNuRSw2REFBNkQ7UUFDN0QsSUFBSSxDQUFDLG9CQUFvQixDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFO1lBQ3BDLElBQUksQ0FBQyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUU7Z0JBQ3JCLENBQUMsQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsRUFBRSxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUM7YUFDeEQ7aUJBQU07Z0JBQ0gsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxlQUFlLENBQUMsVUFBVSxDQUFDLENBQUM7YUFDL0M7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7K0dBaENRLG9CQUFvQjttSEFBcEIsb0JBQW9COzs0RkFBcEIsb0JBQW9CO2tCQURoQyxVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiLy8gwqkgMjAyMiBTb2xhcldpbmRzIFdvcmxkd2lkZSwgTExDLiBBbGwgcmlnaHRzIHJlc2VydmVkLlxuLy9cbi8vIFBlcm1pc3Npb24gaXMgaGVyZWJ5IGdyYW50ZWQsIGZyZWUgb2YgY2hhcmdlLCB0byBhbnkgcGVyc29uIG9idGFpbmluZyBhIGNvcHlcbi8vICBvZiB0aGlzIHNvZnR3YXJlIGFuZCBhc3NvY2lhdGVkIGRvY3VtZW50YXRpb24gZmlsZXMgKHRoZSBcIlNvZnR3YXJlXCIpLCB0b1xuLy8gIGRlYWwgaW4gdGhlIFNvZnR3YXJlIHdpdGhvdXQgcmVzdHJpY3Rpb24sIGluY2x1ZGluZyB3aXRob3V0IGxpbWl0YXRpb24gdGhlXG4vLyAgcmlnaHRzIHRvIHVzZSwgY29weSwgbW9kaWZ5LCBtZXJnZSwgcHVibGlzaCwgZGlzdHJpYnV0ZSwgc3VibGljZW5zZSwgYW5kL29yXG4vLyAgc2VsbCBjb3BpZXMgb2YgdGhlIFNvZnR3YXJlLCBhbmQgdG8gcGVybWl0IHBlcnNvbnMgdG8gd2hvbSB0aGUgU29mdHdhcmUgaXNcbi8vICBmdXJuaXNoZWQgdG8gZG8gc28sIHN1YmplY3QgdG8gdGhlIGZvbGxvd2luZyBjb25kaXRpb25zOlxuLy9cbi8vIFRoZSBhYm92ZSBjb3B5cmlnaHQgbm90aWNlIGFuZCB0aGlzIHBlcm1pc3Npb24gbm90aWNlIHNoYWxsIGJlIGluY2x1ZGVkIGluXG4vLyAgYWxsIGNvcGllcyBvciBzdWJzdGFudGlhbCBwb3J0aW9ucyBvZiB0aGUgU29mdHdhcmUuXG4vL1xuLy8gVEhFIFNPRlRXQVJFIElTIFBST1ZJREVEIFwiQVMgSVNcIiwgV0lUSE9VVCBXQVJSQU5UWSBPRiBBTlkgS0lORCwgRVhQUkVTUyBPUlxuLy8gIElNUExJRUQsIElOQ0xVRElORyBCVVQgTk9UIExJTUlURUQgVE8gVEhFIFdBUlJBTlRJRVMgT0YgTUVSQ0hBTlRBQklMSVRZLFxuLy8gIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFIEFORCBOT05JTkZSSU5HRU1FTlQuIElOIE5PIEVWRU5UIFNIQUxMIFRIRVxuLy8gIEFVVEhPUlMgT1IgQ09QWVJJR0hUIEhPTERFUlMgQkUgTElBQkxFIEZPUiBBTlkgQ0xBSU0sIERBTUFHRVMgT1IgT1RIRVJcbi8vICBMSUFCSUxJVFksIFdIRVRIRVIgSU4gQU4gQUNUSU9OIE9GIENPTlRSQUNULCBUT1JUIE9SIE9USEVSV0lTRSwgQVJJU0lORyBGUk9NLFxuLy8gIE9VVCBPRiBPUiBJTiBDT05ORUNUSU9OIFdJVEggVEhFIFNPRlRXQVJFIE9SIFRIRSBVU0UgT1IgT1RIRVIgREVBTElOR1MgSU5cbi8vICBUSEUgU09GVFdBUkUuXG5cbmltcG9ydCB7IEVsZW1lbnRSZWYsIEluamVjdGFibGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IGlzTnVsbCBmcm9tIFwibG9kYXNoL2lzTnVsbFwiO1xuXG5leHBvcnQgY29uc3QgZm9jdXNhYmxlRWxlbWVudHNDU1NTZWxlY3RvciA9XG4gICAgXCJbdGFiaW5kZXhdLCBidXR0b24sIGEsIGlucHV0Om5vdChbdHlwZT1oaWRkZW5dKVwiO1xuXG5pbnRlcmZhY2UgSUZvY3VzYWJsZUVsZW1lbnQge1xuICAgIG5hdGl2ZUVsZW1lbnQ6IEVsZW1lbnQ7XG4gICAgdGFiSW5kZXg/OiBzdHJpbmc7XG59XG5cbmludGVyZmFjZSBJVGFiTmF2aWdhdGlvblNlcnZpY2Uge1xuICAgIGRpc2FibGVUYWJOYXZpZ2F0aW9uKGRvbUVsUmVmOiBFbGVtZW50UmVmKTogdm9pZDtcblxuICAgIHJlc3RvcmVUYWJOYXZpZ2F0aW9uKCk6IHZvaWQ7XG59XG5cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBUYWJOYXZpZ2F0aW9uU2VydmljZSBpbXBsZW1lbnRzIElUYWJOYXZpZ2F0aW9uU2VydmljZSB7XG4gICAgLy8gY2FjaGUgdG8gcmVtZW1iZXIgdGhlIGFsdGVyZWQgRE9NIGVsZW1lbnRzIHRoYXQgd2lsbCBiZSBsYXRlciByZXN0b3JlZFxuICAgIHByaXZhdGUgdGFiRm9jdXNhYmxlRWxlbWVudHM6IElGb2N1c2FibGVFbGVtZW50W10gPSBbXTtcblxuICAgIHB1YmxpYyBkaXNhYmxlVGFiTmF2aWdhdGlvbihkb21FbFJlZjogRWxlbWVudFJlZik6IHZvaWQge1xuICAgICAgICAvLyBkb20gbWFuaXB1bGF0aW9uIHRvIGNhY2hlIHRoZSBhbHRlcmVkIGVsZW1lbnRzXG4gICAgICAgIC8vIGFuZCBkbyB0YWJJbmRleD0tMSBvbiBmb2N1c2FibGUgSFRNTCBlbGVtZW50c1xuICAgICAgICB0aGlzLnRhYkZvY3VzYWJsZUVsZW1lbnRzID0gW107XG4gICAgICAgIGRvbUVsUmVmLm5hdGl2ZUVsZW1lbnRcbiAgICAgICAgICAgIC5xdWVyeVNlbGVjdG9yQWxsKGZvY3VzYWJsZUVsZW1lbnRzQ1NTU2VsZWN0b3IpXG4gICAgICAgICAgICAuZm9yRWFjaCgoZG9tRWw6IEVsZW1lbnQpID0+IHtcbiAgICAgICAgICAgICAgICBjb25zdCB0YWJJbmRleCA9IGRvbUVsLmdldEF0dHJpYnV0ZShcInRhYmluZGV4XCIpO1xuICAgICAgICAgICAgICAgIHRoaXMudGFiRm9jdXNhYmxlRWxlbWVudHMucHVzaCh7XG4gICAgICAgICAgICAgICAgICAgIG5hdGl2ZUVsZW1lbnQ6IGRvbUVsLFxuICAgICAgICAgICAgICAgICAgICB0YWJJbmRleDogaXNOdWxsKHRhYkluZGV4KSA/IHVuZGVmaW5lZCA6IHRhYkluZGV4LFxuICAgICAgICAgICAgICAgIH0pO1xuXG4gICAgICAgICAgICAgICAgLy8gZGlzYWJsZSBmb2N1c2luZyBlbGVtZW50IHZpYSB0YWJcbiAgICAgICAgICAgICAgICBkb21FbC5zZXRBdHRyaWJ1dGUoXCJ0YWJpbmRleFwiLCBcIi0xXCIpO1xuICAgICAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgcHVibGljIHJlc3RvcmVUYWJOYXZpZ2F0aW9uKCk6IHZvaWQge1xuICAgICAgICAvLyBkb20gbWFuaXB1bGF0aW9uIHRvIHJlc3RvcmUgdGhlIHRhYkluZGV4IGZvciB0aGUgY2FjaGVkIGVsZW1lbnRzXG4gICAgICAgIC8vIGFuZCByZW1vdmUgdGhlIHRhYkluZGV4IGZvciB0aG9zZSB3aG8gZGlkbid0IGhhZCBpdCBhdCBhbGxcbiAgICAgICAgdGhpcy50YWJGb2N1c2FibGVFbGVtZW50cy5mb3JFYWNoKChlKSA9PiB7XG4gICAgICAgICAgICBpZiAoZT8udGFiSW5kZXg/Lmxlbmd0aCkge1xuICAgICAgICAgICAgICAgIGUubmF0aXZlRWxlbWVudC5zZXRBdHRyaWJ1dGUoXCJ0YWJpbmRleFwiLCBlLnRhYkluZGV4KTtcbiAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgZS5uYXRpdmVFbGVtZW50LnJlbW92ZUF0dHJpYnV0ZShcInRhYmluZGV4XCIpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICB9XG59XG4iXX0=