@clr/angular
Version:
Angular components for Clarity
102 lines • 13.3 kB
JavaScript
/*
* Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
import { Component, Input } from '@angular/core';
import { Keys } from '../../../utils/enums/keys.enum';
import { ClrKeyFocus } from './key-focus';
import * as i0 from "@angular/core";
export class ClrRovingTabindex extends ClrKeyFocus {
constructor(elementRef, renderer) {
super(elementRef);
this.renderer = renderer;
this.disabled = false;
}
// Proxy the input, as the selector name from parent class will still be "clrKeyFocus".
get rovingIndexItems() {
return this.focusableItems;
}
set rovingIndexItems(elements) {
this.focusableItems = elements;
}
set rovingTabindexDisabled(disabled) {
this.disabled = disabled;
if (this.currentItem) {
this.setTabindex(this.currentItem, disabled ? -1 : 0);
}
}
handleKeyboardEvent(event) {
if (this.prevKeyPressed(event) && this.currentFocusIsNotFirstItem()) {
this.updateTabindex(this.current - 1);
}
else if (this.nextKeyPressed(event) && this.currentFocusIsNotLastItem()) {
this.updateTabindex(this.current + 1);
}
else if (event.code === Keys.Home) {
this.updateTabindex(0);
}
else if (event.code === Keys.End) {
this.updateTabindex(this.focusableItems.length - 1);
}
super.handleKeyboardEvent(event);
}
setClickedItemCurrent(event) {
let position;
if (this.focusableItems[0].nativeElement) {
position = this.focusableItems.map(item => item.nativeElement).indexOf(event.target);
}
else {
position = this.focusableItems.indexOf(event.target);
}
if (position > -1) {
this.updateTabindex(position);
}
super.setClickedItemCurrent(event);
}
initializeFocus() {
if (this.focusableItems && this.focusableItems.length) {
this.focusableItems.forEach(item => {
this.setTabindex(item, -1);
});
// It is possible that the focus was on an element, whose index is no longer available.
// This can happen when some of the focusable elements are being removed.
// In such cases, the new focus is initialized on the last focusable element.
if (this.current >= this.focusableItems.length) {
this.current = this.focusableItems.length - 1;
}
if (!this.disabled && this.currentItem) {
this.setTabindex(this.currentItem, 0);
}
}
super.initializeFocus();
}
updateTabindex(newIndex) {
this.setTabindex(this.currentItem, -1);
this.setTabindex(this.focusableItems[newIndex], 0);
}
setTabindex(item, value) {
if (item instanceof HTMLElement) {
this.renderer.setAttribute(item, 'tabindex', value.toString());
}
else {
this.renderer.setAttribute(item.nativeElement, 'tabindex', value.toString());
}
}
}
ClrRovingTabindex.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrRovingTabindex, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
ClrRovingTabindex.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrRovingTabindex, selector: "[clrRovingTabindex]", inputs: { rovingIndexItems: ["clrRovingTabindex", "rovingIndexItems"], rovingTabindexDisabled: ["clrRovingTabindexDisabled", "rovingTabindexDisabled"] }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrRovingTabindex, decorators: [{
type: Component,
args: [{
selector: '[clrRovingTabindex]',
template: '<ng-content></ng-content>',
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { rovingIndexItems: [{
type: Input,
args: ['clrRovingTabindex']
}], rovingTabindexDisabled: [{
type: Input,
args: ['clrRovingTabindexDisabled']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm92aW5nLXRhYmluZGV4LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci9zcmMvdXRpbHMvZm9jdXMva2V5LWZvY3VzL3JvdmluZy10YWJpbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7OztHQUlHO0FBRUgsT0FBTyxFQUFFLFNBQVMsRUFBYyxLQUFLLEVBQWEsTUFBTSxlQUFlLENBQUM7QUFFeEUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBRXRELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxhQUFhLENBQUM7O0FBTTFDLE1BQU0sT0FBTyxpQkFBa0IsU0FBUSxXQUFXO0lBR2hELFlBQVksVUFBc0IsRUFBVSxRQUFtQjtRQUM3RCxLQUFLLENBQUMsVUFBVSxDQUFDLENBQUM7UUFEd0IsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUZ2RCxhQUFRLEdBQUcsS0FBSyxDQUFDO0lBSXpCLENBQUM7SUFFRCx1RkFBdUY7SUFDdkYsSUFDSSxnQkFBZ0I7UUFDbEIsT0FBTyxJQUFJLENBQUMsY0FBYyxDQUFDO0lBQzdCLENBQUM7SUFDRCxJQUFJLGdCQUFnQixDQUFDLFFBQXVDO1FBQzFELElBQUksQ0FBQyxjQUFjLEdBQUcsUUFBZ0MsQ0FBQztJQUN6RCxDQUFDO0lBRUQsSUFDSSxzQkFBc0IsQ0FBQyxRQUFpQjtRQUMxQyxJQUFJLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztRQUN6QixJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDcEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1NBQ3ZEO0lBQ0gsQ0FBQztJQUVRLG1CQUFtQixDQUFDLEtBQW9CO1FBQy9DLElBQUksSUFBSSxDQUFDLGNBQWMsQ0FBQyxLQUFL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QUUsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUM7U0FDaEU7YUFBTTtZQUNMLElBQUksQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUUsVUFBVSxFQUFFLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO1NBQzlFO0lBQ0gsQ0FBQzs7OEdBbEZVLGlCQUFpQjtrR0FBakIsaUJBQWlCLDRPQUZsQiwyQkFBMkI7MkZBRTFCLGlCQUFpQjtrQkFKN0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUscUJBQXFCO29CQUMvQixRQUFRLEVBQUUsMkJBQTJCO2lCQUN0Qzt5SEFVSyxnQkFBZ0I7c0JBRG5CLEtBQUs7dUJBQUMsbUJBQW1CO2dCQVN0QixzQkFBc0I7c0JBRHpCLEtBQUs7dUJBQUMsMkJBQTJCIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIENvcHlyaWdodCAoYykgMjAxNi0yMDIzIFZNd2FyZSwgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICogVGhpcyBzb2Z0d2FyZSBpcyByZWxlYXNlZCB1bmRlciBNSVQgbGljZW5zZS5cbiAqIFRoZSBmdWxsIGxpY2Vuc2UgaW5mb3JtYXRpb24gY2FuIGJlIGZvdW5kIGluIExJQ0VOU0UgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgcHJvamVjdC5cbiAqL1xuXG5pbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0LCBSZW5kZXJlcjIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgS2V5cyB9IGZyb20gJy4uLy4uLy4uL3V0aWxzL2VudW1zL2tleXMuZW51bSc7XG5pbXBvcnQgeyBGb2N1c2FibGVJdGVtIH0gZnJvbSAnLi9pbnRlcmZhY2VzJztcbmltcG9ydCB7IENscktleUZvY3VzIH0gZnJvbSAnLi9rZXktZm9jdXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdbY2xyUm92aW5nVGFiaW5kZXhdJyxcbiAgdGVtcGxhdGU6ICc8bmctY29udGVudD48L25nLWNvbnRlbnQ+Jyxcbn0pXG5leHBvcnQgY2xhc3MgQ2xyUm92aW5nVGFiaW5kZXggZXh0ZW5kcyBDbHJLZXlGb2N1cyB7XG4gIHByaXZhdGUgZGlzYWJsZWQgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcihlbGVtZW50UmVmOiBFbGVtZW50UmVmLCBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIpIHtcbiAgICBzdXBlcihlbGVtZW50UmVmKTtcbiAgfVxuXG4gIC8vIFByb3h5IHRoZSBpbnB1dCwgYXMgdGhlIHNlbGVjdG9yIG5hbWUgZnJvbSBwYXJlbnQgY2xhc3Mgd2lsbCBzdGlsbCBiZSBcImNscktleUZvY3VzXCIuXG4gIEBJbnB1dCgnY2xyUm92aW5nVGFiaW5kZXgnKVxuICBnZXQgcm92aW5nSW5kZXhJdGVtcygpOiBBcnJheTxGb2N1c2FibGVJdGVtPiB8IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuZm9jdXNhYmxlSXRlbXM7XG4gIH1cbiAgc2V0IHJvdmluZ0luZGV4SXRlbXMoZWxlbWVudHM6IEFycmF5PEZvY3VzYWJsZUl0ZW0+IHwgc3RyaW5nKSB7XG4gICAgdGhpcy5mb2N1c2FibGVJdGVtcyA9IGVsZW1lbnRzIGFzIEFycmF5PEZvY3VzYWJsZUl0ZW0+O1xuICB9XG5cbiAgQElucHV0KCdjbHJSb3ZpbmdUYWJpbmRleERpc2FibGVkJylcbiAgc2V0IHJvdmluZ1RhYmluZGV4RGlzYWJsZWQoZGlzYWJsZWQ6IGJvb2xlYW4pIHtcbiAgICB0aGlzLmRpc2FibGVkID0gZGlzYWJsZWQ7XG4gICAgaWYgKHRoaXMuY3VycmVudEl0ZW0pIHtcbiAgICAgIHRoaXMuc2V0VGFiaW5kZXgodGhpcy5jdXJyZW50SXRlbSwgZGlzYWJsZWQgPyAtMSA6IDApO1xuICAgIH1cbiAgfVxuXG4gIG92ZXJyaWRlIGhhbmRsZUtleWJvYXJkRXZlbnQoZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICBpZiAodGhpcy5wcmV2S2V5UHJlc3NlZChldmVudCkgJiYgdGhpcy5jdXJyZW50Rm9jdXNJc05vdEZpcnN0SXRlbSgpKSB7XG4gICAgICB0aGlzLnVwZGF0ZVRhYmluZGV4KHRoaXMuY3VycmVudCAtIDEpO1xuICAgIH0gZWxzZSBpZiAodGhpcy5uZXh0S2V5UHJlc3NlZChldmVudCkgJiYgdGhpcy5jdXJyZW50Rm9jdXNJc05vdExhc3RJdGVtKCkpIHtcbiAgICAgIHRoaXMudXBkYXRlVGFiaW5kZXgodGhpcy5jdXJyZW50ICsgMSk7XG4gICAgfSBlbHNlIGlmIChldmVudC5jb2RlID09PSBLZXlzLkhvbWUpIHtcbiAgICAgIHRoaXMudXBkYXRlVGFiaW5kZXgoMCk7XG4gICAgfSBlbHNlIGlmIChldmVudC5jb2RlID09PSBLZXlzLkVuZCkge1xuICAgICAgdGhpcy51cGRhdGVUYWJpbmRleCh0aGlzLmZvY3VzYWJsZUl0ZW1zLmxlbmd0aCAtIDEpO1xuICAgIH1cbiAgICBzdXBlci5oYW5kbGVLZXlib2FyZEV2ZW50KGV2ZW50KTtcbiAgfVxuXG4gIG92ZXJyaWRlIHNldENsaWNrZWRJdGVtQ3VycmVudChldmVudDogYW55KSB7XG4gICAgbGV0IHBvc2l0aW9uOiBudW1iZXI7XG5cbiAgICBpZiAodGhpcy5mb2N1c2FibGVJdGVtc1swXS5uYXRpdmVFbGVtZW50KSB7XG4gICAgICBwb3NpdGlvbiA9IHRoaXMuZm9jdXNhYmxlSXRlbXMubWFwKGl0ZW0gPT4gaXRlbS5uYXRpdmVFbGVtZW50KS5pbmRleE9mKGV2ZW50LnRhcmdldCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHBvc2l0aW9uID0gdGhpcy5mb2N1c2FibGVJdGVtcy5pbmRleE9mKGV2ZW50LnRhcmdldCk7XG4gICAgfVxuXG4gICAgaWYgKHBvc2l0aW9uID4gLTEpIHtcbiAgICAgIHRoaXMudXBkYXRlVGFiaW5kZXgocG9zaXRpb24pO1xuICAgIH1cbiAgICBzdXBlci5zZXRDbGlja2VkSXRlbUN1cnJlbnQoZXZlbnQpO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIGluaXRpYWxpemVGb2N1cygpIHtcbiAgICBpZiAodGhpcy5mb2N1c2FibGVJdGVtcyAmJiB0aGlzLmZvY3VzYWJsZUl0ZW1zLmxlbmd0aCkge1xuICAgICAgdGhpcy5mb2N1c2FibGVJdGVtcy5mb3JFYWNoKGl0ZW0gPT4ge1xuICAgICAgICB0aGlzLnNldFRhYmluZGV4KGl0ZW0sIC0xKTtcbiAgICAgIH0pO1xuXG4gICAgICAvLyBJdCBpcyBwb3NzaWJsZSB0aGF0IHRoZSBmb2N1cyB3YXMgb24gYW4gZWxlbWVudCwgd2hvc2UgaW5kZXggaXMgbm8gbG9uZ2VyIGF2YWlsYWJsZS5cbiAgICAgIC8vIFRoaXMgY2FuIGhhcHBlbiB3aGVuIHNvbWUgb2YgdGhlIGZvY3VzYWJsZSBlbGVtZW50cyBhcmUgYmVpbmcgcmVtb3ZlZC5cbiAgICAgIC8vIEluIHN1Y2ggY2FzZXMsIHRoZSBuZXcgZm9jdXMgaXMgaW5pdGlhbGl6ZWQgb24gdGhlIGxhc3QgZm9jdXNhYmxlIGVsZW1lbnQuXG4gICAgICBpZiAodGhpcy5jdXJyZW50ID49IHRoaXMuZm9jdXNhYmxlSXRlbXMubGVuZ3RoKSB7XG4gICAgICAgIHRoaXMuY3VycmVudCA9IHRoaXMuZm9jdXNhYmxlSXRlbXMubGVuZ3RoIC0gMTtcbiAgICAgIH1cbiAgICAgIGlmICghdGhpcy5kaXNhYmxlZCAmJiB0aGlzLmN1cnJlbnRJdGVtKSB7XG4gICAgICAgIHRoaXMuc2V0VGFiaW5kZXgodGhpcy5jdXJyZW50SXRlbSwgMCk7XG4gICAgICB9XG4gICAgfVxuICAgIHN1cGVyLmluaXRpYWxpemVGb2N1cygpO1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVUYWJpbmRleChuZXdJbmRleDogbnVtYmVyKSB7XG4gICAgdGhpcy5zZXRUYWJpbmRleCh0aGlzLmN1cnJlbnRJdGVtLCAtMSk7XG4gICAgdGhpcy5zZXRUYWJpbmRleCh0aGlzLmZvY3VzYWJsZUl0ZW1zW25ld0luZGV4XSwgMCk7XG4gIH1cblxuICBwcml2YXRlIHNldFRhYmluZGV4KGl0ZW06IEZvY3VzYWJsZUl0ZW0sIHZhbHVlOiBudW1iZXIpIHtcbiAgICBpZiAoaXRlbSBpbnN0YW5jZW9mIEhUTUxFbGVtZW50KSB7XG4gICAgICB0aGlzLnJlbmRlcmVyLnNldEF0dHJpYnV0ZShpdGVtLCAndGFiaW5kZXgnLCB2YWx1ZS50b1N0cmluZygpKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5yZW5kZXJlci5zZXRBdHRyaWJ1dGUoaXRlbS5uYXRpdmVFbGVtZW50LCAndGFiaW5kZXgnLCB2YWx1ZS50b1N0cmluZygpKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==