@clr/angular
Version:
Angular components for Clarity
96 lines • 12.8 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 { Injectable } from '@angular/core';
import { Linkers } from '../../utils/focus/focusable-item/linkers';
import { InitialFocus } from './button-group-focus.enum';
import * as i0 from "@angular/core";
import * as i1 from "../../utils/focus/focus.service";
import * as i2 from "../../utils";
export class ButtonGroupFocusHandler {
constructor(focusService, toggleService, renderer) {
this.focusService = focusService;
this.toggleService = toggleService;
this.renderer = renderer;
this.initialFocus = InitialFocus.FIRST_ITEM;
this._unlistenFuncs = [];
}
ngOnDestroy() {
this._unlistenFuncs.forEach((unlisten) => unlisten());
this.focusService.detachListeners();
}
initialize({ menu, menuToggle }) {
this.menu = menu;
this.menuToggle = menuToggle;
this.focusService.registerContainer(this.menu, '-1');
this.listenToKeys();
this.linkButtons();
switch (this.initialFocus) {
case InitialFocus.LAST_ITEM:
this.focusLastItem();
break;
default:
this.focusFirstItem();
break;
}
}
resetButtonsFocus() {
this.buttons.forEach(button => {
button.blur();
});
}
listenToKeys() {
this._unlistenFuncs.push(this.renderer.listen(this.menu, 'keydown.shift.tab', event => this.closeMenu(event, false)));
this._unlistenFuncs.push(this.renderer.listen(this.menu, 'keydown.tab', event => this.closeMenu(event, true)));
}
closeMenu(event, focusBackOnToggle) {
this.toggleService.toggleWithEvent(event);
if (focusBackOnToggle) {
this.menuToggle.focus();
}
this.resetButtonsFocus();
}
linkButtons() {
const buttonElements = Array.from(this.menu.children);
this.buttons = buttonElements.map(buttonElement => {
this._unlistenFuncs.push(this.renderer.listen(buttonElement, 'click', event => this.closeMenu(event, true)));
return {
id: buttonElement.id,
value: buttonElement,
focus: () => {
buttonElement.setAttribute('tabindex', '0');
buttonElement.focus();
},
blur: () => {
buttonElement.setAttribute('tabindex', '-1');
buttonElement.blur();
},
};
});
this.resetButtonsFocus();
Linkers.linkVertical(this.buttons);
}
focusFirstItem() {
if (this.buttons.length) {
this.focusService.moveTo(this.buttons[0]);
}
this.initialFocus = InitialFocus.FIRST_ITEM;
}
focusLastItem() {
if (this.buttons.length) {
this.focusService.moveTo(this.buttons[this.buttons.length - 1]);
}
this.initialFocus = InitialFocus.FIRST_ITEM;
}
}
ButtonGroupFocusHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ButtonGroupFocusHandler, deps: [{ token: i1.FocusService }, { token: i2.ClrPopoverToggleService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
ButtonGroupFocusHandler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ButtonGroupFocusHandler });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ButtonGroupFocusHandler, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i1.FocusService }, { type: i2.ClrPopoverToggleService }, { type: i0.Renderer2 }]; } });
export const BUTTON_GROUP_FOCUS_HANDLER_PROVIDER = {
provide: ButtonGroupFocusHandler,
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLWdyb3VwLWZvY3VzLWhhbmRsZXIuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXIvc3JjL2J1dHRvbi9wcm92aWRlcnMvYnV0dG9uLWdyb3VwLWZvY3VzLWhhbmRsZXIuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7OztHQUlHO0FBRUgsT0FBTyxFQUFFLFVBQVUsRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUt0RCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDbkUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDJCQUEyQixDQUFDOzs7O0FBR3pELE1BQU0sT0FBTyx1QkFBdUI7SUFRbEMsWUFDVSxZQUEwQixFQUMxQixhQUFzQyxFQUN0QyxRQUFtQjtRQUZuQixpQkFBWSxHQUFaLFlBQVksQ0FBYztRQUMxQixrQkFBYSxHQUFiLGFBQWEsQ0FBeUI7UUFDdEMsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQVY3QixpQkFBWSxHQUFpQixZQUFZLENBQUMsVUFBVSxDQUFDO1FBSzdDLG1CQUFjLEdBQW1CLEVBQUUsQ0FBQztJQU16QyxDQUFDO0lBRUosV0FBVztRQUNULElBQUksQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLENBQUMsUUFBb0IsRUFBRSxFQUFFLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQztRQUNsRSxJQUFJLENBQUMsWUFBWSxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQ3RDLENBQUM7SUFFRCxVQUFVLENBQUMsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFrRDtRQUM3RSxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztRQUNqQixJQUFJLENBQUMsVUFBVSxHQUFHLFVBQVUsQ0FBQztRQUU3QixJQUFJLENBQUMsWUFBWSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLENBQUM7UUFD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WUFBWSxHQUFHLFlBQVksQ0FBQyxVQUFVLENBQUM7SUFDOUMsQ0FBQztJQUVPLGFBQWE7UUFDbkIsSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRTtZQUN2QixJQUFJLENBQUMsWUFBWSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUM7U0FDakU7UUFDRCxJQUFJLENBQUMsWUFBWSxHQUFHLFlBQVksQ0FBQyxVQUFVLENBQUM7SUFDOUMsQ0FBQzs7b0hBM0ZVLHVCQUF1Qjt3SEFBdkIsdUJBQXVCOzJGQUF2Qix1QkFBdUI7a0JBRG5DLFVBQVU7O0FBK0ZYLE1BQU0sQ0FBQyxNQUFNLG1DQUFtQyxHQUFHO0lBQ2pELE9BQU8sRUFBRSx1QkFBdUI7Q0FDakMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTYtMjAyMyBWTXdhcmUsIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqIFRoaXMgc29mdHdhcmUgaXMgcmVsZWFzZWQgdW5kZXIgTUlUIGxpY2Vuc2UuXG4gKiBUaGUgZnVsbCBsaWNlbnNlIGluZm9ybWF0aW9uIGNhbiBiZSBmb3VuZCBpbiBMSUNFTlNFIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHByb2plY3QuXG4gKi9cblxuaW1wb3J0IHsgSW5qZWN0YWJsZSwgUmVuZGVyZXIyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IENsclBvcG92ZXJUb2dnbGVTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgRm9jdXNTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vdXRpbHMvZm9jdXMvZm9jdXMuc2VydmljZSc7XG5pbXBvcnQgeyBGb2N1c2FibGVJdGVtIH0gZnJvbSAnLi4vLi4vdXRpbHMvZm9jdXMvZm9jdXNhYmxlLWl0ZW0vZm9jdXNhYmxlLWl0ZW0nO1xuaW1wb3J0IHsgTGlua2VycyB9IGZyb20gJy4uLy4uL3V0aWxzL2ZvY3VzL2ZvY3VzYWJsZS1pdGVtL2xpbmtlcnMnO1xuaW1wb3J0IHsgSW5pdGlhbEZvY3VzIH0gZnJvbSAnLi9idXR0b24tZ3JvdXAtZm9jdXMuZW51bSc7XG5cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBCdXR0b25Hcm91cEZvY3VzSGFuZGxlciB7XG4gIGluaXRpYWxGb2N1czogSW5pdGlhbEZvY3VzID0gSW5pdGlhbEZvY3VzLkZJUlNUX0lURU07XG5cbiAgcHJpdmF0ZSBtZW51OiBIVE1MRWxlbWVudDtcbiAgcHJpdmF0ZSBtZW51VG9nZ2xlOiBIVE1MRWxlbWVudDtcbiAgcHJpdmF0ZSBidXR0b25zOiBGb2N1c2FibGVJdGVtW107XG4gIHByaXZhdGUgX3VubGlzdGVuRnVuY3M6ICgoKSA9PiB2b2lkKVtdID0gW107XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBmb2N1c1NlcnZpY2U6IEZvY3VzU2VydmljZSxcbiAgICBwcml2YXRlIHRvZ2dsZVNlcnZpY2U6IENsclBvcG92ZXJUb2dnbGVTZXJ2aWNlLFxuICAgIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMlxuICApIHt9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5fdW5saXN0ZW5GdW5jcy5mb3JFYWNoKCh1bmxpc3RlbjogKCkgPT4gdm9pZCkgPT4gdW5saXN0ZW4oKSk7XG4gICAgdGhpcy5mb2N1c1NlcnZpY2UuZGV0YWNoTGlzdGVuZXJzKCk7XG4gIH1cblxuICBpbml0aWFsaXplKHsgbWVudSwgbWVudVRvZ2dsZSB9OiB7IG1lbnU6IEhUTUxFbGVtZW50OyBtZW51VG9nZ2xlOiBIVE1MRWxlbWVudCB9KSB7XG4gICAgdGhpcy5tZW51ID0gbWVudTtcbiAgICB0aGlzLm1lbnVUb2dnbGUgPSBtZW51VG9nZ2xlO1xuXG4gICAgdGhpcy5mb2N1c1NlcnZpY2UucmVnaXN0ZXJDb250YWluZXIodGhpcy5tZW51LCAnLTEnKTtcbiAgICB0aGlzLmxpc3RlblRvS2V5cygpO1xuICAgIHRoaXMubGlua0J1dHRvbnMoKTtcblxuICAgIHN3aXRjaCAodGhpcy5pbml0aWFsRm9jdXMpIHtcbiAgICAgIGNhc2UgSW5pdGlhbEZvY3VzLkxBU1RfSVRFTTpcbiAgICAgICAgdGhpcy5mb2N1c0xhc3RJdGVtKCk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgdGhpcy5mb2N1c0ZpcnN0SXRlbSgpO1xuICAgICAgICBicmVhaztcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIHJlc2V0QnV0dG9uc0ZvY3VzKCkge1xuICAgIHRoaXMuYnV0dG9ucy5mb3JFYWNoKGJ1dHRvbiA9PiB7XG4gICAgICBidXR0b24uYmx1cigpO1xuICAgIH0pO1xuICB9XG5cbiAgcHJpdmF0ZSBsaXN0ZW5Ub0tleXMoKSB7XG4gICAgdGhpcy5fdW5saXN0ZW5GdW5jcy5wdXNoKFxuICAgICAgdGhpcy5yZW5kZXJlci5saXN0ZW4odGhpcy5tZW51LCAna2V5ZG93bi5zaGlmdC50YWInLCBldmVudCA9PiB0aGlzLmNsb3NlTWVudShldmVudCwgZmFsc2UpKVxuICAgICk7XG4gICAgdGhpcy5fdW5saXN0ZW5GdW5jcy5wdXNoKHRoaXMucmVuZGVyZXIubGlzdGVuKHRoaXMubWVudSwgJ2tleWRvd24udGFiJywgZXZlbnQgPT4gdGhpcy5jbG9zZU1lbnUoZXZlbnQsIHRydWUpKSk7XG4gIH1cblxuICBwcml2YXRlIGNsb3NlTWVudShldmVudDogS2V5Ym9hcmRFdmVudCwgZm9jdXNCYWNrT25Ub2dnbGU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLnRvZ2dsZVNlcnZpY2UudG9nZ2xlV2l0aEV2ZW50KGV2ZW50KTtcbiAgICBpZiAoZm9jdXNCYWNrT25Ub2dnbGUpIHtcbiAgICAgIHRoaXMubWVudVRvZ2dsZS5mb2N1cygpO1xuICAgIH1cbiAgICB0aGlzLnJlc2V0QnV0dG9uc0ZvY3VzKCk7XG4gIH1cblxuICBwcml2YXRlIGxpbmtCdXR0b25zKCkge1xuICAgIGNvbnN0IGJ1dHRvbkVsZW1lbnRzID0gQXJyYXkuZnJvbSh0aGlzLm1lbnUuY2hpbGRyZW4pIGFzIEhUTUxFbGVtZW50W107XG4gICAgdGhpcy5idXR0b25zID0gYnV0dG9uRWxlbWVudHMubWFwPEZvY3VzYWJsZUl0ZW0+KGJ1dHRvbkVsZW1lbnQgPT4ge1xuICAgICAgdGhpcy5fdW5saXN0ZW5GdW5jcy5wdXNoKHRoaXMucmVuZGVyZXIubGlzdGVuKGJ1dHRvbkVsZW1lbnQsICdjbGljaycsIGV2ZW50ID0+IHRoaXMuY2xvc2VNZW51KGV2ZW50LCB0cnVlKSkpO1xuICAgICAgcmV0dXJuIHtcbiAgICAgICAgaWQ6IGJ1dHRvbkVsZW1lbnQuaWQsXG4gICAgICAgIHZhbHVlOiBidXR0b25FbGVtZW50LFxuICAgICAgICBmb2N1czogKCkgPT4ge1xuICAgICAgICAgIGJ1dHRvbkVsZW1lbnQuc2V0QXR0cmlidXRlKCd0YWJpbmRleCcsICcwJyk7XG4gICAgICAgICAgYnV0dG9uRWxlbWVudC5mb2N1cygpO1xuICAgICAgICB9LFxuICAgICAgICBibHVyOiAoKSA9PiB7XG4gICAgICAgICAgYnV0dG9uRWxlbWVudC5zZXRBdHRyaWJ1dGUoJ3RhYmluZGV4JywgJy0xJyk7XG4gICAgICAgICAgYnV0dG9uRWxlbWVudC5ibHVyKCk7XG4gICAgICAgIH0sXG4gICAgICB9O1xuICAgIH0pO1xuICAgIHRoaXMucmVzZXRCdXR0b25zRm9jdXMoKTtcbiAgICBMaW5rZXJzLmxpbmtWZXJ0aWNhbCh0aGlzLmJ1dHRvbnMpO1xuICB9XG5cbiAgcHJpdmF0ZSBmb2N1c0ZpcnN0SXRlbSgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5idXR0b25zLmxlbmd0aCkge1xuICAgICAgdGhpcy5mb2N1c1NlcnZpY2UubW92ZVRvKHRoaXMuYnV0dG9uc1swXSk7XG4gICAgfVxuICAgIHRoaXMuaW5pdGlhbEZvY3VzID0gSW5pdGlhbEZvY3VzLkZJUlNUX0lURU07XG4gIH1cblxuICBwcml2YXRlIGZvY3VzTGFzdEl0ZW0oKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuYnV0dG9ucy5sZW5ndGgpIHtcbiAgICAgIHRoaXMuZm9jdXNTZXJ2aWNlLm1vdmVUbyh0aGlzLmJ1dHRvbnNbdGhpcy5idXR0b25zLmxlbmd0aCAtIDFdKTtcbiAgICB9XG4gICAgdGhpcy5pbml0aWFsRm9jdXMgPSBJbml0aWFsRm9jdXMuRklSU1RfSVRFTTtcbiAgfVxufVxuXG5leHBvcnQgY29uc3QgQlVUVE9OX0dST1VQX0ZPQ1VTX0hBTkRMRVJfUFJPVklERVIgPSB7XG4gIHByb3ZpZGU6IEJ1dHRvbkdyb3VwRm9jdXNIYW5kbGVyLFxufTtcbiJdfQ==